/* display:flex;flex-direction:column;flex:1 cascades the pane's own
   stretch-to-fill-the-viewport treatment (.pane.on{flex:1}, below in
   this file) down through .cf-browse to .pane-lower-band -- without it,
   .pane itself grows to min-height:calc(100vh + 65px) but .cf-browse (a
   plain block child with no flex-grow of its own) still only takes its
   natural content height, leaving a gap between wherever short content
   (e.g. only 1-2 recipe cards) ends and the pushed-down footer, showing
   .pane's own plain background instead of .pane-lower-band's pink grid
   pattern all the way down. */
#pane-recipes .cf-browse{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 var(--gutter) 90px;box-sizing:border-box;display:flex;flex-direction:column;flex:1;}
/* The extra padding-right:64px this used to carry (on top of the
   symmetric var(--gutter) above) was sized to clear .staged-sidebar's
   collapsed tab back when that tab was a full-height 46px-wide bar --
   now that it's a compact ~160px-tall tab (css/dish-cards.css), the
   plain gutter alone (up to 64px) already clears it, and the extra
   64px just made the right side ~2x the left, reading as the whole
   column (cards, legend) sitting left-of-center on the page. */
/* Search bar, Filter, View, and Import all share one row now -- the last
   row inside .tab-action-bar's gradient bar, below the repo tabs/Weekly
   Plan row. Import used to sit alone on its own row above this one;
   folding it in here removed that row entirely. Search fills the
   remaining space (flex:1, .recipes-top-search below) so the buttons
   line up flush against the row's right edge instead of stopping short
   at a fixed max-width. flex-wrap keeps the buttons from getting
   squeezed off narrow viewports -- they drop to a second line instead. */
.recipes-search-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.recipes-top-search{display:block;flex:1;margin:0;padding:16px 24px!important;}
#pane-products .cf-browse-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:30px;}
/* Recipes' meal-type + allergen filters collapsed into one pull-out menu
   instead of 10 separate pills -- reuses the existing .filter-btn/.filter-menu/
   .filter-opt dropdown (Last Minute's meal filter, layout-shell.css) rather
   than inventing a second dropdown component. .filter-btn is normally the
   right half of a search+filter pill (attached to a .rec-search on its left);
   standalone here, so it gets its own full pill radius instead. */
.cf-filters-btn{border-radius:0!important;border-left:none!important;padding:10px 18px!important;}
/* The shared .filter-menu (layout-shell.css) opens right:0, growing
   leftward off its button -- fine for menus near the right edge of a row,
   but Recipes' Filter button sits at the LEFT of .cf-browse-controls, so
   growing leftward pushed the menu off the left edge of the viewport on
   narrower windows. Anchoring to left:0 instead grows it rightward, into
   the open space in that row. */
#pane-recipes .filter-menu{left:0;right:auto;max-width:calc(100vw - 2 * var(--gutter));}
.filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:100px;background:var(--pink-dark);color:#fff;font-size:10px;font-weight:800;line-height:1;}
.filter-menu-lbl{padding:7px 12px 3px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);}
.filter-menu-sep{height:1px;background:rgba(0,0,0,.08);margin:4px 6px;}
/* Recipes' filter rows show a checkbox alongside the meal/allergen label.
   It's decorative (pointer-events:none) -- the row's own onclick still owns
   selection, and js/recipes-products-gifts.js keeps the checkbox's checked
   state mirroring the row's .on class. Scoped to #pane-recipes so the same
   .filter-opt class reused by other dropdowns elsewhere is unaffected. */
#pane-recipes .filter-opt{display:flex;align-items:center;gap:8px;}
#pane-recipes .filter-opt input[type=checkbox]{margin:0;width:14px;height:14px;flex-shrink:0;pointer-events:none;}
#pane-recipes .cf-search,#pane-products .cf-search,#pane-gifts .cf-search{flex:1;min-width:240px;padding:14px 20px;border-radius:0;border:2px solid #ffc9f6;background:#fff;font:300 14px 'Quicksand',sans-serif;color:#1c1c2e;outline:none;}
/* Recipes' search bar sits on the gradient bar now (not the pink pill
   border shared with Products below) -- the app's dark teal accent
   (#68c3c8, used elsewhere for buttons/panels) reads against the pink/
   yellow gradient without matching it. */
#pane-recipes .recipes-top-search{border-color:#68c3c8;}
#pane-recipes .cf-search::placeholder,#pane-products .cf-search::placeholder,#pane-gifts .cf-search::placeholder{color:#a89fae;}
#pane-recipes .cf-filter-pills,#pane-products .cf-filter-pills{display:flex;gap:0;flex-wrap:nowrap;overflow-x:auto;}
/* Gifts' category pills are the same .cf-filter-pill markup as Recipes'/
   Products' (renderGiftFilters(), js/recipes-products-gifts.js) but weren't
   in this selector list, so they fell back to the browser's bare <button>
   look -- default font, tight padding, and a visible black outline instead
   of this shared pill style. #pane-gifts .gift-wishlist-pill.on
   (curated-gifts.css) still wins on specificity for its own on-state. */
