.rc-footer{justify-content:space-between!important;align-items:center;}

/* Being staged used to tint the whole .rc card blue/cyan (.rc-sel) —
   now the Add-to-Meal-Plan button itself (.rcard-add.on, a grey pill)
   is the only thing that changes; the card face stays neutral. */
.rc-sel{background:rgba(255,253,249,.97)!important;border-color:inherit!important;border-left-color:inherit!important;box-shadow:0 10px 26px rgba(28,28,46,.14)!important;}
.hh-option{border-radius:0!important;}
.hh-option.sel{background:#fff!important;}
/* .ck-card.selected has its own meaningful pale-pink "currently selected"
   background — restore it, since the blanket cream rule above would
   otherwise silently erase that state (same !important-vs-specificity
   trap as the earlier rolling-pin bug). */
.ck-card.selected{background:#fff8fe!important;}

/* ============================================================
   Phase 4 — text inputs, filter bar, table view, Scullery converter.
   Inputs move to the concept's frosted-glass .fieldbox look (no
   border, translucent white fill, soft shadow) instead of a solid
   pink border. Focus states (.foc/:focus) are untouched on purpose —
   they're the only visual cue an input is active, so they keep their
   existing pink highlight regardless of resting-state styling. */
.rec-search,.tiw,.tobuy-inp,.conv-inp,.conv-sel{background:rgba(255,255,255,.75)!important;border:none!important;box-shadow:0 8px 22px rgba(28,28,46,.12)!important;border-radius:16px!important;}
/* Shopping List's "Add item" field is part of the same squared-off, glowing
   look as the list rows below it (.sh-item, dish-cards.css), rather than
   the soft dark shadow shared inputs above use. */
.tobuy-inp{border-radius:0!important;box-shadow:0 0 20px rgba(255,255,255,.9)!important;}
/* Squared corners for this search box too -- everything else the shared
   rule above sets (background/border/shadow) stays the same, just not
   the rounding. */
.rec-search{border-radius:0!important;}
/* My Pantry's input specifically matches Recipes' .cf-search bar (blue
   pill border, solid white, no shadow) rather than the glassy no-border
   treatment shared by the rule above -- square corners too, matching the
   squared-off search/filter controls elsewhere (.rec-search, .cf-search),
   instead of the shared .tiw component's default pill radius. Border uses
   the same darker teal (#68c3c8) as the "My Pantry" heading below, instead
   of the paler #b0f2f5 outline other panes' inputs use, so it reads clearly
   against the gradient tab-action-bar it now sits on. */
#ing-wrap{background:#fff!important;border:2px solid #68c3c8!important;border-radius:0!important;box-shadow:none!important;}
/* My Pantry's heading uses the same blue as the input above it, instead
   of the shared .p2p-pantry-lbl teal used for other sidebar labels
   (e.g. "Staged") -- and larger than that shared 9px, so it reads as a
   proper section heading for the gradient bar it now sits in, rather than
   the small uppercase eyebrow label that works for a plain sidebar row. */
#pane-input .p2p-pantry-lbl{color:#68c3c8!important;font-size:15px!important;}
.filter-menu{border-radius:16px!important;box-shadow:0 10px 26px rgba(28,28,46,.16)!important;}
.filter-btn{border-radius:0!important;background:var(--bg)!important;}

/* Scullery — same fieldbox input treatment; unit toggle joins the
   dark-active language established in Phase 2 (.chip.on/.tog.on),
   replacing its previous pink-active state. Reference table's yellow/
   cyan header rows nudged to the exact concept palette. */
.conv-tab.on{background:var(--bg)!important;border-color:#68c3c8!important;color:#1c1c2e!important;font-size:15px!important;border-radius:0!important;}
.mref-card{border-radius:0!important;box-shadow:0 0 26px rgba(255,255,255,.9)!important;}
.mref-yhdr th{background:#fff6ae!important;}
.mref-thdr th{background:#b1f2f5!important;}
.mref-temp-row-f .mref-temp-label{background:#b1f2f5!important;}
.mref-temp-row-c .mref-temp-label{background:#fff6ae!important;}

/* ============================================================
   Phase 8 — full-bleed hero backgrounds. The solid color + pattern
   that used to stop at the bottom of .p2p-band-hdr now lives on
   .pane itself, so it runs the full height of the tab, matching
   the concept's single colored <section> per page (hero + content
   together, not a separate band). Pattern values are copied as-is
   from the pre-Phase-8 .p2p-band-hdr::before rules. */
.pane{position:relative;}
.pane{margin:0 calc(-50vw + 50%);width:100vw;}
.pane::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;}
/* Home keeps the original cream ground + gradient grid (just the pot logo
   and the concept band, no gradient bar / lower band split). Every other
   tab's header zone -- the area behind the header/gradient bar, above
   .pane-lower-band -- is now plain cream with no pattern at all; the
   yellow-to-pink gradient grid lives only on .pane-lower-band, below the
   gradient bar. */
#pane-home{background:#fffbf7!important;}
#pane-home::before{
  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;
}
#pane-recipes,#pane-planner,#pane-input,#pane-shopping,#pane-products,
#pane-gifts,#pane-feed,#pane-potluck,#pane-scullery,#pane-tastemakers{background:#fffbf7!important;}
/* Tabs with a gradient tab-action-bar (Recipes, Weekly Plan, Grocery List,
   Recommended Products, Curated Gifts, Social Feed) drop the teal+grid
   ground for everything below that bar in favor of the cream ground with
   the yellow-to-pink gradient grid -- wraps the content that used to sit
   directly on the pane's own background. Full-bleed like the bar above it,
   so the color still runs edge to edge. margin-top:-24px pulls the panel up
   over .tab-action-bar's own margin-bottom:24px (dish-cards.css) -- that gap
   sits behind the bar, not inside it, so without this the teal+grid ground
   was still showing through as a thin strip right under the bar;
   padding-top:48px (24px to cancel the pulled-up margin + the original 24px
   of breathing room) keeps the actual content sitting exactly where it did
   before. */
/* flex:1 only takes effect where its parent is display:flex -- currently
   just #pane-recipes .cf-browse (tab-headers-and-recipes-browse.css),
   made flex specifically so this band's grid-pattern ::before (below)
   stretches down to meet the footer instead of stopping wherever this
   band's own content (e.g. only 1-2 recipe cards) happens to end. A
   no-op everywhere else this shared class is used, since flex:1 does
   nothing inside a non-flex parent. */
.pane-lower-band{background:#fffbf7;position:relative;z-index:1;margin:-24px calc(-50vw + 50%) 0;width:100vw;padding:48px var(--gutter) 40px;box-sizing:border-box;flex:1;}
/* Yellow-to-pink gradient grid over the panel's cream ground -- the same
   masked-grid treatment that used to sit behind the header (.pane::before
   above), now swapped down here below the gradient bar. z-index:0 puts it
   behind the panel's real content, which needs position+z-index:1 of its
   own (below) to actually paint above it -- same reasoning as .pane::before
   vs .p2p-main/.p2p-layout further up this file. */
.pane-lower-band::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;
}
/* Social Feed and Potluck both swap the shared yellow-to-pink grid for
   scattered confetti dots (mixed size/color) instead of the square
   grid. */
#pane-feed .pane-lower-band::before{
  background:none;background-color:#fffbf7;
  background-image:
    radial-gradient(circle,var(--pink) 3px,transparent 3.5px),
    radial-gradient(circle,var(--teal) 2.5px,transparent 3px),
    radial-gradient(circle,var(--yellow) 4px,transparent 4.5px);
  background-size:64px 64px,48px 48px,80px 80px;
  background-position:0 0,20px 30px,45px 10px;
  opacity:1;
  -webkit-mask-image:none;mask-image:none;
}
/* Potluck: scattered clinking wine glasses (pink + teal, yellow spark
   at the touch point) instead of confetti -- a toast/cheers motif that
   fits the "gathering" theme. Small content on a much larger transparent
   canvas (200x160) is what gives the real white space between pairs when
   tiled, same principle as the confetti dots' small-circle-in-big-tile
   approach above. */
#pane-potluck .pane-lower-band::before{
  background:none;background-color:#fffbf7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg fill='none' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23ffc9f6' transform='translate(58 34) rotate(16 20 36)'%3E%3Cpath d='M4 6 L36 6 M4 6 Q2 30 20 36 M36 6 Q38 30 20 36 M20 36 L20 60 M10 66 L30 66 M20 60 L20 66'/%3E%3C/g%3E%3Cg stroke='%23b1f2f5' transform='translate(100 34) rotate(-16 20 36)'%3E%3Cpath d='M4 6 L36 6 M4 6 Q2 30 20 36 M36 6 Q38 30 20 36 M20 36 L20 60 M10 66 L30 66 M20 60 L20 66'/%3E%3C/g%3E%3Cpath d='M92 42 L96 36 M94 46 L100 42' stroke='%23fff6ae' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:200px 160px;
  background-repeat:repeat;
  opacity:1;
  -webkit-mask-image:none;mask-image:none;
}
.pane-lower-band>*{position:relative;z-index:1;}
/* Same idea at the bottom: each of these panes' own wrapper (.cf-browse,
   .p2p-main) carries its own trailing bottom padding (90-120px, sized for
   that pane's specific content) which sits AFTER .pane-lower-band since
   it's the last child -- that padding has no background of its own, so it
   was showing the pane's cream+grid ground right before the footer.
   Pulling the band down by that same amount and re-padding by the same
   amount keeps the visible gap before the footer exactly as it was,
   just filled with blue instead of cream+grid. */
#pane-recipes .pane-lower-band,#pane-products .pane-lower-band{margin-bottom:-90px;padding-bottom:90px;}
#pane-planner .pane-lower-band,#pane-shopping .pane-lower-band,
#pane-gifts .pane-lower-band,#pane-feed .pane-lower-band,
#pane-potluck .pane-lower-band,#pane-scullery .pane-lower-band,
#pane-tastemakers .pane-lower-band{margin-bottom:-120px;padding-bottom:120px;}
/* Recipes and Weekly Plan put the staged sidebar side by side with the
   actual grid (recipe cards / week calendar) instead of floating it as a
   separate fixed-position layer over the top -- see the "Used to be
   position:fixed" note on .staged-sidebar, css/dish-cards.css. .pane-lower-main
   is flex:1 so it's the one that shrinks/grows as the sidebar's own
   flex-basis animates between collapsed (46px) and open (280px).
   row-reverse because .staged-sidebar-spacer is the first child in markup
   but the real (fixed) sidebar it stands in for is pinned to the right
   edge of the viewport -- reversing puts the spacer on the right, in line
   with it, without having to reorder the actual HTML. */
.pane-lower-row{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:24px;}
.pane-lower-main{flex:1;min-width:0;}
#pane-shopping .pane-decor-bar{margin-top:0!important;}
#pane-recipes .pane-decor-bar{margin-top:-14px!important;}
#pane-feed .pane-decor-bar{margin-top:-46px!important;}
.scullery-active-heading{font-family:'Fuggles',cursive;font-size:clamp(40px,6.5vw,72px);font-weight:400;color:#1c1c2e;margin:16px 0 -10px;line-height:1;text-align:center;}
#pane-scullery .p2p-main{padding-top:12px!important;}
/* Feed's subnav (Feed/Friends/Taste Makers/Potluck) reuses Recipes'
   .cf-repo-tabs/.cf-repo-tab classes directly — same continuous yellow
   strip, divider lines, uppercase Jost font, everything. */
#pane-feed .cf-repo-tabs{margin-bottom:22px;}
.p2p-layout,.p2p-main{position:relative;z-index:1;}

/* ============ Cookfolio recipes-pane redesign (cf- prefixed to avoid any
   collision with other panes' generic class names like .card/.hero/.grid) ============
   The title/pill treatment itself now lives in the shared .pane-hdr-band
   rules above (renderPaneHdrBands()) — .cf-hero no longer needs to reserve
   top padding for an absolute-positioned band since the band is in normal
   flow and pushes this down naturally. */
/* width:100% (rather than leaving width:auto to flex's default stretch)
   is the actual fix for the grid-item-as-flex-child shrink-to-fit quirk
   described below -- it forces this to size like .cf-browse below it
   instead of centering a narrower, content-sized box. */
#pane-recipes .cf-hero{position:relative;z-index:1;width:100%;max-width:1280px;box-sizing:border-box;margin:0 auto;padding:0 var(--gutter) 36px;display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:start;}
@media (max-width:820px){#pane-recipes .cf-hero{grid-template-columns:1fr;padding-top:46px;}}
/* Shared decorative-bar box model, used by Recipes/Plan/Shop's "Let's ...
   it out!" bar, Forkast's flash bar, and Scullery's pattern bar (Feed
   uses its own fully standalone bar style). */
.pane-decor-bar{position:relative;z-index:5;width:100vw;margin:22px calc(-50vw + 50%) 0;height:140px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 30px rgba(28,28,46,.2);border-top:6px solid var(--pink);border-bottom:6px solid var(--pink);}
/* Recipes' bar lost its "Let's dig in!" text (moved to a real button up in
   the hero) so it's just the cup+pin doodles now -- flat, no pink
   trim/shadow, centered together instead of pinned to opposite edges. */
#pane-recipes .pane-decor-bar{box-shadow:none;border-top:none;border-bottom:none;gap:28px;}
.pane-decor-text{font:400 clamp(30px,6.5vw,84px) 'Fuggles',cursive;color:#fff;line-height:1;animation:cf-dig-in-pulse 2.4s ease-in-out infinite;position:relative;z-index:1;}
@keyframes cf-dig-in-pulse{0%,100%{color:#fff;}50%{color:#ff1493;}}
/* No pill background anymore -- pulses dark-navy/pink instead of the
   shared white/pink pulse above, since white text needs a dark bg to
   read and this now sits directly on the page. */
@keyframes cf-dig-in-btn-pulse{0%,100%{color:#1c1c2e;}50%{color:#ff1493;}}
/* 2x the prior size, right-aligned (align-self covers flex-column parents
   like most other panes' mp-col-left; margin-left:auto covers Recipes'
   plain block-flow left column), in a neon-pink frame instead of bare
   text on the page. */
/* Min kept close to the old size (was 40) rather than doubled too --
   the longer button labels ("What can I make with what I have?") wrap
   to 5-6 lines and blow way past a sane mobile height at an 80px floor.
   Short labels still read notably bigger since the max/preferred both
   doubled and most of them never wrap. Whole thing (font/padding/
   border/radius/glow) scaled down 40% (x0.6) from that pass -- it read
   too large on the page. */
.cf-dig-in-btn{display:block;width:fit-content;align-self:flex-end;margin:51px 0 0 auto;font:400 clamp(24px,7.2vw,67px) 'Fuggles',cursive;background:none;border:2px solid #ff1493;border-radius:12px;padding:6px 19px;cursor:pointer;box-shadow:0 0 8px #ff1493,0 0 18px rgba(255,20,147,.5),inset 0 0 6px rgba(255,20,147,.25);animation:cf-dig-in-btn-pulse 2.4s ease-in-out infinite;}
@keyframes forkast-bar-flash{0%,100%{background-color:#0b4f6c;}50%{background-color:var(--teal);}}
/* Its text is the biggest and longest of any decor bar ("What can I make
   with what I have?" at up to 84px) -- once the doodles flow normally
   instead of sitting absolutely off to the side, that text alone can push
   past the bar's own width and clip the doodles via overflow:hidden. */
.forkast-flash-bar{animation:forkast-bar-flash 6s ease-in-out infinite;overflow:visible;}
.forkast-flash-text{mix-blend-mode:difference;text-align:center;padding:0 24px;animation:none;}
/* Both doodles are rotated (4deg/-8deg), which paints outside their layout
   box without reserving extra space for it -- these heights are capped well
   under the bar's own 140px so the rotated bounding box (roughly 1.1-1.2x
   the unrotated height, per the ~1.5:1 width:height art) never exceeds the
   bar and gets clipped by its overflow:hidden, and stays narrow enough that
   the two don't overlap once centered together. */
/* position:static explicitly cancels the base (unscoped) .cf-bar-doodle rule's
   position:absolute;top:50% -- this height/width/opacity override alone
   doesn't touch those properties, so without this they were still absolute
   and stacking on top of each other regardless of size. */
#pane-recipes .cf-bar-doodle{position:static;height:clamp(48px,11vw,90px);width:auto;opacity:1;}
#pane-recipes .cf-bar-doodle.cf-cup{transform:translateY(var(--cf-scroll-bob,0px)) rotate(4deg);mix-blend-mode:multiply;filter:grayscale(1) contrast(.35) brightness(2.2);}
#pane-recipes .cf-bar-doodle.cf-pin{height:clamp(56px,14vw,100px);opacity:1;transform:translateY(calc(6px - var(--cf-scroll-bob,0px))) rotate(-8deg);}
/* Same fix as Recipes' cup/pin above: these were position:absolute,
   pinned to the 8%/92% edges regardless of the bar's own flex layout --
   switched to flowing normally alongside the bar's text so gap-based
   spacing actually keeps them apart instead of relying on absolute
   offsets. */
.cf-bar-doodle{position:static;height:clamp(48px,11vw,90px);width:auto;opacity:.35;}
.cf-bar-doodle.cf-bar-doodle-left{transform:translateY(var(--cf-scroll-bob,0px)) rotate(4deg);}
.cf-bar-doodle.cf-bar-doodle-right{transform:translateY(calc(-1 * var(--cf-scroll-bob,0px))) rotate(-8deg);}
@media(max-width:560px){.cf-bar-doodle-left,.cf-bar-doodle-right{display:none;}}
/* Every other pane's decor bar gets the same pink-trim/shadow strip as
   Recipes', plus a gap now that the doodles flow next to the text instead
   of being absolutely offset away from it. */
#pane-planner .pane-decor-bar,
#pane-input .pane-decor-bar,
#pane-shopping .pane-decor-bar,
#pane-products .pane-decor-bar,
#pane-gifts .pane-decor-bar,
#pane-feed .pane-decor-bar,
#pane-scullery .pane-decor-bar,
#pane-tastemakers .pane-decor-bar,
#pane-potluck .pane-decor-bar{box-shadow:none;border-top:none;border-bottom:none;gap:28px;}
#pane-recipes .cf-collage{position:relative;height:342px;}
@media(max-width:820px){#pane-recipes .cf-collage{display:none!important;}}
@keyframes cf-float-cookbook{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-16px) rotate(-2deg);}}

/* Description text is standardized across every tab to match Recipes
   ("Browse") exactly — same font, size, line-height, and margin, with no
   per-tab left-indent/vertical-offset overrides. Only the <mark> highlight
   color and bullet icon are still tab-specific. */