.custom-badge{display:inline-block;background:var(--yellow);color:var(--dark);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 6px;border-radius:4px;margin-left:3px;vertical-align:middle;}
.diet-badge{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 6px;border-radius:4px;margin-left:3px;vertical-align:middle;}
.diet-badge.vegetarian{background:#dcfce7;color:#15803d;}
.diet-badge.vegan{background:#16a34a;color:#fff;}
.diet-badge.adaptable{background:#dcfce7;color:#15803d;border:1.5px dashed #15803d;}

/* P2P FULL-WIDTH BANDS */
.p2p-topbar-tockles{display:flex;gap:4px;}
/* Meal Plan: black title band + progress stepper */
#pane-planner #planner-heading{padding-left:0!important;}
/* Isolated stepline (Phase 10) — matches the mockup's plain, un-boxed
   flex row that sits directly on the hero color, instead of a
   full-bleed sticky white bar. */
#pane-planner .mp-stepper,#pane-shopping .mp-stepper,#pane-input .mp-stepper,#pane-recipes .mp-stepper{display:flex!important;flex-wrap:wrap!important;align-items:center;gap:10px 14px;margin-top:26px!important;max-width:100%;flex:none!important;border:none;border-radius:0;padding:0!important;background:none!important;box-sizing:border-box;}
#pane-planner .mp-stepper-sticky,#pane-shopping .mp-stepper-sticky,#pane-input .mp-stepper-sticky,#pane-recipes .mp-stepper-sticky{position:static;z-index:auto;box-shadow:none;background:none;}
#pane-planner .mp-step-btn,#pane-shopping .mp-step-btn,#pane-input .mp-step-btn,#pane-recipes .mp-step-btn{display:flex!important;flex:none!important;align-items:center;gap:10px;background:transparent!important;border:none!important;padding:0!important;cursor:pointer;font-family:'Quicksand',sans-serif;opacity:1;transition:opacity .15s;}
#pane-planner .mp-step-btn:not(.on),#pane-shopping .mp-step-btn:not(.on),#pane-input .mp-step-btn:not(.on),#pane-recipes .mp-step-btn:not(.on){opacity:.35;}
#pane-planner .mp-step-circle,#pane-shopping .mp-step-circle,#pane-input .mp-step-circle,#pane-recipes .mp-step-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;background:#1c1c2e;color:#fff;border:none;}
#pane-planner .mp-step-label,#pane-shopping .mp-step-label,#pane-input .mp-step-label,#pane-recipes .mp-step-label{font-family:'Quicksand',sans-serif;font-weight:700;font-size:14px;color:var(--dark);white-space:nowrap;}
#pane-planner .mp-step-line,#pane-shopping .mp-step-line,#pane-input .mp-step-line,#pane-recipes .mp-step-line{width:44px;height:0;border-top:2px solid rgba(28,28,46,.3);background:none;flex-shrink:0;}
#pane-planner .mp-step-label-short,#pane-shopping .mp-step-label-short,#pane-input .mp-step-label-short,#pane-recipes .mp-step-label-short{display:none;}

@media(max-width:760px){
  #pane-planner .mp-stepper,#pane-shopping .mp-stepper,#pane-input .mp-stepper,#pane-recipes .mp-stepper{gap:8px!important;}
  #pane-planner .mp-step-circle,#pane-shopping .mp-step-circle,#pane-input .mp-step-circle,#pane-recipes .mp-step-circle{width:22px;height:22px;font-size:11px;}
  #pane-planner .mp-step-label,#pane-shopping .mp-step-label,#pane-input .mp-step-label,#pane-recipes .mp-step-label{font-size:11px;}
  #pane-planner .mp-step-label-full,#pane-shopping .mp-step-label-full,#pane-input .mp-step-label-full,#pane-recipes .mp-step-label-full{display:none;}
  #pane-planner .mp-step-label-short,#pane-shopping .mp-step-label-short,#pane-input .mp-step-label-short,#pane-recipes .mp-step-label-short{display:inline;}
}

.p2p-topbar-tockles .plan-seg{background:transparent!important;border:1.5px solid var(--teal-accent);color:#1c1c2e!important;height:auto!important;font-size:9px;padding:3px 10px;border-radius:0;font-weight:700;opacity:1!important;box-shadow:none!important;}
.p2p-topbar-tockles .plan-seg.on{background:rgba(78,205,196,0.18)!important;}
.p2p-topbar-tockles .plan-seg:hover:not(.on){background:rgba(78,205,196,0.1)!important;}
/* Own heading bar: holds just the title/pill/description, full-bleed and
   separate from the stepper content that follows on the plain pane
   background below it. Every tab except About (which has its own bespoke
   photo band instead) shares this one band + the
   ph-wrap/trapezoid/title-box/pill/desc title treatment that originated on
   the Recipes ("Cookfolio") tab — see renderPaneHdrBands(). Left padding
   clears the mini-brand pot logo pinned at top-left; bottom padding leaves
   room for the cursive pill (which intentionally dips below the title box)
   plus the description line below that. */
.pane-hdr-band{position:relative;margin:0 calc(-50vw + 50%) 0;width:100vw;padding:64px 52px 132px 240px;box-sizing:border-box;}
@media(max-width:760px){.pane-hdr-band{padding-left:52px;}}
/* Plain in-flow block, sized to its own content (the white title box)
   always. This used to be a flex item sharing the row with .ph-doodle-wrap
   -- flex:1 (stretch) stretched it far wider than the title box itself, so
   .ph-trapezoid (inset off that stretched box, see below) ballooned into
   an awkward oversized pink shape; flex:0 1 (shrink) then tried to compress
   the box narrower than the title word actually needed whenever the row
   was tight, and since a word like "COOKFOLIO" can't wrap any narrower,
   the word (and the trapezoid) overflowed the shrunk box instead,
   reproducing the same mismatched-ratio bug from the other direction.
   .ph-doodle-wrap is positioned independently now (percentage-based, not
   flex, see below), so .ph-wrap no longer needs to share a row with it at
   all -- it just sits at its own natural size, full stop. */
.pane-hdr-band .ph-wrap{position:relative;z-index:1;display:inline-block;}
/* Slanted color block behind the title box — color varies per tab via
   data-hdr-color (ph-name-pink/teal/yellow), mapped to a hex in
   renderPaneHdrBands(). */
.pane-hdr-band .ph-trapezoid{position:absolute;inset:-12px -26px -10px -8px;clip-path:polygon(6% 0%,100% 0%,94% 100%,0% 100%);background:#fff6ae;z-index:1;}
/* white-space:normal + max-width instead of nowrap -- long titles like
   "Recommended Products" were forced onto one line at the full clamp'd
   size and overflowed past the band into the decal circle. Short titles
   (Weekly Plan, Forkast, etc.) stay single-line as before since they
   never reach the max-width. */
.pane-hdr-band .ph-title-box{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#1c1c2e;font-family:'Julius Sans One',sans-serif;font-weight:400;-webkit-text-stroke:2.6px #1c1c2e;paint-order:stroke fill;font-size:clamp(28px,5vw,58px);text-transform:uppercase;padding:14px 32px;white-space:normal;max-width:min(560px,70vw);text-align:center;line-height:1.15;}
/* Handwritten-script tagline, dipping below the title box (bottom:-64px)
   instead of sitting in normal document flow. Its own bottom edge always
   lands at title-bottom + 64px regardless of viewport (font-size grows
   upward from that anchored bottom), which is what .ph-desc below measures
   its clearance from. */
.pane-hdr-band .ph-pill{position:absolute;left:0;bottom:-64px;z-index:3;background:transparent;border-radius:12px;padding:6px 22px;font:400 clamp(40px,6.5vw,72px) 'Fuggles',cursive;color:#1c1c2e;white-space:nowrap;overflow:visible;line-height:1;}
/* Plain-sentence description restored alongside the cursive pill (not
   instead of it) -- says what the tab does, with a chevron bullet, below
   the pill's own dip so the two never overlap. */
.pane-hdr-band .ph-desc{position:absolute;left:0;top:100%;margin:74px 0 0;z-index:3;font-family:'Quicksand',sans-serif;font-weight:700;font-size:15px;line-height:1.4;color:#1c1c2e;max-width:min(480px,60vw);}
.pane-hdr-band .ph-desc-chevron{color:#1c1c2e;font-weight:900;margin-right:5px;}
/* Highlighter-style yellow band behind the description text (each tab's
   one-line "what this tab does" sentence). box-decoration-break:clone keeps
   the highlight wrapping around each line if the sentence breaks, instead of
   drawing one box across the paragraph's full bounding rect. */
.pane-hdr-band .ph-desc{background-color:#fff6ae;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:2px 8px;}
/* 2-3 blue palm-beachy doodles filling the empty space to the right of the
   title on each tab's header band (see PH_DOODLE_MOTIFS/paneHdrDoodleHtml,
   js/shopping-list.js) -- which motifs (and how many) show cycles per tab
   so they don't all repeat the same drawing/count. .ph-doodle-3 only ever
   renders on tabs that get 3 (paneHdrDoodleHtml alternates 2/3). Sized/
   positioned as percentages of the band itself (position:relative) rather
   than the title, so they stay put regardless of how long a given tab's
   title/description run. Hidden below 760px (matching .pane-hdr-band's own
   left-padding breakpoint) since a narrow band has no spare width to its
   right to put them in.
   z-index:0 (below .ph-wrap's 1) plus overflow:hidden clipped exactly to
   the band's own box -- .pane-hdr-band is position:relative, which makes
   it (and anything bleeding out of it) paint above later static-positioned
   siblings like the search bar/content below regardless of z-index or DOM
   order, so the fix is to never let a doodle extend past the band's own
   edges in the first place rather than fighting stacking order. */
.ph-doodles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ph-doodle{position:absolute;}
.ph-doodle-1{top:10%;right:18%;width:clamp(40px,6vw,76px);transform:rotate(-8deg);}
.ph-doodle-2{top:42%;right:5%;width:clamp(44px,6.5vw,84px);transform:rotate(10deg);}
.ph-doodle-3{top:64%;right:26%;width:clamp(36px,5.5vw,68px);transform:rotate(-5deg);}
@media(max-width:760px){.ph-doodles{display:none;}}
/* One large signature doodle per tab (data-hdr-doodle on the .pane-hdr-band,
   see renderPaneHdrBands(), js/shopping-list.js) -- a single big image
   instead of the small cycling .ph-doodle set above.
   left:75% (with translateX(-50%) to center on that point, not start
   there) parks it a quarter of the way in from the band's right edge --
   halfway between dead-center and the right edge -- at a fixed proportion
   of the band's width, so it holds that same relative spot as the window
   resizes instead of drifting with how wide the title happens to render.
   Percentage positioning here resolves against .pane-hdr-band's own width
   (its nearest positioned ancestor), which is the full 100vw band, not just
   the leftover space next to the title -- deliberately: it's meant to be
   at 3/4 of the *band*, regardless of whether the title text is short
   ("Forkast") or long ("Recommended Products"). top is a fixed pixel
   offset (not 50%) because the band's own height is padded out well below
   the title for the pill/description that dips under it (see .ph-pill/
   .ph-desc below) -- 50% of the whole band would sit the doodle noticeably
   lower than the title. This value roughly centers it on the title box
   instead. Hidden below 760px, matching .ph-doodles and .pane-hdr-band's
   own left-padding breakpoint, since a narrow band has no room for it. */
.ph-doodle-wrap{position:absolute;top:58px;left:75%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;}
/* Recommended Products' title ("RECOMMENDED PRODUCTS") is long enough that
   it wraps to 2 lines at ph-title-box's max-width almost always (see
   .ph-title-box below) -- taller than the 1-line title the shared top
   value above is tuned for, so the doodle needs to sit lower here or it
   overlaps the second line. */
#pane-products .ph-doodle-wrap{top:118px;}
@media(max-width:760px){.ph-doodle-wrap{display:none;}}
/* Sized by height, not width -- the source PNGs vary in aspect ratio (a
   cookbook is tall, a measuring cup is wide), and bounding by height keeps
   how much vertical room the doodle actually claims in the row predictable
   across all of them, instead of a portrait image quietly forcing a much
   taller row (and so a much bigger gap below the header) than a square one
   at the "same" size ever would. The source PNGs themselves are cropped
   tight to their drawn content already (see images/*-crop.png) rather than
   the wide transparent canvas they were exported on, which is most of what
   used to make the portrait ones render so tall in the first place.
   Capped small enough (max 150px, starting from top:36px above) that the
   doodle's own bottom edge stays inside the band's own colored area at any
   width, instead of spilling past it into the differently-colored
   .tab-action-bar gradient bar right below -- the doodle image itself is
   never meant to be cropped or drawn over by anything. */
.ph-big-doodle{position:relative;z-index:1;height:clamp(100px,19vw,180px);width:auto;max-width:min(55vw,260px);pointer-events:none;}
/* Recipes/Weekly Plan's .staged-sidebar is position:fixed (280px wide,
   z-index:200, css/dish-cards.css .staged-sidebar) pinned to the viewport's
   right edge -- it's meant to sit *above* everything, including this
   doodle, so unlike the rest of .pane-hdr-band's padding, no extra
   right-padding is reserved for it here: the doodle renders at the same
   spot every other tab's does and the sidebar simply draws over whatever
   of it that covers, same as it already does over the recipe grid/weekly
   calendar below the header. */
/* Extends the header band's doodle motif down into the gradient
   .tab-action-bar directly below it (see renderTabActionBarDoodles(),
   js/shopping-list.js). Recolored flat dark-navy/white -- the doodle PNGs'
   own pastel line-art colors (teal/pink) would clash against the bar's
   yellow/pink gradient, so each is painted via mask-image instead of its
   native src: a mask-image lets any transparent-PNG silhouette take a flat
   CSS background-color regardless of the source art's original color.
   z-index:-1 (not 0 like .ph-doodles) because .tab-action-bar's own
   in-flow content (buttons/text) is plain static-positioned -- painting
   order puts static content above a positioned z-index:0/auto sibling, so
   a negative z-index is what actually sits the doodles behind here. */
.tab-bar-doodles{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.tab-bar-doodle{position:absolute;opacity:.55;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;}
/* Centered rather than tucked against the right edge like .ph-doodle --
   these bars' right side is where the nav/action buttons live (space-
   between layouts put them flush right), so a doodle there would sit
   fully behind an opaque button and never show. The open gradient space
   is the gap between left-aligned text and the right-aligned button
   cluster, roughly the bar's middle third. */
.tab-bar-doodle-1{top:55%;right:38%;width:clamp(26px,4vw,48px);transform:rotate(-8deg);}
.tab-bar-doodle-2{top:12%;right:44%;width:clamp(22px,3.2vw,40px);transform:rotate(10deg);}
.tab-bar-doodle.doodle-dark{background:#1c1c2e;}
.tab-bar-doodle.doodle-white{background:#fff;}
.tab-bar-doodle.doodle-blue{background:#2b6f92;}
.p2p-layout{display:flex;align-items:flex-start;margin:0 calc(-50vw + 50%);width:100vw;}
.p2p-sidebar{width:260px;flex-shrink:0;background:#e8f9fa;border-right:2px solid #b1f2f5;padding:24px 20px 40px;position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto;box-sizing:border-box;z-index:1;}
#pane-shopping .p2p-sidebar{margin-top:20px;}
.p2p-sidebar-hdr{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.p2p-pantry-lbl{font-size:9px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;color:var(--teal-accent);white-space:nowrap;}
.p2p-sidebar .tiw{min-height:100px;border-radius:14px;width:100%;box-sizing:border-box;}
.p2p-main{flex:1;min-width:0;padding:64px var(--gutter) 120px;box-sizing:border-box;}
/* Weekly Plan's staged list is now an inline horizontal row above the
   calendar (matching Recipes' staged panel) instead of the old slide-out
   drawer, so there's no overlay to compact the calendar for anymore.
   The meal-type legend (Breakfast/Lunch/Dinner/Snack, matching the grid's
   row-tint colors) pairs with .week-grid inside .p2p-calendar-row --
   alignMealLegend() (js/planner.js) sizes its rows to match the grid's
   row heights; it looks up both by id, so nesting doesn't affect it. */
.p2p-calendar-row{display:flex;align-items:flex-start;}
.p2p-legend-col{flex-shrink:0;margin-right:20px;}
/* Legend+grid used to sit in their own row next to .p2p-main, flush
   against the full-bleed layout's left edge with no gutter -- nudged in
   to match .p2p-main's own left padding below. Now that both live
   inside .p2p-main, that padding comes from .p2p-main's own padding-left
   alone (see override below); the legend needs no padding of its own.
   64px (not the original 40px) so content clears the collapsed
   .staged-sidebar tab pinned to the right edge -- see that rule below. */
#pane-planner .p2p-main{padding-right:64px;}
/* No gap between rows: each .meal-legend-row's height is set by
   alignMealLegend() to match the grid's row-to-row spacing exactly, so an
   extra flex gap here would throw off the alignment row by row. */
.meal-legend{display:flex;flex-direction:column;align-items:stretch;}
.meal-legend-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
/* Weekly Plan's Breakfast/Lunch/Dinner/Snack legend is black & white instead
   of each meal type's own color -- .rpill is only ever used here (see
   js/planner.js), so this doesn't touch any other chip. Higher specificity
   (#meal-legend) beats the .rpill.bk/.lu/.di/.sn color rules below and in
   tab-headers-and-recipes-browse.css regardless of file load order. */
#meal-legend .rpill,#meal-legend .rpill.bk,#meal-legend .rpill.lu,#meal-legend .rpill.di,#meal-legend .rpill.sn,#meal-legend .rpill.ap{background:#fff;color:#1c1c2e;border:none;border-radius:0;}
/* STAGED SIDEBAR — Weekly Plan and Cookfolio's staged-dish list, collapsible.
   Defaults to open: the comment above .p2p-calendar-row explains that this
   bar used to be a hidden slide-out drawer and was made an always-visible
   inline row specifically because staged picks weren't showing up to the
   user until the drawer was opened. Collapsing this by default would
   reintroduce that exact problem, so it opens by default and only
   collapses when the person using it asks to
   (js/recipe-data-and-utils.js: toggleStagedSidebar, initStagedSidebar) --
   their choice is remembered for next time.
   Look borrowed from a brunch-spot concept page (thick black outline,
   checkerboard "tablecloth" ground, bold highlighter-yellow label chips,
   a cursive flourish) instead of the flat teal box everything else here
   uses, so the staged list reads as its own distinct, playful corner.
   position:fixed, pinned to the right edge of the viewport, so it floats
   above every tab's header/gradient bar/blue panel on its own layer
   instead of sitting inside any one of them -- but that alone would mean
   expanding/collapsing it just floats over the recipe grid or weekly
   calendar with no layout effect. .staged-sidebar-spacer (below) is an
   empty, invisible placeholder living in the real document flow
   (.pane-lower-row/.pane-lower-main, css/recipe-cards-and-search.css,
   flex-direction:row-reverse there so the spacer sits on the right)
   that mirrors this same width/collapsed state, so the grid still gets
   pushed over as if the real sidebar were an in-flow element. */
.staged-sidebar{position:fixed;right:0;top:80px;bottom:16px;z-index:200;display:flex;width:280px;background-color:#fffbf7;background-image:linear-gradient(rgba(28,28,46,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(28,28,46,.07) 1px,transparent 1px);background-size:20px 20px;border:none;border-radius:22px 0 0 22px;box-shadow:0 10px 30px rgba(28,28,46,.22);transition:width .22s ease,height .22s ease,top .22s ease,border-radius .22s ease;overflow:hidden;}
.staged-sidebar-spacer{flex:0 0 280px;transition:flex-basis .22s ease;}
.staged-sidebar-spacer.collapsed{flex-basis:46px;}
/* Collapsed: a compact tab, not a full-height bar -- top/bottom swapped
   for top+height so it's sized to just the toggle button's own content
   (~160px, matching .staged-sidebar-toggle's padding+icon+label) and
   vertically centered, instead of stretching the full viewport height
   the way the expanded panel does. */
.staged-sidebar.collapsed{width:46px;top:50%;bottom:auto;height:160px;transform:translateY(-50%);border-radius:14px 0 0 14px;}
.staged-sidebar-toggle{flex:0 0 46px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:18px 0;background:#fff6ae;border:none;border-left:3px solid #1c1c2e;cursor:pointer;color:#1c1c2e;font:600 12px 'Jost',sans-serif;letter-spacing:.08em;writing-mode:vertical-rl;text-transform:uppercase;}
.staged-sidebar.collapsed .staged-sidebar-toggle{border-left:none;}
.staged-sidebar-toggle:hover{background:#fff0a3;}
.staged-sidebar-arrow{writing-mode:horizontal-tb;font-size:13px;transition:transform .2s ease;}
.staged-sidebar.collapsed .staged-sidebar-arrow{transform:rotate(180deg);}
.staged-sidebar-count{writing-mode:horizontal-tb;background:var(--pink);color:#fff;border-radius:999px;min-width:18px;height:18px;font-size:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;}
.staged-sidebar-body{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 14px 16px 12px;box-sizing:border-box;opacity:1;transition:opacity .15s ease;}
.staged-sidebar.collapsed .staged-sidebar-body{opacity:0;pointer-events:none;}
/* Draws the eye to the staged sidebar right when a dish lands in it --
   cfPulseStagedBar() (js/recipe-data-and-utils.js) adds/removes this class.
   Scale added on top of the original box-shadow-only glow so it visibly
   "pops out" (not just brightens) toward the viewer -- transform-origin:
   right center so it grows leftward off the fixed right:0 edge instead of
   shifting that edge inward, and works whether the sidebar is expanded or
   collapsed to its 46px toggle tab. */
@keyframes stagedBarPulse{
  0%,100%{box-shadow:0 10px 30px rgba(28,28,46,.22);transform:scale(1);}
  30%{box-shadow:0 10px 30px rgba(28,28,46,.22),0 0 0 6px rgba(255,201,246,.55);transform:scale(1.045);}
  60%{transform:scale(.99);}
}
.staged-sidebar.staged-pulse{animation:stagedBarPulse .5s cubic-bezier(.34,1.56,.64,1);transform-origin:right center;}
/* The plain small-caps label everywhere else becomes a bold highlighter-
   yellow chip here, echoing the reference page's marker-stroke headlines. */
.staged-sidebar .p2p-pantry-lbl{background:#fff6ae;color:#1c1c2e;font-family:'Julius Sans One',sans-serif;font-size:13px;font-weight:400;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border:1.5px solid #1c1c2e;}
.staged-sidebar .p2p-sidebar-hdr::after{content:'your picks';font-family:'Fuggles',cursive;font-size:26px;color:var(--pink-dark);margin-left:8px;line-height:1;}
/* Only the card list scrolls -- the "Staged" label and (on Weekly Plan) the
   fill-settings gear stay outside the scroll area, since .plan-cfg's popover
   is position:absolute and would get clipped by an ancestor's overflow:auto. */
.staged-sidebar-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.staging-area-el{display:flex;flex-wrap:wrap;gap:8px;}
.staged-sidebar .staging-area-el{flex-wrap:nowrap;flex-direction:column;}
.staged-sidebar .staging-card{width:100%;box-sizing:border-box;border-radius:10px;background:#fff;}
/* Nav to/from Recipes and Grocery List, now above Weekly Plan's Fill from
   staged row instead of inside the sidebar (see pane-planner-input.html).
   Right-aligned so the staged sidebar (pinned to the right, up to 280px
   wide when open) never overlaps and hides these buttons -- the extra
   clearance comes from .tab-action-bar's own padding-right below. */
.planner-tab-nav{display:flex;justify-content:flex-end;gap:10px;margin-bottom:14px;}
/* Shared container for each tab's button/toolbar row that sits above its
   main content -- nav-to-next-tab buttons, quickbar actions, filter/search
   toolbars. Full-bleed (same -50vw/100vw trick as .p2p-band-hdr) so the
   gradient runs edge to edge instead of stopping at the content column;
   the gradient itself matches the yellow-to-pink bars at
   thehungryfamily.com/santa-lyna. Only adds background/padding/width;
   layout (flex/gap/justify) stays with whichever more specific class or
   inline style already sets it. */
/* z-index:2 (not just position:relative) is required, not decorative --
   it's what makes this element establish its own stacking context, so the
   .tab-bar-doodles child's z-index:-1 (see below) stays contained inside
   this bar and paints behind the bar's own buttons/text. Without it,
   position:relative alone doesn't create a stacking context, and the
   negative z-index escapes to the next ancestor that does -- which can
   land the doodle behind unrelated page content far above this bar.
   Was z-index:0 -- bumped to 2 (above .pane-lower-band's z-index:1,
   recipe-cards-and-search.css) after finding every filter/category
   dropdown that lives inside a .tab-action-bar (Recipes' Filter,
   Forkast's My Pantry filter, Curated Gifts' category filter) was
   silently painting BEHIND .pane-lower-band despite each dropdown's own
   z-index:700 -- that only wins comparisons within .tab-action-bar's
   own stacking context, not against .pane-lower-band, a later sibling
   with a higher z-index of its own. overflow:visible (added per-pane
   below) only fixes clipping; this fixes the separate stacking-context
   problem underneath it. */
.tab-action-bar{position:relative;z-index:2;overflow:hidden;background:linear-gradient(135deg,#fff5ad 0%,#ffc9f6 100%);margin:0 calc(-50vw + 50%) 24px;width:100vw;padding:12px var(--gutter);box-sizing:border-box;border-radius:0;}
/* Black is Weekly Plan's own bar color specifically, not a page-wide
   change -- every other pane keeps the shared yellow/pink gradient above.
   Each pane's own hero/pattern/doodle already carries its own identity;
   this just gives Weekly Plan's toolbar a matching one-off treatment.
   #planner-sub/.planner-sub-eyebrow (below) are recolored white to stay
   readable against it -- both are Weekly-Plan-only elements already, so
   no other pane needed a matching revert. */
#pane-planner .tab-action-bar{background:#1c1c2e;}
#pane-feed .tab-action-bar{background:var(--teal);}
/* 64px, not the gutter above -- same clearance value as .cf-browse/.p2p-main
   (see #pane-recipes .cf-browse, css/tab-headers-and-recipes-browse.css, and
   #pane-planner .p2p-main above) so this bar's own right-aligned buttons
   (Weekly Plan nav, Recipes repo tabs row, Import/View) clear the collapsed
   .staged-sidebar tab pinned to the right edge. */
#pane-recipes .tab-action-bar,#pane-planner .tab-action-bar{padding-right:64px;}
/* DISH PANEL */
.dish-panel{background:var(--dark);border-radius:var(--r);padding:22px;box-shadow:var(--sh-lg);position:sticky;top:80px;max-height:82vh;overflow-y:auto;}
#input-dish-panel{display:none!important;position:relative!important;top:auto!important;width:100%;box-sizing:border-box;}
.dish-panel::-webkit-scrollbar{width:4px;}
.dish-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px;}
.panel-empty{text-align:center;padding:36px 16px;}
.panel-empty .ico{font-size:36px;margin-bottom:12px;opacity:.5;}
.panel-empty p{font-size:13px;color:rgba(255,255,255,.45);line-height:1.5;}
.panel-sec{margin-bottom:20px;}
.panel-sec-title{font-family:'Quicksand',sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08);}
.sel-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.sel-row:last-child{border-bottom:none;}
.sel-row-name{font-size:13px;font-weight:600;color:#fff;}
.sel-rm{cursor:pointer;color:rgba(255,255,255,.3);font-size:18px;line-height:1;}
.sel-rm:hover{color:rgba(255,255,255,.8);}
.p-chip{display:inline-block;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);padding:3px 9px;border-radius:6px;font-size:11px;font-weight:500;margin:2px;}
.sugg-item{background:rgba(255,255,255,.07);border-radius:0;padding:11px 13px;margin-bottom:7px;cursor:pointer;transition:all .15s;border:1px solid rgba(255,255,255,.05);}
.sugg-item:hover{background:rgba(255,255,255,.13);}
.sugg-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.sugg-name{font-size:13px;font-weight:600;color:#fff;}
.panel-btn{width:100%;justify-content:center;margin-bottom:8px;}
.panel-toggle{display:flex;gap:0;background:rgba(255,255,255,.08);border-radius:12px;padding:3px;margin-bottom:16px;}
.ptab{flex:1;padding:7px 10px;border:none;border-radius:0;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;cursor:pointer;background:transparent;color:rgba(255,255,255,.45);white-space:nowrap;}
.ptab.on{background:rgba(255,255,255,.15);color:#fff;}

/* WEEK PLANNER */
/* Extra margin-bottom removed -- .pane-hdr-band's own padding-bottom is
   what creates the gap before "This Week" now (no background-image on the
   band to complicate that anymore), so every pane shares the same one gap
   instead of Planner stacking a second one on top and running noticeably
   more empty space than the rest. */
.planner-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
/* Fill settings used to push the calendar down when opened (an inline
   display:block reveal) -- floating it as a pull-out menu instead, anchored
   under the gear button (.p2p-sidebar-hdr is position:relative for this),
   same interaction as Recipes' .filter-menu: opens on top, closes on an
   outside click, doesn't shift any other content. */
.plan-cfg{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);padding:14px 18px;z-index:200;width:min(420px,90vw);box-sizing:border-box;display:none;}
.plan-cfg.open{display:block;}
.plan-cfg-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.plan-cfg-row:last-child{margin-bottom:0;}
.plan-cfg-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);width:52px;flex-shrink:0;}
/* Day/meal toggle chips and the Weekdays/Weekends/Every day presets used to
   be separate gapped pills -- each group is now its own continuous bar. */
.plan-chip-bar,.plan-preset-bar{display:flex;flex-wrap:wrap;}
.plan-chip-bar .plan-chip{border-radius:0;border-left:none;}
.plan-chip-bar .plan-chip:first-child{border-left:2px solid var(--pink);}
.plan-preset-bar .plan-preset{border-radius:0;border-left:none;}
.plan-preset-bar .plan-preset:first-child{border-left:1.5px solid rgba(0,0,0,.12);}
.plan-cfg-num{width:56px;padding:4px 8px;border-radius:8px;border:1.5px solid rgba(0,0,0,.12);font-size:12px;font-family:inherit;}
.plan-cfg-hint{font-size:10px;color:var(--muted);}
.plan-chip{font-size:12px;font-weight:500;padding:4px 11px;border-radius:50px;border:2px solid var(--pink);background:var(--pink);cursor:pointer;transition:all .15s;color:#fff;}
.plan-chip.on{background:#fff;border-color:#fff;color:var(--dark);}
.plan-preset{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;padding:3px 10px;border-radius:50px;border:1.5px solid rgba(0,0,0,.12);background:transparent;cursor:pointer;color:#1c1c2e;transition:all .15s;}
.plan-preset:hover{border-color:var(--pink);color:#1c1c2e;}
.staging-card{background:#fff;border:2px solid #ffc9f6;border-left-width:8px;border-radius:0;padding:7px 12px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:7px;}
.staging-card:hover{border-color:var(--pink);box-shadow:0 2px 10px rgba(200,80,200,.2);}
.staging-card.placed{border-color:#fff6ae;background:rgba(177,242,245,.25);}
.staging-card.armed{border-color:var(--teal-accent);background:rgba(78,205,196,.12);box-shadow:0 0 0 2px rgba(78,205,196,.35);}
.staging-name{font-size:12px;font-weight:700;color:var(--dark);}
.staging-type{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--muted);background:rgba(0,0,0,.06);padding:2px 5px;border-radius:4px;}
.staging-empty{font-size:13px;color:var(--muted);font-style:italic;}
.staging-hint{font-size:10px;font-weight:700;color:#0f6e56;background:rgba(78,205,196,.15);border-radius:8px;padding:6px 8px;margin-bottom:6px;line-height:1.4;}
/* Recipes' staged bar arrows to Weekly Plan, and back again from there --
   sits to the right of the (dynamically re-rendered) chips row, as a static
   sibling rather than inside .staging-area-el itself, since renderStaging()
   (js/recipe-data-and-utils.js) replaces that element's entire innerHTML on
   every render and would wipe out a button placed inside it.
   background used to be var(--blue-gradient), a variable never defined
   anywhere in the codebase -- it silently resolved to transparent, with
   only the box-shadow glow left showing. Light-to-dark gradient now:
   var(--teal) at the top, fading to #82dee3 -- the darkest stop -- at the
   bottom. Hover collapses to a flat #82dee3. */
.staging-nav-arrow{flex-shrink:0;height:44px;padding:0 16px;border-radius:0;border:none;background:linear-gradient(180deg,var(--teal) 0%,#82dee3 100%);color:#fff;font-family:'Jost',sans-serif;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;justify-content:center;white-space:nowrap;transition:all .15s;box-shadow:0 0 10px rgba(255,255,255,.6);}
.staging-nav-arrow:hover{background:#82dee3;color:#fff;}
/* Recipes' "To Weekly Plan" arrow, floating -- pulled out of the
   tab-action-bar row into a circle parked in the bottom-right corner so it
   stays reachable while scrolling, instead of scrolling away with the
   toolbar row above the grid. right:20px (was 260px, clearing
   .staged-sidebar's old full-height 280px panel) -- now that the
   collapsed sidebar is a compact ~160px-tall tab vertically centered in
   the viewport (css/dish-cards.css .staged-sidebar.collapsed), it no
   longer reaches anywhere near the bottom corner, so this can sit at
   the actual corner instead of leaving a wide, oddly-placed gap.

   Plain position:fixed (after two failed attempts at a pure-CSS
   alternative -- see git history on this rule if curious) -- it's
   simple and reliably visible, which matters more here than avoiding
   the footer overlap on its own. The footer overlap is instead handled
   by js/shopping-list.js's IntersectionObserver on .site-footer, which
   toggles .fab-hide-near-footer on this button once the footer enters
   view. (Why not position:sticky: sticky only holds an element from
   scrolling PAST a threshold it would otherwise cross -- it does
   nothing for an element already positioned high up the page, like
   this one right after a short hero, since at scroll:0 it's nowhere
   near that threshold yet. It never actually reads as "pinned to the
   bottom of the viewport" the way position:fixed does.)

   z-index:600 -- .staged-sidebar is z-index:200; a lower value here let
   the sidebar silently paint over this button wherever they overlapped,
   reading as "cut off" rather than a stacking mistake. 600 clears every
   other z-index in this stylesheet, including the sidebar and any
   dropdown menus. */
.staging-nav-arrow-float{position:fixed;right:20px;bottom:24px;z-index:600;width:104px;height:104px;padding:8px;border-radius:50%;font-size:12px;line-height:1.25;text-align:center;white-space:normal;box-shadow:0 8px 22px rgba(28,28,46,.28);transition:transform .15s ease,opacity .15s ease;pointer-events:all;}
.staging-nav-arrow-float:hover{transform:scale(1.08);}
.staging-nav-arrow-float.fab-hide-near-footer{opacity:0;pointer-events:none;}
/* Next-step nudge, sitting beside the To Recipes arrow -- still the
   loudest button in the row since it's pointing at the next thing to do
   once the week's filled in. Same #82dee3 fix as .staging-nav-arrow
   above. */
.plan-shopping-cta{flex-shrink:0;height:44px;padding:0 16px;border-radius:0;border:none;background:linear-gradient(180deg,var(--teal) 0%,#82dee3 100%);color:#fff;font-family:'Jost',sans-serif;font-size:15px;font-weight:700;letter-spacing:.2px;cursor:pointer;display:flex;align-items:center;gap:6px;justify-content:center;white-space:nowrap;transition:all .18s;box-shadow:0 0 10px rgba(255,255,255,.6);}
.plan-shopping-cta:hover{background:#82dee3;color:#fff;transform:translateY(-1px);}
/* Same blue/white/glow treatment as the tab-nav buttons above, but scoped
   to #pane-shopping's +Add and Shop Online buttons only -- .btn-p itself
   is shared across dozens of unrelated buttons app-wide. */
#pane-shopping .tobuy-add .btn-p{background:linear-gradient(180deg,var(--teal) 0%,#82dee3 100%);color:#fff;box-shadow:0 0 10px rgba(255,255,255,.6);}
#pane-shopping .tobuy-add .btn-p:hover{background:#82dee3;color:#fff;}
/* Same treatment on Social Feed's Post button -- scoped to its id since
   .btn-g itself is shared across dozens of unrelated buttons app-wide. */
#feed-fab-btn{background:linear-gradient(180deg,var(--pink) 0%,#ff9fe0 100%);color:#fff;box-shadow:0 0 10px rgba(255,255,255,.6);}
#feed-fab-btn:hover{background:#ff9fe0;color:#fff;}
.planner-hdr h2{font-size:22px;font-weight:800;}
#planner-sub{font-size:34px;color:#fff;margin-top:0;font-weight:800;font-family:'Jost',sans-serif;letter-spacing:.3px;}
.planner-sub-eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:2px;}
/* flex:1/min-width:0 -- .week-grid is a flex item inside .p2p-calendar-row
   alongside the fixed-width legend column. Without them it sizes to its
   own max-content (basically the width of the "+" icons) instead of
   filling the row, and every day column collapses to that same sliver. */
.week-grid{display:grid;grid-template-columns:80px repeat(7,minmax(0,1fr));grid-template-rows:auto;gap:8px;flex:1;min-width:0;}
.wg-dayhdr{background:var(--surface);border-radius:12px;padding:10px 8px;text-align:center;box-shadow:var(--sh-sm);}
.dayname{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#1c1c2e;}
.daynum{font-size:20px;font-weight:800;line-height:1.1;margin-top:2px;}
.wg-dayhdr.today{background:var(--pink);}
.wg-dayhdr.today .dayname{color:rgba(255,255,255,.6);}
.wg-dayhdr.today .daynum{color:#fff;}
.rpill{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;padding:5px 9px;border-radius:8px;text-align:center;}
.rpill.bk{background:var(--bk3);color:var(--bk);}
.rpill.lu{background:#e6f9f9;color:#2ab5b5;}
.rpill.di{background:#f1eafe;color:#7c3aed;}
.rpill.sn{background:#edfff5;color:var(--sn);}
.meal-slot{cursor:pointer;}
.slot-armable .slot-inner{border-color:var(--teal-accent);border-style:dashed;}
.slot-armable .slot-inner:hover{border-style:solid;box-shadow:0 0 0 2px rgba(78,205,196,.35);}
.slot-inner{height:100%;min-height:78px;border-radius:0;display:flex;flex-direction:column;transition:all .15s;border:2px solid rgba(255,255,255,.75);}
.slot-empty{background:rgba(255,255,255,.55);align-items:center;justify-content:center;color:var(--muted);font-size:11px;font-weight:700;gap:3px;box-shadow:var(--sh-sm);}
.slot-empty:hover{background:#fff;box-shadow:var(--sh);}
.slot-skip{background:rgba(255,255,255,.2);align-items:center;justify-content:center;border:1.5px dashed rgba(0,0,0,.12);}
.slot-plus{font-size:20px;line-height:1;opacity:.5;}
.slot-filled{padding:10px 11px;position:relative;box-shadow:var(--sh-sm);}
.slot-filled:hover{transform:translateY(-1px);box-shadow:var(--sh);}
.meal-slot.drag-over .slot-inner{outline:2px dashed rgba(200,80,200,.5);background:rgba(255,201,246,.2)!important;}
.slot-filled[draggable]{cursor:grab;}
.slot-filled[draggable]:active{cursor:grabbing;opacity:.7;}
.sname{font-size:11px;font-weight:700;line-height:1.3;margin-bottom:3px;}
/* Match Weekly Plan's sidebar/grid typography to Recipes: Quicksand for small
   uppercase labels (already Recipes' step-label face), Jost for the
   bold display numerals, Julius Sans One for staged dish names (Recipes'
   card-name face). Staged-bar cards are the same shared markup on both tabs
   (renderStaging() in js/recipe-data-and-utils.js), so these are scoped to
   both panes rather than #pane-planner alone -- otherwise Recipes' copy
   falls back to the default bold Quicksand instead of matching. */
#pane-planner .p2p-pantry-lbl,#pane-planner .planner-sub-eyebrow,#pane-planner .rpill{font-family:'Quicksand',sans-serif;}
#pane-planner .staging-type,#pane-planner .staging-empty,#pane-planner .staging-hint,
#pane-recipes .staging-type,#pane-recipes .staging-empty,#pane-recipes .staging-hint{font-family:'Quicksand',sans-serif;}
#pane-planner .staging-name,#pane-recipes .staging-name{font-family:'Julius Sans One',sans-serif;font-weight:400;letter-spacing:.2px;}
#pane-planner .dayname{font-family:'Quicksand',sans-serif;}
#pane-planner .daynum,#pane-planner #planner-sub{font-family:'Jost',sans-serif;font-weight:900;}
#pane-planner .sname{font-family:'Julius Sans One',sans-serif;font-weight:400;letter-spacing:.2px;}
.slot-item{display:flex;align-items:center;gap:4px;}
.slot-item .sname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:0;}
.slot-item-rm{flex-shrink:0;width:14px;height:14px;border-radius:0;background:rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1;cursor:pointer;opacity:.5;transition:opacity .12s;border:none;}
.slot-filled:hover .slot-item-rm{opacity:1;}
.slot-item-rm:hover{background:rgba(220,38,38,.2);color:#1c1c2e;}
.slot-add-more{align-self:flex-start;margin-top:4px;font-size:9px;font-weight:500;color:rgba(28,28,46,.35);background:transparent;border:1px dashed rgba(28,28,46,.25);border-radius:0;padding:2px 7px;cursor:pointer;font-family:'Jost',sans-serif;flex-shrink:0;}
.slot-add-more:hover{color:var(--dark);border-color:rgba(28,28,46,.45);}
.bk-s .slot-filled{background:#fdeffe;}
.lu-s .slot-filled{background:#e6f9f9;}
.di-s .slot-filled{background:#f1eafe;}
.sn-s .slot-filled{background:#edfff5;}

/* SHOPPING */
.tobuy-add{display:flex;gap:8px;margin-bottom:20px;}
.tobuy-inp{flex:0 1 280px;border:2px solid var(--pink);border-radius:10px;padding:9px 14px;font-size:13px;font-family:inherit;outline:none;background:#fff;}
.tobuy-inp:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(200,80,200,.1);}
.sh-sec{margin-bottom:28px;max-width:680px;}
/* justify-content:space-between only matters for "Need to Buy", which has a
   second flex child (.sh-share-wrap) to push right -- "Already Have" has
   just the one .sh-sec-title-txt span, so it stays put at the start. */
.sh-sec-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:6px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sh-sec-title-txt{display:inline-flex;align-items:center;gap:8px;}
.sh-cnt{background:var(--dark);color:#fff;border-radius:var(--rp);padding:2px 9px;font-size:11px;}
/* Copy/Email/Print collapsed from three always-visible buttons into one
   share icon + pull-out menu, same .filter-menu/.filter-opt dropdown as
   Recipes' filters -- positioned at the Need to Buy box's own top-right
   corner instead of the page-wide button row, since it only ever acts on
   this one list. List Settings (formerly its own button up in the page-wide
   row) moved down next to it, same reasoning -- both only ever act on this
   one list, so both live on it instead of the page header. */
.sh-title-actions{display:flex;gap:6px;flex-shrink:0;}
.sh-share-wrap{position:relative;flex-shrink:0;}
.sh-share-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:0;border:none;background:rgba(0,0,0,.06);color:var(--dark);cursor:pointer;transition:background .15s;font-size:13px;}
.sh-share-btn:hover{background:rgba(200,80,200,.15);color:#1c1c2e;}
.sh-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:0;background:rgba(255,255,255,.55);box-shadow:0 0 16px rgba(255,255,255,.9);transition:background .15s,box-shadow .15s;cursor:pointer;position:relative;}
.sh-item:hover{background:rgba(255,255,255,.85);box-shadow:0 0 24px rgba(255,255,255,1);}
.sh-bullet{color:var(--pink);font-size:18px;line-height:1;flex-shrink:0;margin-top:-1px;}
.sh-item-body{flex:1;min-width:0;}
.sh-x{background:none;border:none;color:rgba(28,28,46,.45);font-size:15px;font-weight:500;cursor:pointer;padding:0 0 0 5px;line-height:1;font-family:'Jost',sans-serif;opacity:0;transition:opacity .15s;vertical-align:middle;}
.sh-move-to-cart{background:none;border:1px solid rgba(28,28,46,.2);border-radius:20px;color:rgba(28,28,46,.6);font-size:10px;font-weight:700;cursor:pointer;padding:2px 8px;margin-left:6px;font-family:'Jost',sans-serif;vertical-align:middle;}
.sh-move-to-cart:hover{border-color:var(--pink);color:var(--pink);}
.sh-item:hover .sh-x{opacity:1;}
.sh-x:hover{color:var(--pink);}
.sh-item.sh-sel{background:rgba(200,80,200,.1)!important;}
.sh-n{font-size:14px;font-weight:600;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}