/* Category filter pills used to float as separate gapped pills -- fused
   into one continuous bar, divided by thin rules instead of gaps. */
#pane-recipes .cf-filter-pill,#pane-products .cf-filter-pill,#pane-gifts .cf-filter-pill{font:600 15px '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(0,0,0,.08);border-left:none;cursor:pointer;background:var(--bg);color:#1c1c2e;flex-shrink:0;white-space:nowrap;}
#pane-recipes .cf-filter-pill:first-child,#pane-products .cf-filter-pill:first-child,#pane-gifts .cf-filter-pill:first-child{border-left:2px solid rgba(0,0,0,.08);}
#pane-recipes .cf-filter-pill.on,#pane-products .cf-filter-pill.on,#pane-gifts .cf-filter-pill.on{background:#1c1c2e;border-color:#1c1c2e;color:#fff;}
#pane-products .p2p-main{max-width:1280px;margin:0 auto;padding:20px var(--gutter) 90px;box-sizing:border-box;}
#products-grid{margin-top:20px;}
/* Started as Recipes-only (the dynamic My Recipes/Guava's/AI Recipes
   label), now reused as a plain static page-name heading on every other
   tab too -- Julius Sans One, centered, is just the house style for this
   position now rather than a Recipes-specific override. */
.cf-source-heading{font-family:'Julius Sans One',sans-serif;font-weight:400;font-size:clamp(30px,4.4vw,46px);text-align:center;color:#1c1c2e;margin:0 0 20px;}
.cf-repo-tabs{display:flex;gap:0;flex-wrap:wrap;background:#fff6ae;border-radius:14px;overflow:hidden;max-width:fit-content;}
.cf-repo-tab{flex:none;padding:clamp(9px,2.4vw,16px) clamp(13px,3.6vw,26px);font:600 clamp(12px,2.3vw,19px) 'Jost',sans-serif;text-transform:uppercase;letter-spacing:1px;color:rgba(28,28,46,.3);border:none;border-right:2px solid #1c1c2e;background:transparent;cursor:pointer;transition:color .15s;}
.cf-repo-tab:last-child{border-right:none;}
/* Recipes', Feed's, and Scullery's tab-switchers: plain centered words
   instead of the yellow pill treatment above. */
#pane-recipes .cf-repo-tabs,#pane-feed .cf-repo-tabs,#pane-scullery .cf-repo-tabs{background:none;border-radius:0;overflow:visible;max-width:none;gap:22px;margin:0 auto 24px;}
#pane-recipes .cf-repo-tab,#pane-feed .cf-repo-tab,#pane-scullery .cf-repo-tab{padding:2px 0;font-size:clamp(10px,1.6vw,13px);color:rgba(28,28,46,.4);border-right:none;}
#pane-recipes .cf-repo-tab.on,#pane-feed .cf-repo-tab.on,#pane-scullery .cf-repo-tab.on{color:#1c1c2e;border-bottom:2px solid #1c1c2e;}
/* Recipes' own repo switcher (My Recipes/Guava's/AI Recipes) is bigger than
   Feed's/Scullery's -- it's the first thing under the header now that the
   "My Recipes" heading above it is gone, so it needs to carry more visual
   weight. */
#pane-recipes .cf-repo-tab{padding:6px 0;font-size:clamp(13px,2vw,17px);}
/* Scullery's tab row sits above a left-aligned card (.mref-card), not a
   centered heading like Recipes'/Feed's own use of .cf-repo-tabs -- the
   shared margin:0 auto above centers the tab group as a shrink-to-fit
   block, which reads as offset from the card's left edge below it.
   .cf-repo-tabs is a direct child of .p2p-band-hdr itself (a sibling of
   .p2p-band-hdr-inner, not nested in it) and that outer band's own side
   padding is zeroed -- so getting to the shared --gutter here takes an
   explicit padding-left, not just dropping the centering margin. */
#pane-scullery .cf-repo-tabs{margin:0 0 24px;padding-left:var(--gutter);box-sizing:border-box;}
.cf-repo-tab.on{color:#1c1c2e;}
/* overflow:hidden removed -- .cf-card-header (below) already clips its
   own image independently, so this outer overflow wasn't protecting
   anything visual, but it DID clip the +/save buttons' hover tooltip
   ([data-tt], css/tab-headers-and-recipes-browse.css) wherever it popped
   up past the card's own edge, cutting the tooltip text off mid-word. */
/* display:flex;flex-direction:column here (not just on .cf-card-body
   below) -- #recipes-grid is a CSS grid, and grid items stretch to match
   the tallest item in their row by default, so a taller neighbor (e.g.
   a name wrapping to 2 lines) already made .cf-card itself taller. But
   .cf-card-body is a plain block child, sized to its own content, so it
   wasn't filling that extra stretched height -- the footer row's
   margin-top:auto (below) had no real extra space to push into, and just
   sat right after the text instead of reaching the shorter cards'
   shared bottom edge. flex-direction:column here + flex:1 on
   .cf-card-body makes the body actually fill the stretched card. */
#pane-recipes .cf-card{background:#fff;border-radius:0;border:2px solid var(--teal);box-shadow:0 0 28px rgba(255,255,255,.9);transition:transform .18s;cursor:pointer;display:flex;flex-direction:column;position:relative;}
#pane-recipes .cf-card:hover{transform:translateY(-4px);}
#pane-recipes .cf-card-header{display:block;overflow:hidden;height:32px;position:relative;flex-shrink:0;}
#pane-recipes .cf-card-header img{width:100%;display:block;object-fit:cover;object-position:top center;}
/* flex:1 fills the stretched .cf-card (see above); flex-direction:column
   so .cf-card-footer-row can push itself to the bottom via
   margin-top:auto. padding-top bumped 10->16 for a bit more air above
   the title, per Jess's "move the words down a bit". */
#pane-recipes .cf-card-body{display:flex;flex-direction:column;flex:1;padding:16px 10px 10px;margin-top:-18px;position:relative;z-index:1;}
/* font-weight:700 alone doesn't read as bold here -- Julius Sans One only
   ships one weight, and not every browser fakes a bold face for a font
   that doesn't have one (Chrome does, Safari/Firefox often don't). A thin
   text-stroke in the same color adds real visual weight regardless of
   whether the browser synthesizes bold, the same trick .ph-title-box
   (dish-cards.css) uses at a heavier setting for its blockier look. */
#pane-recipes .cf-card-name{font-family:'Julius Sans One',sans-serif;font-weight:700;-webkit-text-stroke:.5px currentColor;font-size:14px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:5px;cursor:pointer;}
#pane-recipes .cf-card-meta{font-size:11px;color:#918aa0;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;}
#pane-recipes .cf-diet-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;margin-right:6px;cursor:default;flex-shrink:0;font:800 10px/1 'Quicksand',sans-serif;color:#fff;}
/* margin-top:auto pushes this row (the +/save/edit icon buttons on the
   left, the diet-letter badges on the right) to the bottom of the card
   regardless of how many lines the name/meta above wrap to -- see the
   flex-column change on .cf-card-body above. */
#pane-recipes .cf-card-footer-row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;}
#pane-recipes .cf-card-badges{display:flex;align-items:center;}
#pane-recipes .cf-card-badges .cf-diet-badge{margin-right:0;margin-left:6px;}
#pane-recipes .cf-diet-badge svg{width:11px;height:11px;}
#pane-recipes .cf-diet-badge.vegan{background:#16a34a;}
#pane-recipes .cf-diet-badge.vegetarian{background:#8fc75c;color:#14532d;}
#pane-recipes .cf-diet-badge.nuts{background:#8b5a2b;}
#pane-recipes .cf-diet-badge.gluten{background:#eab308;color:#1c1c2e;}
#pane-recipes .cf-diet-badge.dairy{background:#4285f4;}
#pane-recipes .cf-diet-badge.component{background:#6b6478;}
#pane-recipes .cf-diet-legend{display:flex;align-items:center;justify-content:center;gap:18px;font:600 12px 'Quicksand',sans-serif;color:#6b6478;margin:20px 0 0;}
#pane-recipes .cf-diet-legend-item{display:inline-flex;align-items:center;}
/* Tastemaker-sourced recipes (an external chef/blog we're crediting, see
   cfCardHtml in recipes-products-gifts.js) get a pink border instead of
   the default teal, matching the pink used for Taste Maker branding
   elsewhere (featured-tastemaker-badge, potluck.css) -- one accent color
   consistently means "Taste Maker" across the app. */
#pane-recipes .cf-card.cf-card-tastemaker{border-color:var(--pink);}
/* A visible badge on the card itself (not just the small text credit
   below), sitting over the header art in the top-right corner -- so you
   spot "this one's from a Taste Maker" while scanning the grid, before
   ever reading the card's text. White ring + shadow so it reads as a
   badge regardless of what's behind it (the plain border art today, a
   real dish photo once recipes have one). */
/* object-position:top -- see .vrb-chef-logo (shopping-and-modals.css) for
   why: these logo images are a tall lockup, mark up top, wordmark below. */
#pane-recipes .cf-card-tastemaker-badge{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top center;background:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(28,28,46,.25);z-index:2;}
#pane-recipes .cf-card-tastemaker-row{display:flex;align-items:center;gap:6px;margin:-4px 0 10px;font:600 11px 'Quicksand',sans-serif;color:var(--pink-dark,#9d174d);text-decoration:none;}
#pane-recipes .cf-card-tastemaker-row:hover{text-decoration:underline;}
/* Scoped to #pane-recipes and #pane-input (Last Minute) -- cfCardHtml()
   (app.js) renders these on the Recipes tab, and renderIngResults()
   (recipe-data-and-utils.js) reuses the same markup for Last Minute's
   result cards so both tabs' Add-to-Week/Edit buttons look the same. */
/* Custom hover tooltip for any button carrying data-tt -- a faster,
   more visible alternative to the browser's own [title] tooltip (which
   these buttons keep too, for accessibility/no-JS fallback), used here
   on the icon-only +/save/edit card buttons since an icon alone doesn't
   say what it does. content:attr(data-tt) pulls the label straight from
   the attribute, so there's one source of truth for the text, not two. */
[data-tt]{position:relative;}
[data-tt]::after{content:attr(data-tt);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:#1c1c2e;color:#fff;font:600 11px/1.3 'Jost',sans-serif;text-transform:none;letter-spacing:normal;padding:7px 11px;border-radius:8px;white-space:normal;width:max-content;max-width:180px;text-align:center;pointer-events:none;z-index:500;box-shadow:0 6px 16px rgba(28,28,46,.25);opacity:0;visibility:hidden;transition:opacity .12s ease,transform .12s ease;}
[data-tt]::before{content:'';position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1c1c2e;z-index:500;opacity:0;visibility:hidden;transition:opacity .12s ease;}
[data-tt]:hover::after,[data-tt]:hover::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
#pane-recipes .cf-card-add,#pane-input .cf-card-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 16px 'Jost',sans-serif;background:var(--bg);color:#1c1c2e;padding:9px 18px;height:44px;box-sizing:border-box;border-radius:0;border:none;cursor:pointer;white-space:nowrap;}
#pane-recipes .cf-card-add.on,#pane-input .cf-card-add.on{background:#1c1c2e;color:#fff;}
#pane-recipes .cf-card-action,#pane-input .cf-card-action{font:500 16px 'Jost',sans-serif;padding:9px 18px;height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:0;border:none;background:var(--bg);color:#1c1c2e;cursor:pointer;white-space:nowrap;}
/* Add to Week / Edit match the Feed's bare edit/delete icon buttons
   (.fp-edit-btn, auth-and-landing.css) instead of the boxed pill above --
   no background/border, just the SVG glyph with a hover-opacity nudge. */
#pane-recipes .cf-card-icon-btn,#pane-input .cf-card-icon-btn{background:none;border:none;padding:4px 6px;height:auto;width:auto;box-sizing:content-box;opacity:.85;color:#1c1c2e;cursor:pointer;display:inline-flex;align-items:center;}
#pane-recipes .cf-card-icon-btn:hover,#pane-input .cf-card-icon-btn:hover{opacity:1;}
#pane-recipes .cf-card-icon-btn svg,#pane-input .cf-card-icon-btn svg{width:18px;height:18px;}
#pane-recipes .cf-card-add.cf-card-icon-btn.on,#pane-input .cf-card-add.cf-card-icon-btn.on{background:none;opacity:1;color:#16a34a;}
/* z-index bumped 20 -> 700 -- shared by both the "+ Import" dropdown and
   (same class, different id: #cf-view-choices) the "View" dropdown. 20
   put it below .staged-sidebar (200) and other floating UI on this page,
   so it rendered behind the recipe grid/sidebar instead of on top of
   them. 700 clears .staging-nav-arrow-float's 600, the highest other
   z-index on this page. That alone wasn't enough, though: .tab-action-bar
   (dish-cards.css) is overflow:hidden, and this dropdown is a descendant
   of it positioned to extend below its bottom edge -- overflow:hidden
   clips content that overflows a container's box regardless of z-index,
   so the menu was being cut off right at that edge no matter how high
   its z-index went. Overridden to visible for Recipes specifically,
   below, since this pane's own tab-bar-doodles are hidden anyway (no
   longer needs containing) and other tabs' don't share this bar. */
#pane-recipes .cf-add-recipe-choices{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:700;background:#fff;border-radius:14px;box-shadow:0 12px 30px rgba(28,28,46,.18);padding:6px;min-width:200px;}
#pane-recipes .tab-action-bar{overflow:visible;}
/* Same clipping bug, same fix, on Forkast's ingredient-filter dropdown
   (#ing-filter-btn, html-partials/pane-planner-input.html), Curated
   Gifts' category-filter dropdown (#gift-filter-btn,
   html-partials/pane-gifts.html), and the Feed's "Post" menu
   (#feed-fab-menu, html-partials/pane-feed.html) -- grep html-partials for
   tab-action-bar + filter-btn/filter-wrap/fab-menu together before assuming
   no other spot needs this same fix. */
#pane-input .tab-action-bar{overflow:visible;}
#pane-gifts .tab-action-bar{overflow:visible;}
#pane-feed .tab-action-bar{overflow:visible;}
#pane-recipes .cf-add-recipe-choices.open{display:flex;flex-direction:column;}
#pane-recipes .cf-add-recipe-choices button{background:transparent;border:none;text-align:left;padding:11px 14px;border-radius:0;font:500 13px 'Jost',sans-serif;color:#1c1c2e;cursor:pointer;}
#pane-recipes .cf-add-recipe-choices button:hover{background:rgba(255,201,246,.25);}
/* Matched to .filter-btn's own box (layout-shell.css: padding:6px 13px;
   height:44px;font-size:15px;font-weight:500) -- View/Import used to run
   bigger/bolder (padding:13px 26px, font-weight:700, no explicit height),
   so they visibly didn't line up with Filter sitting right next to them
   in the same toolbar row. */
#pane-recipes .cf-btn{font:500 15px 'Jost',sans-serif;padding:6px 13px;height:44px;box-sizing:border-box;border-radius:0;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
#pane-recipes .cf-btn-dark{background:var(--bg);color:#1c1c2e;}


/* Cookfolio's step nav + repo tabs + search live in their own pink bar
   below the (dark) masthead, not inside it — same full-bleed breakout
   .p2p-band-hdr uses. */

/* Cookfolio's hero stays dark, but the body below it is white — so the
   Cards/List/Table view switch and the Filters & Sort button use their
   normal light-background styling here (no dark-on-dark override needed). */
#rec-filter-menu{left:0!important;right:auto!important;}
#ing-filter-menu{left:0!important;right:auto!important;}

/* Stepline's active step was only distinguished by opacity (.35 vs 1)
   against its siblings — too subtle to register at a glance. Circles
   are now white by default on every pane (overriding both the dark
   default and Cookfolio's separate white-on-dark-hero override, which
   this makes redundant), with the active step's circle flipped to
   black — one consistent rule across all 4 panes instead of a
   per-pane inversion. */
.mp-step-circle{background:#fff!important;color:#1c1c2e!important;}
.mp-step-btn.on .mp-step-circle{background:#1c1c2e!important;color:#fff!important;}

/* Last Minute's filter button (attached flat-left to the search box,
   same pattern as Cookfolio's old "Filters & Sort" button) reads as
   cut off in the cramped hero pantry row — same fix: full rounding,
   detached from the search box instead of flush against it. */
#ing-filter-btn{border-radius:0!important;border-left:none!important;margin-left:4px;}
#ing-results-search-inp{border-radius:0!important;}

/* Scullery's Volume/Weight/Temperature converter tabs switched from
   individual outlined pink pills to the same continuous segmented-bar
   look as Cookfolio's Cards/List/Table switch (.pane-tockles/.plan-seg
   pattern), just larger. .conv-tab/.setConvMode() JS untouched — only
   the wrapper and visual treatment change. */
.conv-tockles{display:flex;gap:0;background:rgba(28,28,46,.08);border-radius:16px;padding:5px;}
.conv-tockles .conv-tab{flex:1;height:auto!important;border:none!important;border-radius:0!important;background:transparent!important;font-size:16px!important;font-weight:600!important;padding:16px 26px!important;color:#1c1c2e!important;box-shadow:none!important;}
.conv-tockles .conv-tab.on{background:var(--bg)!important;color:#1c1c2e!important;font-size:19px!important;border-radius:0!important;}
/* My Pantry's input is a one-line search field, not the multi-line chip
   box .tiw defaults to for taggable inputs elsewhere -- drop the shared
   120px min-height and tall padding down to a normal single-line field. */
#ing-wrap{min-height:0!important;padding:10px 14px!important;}
/* #input-browse-section is now its own .tab-action-bar (see
   html-partials/pane-planner-input.html), which already supplies the
   bar's own side/vertical padding -- no more standalone override needed
   now that it isn't sitting directly in .p2p-band-hdr.mp-look. */
/* Standalone now that the "Filter dishes…" search box next to it is gone
   -- .filter-btn's default border-radius is a half-pill meant to attach to
   a search input on its left (layout-shell.css); this one has nothing to
   attach to. */
.ing-filter-btn-standalone{border-radius:0!important;border-left:none!important;}

/* Hero-to-content gap was ~104px (band's 40px bottom padding + main's
   64px top padding stacked) on every non-home pane — tighten both.
   Top padding is zeroed entirely so each tab's header photo runs flush
   to the very top of the viewport instead of leaving a strip of the
   pane's own background above it. */
.p2p-main{padding-top:0!important;}

/* .main{padding:65px...20px;min-height:100vh} leaves a white gap above
   every non-home pane's hero (Home avoids this itself via .hero-sec's
   own -130px negative margin) and a white gap below short panes' content
   (since .pane never stretched to fill .main's 100vh flex column). Pull
   the pane up/down to close both gaps, matching Home's own trick. */
.pane{margin:-65px calc(-50vw + 50%) -20px!important;width:100vw;min-height:calc(100vh + 65px);}

.pane.on{display:flex!important;flex-direction:column;flex:1;}
.staging-card{background:rgba(255,255,255,.85)!important;border:none!important;border-radius:0!important;box-shadow:0 0 16px rgba(255,255,255,.9)!important;}
.staging-card:hover{box-shadow:0 6px 18px rgba(28,28,46,.16)!important;}
.staging-card.placed{background:rgba(177,242,245,.35)!important;}
.staging-card.armed{background:rgba(77,188,189,.18)!important;box-shadow:0 0 0 2px rgba(77,188,189,.4)!important;}

/* ============================================================
   Phase 14 — Weekly Plan grid, cream-card consistency. Meal-type
   color now lives only in the .rpill/.spct chips (unified onto the
   shared --bk/--lu/--di/--sn/--ap variables — lunch/dinner used to
   be hardcoded hex that didn't even match those variables' own
   values, and appetizer had no styling at all). The cell itself
   becomes one consistent cream card regardless of meal type,
   matching how recipe cards already carry color via a label
   rather than a full background tint. No rotation — a fixed grid
   needs its cells aligned, not tilted. */
.rpill.bk{color:var(--bk);}
.rpill.lu{color:var(--lu);}
.rpill.di{color:var(--di);}
.rpill.sn{color:var(--sn);}
.rpill.ap{color:var(--ap);}

.rpill.bk{background:var(--bk3);}
.rpill.lu{background:var(--lu3);}
.rpill.di{background:var(--di3);}
.rpill.sn{background:var(--sn3);}
.rpill.ap{background:var(--ap3);}
.bk-s .slot-filled,.lu-s .slot-filled,.di-s .slot-filled,.sn-s .slot-filled,.ap-s .slot-filled{background:rgba(255,253,249,.97)!important;box-shadow:0 10px 26px rgba(28,28,46,.14)!important;}
.slot-inner{border-radius:0!important;}
.wg-dayhdr{border-radius:0!important;box-shadow:0 10px 26px rgba(28,28,46,.14)!important;}

/* ============================================================
   Phase 15 — Shop's shopping list, condensed into one cream
   card per section (Need to Buy / staples <details> / Already
   Have) instead of a flat list with no boundaries at all. Rows
   stay exactly as they are inside each card — no template
   changes, .sh-sel/.data-ing untouched. */
#shop-content .sh-sec,#shop-content details{background:rgba(255,253,249,.97)!important;border-radius:0!important;box-shadow:none!important;padding:18px 20px!important;}

/* Photo posts on the Social Feed sit in a responsive grid (3-4 per
   line, Polaroid-style 4:5 photo) alongside full-width text/recipe
   posts, which span the whole row. */
/* Every post spans grid-column:1/-1 below (full row), which makes this a
   single-column list in practice regardless of the auto-fill track def --
   max-width+margin:auto centers that column instead of it hugging the
   left edge of the (much wider) pane-lower-band. */
/* The feed list now shares its row with the sidebar (below), so it's
   centered by .feed-layout as a group rather than centering itself. */
.feed-layout{display:flex;gap:28px;align-items:flex-start;justify-content:center;}
#feed-posts-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:30px;align-items:start;flex:1 1 860px;max-width:860px;margin:0;}
#feed-posts-list .feed-post{grid-column:1/-1;margin-bottom:0;}
/* .feed-post's own box-shadow (auth-and-landing.css) is a white glow
   (0 0 24px rgba(255,255,255,.9)) meant for a photo/dark backdrop --
   invisible against the Feed pane's own light background, so its white
   cards had no visible separation from the page. potluck.css also
   !important's the same white glow onto .feed-post among other cards,
   so this needs both higher specificity (id+class beats its bare class
   selector) and !important to actually win. */
#feed-posts-list .feed-post{box-shadow:0 10px 30px rgba(28,28,46,.16)!important;transition:transform .2s ease,box-shadow .2s ease;animation:feed-post-in .35s ease backwards;}
#feed-posts-list .feed-post:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(28,28,46,.24)!important;}
@keyframes feed-post-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
#feed-posts-list .feed-post:nth-child(2){animation-delay:.05s;}
#feed-posts-list .feed-post:nth-child(3){animation-delay:.1s;}
#feed-posts-list .feed-post:nth-child(4){animation-delay:.15s;}
#feed-posts-list .feed-post:nth-child(n+5){animation-delay:.2s;}
@media (prefers-reduced-motion:reduce){#feed-posts-list .feed-post{animation:none;}#feed-posts-list .feed-post:hover{transform:none;}}

/* Feed sidebar: same card radius/shadow as .feed-post so the two columns
   read as one system, and the same small-caps section-title treatment as
   .sh-sec-title (css/dish-cards.css) used for in-card headers elsewhere. */
.feed-sidebar{flex:0 0 280px;display:flex;flex-direction:column;gap:18px;position:sticky;top:20px;}
.fsb-card{background:#fff;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(28,28,46,.16);}
.fsb-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;padding-bottom:9px;border-bottom:2px solid rgba(0,0,0,.08);margin-bottom:12px;}
.fsb-empty{font-size:12.5px;color:var(--muted);line-height:1.5;}
.fsb-card-btn{width:100%;justify-content:center;margin-top:14px;}
/* Messages widget reuses .dm-convo-row/.dm-convo-preview/.dm-dot from
   css/direct-messages.css (same rows as the Messages modal's inbox) --
   no widget-specific row styling needed here. */
.fsb-plan-summary{font-size:11px;color:var(--muted);margin-bottom:8px;}
.fsb-plan-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-radius:8px;}
.fsb-plan-row+.fsb-plan-row{border-top:1px solid rgba(0,0,0,.05);}
.fsb-plan-row.today{background:rgba(255,201,246,.18);margin:0 -8px;padding:5px 8px;}
.fsb-plan-row.today+.fsb-plan-row{border-top:none;}
.fsb-plan-day{font-weight:700;color:var(--muted);flex-shrink:0;}
.fsb-plan-meal{text-align:right;color:var(--dark);}
.fsb-plan-meal-empty{color:var(--muted);}
/* Dark/pink card variants match the existing dish-panel (dark) and
   potluck-remind-box (pink/yellow) conventions elsewhere in the app --
   same cream .btn-p/.btn-g buttons on top, not a new color combo. */
.fsb-card-dark{background:var(--dark);}
.fsb-card-dark .fsb-title{color:#fff;border-bottom-color:rgba(255,255,255,.15);}
.fsb-potluck-name{font-size:15px;font-weight:700;color:#fff;}
.fsb-potluck-meta{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:4px;}
.fsb-card-pink{background:var(--pink);}
@media (max-width:1340px){.feed-sidebar{display:none!important;}}
/* aspect-ratio:auto/height:auto override the base .feed-post's fixed
   16/10 aspect ratio -- that forced every card to the same height
   regardless of caption length, so a short caption left a block of blank
   space below it instead of even padding above and below. Height now
   just follows the taller of the photo and the text column. */
.feed-post.fp-photo-post{flex-direction:row;align-items:flex-start;gap:32px;aspect-ratio:auto;height:auto;}
/* Fixed width + aspect-ratio (not a fixed height) so every photo post's
   media box is the same size and shape, on every post and at every
   viewport width -- the @media (max-width:520px) override in
   auth-and-landing.css keeps this same 4:5 ratio instead of switching to
   its own hardcoded height. */
.fp-photo-media{width:432px;aspect-ratio:4/5;flex-shrink:0;position:relative;border-radius:0;overflow:hidden;}
.fp-photo-right{flex:1;max-width:350px;min-width:0;display:flex;flex-direction:column;gap:14px;position:relative;background:#fff;padding:22px;}
.fp-photo{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.feed-post:hover .fp-photo{transform:scale(1.05);}
.fp-photo-actions{display:flex;align-items:center;gap:10px;position:absolute;bottom:14px;right:14px;z-index:2;}
.fp-photo-action-btn{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;}
.fp-like-icon-btn.on{color:#1c1c2e;}
.fp-like-icon-btn .fp-like-img{width:46px;height:46px;}
.fp-like-icon-count{position:absolute;bottom:-6px;right:-6px;background:#1c1c2e;color:#fff;font-size:9px;font-weight:800;border-radius:100px;padding:1px 5px;line-height:1.3;}
/* Edit/delete + cross-post to Instagram/Facebook -- one row in the top-right
   corner of the whole post (.feed-post, position:relative in
   auth-and-landing.css), not the photo's own bottom-right corner where
   cross-post used to sit alongside Like. */
.fp-crosspost-wrap{position:absolute;top:12px;right:12px;z-index:5;display:flex;align-items:center;gap:6px;}
.fp-crosspost-btn{width:36px;height:36px;border-radius:0;background:none;border:none;color:#1c1c2e;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s;}
.fp-crosspost-btn:hover{opacity:.7;}
.fp-crosspost-btn:hover{background:#fff;}
.fp-share-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.2);padding:6px;min-width:130px;z-index:4;}
.fp-share-menu.on{display:block;}
.fp-share-menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 10px;font-size:12px;font-weight:500;color:#1c1c2e;cursor:pointer;border-radius:0;font-family:'Jost',sans-serif;}
.fp-share-menu button:hover{background:rgba(0,0,0,.05);}
.fp-crosspost-wrap .fp-edit-btn,.fp-crosspost-wrap .fp-delete-btn{width:36px;height:36px;margin-left:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;}
.fp-edit-btn{background:none;border:none;cursor:pointer;opacity:.85;padding:2px 6px;display:inline-flex;align-items:center;color:#1c1c2e;}
.fp-edit-btn:hover{opacity:1;}
.fp-edit-btn svg{width:14px;height:14px;}
.fp-carousel{position:relative;width:100%;height:100%;}
.fp-carousel-slide{display:none;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.fp-carousel-slide.on{display:block;}
.fp-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:0;background:rgba(255,255,255,.85);border:none;font-size:18px;font-weight:700;color:#1c1c2e;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;line-height:1;}
.fp-carousel-arrow[disabled]{opacity:.35;cursor:default;}
.fp-carousel-arrow-l{left:10px;}
/* Post button's dropdown -- lets the Post button in .feed-action-row pull up
   a menu of the alternative post types (week/question/photo) instead of a
   dedicated button per type. Memory Cookbook gets its own button in the row
   instead, since it isn't really a "post" alongside the others. */
.fab-menu-wrap{position:relative;}
.fab-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.22);padding:6px;min-width:190px;z-index:500;}
.fab-menu.open{display:block;}
.fab-menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:11px 14px;font-size:13px;font-weight:500;color:#1c1c2e;cursor:pointer;border-radius:0;font-family:'Jost',sans-serif;white-space:nowrap;}
.fab-menu button:hover{background:rgba(200,80,200,.08);}
.fp-carousel-arrow-r{right:10px;}
.fp-carousel-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2;}
.fp-carousel-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(28,28,46,.15);}
.fp-carousel-dot.on{background:#fff;}
.share-photo-thumb-wrap{position:relative;flex-shrink:0;width:150px;height:188px;}
.share-photo-thumb{width:150px;height:188px;object-fit:cover;border-radius:10px;display:block;}
.share-photo-thumb-rm{position:absolute;top:-7px;right:-7px;width:26px;height:26px;border-radius:0;background:#1c1c2e;color:#fff;border:none;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.share-photo-thumb-rot{position:absolute;bottom:-7px;width:30px;height:30px;border-radius:0;background:#1c1c2e;color:#fff;border:none;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.share-photo-thumb-rot-l{left:-7px;}
.share-photo-thumb-rot-r{right:-7px;}
.share-photo-thumb img.share-photo-thumb,.share-photo-thumb-wrap .share-photo-thumb{transition:transform .15s;}
.polaroid-tmpl-opt{flex-shrink:0;width:64px;cursor:pointer;text-align:center;}
.polaroid-tmpl-opt img{width:64px;height:80px;object-fit:contain;border-radius:6px;border:2.5px solid transparent;background:#f4f2ee;}
.polaroid-tmpl-opt.on img{border-color:var(--pink);}
.polaroid-tmpl-opt .polaroid-tmpl-label{font-size:9px;font-weight:700;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.polaroid-tmpl-opt.on .polaroid-tmpl-label{color:#a3117a;}
.polaroid-tmpl-none{width:64px;height:80px;border-radius:6px;border:2.5px solid transparent;background:#f4f2ee;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted);text-align:center;}
.polaroid-tmpl-opt.on .polaroid-tmpl-none{border-color:var(--pink);}
.photo-filter-opt{flex-shrink:0;width:64px;cursor:pointer;text-align:center;}
.photo-filter-opt img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:2.5px solid transparent;background:#f4f2ee;display:block;}
.photo-filter-opt.on img{border-color:var(--pink);}
.photo-filter-opt .photo-filter-label{font-size:9px;font-weight:700;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.photo-filter-opt.on .photo-filter-label{color:#a3117a;}
.fp-photo-hdr{display:flex;align-items:center;gap:10px;}
.fp-photo-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-photo-meta{display:flex;flex-direction:column;line-height:1.3;}
.fp-photo-name{font-size:22px;font-weight:700;color:var(--dark);}
.fp-photo-time{font-size:18px;color:var(--muted);}