:root {
  --bg: #fffbf7;
  --bg2: #fef0e6;
  --pink: #ffc9f6;
  --pink2: #ffb3f4;
  --yellow: #fff7b2;
  --teal: #b1f3f6;
  --teal2: #fffce0;
  --teal-accent: #4ecdc4;
  --green: #7ec9a0;
  --pink-dark: #a3117a;
  --nav-blue: var(--teal);
  --orange: #ff7043;
  --dark: #1c1c2e;
  --dark2: #2d2d42;
  --surface: #ffffff;
  --border: rgba(0,0,0,.07);
  --text: #1c1c2e;
  --muted: #9089a6;
  --accent: #ffc9f6;
  --accent2: #ffb3f4;
  --sh: 0 4px 24px rgba(120,50,120,.08);
  --sh-sm: 0 2px 12px rgba(120,50,120,.06);
  --sh-lg: 0 16px 40px rgba(120,50,120,.14);
  --r: 20px;
  --rp: 100px;
  --bk: #e84393; --bk3: #fdeffe;
  --lu: #4285f4; --lu3: #e8f0fe;
  --di: #f0c430; --di3: #fffbe8;
  --sn: #22c55e; --sn3: #edfff5;
  --ap: #7ec8a0; --ap3: #edf7f3;
  --pattern-opacity: .8;
  /* Shared side gutter for pane content -- keeps a pane's own sections
     (hero, browse area, etc.) lined up on the same left/right edge instead
     of each section inventing its own vw-based padding. */
  --gutter: clamp(20px, 5vw, 64px);
  /* Shared size scale for .cr-box dialogs -- was ~17 one-off max-width
     values (380-960px) picked per modal with no shared logic. Every
     .cr-box now snaps to whichever of these four fits its content,
     instead of inventing its own pixel value. */
  --modal-sm: 440px;
  --modal-md: 520px;
  --modal-lg: 680px;
  --modal-xl: 960px;
}
*{box-sizing:border-box;margin:0;padding:0;}
button{font-family:'Jost',sans-serif;}
html{background-color:#ffffff;}
body{font-family:'Quicksand',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:300;background:transparent;position:relative;color:var(--text);min-height:100vh;overflow-x:hidden;}
h1,h2,h3,.brand-name,.hero h1,.results-hdr h3,.planner-hdr h2,.sheet-hdr h3,.aw-box h3,.cr-box h3{font-family:'Julius Sans One',sans-serif;letter-spacing:.3px;}

/* TOPBAR */
/* z-index bumped past #public-signin-bar's 300 (css/auth-and-landing.css)
   -- that bar is position:sticky;z-index:300 on the public /gifts and
   /products routes, which was rendering on top of the nav and hiding it
   entirely on those two pages while signed out. Still well under every
   modal/overlay layer (300-9999) so those still cover the nav when open. */
.topbar{background:transparent;padding:0;height:auto;display:flex;align-items:flex-start;justify-content:flex-end;position:absolute;top:14px;left:0;right:0;z-index:350;pointer-events:none;}
/* #public-signin-bar sits in normal flow above .topbar in the markup, but
   .topbar's own position:absolute takes it out of flow, so it doesn't get
   pushed down by the bar the way a normal sibling would -- it just sits at
   a fixed 14px from the page top regardless, overlapping the bar's text
   whenever the bar is tall enough (e.g. wrapped to two lines at a narrow
   width). --guest-bar-height is kept current by initGuestBarHeightSync()
   in js/import-review-and-auth.js. */
body:has(#public-signin-bar:not([style*="display:none"])) .topbar{top:calc(14px + var(--guest-bar-height,0px))!important;}
.bookmark{background:#ffc9f6;width:320px;height:160px;clip-path:polygon(0 0,100% 50%,0 100%);pointer-events:all;position:absolute;left:0;top:0;z-index:51;}
.mini-brand{position:absolute;left:14px;top:12px;z-index:110;display:none;align-items:center;gap:6px;padding:8px 18px;pointer-events:all;transform:scale(1);transform-origin:top left;transition:transform .15s;}
.mini-brand:hover{transform:scale(1.12);}
/* Home is the one page where this sits directly on a busy photo (every
   other tab's header is a solid/stripe band) -- fully transparent (the
   plain look Jess asked for elsewhere) was unreadable there depending on
   what part of the photo landed behind it. Same frosted-glass treatment
   as landing's .gl-nav-logo (css/auth-and-landing.css), scoped to Home
   only via body:has() so every other tab keeps the plain look. */
body:has(#pane-home.on) .mini-brand{background:rgba(255,255,255,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:999px;}
@media(max-width:800px){.mini-brand{transform:scale(.85);}}
@media(max-width:650px){.mini-brand{transform:scale(.72);}}
@media(max-width:500px){.mini-brand{transform:scale(.6);}}
.brand-name-img{position:absolute;top:58px;left:13px;height:44px;width:auto;z-index:52;pointer-events:none;mix-blend-mode:multiply;}
.nav{display:flex;gap:8px;background:none;box-shadow:none;pointer-events:all;margin-left:auto;margin-right:0;transform-origin:top right;border:none;border-radius:0;overflow:visible;}
@media(max-width:800px){.nav{transform:scale(.9);}}
@media(max-width:650px){.nav{transform:scale(.72);}}
@media(max-width:500px){.nav{transform:scale(.55);}}
/* One yellow-pill look for every nav button, on every pane, signed in or
   out -- this used to be Home-only (see git history), with separate patches
   layered on for Potluck's video hero and for guest mode, because the base
   style was flat/transparent text that only worked against a plain solid
   header band. Those patches fought each other: guest mode forced the text
   white to stay visible against the dark guest bar, but that only actually
   sits behind the nav on Home/Potluck -- everywhere else (Recipes, Plan,
   Shop...) the nav sits on a light background further down the page, so
   guest-mode white text there was nearly invisible. Making the pill
   universal removes the reason for any of those patches to exist: a solid
   yellow pill is legible against a photo, a video, a dark bar, or a plain
   band alike, so nothing needs to react to what's behind it anymore. */
.tnav{padding:13px 19px;border-radius:10px;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--dark);transition:all .18s;border:none;background:var(--yellow);box-shadow:0 2px 10px rgba(255,247,178,.6);font-family:'Jost',sans-serif;text-transform:uppercase;letter-spacing:1.4px;}
.tnav span{display:block;}
.tnav:hover:not(.on){background:var(--pink);color:var(--dark);}
.tnav.on{background:var(--pink);color:var(--dark);box-shadow:0 3px 12px rgba(163,17,122,.3);}
/* Recipes and Social panes flip the whole nav to pink, with the active
   tab (always Recipes/Social itself here) picked out in blue instead --
   :has() lets every sibling react to which tab is currently .on, so this
   stays in sync with _activateTabChrome (js/shopping-list.js) without any
   JS changes of its own. */
.nav:has(.tnav.on[data-tab="recipes"]) .tnav,
.nav:has(.tnav.on[data-tab="feed"]) .tnav{background:var(--pink);}
.nav:has(.tnav.on[data-tab="recipes"]) .tnav.on,
.nav:has(.tnav.on[data-tab="feed"]) .tnav.on{background:var(--nav-blue);box-shadow:0 3px 12px rgba(56,111,209,.3);}
/* Hidden for now -- Jess asked to take "More" off the nav (its dropdown
   only had Scullery, since removed, and Taste Makers). Left in the DOM
   rather than deleted so restoring it later is a one-line revert. */
#nav-more-btn{display:none;}
.chev{display:inline-block;font-size:9px;margin-left:1px;}
.tnav .chev{display:inline-block;}
.tnav-dropdown{display:none;position:fixed;background:#fff;box-shadow:0 10px 28px rgba(28,28,46,.2);z-index:9999;overflow:hidden;border-radius:0;min-width:150px;}
.tnav-dropdown.on{display:block;}
.tnav-dropdown-item{padding:12px 20px;font-family:'Jost',sans-serif;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:rgba(28,28,46,.6);cursor:pointer;white-space:nowrap;transition:all .15s;}
.tnav-dropdown-item:hover{background:var(--pink);color:var(--dark);}
.tnav-dropdown-item.on{background:rgba(28,28,46,.06);color:var(--dark);}
.wr{font-size:11px;color:rgba(28,28,46,.5);font-weight:700;}

/* LAYOUT */
.main{padding:65px 24px 0;max-width:1280px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;}
/* flex:1 0 auto (inside .main's flex column) lets the footer's dark
   background stretch to fill any leftover space down to the actual
   bottom of the viewport, instead of leaving a gap of the page's own
   white background below it whenever a tab's content is shorter than
   one full viewport height. */
.site-footer{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding:14px 32px;border-top:2px solid #fff;text-align:center;font-size:15px;color:#fff;font-family:'Quicksand',sans-serif;font-weight:300;letter-spacing:.3px;line-height:1.8;background:var(--dark);margin:auto calc(-50vw + 50%) 0;width:100vw;}
.site-footer-links{display:flex;justify-content:center;gap:22px;margin-top:5px;}
.site-footer a{color:#fff;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.35);padding-bottom:1px;transition:color .15s;}
.site-footer a:hover{color:var(--pink);border-bottom-color:var(--pink);}
.pane{display:none;animation:fi .18s ease;}
.pane.on{display:block;}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* PHOTO HERO */
.hero-split{position:relative;z-index:0;display:flex;align-items:center;column-gap:360px;row-gap:40px;padding:36px 0 12px;flex-wrap:wrap;}
.hero-doodle{position:absolute;font-size:22px;line-height:1;pointer-events:none;}
.hero-doodle-field svg.hero-doodle{overflow:visible;}
.week-grid{padding:0 0 80px;}

/* CONCEPT SECTION */
.concept-txt{font-size:17px;line-height:1.6;color:#1c1c2e;margin-top:0;font-weight:600;max-width:none;}

.seg{padding:10px 24px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--muted);font-family:inherit;transition:all .18s;}
.seg.on{background:var(--pink);color:var(--dark);box-shadow:0 3px 12px rgba(200,80,200,.35);}
.seg:not(.on):hover{color:var(--text);}

/* HOME (pane-home) -- its own hero mark instead of the shared
   .pane-hdr-band (that's the feature-tab pattern: boxed uppercase name +
   trapezoid + side doodles, right for "Cookfolio"/"Forkast" but wrong for
   a home page that isn't naming a feature). A winding dashed path scattered
   with the same palm-beachy doodle PNGs (images/doodles/, see
   js/shopping-list.js's PH_DOODLE_FILES) used as accents on every other
   tab's header, replacing the old cursive "Guava" wordmark. The top-left
   .mini-brand logo is hidden on Home (below) -- the black doodle-path band
   is the brand moment at the top of the page now, so the small mark on
   top of it just read as clutter. No horizontal padding of
   its own -- unlike .home-concept (which full-bleeds out to the viewport
   edge and re-applies var(--gutter) itself), .home-doodle-path stays in
   normal flow inside .p2p-main, which already supplies that same gutter as
   its own padding; adding it again here would double it.

   .home-doodle-stage is taller than .home-doodle-pin (js/app-init-misc.js
   sets that extra height to a fixed 70vh runway once the pin's real
   content height is known) so the pin -- position:sticky -- stays pinned
   at the top of the viewport for that runway's worth of scrolling, then
   un-pins on its own once the stage runs out, same as any other
   position:sticky element -- no JS scroll-jacking involved in the pin
   itself, only in the doodles' along-the-path movement.

   .home-concept (the "what Guava does" pitch) lives INSIDE .home-doodle-
   pin, right under .home-doodle-path, instead of as a separate section
   after the stage -- that way it appears immediately below the doodles
   and stays put for the same pinned stretch, rather than sitting behind
   a blank runway-height gap and only scrolling into view once the pin
   already released. */
/* margin-top:0 (was 40px) -- .pane itself already cancels .main's 65px
   top padding via its own -65px margin (tab-headers-and-recipes-browse.css),
   the same clearance-cancel every tab gets under the fixed topbar, so the
   stage's natural static position is already flush with the true top of
   the viewport without adding anything more here. That extra 40px was the
   only thing holding the black band (painted on .home-doodle-path below)
   down from the very top, leaving a strip of the page's own cream ground
   showing above it -- and the only thing keeping the stage's natural
   (unscrolled) top above 0, which meant the first ~40px of scrolling did
   nothing before the pin engaged and the doodle animation actually
   started. Flush to 0, both are gone: the black band now starts at the
   true top, and animation begins on the very first pixel scrolled. The
   topbar itself is unaffected (position:fixed, independent of document
   flow) -- it simply renders over the black band instead of over cream. */
.home-doodle-stage{position:relative;margin:0 0 8px;}
.home-doodle-pin{position:sticky;top:0;}
/* position:relative so hdp-line/hdp-item (position:absolute) size against
   THIS box, not against .home-doodle-pin's full height -- .home-doodle-pin
   is itself a positioned ancestor (position:sticky) once .home-concept
   moved inside it, so without this the doodles' top% would be measured
   against the pin's combined path+concept height instead of just the path
   strip, placing them far too low and into the text below. overflow:hidden
   plus keeping every doodle centered on its point (.hdp-item's transform)
   guarantees the wave and doodles stay entirely inside this shorter strip
   and never bleed into .home-concept underneath. */
/* max(), not clamp() -- there's no upper bound here on purpose. The ask is
   "most of the viewport before you start scrolling," which a clamp's
   capped max would silently violate on any taller/shorter screen than the
   cap was tuned for. 480px is just a floor for tiny viewports where 88vh
   alone would be too cramped for the loop to read. */
/* Its own full-bleed black block (same margin/width full-bleed trick as
   .home-concept below) instead of sitting on the page's cream ground --
   makes the path read as a distinct staged moment rather than blending
   into the rest of Home. padding:var(--gutter) replaces the horizontal
   room .p2p-main's own padding used to supply, since full-bleeding this
   box takes it out from under that padding entirely; percentage-based
   inset/top/left on .hdp-line/.hdp-item still resolve against this box's
   padding box either way, so the doodles' layout is unaffected. */
/* Tablecloth photo (images/BG2.png) moved here from .home-concept below --
   it's now the header's own background, with the winding doodle path/
   PH_DOODLE_FILES scatter overlaid on top of it, instead of a separate
   framed photo card further down the page. The dark linear-gradient scrim
   (matching --dark, not just a flat overlay color, so it still reads as
   the same band if the photo fails to load) keeps the pink dashed line and
   drop-shadowed doodles legible over a busy photo the way they were over
   a flat background. */
.home-doodle-path{position:relative;height:max(88vh,480px);overflow:hidden;background:linear-gradient(rgba(28,28,46,.55),rgba(28,28,46,.55)),var(--dark) url('../images/BG2.png') center/cover no-repeat;margin:0 calc(-50vw + 50%);width:100vw;padding:0 var(--gutter);box-sizing:border-box;}
.hdp-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hdp-line path{fill:none;stroke:var(--pink);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 16;opacity:.5;}
.hdp-item{position:absolute;height:auto;filter:drop-shadow(0 0 8px rgba(255,255,255,.2));transform:translate(-50%,-50%) rotate(var(--rot,0deg));}
@media(max-width:700px){
  /* The path only reads at wide-enough sizes to actually wind -- below
     700px it collapses into a flat, cramped scatter, so simplify to a
     plain wrapping row of doodles instead (no path, no absolute
     positioning, no scroll-pin runway) rather than fight the curve at a
     size it can't show. */
  .home-doodle-stage{height:auto!important;}
  .home-doodle-pin{position:static;}
  .home-doodle-path{position:static;height:auto;overflow:visible;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;padding:16px 0;}
  .hdp-line{display:none;}
  .hdp-item{position:static;width:44px!important;transform:none!important;}
  /* The trail continues the header path's line, which doesn't exist at
     this width (above) -- and the copy goes full-width once it's not
     sharing the row with a doodle column, so there's no empty space left
     for the trail to sit in either. */
  .home-concept-doodle-trail{display:none;}
}

/* Concept band -- holds the "what Guava does" pitch that used to live only
   on the signed-out landing page (see html-partials/landing.html's
   .landing-headline / .landing-bullets). No background of its own now --
   sits on the same cream + pink-yellow grid ground as the rest of the pane
   (#pane-home::before, css/recipe-cards-and-search.css), matching the
   signed-out landing page's look instead of a separate solid-teal band. */
.home-concept{position:relative;margin:0 calc(-50vw + 50%) 0;width:100vw;padding:64px var(--gutter) 56px;box-sizing:border-box;text-align:center;}
/* .p2p-main's own 120px bottom padding (dish-cards.css) would otherwise
   leave a cream gap below the About section (the pane's last child) before
   the footer. */
#pane-home .p2p-main{padding-bottom:0;}
/* max-width dropped from 820px to 600px -- pane-home.html now left-aligns
   this (inline style, overriding the auto-margin centering below) instead
   of centering it, so it needs to actually stop short of the full-bleed
   width to leave the right-hand column .home-concept-doodle-trail sits in
   genuinely empty, not just unused because the text happened to be
   narrower than its container. */
.home-concept-title{font-family:'Julius Sans One',sans-serif;font-weight:400;font-size:clamp(24px,4.4vw,46px);line-height:1.3;color:var(--dark);max-width:600px;margin:0 auto 18px;text-transform:uppercase;}
.home-concept .landing-tagline{font-size:clamp(30px,4.5vw,44px);margin:0 auto 34px;color:var(--dark);}
.home-concept .landing-bullets{max-width:480px;margin:0 auto;font-size:20px;color:var(--dark);}
.home-bullet-link{text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.home-bullet-link:hover{color:var(--pink-dark);}

/* Static continuation of the header's doodle path into the empty column
   right of the (now left-aligned) copy above -- see the comment on
   .home-concept-doodle-trail in pane-home.html for why this is plain
   positioned images/an SVG rather than reusing .hdp-item/.hdp-line (those
   are wired to the header's own scroll-pin animation). Sized/positioned
   like a lighter version of .home-doodle-path's own doodle layer: absolute
   over a fixed-width right-hand column, percentage left/top inside it. */
.home-concept-doodle-trail{position:absolute;top:0;right:var(--gutter);bottom:0;width:240px;pointer-events:none;}
.hct-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hct-line path{fill:none;stroke:var(--pink);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 16;opacity:.4;}
/* No JS touches these (unlike .hdp-item), so the resting rotation is just
   baked into each one's own inline transform -- translate(-50%,-50%) first
   to center on its left/top point, same as .hdp-item, plus its rotate. */
.hct-item{position:absolute;height:auto;filter:drop-shadow(0 0 6px rgba(255,255,255,.6));}

/* About -- the 4-step "how it works" pitch that used to close out Home
   before the Aug 19 redesign dropped it; reinstated by request. No
   background of its own (the original had a separate dot-grid panel) --
   sits on the same cream + pink-yellow grid as the rest of the pane, same
   reasoning as .home-concept above. */
/* No left/right padding of its own -- .about-hero is a normal-flow child
   of .p2p-main, which already applies var(--gutter) as its own left/right
   padding (css/dish-cards.css). .home-concept above it escapes that
   ambient padding (full-bleed width:100vw + negative margin) and re-adds
   its own single var(--gutter), so adding a SECOND var(--gutter) here
   stacked both paddings into a double inset that pushed About's edges in
   further than the pitch section's text above it. */
.about-hero{position:relative;padding:80px 0 40px;box-sizing:border-box;text-align:left;}
/* No max-width/auto-margin -- same reasoning as the heading block above it
   in pane-home.html: let .about-hero's own gutter padding set the edges
   instead of centering a narrower column inside it. */
.about-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:64px 0 0;}
@media(max-width:900px){.about-pillars{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.about-pillars{grid-template-columns:1fr;}}
.about-pillar{background:#fff;border-radius:20px;padding:clamp(40px,9vh,72px) 20px;text-align:center;border:none;box-shadow:0 10px 24px rgba(28,28,46,.1);}
.pillar-title{font-family:'Quicksand',sans-serif;font-size:clamp(17px,2.2vw,22px);font-weight:300;color:var(--dark);margin-bottom:12px;}
.pillar-txt{font-size:clamp(12px,1.4vw,13px);line-height:1.6;color:rgba(28,28,46,.65);font-weight:500;}
.step-num{width:38px;height:38px;border-radius:50%;background:transparent;border:2.5px solid #ffc9f6;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#ffc9f6;margin:0 auto 16px;}
.about-pillar:nth-child(2) .step-num{border-color:#b1f2f5;color:#b1f2f5;}
.about-pillar:nth-child(3) .step-num{border-color:#fff6ae;color:#fff6ae;}
.about-pillar:nth-child(4) .step-num{border-color:#7ec8a0;color:#7ec8a0;}

/* INPUTS */
.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:7px;}
/* Matches Recipes' .cf-search bar (pink pill border, white ground,
   thin Quicksand) instead of its own one-off transparent-border style. */
.tiw{display:flex;flex-wrap:wrap;gap:6px;padding:14px 20px;border:2px solid #ffc9f6;border-radius:24px;background:#fff;box-shadow:none;cursor:text;min-height:120px;align-items:flex-start;transition:all .18s;}
.tiw.foc{border-color:var(--pink);box-shadow:0 0 0 3px rgba(200,80,200,.12);}
.tiw input{border:none;outline:none;background:none;font:300 14px 'Quicksand',sans-serif;color:var(--text);min-width:160px;flex:1;padding:2px 4px;}
.tiw input::placeholder{color:var(--muted);}
.hint{font-size:11px;color:var(--muted);margin-top:6px;font-weight:500;}
.inp-plain{width:100%;padding:11px 15px;border:2px solid var(--pink);border-radius:14px;font-size:13px;font-family:inherit;outline:none;background:var(--surface);box-shadow:var(--sh-sm);color:var(--text);transition:all .18s;}
.inp-plain:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(200,80,200,.12);}
.inp-plain::placeholder{color:var(--muted);}

/* CHIPS */
.chip{display:inline-flex;align-items:center;gap:4px;padding:6px 13px 6px 14px;border-radius:0;font-size:15px;font-weight:600;}
.chip-g{background:rgba(77,188,190,.18);color:#1d9b9b;}
.chip-p{background:rgba(200,80,200,.13);color:var(--pink);}
.chip .cx{cursor:pointer;opacity:.5;font-size:14px;line-height:1;}
.chip .cx:hover{opacity:1;}
.ic-row{display:flex;flex-wrap:wrap;gap:3px;}
.ic-h{display:inline-block;background:rgba(77,188,190,.18);color:#1d9b9b;padding:2px 7px;border-radius:6px;font-size:11px;font-weight:600;}
.ic-n{display:inline-block;background:rgba(0,0,0,.05);color:var(--muted);padding:2px 7px;border-radius:6px;font-size:11px;font-weight:500;}
/* Last Minute's recipe cards (#ing-results) use their own ingredient-chip
   look instead of the shared teal/grey one above: "have" ingredients are a
   solid darker-blue square chip (same #68c3c8 as this tab's own pantry
   label/panel elsewhere) with a soft white glow, "need" ingredients drop
   the background and just tint the text that same darker blue. */
#ing-results .ic-h{background:#68c3c8;color:#fff;border-radius:0;box-shadow:0 0 8px rgba(255,255,255,.7);}
#ing-results .ic-n{background:none;color:#68c3c8;}
/* Same treatment for the match-percentage pill: solid pink square chip,
   white text, soft white glow -- overrides the m-hi/m-mid/m-lo tiering
   colors used elsewhere. */
#ing-results .mpill{background:var(--pink);color:#fff;border-radius:0;box-shadow:0 0 8px rgba(255,255,255,.7);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:0;font:500 12.5px 'Jost',sans-serif;cursor:pointer;border:none;transition:all .18s;}
.btn:hover{transform:translateY(-1px);}
.btn-p,.btn-y,.btn-t,.btn-d{font-weight:700;}
.btn-p{background:var(--bg);color:#1c1c2e;font-size:15px;border-radius:0;}
.btn-p:hover{background:var(--bg);}
.btn-y{background:var(--teal);color:#1c1c2e;}
.btn-y:hover{background:#ffdf1a;}
.btn-t{background:var(--yellow);color:#1c1c2e;}
.btn-t:hover{background:var(--teal2);}
.btn-d{background:var(--bg);color:#1c1c2e;font-size:15px;}
.btn-d:hover{background:var(--bg);}
.btn-g{background:var(--bg);color:#1c1c2e;border:none;font-size:15px;}
#feed-notif-btn.on,#mm-feed-notif-btn.on{background:var(--yellow);color:#1c1c2e;}
.btn-g:hover{background:var(--bg);}
.btn-o{background:transparent;color:#1c1c2e;}
.btn-o:hover{background:rgba(28,28,46,.07);}
.btn-sm{padding:6px 14px;font-size:12.5px;height:44px;}
.btn-xs{padding:4px 11px;font-size:11px;height:44px;}

/* RESULT CARDS */
.results-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.results-hdr h3{font-size:36px;font-weight:300;font-family:'Quicksand',sans-serif;}
.results-hdr span{font-size:12px;color:var(--muted);font-weight:600;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.dot-bk{background:var(--bk);}
.dot-lu{background:var(--lu);}
.dot-di{background:var(--di);}
.dot-sn{background:var(--sn);}
.dot-ap{background:var(--ap);}
.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;}
.rc{background:var(--surface);border-radius:0;padding:18px 20px 18px 22px;border:2px solid #ffc9f6;border-left-width:8px;transition:all .18s;position:relative;box-shadow:0 0 24px rgba(255,255,255,.9);}
.rc:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(28,28,46,.14);}
.rc-sel{background:linear-gradient(135deg,#b1f2f5 0%,#d6f9fb 100%)!important;border-color:var(--pink)!important;border-left-color:#1c1c2e!important;box-shadow:0 4px 20px rgba(100,210,220,.35)!important;}
.rc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.rc-name{font-size:14px;font-weight:700;line-height:1.3;}
#pane-input .rc{border:none!important;border-left:none!important;border-radius:0!important;box-shadow:0 0 28px rgba(255,255,255,.9)!important;background:#fff!important;transition:transform .18s;}
#pane-input .rc:hover{transform:translateY(-4px);}
#pane-input .rc-name strong{font-family:'Julius Sans One',sans-serif;font-weight:400;font-variant:small-caps;letter-spacing:.3px;font-size:17px;}
#pane-input .rcard-add{background:var(--bg)!important;color:#1c1c2e!important;border:none!important;font-size:14px!important;border-radius:0!important;}
#pane-input .rcard-add.on{background:#1c1c2e!important;color:#fff!important;}
.rc-sub{font-size:11px;color:var(--muted);margin-top:2px;font-weight:500;}
.mpill{font-size:11px;font-weight:800;padding:3px 10px;border-radius:var(--rp);white-space:nowrap;flex-shrink:0;margin-left:10px;}
.m-hi{background:rgba(77,188,190,.18);color:#1d9b9b;}
.m-mid{background:var(--bk3);color:var(--bk);}
.m-lo{background:rgba(0,0,0,.06);color:var(--muted);}
.tb{font-size:10px;padding:2px 7px;border-radius:6px;font-weight:700;display:inline-block;}
.tb-tod{background:rgba(255,112,67,.15);color:var(--sn);}
.rc-note{font-size:11px;color:var(--muted);font-style:italic;margin:8px 0;line-height:1.4;}
.rc-footer{display:flex;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,0,0,.05);}

.filter-wrap{position:relative;display:flex;align-items:stretch;}
.filter-wrap .rec-search{border-radius:0;flex:1;min-width:0;width:auto;}
.filter-wrap .inp-plain{border-radius:14px 0 0 14px;flex:1;min-width:0;width:auto;}
.filter-btn{display:flex;align-items:center;gap:4px;padding:6px 13px;height:44px;border-radius:0;font-size:15px;font-weight:500;font-family:'Jost',sans-serif;background:var(--bg);border:none;border-left:1px solid rgba(0,0,0,.09);cursor:pointer;color:#1c1c2e;white-space:nowrap;transition:all .15s;}
.filter-btn:hover{color:#1c1c2e;}
.filter-btn .chev{font-size:8px;opacity:.55;}
/* z-index bumped 200 -> 700 -- tied with .staged-sidebar's own 200, so
   paint order (not z-index) decided which won wherever they overlapped,
   letting the sidebar (or anything else also at 200) render on top of
   this menu instead of the menu appearing in front like a dropdown
   should. 700 clears everything else on the page, including
   .staging-nav-arrow-float's 600. */
.filter-menu{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);padding:6px;z-index:700;min-width:150px;display:none;}
.filter-menu.open{display:block;}
.filter-opt{padding:7px 12px;border-radius:0;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .1s;white-space:nowrap;display:block;background:none;border:none;width:100%;text-align:left;}
.filter-opt:hover{background:rgba(200,80,200,.07);}
.filter-opt.on{background:var(--pink);color:#fff!important;}