/* Home landing reskin (scoped) — DM Serif Display + Plus Jakarta Sans. Loaded
   globally but APPLIED only within .hero-landing / .home-steps / .lp-nav, so no
   other screen's typography changes. @import must precede all other rules. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Hide scrollbars APP-WIDE (scrolling still works) — no scroll tracks anywhere. Founder ask: the
   gray scroll bars (quiz sheet, any overflow container) should never show. Per-element rails already
   did this individually; this makes it global so a new scrollable surface never leaks a bar. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* ════════════════════════════════════════════
   PALATE — Premium light app design system
   Ivory canvas · vibrant ember · soft pastels
   ════════════════════════════════════════════ */

:root {
  /* ── THE DOCK AND THE ROOM UNDER IT — two tokens, because they are two
     different measurements and treating them as one is the bug ─────────────
     Founder, 2026-08-08, packaged Android: scrolled the Passport to the very
     bottom and the "Share my taste passport" CTA was jammed under the floating
     dock, the Noodler orb almost on top of it.

     --nav-lift is how far the dock floats off the VIEWPORT bottom. The dock is
     position:fixed, so it is viewport-relative and NOTHING an ancestor pads can
     move it — it must always read the raw device inset, in the shell as on the
     web, or it lands on the gesture bar.

     --nav-clear is how much room a scroller must leave beneath its content so
     that dock never covers it. It reads --noodl-sab (the established discipline
     two blocks down), and the 16px floor keeps it at the historic 104px wherever
     there is no inset at all.
     UPDATED 2026-08-08, same day, after the founder rejected the letterbox:
     `html.noodl-native body` no longer pads the bottom at all — the shell paints
     edge-to-edge and CONTENT reserves the inset — so --noodl-sab is now the raw
     inset in BOTH modes and this token resolves the same in both. The formula did
     not have to change (that is the point of routing it through the variable);
     only the reason it is correct did. It previously read 104px in the shell
     because body had already paid the 34px; it now reads ~122px, and body pays
     nothing. Do not "simplify" --nav-clear back to a flat number.

     What went wrong before: the clearance was a flat `padding-bottom: 104px`
     that never read env() at all, while the dock lifted itself by the inset. So
     on any phone with a gesture bar the dock rose and the clearance did not, and
     the last thing on the page slid under the pill by exactly the inset.
     Measured in Chromium at 390x844 on the Passport, web mode: a 0px inset left
     46px of air, 24px left 38px, 48px left 14px, and past ~62px the CTA goes
     fully behind the dock. Desktop cannot see any of it — env() is 0 there and
     104px is exactly right, which is why it shipped. */
  --nav-lift:  max(16px, env(safe-area-inset-bottom, 0px));
  --nav-clear: calc(88px + max(16px, var(--noodl-sab, env(safe-area-inset-bottom, 0px))));

  /* ── Surface palate — porcelain canvas (the "tasting" design language) ── */
  --bg:        #FFFFFF;
  --bg-2:      #F1E6D4;
  --bg-3:      #FFFBF2;
  --surface:   #FFFDF8;
  --surface-2: #FBF6EC;
  --surface-3: #FFFEFB;
  --line:      #EBE0CC;
  --line-2:    #E0D5BD;
  --line-soft: #F2E9D8;
  --text:      #23150D;
  --text-2:    #6E5F4F;
  --text-3:    #A89A85;
  --text-4:    #D4C9AE;

  /* ── Brand terracotta — the lone decorative accent, per the design system ── */
  --accent:    #C2502F;
  --accent-2:  #CF5C36;
  --accent-deep: #A8431F;
  --on-accent: #FFF7EE;
  --glow:      rgba(194, 80, 47, 0.30);
  --glow-soft: rgba(194, 80, 47, 0.09);
  --accent-grad: linear-gradient(135deg, #CF5C36 0%, #C2502F 55%, #A8431F 100%);
  --ochre:     #C98A3B;

  /* ── Category pastels — used to tag cuisines, moods, attributes ── */
  --c-mint:      #B5E4C7;   --c-mint-deep: #5BAF7E;
  --c-coral:     #FFC8B8;   --c-coral-deep: #E66B4A;
  --c-lemon:     #FFE9A3;   --c-lemon-deep: #C9A227;
  --c-lavender:  #DAD0F2;   --c-lavender-deep: #8A78C9;
  --c-sky:       #C7E1F2;   --c-sky-deep: #4A8CC2;
  --c-pistachio: #DAE6B5;   --c-pistachio-deep: #819A47;
  --c-blush:     #F7D4E0;   --c-blush-deep: #C75D85;

  /* ── Soft gradient washes for hero moments ── */
  --wash-warm:    linear-gradient(135deg, #FFF6EC 0%, #FCEDDE 60%, #F8E0CB 100%);
  --wash-fresh:   linear-gradient(135deg, #F4FBF6 0%, #E8F4ED 100%);
  --wash-citrus:  linear-gradient(135deg, #FFFAE6 0%, #FFF1C7 100%);
  --wash-calm:    linear-gradient(135deg, #F5F2FA 0%, #ECE5F5 100%);
  --wash-ocean:   linear-gradient(135deg, #EFF6FB 0%, #DEEBF4 100%);
  --wash-rose:    linear-gradient(135deg, #FFF3F7 0%, #FCE3EC 100%);

  /* ── Legacy aliases — keep every existing class working ── */
  --paper: var(--bg);
  --paper-deep: var(--bg-2);
  --paper-tint: var(--surface-2);
  --ink: var(--text);
  --ink-soft: var(--text-2);
  --ink-faint: var(--text-3);
  --line-strong: var(--line-2);
  --brand: var(--accent);
  --brand-light: var(--glow-soft);
  --dark: var(--text);
  --mid: var(--text-2);
  --light: var(--surface-2);
  --border: var(--line);
  --white: var(--surface);
  --accent-soft: var(--glow-soft);

  /* ── Radius scale — soft, generous ── */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-2xl: 40px;
  --r-pill: 999px;
  --radius: var(--r-md);

  /* ── Spacing scale ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px;  --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* ── Typography ── */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Reskin design system (shared) — from the design-reference mockups.
     Applied only within reskinned-screen scopes (.lp-*, .ob-*, etc.) so legacy
     screens keep --serif/--sans until reskinned. Per design-reference-CLAUDE.md:
     the 5-hue spectrum is taste-only; terracotta is the lone decorative accent. ── */
  --lp-cream: #F6EFE4;
  --lp-sand: #FCF6EC;
  --lp-espresso: #2A2018;
  --lp-terra: #C2502F;
  --lp-terra-deep: #9A3C20;
  --lp-fg2: color-mix(in srgb, #2A2018 64%, #F6EFE4);
  --lp-fg3: color-mix(in srgb, #2A2018 42%, #F6EFE4);
  --lp-line: color-mix(in srgb, #2A2018 13%, transparent);
  --lp-line-strong: color-mix(in srgb, #2A2018 24%, transparent);
  --lp-tint: color-mix(in srgb, #C2502F 10%, #F6EFE4);
  --lp-tint-strong: color-mix(in srgb, #C2502F 16%, #F6EFE4);
  --lp-serif: 'DM Serif Display', 'Fraunces', Georgia, serif;
  --lp-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --lp-shadow-sm: 0 1px 2px rgba(42,32,24,0.10), 0 1px 3px rgba(42,32,24,0.06);
  --lp-shadow-lg: 0 16px 40px rgba(42,32,24,0.15), 0 4px 12px rgba(42,32,24,0.08);
  --lp-shadow-accent: 0 8px 22px color-mix(in srgb, #C2502F 30%, transparent);
  /* taste-DNA spectrum (taste visuals only) */
  --lp-adventure: #5C8C68; --lp-heat: #D6492F; --lp-indulgence: #8E3D5B;
  --lp-bold: #5C8C68; --lp-table: #2E7A95;
  /* EMBER taste spectrum — the single source of truth for the four Taste-DNA axes.
     Reserved for taste visuals ONLY (spectrum bar, axis dots, per-axis bars/rings).
     One warm progression, red -> orange -> amber -> bronze; no muddy midpoints.
     Status/safety greens+ambers and terracotta accents are a SEPARATE system. */
  --taste-spice: #CE3F28; --taste-richness: #C96A2D; --taste-adventure: #E0A330; --taste-sharing: #8E7029;

  /* ── Shadow scale — soft, layered, never heavy ── */
  --shadow-xs: 0 1px 2px rgba(54,36,18,0.04);
  --shadow-sm: 0 2px 8px -2px rgba(54,36,18,0.08), 0 1px 3px rgba(54,36,18,0.04);
  --shadow:    0 8px 24px -8px rgba(54,36,18,0.14), 0 2px 6px rgba(54,36,18,0.04);
  --shadow-md: 0 14px 36px -10px rgba(54,36,18,0.18), 0 4px 12px rgba(54,36,18,0.06);
  --shadow-lg: 0 26px 60px -16px rgba(54,36,18,0.22), 0 8px 20px rgba(54,36,18,0.06);
  --shadow-glow: 0 10px 30px -8px var(--glow);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);

  --app-w: 460px;
}

/* ── FROZEN SHELL — the document NEVER scrolls; #app is the app's single vertical
   scroller. On phones a document scroll collapses/expands the browser toolbar,
   which moves the layout viewport (and flips env(safe-area-inset-bottom) ~34px
   mid-scroll on iOS) — the fixed dock visibly rode it up and down. With the shell
   frozen, the toolbar never collapses, so fixed elements stay pixel-still.
   scroll-behavior:smooth moved from html to #app (the scroller). */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

html { background: #FFFFFF; }

body {
  font-family: var(--sans);
  background: #FFFFFF;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}

/* ── APP SHELL — phone frame, premium glass-edge; the ONE vertical scroller ── */
#app {
  height: 100vh;
  height: 100dvh;   /* the app column IS the viewport; dvh tracks the real visible height */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;   /* no scroll-chaining out to the frozen document */
  scroll-behavior: smooth;          /* moved from html — #app owns programmatic scrolls now */
  max-width: var(--app-w);
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 40px 120px -30px rgba(54,36,18,0.28), 0 12px 40px rgba(54,36,18,0.10);
}
/* Never hard-code this number again — see --nav-clear at :root. */
body.has-nav #app { padding-bottom: var(--nav-clear); }
/* The signed-in home (.plhome) re-scopes --bg to a warmer paper tone (#F6EFE4) than
   the global shell (#FBF7F1) and isn't on the fal-on theme, so the 104px nav-clearance
   padding below the feed used to show as a lighter band. Match the #app canvas to the
   home's tone so it's seamless to the bottom. (fal-on pages already match via --bg.) */
#app:has(.plhome) { background: #FFFFFF; }

#app.screen-in { animation: screenIn 0.42s var(--ease-out); }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

::selection { background: var(--accent); color: var(--on-accent); }
* { -webkit-tap-highlight-color: transparent; }

.eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--text-3);
}
.eyebrow-accent { color: var(--accent); }

/* ── FLOATING DOCK — the four rooms, always on screen ───────── */
.floatnav {
  /* translate3d (not translateX) forces the dock onto its own compositor layer —
     kills the WebKit fixed+backdrop-filter wobble during momentum scroll. */
  position: fixed; left: 50%; transform: translate3d(-50%, 0, 0);
  will-change: transform;
  /* max() (not calc(env + 16px)): never ADD the home-indicator inset to the gap —
     the old sum snapped ~34px when iOS flipped env() mid-scroll. With the frozen
     shell env() is constant anyway; max() keeps a 16px floor either way. */
  bottom: var(--nav-lift);
  z-index: 200;
  /* visibility (not display) toggle: a display:none→block flip restarted the
     one-shot dockIn intro on EVERY route change. Now it plays once, on mount. */
  display: block; visibility: hidden; opacity: 0; pointer-events: none;
  /* BUG B — bound the dock to the app column and give it side gutters so it
     FLOATS with left/right margin instead of stretching edge-to-edge on phones. */
  width: min(var(--app-w), 100vw); padding: 0 16px; box-sizing: border-box;
  transition: opacity 0.2s var(--ease-out);
}
body.has-nav .floatnav { visibility: visible; opacity: 1; pointer-events: auto; }

.dock {
  width: 100%;
  display: flex; align-items: stretch; justify-content: space-between; gap: 2px;
  padding: 7px; border-radius: 28px;
  background: rgba(255, 253, 248, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  outline: 1px solid var(--line);
  box-shadow: 0 18px 44px -14px rgba(54, 36, 18, 0.38), 0 2px 10px -4px rgba(54, 36, 18, 0.16);
  animation: dockIn 0.55s var(--ease-spring);
}
@keyframes dockIn {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dock-tab {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 3px; min-width: 64px; padding: 8px 13px 7px; border-radius: 21px;
  text-decoration: none; color: var(--text-2);
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out),
              transform 0.2s var(--ease-spring);
}
.dock-tab:active { transform: scale(0.92); }
.dock-lb {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.01em; line-height: 1;
}
.dock-ic { width: 22px; height: 22px; display: block; }
.dock-ic svg { width: 100%; height: 100%; display: block; }
/* Notification count — red circle pinned to a dock icon's top-right (e.g. pending
   friend requests on Community). Cream ring lifts it off the dock; never intercepts taps. */
.dock-badge {
  position: absolute; top: 2px; left: calc(50% + 4px);
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 9px; background: #E5484D; color: #fff;
  font-family: var(--sans); font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center; box-shadow: 0 0 0 2px var(--surface, #FBF6EE);
  pointer-events: none; z-index: 2;
}
.dock-badge[hidden] { display: none; }
.dock-tab.active {
  color: var(--accent-deep);
  background: linear-gradient(180deg, rgba(242, 80, 46, 0.07), rgba(242, 80, 46, 0.14));
}
.dock-tab.active .dock-ic {
  color: var(--accent);
  filter: drop-shadow(0 4px 9px var(--glow));
}
.dock-orbtab {
  display: flex; flex-direction: column; align-items: center;
  margin: 0 4px; padding: 0 6px; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.dock-orb {
  position: relative; overflow: hidden;
  /* Smaller + protrudes less than before (was 54px / -22px): the old orb stuck so
     far above the dock that its opaque disc covered page content sitting just above
     the bar (e.g. the loyalty card's tier-progress line). Keeps the floating-FAB
     look while clearing the content above it. */
  width: 46px; height: 46px; border-radius: 50%; margin-top: -14px;
  /* The real plate — late-night burger (the onboarding "Late-night bites" tile).
     The terracotta radial stays underneath as a fallback while the photo loads. */
  background:
    url("/static/img/occasions/late_night.jpg") center / cover no-repeat,
    radial-gradient(circle at 34% 30%, var(--ochre), var(--accent) 62%, #4E2310 100%);
  box-shadow: 0 0 0 2.5px var(--surface),
              0 0 0 4px rgba(194, 80, 47, 0.6),
              0 12px 26px -8px rgba(166, 62, 30, 0.55);
  animation: dockOrbBreath 3.6s ease-in-out infinite;
}
/* Warm inner vignette so the photo sits in the porcelain world like a jewel,
   not a sticker — clear at center, gently toasted at the rim. */
.dock-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(60, 20, 5, 0) 56%, rgba(60, 20, 5, 0.22) 100%);
}
.dock-orbtab .dock-lb { color: var(--accent-deep); margin-top: 4px; }
.dock-orbtab:active .dock-orb { transform: scale(0.9); }
@keyframes dockOrbBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .dock-orb { animation: none; } }
@media (min-width: 560px) {
  .dock-tab { min-width: 76px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FP LANDING — the tasting-room door (logged-out /). ONE quiet-luxury hero APP
   screen that lives INSIDE the 460px phone frame (#app) exactly like every other
   Noodl screen — on desktop it reads as the app centered in its column, not a
   website. A clean warm-white PORCELAIN surface (no photo) + a soft terracotta
   glow behind the headline + the fingerprint motif + a serif headline + one CTA.
   Espresso ink on porcelain — Noodl's light look, refined. Every rule is .fp-*
   scoped so the shared main.css never bleeds elsewhere. No 100vw / viewport-escape
   tricks — in-frame block. No uppercase / tracked micro-labels; no middot.
   ════════════════════════════════════════════════════════════════════════════ */
.fp-landing {
  /* A normal full-width block within the #app frame — width is bounded by the
     460px phone column, never the viewport. Fluid type uses vw (correct on
     phones, where the frame == viewport) but every clamp max is frame-safe, so
     on desktop the wide-viewport vw simply clamps to a value that fits the
     460px column — nothing spills the frame. */
  /* ── Tim Cook demo (2026-06-17): the landing surface is now a clean, Apple-grade
     WHITE — not the warm porcelain. These token overrides are scoped to .fp-landing
     ONLY, so the rest of the app keeps its porcelain look untouched. Text is darkened
     to near-black ink for crisp AA contrast on white; the terracotta accent stays the
     brand pop. The food photo's own white background dissolves into this surface. */
  --bg:        #FFFFFF;            /* clean white */
  --surface:   #FFFFFF;
  --surface-2: #FBFAF8;           /* a whisper warm for the sign-in chip hover */
  --line:      #ECECEA;
  --line-2:    #E3E2DF;
  --text:      #1A120C;           /* near-black ink — 18.5:1 on white */
  --text-2:    #5C5249;           /* subline / eyebrow — 7.6:1 on white (AAA) */
  --text-3:    #8C8378;           /* decorative hairline only, not body text */
  position: relative; width: 100%;
  display: flex; flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

/* ── QUIET-LUXURY PORCELAIN HERO (light) ────────────────────── */
.fp-hero {
  position: relative; min-height: 100svh; min-height: 100vh;
  /* New layout (2026-06-17): a hand lifting a burger anchors the BOTTOM of the page; the
     headline + CTA sit just above it; the fingerprint motif sits top-right. The in-flow
     body is bottom-aligned (justify-content:flex-end) and lifted by its own padding-bottom
     so the CTA lands JUST ABOVE the burger's top — a bottom-anchored relationship that
     stays stable across phone heights. */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(env(safe-area-inset-top, 0px) + 84px);
  padding-bottom: 0;
  background: var(--bg); overflow: hidden;
}
/* Soft, subtle warm glow behind the headline area — a faint terracotta/peach
   radial low in opacity, for premium warmth. Not a gradient slab; it sits behind
   everything and quietly lifts the porcelain where the type lands. */
.fp-hero-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  /* On the clean white surface a strong tint would read as a stain, so this is a
     barely-there warmth low behind the headline — just enough to keep the white
     from feeling clinical, while the page stays crisp and Apple-grade. */
  background:
    radial-gradient(120% 60% at 24% 84%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 62%);
}
/* New layout (2026-06-17): a hand lifting a gourmet burger anchors the BOTTOM of the
   landing — Deliveroo-taco style. The shot (`hero-burger.jpg`) is the hand + burger on a
   seamless white background, so its own white dissolves into the white landing. We pin it
   to a BOTTOM band, `contain` + `center bottom`, so the WHOLE burger shows un-cropped with
   the hand entering from the very bottom edge; sized in vh so its top sits a fixed fraction
   up the page — just under the CTA. A light top feather softens the upper edge. */
.fp-hero-pic {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: min(64vh, 640px);
  z-index: 0; pointer-events: none;
  background: url("/static/img/landing/hero-burger.jpg") no-repeat;
  background-size: contain;
  background-position: center bottom;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 10%, #000 26%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 10%, #000 26%, #000 100%);
}
/* The vertical mask on .fp-hero-pic already eases the photo to nothing before the
   headline zone, so no extra wash is needed — the lower hero is pure white surface. */
/* The motif — a refined fingerprint whorl, echoing "taste is a fingerprint". It sits
   TOP-RIGHT (the burger owns the bottom), bleeding a little off the right edge and
   rotated so the arcs sweep into the corner; a faint terracotta line drawing on the
   clean white, mask-faded toward the edges so it reads as a quiet watermark, never
   competing with the headline. The white sign-in chip sits above it and stays crisp. */
.fp-print {
  position: absolute; right: -12%; top: calc(env(safe-area-inset-top, 0px) + 52px); bottom: auto; left: auto;
  width: min(48vw, 240px);
  transform: rotate(8deg);
  opacity: .17; pointer-events: none; z-index: 1;
  -webkit-mask-image: radial-gradient(118% 118% at 80% 26%, #000 42%, transparent 82%);
  mask-image: radial-gradient(118% 118% at 80% 26%, #000 42%, transparent 82%);
  animation: fpPrintIn 1.6s var(--ease-out, ease) both .25s;
}
.fp-print svg { width: 100%; height: auto; display: block; }
@keyframes fpPrintIn { from { opacity: 0; transform: rotate(8deg) scale(.92); } to { opacity: .17; transform: rotate(8deg) scale(1); } }

.fp-top { position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) clamp(20px, 5vw, 44px) 0; }
/* No top scrim needed now — the burger anchors the BOTTOM and the top bar sits on clean
   white. (A scrim here would also white out the top of the fingerprint motif.) */
.fp-wm { font-family: var(--serif); font-style: italic; font-weight: 560; font-size: 22px;
  display: flex; align-items: center; gap: 8px; color: var(--text); }
.fp-wm svg { width: 21px; height: 21px; flex: none; display: block; }
.fp-wm .fp-dot { color: var(--accent); }
.fp-signin { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--text);
  text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 17px;
  background: var(--surface);
  transition: background .18s var(--ease-out, ease), border-color .18s var(--ease-out, ease), transform .18s var(--ease-out, ease); }
.fp-signin:hover { background: var(--surface-2); border-color: var(--text-3); transform: translateY(-1px); }
.fp-signin:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.fp-body { position: relative; z-index: 5; padding: 0 28px min(44vh, 440px);
  width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Eyebrow — refined serif italic in sentence case. No uppercase, no tracking,
   no middot; muted ink so the serif headline carries the page. */
.fp-eyebrow { font-family: var(--serif); font-style: italic; font-weight: 420;
  font-size: 14.5px; color: var(--text-2); margin-bottom: 18px;
  animation: fpUp .7s var(--ease-out, ease) both .12s; }
/* Headline sized for the phone column: ~13.5vw on phones, but the 3.85rem max
   keeps it inside the 460px frame on desktop (where vw reads the wide viewport). */
.fp-h1 { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144;
  font-size: clamp(3rem, 13.5vw, 3.85rem); line-height: .98; letter-spacing: -.022em; color: var(--text);
  margin-bottom: 20px;
  animation: fpUp .9s var(--ease-out, ease) both .2s; }
.fp-h1 em { font-style: italic; font-weight: 480; color: var(--accent); }
/* Scoped under .fp-landing so it beats the passport food-tab's bare `.fp-sub`
   (which shares this prefix and is defined later in the cascade) — landing owns
   its own subline color/size without touching that screen. */
.fp-landing .fp-sub { font-family: var(--sans); color: var(--text-2); font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.55; max-width: 33ch; margin: 0 auto;
  animation: fpUp .9s var(--ease-out, ease) both .3s; }
.fp-cta { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px;
  margin-top: 30px; padding: 16px 26px; font-family: var(--sans); font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  /* Landing-scoped deeper terracotta so the warm-white label clears WCAG AA
     (4.5:1) at the lightest gradient stop — #BD4928 = 4.77:1, vs 3.78 on the
     global --accent-grad's brighter #CF5C36 start. */
  color: var(--on-accent); background: linear-gradient(135deg, #BD4928 0%, #B0451F 55%, #A8431F 100%); text-decoration: none; cursor: pointer;
  box-shadow: 0 16px 36px -12px rgba(178,67,31,.42), inset 0 1px 0 rgba(255,255,255,.22);
  animation: fpUp .9s var(--ease-out, ease) both .4s;
  transition: transform .16s var(--ease-spring, ease), box-shadow .22s var(--ease-out, ease), filter .2s ease; }
.fp-cta svg { transition: transform .25s var(--ease-spring, ease); }
.fp-cta:hover { transform: translateY(-2px); filter: brightness(1.04) saturate(1.06);
  box-shadow: 0 22px 46px -12px rgba(178,67,31,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.fp-cta:hover svg { transform: translateX(4px); }
.fp-cta:active { transform: scale(.97); }
.fp-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@keyframes fpUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }

@media (prefers-reduced-motion: reduce) {
  .fp-print { animation: none; opacity: .17; }
  .fp-eyebrow, .fp-h1, .fp-landing .fp-sub, .fp-cta { animation: none; opacity: 1; transform: none; }
}

/* ── NAV (top bar) — frosted glass on every screen ─── */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; height: 64px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(251, 247, 241, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  position: sticky; top: 0; z-index: 100;
}
.nav-logo {
  font-family: var(--serif); font-size: 24px; font-weight: 500;
  color: var(--text); letter-spacing: -0.02em; line-height: 1;
  text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-logo::after { content: '.'; color: var(--accent); -webkit-text-fill-color: var(--accent); }
.nav-actions { display: flex; gap: 9px; align-items: center; }
/* (The .nav-user initial-circle account chip was removed from all page headers
   2026-07-09 — founder call: no avatar chip in the top-right corner.) */
/* Signed-in home — keep Sign out present but quiet */
.home-signout-link {
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  font-size: 12px; color: var(--text-3); padding: 14px 6px; line-height: 1;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color 0.16s var(--ease-out);
}
.home-signout-link:hover { color: var(--text-2); }

/* ── BUTTONS — refined, dimensional ──────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: var(--r-md);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.008em;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 0.22s var(--ease-spring), background 0.22s var(--ease-out),
              border-color 0.22s var(--ease-out), box-shadow 0.24s var(--ease-out),
              filter 0.22s var(--ease-out);
  text-decoration: none; font-family: var(--sans);
  position: relative; isolation: isolate;
}
.btn-primary {
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, transparent 60%);
  pointer-events: none; z-index: -1;
}
.btn-primary:hover {
  filter: brightness(1.04) saturate(1.08);
  box-shadow: 0 14px 36px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.97); }
.btn-ghost {
  background: var(--surface);
  color: var(--text); border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  border-color: var(--text-3); background: var(--surface-3);
  transform: translateY(-1px); box-shadow: var(--shadow);
}
.btn-ghost:active { transform: scale(0.97); }
.btn-ico { margin-right: 9px; flex-shrink: 0; opacity: 0.95; }
.btn-primary .btn-ico { transition: transform 0.3s var(--ease-spring); }
.btn-primary:hover .btn-ico { transform: rotate(12deg) scale(1.08); }

/* ── HOME — premium editorial hero with ambient gradient ── */
.hero {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 88px 26px 64px; min-height: 86vh;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 200, 184, 0.55) 0%, transparent 42%),
    radial-gradient(circle at 86% 22%, rgba(218, 230, 181, 0.50) 0%, transparent 40%),
    radial-gradient(circle at 50% 92%, rgba(255, 233, 163, 0.45) 0%, transparent 48%);
  filter: blur(4px);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-block; margin-bottom: 24px;
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  letter-spacing: 0.01em; line-height: 1.4;
  max-width: 420px;
}
.hero-eyebrow strong {
  color: var(--text); font-weight: 600;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Landing page (new visitor) keeps the original pill treatment for the eyebrow */
.hero-landing .hero-eyebrow {
  padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(242, 80, 46, 0.10); color: var(--accent-deep);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em;
}
/* Landing hero — airy but not oversized; a sliver of "how it works" peeks below. */
.hero-landing { min-height: 78vh; padding: 56px 26px 52px; }
.hero-landing::before {
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 200, 184, 0.42) 0%, transparent 48%),
    radial-gradient(circle at 50% 98%, rgba(255, 233, 163, 0.30) 0%, transparent 52%);
  filter: none;
}
.hero-lede {
  font-size: 16.5px; color: var(--text-2); max-width: 360px;
  line-height: 1.6; margin: 0 auto 30px; text-wrap: pretty;
}
/* Premium, highly tappable hero CTAs */
.hero-landing .hero-actions .btn { padding-top: 16px; padding-bottom: 16px; font-size: 15px; }
.hero-note {
  margin-top: 22px; font-size: 12.5px; color: var(--text-2);
  letter-spacing: 0.01em; max-width: 320px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 11vw, 58px);
  line-height: 1.03; letter-spacing: -0.03em;
  margin-bottom: 22px; color: var(--text);
  max-width: 520px;
  text-wrap: balance;   /* even, premium line breaks without manual <br> */
}
.hero h1 span, .hero h1 em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(135deg, #FF6B3D 0%, #E2421C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  font-size: 17px; color: var(--text-2); max-width: 380px;
  line-height: 1.65; margin-bottom: 38px;
}
.hero-sub {
  font-size: 15.5px; color: var(--text-2); max-width: 380px;
  line-height: 1.6; margin-bottom: 34px;
}
.hero-stars {
  letter-spacing: 0.1em; color: var(--accent);
  font-size: 13px; margin-right: 4px;
}
.hero-sep {
  display: inline-block; margin: 0 0.5em;
  color: var(--text-3); font-style: normal;
}
.hero-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }
.hero-actions .btn { width: 100%; }
.hero-tier {
  margin-top: 28px; font-size: 12px; font-weight: 500;
  color: var(--text-3); letter-spacing: 0.02em;
}
.hero-tier-next { color: var(--text-3); opacity: 0.7; }
.hero-tier-cred { color: var(--accent-deep); font-weight: 600; }

/* Returning-user editorial hero — calm text on the warm gradient. Trimmed from
   the 86vh landing hero so the first photo rail peeks and invites scroll. */
.hero-memory, .hero-taste, .hero-open { min-height: 72vh; padding-top: 64px; }

/* "Tonight" hero — signed-in command center. Compact + functional (not a full
   landing hero): greeting + clear primary action, with content below in view. */
.hero-tonight { min-height: 52vh; padding-top: 34px; padding-bottom: 36px; }
.hero-spark { display: inline-flex; color: var(--accent); margin-bottom: 16px;
  animation: spark-in 0.6s var(--ease-out, ease-out) both; }
.hero-spark svg { width: 26px; height: 26px; }
.hero-eyebrow-caps {
  text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px;
  font-weight: 700; color: var(--text-3); margin-bottom: 14px;
}
.hero-tonight h1 {
  font-size: clamp(34px, 9.5vw, 50px); margin-bottom: 12px; letter-spacing: -0.03em;
}
.hero-tonight .hero-sub { margin-bottom: 26px; }
@keyframes spark-in {
  from { opacity: 0; transform: translateY(6px) rotate(-22deg) scale(0.8); }
  to   { opacity: 1; transform: none; }
}
/* Subtle time-of-day shift in the warm glow behind the hero */
.hero-tonight.tod-morning::before { background:
  radial-gradient(circle at 20% 16%, rgba(255,221,180,0.55) 0%, transparent 44%),
  radial-gradient(circle at 84% 24%, rgba(224,234,190,0.50) 0%, transparent 42%),
  radial-gradient(circle at 50% 96%, rgba(255,238,180,0.42) 0%, transparent 50%); }
.hero-tonight.tod-evening::before, .hero-tonight.tod-late::before { background:
  radial-gradient(circle at 16% 12%, rgba(255,168,148,0.52) 0%, transparent 44%),
  radial-gradient(circle at 88% 80%, rgba(196,124,156,0.34) 0%, transparent 46%),
  radial-gradient(circle at 50% 100%, rgba(255,196,138,0.42) 0%, transparent 52%); }

/* ── Weekly digest — home page "This week" section ──────────────────────── */
.home-digest {
  padding: 8px 26px 60px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2, var(--surface)) 100%);
  border-top: 1px solid var(--line);
}
.home-digest:empty { display: none; }
.home-digest-head { padding: 36px 0 18px; }
.home-digest-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent-deep); margin: 0 0 8px;
}
.home-digest-title {
  font-family: var(--serif); font-size: clamp(28px, 7vw, 36px);
  line-height: 1.08; letter-spacing: -0.02em;
  font-weight: 500; color: var(--text); margin: 0;
  max-width: 480px;
}
.home-digest-grid {
  display: flex; flex-direction: column; gap: 12px;
}
.digest-card {
  display: block; text-decoration: none;
  padding: 20px 22px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease-spring),
              box-shadow 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out);
}
.digest-card:hover {
  transform: translateY(-2px);
  border-color: var(--text-3);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.18);
}
.digest-card:active { transform: scale(0.985); }
.digest-card-meta {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em;
}
.digest-cuisine { color: var(--accent-deep); }
.digest-area { color: var(--text-3); }
.digest-name {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  letter-spacing: -0.018em; line-height: 1.18;
  color: var(--text); margin: 0 0 8px;
}
.digest-reason {
  font-size: 13.5px; color: var(--text-2); line-height: 1.55;
  margin: 0 0 12px;
}
.digest-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.digest-pill {
  display: inline-block; padding: 4px 10px; border-radius: 99px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.digest-pill-soft {
  background: rgba(0,0,0,0.05); color: var(--text-2);
}
.digest-pill-basic {
  background: rgba(0, 0, 0, 0.045); color: var(--text-3); font-weight: 600;
}

/* ── Signed-in home — Taste Points / loyalty module (namespaced .htp- to avoid
   colliding with the passport's .loy- ladder) ──────────────────────────────── */
.htp-wrap { padding: 22px 26px 4px; }
.htp-card {
  display: block; text-decoration: none; position: relative; overflow: hidden;
  background: linear-gradient(145deg, var(--surface) 0%, #FFF4E6 100%);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease-spring), box-shadow 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out);
}
.htp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent-2); }
.htp-card:hover .htp-go { color: var(--accent-deep); transform: translateX(2px); }
.htp-card:active { transform: scale(0.99); }
.htp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.htp-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.htp-go { flex-shrink: 0; font-size: 22px; line-height: 1; color: var(--text-3); font-weight: 400;
  transition: color 0.18s var(--ease-out), transform 0.18s var(--ease-spring); }
.htp-tier {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent-deep); margin: 0;
}
.htp-rank { display: inline-flex; gap: 5px; align-items: center; flex-shrink: 0; }
.htp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.htp-dot.on { background: var(--accent); }
.htp-pts { font-family: var(--serif); font-size: 14px; color: var(--text-2); margin: 9px 0 0; }
.htp-pts strong {
  font-size: 26px; font-weight: 600; color: var(--text); margin-right: 5px; letter-spacing: -0.01em;
}
.htp-bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 14px 0 8px; }
.htp-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent-grad); }
.htp-next { font-size: 12.5px; color: var(--text-2); margin: 0; }
.htp-next strong { color: var(--accent-deep); font-weight: 700; }
.htp-nudge { font-size: 12px; color: var(--text-3); margin: 10px 0 0; }

/* ── Reusable cuisine wash — DRY token for any [data-cz] element (rails) ──── */
[data-cz="coral"]     { --cz-wash: linear-gradient(150deg, var(--c-coral) 0%, #ffe2d6 100%); }
[data-cz="lemon"]     { --cz-wash: linear-gradient(150deg, var(--c-lemon) 0%, #fff6d8 100%); }
[data-cz="mint"]      { --cz-wash: linear-gradient(150deg, var(--c-mint) 0%, #dcf3e6 100%); }
[data-cz="sky"]       { --cz-wash: linear-gradient(150deg, var(--c-sky) 0%, #e2f1fb 100%); }
[data-cz="lavender"]  { --cz-wash: linear-gradient(150deg, var(--c-lavender) 0%, #ece5f7 100%); }
[data-cz="pistachio"] { --cz-wash: linear-gradient(150deg, var(--c-pistachio) 0%, #eaf1d4 100%); }
[data-cz="blush"]     { --cz-wash: linear-gradient(150deg, var(--c-blush) 0%, #fce6ee 100%); }

/* ── Home discovery rails (Slice 3) ─────────────────────────────────────── */
.home-rails {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2, var(--surface)) 100%);
  border-top: 1px solid var(--line);
}
.home-rails .home-digest { background: none; border-top: none; padding-bottom: 24px; }
.home-rail { padding: 4px 0 48px; }
.home-rail-head { padding: 8px 26px 14px; }
.home-rail-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent-deep); margin: 0 0 8px;
}
.home-rail-title {
  font-family: var(--serif); font-size: clamp(24px, 6vw, 30px);
  line-height: 1.1; letter-spacing: -0.02em; font-weight: 500;
  color: var(--text); margin: 0;
}
.home-rail-track {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 26px 8px; scrollbar-width: none;
  /* Without this, scroll-snap aligns the first card to x=0 and eats the left
     padding — cards end up flush to the screen edge. Snap to the gutter instead. */
  scroll-padding-left: 26px; scroll-padding-right: 26px;
}
.home-rail-track::-webkit-scrollbar { display: none; }
.rail-card {
  flex: 0 0 152px; scroll-snap-align: start; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-xs);
  transition: transform 0.18s var(--ease-spring), box-shadow 0.18s var(--ease-out);
}
.rail-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.rail-card:active { transform: scale(0.97); }
.rail-card-media {
  position: relative; aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  background: var(--cz-wash, var(--bg-2));
}
.rail-glyph { font-size: 30px; filter: drop-shadow(0 1px 3px rgba(54,36,18,0.16)); }
/* Real photo on a rail card — cover the media box (higher specificity than the
   .rail-card-media `background` shorthand, so background-size isn't reset). */
.rail-card.has-img .rail-card-media { background-size: cover; background-position: center; }
.rail-card-body { padding: 10px 12px 12px; }
.rail-rest {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-3); margin: 0 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-dish {
  font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--text);
  line-height: 1.2; margin: 0 0 6px; min-height: 36px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rail-rating { font-size: 11px; color: var(--accent); letter-spacing: 0.08em; }
/* Neutral meta line (e.g. curated card area when there's no match label) */
.rail-meta { font-size: 11px; color: var(--text-3); letter-spacing: 0.01em; }
/* Unrated table → a clear, intentional "Rate it" affordance (not muted text) */
.rail-rating-todo {
  display: inline-block; color: var(--accent-deep); font-weight: 700; letter-spacing: 0;
  background: var(--glow-soft); border-radius: 999px; padding: 3px 10px; font-size: 10.5px;
}

/* ── Home quick-rating cards — one-tap 1–5 on the user's own unrated visits ── */
.rate-card {
  position: relative; flex: 0 0 160px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-xs);
  transition: flex-basis 0.42s var(--ease-smooth), opacity 0.4s var(--ease-out),
              transform 0.42s var(--ease-smooth), margin 0.42s var(--ease-smooth);
}
.rate-card-media {
  position: relative; aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  background: var(--cz-wash, var(--bg-2));
}
.rate-card.has-img .rate-card-media { background-size: cover; background-position: center; }

/* The 1–5 row sits directly under the image */
.rate-row { display: flex; gap: 4px; padding: 8px 8px 0; }
.rate-dot {
  flex: 1; min-height: 36px; padding: 7px 0; border-radius: 9px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--text-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out),
              color 0.15s var(--ease-out), transform 0.12s var(--ease-spring);
}
.rate-dot:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.rate-dot:active { transform: scale(0.9); }
.rate-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rate-dot.chosen {
  background: var(--accent-grad); border-color: transparent; color: var(--on-accent);
  box-shadow: 0 4px 10px -3px var(--glow);
}
.rate-dot:disabled { cursor: default; }
.rate-card-body { padding: 8px 12px 12px; }
.rate-hint { font-size: 10.5px; color: var(--text-3); margin: 4px 0 0; letter-spacing: 0.02em; }
/* "I didn't order this" — visually secondary, never competes with the dots */
.rate-not-mine {
  display: block; margin: 7px auto 0; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 11px; color: var(--text-3);
  text-decoration: underline; text-underline-offset: 2px;
}
.rate-not-mine:hover { color: var(--text-2); }
.rate-not-mine:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.rate-not-mine:disabled { opacity: 0.5; cursor: default; }
.rate-err { font-size: 10.5px; color: var(--accent-deep); font-weight: 600; line-height: 1.35; margin: 5px 0 0; }

/* Loading — lock the row with a gentle pulse */
.rate-card.is-loading .rate-row { animation: ratePulse 0.9s var(--ease-out) infinite; }
@keyframes ratePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Success overlay — checkmark + "Rated 4/5" */
.rate-success {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  text-align: center; padding: 8px;
  background: var(--accent-grad); color: var(--on-accent);
  opacity: 0; transition: opacity 0.28s var(--ease-out);
  pointer-events: none;   /* invisible until rated — must NOT swallow the dot clicks */
}
/* `.rate-success { display:flex }` overrides the UA `[hidden]{display:none}`, so the
   invisible overlay was covering the card and blocking the 1–5 buttons. Respect the
   attribute: while hidden it's removed from layout entirely. */
.rate-success[hidden] { display: none; }
.rate-card.is-rated .rate-success, .rate-card.is-skipped .rate-success { opacity: 1; pointer-events: auto; }
.rate-check {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.22); font-size: 21px; font-weight: 800;
  transform: scale(0.4); transition: transform 0.34s var(--ease-spring);
}
.rate-card.is-rated .rate-check, .rate-card.is-skipped .rate-check { transform: scale(1); }
.rate-success-msg { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; margin: 0; }
.rate-success-score { font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1; }

/* Leaving — collapse width so the next card slides into place */
.rate-card.is-leaving {
  flex-basis: 0; opacity: 0; transform: scale(0.92); margin-right: -12px; pointer-events: none;
}

/* Completion state — replaces the track when nothing is left to rate */
.rate-done {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; padding: 20px 26px 10px;
}
.rate-done:focus { outline: none; }   /* focused programmatically for SR only — no ring on a non-interactive block */
.rate-done-check {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--glow-soft); color: var(--accent); font-size: 22px; font-weight: 800; margin-bottom: 4px;
}
.rate-done-title { font-family: var(--serif); font-size: 19px; color: var(--text); margin: 0; }
.rate-done-sub { font-size: 13px; color: var(--text-2); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .rate-card, .rate-success, .rate-check { transition: none; }
  .rate-card.is-loading .rate-row { animation: none; }
}

/* ── Friends tab on passport ────────────────────────────────────────────── */
.friends-container { padding: 4px 0 32px; }
.friends-loading { color: var(--text-3); font-size: 13px; padding: 24px 0; text-align: center; }

.fr-add {
  padding: 18px 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 18px;
}
.fr-add-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-3); margin: 0 0 10px;
}
.fr-add-row { display: flex; gap: 8px; align-items: stretch; }
.fr-add-input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--line-2);
  border-radius: 10px; background: var(--bg);
  font-family: var(--sans); font-size: 14px; color: var(--text);
  transition: border-color 0.14s;
}
.fr-add-input:focus { outline: none; border-color: var(--accent); }
.fr-add-btn { white-space: nowrap; padding-left: 18px; padding-right: 18px; font-size: 13px; }
.fr-add-msg {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.4;
  padding: 8px 12px; border-radius: 8px;
}
.fr-add-ok { background: rgba(46,160,67,0.08); color: #1d6a2c; }
.fr-add-err { background: rgba(242,80,46,0.08); color: var(--accent-deep); }

.fr-section { margin-bottom: 24px; }
.fr-section:last-child { margin-bottom: 0; }
.fr-section-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-3); margin: 0 0 12px;
}

.fr-card {
  padding: 16px 18px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 8px; box-shadow: var(--shadow-sm);
  transition: border-color 0.18s, transform 0.18s var(--ease-spring);
}
.fr-card:hover { border-color: var(--text-3); }
.fr-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.fr-name {
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--text); margin: 0;
}
.fr-tier {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(0,0,0,0.05); color: var(--text-2);
}
.fr-tier.tier-verified  { background: rgba(46,160,67,0.10); color: #1d6a2c; }
.fr-tier.tier-local     { background: rgba(242,80,46,0.10); color: var(--accent-deep); }
.fr-tier.tier-insider   { background: linear-gradient(135deg, #1a1610, #2a2218); color: #FFB48F; }
.fr-tier.tier-tastemaker { background: linear-gradient(135deg, #1a1610, #2a2218); color: #FFD8AA; }
.fr-meta {
  font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0;
}
.fr-meta strong { font-weight: 700; color: var(--text); }
.fr-meta em { font-style: normal; color: var(--accent-deep); font-weight: 600; }
.fr-loved {
  margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.4;
}
.fr-loved em { font-style: italic; color: var(--ink); }
.fr-actions { display: flex; gap: 8px; margin-top: 12px; }
.fr-actions .btn { flex: 1; font-size: 13px; padding: 9px 14px; }
.fr-status-pill {
  display: inline-block; margin: 10px 0 0;
  padding: 5px 12px; border-radius: 99px;
  background: rgba(0,0,0,0.05); color: var(--text-3);
  font-size: 11.5px; font-weight: 500;
}
.fr-unfriend {
  display: block; margin: 10px 0 0; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 600;
  transition: color 0.14s;
}
.fr-unfriend:hover { color: var(--accent-deep); }
/* Task 5 — @username handles + friend search */
.fr-handle {
  font-family: var(--sans, inherit); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; color: var(--accent-deep);
}
.fr-own-handle {
  margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5;
}
.fr-own-handle strong { color: var(--accent-deep); font-weight: 700; }
.fr-search-results {
  margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px;
}
.fr-search-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,0.035);
}
.fr-search-id { font-size: 14px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-search-id strong { font-weight: 600; }
.fr-search-add { font-size: 12px; padding: 7px 14px; white-space: nowrap; }
.fr-search-empty { margin: 10px 0 0; font-size: 13px; color: var(--text-3); }
.fr-empty {
  padding: 18px 20px; font-size: 13.5px; color: var(--text-3);
  line-height: 1.6; text-align: center;
  background: var(--surface); border: 1px dashed var(--line-2);
  border-radius: 12px; margin: 0;
}

/* Variant-specific background atmospherics — subtle per-mode tint shifts.
   The base .hero::before gradients still apply; these refine the warm/cool feel. */
.hero-memory::before {
  filter: blur(4px) saturate(0.95);
}
.hero-taste::before {
  filter: blur(4px) hue-rotate(-8deg);
}

/* Landing "How it works" — numbered, scannable, same premium system as the hero */
.home-steps {
  padding: 4px 26px 56px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-3, #fff) 0%, var(--bg) 60%);
}
.home-steps-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--text-3); margin: 36px 0 4px;
}
.home-steps-list { list-style: none; margin: 0; padding: 0; }
.home-step {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 2px; border-bottom: 1px solid var(--line);
}
.home-step:last-child { border-bottom: none; }
.home-step-num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--accent-deep); background: var(--glow-soft);
  border: 1px solid rgba(242, 80, 46, 0.18);
}
.home-step-body { flex: 1; min-width: 0; }
.home-step h3 {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.2; margin: 3px 0 6px; color: var(--text);
}
.home-step p { font-size: 14.5px; color: var(--text-2); line-height: 1.55; margin: 0; }

/* ── RESTAURANTS ─────────────────────────── */
.page { padding: 32px 22px 60px; }

.restaurants-header { margin-bottom: 28px; position: relative; }
.restaurants-header .eyebrow {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(242, 80, 46, 0.10); color: var(--accent-deep);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
}
.restaurants-title {
  font-family: var(--serif); font-size: clamp(34px, 9.5vw, 44px);
  font-weight: 500; letter-spacing: -0.028em; line-height: 1.02; color: var(--text);
}
.restaurants-subtitle { font-size: 14.5px; color: var(--text-2); margin-top: 10px; line-height: 1.55; }

/* founder audit (Jul 16): the guide's tools stick while the 500-venue list scrolls.
   Sticky against #app (the app-shell scroller since v767); cream backdrop so cards
   slide beneath, hairline seam only while stuck (mask trick avoided — keep simple). */
/* Base rule. The full-bleed of the sticky bar (so wider cards can't peek past it while
   stuck) lives in the page-scoped `body.fal-on .rf-stick` override further down, which
   also handles the chip-row edge fade + scroll-snap. */
.rf-stick{position:sticky;top:0;z-index:30;background:var(--bg,#FBF7F1);padding-top:8px;margin-top:-8px;box-shadow:0 10px 12px -12px rgba(46,42,38,.18)}

.search-wrap {
  position: relative; margin-bottom: 18px;
}
.search-input {
  width: 100%; padding: 16px 44px 16px 20px; font-size: 15px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  outline: none; font-family: var(--sans); box-sizing: border-box;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-xs);
}
.search-input::placeholder { color: var(--text-3); }
.search-input:focus {
  border-color: var(--accent); background: var(--surface-3);
  box-shadow: 0 0 0 4px var(--glow-soft), var(--shadow-sm);
}
.search-clear {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--text-3); padding: 4px 6px;
  line-height: 1; border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.search-clear:hover { color: var(--text); background: var(--bg-2); }
.search-clear[hidden] { display: none; }
/* Inferred-context chip on the order/chat screen (Phase 7 moment persona) */
.ctx-chip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 14px; padding: 9px 14px;
  background: rgba(204,63,22,0.07); border: 1px solid rgba(204,63,22,0.18);
  border-radius: var(--r-pill);
}
.ctx-chip-text { font-size: 13px; color: var(--text-2); }
.ctx-chip-text strong { color: var(--accent-deep); font-weight: 700; }
.ctx-chip-undo {
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--accent-deep);
  text-decoration: underline; padding: 2px 4px; flex-shrink: 0;
}
.ctx-chip-undo:hover { opacity: 0.7; }

/* Dish match tag on card */
.card-dish-match {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  color: var(--accent-deep); background: rgba(204,63,22,0.09);
  padding: 3px 9px; border-radius: var(--r-pill); margin-bottom: 6px;
}
/* Search loading shimmer */
.search-loading {
  display: flex; gap: 8px; padding: 24px 0; justify-content: center;
  grid-column: 1 / -1;
}
.search-loading span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); opacity: 0.3;
  animation: searchPulse 1.1s ease-in-out infinite;
}
.search-loading span:nth-child(2) { animation-delay: 0.18s; }
.search-loading span:nth-child(3) { animation-delay: 0.36s; }
@keyframes searchPulse {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.2; }
  40%           { transform: scale(1.1); opacity: 0.7; }
}

.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.chip {
  padding: 10px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--surface); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: var(--sans); color: var(--text-2);
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out),
              color 0.2s var(--ease-out), transform 0.16s var(--ease-spring),
              box-shadow 0.2s var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.chip:hover {
  border-color: var(--text-3); color: var(--text);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.chip:active { transform: scale(0.96); }
.chip.active {
  background: var(--accent-grad); border-color: transparent; color: var(--on-accent); font-weight: 700;
  box-shadow: 0 6px 16px -4px var(--glow);
}

/* Horizontal-scroll filter rows — reclaim the vertical space the 14-chip
   wall ate, so the first restaurant lands in the first viewport (Slice 4). */
.filter-scroll {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scrollbar-width: none;
  margin-bottom: 10px; padding-bottom: 2px;
}
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-scroll .chip { flex: 0 0 auto; scroll-snap-align: start; }
.filter-areas { margin-bottom: 22px; }
.chip-cuisine { display: inline-flex; align-items: center; }
.chip-glyph { margin-right: 6px; font-size: 13px; }

/* Active-filter status row + clear-all (discovery list) */
.filter-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -2px 0 16px; padding: 2px 4px;
  animation: fadeUp 0.3s var(--ease-out);
}
.filter-status[hidden] { display: none; }
.filter-status-count { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.filter-clear-btn {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--accent-deep);
  padding: 5px 9px; border-radius: var(--r-pill); transition: background 0.15s, color 0.15s;
}
.filter-clear-btn:hover { background: var(--glow-soft); }
.filter-clear-btn:active { transform: scale(0.96); }

.restaurant-grid { display: flex; flex-direction: column; gap: 14px; }

.restaurant-card {
  background: var(--surface); padding: 22px 22px 20px; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); position: relative;
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease-spring), border-color 0.28s var(--ease-out),
              box-shadow 0.28s var(--ease-out);
}
.restaurant-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 100% 0%, rgba(255, 200, 184, 0.20) 0%, transparent 55%);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.restaurant-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.restaurant-card:hover::after { opacity: 1; }
.restaurant-card:active { transform: scale(0.985); }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card-cuisine {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(242, 80, 46, 0.10); color: var(--accent-deep);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.card-price { font-size: 13px; font-weight: 600; color: var(--text-3); letter-spacing: 0.06em; }
.card-match {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  margin: 0 0 10px; padding: 4px 10px;
  border-radius: var(--r-pill);
}
.card-match.m-strong {
  background: var(--accent-grad); color: var(--on-accent);
  box-shadow: 0 4px 12px -4px var(--glow);
}
.card-match.m-strong::before { content: '★'; font-size: 9px; }
/* F3-B — occasion-led pick: the headline IS the reason, so suppress the leading ★ marker, and
   show the taste-match % as a quiet secondary chip beside it (match demoted, reason leads). */
.card-match.lead-reason::before { content: none; }
.card-match-chip { display: inline-block; margin: 0 0 10px 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); vertical-align: middle; }
.card-match.m-good {
  background: rgba(218, 230, 181, 0.40); color: var(--c-pistachio-deep);
}
.card-name {
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  margin-bottom: 6px; letter-spacing: -0.024em; line-height: 1.12; color: var(--text);
}
.card-area { font-size: 13.5px; color: var(--text-2); margin-bottom: 18px; }
.card-footer { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.card-btn { padding: 10px 16px; font-size: 12.5px; border-radius: var(--r-sm); }
.card-cta {
  font-size: 13.5px; font-weight: 600; color: var(--accent-deep);
  display: inline-flex; align-items: center; gap: 6px;
}
.card-cta::after { content: '\2192'; font-size: 16px; transition: transform 0.24s var(--ease-out); }
.restaurant-card:hover .card-cta::after { transform: translateX(5px); }

.empty-state { color: var(--text-3); font-size: 15px; padding: 64px 0; text-align: center; }
.empty-block { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 52px 16px; }
.empty-title { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--text); }
.empty-sub { font-size: 14px; color: var(--text-2); margin-bottom: 8px; max-width: 30ch; }
.empty-reset { margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════════
   DISCOVERY CARD v2 — image-ready media + MatchMeter + TrustRow (Slice 1)
   Leads with a CuisineMedia block: a cuisine-tinted wash + food glyph +
   serif monogram now, and the SAME slot accepts a real photo (.has-img)
   the moment image_url exists. Builds on the existing .restaurant-card.
   ════════════════════════════════════════════════════════════════════════ */
.rcard { padding: 0; }
.rcard-media {
  position: relative; aspect-ratio: 4 / 3; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; overflow: hidden;
}
.rcard-glyph {
  position: absolute; top: 12px; left: 14px; font-size: 22px; z-index: 2;
  filter: drop-shadow(0 1px 3px rgba(54,36,18,0.18));
}
.rcard-monogram {
  font-family: var(--serif); font-weight: 600; font-size: 88px; line-height: 1;
  color: rgba(255,255,255,0.62); user-select: none;
  text-shadow: 0 2px 16px rgba(54,36,18,0.10);
}
.rcard.has-img .rcard-glyph, .rcard.has-img .rcard-monogram { display: none; }
.rcard.has-img .rcard-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20,12,4,0.30));
}
.rcard-price {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(255,255,255,0.92); color: var(--text);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);   /* NO backdrop-filter: hundreds of blurred card pills crash iOS Safari's GPU (the "A problem repeatedly occurred" reload loop). The 0.92 bg reads fine solid. */
}
.rcard-soon {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  background: rgba(26,22,16,0.74); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; padding: 4px 9px; border-radius: var(--r-pill);
}
/* Menu build-status chip (founder's reference): pending pops in terracotta, ready recedes. */
.menu-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 10px/1 var(--sans); letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap; vertical-align: middle;
}
.menu-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.menu-badge.ready { color: var(--fg2, #6b5d4d); background: color-mix(in srgb, var(--fg3, #8a7a6a) 15%, transparent); }
.menu-badge.ready::before { background: #5f9e6a; }
.menu-badge.pending { color: var(--accent-deep, #9A3C20); background: color-mix(in srgb, var(--accent, #C2502F) 14%, transparent); }
.menu-badge.pending::before { background: var(--accent, #C2502F); }
.df-chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 3px 0 2px; }

/* Go-Out "Menu-ready spots only" toggle (solo) */
.df-toggle { display: flex; align-items: center; gap: 14px; margin: 6px 0 2px; padding: 14px 16px;
  background: var(--card, #fff); border: 1px solid var(--line, #ece4da); border-radius: 16px; cursor: pointer; }
.df-toggle-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.df-toggle-title { font: 700 14px/1.2 var(--sans); color: var(--fg, #2c2420); }
.df-toggle-sub { font: 400 12px/1.45 var(--sans); color: var(--fg3, #8a7a6a); }
.df-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.df-toggle-track { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px;
  background: var(--line, #d9cfc3); transition: background .18s ease; }
.df-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s ease; }
.df-toggle-input:checked ~ .df-toggle-track { background: var(--accent, #C2502F); }
.df-toggle-input:checked ~ .df-toggle-track .df-toggle-thumb { transform: translateX(18px); }
.df-toggle-input:focus-visible ~ .df-toggle-track { outline: 2px solid var(--accent, #C2502F); outline-offset: 2px; }
.rcard-body { padding: 15px 18px 17px; }
.rcard-tagrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.rcard .card-name { font-size: 22px; margin-bottom: 3px; }
.rcard .card-area { margin-bottom: 12px; }

/* Cuisine tint families — wash (media) + tag colour, driven by data-cz */
.rcard[data-cz="coral"]     .rcard-media { background: linear-gradient(150deg, var(--c-coral) 0%, #ffe2d6 100%); }
.rcard[data-cz="lemon"]     .rcard-media { background: linear-gradient(150deg, var(--c-lemon) 0%, #fff6d8 100%); }
.rcard[data-cz="mint"]      .rcard-media { background: linear-gradient(150deg, var(--c-mint) 0%, #dcf3e6 100%); }
.rcard[data-cz="sky"]       .rcard-media { background: linear-gradient(150deg, var(--c-sky) 0%, #e2f1fb 100%); }
.rcard[data-cz="lavender"]  .rcard-media { background: linear-gradient(150deg, var(--c-lavender) 0%, #ece5f7 100%); }
.rcard[data-cz="pistachio"] .rcard-media { background: linear-gradient(150deg, var(--c-pistachio) 0%, #eaf1d4 100%); }
.rcard[data-cz="blush"]     .rcard-media { background: linear-gradient(150deg, var(--c-blush) 0%, #fce6ee 100%); }
.rcard[data-cz="coral"]     .card-cuisine { background: rgba(230,107,74,0.14);  color: var(--c-coral-deep); }
.rcard[data-cz="lemon"]     .card-cuisine { background: rgba(201,162,39,0.18);  color: var(--c-lemon-deep); }
.rcard[data-cz="mint"]      .card-cuisine { background: rgba(91,175,126,0.18);  color: var(--c-mint-deep); }
.rcard[data-cz="sky"]       .card-cuisine { background: rgba(74,140,194,0.16);  color: var(--c-sky-deep); }
.rcard[data-cz="lavender"]  .card-cuisine { background: rgba(138,120,201,0.18); color: var(--c-lavender-deep); }
.rcard[data-cz="pistachio"] .card-cuisine { background: rgba(129,154,71,0.18);  color: var(--c-pistachio-deep); }
.rcard[data-cz="blush"]     .card-cuisine { background: rgba(199,93,133,0.16);  color: var(--c-blush-deep); }
/* has-img: a real photo must COVER the 4:3 box. The data-cz `background`
   shorthand above resets background-size to `auto` (which renders the photo at
   native size = zoomed-in top-left crop), so re-assert cover/center here —
   placed AFTER the tints so it wins. Mirrors the hero's .has-img rule. */
.rcard.has-img .rcard-media { background-size: cover; background-position: center 40%; }

/* MatchMeter — strength as a fill + tier label (never colour alone) */
.match-meter { display: flex; align-items: center; gap: 9px; margin: 2px 0 11px; }
.match-meter-track { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.match-meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent-grad); }
.match-meter[data-tier="good"] .match-meter-fill { background: linear-gradient(90deg, var(--c-pistachio-deep), var(--c-mint-deep)); }
.match-meter[data-tier="soft"] .match-meter-fill { background: var(--text-3); }
.match-meter-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); white-space: nowrap; }
.match-meter[data-tier="strong"] .match-meter-label { color: var(--accent-deep); }

/* TrustRow — real social proof from batched verdict counts */
.trust-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.trust-pip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); }
.trust-loved { background: var(--glow-soft); color: var(--accent-deep); }
.trust-verified { background: rgba(91,175,126,0.16); color: var(--c-mint-deep); }
.trust-new { background: var(--bg-2); color: var(--text-3); }

/* Skeleton card — loading placeholder for the grid */
.skeleton-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.skeleton-card .sk-media { aspect-ratio: 4 / 3; background: var(--bg-2); }
.skeleton-card .sk-line { height: 12px; margin: 14px 18px; border-radius: 6px; background: var(--bg-2); }
.skeleton-card .sk-line.sk-short { width: 42%; }
.skeleton-card .sk-media, .skeleton-card .sk-line { animation: skPulse 1.3s ease-in-out infinite; }
@keyframes skPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-card .sk-media, .skeleton-card .sk-line { animation: none; }
}

/* ── RESTAURANT HERO — image-ready CuisineMedia (Slice 2) ─────────────────
   Fallback: cuisine-tinted wash + serif monogram, dark editorial text.
   With a photo (.has-img): cover image + scrim, text flips to white.        */
.r-hero {
  /* Top padding reserves the chip row (.r-back / hero actions sit at top:16px). The
     hero is align-items:flex-end, so a tall title block (long name + multi-line
     address, e.g. Chipotle Dubai Hills) grows the hero and its top — the cuisine tag —
     would otherwise reach y=0 and collide with "All restaurants". This keeps content
     below the chips. */
  min-height: 248px; display: flex; align-items: flex-end;
  padding: 70px 24px 26px; position: relative; overflow: hidden;
  background: var(--bg-2);
}
.r-hero[data-cz="coral"]     { background: linear-gradient(155deg, var(--c-coral) 0%, #ffe2d6 100%); }
.r-hero[data-cz="lemon"]     { background: linear-gradient(155deg, var(--c-lemon) 0%, #fff6d8 100%); }
.r-hero[data-cz="mint"]      { background: linear-gradient(155deg, var(--c-mint) 0%, #dcf3e6 100%); }
.r-hero[data-cz="sky"]       { background: linear-gradient(155deg, var(--c-sky) 0%, #e2f1fb 100%); }
.r-hero[data-cz="lavender"]  { background: linear-gradient(155deg, var(--c-lavender) 0%, #ece5f7 100%); }
.r-hero[data-cz="pistachio"] { background: linear-gradient(155deg, var(--c-pistachio) 0%, #eaf1d4 100%); }
.r-hero[data-cz="blush"]     { background: linear-gradient(155deg, var(--c-blush) 0%, #fce6ee 100%); }

.r-hero-monogram {
  position: absolute; top: 50%; right: 16px; transform: translateY(-56%);
  font-family: var(--serif); font-weight: 600; font-size: 150px; line-height: 1;
  color: rgba(255,255,255,0.5); user-select: none; pointer-events: none;
  text-shadow: 0 3px 22px rgba(54,36,18,0.10);
}
.r-hero-glyph {
  position: absolute; top: 18px; right: 22px; font-size: 30px; pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(54,36,18,0.16));
}
.r-hero.has-img .r-hero-monogram, .r-hero.has-img .r-hero-glyph { display: none; }
.r-hero.has-img { background-size: cover; background-position: center 40%; }
.r-hero.has-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.32) 55%, rgba(0,0,0,0.74) 100%);
}

/* Swipe gallery — real Google Places photos in the restaurant hero. */
.r-gallery { position: absolute; inset: 0; z-index: 0; }
.r-gallery::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,14,10,0.14) 0%, transparent 28%, transparent 46%, rgba(20,14,10,0.64) 100%); }
/* Native CSS scroll-snap carousel (NOT a pointer-event/transform carousel). The browser's
   own gesture engine drives it — reliable on iOS Safari, where the custom pointer path kept
   failing (reported 3x). scroll-snap-stop:always guarantees ONE photo per swipe even under
   fling momentum, so it still honors R18 ("one photo per swipe, not momentum") — natively. */
.r-gal-track { display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.r-gal-track::-webkit-scrollbar { display: none; height: 0; }
.r-gal-slide { flex: 0 0 100%; height: 100%; background-size: cover; background-position: center;
  scroll-snap-align: center; scroll-snap-stop: always; }
.r-gal-dots { position: absolute; bottom: 10px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: 6px; }
.r-gal-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55);
  cursor: pointer; transition: width 0.2s, background 0.2s; }
.r-gal-dot.on { background: #fff; width: 16px; border-radius: 3px; }
.r-hero.has-gallery.has-img::after { display: none; }   /* gallery provides its own scrim */
.r-hero.has-gallery .r-hero-glyph, .r-hero.has-gallery .r-hero-monogram { display: none; }
.r-hero-inner { position: relative; z-index: 1; width: 100%; }
.r-hero.has-gallery .r-hero-inner { pointer-events: none; }   /* title is passive — let horizontal swipes reach the gallery track underneath */
.r-back {
  position: absolute; top: 16px; left: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  text-decoration: none;
  padding: 6px 12px 6px 9px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.2s var(--ease-out);
}
.r-back::before { content: '\2190'; font-size: 14px; }
.r-back:hover { background: rgba(255,255,255,0.82); color: var(--text); transform: translateX(-2px); }
.r-cuisine-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.01em; color: var(--text);
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 14px;
}
.r-name {
  font-family: var(--serif); font-size: clamp(32px, 9vw, 44px);
  font-weight: 500; color: var(--text); letter-spacing: -0.028em;
  line-height: 1.0; margin-bottom: 10px;
}
.r-meta { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
/* Licensed-venue note in the meta line — only ever shown when the curated alcohol
   flag is 1 (we assert serving, never dryness — the flag's absence stays silent). */
.r-licensed { white-space: nowrap; }
.r-hero-trust { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.r-hero-trust .rht-verified {
  font-size: 11.5px; font-weight: 700; color: var(--on-accent);
  background: var(--c-mint-deep); padding: 3px 10px; border-radius: var(--r-pill);
}
.r-hero-trust .rht-rated {
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  background: rgba(255,255,255,0.55); padding: 3px 10px; border-radius: var(--r-pill);
}
/* Verified MENU chip — earned via menu_verification.json (a human checked this venue's
   menu against its own card). Green family so it reads as trust, not personalization. */
.r-hero-trust .rht-menuv {
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: #3E7A4E; padding: 3px 10px; border-radius: var(--r-pill);
}
/* Photo variant → cream text + DARK glassy chips (matches the Concierge mockup
   hero and the Share button — was light/white, which clashed). */
.r-hero.has-img .r-back { color: #F6EFE4; background: rgba(20,14,10,0.42); border-color: transparent; }
.r-hero.has-img .r-back:hover { color: #fff; background: rgba(20,14,10,0.58); }
.r-hero.has-img .r-cuisine-tag { color: #F6EFE4; background: rgba(20,14,10,0.42); }
.r-hero.has-img .r-name { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.22); }
.r-hero-trust .rht-google {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--text-1);
  background: rgba(255,255,255,0.55); padding: 3px 10px; border-radius: var(--r-pill);
}
.r-hero-trust .rht-google svg { color: #F5A623; }
.r-hero-trust .rht-google .rht-gcnt { font-weight: 600; color: var(--text-2); }
.r-hero.has-img .r-meta { color: rgba(255,255,255,0.88); }
.r-hero.has-img .r-hero-trust .rht-rated { color: #fff; background: rgba(255,255,255,0.18); }
.r-hero.has-img .r-hero-trust .rht-google { color: #fff; background: rgba(255,255,255,0.18); }
.r-hero.has-img .r-hero-trust .rht-google .rht-gcnt { color: rgba(255,255,255,0.85); }

/* Personal taste-match pill in the venue hero — the headline "how well THIS venue fits YOU"
   signal (backend /menu → venue_match). Terracotta accent so it reads as the personal layer,
   distinct from the neutral rating chips; .is-early softens it before the diner is calibrated. */
.r-hero-match {
  display: inline-flex; align-items: center; gap: 9px; width: fit-content;
  margin-top: 14px; padding: 7px 15px 7px 13px;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--r-pill); box-shadow: 0 5px 16px rgba(194,80,47,0.30);
}
.r-hero-match .rhm-pct { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1; letter-spacing: -0.02em; }
.r-hero-match .rhm-sign { font-size: 13px; opacity: 0.8; margin-left: 1px; }
.r-hero-match .rhm-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
.r-hero-match .rhm-lbl { font-size: 12.5px; font-weight: 700; letter-spacing: 0.005em; }
.r-hero-match .rhm-sub { font-size: 10.5px; font-weight: 500; opacity: 0.84; }
.r-hero-match.is-early { background: color-mix(in srgb, var(--accent) 86%, #5a3326); box-shadow: 0 4px 13px rgba(120,70,45,0.26); }

.r-reserve-btn {
  display: inline-flex; align-items: center; padding: 12px 24px;
  background: var(--accent-grad); color: var(--on-accent); border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.30);
}
.r-body { padding: 30px 22px 80px; }

/* Lane-2 "this kitchen knows you" — the diner's standing recognition at this venue. */
.r-recog { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.r-recog-mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(194,80,47,0.10); color: var(--accent); font-size: 18px; }
.r-recog-body { min-width: 0; }
.r-recog-lead { margin: 0; font: 700 11px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.r-recog-line { margin: 3px 0 0; font: 400 14px/1.4 var(--sans); color: var(--fg1); }

/* ── ORDERING TOOL ───────────────────────── */
.ot-mode-screen { animation: fadeUp 0.45s var(--ease-out); }
.ot-mode-title {
  font-family: var(--serif); font-size: 28px; font-weight: 500;
  letter-spacing: -0.025em; margin-bottom: 8px; line-height: 1.12; color: var(--text);
}
.ot-mode-sub { font-size: 14.5px; color: var(--text-2); margin-bottom: 28px; line-height: 1.6; }

.ot-returning-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--accent); margin-bottom: 12px;
}
.ot-returning-dish { color: var(--accent); font-style: italic; }

/* Dwell-gated verdict wall */
.dwell-gate-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--on-accent);
  background: var(--accent); border-radius: 99px;
  padding: 4px 12px; margin-bottom: 18px;
}
.dwell-gate .ot-mode-sub { margin-bottom: 22px; }
.dwell-gate-skip {
  display: block; width: 100%; text-align: center;
  font-size: 13px; color: var(--text-3);
}

.ot-mode-cards { display: flex; flex-direction: column; gap: 11px; }
.ot-mode-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 22px 20px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); cursor: pointer; text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform 0.24s var(--ease-spring), border-color 0.24s var(--ease-out),
              box-shadow 0.24s var(--ease-out);
  font-family: var(--sans);
}
.ot-mode-card:hover { box-shadow: var(--shadow); }
.ot-mode-card:active { transform: scale(0.98); }
.ot-mode-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--accent);
  color: var(--on-accent); font-family: var(--serif); font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  box-shadow: 0 6px 16px -6px var(--glow);
}
.ot-mode-label {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  margin-bottom: 5px; letter-spacing: -0.015em; color: var(--text);
}
.ot-mode-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; }

.ot-step-screen { animation: fadeUp 0.4s var(--ease-out); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.ot-dots { display: flex; gap: 5px; margin-bottom: 30px; height: 3px; }
.ot-dot {
  height: 3px; border-radius: 99px; background: var(--line-2);
  transition: background 0.4s var(--ease-out), flex-grow 0.4s var(--ease-out); flex: 1;
}
.ot-dot.active { background: var(--accent); flex: 2.4; }
.ot-dot.done { background: var(--accent-2); }

.ot-step-mode {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--text-3); margin-bottom: 14px;
}
.ot-step-q {
  font-family: var(--serif); font-size: 25px; font-weight: 500;
  letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.2; color: var(--text);
}
.ot-step-hint { font-size: 13px; color: var(--text-2); margin-bottom: 22px; }

.ot-opts { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 28px; }
.ot-opt {
  text-align: left; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: var(--sans); color: var(--text);
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out),
              color 0.18s var(--ease-out), transform 0.14s var(--ease-spring);
  display: flex; align-items: center; justify-content: space-between;
}
.ot-opt::after {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  flex-shrink: 0; margin-left: 14px; border: 1.5px solid var(--line-2);
  transition: all 0.2s var(--ease-out);
}
.ot-opt:hover { border-color: var(--line-2); }
.ot-opt:active { transform: scale(0.98); }
.ot-opt.on {
  border-color: var(--accent); background: var(--glow-soft); color: var(--text); font-weight: 600;
}
.ot-opt.on::after {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 3.5px var(--surface);
}

.ot-step-nav { display: flex; justify-content: space-between; align-items: center; }
.ot-nav-next:disabled { opacity: 0.3; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── THE REVEAL ──────────────────────────── */
.reveal-seq { padding: 52px 0 60px; animation: fadeUp 0.4s var(--ease-out); }
.reveal-eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--accent); margin-bottom: 26px;
}
.reveal-lines { display: flex; flex-direction: column; }
.reveal-line {
  display: flex; align-items: center; gap: 15px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  opacity: 0.32; transition: opacity 0.5s var(--ease-out);
}
.reveal-line:last-child { border-bottom: none; }
.reveal-line.active { opacity: 1; }
.reveal-line.done { opacity: 0.5; }
.reveal-marker {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--line-2); background: transparent;
  transition: all 0.4s var(--ease-out);
}
.reveal-line.active .reveal-marker {
  border-color: var(--accent); background: var(--accent);
  animation: revealPulse 1.1s var(--ease-out) infinite;
}
.reveal-line.done .reveal-marker { border-color: var(--accent-2); background: var(--accent-2); animation: none; }
@keyframes revealPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow); }
  50% { box-shadow: 0 0 0 8px rgba(242,80,46,0); }
}
.reveal-text {
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--text);
}
.reveal-line.active .reveal-text { color: var(--accent); }

/* ── RESULT / CHAT ───────────────────────── */
.chat-screen { display: flex; flex-direction: column; min-height: 60vh; }
.chat-messages { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }

.chat-bubble { max-width: 100%; animation: fadeUp 0.4s var(--ease-out); }
.chat-bubble.ai {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px 22px; box-shadow: var(--shadow-sm);
}
.chat-bubble.user {
  background: var(--accent); color: var(--on-accent); align-self: flex-end;
  font-size: 14.5px; font-weight: 600; border-radius: 16px 16px 4px 16px;
  max-width: 82%; padding: 13px 17px;
  box-shadow: 0 6px 16px -6px var(--glow);
}

.ai-msg-intro {
  font-size: 14px; color: var(--text-2); margin-bottom: 20px;
  line-height: 1.62; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}

.dish-reveal {
  padding: 15px 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.dish-reveal:last-of-type { border-bottom: none; }
.dish-reveal.visible { opacity: 1; transform: translateY(0); }

.dish-reveal.dish-feature {
  padding: 0 0 22px; margin-bottom: 6px;
  border-bottom: 2px solid var(--accent);
}
.dish-reveal.dish-feature .dish-name {
  font-family: var(--serif); font-size: 27px; font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 9px; color: var(--text);
}
.dish-reveal.dish-feature .dish-desc { font-size: 14px; }

.dish-card-header { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
.dish-card-header:empty { display: none; }

.dish-name {
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 5px; color: var(--text);
}
.dish-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.62; }

/* "Comes with" line — tells the user what the dish includes. Sits between
   description and the "why" callout. Soft cream background, not loud. */
.dish-served-with {
  margin-top: 8px; padding: 7px 11px;
  background: var(--bg-2); border-radius: 7px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.4;
}
.dish-served-label {
  font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-deep);
  margin-right: 6px;
}

.dish-mod {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding: 9px 12px;
  background: rgba(242, 80, 46, 0.08); border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.dish-mod-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 700; line-height: 1; margin-top: 1px;
}
.dish-mod-text { font-size: 13px; color: var(--text); font-weight: 500; line-height: 1.45; }

/* ── Why This Dish ───────────────────────────────────────────────────────── */
.dish-why {
  margin-top: 9px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  font-style: italic;
}
.dish-reveal.dish-feature .dish-why { font-size: 13px; }

.ai-order-head {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--text); margin: 4px 0 16px;
}
.ai-order-head-alt {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-3);
  margin: 28px 0 4px;
}
.ai-course-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent); margin: 20px 0 6px;
}
.ai-occasion-note {
  font-family: var(--serif); font-size: 15px; color: var(--text-2);
  font-style: italic; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--line); line-height: 1.55;
}
.ai-tip {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--text-2); line-height: 1.6;
}
.ai-tip-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent); display: block; margin-bottom: 6px;
}
.ai-portion {
  margin-top: 20px; padding: 18px 18px; background: var(--glow-soft);
  border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0;
  font-size: 14px; color: var(--text); line-height: 1.6;
}
.ai-portion-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent); display: block; margin-bottom: 6px;
}
.ai-upsell {
  font-size: 13px; color: var(--text-2); margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--line); line-height: 1.55;
}
.ai-upsell a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* Tier 1 (basic) disclosure — honest note when we don't have the real menu yet.
   Subtle, magazine-feel, never apologetic. Pairs with .ai-tip / .ai-portion style. */
.ai-tier-note {
  margin: 14px 0 22px; padding: 14px 16px;
  background: rgba(0,0,0,0.025);
  border-left: 2px solid var(--text-2);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px; color: var(--text-2); line-height: 1.55;
}
.ai-tier-note p { margin: 0; }
.ai-tier-note-tag {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--text);
}


.dish-src-badge {
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  background: var(--glow-soft); color: var(--accent-deep);
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; border-radius: 4px; vertical-align: middle;
}
.dish-label-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; }
.dish-label-badge.pick { color: var(--accent); }
.dish-label-badge.alt { color: var(--text-3); }

.pre-research-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 26px;
}
.pre-rsrc-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pre-rsrc-eyebrow {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--text-3); white-space: nowrap;
}
.pre-rsrc-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.pre-rsrc-chip {
  padding: 3px 9px; border-radius: 20px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: 11px; font-weight: 500; color: var(--text-2);
}
.pre-rsrc-snippets { display: flex; flex-direction: column; gap: 10px; }
.pre-rsrc-src {
  display: inline-block; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 4px;
}
.pre-rsrc-text {
  display: block; font-family: var(--serif); font-size: 13.5px;
  color: var(--text-2); line-height: 1.55; font-style: italic;
}

.rsrc-bar { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.rsrc-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rsrc-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--text-3);
}
.rsrc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rsrc-chip {
  padding: 3px 10px; border-radius: 20px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: 11px; font-weight: 500; color: var(--text-2);
}

.ot-step-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ot-step-counter { font-size: 12px; color: var(--text-3); font-weight: 500; }

/* ── STEPPER ─────────────────────────────── */
.ot-stepper {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-2); border-radius: 14px;
  overflow: hidden; width: fit-content; margin: 22px 0 28px;
  background: var(--surface);
}
.ot-stepper-btn {
  width: 58px; background: none; border: none; cursor: pointer;
  font-size: 22px; font-weight: 300; color: var(--text);
  transition: background 0.16s ease, color 0.16s ease; padding: 0;
}
.ot-stepper-btn:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
.ot-stepper-btn:disabled { color: var(--line-2); cursor: not-allowed; }
.ot-stepper-display {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 16px 30px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  min-width: 104px;
}
.ot-stepper-val {
  font-family: var(--serif); font-size: 38px; font-weight: 500;
  line-height: 1; letter-spacing: -0.03em; color: var(--text);
}
.ot-stepper-unit {
  font-size: 10px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.14em; margin-top: 6px;
}

.ot-notes-row { margin-top: 22px; }
.ot-notes-input {
  width: 100%; padding: 13px 16px; font-size: 14.5px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--text);
  outline: none; font-family: var(--sans);
  transition: border-color 0.22s var(--ease-out);
}
.ot-notes-input:focus { border-color: var(--accent); }
.ot-notes-input::placeholder { color: var(--text-3); }

.chat-typing, .ot-thinking {
  display: flex; gap: 5px; align-items: center;
  padding: 16px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; width: fit-content;
}
.chat-typing span, .ot-thinking span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2), .ot-thinking span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3), .ot-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

.chat-input-bar {
  display: flex; gap: 9px; align-items: center;
  padding: 8px 8px 8px 18px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 12px;
  margin-bottom: 14px; transition: border-color 0.22s var(--ease-out);
}
.chat-input-bar:focus-within { border-color: var(--accent); }
.chat-input {
  flex: 1; border: none; outline: none; font-size: 14.5px;
  font-family: var(--sans); color: var(--text); background: transparent;
}
.chat-input::placeholder { color: var(--text-3); }
.chat-send {
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 9px;
  padding: 12px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--sans); transition: transform 0.16s var(--ease-spring);
}
.chat-send:active { transform: scale(0.94); }

.ot-restart-link {
  background: none; border: none; font-size: 12.5px; color: var(--text-3);
  cursor: pointer; font-family: var(--sans); text-decoration: underline;
  text-underline-offset: 3px; padding: 0; transition: color 0.16s;
}
.ot-restart-link:hover { color: var(--text); }

/* ── QUIZ ────────────────────────────────── */
.quiz-wrap {
  min-height: 90vh; display: flex; flex-direction: column;
  align-items: center; padding: 40px 22px;
}
.quiz-progress {
  width: 100%; height: 3px;
  background: var(--line); border-radius: 99px; margin-bottom: 40px; overflow: hidden;
}
.quiz-progress-bar {
  height: 100%; width: 100%; background: var(--accent); border-radius: 99px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.quiz-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 36px 26px; width: 100%;
  box-shadow: var(--shadow); animation: fadeUp 0.4s var(--ease-out);
}
.quiz-step-label {
  font-size: 11px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 16px;
}
.quiz-question {
  font-family: var(--serif); font-size: 24px; font-weight: 500;
  line-height: 1.25; margin-bottom: 28px; letter-spacing: -0.02em; color: var(--text);
}
.quiz-name-input {
  width: 100%; font-size: 20px; padding: 14px 0; font-family: var(--serif);
  border: none; border-bottom: 1.5px solid var(--line-2); outline: none;
  margin-bottom: 24px; background: transparent; color: var(--text);
  transition: border-color 0.22s var(--ease-out);
}
.quiz-name-input:focus { border-bottom-color: var(--accent); }
.quiz-name-input::placeholder { color: var(--text-3); }
.quiz-name-input.shake { animation: shake 0.4s ease; border-bottom-color: var(--accent); }

/* Inline mini-questions on the details step (residency, eater build) */
.quiz-mini-label {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  margin: 18px 0 10px;
}
.quiz-inline-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.quiz-inline-chips .quiz-chip {
  flex: 1 1 auto; min-width: 90px;
}
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.quiz-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.quiz-option {
  text-align: left; padding: 15px 18px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: var(--sans); color: var(--text);
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out),
              color 0.18s var(--ease-out), transform 0.14s var(--ease-spring);
  display: flex; align-items: center; justify-content: space-between;
}
.quiz-option::after {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  flex-shrink: 0; margin-left: 12px; border: 1.5px solid var(--line-2);
  transition: all 0.2s var(--ease-out);
}
.quiz-option:hover { border-color: var(--line-2); }
.quiz-option:active { transform: scale(0.98); }
.quiz-option.selected {
  border-color: var(--accent); background: var(--glow-soft); color: var(--text); font-weight: 600;
}
.quiz-option.selected::after { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3.5px var(--surface); }
.quiz-option.ranked { display: flex; align-items: center; }

.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
/* Clearly-inactive disabled state — a muted pill with a readable label, not a washed-out terracotta ghost. */
.quiz-next:disabled, .quiz-next.btn-primary:disabled {
  cursor: not-allowed; opacity: 1; transform: none !important;
  background: color-mix(in srgb, var(--lp-espresso) 9%, var(--lp-cream)) !important;
  color: var(--lp-fg3) !important; box-shadow: none !important;
}
.quiz-next:disabled::before { display: none; }
/* Flat terracotta — consistent with the home / onboarding CTAs (override the global gradient + glow + sheen). */
.quiz-next.btn-primary { background: var(--lp-terra); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--lp-terra) 70%, transparent); }
.quiz-next.btn-primary::before { display: none; }
.quiz-next.btn-primary:hover { background: var(--lp-terra-deep); filter: none; box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--lp-terra) 70%, transparent); }
.quiz-hint { font-size: 13px; color: var(--text-2); margin-top: -18px; margin-bottom: 20px; }

/* ── Phase 1: new onboarding question types ─────────────────────────────── */

/* multi_chip + text_chips share the chip grid */
.quiz-chip-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.quiz-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--text); cursor: pointer; line-height: 1.3;
  transition: border-color 0.16s var(--ease-out), background 0.16s var(--ease-out),
              color 0.16s var(--ease-out), transform 0.14s var(--ease-spring);
}
.quiz-chip:hover { border-color: var(--line-2); }
.quiz-chip:active { transform: scale(0.97); }
.quiz-chip.on {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.quiz-chip .chip-label { font-weight: 600; }
.quiz-chip .chip-hint {
  font-size: 11px; font-weight: 400; color: var(--text-3); margin-top: 2px;
}
.quiz-chip.on .chip-hint { color: rgba(255,255,255,0.85); }

.quiz-count-note {
  font-size: 12px; color: var(--text-3); margin: 8px 0 12px; text-align: right;
  transition: color 0.18s var(--ease-out);
}
.quiz-count-note.at-max { color: var(--accent-deep); font-weight: 600; }

/* Polite inline validation message (name step) */
.quiz-inline-err {
  font-size: 13px; font-weight: 500; color: var(--accent-deep);
  background: var(--glow-soft); border-radius: var(--r-sm);
  padding: 10px 14px; margin: 4px 0 16px; line-height: 1.4;
  animation: fadeUp 0.28s var(--ease-out);
}
.quiz-inline-err[hidden] { display: none; }

/* ── Form validation: turn EACH wrong field red + list every reason, so the
   diner sees exactly what to fix on the sign-up step (never has to guess). ── */
.quiz-name-input.field-invalid,
.auth-input.field-invalid,
.dob-row.field-invalid .sel-btn {
  border-color: #CC2A2A !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #CC2A2A 16%, transparent) !important;
}
.quiz-name-input.field-invalid:focus,
.auth-input.field-invalid:focus,
.dob-row.field-invalid .sel-btn:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, #CC2A2A 28%, transparent) !important;
}
.dob-row.shake { animation: shake 0.4s ease; }
.quiz-inline-err .qerr-item { display: block; position: relative; padding-left: 15px; }
.quiz-inline-err .qerr-item + .qerr-item { margin-top: 5px; }
.quiz-inline-err .qerr-item::before { content: "\2022"; position: absolute; left: 2px; color: #CC2A2A; font-weight: 700; }

/* ── Onboarding: Taste DNA intro screen ───────────────────────────────────── */
.onb-intro { text-align: left; }
.onb-intro-list { list-style: none; margin: 18px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.onb-intro-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--text-2); line-height: 1.45; }
.onb-intro-txt { flex: 1; min-width: 0; }
.onb-intro-list strong { color: var(--text); font-weight: 600; }
.onb-intro-ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  color: var(--accent-deep); background: var(--glow-soft); border: 1px solid rgba(242, 80, 46, 0.18);
}
.onb-intro-cta { width: 100%; }
.onb-intro-browse { display: block; text-align: center; margin-top: 16px; }

/* ── Onboarding: "why this matters" line under each question ──────────────── */
.quiz-why { font-size: 12.5px; color: var(--text-2); line-height: 1.45; margin: -10px 0 20px; }
.quiz-why-k {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-deep); margin-right: 6px;
}

/* ── Onboarding: 13+ confirmation (replaces the exact-age input) ──────────── */
.quiz-confirm {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  min-height: 44px; margin: 18px 0 4px; padding: 6px 2px; user-select: none;
}
.quiz-confirm-input { position: absolute; opacity: 0; width: 0; height: 0; }
.quiz-confirm-box {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  display: grid; place-items: center; transition: background 0.16s, border-color 0.16s;
}
.quiz-confirm-box::after {
  content: "✓"; color: #fff; font-size: 14px; font-weight: 800;
  opacity: 0; transform: scale(0.6); transition: opacity 0.16s, transform 0.16s var(--ease-spring);
}
.quiz-confirm-input:checked + .quiz-confirm-box { background: var(--accent); border-color: var(--accent); }
.quiz-confirm-input:checked + .quiz-confirm-box::after { opacity: 1; transform: scale(1); }
.quiz-confirm-input:focus-visible + .quiz-confirm-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz-confirm-label { font-size: 14.5px; font-weight: 500; color: var(--text); }

/* ── Onboarding: Taste DNA reveal head + actions ──────────────────────────── */
.dna-reveal-head { text-align: center; padding: 8px 0 24px; }
.dna-reveal-spark { display: inline-block; color: var(--accent); font-size: 24px; margin-bottom: 10px;
  animation: spark-in 0.6s var(--ease-out) both; }
.dna-reveal-title {
  font-family: var(--serif); font-size: clamp(28px, 8vw, 38px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--text); margin: 6px 0 0;
}
.dna-reveal-sub { font-size: 14.5px; color: var(--text-2); line-height: 1.55; max-width: 38ch; margin: 12px auto 0; }
.dna-reveal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.dna-reveal-actions .btn { width: 100%; }

/* text_chips — custom typed entries + add input */
.quiz-custom-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.quiz-custom-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; border-radius: 99px;
  background: var(--accent); color: var(--on-accent);
  font-size: 12.5px; font-weight: 600;
}
.quiz-custom-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.22); color: var(--on-accent);
  cursor: pointer; font-size: 12px; line-height: 1;
}
.quiz-custom-x:hover { background: rgba(255,255,255,0.35); }

.quiz-text-row {
  display: flex; gap: 8px; margin: 14px 0 2px;
}
.quiz-text-input {
  flex: 1; padding: 11px 14px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-family: var(--sans); font-size: 14px; color: var(--text);
  transition: border-color 0.16s var(--ease-out);
}
.quiz-text-input:focus { outline: none; border-color: var(--accent); }
.quiz-text-add {
  padding: 11px 16px; border-radius: 10px;
  border: 1.5px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.16s var(--ease-out);
}
.quiz-text-add:hover { background: var(--accent-2); border-color: var(--accent-2); }

.quiz-skip-link {
  display: block; margin: 20px auto 6px;
  background: none; border: none; color: var(--text-3);
  font-size: 13px; font-family: var(--sans); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.quiz-skip-link:hover { color: var(--text); }

/* single_card — descriptive cards stacked vertically */
.quiz-card-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.quiz-card-opt {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: 16px 18px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-family: var(--sans); cursor: pointer;
  transition: border-color 0.16s var(--ease-out), background 0.16s var(--ease-out),
              transform 0.14s var(--ease-spring);
}
.quiz-card-opt:hover { border-color: var(--line-2); }
.quiz-card-opt:active { transform: scale(0.99); }
.quiz-card-opt.selected {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.quiz-card-label {
  font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px;
}
.quiz-card-desc { font-size: 13px; color: var(--text-2); line-height: 1.4; }

.rank-badge {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  color: var(--on-accent); font-size: 11px; font-weight: 700; font-family: var(--sans);
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 12px; flex-shrink: 0;
}
.rank-badge.empty { background: var(--line-2); color: var(--text-3); }

/* ── DNA ─────────────────────────────────── */
.dna-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px 24px; box-shadow: var(--shadow);
  animation: fadeUp 0.5s var(--ease-out);
}
.dna-header {
  display: flex; align-items: center; gap: 18px; margin-bottom: 32px;
  padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.dna-avatar {
  width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 8px 20px -6px var(--glow);
}
.dna-greeting {
  font-size: 11px; color: var(--text-3); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
}
.dna-name {
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--text);
}
.dna-persona { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 4px; }
.dna-grid { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px; }
.dna-stat { display: flex; flex-direction: column; gap: 8px; }
.dna-stat-label {
  font-size: 10.5px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.dna-bar-track { height: 8px; background: var(--bg-2); border-radius: var(--r-pill); overflow: hidden; box-shadow: inset 0 1px 2px rgba(54,36,18,0.06); }
.dna-bar-fill {
  height: 100%; width: 100%; background: linear-gradient(90deg, #FF6B3D 0%, #F2502E 50%, #FFE9A3 100%);
  border-radius: var(--r-pill); transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 12px -2px var(--glow);
  transition: transform 0.9s var(--ease-out);
}
.dna-stat-value { font-size: 14px; font-weight: 600; color: var(--text); }
.dna-tags { display: flex; flex-direction: column; margin-bottom: 28px; }
.dna-tag-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.dna-tag-label {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.dna-tag-value { font-size: 14.5px; font-weight: 500; text-align: right; color: var(--text); }
.dna-id { font-size: 12px; color: var(--text-3); padding-top: 20px; border-top: 1px solid var(--line); }

.dna-spinner {
  width: 42px; height: 42px; border: 3px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state { padding: 80px 0; text-align: center; color: var(--text-2); font-size: 15px; }

/* ── Route skeletons — instant shells so navigation never feels frozen ─────── */
@keyframes skelShimmer { 0% { background-position: -240px 0; } 100% { background-position: calc(240px + 100%) 0; } }
.rest-skel-media, .r-skel-hero, .r-skel-line, .r-skel-block {
  background-color: var(--bg-2);
  background-image: linear-gradient(90deg, transparent 0, var(--surface-2) 60px, transparent 120px);
  background-size: 240px 100%; background-repeat: no-repeat;
  animation: skelShimmer 1.25s ease-in-out infinite;
}
/* Restaurants list skeleton card (sits in .restaurant-grid → vertical column) */
.rest-skel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.rest-skel-media { aspect-ratio: 16 / 9; }
.rest-skel-line { height: 13px; margin: 14px 16px 0; border-radius: 6px; }
.rest-skel-line.short { width: 50%; margin-bottom: 16px; }
/* Restaurant detail skeleton */
.r-skel-hero { height: 230px; width: 100%; }
.r-skel .page { padding-top: 22px; }
.r-skel-line.wide { height: 26px; width: 68%; }
.r-skel-block { height: 130px; margin-top: 20px; border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) {
  .rest-skel-media, .r-skel-hero, .r-skel-line, .r-skel-block { animation: none; }
}

/* ── PASSPORT ────────────────────────────── */
.passport { animation: fadeUp 0.5s var(--ease-out); }
.page:has(> .passport), body.fal-on .page:has(> .passport) { padding-top: 14px; }   /* passport sits higher — wins over the reskin's .page padding */
.pp-hero {
  padding: 10px 0 18px; margin-bottom: 0;
  border-bottom: 1px solid var(--line-soft);
}
.pp-hero .eyebrow {
  display: inline-block; margin-bottom: 8px;
  font-size: 17px; font-weight: 450; letter-spacing: 0;
  color: var(--accent-deep); background: none; padding: 0; border-bottom: none;
}
/* premium, de-capped masthead label (founder: fix the font, make it look better) */
body.fal-on .pp-hero .eyebrow {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 450;
  font-size: 18px; letter-spacing: -0.01em; text-transform: none; color: var(--accent-deep);
  border-bottom: none; padding: 0;
}
/* Identity row — avatar + name (mirrors the Passport mockup's .ph-id block). */
.pp-id-row { display: flex; align-items: center; gap: 16px; }
/* width/height MUST stay in lockstep with _PP_AV in pages/passport.js — the buddy
   renders at an explicit px size into this overflow-hidden disc. */
/* It's a <button>: tapping the face opens the identity sheet (photo or Taste Buddy).
   Hence the border/padding/appearance reset — everything else is the original disc. */
.pp-avatar {
  flex: none; width: 64px; height: 64px; border-radius: var(--r-pill);
  background: var(--lp-terra); color: var(--lp-cream); display: grid; place-items: center;
  font-family: var(--lp-serif); font-size: 30px; line-height: 1;
  box-shadow: 0 4px 14px rgba(42,32,24,0.16);
  position: relative; border: 0; padding: 0; appearance: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease;
}
.pp-avatar:active { transform: scale(.94); }
/* The cue. Without it the avatar reads as decoration and nobody finds the sheet —
   it sits OUTSIDE the clipped disc (overflow:hidden on .pp-avatar-buddy would eat it),
   which is why it's positioned on the button, not on the inner face. */
.pp-avatar-edit {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px;
  border-radius: var(--r-pill); background: var(--lp-terra); color: #fff;
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  border: 2px solid var(--lp-cream, #FAF5EC);
  box-shadow: 0 2px 6px rgba(42,32,24,0.22);
  pointer-events: none;
}
/* Taste Buddy fills the disc (identity everywhere) — drop the terracotta monogram bg. */
/* overflow stays VISIBLE on the button so the edit cue can hang off the rim; the clip
   moves onto the face itself, which keeps the oversized-render defence below intact. */
.pp-avatar-buddy { background: transparent; overflow: visible; padding: 0; }
.pp-avatar-buddy > span:not(.pp-avatar-edit) { border-radius: var(--r-pill); overflow: hidden; }
.pp-avatar-buddy svg { width: 100%; height: 100%; display: block; }
/* The overflow above is the LAST line of defence, not the fix: a buddy asked for at
   more px than this disc still gets cropped, it just gets cropped invisibly. The disc
   size and _PP_AV must agree. (A max-width:100% guard on the wrapper does NOT work —
   this is display:grid, so the % resolves against an auto track the oversized image
   inflated; measured, and reverted.) */

/* ── Passport tabs ──────────────────────────────────────────────────────── */
.pp-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line);
  margin: 0 -20px 18px; padding: 0 20px;
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  /* Fill the width when labels fit; scroll horizontally if they don't (no wrap). */
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pp-tabs::-webkit-scrollbar { display: none; }
.pp-tab {
  flex: 1 0 auto; padding: 14px 12px; white-space: nowrap;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--text-3); border: none; background: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: color 0.18s, border-color 0.18s;
}
.pp-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 700; }
.pp-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700;
  margin-left: 5px; vertical-align: middle;
}
.pp-tab-panel { animation: fadeUp 0.3s var(--ease-out); }
.pp-empty-tab { padding: 48px 0 24px; text-align: center; }
.pp-empty-tab-title {
  font-family: var(--serif); font-size: 22px; color: var(--text); margin-bottom: 8px;
}
.pp-empty-tab-sub { font-size: 14px; color: var(--text-2); line-height: 1.6; max-width: 260px; margin: 0 auto; }

/* Level card tap affordance */
.pp-level { cursor: pointer; }
.pp-level-inner { flex: 1; }
.pp-level-quest-hint {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 2px; padding-left: 16px; flex-shrink: 0;
}
.pp-level-quest-hint span:first-child {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--t-text-soft, rgba(255,255,255,0.65));
}
.pp-level-quest-arrow {
  font-size: 20px; color: var(--t-text, #fff); line-height: 1;
}
.pp-level { display: flex; align-items: center; }

/* ── Quest bottom sheet ─────────────────────────────────────────────────── */
.quest-sheet {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: flex-end;
}
.qs-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.qs-panel {
  position: relative; width: 100%; max-height: 88vh;
  background: var(--bg); border-radius: 24px 24px 0 0;
  overflow: hidden; display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.qs-panel.open { transform: translateY(0); }
.qs-header {
  padding: 14px 24px 22px; flex-shrink: 0;
}
.qs-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.35); margin: 0 auto 18px;
}
.qs-header-row {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px;
}
.qs-tier-name {
  font-family: var(--serif); font-size: 34px; font-weight: 500;
  letter-spacing: -0.03em; color: #fff; line-height: 1;
}
.qs-tier-sub { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 5px; }
.qs-close {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.18); color: #fff; font-size: 13px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 4px;
  transition: background 0.18s;
}
.qs-close:hover { background: rgba(255,255,255,0.28); }
.qs-level-wrap { margin-top: 4px; }
.qs-level-track {
  height: 6px; background: rgba(255,255,255,0.22); border-radius: 99px; overflow: hidden; margin-bottom: 8px;
}
.qs-level-fill {
  height: 100%; width: 100%; background: rgba(255,255,255,0.9); border-radius: 99px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.qs-level-foot { font-size: 12px; color: rgba(255,255,255,0.7); }
.qs-level-foot strong { color: #fff; font-weight: 700; }

.qs-body { overflow-y: auto; padding: 20px 20px 32px; display: flex; flex-direction: column; gap: 12px; }

.qs-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 18px; transition: border-color 0.18s;
}
.qs-item.qs-earned { opacity: 0.75; }
.qs-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.qs-item-info { flex: 1; }
.qs-item-cat {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent); margin-bottom: 4px; display: block;
}
.qs-item-name { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--text); line-height: 1.2; }
.qs-item-tag { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.qs-item-pts {
  font-size: 13px; font-weight: 700; color: var(--accent);
  background: rgba(242,80,46,0.1); border-radius: 99px;
  padding: 4px 10px; white-space: nowrap; flex-shrink: 0;
}
.qs-item-earned {
  font-size: 12px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.qs-prog-row { display: flex; align-items: center; gap: 10px; }
.qs-prog-track {
  flex: 1; height: 6px; background: var(--line); border-radius: 99px; overflow: hidden;
}
.qs-prog-bar {
  height: 100%; width: 100%; background: var(--accent); border-radius: 99px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.qs-prog-label { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.qs-prog-of { font-weight: 400; color: var(--text-3); }
.qs-empty { font-size: 14px; color: var(--text-2); text-align: center; padding: 24px 0; }
.pp-name {
  font-family: var(--serif); font-size: clamp(32px, 9vw, 44px);
  font-weight: 500; letter-spacing: -0.03em; line-height: 0.98; color: var(--text);
}
.pp-meta {
  font-size: 13.5px; color: var(--text-2); margin-top: 8px; line-height: 1.6;
}
/* PP-5 — a visiting diner is badged so the experience can lean into iconic spots. */
.pp-visitor-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent); background: rgba(194,80,47,0.10);
  border: 1px solid rgba(194,80,47,0.22);
  border-radius: 999px; padding: 4px 10px; margin-left: 2px; white-space: nowrap;
}
/* PP-4 — a brand-new diner (no visits yet) gets an orienting welcome, not a blank wall. */
.pp-welcome {
  font-size: 13.5px; color: var(--text-2); margin-top: 6px;
  line-height: 1.55; font-style: italic;
}
/* Self entry point to the Instagram-style public profile (/u/{handle}).
   Full-width filled pill under the identity row — the standard profile-header
   primary (cf. Orb Social / Hypelist). Solid terracotta, not the .d2-share
   gradient: Share my taste passport stays the page's top-level CTA, this reads
   one notch below it. */
/* (2026-08-09) Was a FULL-WIDTH solid terracotta pill with a 20px drop shadow, an
   inset highlight and the arrow in its own translucent chip — the loudest thing on
   the Passport, for a secondary "go look at my profile" link. Founder: "too heavy
   on the eye for a very simple button… cleaner and simpler and easier to read."
   Now it weighs what it's worth: auto-width (it stops pretending to be the page's
   primary action), no fill, no shadow, a hairline in the accent's own tint, and the
   arrow as a bare glyph. Still unmistakably a control — just a quiet one. */
.pp-profile-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 8px 15px;
  font-family: var(--sans, inherit); font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.005em; text-align: left;
  color: var(--accent); background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 999px; box-shadow: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, border-color .16s ease;
}
.pp-profile-link:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}
.pp-profile-link:active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* the arrow: a plain glyph that leans on hover — no chip, no second surface */
.pp-profile-link .ppl-go {
  flex: none; font-size: 14px; line-height: 1; opacity: 0.75;
  transition: transform .16s ease;
}
.pp-profile-link:hover .ppl-go { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .pp-profile-link, .pp-profile-link .ppl-go { transition: none; }
}

.pp-level {
  background: var(--t-bg, var(--accent));
  border-radius: 18px; padding: 24px 22px; margin-bottom: 12px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.22);
}
.pp-level-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.pp-level-name {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--t-text, var(--on-accent));
}
.pp-level-rank {
  font-size: 10.5px; font-weight: 600; color: var(--t-text-soft, rgba(255,255,255,0.75));
  text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
.pp-level-bar { height: 8px; background: rgba(255,255,255,0.20); border-radius: 99px; overflow: hidden; }
.pp-level-foot {
  font-size: 12.5px; color: var(--t-text, var(--on-accent)); line-height: 1.55;
  margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--t-text-soft, rgba(255,255,255,0.24));
}
.pp-level-foot strong { font-weight: 700; }
.pp-level-fill {
  height: 100%; width: 100%; background: var(--t-text, var(--on-accent)); border-radius: 99px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease-out);
}

/* ── Palate Cred card — the new primary progression display ────────────── */
.pp-cred {
  cursor: pointer; display: flex; align-items: center;
  background: linear-gradient(135deg, #1a1610 0%, #2a2218 100%);
  border-radius: 18px; padding: 22px 22px; margin-bottom: 12px;
  box-shadow: 0 16px 38px -12px rgba(0,0,0,0.42);
  position: relative; overflow: hidden;
}
.pp-cred::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 90% 0%, rgba(242,80,46,0.16) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(255,200,140,0.08) 0%, transparent 50%);
}
.pp-cred-inner { flex: 1; position: relative; z-index: 1; }
.pp-cred-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.pp-cred-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: rgba(255,255,255,0.62); margin: 0;
}
.pp-cred-score {
  font-family: var(--serif); font-size: 38px; font-weight: 500;
  line-height: 1; letter-spacing: -0.03em; margin: 0;
  background: linear-gradient(135deg, #FFB48F 0%, #F2502E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pp-cred-tier {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 4px;
}
.pp-cred-name {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em; color: #fff;
}
.pp-cred-rank {
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.55);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.pp-cred-tagline {
  font-size: 13px; color: rgba(255,255,255,0.74);
  line-height: 1.5; margin: 0 0 16px; font-style: italic;
}
.pp-cred-bar {
  height: 6px; background: rgba(255,255,255,0.10);
  border-radius: 99px; overflow: hidden;
}
.pp-cred-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #FFB48F 0%, #F2502E 100%);
  border-radius: 99px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}
.pp-cred-foot {
  font-size: 12.5px; color: rgba(255,255,255,0.74); line-height: 1.55;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.pp-cred-foot strong { font-weight: 700; color: #fff; }
.pp-cred .pp-level-quest-hint span:first-child,
.pp-cred .pp-level-quest-arrow {
  color: rgba(255,255,255,0.65);
}

/* ── Taste Profile card — the "this is what you like" card ──────────────── */
.taste-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 22px 22px 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.taste-card-head { margin-bottom: 20px; }
.taste-headline {
  font-family: var(--serif); font-size: clamp(21px, 5.6vw, 25px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.18; color: var(--text); margin: 7px 0 5px;
}
.taste-sub { font-size: 12px; color: var(--text-3); margin: 0; }
.taste-dims { display: flex; flex-direction: column; gap: 17px; }
.taste-dim-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.taste-dim-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.taste-dim-score { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--accent-deep); letter-spacing: -0.01em; }
.taste-dim-of { font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: var(--text-4); margin-left: 1px; }
.taste-track {
  position: relative; height: 8px; border-radius: var(--r-pill);
  background: var(--line); box-shadow: inset 0 1px 2px rgba(54,36,18,0.06);
}
.taste-track-fill {
  height: 100%; width: var(--w); border-radius: var(--r-pill);
  background: var(--accent-grad); transform-origin: left center;
  animation: tasteGrow 0.65s var(--ease-out) both;
}
.taste-dot {
  position: absolute; top: 50%; left: var(--w);
  width: 15px; height: 15px; border-radius: 50%;
  /* Task 7 — same treatment as the climb circles: thin (1px), light, never #000. */
  background: var(--surface); border: 1px solid rgba(42,32,24,0.25);
  transform: translate(-50%, -50%); box-shadow: var(--shadow-sm);
  animation: tasteDot 0.65s var(--ease-spring) both;
}
.taste-ends {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 11px; color: var(--text-3);
}
.taste-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 7px;
}
.taste-foot-line { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0; }
.taste-foot-k {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-deep); display: inline-block;
}
.taste-foot-pass .taste-foot-k { color: var(--text-3); }
@keyframes tasteGrow { from { transform: scaleX(0); } }
@keyframes tasteDot { from { opacity: 0; transform: translate(-50%, -50%) scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .taste-track-fill, .taste-dot { animation: none; }
}

.pp-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: 14px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-sm);
}
.pp-stat {
  padding: 26px 18px; text-align: center; border-right: 1px solid var(--line-soft);
  position: relative; transition: background 0.22s var(--ease-out);
}
.pp-stat:nth-child(2) { border-right: none; }
.pp-stat:nth-child(1), .pp-stat:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
.pp-stat:hover { background: rgba(255,255,255,0.6); }
.pp-stat-num {
  display: block; font-family: var(--serif); font-size: 40px;
  font-weight: 500; letter-spacing: -0.034em; line-height: 1;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pp-stat-of { font-size: 20px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); }
.pp-stat-label {
  display: block; font-size: 10px; font-weight: 700; margin-top: 11px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3);
}

/* Next-best-action card (Taste DNA tab) */
.pp-next {
  display: flex; align-items: flex-start; gap: 14px; justify-content: space-between;
  /* Equal margin top & bottom so the card sits centred between the card above and
     the one below (the parent is block, so these collapse to a symmetric gap).
     16px matches the loyalty card's margin-bottom above, so both gaps land on 16px
     — was margin-top:18px / margin-bottom:0, which flushed it onto the card below. */
  margin: 16px 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-xs);
}
.pp-next-body { min-width: 0; flex: 1; }
.pp-next-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent-deep); margin: 0 0 5px;
}
.pp-next-title {
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  color: var(--text); margin: 0 0 4px; line-height: 1.2;
}
.pp-next-why { font-size: 12.5px; color: var(--text-2); line-height: 1.45; margin: 0; }
.pp-next-cta { flex: 0 0 auto; padding: 12px 18px; white-space: nowrap; align-self: center; }
/* Narrow phones: the side-by-side row crams the text into a thin column and
   leaves the button stranded — stack it (full-width CTA under the copy) so the
   text breathes and everything left-aligns cleanly. */
@media (max-width: 440px) {
  .pp-next { flex-direction: column; align-items: stretch; gap: 12px; }
  .pp-next-cta { width: 100%; align-self: stretch; }
}

/* Group-order invites (passport) + concierge group-save controls */
.gi-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.gi-card {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-xs);
}
.gi-info { min-width: 0; }
.gi-title { font-family: var(--serif); font-size: 15px; color: var(--text); margin: 0 0 2px; line-height: 1.25; }
.gi-sub { font-size: 12.5px; color: var(--text-2); margin: 0; }
.gi-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gi-act { padding: 9px 15px; }
.gi-decline {
  background: none; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer;
}
.gi-decline:hover { border-color: var(--accent); color: var(--accent); }
.gi-act:disabled { opacity: 0.5; cursor: default; }
.gi-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gi-done { font-size: 13px; color: var(--text-2); margin: 0; }
@media (max-width: 440px) {
  .gi-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .gi-actions { width: 100%; }
  .gi-act { flex: 1; }
}

/* "Palate's read" line surfaced inside the Taste DNA card */
.taste-read {
  font-size: 14px; line-height: 1.6; color: var(--text-2);
  margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--line-soft);
}

/* "Your Dubai map" — 3 exploration stats */
.pp-map-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-sm);
}
.pp-map-stat { padding: 22px 8px; text-align: center; border-right: 1px solid var(--line-soft); }
.pp-map-stat:last-child { border-right: none; }
.pp-map-num {
  display: block; font-family: var(--serif); font-size: 34px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pp-map-of { font-size: 17px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); }
.pp-map-label {
  display: block; font-size: 9.5px; font-weight: 700; margin-top: 9px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); line-height: 1.3;
}
.pp-map-foot { font-size: 12.5px; color: var(--text-2); margin: 12px 0 0; text-align: center; }

.pp-section { margin-top: 40px; }
.pp-section-label { display: block; margin-bottom: 16px; }

/* ── Tier colour system — one palate token per tier so every surface (rank
   cards, level bar, hero) lights up in the user's current tier colour. The
   palate tells a culinary story: amber → terracotta → burgundy → obsidian gold. */
.tier-taster      { --t-bg: #F2502E; --t-text: #fff;    --t-text-soft: rgba(255,255,255,0.72); --t-color: #F2502E; --t-ink: #F2502E; }
.tier-regular     { --t-bg: #BF5022; --t-text: #fff;    --t-text-soft: rgba(255,255,255,0.65); --t-color: #BF5022; --t-ink: #BF5022; }
.tier-connoisseur { --t-bg: #7C1E34; --t-text: #fff;    --t-text-soft: rgba(255,255,255,0.65); --t-color: #7C1E34; --t-ink: #7C1E34; }
.tier-tastemaker  { --t-bg: linear-gradient(135deg,#17130D,#262017); --t-text:#F3E6CB; --t-text-soft:rgba(243,230,203,0.60); --t-color:#E7C988; --t-ink:#A8801F; --t-gold:#E7C988; }

/* ── Palate Cred loyalty tiers — the "Mediterranean climb" ────────────────────
   Oat → Bronze → Olive → Garnet → Obsidian+Gold. The card starts light + humble and
   visibly grows richer + darker each tier (the climb IS the reward); the ladder dots
   echo each tier's signature colour. Kept offset from the reserved Ember taste hues. */
.tier-new_diner { --t-bg: linear-gradient(135deg,#EFE5D1,#E2D2B6); --t-text:#3E3020; --t-text-soft:rgba(62,48,32,0.78); --t-color:#9A6A34; --t-ink:#9A6A34; --t-gold:#9A6A34; }
.tier-verified  { --t-bg: linear-gradient(135deg,#9A6A39,#7E4F25); --t-text:#fff; --t-text-soft:rgba(255,255,255,0.74); --t-color:#7A4D22; --t-ink:#7A4D22; --t-gold:#EAD4A0; }
.tier-local     { --t-bg: linear-gradient(135deg,#6B6D3B,#54562E); --t-text:#fff; --t-text-soft:rgba(255,255,255,0.74); --t-color:#5E6132; --t-ink:#5E6132; --t-gold:#EAE3C0; }
.tier-insider   { --t-bg: linear-gradient(135deg,#8C2742,#6C1A2D); --t-text:#fff; --t-text-soft:rgba(255,255,255,0.74); --t-color:#7C1E34; --t-ink:#7C1E34; --t-gold:#EAC78E; }
/* tier-tastemaker reuses the obsidian-gold style defined above. */
.tier-new_diner .pp-loy-bar { background: rgba(62,48,32,0.14); }   /* dark progress track for the light entry card */

/* ── Loyalty hero card ─────────────────────────────────────────── */
.pp-loyalty {
  position: relative; overflow: hidden; border-radius: 22px;
  padding: 20px 20px 18px; margin-bottom: 16px;
  background: var(--t-bg, var(--accent)); color: var(--t-text, #fff);
  box-shadow: 0 16px 40px -16px rgba(54,36,18,0.5);
}
.pp-loy-glow { position:absolute; top:-40%; right:-15%; width:60%; height:160%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); pointer-events:none; }
.pp-loy-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; position:relative; }
.pp-loy-top > div:first-child { min-width:0; }   /* let the tier block shrink so the score never gets shoved off the card */
.pp-loy-eyebrow { font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--t-text-soft,rgba(255,255,255,0.75)); }
.pp-loy-tier { font-family:var(--serif); font-size:27px; font-weight:600; line-height:1.05; margin-top:4px; overflow-wrap:anywhere; }
.pp-loy-score { text-align:right; line-height:1; flex:0 0 auto; }
.pp-loy-score-num { font-size:clamp(24px,7vw,32px); font-weight:800; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.pp-loy-score-lbl { display:block; font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--t-text-soft,rgba(255,255,255,0.7)); margin-top:3px; }
.pp-loy-tagline { font-size:13.5px; color:var(--t-text-soft,rgba(255,255,255,0.85)); margin:11px 0 14px; position:relative; }
.pp-loy-bar { height:9px; border-radius:99px; background:rgba(255,255,255,0.22); overflow:hidden; position:relative; }
.pp-loy-fill { height:100%; border-radius:99px; background:var(--t-gold,#fff); box-shadow:0 0 12px rgba(255,255,255,0.4); transition:width 0.9s var(--ease-out,ease-out); }
.pp-loy-next { font-size:13px; margin-top:10px; position:relative; }
.pp-loy-next strong { font-weight:800; }

/* ── Climb ladder ──────────────────────────────────────────────── */
.loy-ladder { display:flex; flex-direction:column; }
/* Task 6 — two-part rung matching /design-reference/: LEFT = dot-rail + tier name +
   status pill + description underneath; RIGHT = points in a fixed, top-aligned column. */
.loy-rung { position:relative; display:grid; grid-template-columns:28px 1fr auto; gap:13px; padding:6px 0 18px; }
.loy-rung:last-child { padding-bottom:0; }
.loy-rung-rail { position:relative; display:flex; justify-content:center; }
/* Climb track — a soft line threading the dots into one connected path. */
.loy-rung-line { position:absolute; top:16px; bottom:-18px; width:2px; background:var(--line-2,rgba(42,32,24,0.14)); }
.loy-rung:last-child .loy-rung-line { display:none; }
.loy-achieved .loy-rung-line, .loy-current .loy-rung-line { background:var(--t-ink,var(--accent)); }
/* Status circles — thin (~1px), light, NEVER #000. Filled only at current/achieved. */
.loy-rung-dot { position:relative; width:16px; height:16px; border-radius:99px; margin-top:3px; z-index:1;
  background:color-mix(in srgb, var(--ink,#2a2018) 14%, #fff); border:1px solid rgba(42,32,24,0.25); }
.loy-future .loy-rung-dot, .loy-locked .loy-rung-dot { background:color-mix(in srgb, var(--ink,#2a2018) 7%, #fff); }
.loy-achieved .loy-rung-dot, .loy-current .loy-rung-dot { background:var(--t-ink,var(--accent)); border-color:transparent; }
.loy-current .loy-rung-dot { box-shadow:0 0 0 4px rgba(230,81,47,0.18); }
.loy-achieved .loy-rung-dot::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:9px; font-weight:800; }
.loy-rung-body { min-width:0; }
.loy-rung-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.loy-rung-name { font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.05; color:var(--text); min-width:0; overflow-wrap:anywhere; }
.loy-current .loy-rung-name { color:var(--t-ink,var(--accent)); }
.loy-future .loy-rung-name, .loy-locked .loy-rung-name { opacity:0.5; }
.loy-rung-min { font-size:12px; font-weight:600; color:var(--text-3); white-space:nowrap; padding-top:5px; text-align:right; }
.loy-tag { font-size:9.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:4px 9px; border-radius:99px; }
.loy-tag-here { background:var(--t-ink,var(--accent)); color:#fff; }
.loy-tag-next { background:rgba(230,81,47,0.12); color:var(--accent); }
.loy-tag-done { background:rgba(46,160,67,0.12); color:#1d6a2c; }
.loy-tag-locked { background:var(--line); color:var(--text-3); }
.loy-rung-tag { font-size:12.5px; color:var(--text-2); margin:4px 0 0; line-height:1.4; }
.loy-rung-perks { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
.loy-rung-perks li { font-size:12.5px; color:var(--text-2); padding-left:17px; position:relative; line-height:1.4; }
.loy-rung-perks li::before { content:"›"; position:absolute; left:3px; top:-1px; color:var(--t-ink,var(--accent)); font-weight:800; font-size:14px; }
.loy-future .loy-rung-perks, .loy-locked .loy-rung-perks { opacity:0.55; }
.loy-foot { font-size:11.5px; color:var(--text-3); margin-top:14px; text-align:center; }

/* ── Food photo profile (Instagram-style grid) ─────────────────────────────── */
.pp-foodprofile { position: relative; }
.fp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.fp-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.fp-count { font-size: 13px; color: var(--text-2); white-space: nowrap; margin-top: 3px; font-weight: 600; }
.foodgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.food-cell {
  aspect-ratio: 1 / 1; border: none; padding: 0; cursor: pointer; border-radius: 3px;
  background: #efe7db center / cover no-repeat; transition: opacity 0.15s, transform 0.15s var(--ease-out);
}
.food-cell:active { transform: scale(0.97); opacity: 0.85; }
.fp-empty { text-align: center; padding: 44px 20px 20px; }
.fp-empty-ic { display: inline-flex; color: var(--accent); margin-bottom: 14px; opacity: 0.85; }
.fp-empty-ic svg { width: 42px; height: 42px; }
.fp-empty-title { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--text); }
.fp-empty-sub { font-size: 13.5px; color: var(--text-2); max-width: 300px; margin: 8px auto 0; line-height: 1.55; }
.fp-fab {
  position: fixed; right: 18px; bottom: 96px; z-index: 120;
  width: 56px; height: 56px; border-radius: 99px; border: none; cursor: pointer;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px -8px var(--glow, rgba(230,81,47,0.6)); transition: transform 0.18s var(--ease-out);
}
.fp-fab:active { transform: scale(0.92); }
.fp-fab svg { width: 26px; height: 26px; }
.fp-lightbox {
  position: fixed; inset: 0; z-index: 500; background: rgba(20,14,8,0.92);
  /* No backdrop-filter: a full-viewport blur over the long, image-heavy passport
     forced the compositor to re-rasterize the whole page and stalled the GPU on
     open. The 92%-opaque wash hides the page just as well, at zero cost. */
  display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.fp-lightbox.show { opacity: 1; }
.fp-lb-inner { max-width: 520px; width: 100%; }
.fp-lb-inner img { width: 100%; border-radius: 16px; display: block; box-shadow: 0 24px 60px -16px rgba(0,0,0,0.6); }
/* Stage holds a spinner until the photo has decoded off the main thread (see
   openLightbox in passport.js), so a multi-megapixel photo never freezes the screen. */
.fp-lb-stage { width: 100%; min-height: 220px; display: grid; place-items: center; }
.fp-lb-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: fp-lb-rot 0.8s linear infinite; }
@keyframes fp-lb-rot { to { transform: rotate(360deg); } }
.fp-lb-err { color: #fff; opacity: 0.85; font-size: 14px; text-align: center; }
.fp-lb-cap { color: #fff; text-align: center; margin-top: 14px; font-size: 14px; opacity: 0.92; }
.lib-toast {
  /* Above the photo lightbox (.mf-lb, 5400) — every confirmation this toast
     carries ("Added to your album", "Tagged", "Add friends first") is triggered
     FROM inside the lightbox, and at 520 they were all invisible behind it. */
  position: fixed; left: 50%; bottom: 100px; transform: translate(-50%, 20px); z-index: 6400;
  background: #1c140a; color: #fff; padding: 13px 20px; border-radius: 15px;
  box-shadow: 0 18px 44px -10px rgba(0,0,0,0.45); opacity: 0;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  display: flex; flex-direction: column; gap: 3px; max-width: 82vw; text-align: center;
}
.lib-toast.show { opacity: 1; transform: translate(-50%, 0); }
.lib-toast-pts { font-weight: 800; font-size: 14px; color: #FFD8AA; }
.lib-toast-msg { font-size: 12.5px; opacity: 0.92; }
/* With an Undo the toast becomes a ROW — the action sits beside the message, not
   stacked under it, and the whole thing stays one glanceable line. */
.lib-toast.has-undo { flex-direction: row; align-items: center; gap: 16px; text-align: left; }
.lib-toast-undo {
  flex: none; border: 0; background: rgba(255,255,255,0.14); color: #FFD8AA;
  font: 700 13px/1 var(--sans, sans-serif); padding: 9px 14px; border-radius: 999px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lib-toast-undo:active { transform: scale(0.94); }

/* ── Food Passport — real-backend gallery, sheet, badges ─────────────────── */
.fp-card {
  position: relative; aspect-ratio: 1 / 1; border: none; padding: 0; cursor: pointer;
  border-radius: 4px; overflow: hidden; background: #efe7db;
  display: flex; flex-direction: column; transition: transform 0.15s var(--ease-out);
  /* Only render cards actually on screen — stops a multi-second decode/layout
     freeze when the Food tab reveals a grid of remote photos. */
  content-visibility: auto; contain-intrinsic-size: auto 110px;
}
.fp-card:active { transform: scale(0.97); }
.fp-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-card-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 6px;
  font-size: 11px; color: #fff; text-align: left; line-height: 1.25;
  background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-card-cap em { font-style: normal; color: #FFD8AA; letter-spacing: 0.04em; }
.fp-badge {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: 999px; background: rgba(20,14,8,0.78); color: #fff;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fp-badge-verified { background: #1f7a3a; }            /* green = dwell/receipt verified */
.fp-badge-rating   { background: var(--accent, #e6512f); }
.fp-badge-order    { background: #8a5a2b; }
.fp-badge-personal { background: rgba(20,14,8,0.78); }

/* Upload sheet — opens after a file is picked, lets the diner link to a real
   recent rating BEFORE we save, so trust derivation has real ground to stand on. */
/* CRITICAL: when the `hidden` attribute is set, the sheet MUST be gone. The base
   rule below sets display:flex, which silently DEFEATS the `hidden` attribute — so
   this full-screen position:fixed overlay stayed rendered on top of the Food tab at
   opacity:0, and its full-viewport backdrop-filter blur froze the browser's GPU
   compositor every time the tab opened (a real-browser freeze headless never showed).
   This makes `hidden` win again. */
.fp-sheet[hidden] { display: none !important; }
.fp-sheet {
  position: fixed; inset: 0; z-index: 480; background: rgba(20,14,8,0.62);
  /* No backdrop-filter: a full-viewport blur over the long passport stalls the GPU. */
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.22s var(--ease-out);
}
.fp-sheet.show { opacity: 1; }
.fp-sheet-inner {
  width: 100%; max-width: 520px; background: var(--surface, #fff);
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  padding: 18px 18px 28px; max-height: 88vh; overflow-y: auto; position: relative;
  transform: translateY(20px); transition: transform 0.22s var(--ease-out);
}
.fp-sheet.show .fp-sheet-inner { transform: translateY(0); }
.fp-sheet-close {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  border: none; background: transparent; font-size: 22px; line-height: 1;
  color: var(--text-3); cursor: pointer; border-radius: 50%;
}
.fp-sheet-close:hover { background: var(--wash-warm, rgba(0,0,0,0.05)); color: var(--text); }
.fp-sheet-preview {
  display: block; width: 100%; max-height: 200px; object-fit: cover; border-radius: 14px;
  margin: 6px 0 14px;
}
.fp-sheet-title {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--text); margin-bottom: 10px;
}
.fp-link-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.fp-link-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--line-2, var(--line)); background: var(--surface, #fff);
  cursor: pointer; text-align: left; transition: all 0.16s ease;
}
.fp-link-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.fp-chip-dish { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text); }
.fp-chip-rest { font-family: var(--sans); font-size: 12px; color: var(--text-3); }
.fp-link-empty { font-size: 13px; color: var(--text-3); padding: 8px 0; }
.fp-sheet-skip { width: 100%; }
.fp-sheet-status { font-size: 12.5px; color: var(--text-3); text-align: center; min-height: 1.2em; margin-top: 8px; }

/* Lightbox extras — close + delete buttons for owned photos */
.fp-lb-close, .fp-lb-del {
  position: absolute; top: 8px; background: rgba(255,255,255,0.12); color: #fff;
  border: none; border-radius: 99px; cursor: pointer; padding: 8px 14px; font-size: 13px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fp-lb-close { right: 8px; font-size: 22px; padding: 4px 12px; line-height: 1; }
.fp-lb-del   { right: 8px; top: auto; bottom: 8px; }
.fp-lb-close:hover, .fp-lb-del:hover { background: rgba(255,255,255,0.22); }
.fp-lb-cap .fp-badge { margin-left: 10px; vertical-align: middle; }
/* My Food lightbox — Share to community + Delete row (below the photo, in flow). */
.fp-lb-actions { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }
.fp-lb-actions .fp-lb-del { position: static; inset: auto; }
.fp-lb-share { cursor: pointer; border: none; border-radius: 999px; padding: 11px 18px; font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: var(--on-accent, #fff); background: var(--accent); }
.fp-lb-share.on { background: rgba(255,255,255,0.14); color: #fff; }
.fp-lb-share:disabled { opacity: 0.6; cursor: default; }
.fp-lb-sharehint { color: #fff; opacity: 0.72; font-size: 12px; line-height: 1.4; text-align: center; margin: 10px auto 0; max-width: 320px; }

/* Inline "Add a photo?" prompt shown after a rating succeeds */
.rate-photo-prompt {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--wash-warm, rgba(0,0,0,0.04));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rate-photo-prompt-text { font-size: 13.5px; color: var(--text-2); flex: 1 1 100%; }
.rate-photo-prompt button {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2, var(--line));
  background: var(--surface, #fff); color: var(--text); cursor: pointer;
}
.rate-photo-prompt button.primary { background: var(--accent); color: #fff; border-color: transparent; }
.rate-photo-prompt button:hover { border-color: var(--accent); }
.rate-photo-prompt-done { font-size: 13px; color: var(--accent-deep); font-weight: 600; }
.fp-empty-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.fp-empty-cta .btn { min-width: 130px; }
.verdict-photo-block { padding: 4px 0; }
.verdict-thanks { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--accent-deep); margin-bottom: 10px; }

/* The current tier card drives both the level hero and the rank ladder. */
.pp-level .pp-level-fill { background: var(--t-text, var(--on-accent)); }
.pp-level .pp-level-name { color: var(--t-text, var(--on-accent)); }

.rank-list {
  display: flex; flex-direction: column; gap: 10px;
}
.rank-row {
  position: relative;
  background: var(--t-bg, var(--surface));
  border: none;
  border-radius: 14px;
  padding: 16px 18px 14px 20px;
  transition: box-shadow 0.24s var(--ease-out), opacity 0.24s;
}
.rank-row.rank-current {
  box-shadow: 0 6px 24px -6px rgba(0,0,0,0.28);
}
.rank-row.rank-achieved { opacity: 0.80; }
.rank-row.rank-locked   { opacity: 0.45; }
.rank-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 4px;
}
.rank-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rank-name {
  font-family: var(--serif); font-size: 21px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--t-text, var(--ink));
}
.rank-threshold {
  font-size: 12px; font-weight: 600; color: var(--t-text-soft, var(--ink-soft));
  letter-spacing: 0.04em; white-space: nowrap;
}
.rank-pill {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 3px 9px; border-radius: 99px;
  border: 1px solid transparent;
}
.rank-pill-current {
  color: var(--t-bg, #fff); background: var(--t-text, var(--accent));
}
.rank-pill-next {
  color: var(--t-text, var(--ink)); border-color: var(--t-text-soft, var(--line));
}
.rank-pill-locked {
  color: var(--t-gold, var(--ink-faint));
  border-color: var(--t-gold, var(--line));
}
.rank-tagline {
  font-size: 13.5px; color: var(--t-text-soft, var(--ink-soft)); margin: 0 0 8px;
  font-style: italic; line-height: 1.4;
}
.rank-perks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.rank-perks li {
  position: relative; padding-left: 16px;
  font-size: 13.5px; color: var(--t-text, var(--ink)); line-height: 1.45;
}
.rank-perks li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 1.5px; background: var(--t-text-soft, var(--accent)); border-radius: 1px;
}

.quest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.quest-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.24s var(--ease-out);
  overflow: hidden;
}
.quest-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.quest-card.earned {
  background: linear-gradient(135deg, var(--glow-soft), var(--surface));
  border-color: var(--accent);
}
.quest-card.earned::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 100% 0%, var(--glow-soft) 0%, transparent 50%);
}
.quest-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2px;
}
.quest-cat {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent);
}
.quest-pts {
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.quest-name {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--ink); margin: 0;
}
.quest-tag {
  font-size: 13px; color: var(--ink-soft); margin: 0;
  line-height: 1.35;
}
.quest-prog {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.quest-prog-track {
  flex: 1; height: 6px; background: var(--bg-2);
  border-radius: 99px; overflow: hidden;
}
.quest-prog-fill {
  height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--ease-out);
}
.quest-prog-num {
  font-family: var(--serif); font-size: 14px; font-weight: 600;
  color: var(--ink); min-width: 38px; text-align: right;
}
.quest-prog-of { color: var(--ink-faint); font-weight: 500; }
.quest-earned {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; margin-top: 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent);
  padding: 4px 10px; background: var(--surface);
  border: 1px solid var(--accent); border-radius: 99px;
}
.quest-earned::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

/* Dwell banner — a thin status chip that slides down from the top while a
   geofenced session is active. Subtle, system-notification-like. */
/* Verified-visit banner — a calm, premium top card. Reflects honest server
   state (presence / in-progress / earned / expired), never a fake "bonus". */
.dwell-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%;
  transform: translate(-50%, calc(-100% - 24px));
  width: calc(100% - 28px); max-width: 440px;
  background: var(--ink); color: var(--paper);
  padding: 14px 16px;
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 1000;
  transition: transform 0.45s var(--ease-spring), opacity 0.3s var(--ease-out);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.45);
}
.dwell-banner.shown { transform: translate(-50%, 0); }
.dwell-body { display: flex; flex-direction: column; gap: 4px; }
.dwell-title {
  margin: 0; font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  color: var(--paper); display: flex; align-items: center; gap: 8px; line-height: 1.3;
}
.dwell-title strong { color: #fff; font-weight: 700; }
.dwell-sub {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.7);
}
.dwell-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: dwellPulse 1.6s ease-in-out infinite; flex-shrink: 0;
}
.dwell-check {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.dwell-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dwell-btn {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 99px; cursor: pointer; border: 1px solid transparent;
  transition: background 0.16s var(--ease-out), border-color 0.16s var(--ease-out), transform 0.12s var(--ease-out);
}
.dwell-btn:active { transform: scale(0.97); }
.dwell-btn-primary { background: var(--accent); color: #fff; }
.dwell-btn-primary:hover { background: var(--accent-deep, var(--accent)); }
.dwell-btn-ghost {
  background: transparent; color: rgba(255,255,255,0.82);
  border-color: rgba(255,255,255,0.24);
}
.dwell-btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.dwell-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.dwell-cands { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dwell-cand {
  text-align: left; font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  color: var(--paper); background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  padding: 11px 14px; cursor: pointer;
  transition: background 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
.dwell-cand:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.34); }
.dwell-cand:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
@keyframes dwellPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .dwell-banner { transition: opacity 0.3s linear; }
  .dwell-dot { animation: none; }
}

.verdict-blocked {
  font-size: 13.5px; color: var(--ink-soft); font-style: italic;
  padding: 14px 16px; background: var(--bg-2); border-radius: 12px;
  border: 1px dashed var(--line); margin: 0;
}

.dna-readout {
  position: relative;
  background: linear-gradient(135deg, var(--glow-soft), var(--surface));
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 16px;
  padding: 22px 24px 18px;
  margin-bottom: 24px;
  overflow: hidden;
  animation: readoutIn 0.6s var(--ease-out) both;
}
.dna-readout::before {
  content: '\201C';
  position: absolute; top: -26px; right: 14px;
  font-family: var(--serif); font-size: 130px; line-height: 1;
  color: var(--accent); opacity: 0.1; pointer-events: none;
}
.dna-readout-tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent); margin-bottom: 12px;
}
.dna-readout-para {
  position: relative; z-index: 1;
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  line-height: 1.5; letter-spacing: -0.01em; color: var(--ink);
}
.dna-readout-foot {
  margin-top: 13px; font-size: 12.5px; font-style: italic;
  color: var(--ink-soft);
}
@keyframes readoutIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.pp-dna { display: flex; flex-direction: column; gap: 16px; }
.pp-dna-stat { display: flex; flex-direction: column; gap: 8px; }
.pp-dna-row { display: flex; justify-content: space-between; align-items: center; }

.collection-grid { display: flex; flex-direction: column; gap: 10px; }
.collection-card {
  background: var(--surface); padding: 18px 18px; text-decoration: none;
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-sm);
  transition: box-shadow 0.24s var(--ease-out), transform 0.2s var(--ease-spring);
}
.collection-card:hover { box-shadow: var(--shadow); }
.collection-card:active { transform: scale(0.98); }
.collection-cuisine {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--accent); margin-bottom: 8px;
}
.collection-dish {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.18; color: var(--text); margin-bottom: 6px;
}
.collection-rest { font-size: 13px; color: var(--text-2); }
.collection-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px;
}
.collection-date {
  font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.collection-verdict {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 3px 9px; border-radius: 99px;
}
.collection-verdict.r2 { background: var(--accent); color: var(--on-accent); }
.collection-verdict.r1 { background: var(--surface-2); color: var(--text-2); }
.collection-verdict.r0 { background: transparent; color: var(--text-3); border: 1px solid var(--line-2); }
.collection-verdict.pending { background: var(--glow-soft); color: var(--accent-deep); }

.collection-empty {
  border: 1px dashed var(--line-2); border-radius: 16px;
  padding: 40px 26px; text-align: center;
}
.collection-empty > p:first-child {
  font-family: var(--serif); font-size: 21px; font-weight: 500;
  letter-spacing: -0.02em; margin-bottom: 10px; color: var(--text);
}
.collection-empty-sub { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* Travels — passport stamps */
.travel-continent { margin-bottom: 24px; }
.travel-continent:last-child { margin-bottom: 0; }
.travel-continent-name {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--text-3); margin-bottom: 12px;
}
.stamp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stamp {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 12px; border: 1.5px solid var(--text); border-radius: 8px;
  text-align: center; transition: transform 0.22s var(--ease-spring);
}
.stamp:nth-child(odd)  { transform: rotate(-2.5deg); }
.stamp:nth-child(even) { transform: rotate(2deg); }
.stamp:nth-child(3n)   { transform: rotate(1.5deg); }
.stamp:active { transform: rotate(0deg) scale(1.05); }
.stamp.earned {
  border-color: var(--accent); background: var(--glow-soft);
}
.stamp.locked { border-style: dashed; border-color: var(--line-2); opacity: 0.5; }
.stamp-country {
  font-family: var(--serif); font-size: 15.5px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.15; color: var(--text);
}
.stamp.earned .stamp-country { color: var(--accent-deep); }
.stamp-count {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--text-3);
}
.stamp.earned .stamp-count { color: var(--accent); }

/* Task 8 — Collection "Highlights" box: even insets inside the card, grid-aligned
   columns (label · value · count) so every row lines up, no edge overflow, and no
   trailing separator line. */
.highlight-rows { padding: 4px 16px; }
.highlight-row {
  display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.highlight-row:last-child { border-bottom: none; }
.highlight-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-3);
}
.highlight-value {
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.2; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.highlight-meta { font-size: 13px; color: var(--accent); font-weight: 600; justify-self: end; }

.log-list { border-top: 1px solid var(--line); }
.log-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; transition: padding-left 0.2s var(--ease-out);
}
.log-row:active { padding-left: 8px; }
.log-date {
  font-size: 10px; color: var(--text-3); width: 48px; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.log-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.log-rest { font-size: 14.5px; font-weight: 600; color: var(--text); }
.log-dish { font-size: 12.5px; color: var(--text-2); }
.log-cuisine {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-3); flex-shrink: 0;
}

/* Yet to explore */
.remaining-list { border-top: 1px solid var(--line); }
.remaining-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 2px; border-bottom: 1px solid var(--line);
  text-decoration: none; transition: padding-left 0.2s var(--ease-out);
}
.remaining-row:active { padding-left: 8px; }
.remaining-name {
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--text); line-height: 1.2;
}
.remaining-meta { font-size: 12px; color: var(--text-2); }
.remaining-go {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--accent); flex-shrink: 0; white-space: nowrap;
}
.remaining-done {
  font-family: var(--serif); font-size: 16px; font-style: italic;
  color: var(--text-2); padding: 8px 0;
}

.pp-share { margin-top: 40px; width: 100%; }

/* Discover — tonight's pick */
.discover-pick {
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 16px;
  padding: 24px 22px; box-shadow: var(--shadow);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-out);
}
.discover-pick:active { transform: scale(0.99); }
.discover-pick-name {
  font-family: var(--serif); font-size: 30px; font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.1; color: var(--text); margin-bottom: 6px;
}
.discover-pick-meta { font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.discover-reason {
  font-family: var(--serif); font-size: 15px; font-style: italic;
  color: var(--text-2); line-height: 1.5; margin-bottom: 18px;
}
.discover-cta { font-size: 13.5px; font-weight: 600; color: var(--accent); }
/* GAP-3-5 — reserve / find-on-Maps lives HERE (choosing where to eat), not the order flow. */
.discover-handoff { display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 12px auto 0; max-width: 360px; padding: 11px 16px; border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px); background: #fff; color: var(--text-1, #2a2018);
  font-size: 13.5px; font-weight: 600; text-decoration: none; }
.discover-handoff:hover { border-color: var(--accent); color: var(--accent); }

/* ── Tonight's-spot context taps + Why-tonight (the formula's inputs/output) ── */
.tonight-ask { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.tonight-q-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-3); margin: 0 0 11px;
}
.tonight-q-hint {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text-3); opacity: 0.7; margin-left: 6px;
}

/* ── Persona ordering ("help me order") ──────────────────────────────────── */
.po-ask { display: flex; flex-direction: column; }
.po-q-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-3); margin: 20px 0 11px;
}
.po-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.po-stepper { display: inline-flex; align-items: center; gap: 16px; }
.po-step-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--surface); font-size: 20px; color: var(--text); cursor: pointer;
}
.po-step-n { font-family: var(--serif); font-size: 22px; min-width: 24px; text-align: center; }
.po-go { margin-top: 26px; }
.po-loading { display: flex; flex-direction: column; align-items: center; padding: 60px 0; color: var(--text-2); }

.po-result-head { margin-bottom: 14px; }
.po-persona-chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--text-2); background: var(--cz-wash, #f3eee6);
  padding: 7px 14px; border-radius: var(--r-pill);
}
.po-persona-chip b { color: var(--text); }
.po-change {
  border: none; background: none; color: var(--accent); font-size: 12px;
  font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0;
}
.po-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-xs);
}
.po-card-lead { border-color: var(--accent); border-width: 1.5px; }
.po-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.po-dish { font-family: var(--serif); font-size: 19px; color: var(--text); }
.po-price { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.po-tags { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.po-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); background: rgba(0,0,0,0.04); padding: 3px 8px; border-radius: var(--r-pill);
}
.po-allergens { font-size: 11px; color: var(--text-3); }
.po-loved { color: #c0392b; background: rgba(192,57,43,0.10); }
.po-desc { margin-top: 7px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.po-why { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.po-coverage { font-size: 13px; color: #4a8a5a; font-weight: 600; margin: 12px 0; }
.po-primer {
  font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.55;
  color: var(--text-2); background: var(--cz-wash, #f3eee6);
  padding: 14px 16px; border-radius: var(--r-card); margin-bottom: 8px;
}
.po-advisory {
  font-size: 13px; line-height: 1.5; color: #9a6a2a; background: #fbf3e3;
  border: 1px solid #f0e0c0; border-radius: var(--r-card); padding: 12px 14px; margin: 14px 0;
}
.po-actions { margin-top: 22px; display: flex; flex-direction: column; }

/* ── Persona exploration game (passport) ─────────────────────────────────── */
/* ── Taste Journeys (Passport) — clear, compact, user-specific ───────────────
   Progress = the user's rated dishes in each lane; tiers are real statuses;
   "Recommended next" are real, unrated curated dishes. No fake unlock copy. */
.pp-explore-loading { font-size: 14px; color: var(--text-3); }
.pj-intro { font-size: 13px; color: var(--text-3); margin: -2px 0 14px; line-height: 1.5; }
.pj-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 15px 16px; margin-bottom: 10px; box-shadow: var(--shadow-xs);
}
.pj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pj-head-l { display: flex; flex-direction: column; min-width: 0; }
.pj-name { font-family: var(--serif); font-size: 17px; color: var(--text); }
.pj-blurb { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.pj-tier {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 10px;
  border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0;
}
/* Tier colours — real status. The tier label text is always shown too, so the
   state never relies on colour alone. */
.explore-tier-bronze { background: #f0e0cf; color: #8a5a2a; }
.explore-tier-silver { background: #e6e8ec; color: #5e6b78; }
.explore-tier-gold   { background: #f5e6b8; color: #8a6d12; }
.explore-tier-black  { background: #1c1c1c; color: #f3d27a; }
.pj-bar { height: 6px; background: rgba(0,0,0,0.06); border-radius: 4px; margin: 13px 0 7px; overflow: hidden; }
.pj-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.pj-progress { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.pj-milestone { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.pj-rec-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); margin: 13px 0 8px; }
.pj-rec-list { display: flex; flex-direction: column; gap: 6px; }
.pj-rec {
  display: block; font-size: 13.5px; color: var(--text); text-decoration: none;
  padding: 9px 12px; background: var(--cz-wash, #f3eee6); border-radius: var(--r-md);
  transition: transform 0.12s var(--ease-out);
}
.pj-rec:active { transform: scale(0.99); }
.pj-rec:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pj-rec-sub { color: var(--text-3); }
.pj-viewall {
  width: 100%; text-align: center; font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--accent-deep, var(--accent)); background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 10px; cursor: pointer; margin-top: 2px;
  transition: border-color 0.16s var(--ease-out);
}
.pj-viewall:hover { border-color: var(--text-3); }
.pj-viewall:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pj-more { margin-top: 10px; }
.pj-foot { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 10px; }
.pj-empty { text-align: center; padding: 8px 0 4px; }
.pj-empty-title { font-family: var(--serif); font-size: 17px; color: var(--text); }
.pj-empty-sub { font-size: 13px; color: var(--text-3); line-height: 1.55; max-width: 34ch; margin: 6px auto 14px; }
.pj-empty-cta { display: inline-block; }

/* ── Concierge header — kept: the signed-out sign-in teaser (.ot-gate) reuses it ── */
.aichat-head { display: flex; align-items: center; gap: 11px; padding: 4px 2px 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.ai-diamond { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(230,81,47,0.35)); }
.aichat-head .ai-diamond { width: 30px; height: 30px; }
.aichat-title { font-family: var(--serif); font-size: 17px; color: var(--text); margin: 0; line-height: 1.1; }
.aichat-sub { font-size: 12px; color: var(--text-3); margin: 1px 0 0; }
/* FIX 4 — add-to-order toast */
.cc-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 14px); z-index: 130;
  background: var(--ink, #1c140a); color: #fff; font-size: 13px; font-weight: 600;
  padding: 10px 17px; border-radius: 999px; box-shadow: 0 14px 36px rgba(0,0,0,0.3);
  opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s; max-width: 80vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-toast.show { opacity: 1; transform: translate(-50%, 0); }

.tonight-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tchip {
  padding: 11px 17px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--surface); font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--text-2); cursor: pointer; box-shadow: var(--shadow-xs);
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out),
              color 0.18s var(--ease-out), transform 0.16s var(--ease-spring);
}
.tchip:hover { border-color: var(--text-3); color: var(--text); transform: translateY(-1px); }
.tchip:active { transform: scale(0.96); }
.tchip.active {
  background: var(--accent-grad); border-color: transparent; color: var(--on-accent);
  font-weight: 700; box-shadow: 0 6px 16px -4px var(--glow);
}
.tonight-go { width: 100%; margin-top: 6px; }
.tonight-adjust { display: block; margin: 16px auto 4px; color: var(--text-3); }

.why-tonight { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 4px 0 16px; }
.why-tonight-k {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-deep); margin-right: 2px;
}
.why-chip {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  background: var(--glow-soft); border-radius: var(--r-pill); padding: 4px 11px;
}
.alt-card { display: block; text-decoration: none; }
.alt-why { font-size: 12px; color: var(--accent-deep); margin: 8px 0 0; font-weight: 500; }
/* Personalized one-sentence rationale (Groq find-a-lunch) — the prominent "why this place". */
.discover-why-line {
  font-family: var(--serif); font-size: 15px; font-style: italic;
  color: var(--text-1); line-height: 1.5; margin: 2px 0 14px;
}
.alt-why-line { font-style: italic; }

/* ── Discover — guided "where to eat" decision flow ─────────────────────────── */
.discover-hero { margin-bottom: 22px; }
.discover-h1 {
  font-family: var(--serif); font-size: 31px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.08; color: var(--text); margin: 8px 0 0;
}
.discover-sub { font-size: 14px; color: var(--text-2); margin-top: 9px; line-height: 1.5; max-width: 30ch; }

.df-block { margin-bottom: 26px; }
.df-label {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-3); margin: 0 0 13px;
}
.df-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(0,0,0,0.045); color: var(--text-3);
}
.df-tag-req { background: var(--glow-soft); color: var(--accent-deep); }

/* "For" — who's eating. Solo by default; "+ Add diners" hands off to the group
   funnel. A compact segmented control so the screen leads with the diner, not a
   relationship occasion. */
.df-for { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.df-for-k {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-3);
}
.df-for-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(0,0,0,0.045); border-radius: var(--r-pill);
}
.df-for-opt {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--text-2);
  padding: 7px 15px; border-radius: var(--r-pill);
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out),
              box-shadow 0.2s var(--ease-out);
}
.df-for-opt.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
.df-for-opt:not(.is-on):hover { color: var(--text); }
.df-for-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Meal-moment — the primary "which meal" choice, defaulted to the LIVE Dubai moment
   (never the device clock). A horizontal scroll-snapping chip row; the active chip is
   the terracotta fill used across the funnel. Switching it relabels the hero + re-pools. */
.df-when-block { margin-bottom: 22px; }
.df-when {
  /* Daypart selector is a small fixed set (brunch/lunch/dinner/late-night). Wrap instead of
     horizontal-scroll so a chip can never be clipped off the left edge on narrow widths — the
     scroll rail could auto-scroll the active chip to the edge and hide "Brunch". */
  display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; margin: 0 -2px;
  scrollbar-width: none;
}
.df-when::-webkit-scrollbar { display: none; }
.df-when-chip {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--surface);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer; box-shadow: var(--shadow-xs);
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out),
              color 0.18s var(--ease-out), transform 0.16s var(--ease-spring);
}
.df-when-chip:hover { border-color: var(--text-3); color: var(--text); transform: translateY(-1px); }
.df-when-chip:active { transform: scale(0.96); }
.df-when-chip.active {
  background: var(--accent-grad); border-color: transparent; color: var(--on-accent);
  font-weight: 700; box-shadow: 0 6px 16px -4px var(--glow);
}
.df-when-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.df-when-ic { display: inline-flex; width: 18px; height: 18px; }
.df-when-ic svg { width: 18px; height: 18px; display: block; }
.df-when-l { white-space: nowrap; }

/* Occasion — the one required choice, prominent + scannable */
.occ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.occ-opt {
  position: relative; min-height: 62px; padding: 13px 16px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 2px;
  border-radius: var(--r-md); border: 1.5px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow-xs);
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out),
              color 0.18s var(--ease-out), transform 0.16s var(--ease-spring), box-shadow 0.2s var(--ease-out);
}
.occ-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.occ-opt:hover { border-color: var(--text-3); color: var(--text); transform: translateY(-1px); }
.occ-opt:active { transform: scale(0.98); }
.occ-opt.is-on {
  background: var(--accent-grad); border-color: transparent; color: var(--on-accent);
  font-weight: 700; box-shadow: 0 8px 20px -6px var(--glow); padding-right: 30px;
}
.occ-opt.is-on::after {
  content: "✓"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 800; opacity: 0.95;
}
.occ-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Refinements — collapsed one-tap rows (no chip wall) */
.df-rows { display: flex; flex-direction: column; gap: 10px; }
.df-row {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden;
}
.df-row.is-open { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.df-row-head {
  width: 100%; min-height: 56px; padding: 15px 16px;
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--sans); color: var(--text);
}
.df-row-label { font-size: 14.5px; font-weight: 600; flex-shrink: 0; }
.df-row-val {
  margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--accent-deep);
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 58%;
}
.df-row-chev {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3);
  transition: transform 0.28s var(--ease-spring);
}
.df-row-chev svg { width: 100%; height: 100%; display: block; }
.df-row.is-open .df-row-chev { transform: rotate(90deg); color: var(--accent); }
.df-row-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-md); }
.df-row-body { display: none; padding: 2px 16px 18px; }
.df-row.is-open .df-row-body { display: block; }
.df-chips .tchip { min-height: 44px; display: inline-flex; align-items: center; }
.df-chips .tchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ISSUE 2 — meal-intent option cards: label + one-line meaning */
.occ-opt-l { font-size: 14.5px; font-weight: 700; color: inherit; line-height: 1.12; }
.occ-opt-sub { font-size: 11.5px; font-weight: 500; color: var(--text-3); line-height: 1.25; }
.occ-opt.is-on .occ-opt-sub { color: color-mix(in srgb, var(--on-accent) 82%, transparent); }
.occ-opt.is-on { padding-right: 30px; }

/* ISSUE 4 — visual filter tiles (emoji/icon + label) for craving / moment / must */
.df-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; }
.df-tiles .df-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 78px; padding: 11px 8px; text-align: center; line-height: 1.15; white-space: normal;
}
.df-tile-ic { line-height: 0; color: currentColor; }
.df-tile-ic svg { display: block; }
.df-tile-l { font-size: 12px; font-weight: 600; }

/* ISSUE 7 — venue photo on Discover result cards (cuisine-gradient fallback behind) */
.rc-photo { width: 100%; border-radius: var(--r-md); background-color: var(--surface-2, #efe7db); }
.rc-photo-pick { aspect-ratio: 16 / 9; margin-bottom: 16px; border-radius: 13px; }
.rc-photo-alt { aspect-ratio: 16 / 10; margin-bottom: 12px; }

/* ISSUE 6 — group occasion tiles (plain language + meaning) */
.grp-occ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.grp-occ-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 80px; padding: 13px 15px; text-align: left; cursor: pointer;
  border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-xs); font-family: var(--sans);
  transition: border-color 0.18s var(--ease-out), transform 0.16s var(--ease-spring), box-shadow 0.2s var(--ease-out);
}
.grp-occ-tile:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.grp-occ-tile:active { transform: scale(0.98); }
.grp-occ-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.grp-occ-ic { font-size: 22px; line-height: 1; }
.grp-occ-l { font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.1; }
.grp-occ-sub { font-size: 11.5px; font-weight: 500; color: var(--text-3); line-height: 1.25; }

/* ISSUE 7 — venue photo on group result cards */
.grp-photo { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-md); background-color: var(--surface-2, #efe7db); margin-bottom: 13px; }
.grp-photo-feature { aspect-ratio: 16 / 9; border-radius: 13px; margin-bottom: 15px; }

/* Fixed action bar — request recap + CTA, always in view. Appended to <body>
   and aligned to the #app column so it pins to the viewport (see discover.js). */
.df-foot {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 150;
  width: 100%; max-width: var(--app-w);
  padding: 13px 22px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: var(--bg); border-top: 1px solid var(--line-soft);
  box-shadow: 0 -14px 34px -16px rgba(54,36,18,0.22);
}
/* Clear the fixed bar — scales with the safe-area the bar's own padding adds,
   so the last refine row always scrolls fully above it (even on notched devices). */
body.df-asking #app { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 178px); }
.df-summary { margin-bottom: 11px; }
.df-summary-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.df-summary-k {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3);
}
.df-reset {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--accent);
}
.df-reset:hover { text-decoration: underline; }
.df-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.df-summary-v {
  font-size: 13.5px; line-height: 1.4; color: var(--text-2); font-weight: 500; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.df-go { width: 100%; }
.df-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Loading / empty / error states */
.df-loading { padding: 76px 0; text-align: center; color: var(--text-2); }
.df-loading-msg {
  margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--text-2);
  animation: dfPulse 1.9s var(--ease-out) infinite;
}
@keyframes dfPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.df-state { padding: 56px 0 40px; text-align: center; }
.df-state-title {
  font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--text); line-height: 1.18; margin: 0 0 10px;
}
.df-state-sub { font-size: 14.5px; color: var(--text-2); line-height: 1.55; max-width: 34ch; margin: 0 auto 26px; }
.df-state-actions { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto; }
.df-state-actions .btn { width: 100%; }
.df-state-actions .ot-restart-link { margin-top: 2px; color: var(--text-3); }

/* ════════════════════════════════════════════════════════════════════════════
   DECIDE FLOW — flagship cinematic redesign (Tim Cook demo). Two acts on one
   journey: (1) "tell Noodl the vibe" — tactile mood cards instead of a chip wall;
   (2) "Noodl nailed it" — a full-bleed cinematic reveal of the top pick + alternates.
   Brand: porcelain + terracotta, Fraunces with italic accents, no all-caps labels,
   no middot. All motion is CSS-only (no GSAP dependency) and fully gated by
   prefers-reduced-motion at the bottom of this block. Stays inside the 460px frame.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Entrance rise — hero, "For", fine-tune block stagger in on render ───────── */
.df-hero-rise { animation: dfRise 0.62s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes dfRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.discover-h1 em { font-style: italic; color: var(--accent); font-weight: 500; }

/* ── No all-caps, no wide tracking on Decide-flow labels (brand rule). These
   classes are discover-only (.df-*); the shared eyebrow / section labels are
   scoped so other screens keep their existing look. Sentence case, calm tracking. */
body.fal-on .df-label, body.fal-on .df-for-k, body.fal-on .df-summary-k,
.df-label, .df-for-k, .df-summary-k {
  text-transform: none; letter-spacing: 0.005em; font-weight: 700;
  font-size: 12px; color: var(--text-3);
}
body.fal-on .discover-hero .eyebrow-accent,
body.fal-on .df-reveal-alts .pp-section-label,
.discover-hero .eyebrow-accent,
.df-reveal-alts .pp-section-label {
  text-transform: none; letter-spacing: 0.01em; font-weight: 600;
}
.dp-hero-eyebrow { text-transform: none; letter-spacing: 0.02em; }

/* Softer "Fine-tune (optional)" label — these are refinements, the vibe is the hero */
.df-label-soft { color: var(--text-3); margin-top: 4px; }
.df-label-opt { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-4); }

/* ── Act 1 · the intent cards ─────────────────────────────────────────────────
   Photo-forward option ROWS (Mobbin refs: Afterpay "From Our Editors" / ElevenReader
   voices / Apple TV list rows / Airbnb category cards) — a real MOOD PHOTO held in a
   rounded "window" on the left, a DM-Serif label + muted subtitle on porcelain beside
   it, and a calm terracotta selected ring with a tick badge on the photo corner. NOT a
   full-bleed photo with text slabbed over it (the retired "claudey" version), NOT a flat
   icon row. Group occasions (no photo) use a warm tinted window + line icon, kept
   cohesive. Keeps the .occ-opt / data-v / is-on hooks so the tap handler is unchanged. */
.occ-grid-vibe { display: flex; flex-direction: column; gap: 11px; }
.vibe-card {
  /* override the flat .occ-opt look — a tactile photo row, not a chip */
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 16px; width: 100%;
  padding: 13px 18px 13px 13px; text-align: left; overflow: hidden;
  border-radius: var(--r-lg); border: 1.5px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow-sm);
  cursor: pointer; isolation: isolate;
  transition: transform 0.28s var(--ease-spring), box-shadow 0.3s var(--ease-out),
              border-color 0.22s var(--ease-out), background 0.22s var(--ease-out);
  animation: vibeIn 0.55s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms + 100ms);
}
@keyframes vibeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* the media "window" — a rounded, contained frame (photo OR tinted icon tile) */
.vibe-card-media {
  position: relative; flex: none; width: 88px; height: 72px; border-radius: 15px;
  overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #2A2018 7%, transparent);
}
.vibe-card-photo {
  position: absolute; inset: 0; background-size: cover; background-position: center 42%;
  transform: scale(1.001);
  transition: transform 0.5s var(--ease-out);
}
/* a soft scrim ONLY at the foot of the photo — for depth, not for text (text is beside it) */
.vibe-card-photo-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(40,26,14,0.22) 0%, rgba(40,26,14,0.04) 38%, transparent 62%);
}
/* group-occasion fallback — warm tinted window holding the quiet line icon */
.vibe-card-media-icon {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
}
.vibe-card-ic {
  display: grid; place-items: center; color: var(--accent);
  transition: transform 0.28s var(--ease-spring);
}
.vibe-card-ic svg { display: block; width: 26px; height: 26px; }
/* the corner tick badge — hidden (scaled to 0) until selected */
.vibe-card-badge {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 2px 6px rgba(40,26,14,0.28), 0 0 0 2px var(--surface);
  transform: scale(0); opacity: 0;
  transition: transform 0.34s var(--ease-spring), opacity 0.2s var(--ease-out);
}
.vibe-card-badge svg { width: 13px; height: 13px; }
.vibe-card-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.vibe-card-l {
  font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.06;
  letter-spacing: -0.01em; color: var(--text);
}
.vibe-card-sub {
  font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.3;
  color: var(--text-3);
}
.vibe-card:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.vibe-card:hover .vibe-card-photo { transform: scale(1.06); }
.vibe-card:hover .vibe-card-ic { transform: scale(1.06); }
.vibe-card:active { transform: scale(0.99); }
.vibe-card:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.vibe-card.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow: 0 12px 28px -16px var(--glow), 0 0 0 1.5px var(--accent);
}
.vibe-card.is-on .vibe-card-media {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
              0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.vibe-card.is-on .vibe-card-media-icon { background: var(--accent); }
.vibe-card.is-on .vibe-card-ic { color: var(--on-accent); }
.vibe-card.is-on .vibe-card-badge { transform: scale(1); opacity: 1; }
/* kill the inherited .occ-opt.is-on terracotta-fill + tick + padding hacks */
.vibe-card.is-on::after { content: none; }
.vibe-card.is-on { color: var(--text); }
.vibe-card.is-on .vibe-card-l { color: var(--text); }
.vibe-card.is-on .vibe-card-sub { color: var(--text-2); }

/* (The bespoke cinematic "thinking" loader was retired — the decide flow now uses
   the standard app-wide NoodlLoader logo loader. See NoodlLoader in cuisine.js +
   the `R6D — noodl loader` block. The plain .df-loading wrapper still centres it.) */

/* ── Act 2 · the cinematic reveal ────────────────────────────────────────────── */
.df-reveal { margin-bottom: 8px; }
.df-reveal-hero { animation: dpHeroIn 0.7s var(--ease-out) both; }
.df-reveal-card { animation: dpCardIn 0.62s var(--ease-out) 0.16s both; }
.df-reveal-alts { animation: dpCardIn 0.6s var(--ease-out) 0.30s both; }
@keyframes dpHeroIn { from { opacity: 0; transform: translateY(26px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes dpCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* The hero — full-bleed real venue photo, scrim, name + meta, a taste-match ring */
.dp-hero {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); aspect-ratio: 3 / 4; max-height: 460px;
  text-decoration: none; box-shadow: var(--shadow-lg);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.dp-hero:hover { transform: translateY(-2px); box-shadow: 0 32px 70px -18px rgba(54,36,18,0.3); }
.dp-hero:active { transform: scale(0.992); }
.dp-hero:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.dp-hero-bg {
  position: absolute; inset: 0; z-index: -3;
  background-size: cover; background-position: center 42%;
  transform: scale(1.04); transition: transform 0.8s var(--ease-out);
  animation: dpKenburns 12s var(--ease-out) forwards;
}
@keyframes dpKenburns { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.dp-hero:hover .dp-hero-bg { transform: scale(1.1); }
.dp-hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, rgba(20,10,4,0.34) 0%, rgba(20,10,4,0.04) 32%, rgba(20,10,4,0.18) 56%, rgba(20,10,4,0.84) 100%);
}
.dp-hero-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6;
  background: radial-gradient(120% 70% at 80% 8%, rgba(194,80,47,0.34) 0%, transparent 55%);
  mix-blend-mode: screen;
}
.dp-hero-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px;
}
.dp-hero-eyebrow {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  color: #FFF7EE; padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(35,21,13,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,247,238,0.16);
}
.dp-hero-rating {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: #FFF7EE;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: rgba(35,21,13,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,247,238,0.16);
}
/* "For your table of N" — elegant serif header on the group reveal (item 5).
   A refined serif pill, not the flat sans eyebrow the founder disliked. */
.dp-hero-eyebrow.dp-hero-table {
  font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: -0.01em;
  text-transform: none; padding: 7px 14px;
}
.dp-hero-rating svg { color: #F4B740; }
.dp-hero-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 22px;
}
.dp-hero-meta-row { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.dp-hero-cuisine {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(255,247,238,0.92); text-transform: lowercase;
}
/* a hairline divider between cuisine and price — a deliberate rule, not a middot */
.dp-hero-dot { width: 1px; height: 11px; border-radius: 1px; background: rgba(255,247,238,0.4); }
.dp-hero-price { font-family: var(--sans); font-size: 13px; font-weight: 700; color: #F4B740; letter-spacing: 0.04em; }
.dp-hero-name {
  font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.04;
  letter-spacing: -0.025em; color: #FFF7EE; text-shadow: 0 2px 18px rgba(20,10,4,0.5);
}
.dp-hero-area {
  font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.4;
  color: rgba(255,247,238,0.82); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* The match ring — same absolute % drawn as a conic sweep, top-right of the hero */
.dp-ring {
  position: absolute; top: 56px; right: 18px; z-index: 2;
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at center, rgba(35,21,13,0.72) 0 56%, transparent 57%),
    conic-gradient(var(--accent-2) calc(var(--sweep, 0) * 1%), rgba(255,247,238,0.22) 0);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px -6px rgba(20,10,4,0.5);
  animation: dpRingIn 0.7s var(--ease-spring) 0.34s both;
}
@keyframes dpRingIn { from { opacity: 0; transform: scale(0.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
.dp-ring-n { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1; color: #FFF7EE; }
.dp-ring-pct { font-size: 11px; font-weight: 500; }
.dp-ring-k { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,247,238,0.8); margin-top: 2px; }

/* The detail card below the hero — why it fits, the dish, the actions */
.dp-card { padding: 18px 2px 4px; }
.dp-card-chips:empty { display: none; }
.dp-card-headline {
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--accent-deep);
  margin: 0 0 8px; letter-spacing: 0.01em;
}
.dp-card-headline.lead-reason { font-family: var(--serif); font-size: 18px; font-weight: 500; font-style: normal; letter-spacing: -0.01em; color: var(--text); }
.dp-dish {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0; padding: 13px 15px;
  background: var(--glow-soft); border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: var(--r-md);
}
.dp-dish-ic { flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.dp-dish-txt { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--text); }

/* Alternates — lift the "Or one of these" cards so they read as elegant runners-up,
   not an afterthought. Larger photo, subtle hover, terracotta match emphasis. */
.df-reveal-alts .pp-section-label { margin-bottom: 12px; }
.df-reveal-alts .restaurant-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.df-reveal-alts .alt-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
  padding: 12px 12px 14px; overflow: hidden;
  transition: transform 0.24s var(--ease-spring), box-shadow 0.26s var(--ease-out), border-color 0.2s var(--ease-out);
}
.df-reveal-alts .alt-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.df-reveal-alts .alt-card:active { transform: scale(0.99); }
.df-reveal-alts .alt-card:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.df-reveal-alts .rc-photo-alt { aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: var(--r-md); }
.df-reveal-alts .card-cta { color: var(--accent); font-weight: 600; }

/* ── Reduced motion — calm everything: no rise, no Ken Burns, no breathing glow.
   Selections + the result still appear, just without the cinematic motion. ──── */
@media (prefers-reduced-motion: reduce) {
  .df-hero-rise, .vibe-card, .df-reveal-hero, .df-reveal-card, .df-reveal-alts,
  .dp-ring, .dp-hero-bg {
    animation: none !important;
  }
  .vibe-card, .df-hero-rise, .df-reveal-hero, .df-reveal-card, .df-reveal-alts { opacity: 1; transform: none; }
  .dp-ring { opacity: 1; transform: none; }
  .dp-hero-bg { transform: scale(1.04); }
  .dp-hero-bg, .vibe-card, .vibe-card-ic, .vibe-card-photo, .vibe-card-badge, .dp-hero { transition: none; }
  .vibe-card:hover, .dp-hero:hover { transform: none; }
  .vibe-card:hover .vibe-card-ic, .vibe-card:hover .vibe-card-photo { transform: none; }
  .vibe-card:hover .dp-hero-bg, .dp-hero:hover .dp-hero-bg { transform: scale(1.04); }
}

/* Verdict widget */
.verdict-intro { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: -6px 0 16px; }
.verdict-list { display: flex; flex-direction: column; gap: 10px; }
.verdict-card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; background: var(--surface); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 16px;
}
.verdict-info { display: flex; flex-direction: column; }
.verdict-dish {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.2; margin: 6px 0 3px; color: var(--text);
}
.verdict-rest { font-size: 13px; color: var(--text-2); }
.verdict-widget { width: 100%; }
.verdict-why { font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }
.verdict-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.verdict-btn {
  flex: 1; min-width: 90px;
  padding: 11px 14px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--bg); font-family: var(--sans); font-size: 12.5px;
  font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color 0.16s var(--ease-out), background 0.16s var(--ease-out),
              color 0.16s var(--ease-out), transform 0.14s var(--ease-spring);
}
.verdict-btn:hover:not(:disabled) { border-color: var(--text-3); }
.verdict-btn:active { transform: scale(0.96); }
.verdict-btn.chosen { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.verdict-btn:disabled { opacity: 0.5; cursor: default; }
.verdict-btn.chosen:disabled { opacity: 1; }
.verdict-reasons { display: flex; gap: 6px; flex-wrap: wrap; }
.verdict-chip {
  padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-2);
  background: var(--bg); font-family: var(--sans); font-size: 12px;
  font-weight: 500; color: var(--text); cursor: pointer;
  transition: border-color 0.16s var(--ease-out), background 0.16s var(--ease-out),
              color 0.16s var(--ease-out), transform 0.14s var(--ease-spring);
}
.verdict-chip:hover:not(:disabled) { border-color: var(--text-3); }
.verdict-chip:active { transform: scale(0.95); }
.verdict-chip.chosen { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.verdict-chip.verdict-skip { color: var(--text-3); }
.verdict-chip:disabled { opacity: 0.5; cursor: default; }
.verdict-chip.chosen:disabled { opacity: 1; }
/* "I didn't order this" — secondary, sits under the 1–5 scale */
.verdict-not-mine {
  display: block; margin: 11px auto 2px; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; color: var(--text-3);
  text-decoration: underline; text-underline-offset: 2px; padding: 4px 6px;
}
.verdict-not-mine:hover { color: var(--text-2); }
.verdict-not-mine:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.verdict-not-mine:disabled { opacity: 0.5; cursor: default; }
.verdict-skipped { font-size: 13px; color: var(--text-2); text-align: center; margin: 10px 0; }

.verdict-optional { font-weight: 400; color: var(--text-3); }
.verdict-text {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--bg); font-family: var(--sans); font-size: 13px;
  color: var(--text); resize: none; line-height: 1.5; margin-bottom: 8px;
  transition: border-color 0.16s var(--ease-out);
}
.verdict-text:focus { outline: none; border-color: var(--accent); }
.verdict-text-actions { display: flex; gap: 7px; }
.verdict-text-send { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.verdict-text-send:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }

/* ── Multi-dish verdict (vmulti) ─────────────────────────────────────────── */
.vmulti { display: flex; flex-direction: column; gap: 16px; }
.vmulti-step { display: flex; flex-direction: column; gap: 12px; animation: vmulti-fade-in 0.28s var(--ease-out); }
.vmulti-step[hidden] { display: none !important; }
@keyframes vmulti-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vmulti-q {
  font-family: var(--serif); font-size: 18px; line-height: 1.35;
  color: var(--text); margin: 0 0 4px; letter-spacing: -0.01em;
}
.vmulti-q strong { font-weight: 600; font-style: italic; color: var(--ink); }
.vmulti-sub { font-size: 13px; color: var(--text-3); margin: -6px 0 6px; line-height: 1.5; }
.vmulti-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.vmulti-btns .verdict-btn { flex: 1; min-width: 110px; }
.vmulti-picker {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0;
}
.vmulti-dish-chip {
  padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line-2);
  background: var(--bg); font-family: var(--sans); font-size: 12.5px;
  font-weight: 500; color: var(--text); cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s, transform 0.12s;
}
.vmulti-dish-chip:hover:not(:disabled) { border-color: var(--text-3); }
.vmulti-dish-chip:active { transform: scale(0.96); }
.vmulti-dish-chip.chosen {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.vmulti-sig { color: var(--accent); font-size: 10px; margin-left: 3px; }
.vmulti-dish-chip.chosen .vmulti-sig { color: var(--on-accent); }
.vmulti-other {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--bg); font-family: var(--sans); font-size: 13px;
  color: var(--text); margin-top: 4px;
  transition: border-color 0.14s;
}
.vmulti-other:focus { outline: none; border-color: var(--accent); }
.vmulti-actions { display: flex; gap: 8px; margin-top: 8px; }
/* Meal-level portion question (Fullness Units feedback loop) — optional single-select. */
.vmulti-portion { margin: 14px 0 4px; }
.vmulti-portion .verdict-chip.chosen { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.vmulti-more-add { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.vmulti-more-add:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.vmulti-bag {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.vmulti-bag:empty { display: none; padding: 0; border: none; }
.vmulti-bag-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-3);
  margin: 0 6px 0 0; width: 100%;
}
.vmulti-bag-item {
  font-size: 12.5px; color: var(--text);
  padding: 4px 10px; border-radius: 99px;
  background: rgba(0,0,0,0.04); border: 1px solid var(--line);
}
.vmulti-bag-item em { font-style: normal; font-weight: 600; color: var(--accent-deep); }
.vmulti-empty { font-size: 12.5px; color: var(--text-3); padding: 6px 0; margin: 0; }
.vmulti-loading { font-size: 12.5px; color: var(--text-3); padding: 6px 0; margin: 0; }
.vmulti-thanks .vmulti-q { color: var(--accent-deep); }

/* ── Receipt verification — top proof tier (WS6) ──────────────────────── */
/* Sits in the rating "thanks" step. Frames a receipt upload as the upgrade to
   a Verified visit — the highest-trust review tier. */
.receipt-verify {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.receipt-verify-pitch {
  font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin: 0;
}
.receipt-verify-pitch strong { color: var(--accent-deep); font-weight: 700; }
.receipt-verify-actions { display: flex; align-items: center; gap: 8px; }
.receipt-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 99px;
  background: var(--accent); border: 1px solid var(--accent);
  color: var(--on-accent); font-family: var(--sans); font-size: 12px;
  font-weight: 600; cursor: pointer;
  transition: background 0.16s var(--ease-out), transform 0.14s var(--ease-spring);
}
.receipt-upload-btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.receipt-upload-btn:active { transform: scale(0.96); }
.receipt-upload-btn span::before { content: "🧾 "; }
.receipt-verify-result {
  font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin: 0;
}
.receipt-verify-result.verified { color: var(--text); }
.receipt-verify-result strong { color: var(--accent-deep); font-weight: 700; }
.receipt-verified-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--on-accent); background: var(--accent-deep);
  padding: 2px 9px; border-radius: 99px; margin-right: 4px;
  letter-spacing: 0.01em;
}

.wb-rate {
  margin-top: 22px; padding: 20px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm);
}
.wb-rate-q { font-size: 14px; color: var(--text-2); margin-bottom: 14px; line-height: 1.5; }
.wb-rate-q strong { color: var(--text); font-weight: 600; }
.wb-rate-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.wb-rate-done {
  font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--text-2);
}

/* ── TASTE-OFF — the ranking game ─────────────────────────── */
.game-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 120px;
}
.game-loading, .game-empty {
  text-align: center;
  color: var(--text-2);
  padding: 60px 16px;
}
.game-empty p { margin-bottom: 22px; font-size: 1.05rem; }

.game-head { text-align: center; margin-bottom: 26px; }
.game-eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-deep);
  margin-bottom: 6px;
}
.game-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.game-sub {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-2);
  margin-top: 10px;
}

.game-arena {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  position: relative;
}
.game-card {
  position: relative;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  min-height: 132px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.3s ease;
}
.game-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px var(--glow-soft);
}
.game-card-tag {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 8px;
}
.game-card-name {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1.15;
}
.game-card-sub {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text-2);
  margin-top: 6px;
}
.game-card-win {
  border-color: var(--accent);
  background: var(--wash-warm);
  transform: scale(1.03);
  box-shadow: 0 14px 36px var(--glow);
}
.game-card-lose { opacity: 0.4; transform: scale(0.97); }

.game-vs {
  align-self: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-3);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  margin: -6px 0;
  position: relative;
  z-index: 2;
}

.game-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  font-family: var(--sans);
  font-size: 0.82rem;
}
.game-skip {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 0.82rem; padding: 4px 0;
}
.game-skip:hover { color: var(--text-2); text-decoration: underline; }
.game-count { color: var(--text-3); }
.game-rankings-link { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.game-rankings-link:hover { text-decoration: underline; }

@media (min-width: 560px) {
  .game-arena { flex-direction: row; align-items: stretch; }
  .game-card { flex: 1; }
  .game-vs { margin: 0 -6px; align-self: center; }
}

/* ── Passport — Taste-Off rankings block ──────────────────── */
.pp-rankings-loading { color: var(--text-3); font-size: 0.9rem; }
.pp-rankings-empty {
  text-align: center;
  padding: 18px 16px 8px;
}
.pp-rankings-empty p { color: var(--text-2); margin-bottom: 16px; }
.pp-rankings-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.pp-rank-cta {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  color: var(--accent-deep); text-decoration: none;
}
.pp-rank-cta:hover { text-decoration: underline; }
.pp-rank-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 520px) {
  .pp-rank-grid { grid-template-columns: 1fr 1fr; }
}
.pp-rank-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 16px 10px;
}
.pp-rank-title {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 10px;
}
.pp-rank-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 6px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.pp-rank-row:last-of-type { border-bottom: none; }
.pp-rank-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--text-3);
  width: 16px;
  flex-shrink: 0;
}
.pp-rank-name {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.pp-rank-sub {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-3);
}
.pp-rank-more {
  font-size: 0.76rem;
  color: var(--text-3);
  margin-top: 8px;
}

/* ── WS1: intent-first ordering screen ────────────────────── */
.intent-screen { padding: 8px 0 8px; }
.intent-q {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.intent-sub {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--text-2);
  margin-bottom: 22px;
  max-width: 38ch;
}
.intent-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.intent-input {
  flex: 1;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 15px 16px;
  border: 1.5px solid var(--line-2, var(--line));
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.intent-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--glow-soft);
}
.intent-input::placeholder { color: var(--text-3); }
.intent-go {
  flex-shrink: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 22px;
  border: none;
  border-radius: var(--r-md);
  background: var(--accent-grad);
  color: var(--on-accent);
  cursor: pointer;
  transition: filter 0.16s ease;
}
.intent-go:hover { filter: brightness(1.05); }
.intent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.intent-chip {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2, var(--line));
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.16s ease;
}
.intent-chip:hover {
  border-color: var(--accent);
  background: var(--wash-warm);
  transform: translateY(-1px);
}

/* ── WS3: 1–5 rating scale ────────────────────────────────── */
.rating-scale { margin: 4px 0 2px; }
.rating-scale-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.rating-dot {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2, var(--line));
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
  display: flex; align-items: center; justify-content: center;
}
.rating-dot:hover { border-color: var(--accent); transform: translateY(-2px); }
.rating-dot.chosen {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
}
.rating-scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text-3);
}
.vmulti-why { margin-top: 14px; }

/* Collection verdict chips (passport) — 1–5 colour ramp */
.collection-verdict.r5, .collection-verdict.r4 { color: var(--c-mint-deep); }
.collection-verdict.r3 { color: var(--text-2); }
.collection-verdict.r2, .collection-verdict.r1 { color: var(--accent-deep); }

/* ── WS4: Group "Where to eat" ────────────────────────────── */
.group-wrap { max-width: 620px; margin: 0 auto; padding: 28px 20px 120px; }
.group-loading, .group-empty { text-align: center; color: var(--text-2); padding: 48px 16px; }
.group-empty p { margin-bottom: 20px; max-width: 40ch; margin-left: auto; margin-right: auto; }
.group-head { margin-bottom: 22px; }
.group-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  font-weight: 500; color: var(--text); letter-spacing: -0.01em; line-height: 1.08;
}
.group-sub { font-family: var(--sans); font-size: 0.97rem; color: var(--text-2); margin-top: 10px; max-width: 42ch; }
.group-section-label {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.7rem; font-weight: 700; color: var(--text-3); margin: 22px 0 12px;
}
.group-friends { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.group-friend {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 16px; border-radius: var(--r-md);
  border: 1.5px solid var(--line-2, var(--line)); background: var(--surface);
  cursor: pointer; transition: all 0.16s ease;
}
.group-friend:hover { border-color: var(--accent); transform: translateY(-1px); }
.group-friend.on { background: var(--accent-grad); border-color: transparent; }
.group-friend.on .group-friend-name, .group-friend.on .group-friend-meta { color: var(--on-accent); }
.group-friend-name { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; color: var(--text); }
.group-friend-meta { font-family: var(--sans); font-size: 0.74rem; color: var(--text-3); }
.group-go { width: 100%; }
.group-go:disabled { opacity: 0.45; cursor: not-allowed; }

/* Together — guided funnel (who / people / occasion) */
.group-step-eyebrow {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.72rem; font-weight: 700; color: var(--accent-deep); margin-bottom: 10px;
}
.grp-back {
  font-family: var(--sans); font-size: 0.84rem; font-weight: 600; color: var(--text-3);
  background: none; border: none; cursor: pointer; padding: 4px 2px; margin-bottom: 14px;
  transition: color 0.16s ease;
}
.grp-back:hover { color: var(--accent-deep); }

.grp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.grp-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 34px 18px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); background: var(--surface); cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.grp-opt:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 30px var(--glow-soft); }
.grp-opt-ic { font-size: 2rem; line-height: 1; }
.grp-opt-svg { width: 34px; height: 34px; color: var(--accent); }
.grp-opt-svg svg { width: 100%; height: 100%; display: block; }
.grp-opt.sel .grp-opt-svg, .grp-opt:active .grp-opt-svg { color: currentColor; }
.grp-opt-l { font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--text); }

.grp-stepper {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 6px; background: var(--surface);
}
.grp-step-btn {
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--wash-warm); color: var(--accent-deep);
  font-size: 1.3rem; font-weight: 600; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.16s ease, transform 0.12s ease;
}
.grp-step-btn:hover { background: var(--accent-grad); color: var(--on-accent); }
.grp-step-btn:active { transform: scale(0.92); }
.grp-step-val {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--text);
  min-width: 48px; text-align: center;
}
.grp-note {
  font-family: var(--sans); font-size: 0.86rem; color: var(--accent-deep);
  min-height: 1.2em; margin-bottom: 16px;
}
.grp-occ { min-width: 0; }   /* tiles are a 2-col grid now — keep the base column layout (icon -> label -> sub) so the subtitle wraps instead of clipping ("Birthday or anniversary") */

/* Refine cravings — optional pill chips on the "who's coming" step */
.grp-optional {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--text-3); font-size: 0.7rem; margin-left: 4px;
}
.group-cravings { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.grp-crave {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  padding: 8px 15px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-2, var(--line)); background: var(--surface);
  color: var(--text-2); cursor: pointer; transition: all 0.16s ease;
}
.grp-crave:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.grp-crave.on { background: var(--accent-grad); border-color: transparent; color: var(--on-accent); }
.grp-crave:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
/* "No friends on Palate yet" — a polished empty state on the people step so
   diners with zero friends see a clear next step instead of a blank section. */
.grp-no-friends {
  border: 1px dashed var(--line-2, var(--line));
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--wash-warm, rgba(0, 0, 0, 0.03));
  margin-bottom: 22px;
}
.grp-no-friends-text {
  font-family: var(--sans); font-size: 0.88rem; color: var(--text-2);
  line-height: 1.5; margin: 0;
}
.grp-no-friends-text a { color: var(--accent-deep); font-weight: 600; text-decoration: underline; }

.group-result-eyebrow {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; font-weight: 600; color: var(--accent-deep); margin-bottom: 6px;
}
.group-pick {
  display: block; text-decoration: none;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; margin-bottom: 14px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.group-pick:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--glow-soft); border-color: var(--accent); }
.group-pick-feature { border-color: var(--accent); background: var(--wash-warm); }
.group-pick-top { display: flex; gap: 10px; font-family: var(--sans); font-size: 0.76rem; color: var(--text-3); margin-bottom: 5px; }
.group-pick-cuisine { color: var(--accent-deep); font-weight: 600; }
.group-pick-name { font-family: var(--serif); font-size: clamp(1.3rem, 4.5vw, 1.7rem); font-weight: 500; color: var(--text); }
.group-pick-why { font-family: var(--sans); font-size: 0.92rem; color: var(--text-2); margin-top: 8px; }
.group-fits { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.group-fit { display: flex; align-items: center; gap: 10px; }
.group-fit-name { font-family: var(--sans); font-size: 0.82rem; color: var(--text-2); width: 88px; flex-shrink: 0; }
.group-fit-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.group-fit-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent-grad); }
.group-fit-pct {
  flex-shrink: 0; min-width: 42px; text-align: right;
  font-family: 'Fraunces', Georgia, serif; font-variant-numeric: tabular-nums;
  font-size: 0.95rem; font-weight: 600; line-height: 1; color: var(--accent, #C2502F);
}
.group-alts .group-pick { padding: 16px 18px; }

/* ── Order for the table — the composition assist (group.js order mode) ─────── */
/* "Plan the table's order →" link under the where-to-eat result + the venue card */
.grpo-cta {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  margin: 14px 0 4px; padding: 13px 18px; border-radius: var(--r-md);
  border: 1.5px solid var(--accent); background: var(--wash-warm);
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem; color: var(--accent-deep);
  transition: background 0.16s ease, transform 0.12s ease;
}
.grpo-cta:hover { background: var(--accent-grad); color: var(--on-accent); transform: translateY(-1px); }
.grpo-venue-cta {
  display: flex; align-items: center; gap: 13px; margin-top: 16px;
  padding: 15px 16px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); background: var(--surface);
  transition: border-color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
}
.grpo-venue-cta:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.grpo-venue-cta-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--wash-warm); color: var(--accent-deep);
}
.grpo-venue-cta-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.grpo-venue-cta-tx strong { font-family: var(--sans); font-weight: 700; font-size: 0.96rem; color: var(--text); }
.grpo-venue-cta-tx small { font-family: var(--sans); font-size: 0.78rem; color: var(--text-3); line-height: 1.3; }
.grpo-venue-cta-arrow { flex-shrink: 0; color: var(--accent-deep); font-size: 1.1rem; font-weight: 600; }

/* People step — friend + companion chips */
.grpo-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.grpo-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 15px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--surface);
  cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease, transform 0.12s ease;
}
.grpo-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.grpo-chip.on { background: var(--accent-grad); border-color: transparent; }
.grpo-chip.on .grpo-chip-n, .grpo-chip.on .grpo-chip-m { color: var(--on-accent); }
.grpo-chip-n { font-family: var(--sans); font-weight: 600; font-size: 0.92rem; color: var(--text); }
.grpo-chip-m { font-family: var(--sans); font-size: 0.72rem; color: var(--text-3); }
.grpo-empty { font-family: var(--sans); font-size: 0.86rem; color: var(--text-3); line-height: 1.5; margin: 2px 0 6px; max-width: 46ch; }
.grpo-empty a { color: var(--accent-deep); font-weight: 600; }

/* Plan — filters respected + the suggested order list */
.grpo-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.grpo-filter {
  font-family: var(--sans); font-size: 0.76rem; font-weight: 600; color: var(--accent-deep);
  background: var(--wash-warm); border-radius: 999px; padding: 5px 12px;
}
.grpo-order { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.grpo-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--surface);
}
.grpo-item-ph {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px;
  background-size: cover; background-position: center; background-color: var(--wash-warm);
}
.grpo-item-ph-x { display: flex; align-items: center; justify-content: center; color: var(--accent-deep); opacity: 0.7; }
.grpo-item-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.grpo-item-name { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; color: var(--text); }
.grpo-item-meta { font-family: var(--sans); font-size: 0.76rem; color: var(--text-3); }
.grpo-item-price { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.grpo-item-x {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--wash-warm); color: var(--text-3); font-size: 0.9rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background 0.16s ease, color 0.16s ease;
}
.grpo-item-x:hover { background: var(--accent); color: var(--on-accent); }

/* R9(b) — per-dish quantity stepper (change the count of a dish) */
.grpo-qty {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px;
  background: var(--wash-warm); border-radius: 999px; padding: 2px;
}
.grpo-qty-b {
  width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--surface); color: var(--accent-deep); font-size: 0.9rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background 0.14s ease, color 0.14s ease;
}
.grpo-qty-b:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
.grpo-qty-b:active:not(:disabled) { transform: scale(0.9); }
.grpo-qty-b:disabled { opacity: 0.4; cursor: default; }
.grpo-qty-v {
  min-width: 16px; text-align: center; font-family: var(--sans); font-weight: 700;
  font-size: 0.82rem; color: var(--text); font-variant-numeric: tabular-nums;
}
/* Keep the crowded action cluster tidy on narrow phones (375px) */
@media (max-width: 400px) {
  .grpo-item { gap: 8px; padding: 10px 10px; }
  .grpo-item-price { font-size: 0.78rem; }
}

/* Per-person add picks */
.grpo-pp-block { margin-top: 8px; }
.grpo-pp-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.grpo-pp-pick {
  font-family: var(--sans); font-size: 0.84rem; font-weight: 600; color: var(--text-2);
  background: var(--surface); border: 1.5px dashed var(--line); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.grpo-pp-pick:hover { border-color: var(--accent); border-style: solid; color: var(--accent-deep); background: var(--wash-warm); }
.grpo-pp-pr { color: var(--text-3); font-weight: 500; }

.grpo-fullmenu { display: inline-block; margin: 14px 0 22px; font-family: var(--sans); font-size: 0.88rem; font-weight: 600; color: var(--accent-deep); }
.grpo-note { font-family: var(--sans); font-size: 0.8rem; color: var(--text-3); line-height: 1.5; margin-top: 12px; text-align: center; max-width: 42ch; margin-left: auto; margin-right: auto; }

/* Done */
.grpo-done { text-align: center; padding: 36px 16px 48px; }
.grpo-done-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: 18px;
  background: var(--accent-grad); color: var(--on-accent);
}
.grpo-done .group-title { margin-bottom: 8px; }
.grpo-done-note { font-family: var(--sans); font-size: 0.92rem; color: var(--text-2); line-height: 1.5; max-width: 42ch; margin: 12px auto 22px; }
.grpo-done-note a { color: var(--accent-deep); font-weight: 600; }

/* ── ORDER FOR THE TABLE — setup steps (who's at the table / appetite) ──────
   Brings the bare form steps up to the rec2 result polish: a photo venue header,
   porcelain sheets with kicker labels, and icon empty-states. Scoped .tblo-*. */
.tblo { animation: tblo-rise .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes tblo-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tblo { animation: none; } }

.tblo-venue {
  position: relative; display: block; border-radius: 22px; overflow: hidden;
  min-height: 158px; margin: 4px 0 20px;
  box-shadow: 0 20px 42px -28px rgba(120,70,40,0.62);
}
.tblo-venue-bg { position: absolute; inset: 0; background-size: cover; background-position: center 50%; }
.tblo-venue-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,18,12,0.04) 26%, rgba(26,18,12,0.34) 62%, rgba(26,18,12,0.76) 100%); }
.tblo-venue-body { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 158px; padding: 16px 18px 17px; }
.tblo-venue-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px;
  font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase;
  color: #FFF7EE; text-shadow: 0 1px 10px rgba(0,0,0,0.32); }
.tblo-venue-eyebrow svg { width: 14px; height: 14px; }
.tblo-venue-name { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 7vw, 32px); line-height: 1.02;
  color: #FFF7EE; text-shadow: 0 2px 18px rgba(0,0,0,0.36); }
.tblo-venue-meta { margin-top: 5px; font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  color: rgba(255,247,238,0.86); text-shadow: 0 1px 10px rgba(0,0,0,0.3); }

.tblo-head { margin-bottom: 16px; }
.tblo-title { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 7.4vw, 33px); line-height: 1.08;
  color: var(--text); margin: 0; }
.tblo-sub { margin: 8px 0 0; font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; color: var(--text-2); max-width: 42ch; }

.tblo-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 15px 16px; margin-bottom: 12px; box-shadow: 0 14px 30px -26px rgba(120,80,40,0.4); }
.tblo-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 11px;
  font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-3); }
.tblo-tick { width: 14px; height: 2px; border-radius: 2px; background: var(--accent); display: inline-block; }

.tblo-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tblo-row-tx { min-width: 0; }
.tblo-row-tx .tblo-label { margin: 0; }
.tblo-row-hint { margin: 5px 0 0; font-family: var(--sans); font-size: 12px; line-height: 1.4; color: var(--text-3); }
.tblo-stepper { margin: 0; flex-shrink: 0; }

.tblo-empty { display: flex; align-items: center; gap: 12px; padding: 3px 2px; }
.tblo-empty-ic { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--wash-warm); color: var(--accent-deep); }
.tblo-empty-ic svg { width: 19px; height: 19px; }
.tblo-empty-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tblo-empty-line { font-family: var(--sans); font-size: 0.88rem; color: var(--text-3); line-height: 1.45; }
.tblo-empty-link { font-family: var(--sans); font-size: 0.86rem; font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.tblo-empty-link:hover { color: var(--accent); }

.tblo-cta { width: 100%; margin-top: 4px; }

/* ── FOCUS & ACCESSIBILITY ───────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, textarea:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HOME LANDING RESKIN — scoped to .lp-nav / .hero-landing / .home-steps
   Matches design-reference "Palate Home (standalone).html". Every rule is
   namespaced to landing-only roots so NO other screen is affected. Uses the
   mockup's terracotta + cream system and DM Serif Display / Plus Jakarta Sans.
   Per CLAUDE.md: the 5-hue Taste-DNA spectrum is used ONLY for the taste bar;
   Terracotta is the single decorative accent everywhere else.
   ════════════════════════════════════════════════════════════════════ */
.lp-nav, .hero-landing, .home-steps {
  --lp-cream: #F6EFE4;
  --lp-sand: #FCF6EC;
  --lp-espresso: #2A2018;
  --lp-terra: #C2502F;
  --lp-terra-deep: #9A3C20;
  --lp-fg2: color-mix(in srgb, #2A2018 66%, #F6EFE4);
  --lp-fg3: color-mix(in srgb, #2A2018 42%, #F6EFE4);
  --lp-line: color-mix(in srgb, #2A2018 14%, transparent);
  --lp-line-strong: color-mix(in srgb, #2A2018 24%, transparent);
  --lp-serif: 'DM Serif Display', 'Fraunces', Georgia, serif;
  --lp-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* spectrum hues — taste only */
  --lp-adventure: #5C8C68; --lp-heat: #D6492F; --lp-indulgence: #8E3D5B;
  --lp-bold: #5C8C68; --lp-table: #2E7A95;
}

/* ── Brand (P mark + wordmark) ─────────────────────────────────────── */
.lp-nav { border-bottom-color: transparent; }
.lp-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; cursor: pointer;
}
/* The brand mark — a terracotta circle with a single cream noodle-wave (inline
   SVG in each nav's .lp-pmark span). Sized like the old 36px "P" tile; landing
   contexts that hide the mark keep their own display:none overrides. */
.lp-pmark { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; }
.lp-pmark svg { width: 100%; height: 100%; display: block; }
.lp-word {
  font-family: var(--lp-serif); font-weight: 400; font-size: 27px;
  letter-spacing: -0.015em; line-height: 1; color: var(--lp-espresso);
  white-space: nowrap;
}
.lp-word .lp-dot { color: var(--lp-terra); }
.lp-nav .lp-signin {
  font-family: var(--lp-sans); font-weight: 600; font-size: 14px;
  color: var(--lp-espresso); background: var(--lp-sand);
  border: 1px solid var(--lp-line); border-radius: var(--r-pill);
  padding: 11px 20px; box-shadow: 0 1px 2px rgba(42,32,24,0.08);
}
.lp-nav .lp-signin:hover {
  background: color-mix(in srgb, var(--lp-espresso) 5%, var(--lp-sand));
  border-color: var(--lp-line); transform: none;
}

/* ── Hero shell + ambient drifting blobs ───────────────────────────── */
.hero-landing { font-family: var(--lp-sans); }
.hero-landing::before {
  background: radial-gradient(120% 80% at 50% 0%,
    color-mix(in srgb, var(--lp-terra) 6%, var(--lp-cream)) 0%,
    var(--lp-cream) 58%);
  filter: none;
}
.hero-landing .hero-amb {
  position: absolute; inset: -16% -28% auto -28%; height: 150%;
  z-index: 0; pointer-events: none;
}
.hero-landing .hero-amb span {
  position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.5;
  will-change: transform, opacity; animation: lpDrift 17s var(--ease-out) infinite alternate;
}
.hero-landing .hero-amb .a1 { width: 300px; height: 300px; top: -70px; left: 2%;
  background: color-mix(in srgb, var(--lp-terra) 55%, transparent); animation-duration: 16s; }
.hero-landing .hero-amb .a2 { width: 240px; height: 240px; top: 0; right: -2%;
  background: color-mix(in srgb, #E6A171 48%, transparent); animation-duration: 20s; animation-delay: -5s; }
.hero-landing .hero-amb .a3 { width: 220px; height: 220px; top: 110px; left: 30%;
  background: color-mix(in srgb, var(--lp-terra) 28%, transparent); animation-duration: 23s; animation-delay: -9s; }
.hero-landing .hero-amb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, var(--lp-cream) 94%);
}
@keyframes lpDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(12px,-16px,0) scale(1.12); opacity: 0.66; }
  100% { transform: translate3d(-10px,12px,0) scale(0.95); }
}

/* ── Badge / headline / subcopy / note ─────────────────────────────── */
.hero-landing .hero-eyebrow {
  font-family: var(--lp-sans); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--lp-terra);
  background: color-mix(in srgb, var(--lp-terra) 12%, var(--lp-cream));
  border-radius: var(--r-pill); padding: 9px 16px; margin-bottom: 32px;
}
.hero-landing h1 {
  font-family: var(--lp-serif); font-weight: 400;
  font-size: clamp(44px, 13vw, 56px); line-height: 1.02;
  letter-spacing: -0.015em; color: var(--lp-espresso);
}
.hero-landing h1 em {
  font-style: italic; font-weight: 400; color: var(--lp-terra);
  background: none; -webkit-text-fill-color: var(--lp-terra);
}
.hero-landing .hero-lede {
  font-family: var(--lp-sans); font-size: 17px; line-height: 1.55;
  color: var(--lp-fg2); max-width: 19rem; margin: 24px auto 0;
}
.hero-landing .hero-note {
  font-family: var(--lp-sans); font-size: 15px; line-height: 1.5;
  color: var(--lp-fg3); max-width: 17rem; margin: 24px auto 0;
}

/* ── Signature Taste-DNA spectrum bar (taste-only hues) ────────────── */
.lp-spectrum { display: flex; gap: 5px; width: 148px; margin: 24px auto 0; }
.lp-spectrum span {
  flex: 1; height: 7px; border-radius: var(--r-pill);
  box-shadow: 0 2px 9px color-mix(in srgb, var(--sp, var(--lp-terra)) 40%, transparent);
  animation: lpSpecGlow 4.4s ease-in-out infinite alternate;
}
.lp-spectrum span:nth-child(1) { background: var(--taste-spice);     --sp: var(--taste-spice);     animation-delay: 0ms; }
.lp-spectrum span:nth-child(2) { background: var(--taste-richness);  --sp: var(--taste-richness);  animation-delay: 220ms; }
.lp-spectrum span:nth-child(3) { background: var(--taste-adventure); --sp: var(--taste-adventure); animation-delay: 440ms; }
.lp-spectrum span:nth-child(4) { background: var(--taste-sharing);   --sp: var(--taste-sharing);   animation-delay: 660ms; }
@keyframes lpSpecGlow { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }

/* ── CTAs (terracotta primary, sand secondary) ─────────────────────── */
.hero-landing .hero-actions { gap: 12px; margin-top: 40px; }
.hero-landing .hero-actions .btn {
  font-family: var(--lp-sans); font-weight: 600; font-size: 16px;
  border-radius: var(--r-pill); padding: 18px 22px;
}
.hero-landing .btn-primary {
  background: var(--lp-terra); color: var(--lp-cream);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lp-terra) 28%, transparent);
}
.hero-landing .btn-primary::before { display: none; }
.hero-landing .btn-primary:hover {
  background: var(--lp-terra-deep); filter: none;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--lp-terra) 34%, transparent);
}
.hero-landing .btn-ghost {
  background: var(--lp-sand); color: var(--lp-espresso);
  border: 1.5px solid var(--lp-line-strong); box-shadow: none;
}
.hero-landing .btn-ghost:hover {
  background: color-mix(in srgb, var(--lp-espresso) 4%, var(--lp-sand));
  border-color: var(--lp-line-strong);
}

/* ── How it works ──────────────────────────────────────────────────── */
.home-steps { font-family: var(--lp-sans); }
.home-steps-eyebrow {
  font-family: var(--lp-sans); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--lp-fg3);
}
.home-step-num {
  background: color-mix(in srgb, var(--lp-terra) 12%, var(--lp-cream));
  color: var(--lp-terra); font-family: var(--lp-sans);
}
.home-step h3 { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.home-step p { font-family: var(--lp-sans); color: var(--lp-fg2); }

@media (prefers-reduced-motion: reduce) {
  .hero-landing .hero-amb span, .lp-spectrum span { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ONBOARDING RESKIN — scoped to .quiz-* / .onb-* / .ob-* classes
   Matches design-reference "Palate Onboarding Flow.html". Reskins the existing
   data-driven quiz renderers (no markup/logic change beyond the branded nav +
   a decorative result spectrum). All selectors are onboarding-specific.
   ════════════════════════════════════════════════════════════════════ */
/* Branded header (reuses the .lp-brand component) */
.ob-nav { background: #FFFFFF; border-bottom: 1px solid var(--lp-line); }

/* Card shell + progress */
.quiz-wrap { font-family: var(--lp-sans); color: var(--lp-espresso); }
.quiz-card {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 56px -22px rgba(42,32,24,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Section grouping labels (e.g. "Your account" / "About you") */
.quiz-section { display: flex; align-items: center; gap: 10px; font-family: var(--lp-sans);
  font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lp-fg3); margin: 24px 0 14px; }
.quiz-section::after { content: ""; flex: 1; height: 1px; background: var(--lp-line); }
/* Selectish (custom dropdown) error state — used for the required Nationality */
.quiz-selectish.field-invalid .sel-btn { border-color: var(--lp-terra);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-terra) 14%, transparent); }
.quiz-progress { background: color-mix(in srgb, var(--lp-espresso) 10%, var(--lp-cream)); border-radius: var(--r-pill); height: 6px; overflow: hidden; }
.quiz-progress-bar { background: linear-gradient(90deg, var(--lp-terra), var(--lp-terra-deep)); border-radius: var(--r-pill); transform-origin: left center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* Typography blocks — unified with the Taste-Off header: centered terracotta
   eyebrow → serif headline (italic accent) → muted helper (bold accent).
   The headline keeps a generous bottom margin; the hint tucks up under it with a
   negative top margin, so spacing stays right whether or not a hint is present. */
.quiz-step-label { font-family: var(--lp-sans); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lp-terra-deep); text-align: center; margin: 0 0 10px; }
.quiz-question { font-family: var(--lp-serif); font-weight: 700; font-size: 27px; line-height: 1.16; color: var(--lp-fg); text-align: center; margin: 0 0 22px; }
.quiz-question em { font-style: normal; font-weight: 600; color: var(--lp-terra-deep); }
.quiz-hint { font-family: var(--lp-sans); font-size: 13px; line-height: 1.5; color: var(--lp-fg2); text-align: center; margin: -14px 0 22px; }
.quiz-hint b, .quiz-hint strong { color: var(--lp-terra-deep); font-weight: 700; }
.quiz-why { display: flex; justify-content: center; gap: 8px; font-family: var(--lp-sans); font-size: 13px; line-height: 1.45; color: var(--lp-fg2); background: none; border: none; padding: 0; margin: -12px 0 22px; text-align: left; }
.quiz-why-k { flex: none; font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-terra); }

/* Text inputs */
.quiz-name-input, .quiz-text-input {
  font-family: var(--lp-sans); font-size: 15px; line-height: 1.3; color: var(--lp-espresso);
  background: var(--lp-cream); border: 1.5px solid var(--lp-line); border-radius: var(--r-md);
}
.quiz-name-input:focus, .quiz-text-input:focus {
  border-color: var(--lp-terra); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-terra) 16%, transparent);
}
.quiz-text-add {
  background: var(--lp-terra); color: var(--lp-cream); border: none; border-radius: var(--r-md);
  font-family: var(--lp-sans); font-weight: 600;
}
.quiz-text-add:hover { background: var(--lp-terra-deep); }

/* Mini labels + name-step inline chips */
.quiz-mini-label { font-family: var(--lp-sans); font-weight: 600; font-size: 13px; color: var(--lp-fg2); }
.quiz-confirm-label { font-family: var(--lp-sans); color: var(--lp-fg2); }
.quiz-confirm-input:checked ~ .quiz-confirm-box,
.quiz-confirm-box.checked { background: var(--lp-terra); border-color: var(--lp-terra); }

/* CHIPS (multi/text_chips + name-step inline) */
.quiz-chip {
  font-family: var(--lp-sans); font-weight: 600; font-size: 14px; color: var(--lp-espresso);
  background: var(--lp-cream); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-pill);
}
.quiz-chip:hover { border-color: var(--lp-terra); }
.quiz-chip.on { background: var(--lp-terra); border-color: var(--lp-terra); color: var(--lp-cream); }
.quiz-chip.on .chip-hint { color: color-mix(in srgb, var(--lp-cream) 82%, var(--lp-terra)); }
.chip-hint { font-family: var(--lp-sans); color: var(--lp-fg3); }

/* OPTION rows (single-select) + descriptive cards */
.quiz-option, .quiz-card-opt {
  font-family: var(--lp-sans); color: var(--lp-espresso);
  background: var(--lp-cream); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-md);
}
.quiz-option:hover, .quiz-card-opt:hover { border-color: var(--lp-terra); }
.quiz-option.selected, .quiz-card-opt.selected { background: var(--lp-tint-strong); border-color: var(--lp-terra); }
.quiz-card-label { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-espresso); }
.quiz-card-opt.selected .quiz-card-label { color: var(--lp-terra-deep); }
.quiz-card-desc { font-family: var(--lp-sans); color: var(--lp-fg3); }
.quiz-option.selected .rank-badge { background: var(--lp-terra); color: var(--lp-cream); }

/* Account step + Log in (P3): email/password fields reuse the boxed quiz input
   look, with a small label above each and proper horizontal padding. */
.auth-input { width: 100%; padding: 12px 15px; margin: 0 0 13px; }
.auth-input::placeholder { color: var(--lp-fg3); }
.auth-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232A2018' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.auth-select:invalid { color: var(--lp-fg3); }   /* dim the placeholder until a country is picked */
/* Date of birth — three compact dropdowns in a row (fast birth-year picking). */
.dob-row { display: flex; gap: 8px; margin: 0 0 14px; }
.dob-row .auth-select { width: auto; min-width: 0; margin: 0; padding-right: 26px; background-position: right 8px center; text-overflow: ellipsis; }
.dob-row .dob-d { flex: 0.85 1 0; }   /* just the day number — narrowest */
.dob-row .dob-m { flex: 1.55 1 0; }   /* full month names need the most room */
.dob-row .dob-y { flex: 1.1 1 0; }
.dob-row.shake { animation: shake 0.4s ease; }
.auth-label {
  display: block; font-family: var(--lp-sans); font-weight: 600;
  font-size: 12px; letter-spacing: 0.01em; color: var(--lp-fg2); margin: 2px 0 6px;
}
.auth-subhint {
  font-family: var(--lp-sans); font-size: 12.5px; line-height: 1.45;
  color: var(--lp-fg3); margin: -4px 0 10px;
}
/* Task 5 — onboarding @username live availability hint */
.ob-handle-ok  { color: #1d6a2c; }
.ob-handle-bad { color: var(--lp-terra, #C2502F); }

/* =====================================================   ONBOARDING — redesigned question patterns (Goals · Cuisines · Spice).
   Built on the --lp-* system; terracotta + neutrals only (the Taste-DNA
   spectrum hues are reserved for the result read). Design handoff Q3/Q4/Q9.
   ============================================================ */
/* shared exclusive opt-out card ("surprise me" / "open to anything") */
.ob-optout {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: var(--lp-sand); border: 1px solid var(--lp-line);
  border-radius: var(--r-md); padding: 14px 15px; margin-top: 18px;
  box-shadow: 0 2px 8px -5px rgba(42,32,24,.12);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .12s;
}
.ob-optout:hover { border-color: var(--lp-terra); }
.ob-optout:active { transform: scale(.99); }
.ob-optout-ico { flex: none; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--lp-terra); color: var(--lp-cream); display: grid; place-items: center; }
.ob-optout-ico svg { width: 19px; height: 19px; }
.ob-optout-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-optout-title { font: 600 15.5px/1.25 var(--lp-sans); color: var(--lp-espresso); }
.ob-optout-sub { font: 400 12.5px/1.35 var(--lp-sans); color: var(--lp-fg2); }
.ob-opt-radio { flex: none; width: 22px; height: 22px; border-radius: var(--r-pill); border: 2px solid var(--lp-line-strong); display: grid; place-items: center; transition: border-color .2s; }
.ob-opt-radio::after { content: ""; width: 11px; height: 11px; border-radius: var(--r-pill); background: var(--lp-terra); transform: scale(0); transition: transform .2s cubic-bezier(.16,1,.3,1); }
.ob-optout.sel { background: var(--lp-tint-strong); border-color: var(--lp-terra); }
.ob-optout.sel .ob-opt-radio { border-color: var(--lp-terra); }
.ob-optout.sel .ob-opt-radio::after { transform: scale(1); }

/* "or" divider */
.ob-or-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: var(--lp-fg3); }
.ob-or-divider::before, .ob-or-divider::after { content: ""; flex: 1; height: 1px; background: var(--lp-line); }
.ob-or-divider span { font: 600 10.5px/1 var(--lp-sans); letter-spacing: .14em; text-transform: uppercase; }

/* goal rows (icon chip + title + sub + check) */
.ob-goal-list { display: flex; flex-direction: column; gap: 10px; }
.ob-goal-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: var(--lp-cream); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-md); padding: 12px 13px;
  transition: background .2s, border-color .2s, transform .12s;
}
.ob-goal-row:hover { border-color: var(--lp-terra); }
.ob-goal-row:active { transform: scale(.99); }
.ob-goal-ico { flex: none; width: 42px; height: 42px; border-radius: var(--r-md); background: var(--lp-tint-strong); color: var(--lp-terra); display: grid; place-items: center; transition: background .2s, color .2s; }
.ob-goal-ico svg { width: 21px; height: 21px; }
.ob-goal-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-goal-title { font: 600 15.5px/1.25 var(--lp-sans); color: var(--lp-espresso); }
.ob-goal-sub { font: 400 12.5px/1.35 var(--lp-sans); color: var(--lp-fg3); }
.ob-goal-check { flex: none; width: 24px; height: 24px; border-radius: var(--r-pill); border: 1.5px solid var(--lp-line-strong); display: grid; place-items: center; opacity: .5; transform: scale(.8); transition: opacity .2s, transform .2s, background .2s, border-color .2s; }
.ob-goal-check svg { width: 13px; height: 13px; color: var(--lp-cream); opacity: 0; transition: opacity .2s; }
.ob-goal-row.sel { background: var(--lp-tint); border-color: var(--lp-terra); }
.ob-goal-row.sel .ob-goal-ico { background: var(--lp-terra); color: var(--lp-cream); }
.ob-goal-row.sel .ob-goal-title { color: var(--lp-terra-deep); }
.ob-goal-row.sel .ob-goal-check { opacity: 1; transform: scale(1); background: var(--lp-terra); border-color: var(--lp-terra); }
.ob-goal-row.sel .ob-goal-check svg { opacity: 1; }

/* cuisine chips (uniform wrapping pills with a reveal tick) */
.ob-cchips { display: flex; flex-wrap: wrap; gap: 10px; }
.ob-cchip {
  font: 600 14px/1 var(--lp-sans); color: var(--lp-espresso); background: var(--lp-cream);
  border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-pill); padding: 12px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, transform .12s;
}
.ob-cchip:hover { border-color: var(--lp-terra); }
.ob-cchip:active { transform: scale(.96); }
.ob-cchip-tick { width: 0; height: 14px; overflow: hidden; opacity: 0; display: inline-flex; transition: width .2s, opacity .2s; }
.ob-cchip-tick svg { width: 14px; height: 14px; display: block; }
.ob-cchip.sel { background: var(--lp-terra); border-color: var(--lp-terra); color: var(--lp-cream); }
.ob-cchip.sel .ob-cchip-tick { width: 14px; opacity: 1; }

/* spice heat-scale (escalating lit flames) */
.ob-spice { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.ob-spice-opt {
  display: flex; align-items: center; gap: 15px; width: 100%; text-align: left; cursor: pointer;
  background: var(--lp-cream); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-md); padding: 13px 15px;
  transition: background .2s, border-color .2s, transform .12s;
}
.ob-spice-opt:hover { border-color: var(--lp-terra); }
.ob-spice-opt:active { transform: scale(.99); }
.ob-spice-flames { flex: none; display: flex; gap: 3px; }
.ob-spice-flames svg { width: 17px; height: 17px; color: color-mix(in srgb, var(--lp-espresso) 18%, var(--lp-cream)); transition: color .2s, fill .2s; }
.ob-spice-flames svg.lit { color: var(--lp-terra); fill: color-mix(in srgb, var(--lp-terra) 22%, transparent); }
.ob-spice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ob-spice-level { font: 700 11px/1.2 var(--lp-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-fg3); transition: color .2s; }
.ob-spice-desc { font: 500 14.5px/1.3 var(--lp-sans); color: var(--lp-espresso); }
.ob-spice-opt.sel { background: var(--lp-tint); border-color: var(--lp-terra); }
.ob-spice-opt.sel .ob-spice-level { color: var(--lp-terra); }
.ob-spice-opt.sel .ob-spice-flames svg.lit { fill: var(--lp-terra); }

/* live count line under Goals / Cuisines / Occasions */
.ob-count { font: 500 13px/1.3 var(--lp-sans); color: var(--lp-fg3); margin: 16px 0 0; text-align: left; }

/* occasions — a 2-column icon-tile grid with a corner check (design Q5) */
.ob-occ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.ob-occ {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 11px; cursor: pointer;
  background: var(--lp-cream); border: 1px solid var(--lp-line); border-radius: var(--r-md); padding: 18px 14px 16px;
  box-shadow: 0 2px 8px -5px rgba(42,32,24,.14);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .14s;
}
.ob-occ:hover { border-color: color-mix(in srgb, var(--lp-terra) 50%, transparent); box-shadow: 0 9px 20px -10px rgba(42,32,24,.24); transform: translateY(-2px); }
.ob-occ:active { transform: translateY(0) scale(.985); }
.ob-occ-ico { width: 50px; height: 50px; border-radius: var(--r-pill); background: var(--lp-tint-strong); color: var(--lp-terra); display: grid; place-items: center; transition: background .2s, color .2s, transform .2s; }
.ob-occ-ico svg { width: 24px; height: 24px; }
.ob-occ-title { font: 600 14.5px/1.2 var(--lp-sans); color: var(--lp-espresso); text-align: center; }
.ob-occ-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: var(--r-pill); border: 1.5px solid var(--lp-line-strong); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s, background .2s, border-color .2s; }
.ob-occ-check svg { width: 12px; height: 12px; color: var(--lp-cream); }
.ob-occ.sel {
  background: var(--lp-tint); border-color: var(--lp-terra);
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--lp-terra) 50%, transparent);
}
.ob-occ.sel:hover { transform: translateY(-2px); }
.ob-occ.sel .ob-occ-ico { background: var(--lp-terra); color: var(--lp-cream); transform: scale(1.06); }
.ob-occ.sel .ob-occ-title { color: var(--lp-terra-deep); }
.ob-occ.sel .ob-occ-check { opacity: 1; transform: scale(1); background: var(--lp-terra); border-color: var(--lp-terra); }

/* Occasions Q5 — circular dish-photo tiles (Uber Eats style). Selected = terracotta
   ring + lift; no check badge (the ring reads as selected on its own). */
.oc2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
.oc2 { display: flex; flex-direction: column; align-items: center; gap: 9px; cursor: pointer; background: none; border: none; padding: 4px 0 2px; font-family: inherit; }
.oc2-photo {
  position: relative; width: 100%; max-width: 92px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  background: var(--lp-tint-strong);
  box-shadow: 0 5px 13px -5px rgba(42,32,24,.34), inset 0 0 0 1px rgba(42,32,24,.06);
  transition: transform .16s, box-shadow .2s;
}
.oc2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.06) contrast(1.03); transition: transform .25s; }
.oc2-label { font: 600 13px/1.25 var(--lp-sans); color: var(--lp-espresso); text-align: center; max-width: 104px; }
.oc2:hover .oc2-photo { transform: translateY(-2px); box-shadow: 0 11px 22px -8px rgba(42,32,24,.42), inset 0 0 0 1px rgba(42,32,24,.06); }
.oc2:hover .oc2-photo img { transform: scale(1.05); }
.oc2:active .oc2-photo { transform: translateY(0) scale(.97); }
.oc2.sel .oc2-photo { box-shadow: 0 0 0 3px var(--lp-terra), 0 9px 20px -8px color-mix(in srgb, var(--lp-terra) 55%, transparent); transform: translateY(-1px); }
.oc2.sel .oc2-photo img { filter: saturate(1.1) contrast(1.04); }
.oc2.sel .oc2-label { color: var(--lp-terra-deep); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .oc2-photo, .oc2-photo img { transition: none; } }

/* Signed-in home — the 4 action boxes as imagery intent cards (replaced icon tiles). */
.pl-bigcard {
  position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3;
  border-radius: var(--r-lg); overflow: hidden; text-decoration: none;
  background-size: cover; background-position: center; background-color: var(--tint);
  box-shadow: 0 5px 13px -5px rgba(42,32,24,.28); transition: transform .16s, box-shadow .2s;
}
.pl-bigcard-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,16,11,0) 34%, rgba(24,16,11,.8) 100%); }
.pl-bigcard-label { position: relative; z-index: 1; padding: 0 15px 14px; }
.pl-bigcard-title { display: block; font: 700 16px/1.1 var(--sans); color: #fff; letter-spacing: -.01em; }
.pl-bigcard-sub { display: block; font: 500 12.5px/1.2 var(--sans); color: rgba(255,255,255,.85); margin-top: 3px; }
.pl-bigcard:hover { transform: translateY(-2px); box-shadow: 0 11px 22px -9px rgba(42,32,24,.4); }
.pl-bigcard:active { transform: translateY(0) scale(.985); }
@media (prefers-reduced-motion: reduce) { .pl-bigcard { transition: none; } }

/* "How well we know you" tile — solid terracotta with the Knowledge % as one big
   Fraunces numeral pinned flush to the TOP and RIGHT edges and stretched vertically
   for a bold display look. The label sits in a compact bottom band over a scrim, in the
   same .pl-bigcard-title font as Go out / What to order / Discover. */
.pl-knowcard {
  overflow: hidden;                  /* the big % reaches the edges but stays in the box */
  background: var(--accent);         /* solid terracotta — no gradient */
  color: var(--on-accent);
}
.pl-knowcard-pct {
  position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  margin: 0; padding: 0; text-align: right;        /* flush to the top + right borders */
  font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(72px, 25vw, 106px); line-height: 0.72; letter-spacing: -.045em; color: #fff;
  transform: scaleY(1.22); transform-origin: top right;   /* stretched taller, top-right anchored */
}
.pl-knowcard .pl-bigcard-label {
  position: relative; z-index: 1; width: 100%; padding-top: 8px; padding-bottom: 11px;
  background: linear-gradient(180deg, rgba(120,28,8,0) 0%, rgba(120,28,8,.5) 42%, rgba(120,28,8,.85) 100%);
}

/* ════════════════════════════════════════════════════════════════════════════
   Home v3 — daily launchpad. Lead with ONE go-out CTA, then a social-activity
   strip + a taste-identity hook (the reasons to return), with loyalty demoted to
   a small bonus tile. ALL selectors are scoped under .plhome so none can bleed
   into other screens (a generic .pl-* name once collapsed the home rails).
   ════════════════════════════════════════════════════════════════════════════ */

/* (1) the single lead — "Go out tonight" */
.plhome .pl-gohero {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 76%, #000));
  color: var(--on-accent, #fff); border-radius: var(--r-xl); padding: 18px 20px;
  box-shadow: var(--shadow-accent); position: relative; overflow: hidden;
  transition: transform .16s var(--ease-out), box-shadow .2s var(--ease-out);
}
.plhome .pl-gohero:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--accent) 66%, transparent); }
.plhome .pl-gohero:active { transform: translateY(0) scale(.99); }
.plhome .pl-gohero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plhome .pl-gohero-kicker { display: inline-flex; align-items: center; gap: 6px; font: 800 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, #fff 86%, transparent); }
.plhome .pl-gohero-title { font: 400 27px/1.02 var(--serif); letter-spacing: -.01em; }
.plhome .pl-gohero-sub { font: 500 13.5px/1.3 var(--sans); color: color-mix(in srgb, #fff 88%, transparent); }
.plhome .pl-gohero-go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: color-mix(in srgb, #fff 18%, transparent); }

/* secondary actions — reachable but quiet (what to order · discover) */
.plhome .pl-2ndrow { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 11px; }
.plhome .pl-2nd { display: flex; align-items: center; gap: 10px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 13px; box-shadow: var(--shadow-sm); transition: transform .16s var(--ease-out), box-shadow .2s; }
.plhome .pl-2nd:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.plhome .pl-2nd:active { transform: scale(.985); }
.plhome .pl-2nd-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tint); }
.plhome .pl-2nd-tx { display: flex; flex-direction: column; min-width: 0; }
.plhome .pl-2nd-t { font: 700 14px/1.1 var(--sans); color: var(--fg1); }
.plhome .pl-2nd-s { font: 500 11.5px/1.2 var(--sans); color: var(--fg3); margin-top: 2px; }

/* (2) friends / taste activity strip */
.plhome .pl-frail { scrollbar-width: none; }
.plhome .pl-frail::-webkit-scrollbar { display: none; height: 0; }
/* From your friends — compact LIST ROWS (Mobbin refs: Open / Beli / Shelf). A short row:
   leading thumbnail/avatar · text body (name + action · dish · venue) · taste-match ring.
   A no-photo row never leaves dead space; the thumbnail is a background-image (no <img>) so
   a broken-image icon is impossible. Horizontal rail kept — ~1.3 rows peek on a 380px phone.
   Deduped to ONE row per friend in _plFriendsStrip, so one person can never flood the strip. */
.plhome .pl-fa { flex: none; width: 272px; max-width: 84vw; scroll-snap-align: start; display: flex; align-items: center; gap: 12px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease-out), box-shadow .22s var(--ease-out), border-color .18s var(--ease-out); }
.plhome .pl-fa:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.plhome .pl-fa:active { transform: translateY(-1px); }
.plhome .pl-fa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Leading visual — shared sizing for the photo thumbnail AND the no-photo avatar, so the
   row's left edge is identical whether or not a photo exists. */
.plhome .pl-fa-thumb, .plhome .pl-fa-av { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; overflow: hidden; position: relative; }
.plhome .pl-fa-av { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 78%, #2A1109), var(--accent)); color: #FFF7EE; font: 700 18px/1 var(--serif); box-shadow: inset 0 0 0 1px color-mix(in srgb, #2A1109 10%, transparent); }
/* Photo thumbnail: a gradient+initial BASE (.pl-fa-thumb-fb) with the photo as an overlay
   span (.pl-fa-thumb-img) on top. The photo is a background-image — no <img> — so a 404
   leaves the overlay transparent and the gradient+initial show through. A broken-image icon
   is structurally impossible, and a failed photo still looks intentional (like the avatar). */
.plhome .pl-fa-thumb { background: transparent; }
.plhome .pl-fa-thumb-fb { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 60%, #2A1109), var(--accent)); color: #FFF7EE; font: 700 18px/1 var(--serif); }
.plhome .pl-fa-thumb-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.plhome .pl-fa-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, #2A1109 12%, transparent); pointer-events: none; }
/* Text body — owns the row height (2–3 short lines). min-width:0 enables ellipsis. */
.plhome .pl-fa-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.plhome .pl-fa-line1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.plhome .pl-fa-name { font: 600 13.5px/1.2 var(--sans); color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; flex: none; }
.plhome .pl-fa-when { font: 500 11px/1.2 var(--sans); color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Line 2 = the dish (serif — Noodl's signature) + an optional "+N more" group chip. */
.plhome .pl-fa-line2 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.plhome .pl-fa-dish-t { font: 500 14.5px/1.25 var(--serif); color: var(--fg1); letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }   /* 2-line clamp — a long dish name must never collapse to one word + "…" */
.plhome .pl-fa-dish-photo { color: var(--fg2); font-style: italic; }
.plhome .pl-fa-more { flex: none; font: 600 10.5px/1 var(--sans); color: var(--accent); background: var(--tint); border-radius: 999px; padding: 3px 7px; white-space: nowrap; }
/* Line 3 = restaurant, quiet. Only renders when present. */
.plhome .pl-fa-place { display: flex; align-items: center; gap: 4px; font: 500 11px/1.2 var(--sans); color: var(--fg3); min-width: 0; margin-top: 1px; }
.plhome .pl-fa-place svg { flex: none; }
.plhome .pl-fa-place span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* match ring — conic terracotta sweep around a serif numeral (Beli-style score badge), kept */
/* .pl-fa-ring — DE-SCOPED to global (2026-08-13); the rules now live beside their
   own warming twin, .cm-ring-warm. See the note there. */
/* Taste-matched picks (reuse the .pl-fa row): the "loved by N like you" eyebrow + the sparkle tile. */
.plhome .pl-pick-why { font: 600 11px/1.3 var(--sans); color: var(--accent); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plhome .pl-pick-ic svg { width: 18px; height: 18px; }

.plhome .pl-finvite-wrap { display: flex; flex-direction: column; gap: 10px; }
.plhome .pl-finvite-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; cursor: pointer; border: none; border-radius: var(--r-lg); padding: 13px 16px; background: var(--accent); color: var(--lp-cream, #FFF7EE); font: 700 14px/1 var(--sans); box-shadow: var(--shadow-sm); transition: filter .18s, transform .18s var(--ease-out); }
.plhome .pl-finvite-share:hover { filter: brightness(1.06); transform: translateY(-1px); }
.plhome .pl-finvite-share:active { transform: translateY(0); }
.plhome .pl-finvite { display: flex; align-items: center; gap: 13px; text-decoration: none; background: var(--surface); border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--r-lg); padding: 15px 17px; box-shadow: var(--shadow-sm); transition: background .2s; }
.plhome .pl-finvite:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.plhome .pl-finvite-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--tint); }
/* stacked-avatars motif — the universal "friends" cue (Mobbin refs: Vinted, Stake) */
.plhome .pl-finvite-avs { flex: none; display: flex; align-items: center; }
.plhome .pl-finvite-avs i { width: 32px; height: 32px; border-radius: 999px; border: 2px solid var(--surface); margin-left: -11px; box-shadow: 0 1px 4px -2px color-mix(in srgb, var(--accent) 32%, transparent); }
.plhome .pl-finvite-avs i:first-child { margin-left: 0; }
.plhome .pl-finvite-avs i:nth-child(1) { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 28%, #F0DCCB), color-mix(in srgb, var(--accent) 52%, #E8C9B5)); }
.plhome .pl-finvite-avs i:nth-child(2) { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 52%, #D9A582), color-mix(in srgb, var(--accent) 78%, #C98B6B)); }
.plhome .pl-finvite-avs i:nth-child(3) { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 80%, #2A1109), var(--accent)); }
.plhome .pl-finvite-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plhome .pl-finvite-t { font: 700 15px/1.1 var(--sans); color: var(--fg1); }
.plhome .pl-finvite-s { font: 500 12.5px/1.3 var(--sans); color: var(--fg3); margin-top: 2px; }
/* respect reduced-motion: no transform-based motion on the social cards/buttons */
@media (prefers-reduced-motion: reduce) {
  .plhome .pl-fa, .plhome .pl-fa:hover, .plhome .pl-fa:active,
  .plhome .pl-finvite-share:hover, .plhome .pl-finvite-share:active { transform: none; }
}

/* ── Community — the social home (/community). Reuses .pl-fa-ring; new .cm-* below. ── */
.cmty { max-width: 640px; margin: 0 auto; }
/* Clear the floating dock + its protruding "Noodler" orb (≈90px footprint at bottom:16px) — 96px left
   the last content (Share link / stream) colliding with the nav. +safe-area for notched phones. */
.cm-body { padding: 4px 0 calc(120px + env(safe-area-inset-bottom, 0px)); }
.cm-av { flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 78%, #2A1109), var(--accent)); color: #FFF7EE; font: 700 16px/1 var(--serif); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--accent) 16%, transparent); }
/* (2026-08-09) .cm-standing — the identity header (your avatar, name, tier chip,
   @handle · N dishes · N cuisines) — is deleted with its markup. Founder: "I don't
   think we need this section at the top. We just need a plus button." Identity
   lives in the Passport; what Community keeps is the two doors below. .cm-tier and
   .cm-av-lg died with it — nothing else ever wore them. */
.cm-doors { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 2px; }
.cm-share { flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font-size: 19px; display: grid; place-items: center; cursor: pointer; }
.cm-share:hover { background: var(--tint); }
/* The + posting door — the one filled button in the header row (it's THE action). */
.cm-compose { background: var(--accent); border-color: var(--accent); color: #fff; }
.cm-compose:hover { background: var(--accent-deep, #A8431F); }

/* ── Roundup card — a numbered chart of the poster's rated dishes ──
   v977: the boxed rounded list is gone (founder: "rather than these curved
   rectangles"). It now rides the stream's .cms-card anatomy — full-bleed 4:5 mosaic
   plate, then the ranking as words on hairlines, same as the dish receipt. */
.cm-ru-title { font: 400 20px/1.2 var(--serif, Georgia, serif); color: var(--text, #2E2A26); margin: 10px 2px 8px; }
.cm-ru-list { border: 0; border-radius: 0; overflow: hidden; background: transparent; padding: 0 16px; }
.cm-ru-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent); text-decoration: none; color: inherit; }
.cm-ru-row:first-child { border-top: 0; }
.cm-ru-row:hover { background: var(--tint); }

/* the roundup's plate — a mosaic of the poster's OWN photos of the ranked dishes,
   at the one 4:5 aspect every post shares. Layouts by count: 1 fills, 2 split, 3 is
   big-left + two stacked, 4 is a quarter grid. */
.cms-ru-plate {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  display: grid; gap: 2px; background: #1A0F09;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
.cms-ru-plate.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.cms-ru-plate.n2 { grid-template-rows: 1fr; }
.cms-ru-plate.n3 > .cms-ru-tile:first-child { grid-row: span 2; }
.cms-ru-plate.no-img {
  grid-template-columns: 1fr; grid-template-rows: 1fr;
  background: linear-gradient(140deg, var(--accent-deep, #A8431F) 0%, var(--accent) 52%, var(--ochre, #C98A3B) 125%);
}
.cms-ru-tile { background-size: cover; background-position: center; }
/* deeper foot than a venue plate: a mosaic's bottom-right tile can be a bright dish,
   and the title has to read on it every time */
.cms-ru-plate .cms-mast-scrim {
  z-index: 1;
  background: linear-gradient(182deg, rgba(35, 21, 13, 0.08) 42%, rgba(35, 21, 13, 0.88) 100%);
}
/* Absolute, NOT a grid item: as a grid item spanning 1/1/-1/-1 it pushed the
   auto-placed tiles into an implicit zero-height row, so every mosaic collapsed
   to nothing and the plate rendered as a black rectangle. */
.cms-ru-plate-tx {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
}
.cms-ru-plate.no-img .cms-mast-scrim {
  background:
    radial-gradient(130% 170% at 90% -35%, rgba(255, 247, 238, 0.20), transparent 55%),
    linear-gradient(182deg, transparent 40%, rgba(35, 21, 13, 0.34) 100%);
}
.cms-ru-plate-k {
  font: 700 10px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--on-accent, #FFF7EE) 88%, transparent);
}
.cm-ru-rank { flex: none; width: 22px; text-align: center; font: 600 15px/1 var(--serif, Georgia, serif); color: var(--accent); }
.cm-ru-th { flex: none; width: 40px; height: 40px; border-radius: 11px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(44,32,23,.08); }
.cm-ru-th-none { display: grid; place-items: center; background: var(--tint); color: var(--accent); font-size: 16px; }
.cm-ru-tx { flex: 1; min-width: 0; }
.cm-ru-dish { display: block; font: 600 14.5px/1.25 var(--sans); color: var(--text, #2E2A26); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-ru-place { display: block; font: 500 11.5px/1.3 var(--sans); color: var(--text-3, #8A7F75); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-ru-stars { flex: none; font: 700 12.5px/1 var(--sans); color: var(--accent); }

/* ── Roundup composer (rides the mfcs-sheet shell) ── */
.cm-ruc-title, .cm-ruc-q { width: 100%; box-sizing: border-box; font: 500 14px/1.3 var(--sans); color: var(--text, #2E2A26); background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; margin: 0 0 9px; }
.cm-ruc-title { font-weight: 600; }
.cm-ruc-list { max-height: 42vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; }
.cm-ruc-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 12px; cursor: pointer; }
.cm-ruc-row:first-child { border-top: 0; }
.cm-ruc-row[hidden] { display: none; }
.cm-ruc-row.on { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cm-ruc-badge { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--sans); }
.cm-ruc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-ruc-auds { display: flex; gap: 6px; }
.cm-ruc-aud { font: 600 12.5px/1 var(--sans); color: var(--text-2, #5C5249); background: none; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.cm-ruc-aud.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cm-ruc-share { font: 700 13.5px/1 var(--sans); color: #fff; background: var(--accent); border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer; }
.cm-ruc-share:disabled { opacity: .45; cursor: default; }
.cm-sec { padding: 16px 20px 4px; }
.cm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cm-kick { display: block; font: 700 11px/1 var(--sans); letter-spacing: .04em; color: color-mix(in srgb, var(--accent) 70%, var(--fg3)); }
.cm-title { font: 400 22px/1.1 var(--serif); color: var(--fg1); margin: 4px 0 0; }
.cm-title em { color: var(--accent); font-style: italic; }
.cm-reqs { display: flex; flex-direction: column; gap: 9px; }
.cm-req { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: var(--r-lg); }
.cm-req-tx { flex: 1; min-width: 0; }
.cm-req-name { display: block; font: 600 14px/1.15 var(--sans); color: var(--fg1); }
.cm-req-sub { display: block; font: 500 12px/1.2 var(--sans); color: var(--fg3); margin-top: 1px; }
.cm-req-acts { display: flex; align-items: center; gap: 7px; flex: none; }
.cm-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 0 16px; scrollbar-width: none; }
.cm-rail::-webkit-scrollbar { display: none; }
.cm-twin { flex: none; width: 150px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 16px 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); text-decoration: none; }
.cm-twin-ring { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; background: conic-gradient(var(--accent) calc(var(--m,0) * 1%), color-mix(in srgb, var(--accent) 13%, var(--line)) 0); }
.cm-av-twin { position: relative; width: 54px; height: 54px; font-size: 21px; box-shadow: 0 0 0 3px var(--surface); }
.cm-twin-name { font: 600 13.5px/1.15 var(--sans); color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cm-twin-match { font: 700 12px/1 var(--sans); color: var(--accent); }
.cm-twin-match.cm-twin-warm { color: var(--fg3); font-weight: 600; }
.cm-twin-why { font: 500 11px/1.3 var(--sans); color: var(--fg3); min-height: 14px; }
.cm-add { margin-top: 6px; width: 100%; }
.cm-circle { display: flex; flex-direction: column; gap: 9px; }
.cm-friend { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); text-decoration: none; }
.cm-friend-tx { flex: 1; min-width: 0; }
.cm-friend-name { display: flex; align-items: center; gap: 7px; font: 600 14px/1.15 var(--sans); color: var(--fg1); }
.cm-friend-sub { display: block; font: 500 12px/1.2 var(--sans); color: var(--fg3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-twinbadge { font: 700 9.5px/1 var(--sans); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 3px 7px; border-radius: 999px; }
.cm-feed { display: flex; flex-direction: column; gap: 14px; }
.cm-post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 13px 14px 14px; }
.cm-post-top { display: flex; align-items: center; gap: 10px; }
.cm-post-id { flex: 1; min-width: 0; }
.cm-post-name { display: block; font: 600 14px/1.15 var(--sans); color: var(--fg1); }
.cm-post-when { display: block; font: 500 11.5px/1.2 var(--sans); color: var(--fg3); margin-top: 1px; }
.cm-post-photo { position: relative; display: block; margin: 12px 0 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5; max-height: 460px; background: var(--tint); }
.cm-post-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-post-loc { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px/1 var(--sans); color: #FBF6EF; background: rgba(43,28,19,.6); padding: 5px 9px; border-radius: 999px; }
.cm-post-dish { font: 400 18px/1.3 var(--serif); color: var(--fg1); margin: 11px 0 0; padding-left: 14px; position: relative; }
.cm-post-q { position: absolute; left: 0; top: -6px; font: 400 26px/1 var(--serif); color: color-mix(in srgb, var(--accent) 34%, transparent); }
.cm-post-place { display: flex; align-items: center; gap: 5px; font: 500 12px/1.2 var(--sans); color: var(--fg3); margin-top: 9px; }
.cm-post-acts { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 12.5px/1 var(--sans); border-radius: 999px; padding: 9px 13px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--fg1); text-decoration: none; }
.cm-btn-primary { background: var(--accent); color: var(--lp-cream, #FFF7EE); border-color: transparent; }
.cm-btn-ghost { width: 34px; height: 34px; padding: 0; color: var(--fg3); }
.cm-btn-soft { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: color-mix(in srgb, var(--accent) 82%, #2A1109); border-color: color-mix(in srgb, var(--accent) 18%, var(--line)); }
.cm-btn.cm-done { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); border-color: transparent; }
.cm-loadmore { display: flex; width: fit-content; margin: 14px auto 2px; padding: 10px 22px; }

/* ── Community — friend ORDER card (one box per visit; expands to per-dish ratings) ── */
.cm-order { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.cm-order.open { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); box-shadow: 0 6px 22px -10px color-mix(in srgb, var(--accent) 30%, transparent); }
.cm-order-head { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 13px 14px; cursor: pointer; font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
.cm-order-top { display: flex; align-items: center; gap: 10px; }
.cm-order-id { flex: 1; min-width: 0; }
.cm-order-name { display: block; font: 600 14px/1.15 var(--sans); color: var(--fg1); }
.cm-order-verb { font-weight: 500; color: var(--fg3); }
.cm-order-rest { display: block; font: 700 13px/1.2 var(--sans); color: var(--accent); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-order-meta { display: block; font: 600 11.5px/1.2 var(--sans); color: var(--fg3); margin: 9px 0 0; }
.cm-order-summary { display: flex; align-items: center; gap: 11px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.cm-order-thumbs { display: inline-flex; flex: none; }
.cm-order-thumb { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; margin-left: -10px; box-shadow: 0 0 0 2px var(--surface); background: var(--tint, color-mix(in srgb, var(--accent) 6%, var(--surface))); }
.cm-order-thumb:first-child { margin-left: 0; }
.cm-order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-order-sum-tx { flex: 1; min-width: 0; }
.cm-order-count { display: block; font: 700 13px/1.2 var(--sans); color: var(--fg1); }
.cm-order-preview { display: block; font: 500 12px/1.3 var(--sans); color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cm-order-chev { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--accent); font-size: 16px; transition: transform .28s cubic-bezier(.4,0,.2,1); }
.cm-order.open .cm-order-chev { transform: rotate(180deg); }
.cm-order-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.cm-order.open .cm-order-detail { grid-template-rows: 1fr; }
.cm-order-detail-in { min-height: 0; overflow: hidden; padding: 0 14px; }
.cm-order.open .cm-order-detail-in { padding-bottom: 14px; }
.cm-order-detail-kick { display: block; font: 700 10px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--fg3); padding: 4px 0 10px; border-top: 1px solid var(--line); margin-top: -1px; }
.cm-dish-list { display: flex; flex-direction: column; }
.cm-dish-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.cm-dish-row:first-child { border-top: 0; }
.cm-dish-thumb { flex: none; width: 44px; height: 44px; border-radius: 11px; overflow: hidden; background: var(--tint, color-mix(in srgb, var(--accent) 6%, var(--surface))); }
.cm-dish-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-dish-thumb-empty { display: grid; place-items: center; color: color-mix(in srgb, var(--accent) 45%, var(--fg3)); font-size: 17px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.cm-dish-name { flex: 1; min-width: 0; font: 600 13.5px/1.25 var(--sans); color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-dish-tag { flex: none; font: 700 10.5px/1 var(--sans); padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--fg3) 12%, var(--surface)); color: var(--fg3); }
.cm-dish-tag.is-loved { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: color-mix(in srgb, var(--accent) 84%, #2A1109); }
.cm-dish-rate { flex: none; min-width: 30px; text-align: right; font: 600 14px/1 var(--serif); color: var(--accent); letter-spacing: -.01em; }
.cm-dish-row:has(.cm-dish-tag:not(.is-loved)) .cm-dish-rate { color: color-mix(in srgb, var(--accent) 58%, var(--fg3)); }
/* (.cm-order-acts was reaped 2026-07-09 — zero references in frontend/.) */
@media (prefers-reduced-motion: reduce) { .cm-order-detail, .cm-order-chev, .cm-order { transition: none; } }
/* leaderboard — viewer + friends ranked by Cred */
.cm-lb { display: flex; flex-direction: column; gap: 7px; }
.cm-lbrow { display: flex; align-items: center; gap: 11px; padding: 9px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.cm-lbrow-me { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.cm-lb-rank { flex: none; width: 22px; text-align: center; font: 700 14px/1 var(--serif); color: var(--fg3); }
.cm-lb-rank.cm-lb-top { color: var(--accent); }
.cm-av-sm { width: 34px; height: 34px; font-size: 14px; box-shadow: none; }
.cm-lb-tx { flex: 1; min-width: 0; }
.cm-lb-name { display: flex; align-items: center; gap: 7px; font: 600 13.5px/1.15 var(--sans); color: var(--fg1); }
.cm-lb-you { flex: none; font: 700 9.5px/1 var(--sans); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 3px 7px; border-radius: 999px; }
.cm-lb-sub { display: block; font: 500 11.5px/1.2 var(--sans); color: var(--fg3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-lb-cred { flex: none; font: 700 15px/1 var(--serif); color: var(--accent); }
.cm-lb-cred small { font: 600 10px/1 var(--sans); color: var(--fg3); margin-left: 2px; }
/* friend drill-down on /u/{handle} — recent activity (reuses .cm-feed/.cm-post) + loved venues */
.pub-section { margin-top: 26px; }
.pub-dh { font: 400 20px/1.1 var(--serif); color: var(--fg1); margin: 0 0 12px; }
.pub-connected { opacity: .85; }
.pub-loves { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.pub-loves::-webkit-scrollbar { display: none; height: 0; }
.pub-venue { flex: none; width: 150px; scroll-snap-align: start; text-decoration: none; }
.pub-venue-img { display: block; width: 100%; height: 96px; border-radius: var(--r-md); overflow: hidden; background: var(--tint); }
.pub-venue-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-venue-ph { display: grid; place-items: center; width: 100%; height: 100%; color: color-mix(in srgb, var(--accent) 50%, var(--fg3)); font-size: 24px; }
.pub-venue-n { display: block; font: 600 13.5px/1.2 var(--sans); color: var(--fg1); margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-venue-s { display: block; font: 500 11.5px/1.2 var(--sans); color: var(--fg3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── The taste-match badge — BOTH states, global ──────────────────────────────
   NoodlRing.badge() is documented as the ONE renderer for this badge and is called
   from home, community AND the Passport's Friends tab. Its scored state
   (.pl-fa-ring) was styled only under `.plhome`, so everywhere else the markup
   landed naked: no conic ring, no circle — just the bare number, inheriting the
   default LINK BLUE from the <a class="cm-friend"> row wrapping it. Founder,
   on a 63 in the Friends list: "look at how bad this looks." The warming state
   below was always global, which is exactly why the pending rows looked right and
   the scored one didn't — the same list rendered one styled badge and one
   unstyled. A shared renderer needs shared CSS; scoping one half to one page is
   how they drift. Both states now sit here, and match at 36px so the column
   doesn't jitter between a scored row and a warming one. */
.pl-fa-ring { flex: none; position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--m,0) * 1%), color-mix(in srgb, var(--accent) 14%, transparent) 0); box-shadow: 0 1px 5px -2px color-mix(in srgb, var(--accent) 34%, transparent); }
.pl-fa-ring::before { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--surface); }
.pl-fa-ring-n { position: relative; font: 600 12.5px/1 var(--serif); color: var(--accent); letter-spacing: -.01em; }
.cm-ring-warm { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--accent) 32%, var(--line)); color: color-mix(in srgb, var(--accent) 55%, var(--fg3)); font-size: 15px; }
.cm-empty { text-align: center; padding: 24px 22px; }
.cm-empty i { font-size: 30px; color: color-mix(in srgb, var(--accent) 50%, var(--fg3)); }
.cm-empty p { font: 500 13.5px/1.5 var(--sans); color: var(--fg2); margin: 9px auto 0; max-width: 320px; }
.cm-empty-share { margin-top: 14px; background: #fff; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow: 0 3px 12px rgba(43, 17, 9, .10); }
.cm-spin { animation: cm-spin 0.7s linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cm-spin { animation: none; } }
/* Loyalty entry on the Passport "Taste DNA" tab (folded out of the dock) */
.d2-loylink { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; margin: 16px 0 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--fg1); font: 700 14px/1 var(--sans); box-shadow: var(--shadow-sm); }
.d2-loylink > span { display: flex; align-items: center; gap: 9px; }
.d2-loylink > span > i { color: var(--accent); font-size: 18px; }
.d2-loylink > i { color: var(--fg3); font-size: 16px; }

/* (3) taste-identity hook — "% we know you" as something you build */
.plhome .pl-th { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px; box-shadow: var(--shadow-md); transition: transform .16s var(--ease-out), box-shadow .2s; }
.plhome .pl-th:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.plhome .pl-th-row { display: flex; align-items: center; gap: 16px; }
.plhome .pl-th-num { flex: none; font: 400 46px/0.9 var(--serif); color: var(--accent); letter-spacing: -.02em; }
.plhome .pl-th-num span { font-size: 20px; }
.plhome .pl-th-meta { flex: 1; min-width: 0; }
.plhome .pl-th-band { font: 700 13px/1.2 var(--sans); color: var(--fg1); margin-bottom: 7px; }
.plhome .pl-th-bar { height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--fg3) 20%, transparent); overflow: hidden; }
.plhome .pl-th-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #E0A24C)); transition: width .9s var(--ease-out); }
.plhome .pl-th-step { font: 500 12px/1.35 var(--sans); color: var(--fg3); margin-top: 8px; }
.plhome .pl-th-rank { display: flex; align-items: center; gap: 7px; font: 500 13px/1.3 var(--sans); color: var(--fg2); margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.plhome .pl-th-rank b { color: var(--fg1); font-weight: 700; }
.plhome .pl-th-cta { display: flex; align-items: center; gap: 6px; font: 700 13.5px/1 var(--sans); color: var(--accent); margin-top: 14px; }

/* (4) loyalty — demoted to a small bonus tile */
.plhome .pl-loybonus { display: flex; align-items: center; gap: 12px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 15px; box-shadow: var(--shadow-sm); transition: transform .16s var(--ease-out), box-shadow .2s; }
.plhome .pl-loybonus:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.plhome .pl-loybonus-dot { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent); }
.plhome .pl-loybonus-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plhome .pl-loybonus-t { font: 700 13.5px/1.2 var(--sans); color: var(--fg1); }
.plhome .pl-loybonus-pts { color: var(--accent-deep, var(--accent)); font-weight: 800; }
.plhome .pl-loybonus-s { font: 500 11.5px/1.2 var(--sans); color: var(--fg3); margin-top: 2px; display: flex; align-items: center; gap: 7px; }
/* "N gifts waiting" — patched in async when the diner has ≥1 claimable gift */
.plhome .pl-loybonus-gift { font: 800 10.5px/1 var(--sans); color: var(--accent); letter-spacing: .01em; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.plhome .pl-loybonus-gift[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .plhome .pl-gohero, .plhome .pl-2nd, .plhome .pl-fa, .plhome .pl-th, .plhome .pl-loybonus, .plhome .pl-th-bar i { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-optout, .ob-goal-row, .ob-cchip, .ob-spice-opt, .ob-occ,
  .ob-opt-radio::after, .ob-goal-check, .ob-goal-check svg, .ob-cchip-tick, .ob-occ-check { transition: none; }
}


/* ── Non-negotiables (dietary) screen — checkbox chips + green promise ──────── */
.diet-chip { flex-direction: row; align-items: center; }
.diet-chip .chip-tick {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 18px; border-radius: 50%; margin-right: 9px;
  border: 1.5px solid var(--lp-line-strong); background: transparent; color: transparent;
  font-size: 10px; font-weight: 800; transition: background .14s, border-color .14s, color .14s;
}
.diet-chip.on { background: var(--lp-tint); border-color: var(--lp-terra); color: var(--lp-terra-deep); }
.diet-chip.on .chip-tick { background: var(--lp-terra); border-color: var(--lp-terra); color: var(--lp-cream); }
.diet-promise {
  display: flex; align-items: center; gap: 11px; margin-top: 22px; padding: 14px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--lp-adventure) 12%, var(--lp-cream));
  border: 1px solid color-mix(in srgb, var(--lp-adventure) 26%, transparent);
}
.diet-promise-ic {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--lp-adventure) 18%, transparent); color: #4d7a59;
}
.diet-promise-ic svg { width: 16px; height: 16px; }
.diet-promise p { margin: 0; font-family: var(--lp-sans); font-size: 13.5px; line-height: 1.45; color: #3c5142; font-weight: 500; }
.diet-promise b { color: #3a6147; }

/* ── Taste game (redesign Screen 2) — "this or that" dish cards ─────────────── */
.tg-wrap { font-family: var(--lp-sans); color: var(--lp-espresso); display: flex; flex-direction: column; min-height: calc(100vh - 62px); min-height: calc(100dvh - 62px); max-width: 480px; margin: 0 auto; padding: 6px 22px 18px; }
.tg-top { display: flex; align-items: center; gap: 12px; padding: 6px 0 2px; }
.tg-back { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--lp-line-strong); background: var(--lp-sand); display: grid; place-items: center; cursor: pointer; color: var(--lp-espresso); }
.tg-back svg { width: 18px; height: 18px; }
.tg-pbar { flex: 1; height: 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--lp-espresso) 10%, var(--lp-cream)); overflow: hidden; }
.tg-pfill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--lp-terra), var(--lp-terra-deep)); transition: width 0.35s cubic-bezier(0.22,1,0.36,1); }
.tg-count { flex: none; font-size: 12px; font-weight: 700; color: var(--lp-fg2); }
.tg-q { font-family: var(--lp-serif); font-weight: 700; font-size: 27px; line-height: 1.16; color: var(--lp-fg); text-align: center; margin: 14px 0 10px; }
.tg-q em { font-style: normal; font-weight: 600; color: var(--lp-terra-deep); }
.tg-cards { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.tg-card { position: relative; flex: 1 1 0; min-height: 148px; max-height: 330px; border-radius: 22px; overflow: hidden; border: none; cursor: pointer; padding: 0; box-shadow: 0 18px 34px -22px rgba(42,32,24,0.6); transition: transform .16s, box-shadow .16s; }
.tg-card:active { transform: scale(0.99); }
.tg-photo { position: absolute; inset: 0; }
.tg-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,11,7,0.72) 2%, rgba(18,11,7,0.12) 42%, rgba(18,11,7,0.04) 70%); }
.tg-name { position: absolute; left: 18px; right: 18px; bottom: 16px; font-family: var(--lp-serif); font-weight: 400; font-size: 24px; line-height: 1.08; color: #fff; text-align: left; text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
.tg-credit { position: absolute; top: 12px; right: 12px; font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,0.82); background: rgba(0,0,0,0.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 4px 8px; border-radius: var(--r-pill); letter-spacing: 0.02em; }
.tg-card.sel { transform: translateY(-3px) scale(1.004); box-shadow: 0 0 0 3px var(--lp-terra), 0 26px 44px -22px rgba(194,80,47,0.7); }
.tg-or { align-self: center; z-index: 4; margin: -16px 0; width: 44px; height: 44px; border-radius: 50%; background: var(--lp-cream); color: var(--lp-terra-deep); font-family: var(--lp-serif); font-size: 16px; display: grid; place-items: center; box-shadow: 0 6px 16px -7px rgba(42,32,24,0.4), 0 0 0 1px var(--lp-line); }
.tg-cap { text-align: center; font-size: 13px; color: var(--lp-fg2); margin: 14px 0 0; }
.tg-cap b { color: var(--lp-terra-deep); }
/* "Either's fine" — a quiet no-preference escape under the duel. Deliberately
   understated so it never competes with the two cards, but always reachable. */
.tg-skip { display: block; margin: 12px auto 0; padding: 9px 16px; background: none; border: none;
  font-family: var(--lp-sans); font-size: 13px; font-weight: 600; color: var(--lp-fg2);
  letter-spacing: .01em; cursor: pointer; border-radius: 999px; transition: color .16s ease, background .16s ease; }
.tg-skip::after { content: ""; display: block; width: 0; height: 1px; margin: 3px auto 0; background: currentColor; opacity: .5; transition: width .18s ease; }
.tg-skip:hover { color: var(--lp-terra-deep); background: rgba(42,32,24,0.035); }
.tg-skip:hover::after { width: 22px; }
@media (prefers-reduced-motion: reduce) { .tg-skip, .tg-skip::after { transition: none; } }
/* Two quiet escapes stacked under the duel: "either" (no preference, neutral) and
   "neither" (dislikes BOTH — feeds disliked_dishes). Same understated format. */
.tg-escape { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px 0 0; }
.tg-escape .tg-skip { margin: 0; }
/* ── The Taste-Off (Phase 2C) — visual loved-dishes picker ─────────────────── */
.to-wrap { max-width: 480px; margin: 0 auto; padding: 8px 18px 28px; }
.to-head { text-align: center; margin: 6px 0 16px; }
.to-eyebrow { font-family: var(--lp-sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-terra-deep); margin: 0 0 6px; }
.to-q { font-family: var(--lp-serif); font-weight: 700; font-size: 27px; line-height: 1.16; color: var(--lp-fg); margin: 0 0 8px; }
.to-q em { font-style: normal; font-weight: 600; color: var(--lp-terra-deep); }
/* Passport quiz-hub prompts (qBlock) — same colour-not-italic emphasis as the
   onboarding game, so an emphasised word never shows as italic or a literal <em>. */
.pq-body h3 em { font-style: normal; font-weight: 600; color: var(--accent); }
.to-cap { font-size: 13px; color: var(--lp-fg2); margin: 0; }
.to-cap b { color: var(--lp-terra-deep); }
.to-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.to-card { position: relative; aspect-ratio: 1 / 1; border: none; border-radius: 18px; overflow: hidden; cursor: pointer; padding: 0; background: var(--lp-cream); box-shadow: 0 6px 18px -10px rgba(42,32,24,.45), 0 0 0 1px var(--lp-line); transition: transform .14s ease, box-shadow .16s ease; }
.to-card:active { transform: scale(.975); }
.to-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.to-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,14,10,.72), rgba(20,14,10,.10) 48%, rgba(20,14,10,0) 70%); }
.to-name { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; color: #fff; font-family: var(--lp-sans); font-weight: 600; font-size: 14px; line-height: 1.25; text-align: left; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.to-check { position: absolute; top: 9px; right: 9px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; background: var(--lp-terra-deep); opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease; box-shadow: 0 2px 8px -2px rgba(0,0,0,.5); }
.to-card.on { box-shadow: 0 8px 22px -8px rgba(194,80,47,.5), 0 0 0 3px var(--lp-terra-deep); }
.to-card.on .to-check { opacity: 1; transform: scale(1); }
.to-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.to-count { font-family: var(--lp-sans); font-weight: 700; font-size: 15px; color: var(--lp-fg2); min-width: 38px; text-align: center; }
.to-next { flex: 1; }
@media (prefers-reduced-motion: reduce) { .to-card, .to-check { transition: none; } }
/* Phase 2D — Passport "your taste is evolving / settled" confidence badge. */
.taste-evolving { display: inline-flex; align-items: center; gap: 7px; margin: 11px 0 0; padding: 5px 12px 5px 11px; border-radius: 999px; font-family: var(--lp-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.3; background: rgba(194,80,47,.10); color: var(--lp-terra-deep); }
.taste-evolving::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-terra-deep); }
.taste-evolving.is-set { background: rgba(92,140,104,.15); color: #3f6e54; }
.taste-evolving.is-set::before { background: #5C8C68; }
/* Server-driven loading + styled situational (scene) cards */
.tg-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--lp-fg2); gap: 16px; min-height: 320px; }
.tg-loading p { font-size: 15px; margin: 0; }
.tg-card.tg-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 26px 22px; text-align: center; color: #fff; }
.tg-scene-ic { font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.28)); }
.tg-scene-txt { font-family: var(--lp-sans); font-weight: 600; font-size: 16.5px; line-height: 1.34; max-width: 270px; text-shadow: 0 1px 12px rgba(0,0,0,0.24); }

/* ── Onboard Taste-Off ranking game (rk-*) — merged duel + favourites ──────── */
.bd-rank { min-height: 380px; display: flex; flex-direction: column; }
.rk-load, .rk-empty { display: flex; align-items: center; justify-content: center; min-height: 320px; text-align: center; color: var(--lp-fg2); font-family: var(--lp-sans); font-size: 14px; }
.rk-top { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 8px; }
.rk-count { font-family: var(--lp-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--lp-terra-deep); background: rgba(194,80,47,.10); padding: 6px 13px; border-radius: 999px; }
.rk-q { text-align: center; font-family: var(--lp-serif); font-weight: 400; font-size: 25px; line-height: 1.14; color: var(--lp-fg); margin: 4px 0 16px; }
.rk-q em { font-style: italic; color: var(--lp-terra-deep); }
.rk-cards { display: flex; align-items: stretch; gap: 12px; }
.rk-card { position: relative; flex: 1 1 0; aspect-ratio: 1/1; min-height: 150px; border: none; border-radius: 22px; overflow: hidden; cursor: pointer; padding: 0; box-shadow: 0 18px 34px -22px rgba(42,32,24,0.6); transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.rk-card:active { transform: scale(0.985); }
.rk-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.rk-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,11,7,0.66) 2%, rgba(18,11,7,0.10) 44%, rgba(18,11,7,0) 70%); }
.rk-name { position: absolute; left: 14px; right: 14px; bottom: 13px; font-family: var(--lp-sans); font-weight: 600; font-size: 15px; line-height: 1.2; color: #fff; text-align: left; text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
.rk-card.rk-win { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 0 3px var(--lp-terra), 0 26px 44px -20px rgba(194,80,47,0.7); }
.rk-card.rk-lost { opacity: .34; transform: scale(0.955); }
.rk-or { align-self: center; z-index: 4; margin: -14px 0; width: 42px; height: 42px; border-radius: 50%; background: var(--lp-cream); color: var(--lp-terra-deep); font-family: var(--lp-serif); font-size: 15px; display: grid; place-items: center; box-shadow: 0 6px 16px -7px rgba(42,32,24,0.4), 0 0 0 1px var(--lp-line); }
.rk-skip { display: block; margin: 14px auto 0; padding: 9px 16px; background: none; border: none; font-family: var(--lp-sans); font-size: 13px; font-weight: 600; color: var(--lp-fg2); cursor: pointer; border-radius: 999px; transition: color .16s ease, background .16s ease; }
.rk-skip:hover { color: var(--lp-terra-deep); background: rgba(42,32,24,0.035); }
.rk-enter .rk-card { animation: rkIn .34s cubic-bezier(.2,.7,.3,1) both; }
.rk-enter .rk-card:last-of-type { animation-delay: .05s; }
@keyframes rkIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.rk-live { margin-top: 18px; border-top: 1px solid var(--lp-line); padding-top: 13px; }
.rk-live-h { font-family: var(--lp-sans); font-weight: 700; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--lp-fg2); margin: 0 0 9px; }
.rk-live-row { display: flex; align-items: center; gap: 11px; padding: 4px 0; animation: rkRow .3s ease both; }
.rk-live-n { flex: none; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; font-family: var(--lp-sans); font-weight: 700; font-size: 11px; color: #fff; background: #b6a695; }
.rk-live-n.n1 { background: var(--lp-terra-deep); } .rk-live-n.n2 { background: #bba47f; } .rk-live-n.n3 { background: #cdb389; }
.rk-live-name { font-family: var(--lp-sans); font-weight: 500; font-size: 14.5px; color: var(--lp-fg); }
@keyframes rkRow { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.rk-reveal { text-align: center; animation: rkIn .42s ease both; padding: 4px 0 6px; }
.rk-reveal-h { font-family: var(--lp-sans); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-terra-deep); margin: 6px 0 20px; }
.rk-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.rk-pod { flex: 1 1 0; max-width: 116px; display: flex; flex-direction: column; align-items: center; }
.rk-pod-photo { width: 100%; aspect-ratio: 1/1; border-radius: 16px; background-size: cover; background-position: center; box-shadow: 0 14px 26px -16px rgba(42,32,24,.6); }
.rk-pod-name { font-family: var(--lp-sans); font-weight: 600; font-size: 12.5px; line-height: 1.22; color: var(--lp-fg); margin: 9px 0 7px; min-height: 31px; display: flex; align-items: center; }
.rk-pod-bar { width: 100%; display: grid; place-items: center; border-radius: 13px 13px 0 0; color: #fff; }
.rk-pod-rank { font-family: var(--lp-serif); font-weight: 700; font-size: 19px; padding: 3px 0; }
.rk-pod-1 .rk-pod-photo { box-shadow: 0 0 0 3px #e3b24c, 0 16px 30px -16px rgba(194,144,46,.7); }
.rk-pod-1 .rk-pod-bar { height: 58px; background: linear-gradient(180deg, #e7b850, #c5912d); }
.rk-pod-2 .rk-pod-bar { height: 42px; background: linear-gradient(180deg, #d0c4b3, #a89b88); }
.rk-pod-3 .rk-pod-bar { height: 31px; background: linear-gradient(180deg, #d6ac86, #b78760); }
.rk-list { margin: 20px auto 0; max-width: 270px; text-align: left; padding-left: 26px; color: var(--lp-fg); font-family: var(--lp-sans); font-weight: 500; font-size: 14.5px; line-height: 1.95; }
.rk-redo { margin: 20px auto 0; display: block; background: none; border: 1px solid var(--lp-line); color: var(--lp-fg2); font-family: var(--lp-sans); font-weight: 600; font-size: 13px; padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: border-color .16s, color .16s; }
.rk-redo:hover { border-color: var(--lp-terra); color: var(--lp-terra-deep); }
@media (prefers-reduced-motion: reduce) { .rk-enter .rk-card, .rk-live-row, .rk-reveal { animation: none; } .rk-card, .rk-skip, .rk-redo, .rk-bar > span { transition: none; } }
/* progress bar (variable question count — fills as dishes get placed) */
.rk-bar { width: 150px; height: 4px; border-radius: 999px; background: rgba(42,32,24,.10); overflow: hidden; }
.rk-bar > span { display: block; height: 100%; background: var(--lp-terra); border-radius: 999px; transition: width .35s ease; }
/* "Not your thing" — the dishes ranked below the top 5, dimmed */
.rk-rest { margin: 18px auto 0; max-width: 300px; border-top: 1px solid var(--lp-line); padding-top: 13px; }
.rk-rest-h { font-family: var(--lp-sans); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-fg2); margin: 0 0 7px; text-align: center; }
.rk-restlist { margin: 0 auto; max-width: 230px; text-align: left; padding-left: 24px; color: var(--lp-fg2); font-family: var(--lp-sans); font-weight: 500; font-size: 13.5px; line-height: 1.75; opacity: .72; }

/* ── Browse filter bar — dropdown pills + a sliding options panel ──────────── */
.rfbar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; -ms-overflow-style: none; scrollbar-width: none; }
.rfbar::-webkit-scrollbar { display: none; }
.rfpill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 9px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--lp-line-strong); background: var(--lp-sand); font-family: var(--lp-sans); font-weight: 600; font-size: 13.5px; color: var(--lp-espresso); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.rfpill:hover { border-color: var(--lp-terra); }
.rfpill.on { background: var(--lp-tint); border-color: var(--lp-terra); color: var(--lp-terra-deep); }
.rfpill .rf-ic { width: 15px; height: 15px; }
.rfchev { font-size: 10px; opacity: 0.55; }
.rfbadge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--lp-terra); color: var(--lp-cream); font-size: 10.5px; font-weight: 800; }
.rfbadge[hidden] { display: none; }
.rfclear { border-style: dashed; color: var(--lp-fg2); }

.rfpanel { max-height: 0; opacity: 0; overflow: hidden; background: var(--lp-sand); border: 1px solid transparent; border-radius: var(--r-xl); transition: max-height .26s cubic-bezier(.22,1,.36,1), opacity .2s, margin .26s; }
/* R23 — the cuisine filter couldn't scroll: the panel capped at 360px but its header
   (~110px) + the 320px scroll region = ~430px, so the list below the cut line was
   unreachable. Give the panel enough (viewport-relative) height to CONTAIN its scroll
   region, so .rfscroll owns the scroll and reaches every cuisine. */
.rfpanel.open { max-height: 72vh; opacity: 1; margin: 0 0 14px; border-color: var(--lp-line); box-shadow: 0 18px 40px -22px rgba(42, 32, 24, 0.4); }
.rfopts { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; max-height: 320px; overflow-y: auto; }
.rfopts-list { flex-direction: column; flex-wrap: nowrap; }
.rfopt { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 13px; border: 1.5px solid var(--lp-line); background: var(--lp-cream); font-family: var(--lp-sans); font-weight: 600; font-size: 13.5px; color: var(--lp-espresso); cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
.rfopt:hover { border-color: var(--lp-line-strong); }
.rfopt.on { background: var(--lp-tint); border-color: var(--lp-terra); color: var(--lp-terra-deep); }
.rfopt-glyph { font-size: 14px; }
.rfopt-sort { width: 100%; justify-content: space-between; }
.rfcheck { color: var(--lp-terra); font-weight: 800; }
.rfopts-price { gap: 10px; }
.rfopt-price { min-width: 56px; justify-content: center; font-family: var(--lp-serif); font-size: 17px; letter-spacing: 1px; }
/* Filter system v2 — base fallback (premium panel: title, search, popular group, counts) */
.rfpanel-inner { padding: 14px; }
.rfpanel-title { font-family: var(--lp-serif); font-size: 19px; color: var(--lp-espresso); margin: 0 0 11px; }
.rfsearch { position: relative; margin: 0 0 11px; }
.rfsearch-input { width: 100%; box-sizing: border-box; font-family: var(--lp-sans); font-size: 14.5px;
  color: var(--lp-espresso); background: var(--lp-cream); border: 1.5px solid var(--lp-line); border-radius: 999px; padding: 10px 14px 10px 36px; }
.rfsearch-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--lp-fg2); }
.rfscroll { max-height: calc(72vh - 120px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Nested .rfopts inside .rfscroll must NOT be its own scroll container (double-scroll
   trap — touch scrolls neither reliably). .rfscroll is the single scroll owner. */
.rfscroll .rfopts { max-height: none; overflow: visible; padding-top: 4px; }
.rfgroup-head { display: flex; align-items: baseline; gap: 8px; margin: 4px 2px 8px; }
.rfgroup-head:not(:first-child) { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lp-line); }
.rfgroup-lbl { font-family: var(--lp-sans); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-terra-deep); }
.rfgroup-n { font-size: 11px; font-weight: 700; color: var(--lp-fg2); }
.rfopt-n { font-weight: 700; font-size: 12px; color: var(--lp-fg2); font-variant-numeric: tabular-nums; }
.rfopt.on .rfopt-n { color: color-mix(in srgb, var(--lp-cream) 78%, var(--lp-terra)); }
.rfopt-lbl { line-height: 1; }
.rfopt-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--lp-terra); }
.rfopt.on .rfopt-dot { background: var(--lp-cream); }
.rfshowall { background: none; border: none; cursor: pointer; font-family: var(--lp-sans); font-weight: 700; font-size: 13px; color: var(--lp-terra); padding: 10px 0 2px; }
.rfopt-empty { font-family: var(--lp-sans); font-size: 14px; color: var(--lp-fg2); padding: 12px 2px; margin: 0; }
.rfopt-price { flex-direction: column; gap: 3px; min-width: 64px; }
.rfopt-price .rfopt-phint { font-family: var(--lp-sans); font-weight: 600; font-size: 11px; color: var(--lp-fg2); }

/* Count notes, custom chips, skip link */
.quiz-count-note { font-family: var(--lp-sans); color: var(--lp-fg3); }
.quiz-count-note b { color: var(--lp-terra); }
.quiz-custom-chip { background: var(--lp-tint); color: var(--lp-terra-deep); border-radius: var(--r-pill); }
.quiz-skip-link { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-terra); }

/* Buttons within the quiz (terracotta primary, sand back/ghost) */
.quiz-card .btn-primary, .dna-reveal-actions .btn-primary {
  background: var(--lp-terra); color: var(--lp-cream); border: none;
  border-radius: var(--r-pill); box-shadow: var(--lp-shadow-accent);
  font-family: var(--lp-sans);
}
.quiz-card .btn-primary::before, .dna-reveal-actions .btn-primary::before { display: none; }
.quiz-card .btn-primary:hover, .dna-reveal-actions .btn-primary:hover { background: var(--lp-terra-deep); filter: none; }
.quiz-card .btn-primary[disabled] {
  background: color-mix(in srgb, var(--lp-terra) 32%, var(--lp-cream));
  color: color-mix(in srgb, var(--lp-cream) 70%, var(--lp-terra)); box-shadow: none;
}
.quiz-card .btn-ghost, .dna-reveal-actions .btn-ghost {
  background: var(--lp-sand); color: var(--lp-espresso);
  border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-pill);
  box-shadow: none; font-family: var(--lp-sans);
}

/* Intro screen bullets */
.onb-intro .quiz-question { font-family: var(--lp-serif); }
.onb-intro-list .onb-intro-ic {
  background: var(--lp-tint-strong); color: var(--lp-terra);
}
.onb-intro-txt { font-family: var(--lp-sans); color: var(--lp-espresso); }
.onb-intro-browse { font-family: var(--lp-sans); color: var(--lp-fg2); }

/* ── Result screen (scoped to .ob-result) ─────────────────────────────── */
.ob-result { font-family: var(--lp-sans); }
.ob-result .dna-reveal-spark { color: var(--lp-terra); }
.ob-result .eyebrow-accent { color: var(--lp-terra); }
.ob-result .dna-reveal-title { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.ob-result .dna-reveal-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }
.ob-result .dna-card {
  background: var(--lp-sand); border: 1px solid var(--lp-line);
  border-radius: var(--r-xl); box-shadow: var(--lp-shadow-lg);
}
.ob-result .dna-avatar {
  background: var(--lp-terra); color: var(--lp-cream);
  font-family: var(--lp-serif); box-shadow: var(--lp-shadow-sm);
}
.ob-result .dna-greeting { font-family: var(--lp-sans); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--lp-fg3); }
.ob-result .dna-name { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
/* signature taste spectrum on the result card */
.dna-fp-label { font-family: var(--lp-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-fg3); margin: 22px 0 9px; }
/* Taste fingerprint — a mini column chart; each bar's height is the diner's own
   value on that axis (set inline via --v), so the strip actually means something. */
.dna-spectrum-bar { display: flex; align-items: flex-end; gap: 8px; height: 82px; margin: 0 0 10px; padding: 0 2px; }
.dna-spectrum-bar span { flex: 1; height: var(--v, 50%); min-height: 9px; border-radius: 6px 6px 3px 3px; background: linear-gradient(to top, color-mix(in srgb, var(--c) 70%, var(--lp-cream)), var(--c)); box-shadow: 0 7px 15px -10px var(--c); }
.dna-spectrum-axes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 4px; }
.dna-spectrum-axes span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lp-sans); font-weight: 600; font-size: 11px; color: var(--lp-fg2); }
.dna-spectrum-axes i { width: 8px; height: 8px; border-radius: var(--r-pill); display: block; }
.ob-result .dna-tag-label { font-family: var(--lp-sans); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lp-fg3); }
.ob-result .dna-tag-value { font-family: var(--lp-serif); font-weight: 400; font-size: 19px; color: var(--lp-espresso); }
.ob-result .dna-tag-row { border-bottom: 1px solid var(--lp-line); }

/* ── Taste-Type reveal — cinematic, persona-coloured (Ember) ─────────────────
   Full-bleed wash set per persona via --tc1/--tc2; frosted cards over it. */
.ttype { position:relative; min-height:100vh; min-height:100dvh; color:#fff; overflow:hidden; font-family:var(--lp-sans); }
.ttype-bg { position:absolute; inset:0; background:
  radial-gradient(96% 54% at 50% 4%, rgba(255,255,255,0.18), transparent 52%),
  radial-gradient(82% 60% at 82% 103%, var(--tc2), transparent 60%),
  linear-gradient(165deg, var(--tc1) 0%, var(--tc2) 100%); }
.ttype-grain { position:absolute; inset:0; opacity:0.08; mix-blend-mode:overlay; pointer-events:none; background-size:140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ttype-spark { position:absolute; border-radius:50%; pointer-events:none; opacity:0.85; }
.ttype-scroll { position:relative; z-index:2; max-width:440px; margin:0 auto; min-height:100vh; min-height:100dvh; padding:54px 24px 30px; display:flex; flex-direction:column; }
.ttype-eyebrow { text-align:center; font-weight:800; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.72); margin:0; }
.ttype-emoji { text-align:center; font-size:42px; margin:12px 0 0; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.3)); }
.ttype-title { font-family:var(--lp-serif); font-weight:400; font-size:42px; line-height:1.02; text-align:center; margin:6px 0 0; text-shadow:0 4px 24px rgba(0,0,0,0.28); }
.ttype-line { text-align:center; font-size:15px; line-height:1.5; color:rgba(255,255,255,0.9); margin:13px auto 0; max-width:310px; font-weight:500; }
.ttype-dining { display:flex; width:max-content; max-width:88%; align-items:center; gap:7px; margin:13px auto 0; padding:6px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.24); color:#fff; font-family:var(--lp-sans); font-weight:600; font-size:13px; letter-spacing:0.01em; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.ttype-dining-ic { font-size:9px; opacity:0.75; }
.ttype-glass { background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); border-radius:18px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.ttype-card { margin-top:18px; padding:15px 16px; }
.ttype-ch { font-weight:800; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.72); margin:0 0 11px; }
.ttype-do { display:flex; align-items:flex-start; gap:11px; margin-bottom:10px; font-size:14px; line-height:1.4; color:rgba(255,255,255,0.95); }
.ttype-do:last-child { margin-bottom:0; }
.ttype-do-ic { flex:none; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.16); display:grid; place-items:center; font-size:11px; margin-top:1px; }
.ttype-trait { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.ttype-trait:last-child { margin-bottom:0; }
.ttype-tn { width:86px; flex:none; font-size:13px; font-weight:600; display:flex; align-items:center; }
.ttype-dot { width:9px; height:9px; border-radius:50%; margin-right:9px; flex:none; box-shadow:0 0 0 3px rgba(255,255,255,0.10); }
.ttype-track { flex:1; height:7px; border-radius:99px; background:rgba(255,255,255,0.16); overflow:hidden; }
.ttype-fill { height:100%; border-radius:99px; }
.ttype-tv { width:84px; flex:none; text-align:right; font-size:11.5px; font-weight:700; color:rgba(255,255,255,0.85); }
.ttype-breakdown { display:block; width:100%; text-align:center; margin:16px 0 0; padding:6px; background:none; border:none; font-family:var(--lp-sans); font-size:13.5px; font-weight:700; color:#fff; opacity:0.92; cursor:pointer; }
.ttype-full { margin-top:12px; padding:4px 16px; }
.ttype-full[hidden] { display:none; }
.ttf-row { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.12); font-size:13.5px; }
.ttf-row:last-child { border-bottom:none; }
.ttf-row span { color:rgba(255,255,255,0.66); flex:none; }
.ttf-row b { font-weight:600; text-align:right; }
.ttype-actions { margin-top:auto; padding-top:20px; display:flex; flex-direction:column; gap:11px; }
.ttype .btn { width:100%; border-radius:16px; font-weight:700; font-size:15.5px; padding:16px; display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; transition:transform .12s; }
.ttype .btn:active { transform:scale(0.98); }
.ttype-ghost { background:transparent; color:#fff; border:1.6px solid rgba(255,255,255,0.55); }
.ttype-fill { background:var(--lp-terra); color:#fff; border:none; text-decoration:none; box-shadow:0 16px 30px -12px rgba(0,0,0,0.5); }
.ttype-fill:hover { background:var(--lp-terra-deep); }
.ttype-foot { text-align:center; font-size:11.5px; color:rgba(255,255,255,0.62); margin:14px 0 0; line-height:1.5; }

/* ════════════════════════════════════════════════════════════════════
   PASSPORT RESKIN — scoped to .passport (+ the branded .ob-nav header)
   Matches design-reference "Palate Passport.html". Restyles the existing
   pp-*, taste-*, loy-*, collection-*, fp-*, friend-* components in place — no markup
   or data-binding changes beyond the branded nav. Spectrum hues used only on the
   taste axes (the taste reading); terracotta is the lone accent elsewhere.
   ════════════════════════════════════════════════════════════════════ */
.lp-signout { color: var(--lp-fg3); font-family: var(--lp-sans); }
.lp-signout:hover { color: var(--lp-terra); }

.passport { font-family: var(--lp-sans); color: var(--lp-espresso); }
.passport .eyebrow, .passport .pp-section-label { font-family: var(--lp-sans); color: var(--lp-fg3); }
.passport .eyebrow-accent { color: var(--lp-terra); }

/* Identity header */
.pp-hero .eyebrow-accent { color: var(--lp-terra); }
.pp-name { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); letter-spacing: -0.02em; }
.pp-meta { font-family: var(--lp-sans); color: var(--lp-fg2); }

/* Tab bar */
.pp-tabs { border-bottom: 1px solid var(--lp-line); }
.pp-tab { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-fg3); border-bottom: 2px solid transparent; }
.pp-tab:hover { color: var(--lp-espresso); }
.pp-tab.active { color: var(--lp-espresso); border-bottom-color: var(--lp-terra); }
.pp-tab-badge { background: var(--lp-terra); color: var(--lp-cream); }

/* Taste Points card — terracotta gradient hero */
.passport .pp-loyalty {
  background: linear-gradient(135deg, var(--lp-terra) 0%, var(--lp-terra-deep) 100%);
  color: var(--lp-cream); border: none; border-radius: var(--r-xl); box-shadow: var(--lp-shadow-accent);
}
.pp-loy-eyebrow { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--t-text-soft, color-mix(in srgb, var(--lp-cream) 82%, var(--lp-terra))); }
.pp-loy-tier { font-family: var(--lp-serif); font-weight: 400; color: var(--t-text, var(--lp-cream)); }
.pp-loy-score-num { font-family: var(--lp-serif); font-weight: 400; color: var(--t-text, var(--lp-cream)); }
.pp-loy-score-lbl { font-family: var(--lp-sans); font-weight: 700; letter-spacing: 0.14em; color: var(--t-text-soft, color-mix(in srgb, var(--lp-cream) 78%, var(--lp-terra))); }
.pp-loy-tagline { font-family: var(--lp-sans); color: var(--t-text-soft, color-mix(in srgb, var(--lp-cream) 88%, var(--lp-terra))); }
.pp-loy-bar { background: rgba(255,255,255,0.25); }
.pp-loy-fill { background: var(--t-gold, var(--lp-cream)); }
.pp-loy-next { font-family: var(--lp-sans); color: var(--t-text-soft, color-mix(in srgb, var(--lp-cream) 90%, var(--lp-terra))); }
.pp-loy-next strong { color: var(--t-text, var(--lp-cream)); }
.pp-loy-glow { background: radial-gradient(80% 60% at 85% 10%, rgba(255,255,255,0.16), transparent 60%); }

/* Generic cards / sections inside passport */
.passport .pp-next, .passport .taste-card, .passport .pp-map-stats,
.passport .loy-ladder, .passport .verdict-card, .passport .collection-card,
.passport .friend-row, .passport .log-list, .passport .highlight-rows {
  background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: var(--r-lg); box-shadow: var(--lp-shadow-sm);
}

/* Do this next */
.pp-next-eyebrow { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--lp-terra); }
.pp-next-title { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.pp-next-why { font-family: var(--lp-sans); color: var(--lp-fg2); }

/* Taste DNA reading + axes (spectrum hues, taste-only) */
.taste-card-head .eyebrow-accent { color: var(--lp-terra); }
.taste-headline { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.taste-sub { font-family: var(--lp-sans); color: var(--lp-fg3); }
.taste-read { font-family: var(--lp-sans); color: var(--lp-espresso); }
.taste-dim-label { font-family: var(--lp-sans); font-weight: 700; color: var(--lp-espresso); }
.taste-dim-score { font-family: var(--lp-serif); color: var(--lp-terra); }
.taste-dim-of { font-family: var(--lp-sans); color: var(--lp-fg3); }
.taste-track { background: color-mix(in srgb, var(--lp-espresso) 9%, var(--lp-cream)); border-radius: var(--r-pill); }
.taste-track-fill, .taste-dot { background: var(--lp-terra); }
.taste-dims .taste-dim:nth-child(1) .taste-track-fill, .taste-dims .taste-dim:nth-child(1) .taste-dot { background: var(--taste-adventure); }
.taste-dims .taste-dim:nth-child(2) .taste-track-fill, .taste-dims .taste-dim:nth-child(2) .taste-dot { background: var(--taste-spice); }
.taste-dims .taste-dim:nth-child(3) .taste-track-fill, .taste-dims .taste-dim:nth-child(3) .taste-dot { background: var(--taste-richness); }
.taste-dims .taste-dim:nth-child(4) .taste-track-fill, .taste-dims .taste-dim:nth-child(4) .taste-dot { background: var(--taste-adventure); }
.taste-dims .taste-dim:nth-child(5) .taste-track-fill, .taste-dims .taste-dim:nth-child(5) .taste-dot { background: var(--taste-sharing); }
.taste-ends { font-family: var(--lp-sans); color: var(--lp-fg3); }
.taste-foot-line { font-family: var(--lp-sans); color: var(--lp-espresso); }
.taste-foot-k { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lp-terra); }

/* Climb ladder */
.loy-rung-name { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.loy-rung-tag { font-family: var(--lp-sans); color: var(--lp-fg2); }
.loy-rung-min { font-family: var(--lp-sans); color: var(--lp-fg3); }
.loy-rung-dot { background: color-mix(in srgb, var(--lp-espresso) 16%, var(--lp-cream)); }
.loy-rung.loy-current .loy-rung-dot, .loy-rung.loy-achieved .loy-rung-dot { background: var(--t-ink, var(--lp-terra)); }
.loy-tag { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-radius: var(--r-pill); }
.loy-tag-here { background: var(--t-ink, var(--lp-terra)); color: var(--lp-cream); }
.loy-tag-next { background: var(--lp-tint-strong); color: var(--lp-terra); }
.loy-tag-done { background: color-mix(in srgb, var(--lp-espresso) 8%, var(--lp-cream)); color: var(--lp-fg2); }
.loy-tag-locked { background: color-mix(in srgb, var(--lp-espresso) 8%, var(--lp-cream)); color: var(--lp-fg3); }
.loy-rung.loy-locked .loy-rung-name { color: var(--lp-fg3); }
.loy-foot { font-family: var(--lp-sans); color: var(--lp-fg3); border-top: 1px solid var(--lp-line); }

/* Dubai map stats */
.pp-map-num { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-terra); }
.pp-map-of { font-family: var(--lp-sans); color: var(--lp-fg3); }
.pp-map-label { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-fg3); }
.pp-map-stat + .pp-map-stat { border-left: 1px solid var(--lp-line); }
.pp-map-foot { font-family: var(--lp-sans); color: var(--lp-fg3); }

/* Progress tab — verdict cards */
.verdict-intro { font-family: var(--lp-sans); color: var(--lp-fg2); }
.verdict-dish { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.verdict-rest { font-family: var(--lp-sans); color: var(--lp-fg2); }
.collection-cuisine { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-terra); }
.pp-empty-tab-title { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.pp-empty-tab-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }

/* Collection tab */
.collection-dish { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.collection-rest { font-family: var(--lp-sans); color: var(--lp-fg2); }
.collection-date { font-family: var(--lp-sans); color: var(--lp-fg3); }
.collection-verdict { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-fg2); }
.collection-verdict.pending { color: var(--lp-terra); }
.travel-continent-name, .highlight-label { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lp-fg3); }
.stamp.earned { border-color: var(--lp-terra); }
.stamp-country { font-family: var(--lp-serif); color: var(--lp-espresso); }
.stamp-count { font-family: var(--lp-sans); color: var(--lp-fg3); }
.highlight-value { font-family: var(--lp-serif); color: var(--lp-espresso); }
.highlight-meta { font-family: var(--lp-sans); color: var(--lp-terra); }
.log-rest { font-family: var(--lp-serif); color: var(--lp-espresso); }
.log-dish, .log-date, .log-cuisine { font-family: var(--lp-sans); color: var(--lp-fg2); }
.remaining-name { font-family: var(--lp-serif); color: var(--lp-espresso); }
.remaining-meta { font-family: var(--lp-sans); color: var(--lp-fg3); }
.remaining-go { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-terra); }

/* Food tab */
.fp-sub, .fp-count { font-family: var(--lp-sans); color: var(--lp-fg2); }
.fp-empty-title { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.fp-empty-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }
.fp-empty-ic { color: var(--lp-terra); }
.fp-fab { background: var(--lp-terra); color: var(--lp-cream); box-shadow: var(--lp-shadow-accent); }
.fp-badge-verified { background: var(--lp-terra); color: var(--lp-cream); }
.fp-card-cap { font-family: var(--lp-sans); }

/* Friends tab */
.passport .text-input { font-family: var(--lp-sans); background: var(--lp-cream); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-md); color: var(--lp-espresso); }
.passport .text-input:focus { border-color: var(--lp-terra); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-terra) 16%, transparent); }
.empty-box { border: 1.5px dashed var(--lp-line-strong); border-radius: var(--r-lg); font-family: var(--lp-sans); color: var(--lp-fg3); }
.friend-av { background: color-mix(in srgb, var(--lp-terra) 16%, var(--lp-cream)); color: var(--lp-terra); font-family: var(--lp-serif); }
.friend-name { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-espresso); }
.friend-handle { font-family: var(--lp-sans); color: var(--lp-fg3); }
.mini-btn { font-family: var(--lp-sans); border: 1.5px solid var(--lp-line-strong); background: var(--lp-cream); color: var(--lp-espresso); border-radius: var(--r-pill); }
.mini-btn.accept { background: var(--lp-terra); border-color: var(--lp-terra); color: var(--lp-cream); }

/* Buttons inside the passport */
.passport .btn-primary {
  background: var(--lp-terra); color: var(--lp-cream); border: none;
  border-radius: var(--r-pill); box-shadow: var(--lp-shadow-accent); font-family: var(--lp-sans);
}
.passport .btn-primary::before { display: none; }
.passport .btn-primary:hover { background: var(--lp-terra-deep); filter: none; }
.passport .btn-ghost {
  background: var(--lp-sand); color: var(--lp-espresso);
  border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-pill); box-shadow: none; font-family: var(--lp-sans);
}

/* Friends tab (fr-*) */
.fr-add, .fr-card { background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: var(--r-lg); box-shadow: var(--lp-shadow-sm); }
.fr-add-label, .fr-section-label { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lp-fg3); }
.fr-add-input { font-family: var(--lp-sans); background: var(--lp-cream); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-md); color: var(--lp-espresso); }
.fr-add-input:focus { border-color: var(--lp-terra); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-terra) 16%, transparent); outline: none; }
.fr-add-msg { font-family: var(--lp-sans); color: var(--lp-fg2); }
.fr-name { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.fr-meta, .fr-loved { font-family: var(--lp-sans); color: var(--lp-fg2); }
.fr-status-pill { font-family: var(--lp-sans); font-weight: 600; background: var(--lp-tint-strong); color: var(--lp-terra); border-radius: var(--r-pill); }
.fr-unfriend { font-family: var(--lp-sans); color: var(--lp-fg3); }
.fr-unfriend:hover { color: var(--lp-terra); }
.fr-empty { font-family: var(--lp-sans); color: var(--lp-fg3); border: 1.5px dashed var(--lp-line-strong); border-radius: var(--r-lg); }

/* Rankings (pp-rank-*) in the Collection tab */
.pp-rank-num { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-terra); }
.pp-rank-name, .pp-rank-title { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.pp-rank-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }
.pp-rankings-loading, .pp-rankings-empty { font-family: var(--lp-sans); color: var(--lp-fg3); }
.pp-rank-cta { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-terra); }

/* Verdict widget container */
.verdict-info { font-family: var(--lp-sans); }

/* ════════════════════════════════════════════════════════════════════
   CONCIERGE / RESTAURANT RESKIN — scoped to .r-hero + .r-body
   Matches design-reference "Palate Concierge.html". Restyles the existing
   ordering concierge in place: hero, mode cards, the chat (aichat / cc / chat-
   bubble), dish + pick cards, and the composer. All scoped to the restaurant
   page; no chat logic, API, routing, or data bindings changed.
   ════════════════════════════════════════════════════════════════════ */
/* Hero — keep the photo/scrim contrast logic; just the serif name */
.r-name { font-family: var(--lp-serif); font-weight: 400; letter-spacing: -0.01em; }

.r-body {
  font-family: var(--lp-sans); color: var(--lp-espresso);
  /* Scope the brand design tokens to the restaurant screen so the menu
     (rmenu / rdish / rchip / rds classes) renders in the brand serif + terracotta
     instead of the brighter global :root ember. Mirrors .plhome for the home screen. */
  --serif: 'DM Serif Display', 'Hoefler Text', Georgia, serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --accent: #C2502F; --accent-deep: #9A3C20; --on-accent: #FCF6EC;
  --fg1: #2A2018; --fg2: color-mix(in srgb, #2A2018 66%, #F6EFE4); --fg3: color-mix(in srgb, #2A2018 44%, #F6EFE4);
  --line: color-mix(in srgb, #2A2018 13%, transparent); --surface: #FFFFFF;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2A2018 9%, transparent), 0 1px 3px color-mix(in srgb, #2A2018 6%, transparent);
}

/* Mode-select cards (Help me order / who's eating) */
.r-body .ot-mode-title { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.r-body .ot-mode-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }
.r-body .ot-returning-dish { font-family: var(--lp-serif); color: var(--lp-terra); }
.r-body .ot-mode-card { background: var(--lp-sand); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-lg); box-shadow: var(--lp-shadow-sm); }
.r-body .ot-mode-card:hover { border-color: var(--lp-terra); }
.r-body .ot-mode-icon { background: color-mix(in srgb, var(--lp-terra) 14%, var(--lp-cream)); color: var(--lp-terra); font-family: var(--lp-sans); }
.r-body .ot-mode-label { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-espresso); }
.r-body .ot-mode-desc { font-family: var(--lp-sans); color: var(--lp-fg2); }

/* Concierge header */
.aichat-head { display: flex; align-items: center; gap: 12px; }
.aichat-head svg { color: var(--lp-terra); }
.aichat-title { font-family: var(--lp-serif); font-weight: 400; font-size: 21px; color: var(--lp-espresso); }
.aichat-sub { font-family: var(--lp-sans); font-weight: 500; color: var(--lp-fg3); }


/* Chat bubbles */
.chat-bubble { font-family: var(--lp-sans); }
.chat-bubble.ai {
  background: var(--lp-sand); border: 1px solid var(--lp-line); color: var(--lp-espresso);
  border-radius: 6px var(--r-lg) var(--r-lg) var(--r-lg); box-shadow: var(--lp-shadow-sm);
}
.chat-bubble.user {
  background: var(--lp-terra); border: 1px solid var(--lp-terra); color: var(--lp-cream);
  border-radius: var(--r-lg) 6px var(--r-lg) var(--r-lg);
}
.chat-bubble b { font-weight: 700; }
.chat-typing span { background: var(--lp-terra); }

/* Composer / inputs */
.chat-input-bar { display: flex; align-items: center; gap: 10px; }
.chat-input {
  font-family: var(--lp-sans); color: var(--lp-espresso);
  background: var(--lp-sand); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-pill);
}
.chat-input:focus {
  border-color: var(--lp-terra); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-terra) 15%, transparent); outline: none;
}
.chat-send {
  background: var(--lp-terra); color: var(--lp-cream); border: none; border-radius: var(--r-pill);
  box-shadow: var(--lp-shadow-accent); font-family: var(--lp-sans); font-weight: 700;
}
.chat-send:hover { background: var(--lp-terra-deep); }

/* Dish reveal cards (older chat flow) */
.dish-reveal { background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: var(--r-xl); box-shadow: var(--lp-shadow-sm); }
.dish-name { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.dish-desc { font-family: var(--lp-sans); color: var(--lp-fg2); }
.dish-why { font-family: var(--lp-sans); background: var(--lp-tint); border-radius: var(--r-md); color: var(--lp-espresso); }
.dish-served-with { font-family: var(--lp-sans); color: var(--lp-fg2); }
.dish-served-label { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-fg3); }
.dish-src-badge { background: color-mix(in srgb, var(--lp-cream) 92%, transparent); color: var(--lp-terra); border-radius: var(--r-pill); font-family: var(--lp-sans); font-weight: 700; }
.dish-mod { font-family: var(--lp-sans); color: color-mix(in srgb, var(--lp-bold) 80%, var(--lp-espresso)); }
.dish-mod-icon { background: var(--lp-bold); color: var(--lp-cream); }


/* Buttons within the restaurant body */
.r-body .btn-primary { background: var(--lp-terra); color: var(--lp-cream); border: none; border-radius: var(--r-pill); box-shadow: var(--lp-shadow-accent); font-family: var(--lp-sans); }
.r-body .btn-primary::before { display: none; }
.r-body .btn-primary:hover { background: var(--lp-terra-deep); filter: none; }
.r-body .btn-ghost { background: var(--lp-sand); color: var(--lp-espresso); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-pill); box-shadow: none; font-family: var(--lp-sans); }

/* ════════════════════════════════════════════════════════════════════
   SIGNED-IN HOME RESKIN — returning-user hero + Taste Points + rails
   Matches design-reference "Palate Home - Signed in v2.html". Scoped to the
   signed-in hero variants (.hero:not(.hero-landing)) + htp-/digest-/rail-
   components, so the signed-OUT landing (already reskinned) is untouched.
   ════════════════════════════════════════════════════════════════════ */
.home-signout-link { font-family: var(--lp-sans); color: var(--lp-fg3); }
.home-signout-link:hover { color: var(--lp-terra); }

/* Signed-in heroes (every .hero except the landing) */
.hero:not(.hero-landing) { font-family: var(--lp-sans); }
.hero:not(.hero-landing) h1 { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); letter-spacing: -0.015em; }
.hero:not(.hero-landing) h1 em { font-style: italic; color: var(--lp-terra); background: none; -webkit-text-fill-color: var(--lp-terra); }
.hero:not(.hero-landing) .hero-eyebrow { color: var(--lp-terra); }
.hero:not(.hero-landing) .hero-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }
.hero-spark { color: var(--lp-terra); }
.hero-tier-cred { color: var(--lp-terra); }
.hero-tier, .hero-tier-next { font-family: var(--lp-sans); }
.hero:not(.hero-landing) .btn-primary { background: var(--lp-terra); color: var(--lp-cream); box-shadow: var(--lp-shadow-accent); }
.hero:not(.hero-landing) .btn-primary::before { display: none; }
.hero:not(.hero-landing) .btn-primary:hover { background: var(--lp-terra-deep); filter: none; }
.hero:not(.hero-landing) .btn-ghost { background: var(--lp-sand); color: var(--lp-espresso); border: 1.5px solid var(--lp-line-strong); box-shadow: none; }

/* Taste Points card (terracotta gradient, like the passport) */
.htp-card { background: linear-gradient(135deg, var(--lp-terra) 0%, var(--lp-terra-deep) 100%); color: var(--lp-cream); border: none; box-shadow: var(--lp-shadow-accent); }
.htp-tier { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-cream); }
.htp-pts { font-family: var(--lp-sans); color: color-mix(in srgb, var(--lp-cream) 86%, var(--lp-terra)); }
.htp-pts strong { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-cream); }
.htp-go { color: color-mix(in srgb, var(--lp-cream) 80%, var(--lp-terra)); }
.htp-bar { background: rgba(255,255,255,0.25); }
.htp-bar-fill { background: var(--lp-cream); }
.htp-next { font-family: var(--lp-sans); color: color-mix(in srgb, var(--lp-cream) 90%, var(--lp-terra)); }
.htp-next strong { color: var(--lp-cream); font-weight: 700; }
.htp-nudge { font-family: var(--lp-sans); color: color-mix(in srgb, var(--lp-cream) 82%, var(--lp-terra)); }
.htp-dot { background: rgba(255,255,255,0.32); }
.htp-dot.on { background: var(--lp-cream); }

/* Section heads on home rails */
.home-section-eyebrow, .home-rail-label { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lp-fg3); }

/* Weekly digest pick cards */
.digest-card { background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: var(--r-lg); box-shadow: var(--lp-shadow-sm); }
.digest-cuisine { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-terra); }
.digest-area { font-family: var(--lp-sans); color: var(--lp-fg3); }
.digest-name { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.digest-reason { font-family: var(--lp-sans); color: var(--lp-fg2); }
.digest-tags { font-family: var(--lp-sans); color: var(--lp-fg3); }

/* Recent-dish photo rails */
.rail-card { background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: var(--r-lg); box-shadow: var(--lp-shadow-sm); }
.rail-rest { font-family: var(--lp-sans); color: var(--lp-fg3); }
.rail-dish { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.rail-rating { font-family: var(--lp-sans); color: var(--lp-terra); }
.rail-meta { font-family: var(--lp-sans); color: var(--lp-fg3); }
.rail-glyph { color: var(--lp-terra); }

/* ════════════════════════════════════════════════════════════════════
   RESTAURANTS LIST + DISCOVER RESKIN — design-system consistency (no mockup)
   Extends the established --lp-* system to the browse + decision screens so the
   app is visually cohesive. Restaurant/card classes are shared by both pages.
   ════════════════════════════════════════════════════════════════════ */
/* Page headers */
.restaurants-header .eyebrow, .eyebrow-accent { color: var(--lp-terra); }
.restaurants-title, .discover-h1 { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); letter-spacing: -0.015em; }
.restaurants-subtitle, .discover-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }

/* Search + filter chips */
.search-input { font-family: var(--lp-sans); background: var(--lp-sand); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-pill); color: var(--lp-espresso); }
.search-input:focus { border-color: var(--lp-terra); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-terra) 15%, transparent); outline: none; }
.chip { font-family: var(--lp-sans); font-weight: 600; background: var(--lp-sand); border: 1.5px solid var(--lp-line-strong); color: var(--lp-espresso); }
.chip:hover { border-color: var(--lp-terra); }
.chip.active { background: var(--lp-terra); border-color: var(--lp-terra); color: var(--lp-cream); }
.chip.active .chip-glyph { color: var(--lp-cream); }
.filter-status-count { font-family: var(--lp-sans); color: var(--lp-fg3); }
.filter-clear-btn { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-terra); }

/* Restaurant cards (shared by restaurants list + discover alternates) */
.restaurant-card, .rcard { background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: var(--r-lg); box-shadow: var(--lp-shadow-sm); }
.card-cuisine { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-terra); }
.card-name { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.card-area { font-family: var(--lp-sans); color: var(--lp-fg2); }
.card-cta { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-terra); }
.card-dish-match { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-terra); }
.card-price, .rcard-price { font-family: var(--lp-sans); color: var(--lp-fg3); }
.rcard-soon { background: var(--lp-tint-strong); color: var(--lp-terra); font-family: var(--lp-sans); font-weight: 700; }
.alt-why { font-family: var(--lp-sans); color: var(--lp-fg2); }

/* Match meter + trust pips */
.match-meter-fill { background: var(--lp-terra); }
.match-meter-label { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-terra); }
.trust-pip { font-family: var(--lp-sans); }
.trust-loved { color: var(--lp-terra); }
.trust-verified { color: var(--lp-adventure); }
.trust-new { color: var(--lp-fg3); }

/* Discover funnel controls */
.df-label, .df-row-label { font-family: var(--lp-sans); color: var(--lp-espresso); }
.df-tag-req { color: var(--lp-terra); }
.occ-opt, .tchip { font-family: var(--lp-sans); font-weight: 600; background: var(--lp-sand); border: 1.5px solid var(--lp-line-strong); color: var(--lp-espresso); }
.occ-opt:hover, .tchip:hover { border-color: var(--lp-terra); }
.occ-opt.is-on, .tchip.active { background: var(--lp-terra); border-color: var(--lp-terra); color: var(--lp-cream); }
.df-row-val { font-family: var(--lp-sans); color: var(--lp-fg3); }
.df-summary-k { font-family: var(--lp-sans); color: var(--lp-fg3); }
.df-summary-v { font-family: var(--lp-sans); color: var(--lp-espresso); }
.df-go { background: var(--lp-terra); color: var(--lp-cream); border: none; border-radius: var(--r-pill); box-shadow: var(--lp-shadow-accent); font-family: var(--lp-sans); }
.df-go::before { display: none; }
.df-go:hover { background: var(--lp-terra-deep); filter: none; }
.df-reset { font-family: var(--lp-sans); color: var(--lp-fg3); }

/* Discover result pick */
.discover-pick { background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: var(--r-xl); box-shadow: var(--lp-shadow-lg); }
.discover-pick-name { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.discover-pick-meta { font-family: var(--lp-sans); color: var(--lp-fg2); }
.discover-cta { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-terra); }
.card-match { background: var(--lp-terra); color: var(--lp-cream); font-family: var(--lp-sans); }
.why-tonight-k { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lp-terra); }
.why-chip { font-family: var(--lp-sans); background: var(--lp-tint); color: var(--lp-espresso); }
.df-state-title { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.df-state-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }

/* ════════════════════════════════════════════════════════════════════
   TASTE-OFF (game) + GROUP funnel RESKIN — design-system consistency
   ════════════════════════════════════════════════════════════════════ */
/* Taste-Off */
.game-wrap { font-family: var(--lp-sans); color: var(--lp-espresso); }
.game-eyebrow { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lp-terra); }
.game-title { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.game-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }
.game-card { background: var(--lp-sand); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-lg); box-shadow: var(--lp-shadow-sm); }
.game-card:hover { border-color: var(--lp-terra); }
.game-card-win { border-color: var(--lp-terra); background: var(--lp-tint-strong); }
.game-card-tag { font-family: var(--lp-sans); font-weight: 700; background: color-mix(in srgb, var(--lp-terra) 14%, var(--lp-cream)); color: var(--lp-terra); border-radius: var(--r-pill); }
.game-card-name { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.game-card-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }
.game-vs { font-family: var(--lp-serif); font-style: italic; color: var(--lp-fg3); }
.game-skip, .game-count { font-family: var(--lp-sans); color: var(--lp-fg3); }
.game-rankings-link { font-family: var(--lp-sans); font-weight: 600; color: var(--lp-terra); }
.game-empty { font-family: var(--lp-sans); color: var(--lp-fg2); }

/* Group funnel */
.group-wrap { font-family: var(--lp-sans); color: var(--lp-espresso); }
.group-step-eyebrow, .group-result-eyebrow { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lp-terra); }
.group-title { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.group-sub { font-family: var(--lp-sans); color: var(--lp-fg2); }
.group-section-label { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lp-fg3); }
.grp-optional { font-family: var(--lp-sans); color: var(--lp-fg3); text-transform: none; letter-spacing: 0; }
.grp-opt, .group-friend, .grp-occ { font-family: var(--lp-sans); background: var(--lp-sand); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-lg); color: var(--lp-espresso); }
.grp-opt:hover, .group-friend:hover, .grp-occ:hover { border-color: var(--lp-terra); }
.grp-opt.sel, .group-friend.sel, .group-friend.on, .grp-occ.sel { background: var(--lp-terra); border-color: var(--lp-terra); color: var(--lp-cream); }
.grp-opt-l { font-family: var(--lp-sans); font-weight: 600; }
.group-friend-name { font-family: var(--lp-sans); font-weight: 600; }
.group-friend-meta { font-family: var(--lp-sans); color: var(--lp-fg3); }
.grp-back { font-family: var(--lp-sans); color: var(--lp-fg3); }
.grp-back:hover { color: var(--lp-terra); }
.grp-step-btn { background: var(--lp-sand); border: 1.5px solid var(--lp-line-strong); color: var(--lp-espresso); }
.grp-step-btn:hover { border-color: var(--lp-terra); }
.grp-step-val { font-family: var(--lp-serif); color: var(--lp-espresso); }
.grp-note, .grp-no-friends-text { font-family: var(--lp-sans); color: var(--lp-fg3); }
.group-empty { font-family: var(--lp-sans); color: var(--lp-fg2); }
.group-pick { background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: var(--r-xl); box-shadow: var(--lp-shadow-lg); }
.group-pick-cuisine { font-family: var(--lp-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-terra); }
.group-pick-area { font-family: var(--lp-sans); color: var(--lp-fg3); }
.group-pick-name { font-family: var(--lp-serif); font-weight: 400; color: var(--lp-espresso); }
.group-fit-name { font-family: var(--lp-sans); color: var(--lp-fg2); }
.group-fit-fill { background: var(--lp-terra); }

/* Primary/ghost buttons on game + group (terracotta, matching every other screen) */
.game-wrap .btn-primary, .group-wrap .btn-primary { background: var(--lp-terra); color: var(--lp-cream); border: none; border-radius: var(--r-pill); box-shadow: var(--lp-shadow-accent); font-family: var(--lp-sans); }
.game-wrap .btn-primary::before, .group-wrap .btn-primary::before { display: none; }
.game-wrap .btn-primary:hover, .group-wrap .btn-primary:hover { background: var(--lp-terra-deep); filter: none; }
.group-wrap .btn-ghost { background: var(--lp-sand); color: var(--lp-espresso); border: 1.5px solid var(--lp-line-strong); border-radius: var(--r-pill); box-shadow: none; font-family: var(--lp-sans); }

/* A1 — Share button on the restaurant hero (glassy chip, top-right, works over
   both the photo-scrim and cuisine-wash hero variants). */
.r-share {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(20,14,10,0.42); color: #F6EFE4; border: none;
  border-radius: var(--r-pill); padding: 9px 14px 9px 12px;
  font-family: var(--lp-sans); font-weight: 600; font-size: 13px; line-height: 1;
  cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 160ms ease;
}
.r-share svg { width: 15px; height: 15px; }
.r-share:hover { background: rgba(20,14,10,0.58); }
.r-share:active { transform: scale(0.96); }


/* ════════════════════════════════════════════════════════════════════
   C3 — Passport: palate-evolving moment, verified streak, perks
   ════════════════════════════════════════════════════════════════════ */
.pp-momentum { display: flex; flex-direction: column; gap: 12px; }
.pp-evolve {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lp-terra) 10%, var(--lp-sand)), var(--lp-sand));
  border: 1px solid rgba(194,80,47,0.18); border-radius: 16px; padding: 14px 16px;
}
.pp-evolve-spark { font-size: 18px; color: var(--lp-terra); line-height: 1.3; }
.pp-evolve-title { font-family: var(--lp-serif); font-size: 18px; color: var(--lp-espresso); margin: 0 0 2px; }
.pp-evolve-body { font-family: var(--lp-sans); font-size: 13px; line-height: 1.5; color: var(--lp-fg2); margin: 0; }
.pp-streak {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--lp-sans); font-weight: 700; font-size: 12.5px; color: var(--lp-espresso);
  background: var(--lp-sand); border: 1px solid rgba(42,32,24,0.1); padding: 7px 13px; border-radius: var(--r-pill);
}
.pp-streak-flame { font-size: 13px; }

/* Perks list */
.pp-perks-loading { font-family: var(--lp-sans); color: var(--lp-fg2); font-size: 13px; }
.pk-intro { font-family: var(--lp-sans); font-size: 13px; color: var(--lp-fg2); margin: 2px 0 12px; }
.pk-grid { display: grid; gap: 12px; }
.pk-card {
  background: #fff; border: 1px solid rgba(42,32,24,0.09); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(42,32,24,0.04);
}
.pk-card.pk-locked { background: var(--lp-sand); box-shadow: none; opacity: 0.94; }
.pk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pk-icon { font-size: 17px; }
.pk-where { font-family: var(--lp-sans); font-weight: 600; font-size: 12px; color: var(--lp-terra); text-transform: uppercase; letter-spacing: 0.06em; }
.pk-demo {
  margin-left: auto; font-family: var(--lp-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lp-fg2); background: rgba(42,32,24,0.07); padding: 3px 8px; border-radius: var(--r-pill);
}
.pk-title { font-family: var(--lp-serif); font-size: 18px; color: var(--lp-espresso); margin: 0 0 4px; }
.pk-desc { font-family: var(--lp-sans); font-size: 13px; line-height: 1.5; color: var(--lp-fg2); margin: 0 0 12px; }
.pk-redeem { width: 100%; }
.pk-lock { font-family: var(--lp-sans); font-size: 12.5px; color: var(--lp-fg2); margin: 8px 0 0; }
.pk-code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--lp-sand); border-radius: 12px; padding: 10px 14px; }
.pk-code-label { font-family: var(--lp-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-fg2); }
.pk-code { font-family: var(--lp-sans); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; color: var(--lp-terra); }
.pk-locked-label { font-family: var(--lp-sans); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lp-fg2); margin: 18px 0 10px; }
.pk-empty { text-align: center; padding: 18px 16px; }
.pk-empty-title { font-family: var(--lp-serif); font-size: 18px; color: var(--lp-espresso); margin: 0 0 6px; }
.pk-empty-sub { font-family: var(--lp-sans); font-size: 13px; line-height: 1.5; color: var(--lp-fg2); margin: 0 auto; max-width: 34ch; }

/* Redeem code modal */
.pk-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.pk-modal-backdrop { position: absolute; inset: 0; background: rgba(20,14,10,0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pk-modal-card {
  position: relative; z-index: 1; background: var(--lp-cream, #F6EFE4); border-radius: 22px; padding: 28px 24px;
  max-width: 340px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(20,14,10,0.32);
  transform: scale(0.94); opacity: 0; transition: transform 0.26s ease, opacity 0.26s ease;
}
.pk-modal.open .pk-modal-card { transform: scale(1); opacity: 1; }
.pk-modal-eyebrow { font-family: var(--lp-sans); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lp-terra); margin: 0 0 6px; }
.pk-modal-title { font-family: var(--lp-serif); font-size: 22px; color: var(--lp-espresso); margin: 0 0 18px; }
.pk-modal-code {
  font-family: var(--lp-sans); font-weight: 800; font-size: 26px; letter-spacing: 0.14em; color: var(--lp-terra);
  background: #fff; border: 2px dashed rgba(194,80,47,0.4); border-radius: 14px; padding: 16px; margin-bottom: 16px;
}
.pk-modal-note { font-family: var(--lp-sans); font-size: 12.5px; line-height: 1.5; color: var(--lp-fg2); margin: 0 0 18px; }
.pk-modal-close { width: 100%; }


/* ════════════════════════════════════════════════════════════════════
   Concierge sign-in gate — "unlock your picks" teaser (signed-out diners)
   ════════════════════════════════════════════════════════════════════ */
.ot-gate { display: flex; flex-direction: column; }
.otg-card {
  margin-top: 10px; text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--lp-terra) 7%, var(--lp-sand)), var(--lp-sand));
  border: 1px solid var(--lp-line); border-radius: var(--r-xl); box-shadow: var(--lp-shadow-sm);
  padding: 28px 22px 22px;
}
.otg-lock {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--lp-terra) 14%, var(--lp-cream)); color: var(--lp-terra);
  display: grid; place-items: center;
}
.otg-lock svg { width: 26px; height: 26px; }
.otg-title { font-family: var(--lp-serif); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--lp-espresso); margin: 0 0 8px; }
.otg-sub { font-family: var(--lp-sans); font-size: 14px; line-height: 1.5; color: var(--lp-fg2); margin: 0 auto 18px; max-width: 34ch; }
.otg-perks { list-style: none; padding: 0; margin: 0 auto 22px; display: inline-flex; flex-direction: column; gap: 9px; text-align: left; }
.otg-perks li { font-family: var(--lp-sans); font-size: 13.5px; color: var(--lp-espresso); display: flex; align-items: center; gap: 9px; }
.otg-perks b { font-weight: 700; }
.otg-spark { color: var(--lp-terra); font-size: 14px; flex: none; }
.otg-cta { width: 100%; margin-bottom: 10px; }
.otg-cta2 { width: 100%; }


/* ════════════════════════════════════════════════════════════════════════════
   HOME — Palate design pass (signed-in): sticky top bar, a DM-Serif "where to
   tonight" hero with a terracotta italic accent, the three CTAs, and the
   "Tonight's table" venue card. Scoped to .ph-* so the rest of home is untouched.
   ════════════════════════════════════════════════════════════════════════════ */
.ph-topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; background: color-mix(in srgb, var(--lp-cream) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(12px); backdrop-filter: saturate(1.1) blur(12px);
  border-bottom: 1px solid var(--lp-line);
}
.ph-brand .lp-word { font-family: var(--lp-serif); font-weight: 600; font-size: 22px; color: var(--lp-espresso); letter-spacing: -0.01em; }
.ph-brand .lp-dot { color: var(--lp-terra); }
.ph-topbar-actions { display: flex; align-items: center; gap: 11px; }
.ph-iconbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--lp-espresso); border: 1px solid var(--lp-line); background: var(--lp-sand); transition: border-color .15s, color .15s; }
.ph-iconbtn:hover { border-color: var(--lp-terra); color: var(--lp-terra); }
.ph-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-terra); color: var(--lp-cream); font-family: var(--lp-sans); font-weight: 700; font-size: 15px; text-decoration: none; }
.ph-signout { border: none; background: none; color: var(--lp-fg3); font-family: var(--lp-sans); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
.ph-signout:hover { color: var(--lp-terra-deep); }

.ph-hero { background: var(--lp-cream); padding: 24px 20px 8px; display: block; text-align: left; max-width: 560px; margin: 0 auto; }
.ph-hero .ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--lp-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-terra); margin: 0 0 14px; }
.ph-hero .ph-spark { display: inline-grid; place-items: center; color: var(--lp-terra); }
.ph-hero .ph-spark svg { width: 15px; height: 15px; }
.ph-hero .ph-head { font-family: 'DM Serif Display', 'Hoefler Text', Georgia, serif; font-weight: 400; font-size: 46px; line-height: 1.0; letter-spacing: -0.02em; color: var(--lp-espresso); margin: 0; }
.ph-hero .ph-head em { font-style: italic; color: var(--lp-terra); }
.ph-hero .ph-sub { font-family: var(--lp-sans); font-size: 16px; line-height: 1.4; color: var(--lp-fg2); margin: 14px 0 0; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.ph-hero .ph-cta-primary {
  flex: 1 1 100%; justify-content: center; background: var(--lp-terra); color: var(--lp-cream);
  border: none; border-radius: var(--r-pill); padding: 17px 26px; font-family: var(--lp-sans);
  font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--lp-terra) 70%, transparent);
}
.ph-hero .ph-cta-primary:hover { background: var(--lp-terra-deep); }
.ph-hero .ph-cta {
  flex: 1 1 0; min-width: 0; justify-content: center; background: var(--lp-sand); color: var(--lp-espresso);
  border: 1px solid var(--lp-line); border-radius: var(--r-pill); padding: 13px 20px;
  font-family: var(--lp-sans); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px;
}
.ph-hero .ph-cta:hover { border-color: var(--lp-terra); color: var(--lp-terra-deep); }

.ph-table {
  display: flex; flex-direction: column; justify-content: flex-end; position: relative;
  margin: 22px 0 6px; border-radius: 26px; overflow: hidden; padding: 22px; min-height: 226px;
  text-decoration: none; background-size: cover; background-position: center;
  background-image: linear-gradient(165deg, #8a3f24, #5a3320 60%, #2a2018);
  box-shadow: 0 16px 40px -20px rgba(42, 32, 24, .5);
}
.ph-table .ph-table-eyebrow { font-family: var(--lp-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #EBCFC0; margin: 0; }
.ph-table .ph-table-name { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.0; color: var(--lp-cream); margin: 6px 0 0; }
.ph-table .ph-table-meta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--lp-sans); font-weight: 400; font-size: 16px; color: color-mix(in srgb, var(--lp-cream) 86%, transparent); margin: 8px 0 0; }
.ph-table .ph-table-why { font-family: var(--lp-sans); font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--lp-cream) 88%, transparent); margin: 10px 0 0; text-wrap: pretty; }
.ph-table .ph-table-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: 16px 0 0; background: var(--lp-terra); color: var(--lp-cream); border-radius: var(--r-pill); padding: 14px 22px; font-family: var(--lp-sans); font-weight: 700; font-size: 15px; }

/* Your Palate — EXACT design: proportional stacked spectrum bar + dot legend + points. */
.ph-pal { max-width: 560px; margin: 20px auto 0; padding: 0 20px; }
.ph-pal-card { display: block; background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: 28px; padding: 18px 18px 16px; text-decoration: none; box-shadow: 0 4px 16px -12px rgba(42, 32, 24, .3); }
.ph-pal-eyebrow { font-family: var(--lp-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-fg3); margin: 0; }
.ph-pal-summary { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-style: normal; font-size: 21px; line-height: 1.08; color: var(--lp-espresso); margin: 8px 0 0; }
.ph-pal-summary em { font-style: normal; }
.ph-pal-summary .hero-sep { color: var(--lp-fg3); margin: 0 6px; }
/* the proportional stacked spectrum bar — segments flex-sized by score */
.ph-pal-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 15px 0 0; }
.ph-pal-bar > span { display: block; min-width: 2px; }
/* dot legend */
.ph-pal-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 12px 0 0; }
.ph-pal-leg { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lp-sans); font-weight: 600; font-size: 11.5px; color: var(--lp-fg2); }
.ph-pal-leg i { width: 8px; height: 8px; border-radius: 999px; display: block; flex: none; }
/* Taste Points + progress */
.ph-pal-pts-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--lp-line); }
.ph-pal-pts { font-family: var(--lp-sans); font-size: 13px; font-weight: 600; color: var(--lp-fg2); }
.ph-pal-pts strong { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 24px; color: var(--lp-terra); margin-right: 5px; }
.ph-pal-verif { font-family: var(--lp-sans); font-size: 12px; font-weight: 600; color: var(--lp-fg3); }
.ph-pal-prog { height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--lp-fg3) 20%, transparent); overflow: hidden; margin: 10px 0 0; }
.ph-pal-prog > span { display: block; height: 100%; border-radius: 999px; background: var(--lp-terra); }
.ph-pal-nudge { font-family: var(--lp-sans); font-size: 12.5px; line-height: 1.35; color: var(--lp-fg3); margin: 11px 0 0; }

/* ════════════════════════════════════════════════════════════════════════════
   HOME v3 — "Palate Home" editorial feed, ported 1:1 from the design handoff
   (concierge.css tokens + home-sections). All design tokens scoped to .plhome so
   the verbatim inline styles (var(--accent)/--serif/--r-xl/--shadow-lg/--fg2 …)
   resolve exactly as in the mockup, without touching the rest of the app.
   ════════════════════════════════════════════════════════════════════════════ */
.plhome {
  --cream: #F6EFE4; --sand: #FCF6EC; --espresso: #2A2018; --terracotta: #C2502F; --terracotta-deep: #9A3C20;
  --adventure: #5C8C68; --heat: #D6492F; --indulgence: #8E3D5B; --bold: #5C8C68; --table: #2E7A95;
  --serif: 'DM Serif Display', 'Hoefler Text', Georgia, serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms;
  --bg: #FFFFFF; --bg-2: #EFE6D6; --surface: #FFFFFF; --surface-2: #F8F6F3;
  --fg1: #2A2018; --fg2: color-mix(in srgb, #2A2018 66%, #F6EFE4); --fg3: color-mix(in srgb, #2A2018 44%, #F6EFE4);
  --line: color-mix(in srgb, #2A2018 13%, transparent); --line-strong: color-mix(in srgb, #2A2018 24%, transparent);
  --accent: #C2502F; --accent-press: #9A3C20; --on-accent: #FCF6EC;
  --scrim: color-mix(in srgb, #2A2018 78%, transparent);
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2A2018 9%, transparent), 0 1px 3px color-mix(in srgb, #2A2018 6%, transparent);
  --shadow-md: 0 4px 14px color-mix(in srgb, #2A2018 11%, transparent), 0 2px 5px color-mix(in srgb, #2A2018 6%, transparent);
  --shadow-lg: 0 18px 44px color-mix(in srgb, #2A2018 16%, transparent), 0 6px 14px color-mix(in srgb, #2A2018 9%, transparent);
  --shadow-accent: 0 8px 22px color-mix(in srgb, #C2502F 32%, transparent);
  position: relative; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--fg1);
  font-family: var(--sans); max-width: 460px; margin: 0 auto; overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.plhome *, .plhome *::before, .plhome *::after { box-sizing: border-box; }
.plhome button { font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
.plhome .tnum { font-variant-numeric: tabular-nums; }
.plhome .pl-scroll::-webkit-scrollbar { height: 7px; width: 7px; }
.plhome .pl-scroll::-webkit-scrollbar-track { background: transparent; }
.plhome .pl-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg3) 45%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.plhome .pl-scroll { scrollbar-width: thin; }
/* Round 10 — the floating dock overlapped "Browse all of Dubai" at scroll end:
   the home page scrolls inside .pl-scroll, so the #app shell's 104px clearance
   never reaches it. Give the inner scroller its own dock clearance + breathing
   room so the last button always clears the pill. */
body.has-nav .plhome .pl-scroll { padding-bottom: calc(24px + var(--nav-clear)); }
/* The home scrolls inside .pl-scroll (which has its own 128px dock clearance above),
   so the #app shell's 104px padding-bottom is dead space = the big white gap above
   the dock. Drop it only on the home (scoped via :has so other pages keep theirs). */
body.has-nav #app:has(.plhome) { padding-bottom: 0; }
/* Horizontal card rails: hide the scrollbar entirely and keep the leading inset.
   scroll-snap-align:start would otherwise snap the first card to the scrollport
   edge on load and eat the left padding (card ends up glued to the border), so
   scroll-padding-left pins the snap to the 20px inset — first card aligns with
   the section title instead of the screen edge. */
.plhome .pl-rail { scrollbar-width: none; -ms-overflow-style: none; scroll-padding-left: 20px; }
.plhome .pl-rail::-webkit-scrollbar { display: none; height: 0; width: 0; }
/* scroll-reveal: hidden→shown (JS toggles .pl-in via IntersectionObserver) */
.plhome .pl-rev { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.plhome .pl-rev.pl-in { opacity: 1; transform: none; }
/* top-bar loyalty pill — PREMIUM "standing" treatment. Shows the diner's real tier +
   Taste Points (populated in _plFillBody). Restrained on purpose: cream surface, hairline
   border, espresso ink, soft depth. The ONLY brand colour is the small terracotta crest —
   founder rule: the header pill keeps ONE brand colour and does NOT wear the per-tier
   climb (that reads on the dock orb alone, v823 revert). */
.plhome .pl-loypill {
  text-decoration: none; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px 7px 10px; border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--fg1);
  font: 600 12.5px/1 var(--sans); white-space: nowrap;
  box-shadow: 0 1px 2px rgba(46, 42, 38, .06), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .12s var(--ease-out);
}
.plhome .pl-loypill:hover { transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line-strong));
  box-shadow: 0 4px 12px -5px rgba(46, 42, 38, .22), inset 0 1px 0 rgba(255, 255, 255, .55); }
.plhome .pl-loypill:active { transform: scale(.97); }
.plhome .pl-loypill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* crest = the single brand accent; the bare <i> selector also tints the visitor "Trip" airplane */
.plhome .pl-loypill .pl-loyp-crest, .plhome .pl-loypill > i { color: var(--accent); display: inline-flex; align-items: center; }
.plhome .pl-loypill .pl-loyp-crest i { font-size: 13px; }
.plhome .pl-loypill .pl-loyp-tier { font-weight: 700; letter-spacing: -.005em; color: var(--fg1); }
.plhome .pl-loypill .pl-loyp-sep { color: var(--line-strong); font-weight: 700; margin: 0 -1px; }
.plhome .pl-loypill .pl-loyp-pts { color: var(--fg2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── The pill WEARS THE TIER COLOUR (founder, 2026-07-24) ─────────────────────
   Supersedes the v823 revert above: the header pill now climbs the same
   Mediterranean ladder as the dock orb and the loyalty card — oat → bronze →
   olive → garnet → obsidian gold. Colour only; the pill's geometry, type and
   motion are untouched. Every value comes from the canonical .tier-* tokens
   (--t-bg / --t-text / --t-text-soft / --t-gold), so the three surfaces can
   never drift apart. No tier class (unknown/visitor) → the cream pill above. */
.plhome .pl-loypill[class*="tier-"] {
  background: var(--t-bg);
  border-color: color-mix(in srgb, var(--t-color, var(--line-strong)) 34%, transparent);
  color: var(--t-text);
  box-shadow: 0 1px 2px rgba(46, 42, 38, .10), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.plhome .pl-loypill[class*="tier-"]:hover {
  border-color: color-mix(in srgb, var(--t-color, var(--accent)) 58%, transparent);
  box-shadow: 0 4px 12px -5px rgba(46, 42, 38, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.plhome .pl-loypill[class*="tier-"]:focus-visible { outline-color: var(--t-color, var(--accent)); }
.plhome .pl-loypill[class*="tier-"] .pl-loyp-crest,
.plhome .pl-loypill[class*="tier-"] > i { color: var(--t-gold, var(--t-text)); }
.plhome .pl-loypill[class*="tier-"] .pl-loyp-tier { color: var(--t-text); }
.plhome .pl-loypill[class*="tier-"] .pl-loyp-pts { color: var(--t-text-soft, var(--t-text)); }
.plhome .pl-loypill[class*="tier-"] .pl-loyp-sep { color: var(--t-text-soft, var(--t-text)); opacity: .55; }

/* Experiential badge (Dubai Icon / Skyline view / Local gem) — the experience signal as an
   on-brand terracotta pill, NOT a rival number. Global (home + discover). */
.pl-xbadge { display: inline-flex; align-items: center; gap: 5px; font: 800 10px/1 var(--sans);
  letter-spacing: .03em; padding: 5px 9px 5px 8px; border-radius: 999px; color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); white-space: nowrap; }

/* ── Quick rate — one full-width card at a time (below the hero) ─────────── */
.plhome .pl-ratecard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden;
  opacity: 0; transform: translateY(10px) scale(.985); transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .3s var(--ease-out); will-change: transform, opacity; }
.plhome .pl-ratecard.pl-rate-shown { opacity: 1; transform: none; }
.plhome .pl-ratecard.pl-rate-out { transform: translateX(112%) rotate(1.5deg); opacity: 0; transition: transform .4s cubic-bezier(.5,0,.75,0), opacity .34s var(--ease-out); }
.plhome .pl-rc-body { padding: 17px 18px 18px; }
.plhome .pl-rc-place { font: 700 10.5px/1.1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); margin-bottom: 6px; }
.plhome .pl-rc-dish { font: 400 22px/1.08 var(--serif); letter-spacing: -.01em; color: var(--fg1); margin-bottom: 15px; }
.plhome .pl-stars { display: flex; gap: 10px; }
.plhome .pl-star { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--fg2);
  font: 700 15.5px/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: background .14s, border-color .14s, color .14s, transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s; }
.plhome .pl-star:hover { border-color: var(--accent); color: var(--accent); }
.plhome .pl-star.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.plhome .pl-star.sel { transform: scale(1.14); box-shadow: 0 5px 13px -3px color-mix(in srgb, var(--accent) 55%, transparent); }
.plhome .pl-rc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; }
.plhome .pl-rc-hint { font: 600 12.5px/1 var(--sans); color: var(--fg3); }
.plhome .pl-notorder { background: none; border: none; padding: 0; cursor: pointer; font: 500 12px/1 var(--sans); color: var(--fg3); text-decoration: underline; text-underline-offset: 3px; }
.plhome .pl-notorder:hover { color: var(--fg2); }
/* verdict FX — loading → "Verdict logged" → the card slides to the next dish (shared micro-flow with the Passport queue) */
.plhome .pl-rc-fx { text-align: center; padding: 22px 8px 16px; display: flex; flex-direction: column; align-items: center; }
.plhome .pl-rc-fx-main { font: 700 16px/1.3 var(--sans); color: var(--fg1); margin: 13px 0 4px; }
.plhome .pl-rc-fx-sub { font: 500 13px/1.45 var(--sans); color: var(--fg3); margin: 0; max-width: 30ch; }
.plhome .pl-rc-check { width: 42px; height: 42px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.plhome .pl-rc-check svg { width: 21px; height: 21px; }
.plhome .pl-rc-spin { width: 30px; height: 30px; border-radius: 999px; border: 3px solid var(--line-strong); border-top-color: var(--accent); animation: plspin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .plhome .pl-rc-spin { animation-duration: 1.4s; } }
/* enrich tray — expands after a rating; toggles are combinable */
.plhome .pl-enrich { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .42s var(--ease-out), opacity .32s var(--ease-out), margin-top .42s var(--ease-out); }
.plhome .pl-enrich.open { max-height: 620px; opacity: 1; margin-top: 17px; }
.plhome .pl-enrich-q { font: 600 13.5px/1.3 var(--sans); color: var(--fg2); margin-bottom: 12px; }
.plhome .pl-enrich-q b { color: var(--fg1); font-weight: 800; }
.plhome .pl-etoggles { display: flex; gap: 10px; }
.plhome .pl-etoggle { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg1); font: 700 12.5px/1 var(--sans); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.plhome .pl-etoggle svg { width: 16px; height: 16px; flex: none; }
.plhome .pl-etoggle:hover { border-color: var(--accent); color: var(--accent-deep); }
.plhome .pl-etoggle.done { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); color: var(--accent-deep); }
.plhome .pl-photo-slot { margin-top: 12px; align-items: center; gap: 11px; font: 600 12.5px/1.3 var(--sans); color: var(--fg3); }
.plhome .pl-photo-slot:not([hidden]) { display: flex; }
.plhome .pl-photo-slot img { width: 48px; height: 48px; border-radius: 11px; object-fit: cover; flex: none; }
.plhome .pl-note-input { margin-top: 12px; width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 12px 14px; font: 500 13.5px/1.45 var(--sans); color: var(--fg1); background: var(--bg); resize: vertical; min-height: 62px; }
.plhome .pl-note-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.plhome .pl-enrich-actions { display: flex; align-items: center; gap: 13px; margin-top: 15px; }
.plhome .pl-done { flex: 1; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; padding: 13px; font: 700 14.5px/1 var(--sans);
  cursor: pointer; box-shadow: 0 7px 17px -7px color-mix(in srgb, var(--accent) 60%, transparent); transition: transform .14s, filter .14s; }
.plhome .pl-done:hover { filter: brightness(1.04); }
.plhome .pl-done:active { transform: scale(.98); }
.plhome .pl-skip2 { background: none; border: none; cursor: pointer; font: 600 13px/1 var(--sans); color: var(--fg3); padding: 9px 6px; }
.plhome .pl-skip2:hover { color: var(--fg2); }
@media (prefers-reduced-motion: reduce) {
  .plhome .pl-ratecard { opacity: 1; transform: none; transition: none; }
  .plhome .pl-ratecard.pl-rate-out { transition: opacity .2s; transform: none; }
  .plhome .pl-enrich { transition: none; }
}
@keyframes pl-ringgrow { from { stroke-dashoffset: var(--circ); } }
@media (prefers-reduced-motion: reduce) {
  .plhome .pl-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
  .plhome * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESTAURANT MENU PAGE (Phase 1) — the real, browsable menu behind "See the menu".
   Menu-first tabbed screen (.rtabs), dish rows (.rdish), the dish detail sheet
   (.rdish-sheet) and the sticky concierge CTA (.rmenu-ccbar). The sheet + CTA are
   body-appended, so those classes live at the top level (not scoped to .r-body).
   ════════════════════════════════════════════════════════════════════════════ */
.rtabs { display: flex; gap: 6px; padding: 4px; margin: 2px 0 18px; background: var(--bg-2, var(--surface)); border: 1px solid var(--line); border-radius: 999px; }
.rtab { flex: 1; background: none; border: none; cursor: pointer; padding: 9px 12px; border-radius: 999px; font: 700 13.5px/1 var(--sans); color: var(--fg3); transition: background .15s, color .15s; }
.rtab-on { background: var(--surface); color: var(--fg1); box-shadow: var(--shadow-sm); }

.rmenu-sec { margin-bottom: 34px; }
/* Category header — an elegant serif-italic course title (Soups / Starters / Mains …)
   in the brand's Fraunces face, set off by a faint terracotta hairline. Replaces the old
   boxed uppercase-sans label band (founder, Jun '26: the red boxes looked "too Claude" —
   match the app's other titles: serif, italic, sentence-case, brand colours). */
.rmenu-sec-h { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.25; letter-spacing: normal; text-transform: none; color: var(--accent-deep); margin: 0 0 13px; padding: 0 0 9px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.rmenu-sec-h::before { content: none; }
.rmenu-list { display: flex; flex-direction: column; }
.rdish { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line); padding: 16px 2px; cursor: pointer; transition: background .14s var(--ease-out); }
.rdish:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.rdish:last-child { border-bottom: none; }
.rdish-l { flex: 1; min-width: 0; }
.rdish-name { font: 500 18px/1.28 var(--serif); letter-spacing: -.01em; color: var(--fg1); }
.rdish-desc { font: 400 13px/1.55 var(--sans); color: var(--fg2); margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Sides (founder 2026-07): "a steak needs a side picked, a club sandwich comes with rice —
   nothing tells me". The prose often DOES say it, but .rdish-desc is clamped to 2 lines so a
   trailing "…served with fries" is invisible. These pull it out where it can't be missed.
   .rdish-pick is the ACTION (you must choose) and carries the accent; .rdish-with is quiet. */
.rdish-sides { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 7px 0 0; }
.rdish-pick, .rdish-with {
  display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-pill);
  font: 600 11.5px/1 var(--sans); padding: 5px 9px; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.rdish-pick { color: var(--accent); background: rgba(194,80,47,0.10); }
.rdish-with { color: var(--fg2); background: var(--surface-2, rgba(42,32,24,0.05)); font-weight: 500; }
.rdish-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.rdish-price { font: 700 15px/1.3 var(--sans); color: var(--fg1); flex: none; white-space: nowrap; }
.rdish-loved { font: 600 12px/1 var(--sans); color: var(--accent-deep); display: inline-flex; align-items: center; gap: 3px; }

.rchip { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--sans); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.rchip-sig { background: color-mix(in srgb, #C9A23A 18%, var(--surface)); color: #8A6D14; }
.rchip-you { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-deep); }
.rchip-spice { background: color-mix(in srgb, #D9531E 12%, var(--surface)); padding: 4px 6px; }
/* Portion badge ("For 2–3") — sharing-scale warning, espresso-neutral so it reads as
   information, not promotion. Shown only for defensible sizes (portions.py). */
.rchip-portion { background: color-mix(in srgb, var(--fg1) 10%, var(--surface)); color: var(--fg1); }
.rchip-portion .ph { font-size: 12px; }
/* A package ("Take-home box" / "Whole cake") — not one portion, and not food on the
   table either. Reads quieter than the for-2-3 pill: it's a note, not a warning. */
.rchip-pkg { background: color-mix(in srgb, var(--fg2) 8%, var(--surface)); color: var(--fg2); }

.rmenu-empty { text-align: center; padding: 40px 24px; }
.rmenu-empty-h { font: 400 22px/1.2 var(--serif); color: var(--fg1); margin: 0 0 8px; }
.rmenu-empty-s { font: 400 14px/1.55 var(--sans); color: var(--fg3); margin: 0 auto; max-width: 34ch; }
/* Honest price disclaimer at the foot of the menu — subtle fine print, never alarming. */
.rmenu-pricenote {
  display: flex; align-items: flex-start; gap: 7px;
  font: 400 12.5px/1.5 var(--sans); color: var(--fg3);
  margin: 22px auto 0; max-width: 42ch; padding: 13px 16px 0;
  border-top: 1px solid var(--line); text-align: left;
}
/* Tier-3 menu-freshness report (founder) — subtle, at the menu foot */
.rmenu-report { max-width: 42ch; margin: 10px auto 0; padding: 0 16px; text-align: left; }
.rmenu-report-btn { all: unset; cursor: pointer; font: 600 12.5px/1.4 var(--sans); color: var(--accent); }
.rmenu-report-opts { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.rmenu-report-h { font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); margin: 0 0 3px; }
.rmenu-report-opt { all: unset; cursor: pointer; font: 500 13px/1.35 var(--sans); color: var(--fg1);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; }
.rmenu-report-opt:hover { border-color: var(--accent); color: var(--accent); }
.rmenu-report-thanks { font: 600 12.5px/1.4 var(--sans); color: var(--accent); margin: 8px 0 0; }
.rmenu-pricenote i { font-size: 15px; color: var(--fg3); flex: none; margin-top: 1px; }
/* Allergen/halal fine print — same voice as the price note but it must not be
   skimmed past: no rule above it (it reads as one block with the price line) and
   the icon carries the accent. See dish_safety.py: detected-present ≠ certified. */
.rmenu-safenote { margin-top: 0; padding-top: 9px; border-top: 0; }
.rmenu-safenote i { color: var(--accent); }
/* The same caveat anywhere else the app asserts a dish is "safe" for someone —
   the group table order, and any future safe-for-you surface. Small print, but
   present: allergen data is derived, never certified. */
.noodl-safenote {
  display: flex; align-items: flex-start; gap: 7px;
  font: 400 12px/1.5 var(--sans); color: var(--fg3);
  margin: 10px 0 0; text-align: left;
}
.noodl-safenote i { font-size: 14px; color: var(--accent); flex: none; margin-top: 1px; }
.rmenu-foot-space { height: 92px; }

.rmenu-ccbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: flex; justify-content: center; pointer-events: none;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 55%, transparent); }
.rmenu-cc { pointer-events: auto; display: inline-flex; align-items: baseline; gap: 8px; max-width: 440px;
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; padding: 15px 26px;
  font: 700 15.5px/1 var(--sans); box-shadow: var(--shadow-md); cursor: pointer; transition: filter .14s, transform .14s; }
.rmenu-cc:hover { filter: brightness(1.05); }
.rmenu-cc:active { transform: scale(.98); }
.rmenu-cc span { font: 500 13px/1 var(--sans); opacity: .82; }

.rdish-sheet { position: fixed; inset: 0; z-index: 240; display: flex; align-items: flex-end; justify-content: center; }
.rds-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #2A2018 45%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.rds-panel { position: relative; width: 100%; max-width: var(--app-w, 480px); background: var(--surface); border-radius: 22px 22px 0 0;
  padding: 14px 22px calc(28px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px color-mix(in srgb, #2A2018 22%, transparent);
  animation: rdsIn .28s var(--ease-out); max-height: 86vh; overflow-y: auto; }
@keyframes rdsIn { from { transform: translateY(14px); opacity: 0; } }
.rds-grab { width: 38px; height: 4px; border-radius: 999px; background: var(--line-strong, var(--line)); margin: 2px auto 14px; }
.rds-x { position: absolute; right: 14px; top: 12px; width: 32px; height: 32px; border-radius: 999px; border: none; background: var(--bg-2, var(--bg)); color: var(--fg2); font-size: 20px; line-height: 1; cursor: pointer; }
.rds-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rds-name { font: 400 26px/1.15 var(--serif); letter-spacing: -.01em; color: var(--fg1); margin: 0 0 6px; }
.rds-price { font: 700 16px/1 var(--sans); color: var(--accent-deep); margin: 0 0 12px; }
.rds-desc { font: 400 15px/1.6 var(--sans); color: var(--fg2); margin: 0 0 12px; }
/* "Why this matches you" — the engine's per-diner reason, shown only on scored dishes. */
.rds-why { font: 600 13.5px/1.5 var(--sans); color: var(--accent-deep); margin: -4px 0 12px; }
/* External-praise line (mined from the venue's real reviews). Only renders when the dish
   has NO Palate loves — our own verified "N diners loved this" always outranks it. */
.rds-praise { display: flex; align-items: center; gap: 6px; font: 500 13px/1.4 var(--sans); color: var(--fg3); margin: -4px 0 12px; }
.rds-served { font: 500 13.5px/1.5 var(--sans); color: var(--fg3); margin: 0 0 10px; }
/* A pick the diner has to make outranks a passive "comes with" — give it the accent. */
.rds-pick { color: var(--accent); font-weight: 700; }
.rds-loved { font: 600 13.5px/1.4 var(--sans); color: var(--accent-deep); margin: 6px 0 0; }
.rds-allerg { font: 500 13px/1.4 var(--sans); color: var(--fg3); margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .rdish-sheet .rds-panel { animation: none; } }

/* Phase 2 — community photos: menu-row thumb, dish-sheet gallery, Photos-tab grid, lightbox */
.rdish-r { display: flex; align-items: center; gap: 10px; flex: none; }
/* The row-opens-a-sheet AFFORDANCE (founder: "is there a button to view the dish?" —
   the whole row always opened the sheet, but nothing said so). Quiet caret, always. */
.rdish-go { display: inline-flex; color: var(--fg3, #A89A85); font-size: 14px; margin-left: -2px; }
.rdish { cursor: pointer; }
/* Credit under a promoted hero — the diner whose photo made the menu */
.rds-credit { display: flex; align-items: center; gap: 6px; font: 600 12px/1.3 var(--sans);
  color: var(--fg3, #A89A85); margin: 8px 0 2px; }
.rds-credit i { font-size: 14px; color: var(--accent, #C2502F); }
.rdish-thumb { width: 54px; height: 54px; border-radius: 10px; background-size: cover; background-position: center; flex: none; position: relative; box-shadow: var(--shadow-sm); }
.rdish-thumb-n { position: absolute; right: 3px; bottom: 3px; background: color-mix(in srgb, #000 62%, transparent); color: #fff; font: 700 10px/1 var(--sans); padding: 3px 5px; border-radius: 999px; }

.rds-gallery { margin: 2px 0 12px; }
.rds-gallery-h { font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); margin: 0 0 8px; }
.rds-gallery-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rds-gallery-row::-webkit-scrollbar { display: none; }
.rds-thumb { width: 92px; height: 92px; flex: none; border: none; border-radius: 12px; background-size: cover; background-position: center; cursor: pointer; padding: 0; }

.rphoto-loading { text-align: center; color: var(--fg3); font: 500 14px/1 var(--sans); padding: 40px 0; }
.rphoto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 2px 0 24px; }
.rphoto-tile { aspect-ratio: 1; border: none; padding: 0; border-radius: 4px; background-size: cover; background-position: center; cursor: pointer; }

.rphoto-lb { position: fixed; inset: 0; z-index: 260; background: rgba(10,7,4,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.rphoto-lb-x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; border-radius: 999px; border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.rphoto-lb-img { max-width: 100%; max-height: 72vh; border-radius: 12px; object-fit: contain; }
.rphoto-lb-cap { color: #fff; text-align: center; margin-top: 16px; max-width: 90%; }
.rphoto-lb-dish { font: 400 20px/1.2 var(--serif); margin-bottom: 4px; }
.rphoto-lb-by { font: 600 13px/1.3 var(--sans); color: rgba(255,255,255,.7); }
.rphoto-lb-ver { color: #7FD99A; }
.rphoto-lb-text { font: 400 14px/1.5 var(--sans); color: rgba(255,255,255,.85); margin-top: 8px; }

/* Phase 3 — add-a-photo + opt-in share, in the dish sheet */
.rds-add { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.rds-addbtn { width: 100%; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 999px; padding: 13px; font: 700 14.5px/1 var(--sans); cursor: pointer; transition: background .14s; }
.rds-addbtn:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.rds-share { display: flex; align-items: center; gap: 9px; margin-top: 12px; font: 600 13.5px/1.3 var(--sans); color: var(--fg2); cursor: pointer; }
.rds-share input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.rds-addstatus { font: 600 13px/1.4 var(--sans); color: var(--accent-deep); margin: 10px 0 0; }

/* Phase 4 — build an order from the menu (quick-add, order bar, review sheet) */
.rdish-add { flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface); color: var(--accent-deep); font: 700 19px/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .14s, color .14s, transform .14s; }
.rdish-add:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.rdish-add.in { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rdish-add:active { transform: scale(.9); }

.rmenu-orderbar { pointer-events: auto; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 440px; }
.rmenu-ask { flex: none; width: 50px; height: 50px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font-size: 20px; cursor: pointer; box-shadow: var(--shadow-md); }
.rmenu-go { flex: 1; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; padding: 16px; font: 700 15.5px/1 var(--sans); cursor: pointer; box-shadow: var(--shadow-md); transition: filter .14s, transform .14s; }
.rmenu-go:hover { filter: brightness(1.05); }
.rmenu-go:active { transform: scale(.98); }

.rds-order { width: 100%; margin: 4px 0 14px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 999px; padding: 13px; font: 700 14.5px/1 var(--sans); cursor: pointer; transition: background .14s; }
.rds-order:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.rds-order.in { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* L7 — STATED love (♥) on the menu sheet. A real verdict is visit-only; here you can only say you love it. */
.rds-love { margin: 2px 0 12px; }
.rds-love-btn { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 999px; padding: 9px 15px; font: 700 13.5px/1 var(--sans); cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.rds-love-btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.rds-love-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rds-love-ic { font-size: 15px; line-height: 1; }

.rord-list { margin: 4px 0 6px; }
.rord-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rord-name { flex: 1; font: 600 15px/1.3 var(--sans); color: var(--fg1); }
.rord-price { font: 600 14px/1 var(--sans); color: var(--fg2); }
.rord-rm { flex: none; width: 28px; height: 28px; border-radius: 999px; border: none; background: var(--bg-2, var(--bg)); color: var(--fg3); font-size: 17px; line-height: 1; cursor: pointer; }
.rord-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 16px; font: 700 15px/1 var(--sans); color: var(--fg1); }
/* Table meter (Fullness Units) — does this order feed this exact table? Fill + verdict
   from /order/verdict (portions.py). Status hues only — the Ember spectrum stays
   reserved for taste visuals. */














.rds-confirm { width: 100%; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; padding: 16px; font: 700 16px/1 var(--sans); cursor: pointer; box-shadow: var(--shadow-md); transition: filter .14s, transform .14s; }
.rds-confirm:hover { filter: brightness(1.05); }
.rds-confirm:active { transform: scale(.98); }
.rds-confirm:disabled { opacity: .7; cursor: default; }
.rds-confirm-sub { text-align: center; font: 500 12.5px/1.4 var(--sans); color: var(--fg3); margin: 10px 0 0; }

/* Refined dish card — photo hero + name/price head */
.rds-hero { margin: -14px -22px 14px; height: 200px; background-size: cover; background-position: center; border-radius: 22px 22px 0 0; position: relative; cursor: pointer; }
.rds-x-hero { background: rgba(20,12,7,.5); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rds-hero-count { position: absolute; left: 14px; bottom: 12px; background: rgba(20,12,7,.55); color: #fff; font: 700 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rds-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.rds-head .rds-name { margin: 0; }
.rds-head .rds-price { margin: 0; white-space: nowrap; font: 700 16px/1 var(--sans); color: var(--accent-deep); }



/* ════════════════════════════════════════════════════════════════════════════
   ONBOARDING — Palate (3) handoff: the Taste DNA reveal (the climax).
   A LIGHT cream "gallery" gradient with a floating printed taste card —
   terracotta top edge, weighted spectrum-signature ribbon (the 5 taste hues
   blended by the diner's real axis proportions), four trait bars, a wax seal.
   Replaces the older dark dramatic reveal. Uses the Ember --lp-* tokens.
   ════════════════════════════════════════════════════════════════════════════ */
.onbr {
  min-height: 100vh; min-height: 100dvh; font-family: var(--lp-sans);
  background: radial-gradient(125% 85% at 50% -8%, #FCF6EC 0%, #F3E9D8 46%, #EADCC6 100%);
}
.onbr-scroll { max-width: 480px; margin: 0 auto; padding: 46px 22px 36px; display: flex; flex-direction: column; }
/* ── Task 7 — the crafted "Taste DNA" lockup. The brand's terracotta fingerprint
   whorl as a small stamped mark between two hairline rules, with a hand-set serif
   wordmark beneath ("Taste DNA", DNA in italic terracotta). Reads as a printed
   artifact header, not a generic eyebrow. The whorl draws itself in on entry. */
.onbr-lockup { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 9px; }
.onbr-lock-rule { height: 1px; width: 46px; flex: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lp-terra) 50%, transparent)); }
.onbr-lockup .onbr-lock-rule:last-child { background: linear-gradient(90deg, color-mix(in srgb, var(--lp-terra) 50%, transparent), transparent); }
.onbr-mark { width: 42px; height: 42px; flex: none; display: block; }
.onbr-mark svg { width: 42px; height: 42px; display: block; overflow: visible; }
.onbr-mark svg path { stroke: var(--lp-terra);
  stroke-dasharray: 360; stroke-dashoffset: 360; animation: onbrMarkDraw 1.5s cubic-bezier(.22,.7,.2,1) forwards; }
/* stagger the whorl rings so it "prints" from the centre outward */
.onbr-mark svg path:nth-child(1){ animation-delay:.02s } .onbr-mark svg path:nth-child(2){ animation-delay:.08s }
.onbr-mark svg path:nth-child(3){ animation-delay:.14s } .onbr-mark svg path:nth-child(4){ animation-delay:.2s }
.onbr-mark svg path:nth-child(5){ animation-delay:.26s } .onbr-mark svg path:nth-child(6){ animation-delay:.32s }
.onbr-mark svg path:nth-child(7){ animation-delay:.38s } .onbr-mark svg path:nth-child(8){ animation-delay:.44s }
.onbr-mark svg path:nth-child(9){ animation-delay:.5s }
@keyframes onbrMarkDraw { to { stroke-dashoffset: 0; } }
.onbr-lock-word { text-align: center; font-family: var(--lp-serif, "Fraunces", Georgia, serif);
  font-weight: 400; font-size: 22px; letter-spacing: .01em; color: var(--lp-espresso); margin: 0 0 22px; }
.onbr-lock-word em { font-style: italic; color: var(--lp-terra); letter-spacing: .04em; }
.onbr-card {
  position: relative; background: var(--lp-sand); border-radius: 24px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--lp-espresso) 9%, transparent);
  box-shadow: 0 40px 80px -24px rgba(42,32,24,.32), 0 12px 30px -10px rgba(42,32,24,.18), 0 1px 0 rgba(255,255,255,.7) inset;
  animation: onbrIn .6s cubic-bezier(.16,1,.3,1) both;
}
.onbr-edge { height: 5px; background: var(--lp-terra); }
.onbr-pad { padding: 22px 24px 26px; }
.onbr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onbr-wordmark { font-family: var(--lp-serif); font-size: 19px; color: var(--lp-espresso); letter-spacing: -.01em; }
.onbr-pdot { color: var(--lp-terra); }
.onbr-serial { font-weight: 600; font-size: 10.5px; letter-spacing: .16em; color: var(--lp-fg3); white-space: nowrap; }
.onbr-rule { height: 1px; background: color-mix(in srgb, var(--lp-espresso) 12%, transparent); margin: 18px 0 22px; }
.onbr-name-wrap { text-align: center; }
.onbr-youare { font-weight: 600; font-size: 12px; letter-spacing: .01em; text-transform: none; color: var(--lp-fg3); margin-bottom: 12px; }
.onbr-name { font-family: var(--lp-serif); font-weight: 400; font-size: 40px; line-height: .98; letter-spacing: -.02em; color: var(--lp-espresso); margin: 0; }
.onbr-accent { font-style: italic; color: var(--lp-terra); }
.onbr-tagline { font-size: 15px; line-height: 1.5; color: var(--lp-fg2); margin: 14px auto 0; max-width: 28ch; }
/* Phase 2D — honest day-0 framing: the archetype is a guess that self-corrects from
   ratings, so we say so rather than asserting a frozen identity. */
.onbr-settling { font-size: 12.5px; line-height: 1.45; font-style: italic; color: var(--lp-fg2);
  opacity: .82; margin: 9px auto 0; max-width: 30ch; }
.onbr-sig-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.onbr-sig-label { font-weight: 700; font-size: 12px; letter-spacing: .01em; text-transform: none; color: var(--lp-fg3); }
.onbr-sig-desc { font-family: var(--lp-serif); font-style: italic; font-size: 13px; color: var(--lp-fg2); white-space: nowrap; }
.onbr-ribbon { position: relative; height: 18px; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lp-espresso) 12%, transparent);
  transform-origin: left; animation: onbrRibbon 1.1s cubic-bezier(.16,1,.3,1) both; }
.onbr-ribbon-fill { position: absolute; inset: 0; }
.onbr-ribbon-grain { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.7) .5px, transparent .6px); background-size: 4px 4px; }
.onbr-legend { display: flex; justify-content: space-between; margin-top: 11px; }
.onbr-leg { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.onbr-leg i { width: 7px; height: 7px; border-radius: 999px; display: block; }
.onbr-leg span { font-weight: 600; font-size: 9.5px; letter-spacing: .04em; color: var(--lp-fg3); }
.onbr-traits { display: grid; gap: 14px; }
.onbr-trait { display: flex; align-items: center; gap: 14px; }
.onbr-trait-k { width: 66px; flex: none; font-weight: 600; font-size: 12.5px; color: var(--lp-fg2); }
.onbr-trait-track { flex: 1; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--lp-espresso) 10%, transparent); overflow: hidden; }
.onbr-trait-fill { display: block; height: 100%; border-radius: 999px; }
.onbr-trait-read { flex: none; width: 96px; text-align: right; font-weight: 500; font-size: 11.5px; line-height: 1.2; color: var(--lp-fg3); }
.onbr-seal-row { display: flex; align-items: center; gap: 14px; }
.onbr-seal { width: 46px; height: 46px; flex: none; border-radius: 50%; position: relative; border: 1.5px solid var(--lp-terra);
  color: var(--lp-terra); display: grid; place-items: center; font-family: var(--lp-serif); font-size: 21px; line-height: 1; }
.onbr-seal::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--lp-terra) 40%, transparent); }
.onbr-seal svg { width: 24px; height: 24px; display: block; }
.onbr-seal-title { font-family: var(--lp-serif); font-size: 15px; color: var(--lp-espresso); }
.onbr-seal-sub { font-weight: 500; font-size: 12px; color: var(--lp-fg3); margin-top: 3px; }
.onbr-promises { display: grid; gap: 12px; margin: 24px 4px 0; }
.onbr-promise { display: flex; gap: 12px; align-items: flex-start; }
.onbr-promise-ic { flex: none; color: var(--lp-terra); margin-top: 1px; display: grid; place-items: center; }
.onbr-promise-t { font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--lp-espresso) 72%, transparent); }
.onbr-actions { display: grid; gap: 12px; margin-top: 28px; }
.onbr-share { display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; background: var(--lp-sand);
  border: 1.5px solid color-mix(in srgb, var(--lp-espresso) 22%, transparent); border-radius: 999px; padding: 15px;
  font-family: var(--lp-sans); font-weight: 700; font-size: 15px; color: var(--lp-espresso); }
.onbr-share:hover { border-color: var(--lp-terra); color: var(--lp-terra-deep); }
.onbr-start { display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; border: 0; cursor: pointer; background: var(--lp-terra);
  color: var(--lp-cream); border-radius: 999px; padding: 16px; font-family: var(--lp-sans); font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--lp-terra) 70%, transparent); }
.onbr-start:hover { background: var(--lp-terra-deep); }
.onbr-foot { text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--lp-fg3); margin: 18px 0 0; }
.onbr-ready { text-align: center; margin: 30px 0 6px; }
.onbr-ready-k { font-family: var(--lp-serif, "DM Serif Display", Georgia, serif); font-weight: 400; font-size: 23px; color: var(--lp-espresso); margin: 0 0 6px; }
.onbr-ready-s { font-family: var(--lp-sans); font-size: 13.5px; line-height: 1.5; color: var(--lp-fg2); margin: 0 auto; max-width: 32ch; }
.onbr-explore { display: block; text-align: center; margin-top: 2px; padding: 8px; font-family: var(--lp-sans); font-weight: 600; font-size: 13px; color: var(--lp-fg3); text-decoration: none; }
.onbr-explore:hover { color: var(--lp-terra); }
@keyframes onbrIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes onbrRibbon { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .onbr-card, .onbr-ribbon { animation: none; }
  .onbr-mark svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ONBOARDING — account-step polish to match the Palate (3) handoff:
   Segmented controls (residency / appetite), the on-brand Selectish birthday
   picker, and the design's check-circle multi-select chips. Ember --lp-* tokens.
   ════════════════════════════════════════════════════════════════════════════ */
/* Segmented — 2–3 equal-width segments, active = terracotta (design Segmented). */
.quiz-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: 0 0 14px; }
.quiz-seg-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer;
  padding: 13px 10px; border-radius: var(--r-md); text-align: center; background: var(--lp-sand);
  border: 1.5px solid var(--lp-line-strong); color: var(--lp-espresso); font-family: var(--lp-sans);
  transition: background .18s, border-color .18s, color .18s;
}
.quiz-seg-btn:hover { border-color: var(--lp-terra); }
.quiz-seg-btn.on { background: var(--lp-terra); border-color: var(--lp-terra); color: var(--lp-cream); }
.quiz-seg-l { font-weight: 600; font-size: 14px; line-height: 1.2; }
.quiz-seg-s { font-size: 11.5px; line-height: 1.3; color: var(--lp-fg3); }
.quiz-seg-btn.on .quiz-seg-s { color: color-mix(in srgb, var(--lp-cream) 80%, var(--lp-terra)); }

/* Selectish — the on-brand DOB dropdown (field button + soft sand popover). */
.quiz-selectish { position: relative; }
.dob-row .quiz-selectish { margin: 0; }
.dob-row .dob-d { flex: 0.8 1 0; } .dob-row .dob-m { flex: 1.5 1 0; } .dob-row .dob-y { flex: 1.05 1 0; }
.sel-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer;
  padding: 14px 14px; border-radius: var(--r-md); background: var(--lp-sand); border: 1.5px solid var(--lp-line-strong);
  font-family: var(--lp-sans); font-weight: 500; font-size: 15px; color: var(--lp-espresso);
  transition: border-color .15s, box-shadow .15s;
}
.sel-btn:hover { border-color: var(--lp-terra); }
.quiz-selectish.open .sel-btn { border-color: var(--lp-terra); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-terra) 14%, transparent); }
.sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-val.sel-ph { color: var(--lp-fg3); }
.sel-chev { flex: none; color: var(--lp-fg3); display: grid; transition: transform .18s, color .18s; }
.quiz-selectish.open .sel-chev { transform: rotate(180deg); color: var(--lp-terra); }
.sel-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 240px; overflow-y: auto;
  background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: var(--r-md);
  box-shadow: 0 18px 44px -16px rgba(42,32,24,.34); padding: 6px;
}
.sel-pop[hidden] { display: none; }
.sel-opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--r-sm); border: none; background: none; text-align: left;
  font-family: var(--lp-sans); font-weight: 500; font-size: 14.5px; color: var(--lp-espresso);
}
/* the class's display:flex out-specifies the UA [hidden]{display:none}, so the
   searchable filter (which sets o.hidden) needs this to actually hide non-matches. */
.sel-opt[hidden] { display: none; }
.sel-opt:hover { background: color-mix(in srgb, var(--lp-terra) 8%, transparent); }
.sel-opt.on { background: var(--lp-terra); color: var(--lp-cream); font-weight: 600; }
/* Keyboard typeahead / arrow highlight — stronger than hover (8%), distinct from
   the chosen value (.on, solid). Never override the already-selected option. */
.sel-opt.sel-active:not(.on) { background: color-mix(in srgb, var(--lp-terra) 15%, transparent); }
.sel-chk { flex: none; display: grid; }
/* Searchable popover — a porcelain field pinned (sticky) at the top of the scroll
   area so it stays put while the filtered list scrolls; matches the other fields. */
.sel-search-wrap { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 5px; padding: 6px;
  background: var(--lp-sand); border-bottom: 1px solid var(--lp-line); border-radius: var(--r-md) var(--r-md) 0 0; }
.sel-search { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--lp-cream); border: 1.5px solid var(--lp-line-strong); outline: none;
  font-family: var(--lp-sans); font-weight: 500; font-size: 14.5px; color: var(--lp-espresso);
  transition: border-color .15s, box-shadow .15s; }
.sel-search::placeholder { color: var(--lp-fg3); }
.sel-search:focus { border-color: var(--lp-terra); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-terra) 16%, transparent); }
.sel-nomatch { margin: 4px 2px 2px; padding: 8px 12px; font-family: var(--lp-sans); font-size: 13.5px;
  color: var(--lp-fg3); text-align: center; }
.sel-nomatch[hidden] { display: none; }
/* Account step: the lone Create-account button sits directly under the last field
   (nationality). A gap keeps it from looking flush against the field — and means
   the nationality dropdown (which opens just below the field) cleanly covers the
   button instead of leaving a terracotta sliver poking above its top edge. */
.quiz-card > .quiz-next--lone { margin-top: 22px; }
/* The home-area dropdown is a .quiz-selectish (no margin-bottom), so the helper
   line's default -4px top margin collapsed the gap to negative and jammed the
   text against the field. Restore the same ~9px field->hint rhythm the .auth-input
   fields use (13px input margin-bottom - 4px hint margin-top). */
.quiz-selectish + .auth-subhint { margin-top: 9px; }

/* Multi-select chips — the design's 20px check-circle; on = terracotta tint (not a full fill). */
.quiz-chip { display: inline-flex; align-items: center; gap: 10px; }
.quiz-chip::before {
  content: ""; width: 20px; height: 20px; flex: none; border-radius: 999px; box-sizing: border-box;
  border: 1.5px solid var(--lp-line-strong); background: transparent center / 13px no-repeat;
  transition: background .15s, border-color .15s;
}
.quiz-chip.on { background: color-mix(in srgb, var(--lp-terra) 12%, var(--lp-sand)); border-color: var(--lp-terra); color: var(--lp-espresso); }
.quiz-chip.on::before {
  border-color: var(--lp-terra); background-color: var(--lp-terra);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23FCF6EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════════════════════
   LANDING "How it works" — rebuilt to the Palate (3) onboarding handoff:
   three editorial cards (sand card + a 64px duotone image tile with a numbered
   badge + serif title + description), replacing the old plain divider list.
   ════════════════════════════════════════════════════════════════════════════ */
.home-steps { padding: 30px 22px 30px; border-top: none; background: var(--lp-cream); }
.home-steps-eyebrow {
  font-family: var(--lp-sans); font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .18em; color: var(--lp-terra); margin: 0 0 18px;
}
.home-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 560px; }
.home-step {
  display: flex; align-items: center; gap: 15px; padding: 14px;
  background: var(--lp-sand); border: 1px solid var(--lp-line); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(42,32,24,.07), 0 1px 3px rgba(42,32,24,.05);
}
.home-step-tile { position: relative; width: 64px; height: 64px; flex: none; border-radius: var(--r-md); overflow: hidden; }
.home-step-tile.tone-heat { background: radial-gradient(120% 130% at 75% 12%, #E97A4C 0%, #C2502F 46%, #7E2C16 100%); }
.home-step-tile.tone-adventure { background: radial-gradient(120% 130% at 75% 12%, #8AAE83 0%, #5C8C68 46%, #34503A 100%); }
.home-step-tile.tone-indulgence { background: radial-gradient(120% 130% at 75% 12%, #A6566E 0%, #7E3550 46%, #43223A 100%); }
.home-step-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .4;
  background-image: radial-gradient(rgba(255,255,255,.6) .5px, transparent .6px); background-size: 4px 4px; }
.home-step-num {
  position: absolute; right: 6px; top: 6px; z-index: 1; width: 22px; height: 22px; border-radius: 999px;
  background: var(--lp-cream); color: var(--lp-terra); display: grid; place-items: center;
  font-family: var(--lp-sans); font-weight: 700; font-size: 12px;
}
.home-step-body { flex: 1; min-width: 0; }
.home-step h3 {
  font-family: var(--lp-serif); font-weight: 400; font-size: 20px; line-height: 1.05;
  letter-spacing: -.01em; color: var(--lp-espresso); margin: 0 0 4px;
}
.home-step p { font-family: var(--lp-sans); font-size: 13.5px; line-height: 1.45; color: var(--lp-fg3); margin: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   ONBOARDING 1:1 — Landing "Find your type" teaser + closing band, the
   photo-hero Sign in, and the centered Intro. Palate (3) handoff · --lp-* tokens.
   ════════════════════════════════════════════════════════════════════════════ */
/* (The landing "Find your type / Five palates" teaser + its modal were removed —
   a marketing dead-end never wired to the real Taste DNA. The primary CTA lives in
   the hero and the closing band below.) */
.lp-closing { padding: 30px 22px 40px; text-align: center; background: var(--lp-cream); }
.lp-closing-txt { font-family: var(--lp-sans); font-size: 15px; line-height: 1.5; color: var(--lp-fg3); margin: 0; }
.lp-closing-word { font-family: var(--lp-serif); font-size: 20px; color: var(--lp-espresso); }
.lp-closing-word span { color: var(--lp-terra); }
.lp-closing-cta {
  margin-top: 22px;
  font-family: var(--lp-sans); font-weight: 600; font-size: 16px;
  border-radius: var(--r-pill); padding: 18px 22px;
}
/* Match the hero CTA exactly — flat terracotta, no gradient/sheen */
.lp-closing-cta.btn-primary {
  background: var(--lp-terra); color: var(--lp-cream);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lp-terra) 28%, transparent);
}
.lp-closing-cta.btn-primary::before { display: none; }
.lp-closing-cta.btn-primary:hover {
  background: var(--lp-terra-deep); filter: none; transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--lp-terra) 34%, transparent);
}

/* ── Meet Ember — simplified landing block (replaces the old How-it-works steps).
   .lp-meet-ember is a CSS placeholder; swap it for an <img> of the mascot art
   when ready. Scoped to .lp-meet so no other screen is affected. ── */
.lp-meet { padding: 8px 26px 48px; text-align: center; font-family: var(--lp-sans); background: var(--lp-cream); }
.lp-meet-ember {
  width: 96px; height: 108px; margin: 6px auto 20px; position: relative;
  border-radius: 52% 52% 50% 50% / 64% 64% 38% 38%;
  background: radial-gradient(120% 120% at 50% 28%, #F4BE7C 0%, #E0A330 30%, var(--lp-terra) 100%);
  box-shadow:
    0 16px 36px color-mix(in srgb, var(--lp-terra) 34%, transparent),
    inset 0 -7px 14px color-mix(in srgb, var(--lp-terra-deep) 42%, transparent),
    inset 0 7px 12px rgba(255,255,255,0.32);
}
.lp-meet-ember::before, .lp-meet-ember::after {
  content: ""; position: absolute; top: 45%; width: 9px; height: 12px;
  background: var(--lp-espresso); border-radius: 50%;
}
.lp-meet-ember::before { left: 33%; }
.lp-meet-ember::after  { right: 33%; }
.lp-meet-eyebrow {
  font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--lp-terra); margin: 0 0 8px;
}
.lp-meet-title {
  font-family: var(--lp-serif); font-weight: 400; font-size: clamp(28px, 8vw, 36px);
  line-height: 1.05; color: var(--lp-espresso); margin: 0 0 12px;
}
.lp-meet-title em { font-style: italic; color: var(--lp-terra); }
.lp-meet-txt { font-size: 16px; line-height: 1.55; color: var(--lp-fg2); max-width: 20rem; margin: 0 auto; }

/* ── Image-led landing hero (Allset-style: full-bleed photo → copy → CTA) ──── */
.lp-photo-hero { min-height: auto; padding: 0 0 46px; display: block; }
.lp-photo-hero::before, .lp-photo-hero::after { display: none !important; }
.lp-hero-photo { position: relative; width: 100%; }
.lp-hero-photo img {
  display: block; width: 100%; height: 300px;
  object-fit: cover; object-position: center;
  border-radius: 0 0 28px 28px;
}
/* Soft fade so the photo melts into the cream canvas */
.lp-hero-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px;
  background: linear-gradient(180deg, transparent, var(--lp-cream));
  pointer-events: none;
}
.lp-hero-body { padding: 24px 26px 0; text-align: center; }
.lp-photo-hero h1 { margin: 8px 0 14px; }
.lp-photo-hero .hero-lede { margin: 0 auto 26px; }
.lp-photo-hero .hero-actions { margin-top: 0; }
.lp-photo-hero .hero-note { margin-top: 18px; }

/* ════════════════════════════════════════════════════════════════════
   PHOTO HOME — signed-out landing: full-bleed photo + overlaid copy/CTA.
   Scoped to .lp-photohome so no other screen is affected.
   ════════════════════════════════════════════════════════════════════ */
.lp-photohome {
  position: relative; min-height: 100vh; min-height: 100dvh;
  overflow: hidden; background: #fff; font-family: var(--lp-sans);
}
.lp-ph-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; transform: translateY(9.5%);
}
.lp-ph-fade-top {
  position: absolute; top: 0; left: 0; right: 0; height: 46%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, #fff 18%, rgba(255,255,255,0) 100%);
}
.lp-ph-fade-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, #fff 10%, rgba(255,255,255,.85) 38%, rgba(255,255,255,0) 76%);
}
.lp-ph-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 18px;
}
.lp-photohome .lp-brand { display: inline-flex; align-items: center; text-decoration: none; }
.lp-photohome .lp-pmark { display: none !important; }
.lp-photohome .lp-word { font-family: var(--lp-serif); font-size: 26px; color: var(--lp-espresso); letter-spacing: -0.01em; line-height: 1; }
.lp-photohome .lp-dot { color: var(--lp-terra); }
.lp-ph-signup {
  font-family: var(--lp-sans); font-weight: 600; font-size: 14px; color: var(--lp-espresso); text-decoration: none;
  padding: 9px 18px; border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(42,32,24,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 4px 14px rgba(42,32,24,.12);
  transition: transform .15s var(--ease-out);
}
.lp-ph-signup:active { transform: scale(.96); }
.lp-ph-headline {
  position: absolute; z-index: 4; top: 11%; left: 24px; right: 24px; text-align: center;
  font-family: var(--lp-serif); font-weight: 400; font-size: clamp(33px, 10.5vw, 46px);
  line-height: 1.05; letter-spacing: -0.015em; color: var(--lp-espresso);
  text-shadow: 0 1px 14px rgba(255,255,255,.7);
}
.lp-ph-headline em { font-style: italic; color: var(--lp-terra); }
.lp-ph-bottom {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  padding: 0 22px calc(env(safe-area-inset-bottom, 0px) + 56px);
}
.lp-ph-cta {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
  padding: 18px; border-radius: var(--r-pill); text-decoration: none; border: none;
  font-family: var(--lp-sans); font-weight: 700; font-size: 16px; letter-spacing: .005em; color: var(--lp-cream);
  background: var(--lp-terra);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--lp-terra) 60%, transparent);
  transition: transform .15s var(--ease-out), background .2s, box-shadow .2s;
}
.lp-ph-cta:hover { transform: translateY(-1px); background: var(--lp-terra-deep); }
.lp-ph-cta:active { transform: translateY(0) scale(.985); }
.lp-ph-cta svg { width: 19px; height: 19px; flex-shrink: 0; }
.lp-ph-cta:hover svg { animation: lpHelixTwist .8s cubic-bezier(.34,1.4,.5,1); }
@keyframes lpHelixTwist {
  0%   { transform: perspective(220px) rotateY(0deg) scale(1); }
  40%  { transform: perspective(220px) rotateY(160deg) scale(1.18); }
  100% { transform: perspective(220px) rotateY(360deg) scale(1); }
}
/* Full-bleed landing: suppress the floating nav + the #app bottom nav-padding */
body:has(.lp-photohome) .floatnav { display: none !important; }
#app:has(.lp-photohome) { padding-bottom: 0 !important; background: #fff; }
@media (prefers-reduced-motion: reduce) { .lp-ph-cta:hover svg { animation: none; } }

/* Sign in — photo hero + form */
.signin-screen { min-height: 100vh; min-height: 100dvh; background: var(--lp-cream); display: flex; flex-direction: column; }
.signin-hero { position: relative; flex: none; height: 42vh; min-height: 280px; overflow: hidden; }
.signin-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.signin-hero-grain { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .4;
  background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .6px); background-size: 4px 4px; }
.signin-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,16,18,.42) 0%, transparent 28%, transparent 52%, rgba(18,16,18,.8) 100%); }
.signin-hero-content { position: relative; height: 100%; padding: calc(env(safe-area-inset-top, 0px) + 26px) 24px 26px;
  display: flex; flex-direction: column; justify-content: space-between; }
.signin-wordmark { font-family: var(--lp-serif); font-size: 26px; color: var(--lp-cream); text-decoration: none; align-self: flex-start; letter-spacing: -.01em; }
.signin-wordmark span { color: var(--lp-terra); }
.signin-eyebrow { font-family: var(--lp-sans); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--lp-cream) 80%, var(--lp-terra)); margin: 0 0 10px; }
.signin-headline { font-family: var(--lp-serif); font-weight: 400; font-size: 32px; line-height: 1.02; letter-spacing: -.01em; color: var(--lp-cream); margin: 0; }
.signin-form { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 24px 24px calc(env(safe-area-inset-bottom, 0px) + 30px); }
.signin-form .auth-input { border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s; }
.signin-form .auth-input:focus { outline: none; border-color: var(--lp-terra); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-terra) 14%, transparent); }
/* Continue with Google — the GIS button + an "or" divider above the email form */
.signin-oauth { margin: 0 0 18px; }
.signin-gbtn { display: flex; justify-content: center; min-height: 40px; }
.signin-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--lp-line); }
.signin-or span { font-family: var(--lp-sans); font-size: 12.5px; font-weight: 600; color: var(--lp-fg3); }
.signin-forgot { text-align: right; margin: -6px 0 14px; }
.signin-forgot a { font-family: var(--lp-sans); font-weight: 600; font-size: 13px; color: var(--lp-terra); text-decoration: none; }
.signin-btn { width: 100%; justify-content: center; margin-top: 4px; background: var(--lp-terra); border-color: var(--lp-terra);
  border-radius: 999px; padding: 16px; font-weight: 700; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--lp-terra) 70%, transparent); }
.signin-btn::before { display: none; }
.signin-btn:hover { background: var(--lp-terra-deep); filter: none; transform: translateY(-1px); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--lp-terra) 70%, transparent); }
.signin-create { text-align: center; margin: 18px 0 0; font-family: var(--lp-sans); font-size: 14px; color: var(--lp-fg3); }
.signin-create a { color: var(--lp-terra); font-weight: 700; text-decoration: none; }

/* Intro — centered, italic-terracotta title, 40px reassurance icon circles */
.onbi { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: flex; flex-direction: column; justify-content: center;
  max-width: 480px; margin: 0 auto; padding: 24px 18px 28px; box-sizing: border-box; }
/* White curved liquid-glass card holding the intro content + button, centered. */
.onbi-card {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76));
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.8); border-radius: 30px;
  box-shadow: 0 24px 56px -22px rgba(42,32,24,.30), inset 0 1px 0 rgba(255,255,255,.9);
  padding: 30px 26px 26px;
}
.onbi-eyebrow { font-family: var(--lp-sans); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--lp-terra); margin: 0 0 14px; }
.onbi-title { font-family: var(--lp-serif); font-weight: 400; font-size: 38px; line-height: 1.04; letter-spacing: -.02em; color: var(--lp-espresso); margin: 0 0 12px; }
.onbi-title em { font-style: italic; color: var(--lp-terra); }
.onbi-sub { font-family: var(--lp-sans); font-size: 15.5px; line-height: 1.5; color: var(--lp-fg2); margin: 0 0 20px; }
.onbi-rows { display: grid; gap: 14px; margin: 0 0 22px; }
.onbi-row { display: flex; align-items: center; gap: 14px; }
.onbi-ic { width: 40px; height: 40px; flex: none; border-radius: 999px; background: color-mix(in srgb, var(--lp-terra) 12%, transparent);
  color: var(--lp-terra); display: grid; place-items: center; }
.onbi-txt { font-family: var(--lp-sans); font-size: 16px; line-height: 1.4; color: var(--lp-fg2); }
.onbi-txt strong { color: var(--lp-espresso); font-weight: 700; }
/* Flat terracotta CTA (no glass), grouped right under the rows. */
.onbi-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; box-sizing: border-box; cursor: pointer;
  margin: 2px 0 0; border: none; border-radius: 999px; padding: 17px;
  font-family: var(--lp-sans); font-weight: 700; font-size: 15.5px; color: var(--lp-cream);
  background: var(--lp-terra);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--lp-terra) 70%, transparent);
  transition: background .2s, transform .15s var(--ease-out); }
.onbi-cta:hover { background: var(--lp-terra-deep); transform: translateY(-1px); }
.onbi-cta:active { transform: translateY(0) scale(.98); }
.onbi-cta svg { width: 18px; height: 18px; }
.onbi-cta:hover svg { animation: lpHelixTwist .8s cubic-bezier(.34,1.4,.5,1); }
.onbi-browse { display: block; text-align: center; font-family: var(--lp-sans); font-weight: 600; font-size: 14px; color: var(--lp-fg3);
  text-decoration: underline; text-underline-offset: 4px; padding: 8px; }

/* ════════════════════════════════════════════════════════════════════════════
   FIND A LUNCH (Discover + Group) — Palate (4) handoff pixel pass.
   The design's signature: a cream app COLUMN floating on warm tan "paper", a
   sticky P-squircle header, the full Ember palette, and editorial pick cards.
   Scoped to body.fal-on (added by discover.js + group.js) so nothing else moves.
   ════════════════════════════════════════════════════════════════════════════ */
body.fal-on {
  background: #FFFFFF;   /* white margin around the column */
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F8F6F3; --surface-3: #FFFFFF;
  --text: #2A2018;
  --text-2: color-mix(in srgb, #2A2018 66%, #FFFFFF);
  --text-3: color-mix(in srgb, #2A2018 44%, #FFFFFF);
  --line: color-mix(in srgb, #2A2018 13%, transparent);
  --line-2: color-mix(in srgb, #2A2018 24%, transparent);
  --line-soft: color-mix(in srgb, #2A2018 10%, transparent);
  --accent: #C2502F; --accent-deep: #9A3C20; --on-accent: #FCF6EC; --accent-grad: #C2502F;
  --glow-soft: color-mix(in srgb, #C2502F 12%, transparent); --glow: color-mix(in srgb, #C2502F 30%, transparent);
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2A2018 9%, transparent), 0 1px 3px color-mix(in srgb, #2A2018 6%, transparent);
  --shadow-md: 0 4px 14px color-mix(in srgb, #2A2018 11%, transparent), 0 2px 5px color-mix(in srgb, #2A2018 6%, transparent);
  --shadow-accent: 0 8px 22px color-mix(in srgb, #C2502F 32%, transparent);
  --fal-serif: 'DM Serif Display', 'Hoefler Text', Georgia, serif;
  --fal-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body.fal-on #app {
  max-width: 620px; margin: 0 auto; min-height: 100vh; background: var(--bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, #2A2018 7%, transparent), 0 30px 80px color-mix(in srgb, #2A2018 16%, transparent);
}
body.fal-on .page { padding: 30px 26px 28px; }
/* Discover "ask" screen: raise the Back chip into the unused top space (30→16) so it isn't crammed
   against the title; the title gets its own breathing room from .discover-hero margin-top below. */
body.fal-on .page:has(.discover-hero) { padding-top: 16px; }

/* Sticky P-squircle header.
   Solid background on purpose — a translucent bg + backdrop-filter:blur here
   forced the browser to re-blur the backdrop on EVERY scroll frame. Harmless on
   short pages, but on the long Passport "Food" photo grid it pushed frames to
   ~375ms (≈1s spikes) and froze the screen. A solid sand bar is just as clean
   and costs nothing per frame. */
body.fal-on .ob-nav {
  position: sticky; top: 0; z-index: 30; padding: 16px 26px;
  background: var(--surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;   /* explicitly override the GLOBAL .ob-nav blur (saturate+blur) — that's what froze the long Food tab */
  border-bottom: 1px solid var(--line);
}
body.fal-on .lp-brand { display: inline-flex; align-items: center; gap: 11px; }
body.fal-on .lp-pmark {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center; position: relative;
}
body.fal-on .lp-pmark::after { content: none; }
body.fal-on .lp-word { font-family: var(--fal-serif); font-size: 27px; font-weight: 400; color: var(--text); letter-spacing: -.01em; }
body.fal-on .lp-dot { color: var(--accent); }
body.fal-on #signout-btn { color: var(--text-3); font-weight: 500; }

/* Hero */
body.fal-on .discover-hero { margin-top: 18px; margin-bottom: 28px; }   /* gap between the Back chip and the title */
body.fal-on .discover-h1 { font-family: var(--fal-serif); font-weight: 400; font-size: 42px; line-height: 1.04; letter-spacing: -.015em; color: var(--text); margin: 8px 0 0; text-wrap: balance; }
body.fal-on .discover-sub { font-family: var(--fal-sans); font-size: 18px; line-height: 1.5; color: var(--text-2); margin-top: 12px; max-width: 34ch; }
body.fal-on .eyebrow-accent { color: var(--accent); font-family: var(--fal-sans); font-weight: 700; letter-spacing: .2em; }
/* Decide-flow: sentence-case, no wide tracking (brand rule — no all-caps labels) */
body.fal-on .discover-hero .eyebrow-accent { text-transform: none; letter-spacing: .01em; font-weight: 600; }

/* "For" segmented */
body.fal-on .df-for-seg { background: color-mix(in srgb, #2A2018 5%, transparent); }
body.fal-on .df-for-opt.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); border: 1px solid var(--line-2); }

/* Section labels + badges */
body.fal-on .df-label { font-family: var(--fal-sans); font-size: 12px; letter-spacing: .005em; text-transform: none; color: var(--text-3); font-weight: 700; }
body.fal-on .df-tag { font-size: 11px; letter-spacing: .16em; background: color-mix(in srgb, #2A2018 7%, transparent); color: var(--text-3); }
body.fal-on .df-tag-req { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

/* Meal cards */
body.fal-on .occ-grid { gap: 12px; }
body.fal-on .occ-opt { border-radius: var(--r-lg); padding: 18px 18px 20px; min-height: 0; border: 1.5px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
body.fal-on .occ-opt.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); }
body.fal-on .occ-opt-l { font-family: var(--fal-sans); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
body.fal-on .occ-opt-sub { font-family: var(--fal-sans); font-size: 14px; font-weight: 500; }
/* Decide flow: the photo-forward intent ROWS — a real mood photo in a rounded window
   on the left, DM-Serif label + Jakarta subtitle on porcelain beside it (text is never
   slabbed over the photo). The base .vibe-card rules carry the photo/badge treatment;
   these just retune type + the window for the warm fal shell. */
body.fal-on .vibe-card { padding: 13px 18px 13px 13px; border-radius: var(--r-lg); background: var(--surface); }
body.fal-on .vibe-card.is-on { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
body.fal-on .vibe-card-media { width: 92px; height: 74px; border-radius: 16px; }
body.fal-on .vibe-card-l { font-family: var(--fal-serif); font-size: 22px; font-weight: 400; letter-spacing: -.01em; color: var(--text); }
body.fal-on .vibe-card-sub { font-family: var(--fal-sans); font-size: 13.5px; font-weight: 500; color: var(--text-3); }
body.fal-on .vibe-card.is-on .vibe-card-l { color: var(--text); }
body.fal-on .vibe-card.is-on .vibe-card-sub { color: var(--text-2); }
/* SOLO intent cards — FULL-BLEED photo (smart-cropped cover fills the whole card), the
   label + sub set over a left-weighted scrim. This is how they read best before the
   windowed experiment. Same specificity as the windowed `body.fal-on .vibe-card` rule
   above but later in source, so it wins for the .vibe-card-photo-full variant only; the
   group-occasion icon rows keep the windowed treatment. */
body.fal-on .vibe-card-photo-full {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  position: relative; padding: 0; gap: 0; min-height: 140px;
  border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--surface);
  overflow: hidden; isolation: isolate; text-align: left;
}
body.fal-on .vibe-card-photo-full .vibe-card-photo {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 58%;
  transform: scale(1.001); transition: transform .5s var(--ease-out);
}
body.fal-on .vibe-card-photo-full .vibe-card-photo-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(102deg, rgba(18,11,5,.78) 0%, rgba(18,11,5,.52) 40%, rgba(18,11,5,.14) 72%, rgba(18,11,5,0) 100%),
    linear-gradient(to top, rgba(18,11,5,.36) 0%, transparent 52%);
}
body.fal-on .vibe-card-photo-full .vibe-card-body { position: relative; z-index: 2; padding: 15px 18px 16px; gap: 3px; }
body.fal-on .vibe-card-photo-full .vibe-card-l { color: #FFF7EE; }
body.fal-on .vibe-card-photo-full .vibe-card-sub { color: rgba(255,247,238,.88); }
body.fal-on .vibe-card-photo-full .vibe-card-badge { top: 10px; right: 10px; z-index: 3; }
body.fal-on .vibe-card-photo-full:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
body.fal-on .vibe-card-photo-full:hover .vibe-card-photo { transform: scale(1.06); }
body.fal-on .vibe-card-photo-full.is-on { border-color: var(--accent); box-shadow: 0 12px 28px -16px var(--glow), 0 0 0 1.5px var(--accent); }
body.fal-on .vibe-card-photo-full.is-on .vibe-card-l { color: #FFF7EE; }
body.fal-on .vibe-card-photo-full.is-on .vibe-card-sub { color: rgba(255,247,238,.92); }

/* Refine accordion + chips */
body.fal-on .df-rows { gap: 10px; }
body.fal-on .df-row { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
body.fal-on .df-row.is-open { border-color: var(--line-2); }
body.fal-on .df-row-label { font-family: var(--fal-sans); font-size: 16px; font-weight: 700; }
body.fal-on .df-row-val { font-family: var(--fal-sans); font-size: 15px; font-weight: 600; }
body.fal-on .df-row.is-open .df-row-chev { color: var(--accent); }
body.fal-on .df-chips .tchip { font-family: var(--fal-sans); font-weight: 600; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); border-radius: 999px; }
body.fal-on .df-chips .tchip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body.fal-on .df-tiles .df-tile.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Unified funnel v2.1 — inline "who's coming" diners panel, craving search, and the
   result-page recovery row. All match the fal-on card/chip system so the page stays
   cohesive the moment you tap "+ Add diners". */
body.fal-on .df-diners {
  margin: 0 0 22px; padding: 16px 16px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
body.fal-on .df-diners-k {
  font-family: var(--fal-sans); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 10px;
}
body.fal-on .df-diners-empty { font-family: var(--fal-sans); font-size: 13.5px; color: var(--text-3); margin: 4px 0; }
body.fal-on .df-friendchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
body.fal-on .df-diners-extra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
body.fal-on .df-stepper { display: inline-flex; align-items: center; gap: 16px; }
body.fal-on .df-step {
  width: 34px; height: 34px; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: var(--bg); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: border-color .15s, color .15s;
}
body.fal-on .df-step:hover { border-color: var(--accent); color: var(--accent); }
body.fal-on .df-step-n { font-family: var(--fal-serif); font-size: 20px; min-width: 22px; text-align: center; color: var(--text); }

body.fal-on .df-craveq {
  width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 12px 15px;
  font-family: var(--fal-sans); font-size: 15px; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-md);
}
body.fal-on .df-craveq:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
body.fal-on .df-craveq::placeholder { color: var(--text-3); }

body.fal-on .df-recover { margin: 18px 0 4px; text-align: center; }
body.fal-on .df-recover-k { font-family: var(--fal-sans); font-size: 13px; color: var(--text-3); margin: 0 0 10px; }
body.fal-on .df-recover-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
body.fal-on .df-recover-btn {
  font-family: var(--fal-sans); font-weight: 700; font-size: 13.5px; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 999px;
  padding: 11px 18px; cursor: pointer; transition: border-color .15s, color .15s;
}
body.fal-on .df-recover-btn:hover { border-color: var(--accent); color: var(--accent); }
body.fal-on .df-why { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0 0; }
body.fal-on .df-recover-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); }
body.fal-on .df-recover-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-accent); }
body.fal-on .df-recover-or { font-family: var(--fal-sans); font-size: 13px; color: var(--text-3); margin: 16px 0 10px; }

/* ── Refine strip — the premium "Not the one?" block that REPLACES the chatty recover
   cluster. A quiet serif prompt + a ghost "Show another" (SVG refresh) + icon refine
   chips. No glyph arrows, no assistant-speak. ── */
body.fal-on .df-refine { margin: 24px 0 2px; padding: 18px 18px 6px; border-top: 1px solid var(--line); }
body.fal-on .df-refine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.fal-on .df-refine-k { font-family: var(--fal-serif); font-size: 17px; font-weight: 400; color: var(--text); margin: 0; letter-spacing: -.01em; }
body.fal-on .df-refine-again { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fal-sans); font-weight: 600; font-size: 13.5px; color: var(--accent-deep); background: none; border: 0; padding: 6px 2px; cursor: pointer; transition: color .18s var(--ease-out), transform .18s var(--ease-out); }
body.fal-on .df-refine-again svg { transition: transform .45s var(--ease-out); }
body.fal-on .df-refine-again:hover { color: var(--accent); }
body.fal-on .df-refine-again:hover svg { transform: rotate(-110deg); }
body.fal-on .df-refine-again:active { transform: scale(.97); }
body.fal-on .df-refine-again:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
body.fal-on .df-refine-why { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
body.fal-on .df-refine-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fal-sans); font-weight: 600; font-size: 13px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px 9px 12px; cursor: pointer; transition: border-color .16s var(--ease-out), color .16s var(--ease-out), background .16s var(--ease-out), transform .12s var(--ease-out); }
body.fal-on .df-refine-chip svg { color: var(--text-3); transition: color .16s var(--ease-out); }
body.fal-on .df-refine-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
body.fal-on .df-refine-chip:hover svg { color: var(--accent); }
body.fal-on .df-refine-chip:active { transform: scale(.96); }
body.fal-on .df-refine-chip:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
/* Quiet "Change the request" back link — SVG chevron, centered, understated. */
body.fal-on .df-changereq { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: 16px auto 8px; padding: 9px 14px; font-family: var(--fal-sans); font-weight: 600; font-size: 13px; color: var(--text-3); background: none; border: 0; cursor: pointer; transition: color .18s var(--ease-out), transform .12s var(--ease-out); }
body.fal-on .df-changereq svg { transition: transform .18s var(--ease-out); }
body.fal-on .df-changereq:hover { color: var(--text); }
body.fal-on .df-changereq:hover svg { transform: translateX(-2px); }
body.fal-on .df-changereq:active { transform: scale(.98); }
body.fal-on .df-changereq:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
/* Alternates label — editorial sentence-case serif italic, never an all-caps tracked eyebrow. */
body.fal-on .df-reveal-alts .pp-section-label { text-transform: none; letter-spacing: 0; font-family: var(--fal-serif); font-style: italic; font-weight: 400; font-size: 16px; color: var(--text-2); }

/* Sticky request footer */
body.fal-on #df-footbar.df-foot { max-width: 620px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px color-mix(in srgb, #2A2018 8%, transparent); }
body.fal-on .df-summary-k { color: var(--text-3); }
body.fal-on .df-summary-v { font-family: var(--fal-sans); font-size: 16px; color: var(--text-2); }
body.fal-on .df-go { background: var(--accent); border-radius: 999px; box-shadow: var(--shadow-accent); font-weight: 700; }
body.fal-on .df-go:hover { background: var(--accent-deep); }

/* Result — hero pick card */
body.fal-on .discover-pick { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: 16px; }
body.fal-on .rc-photo-pick { aspect-ratio: 4 / 3; height: auto; max-height: 360px; border-radius: 16px; margin-bottom: 16px; background-position: center; }
body.fal-on .card-cuisine { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border-radius: 999px; padding: 6px 12px; }
body.fal-on .card-price { font-family: var(--fal-sans); font-weight: 600; font-size: 17px; color: var(--text-3); }
body.fal-on .card-match.m-strong { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 8px 13px; box-shadow: var(--shadow-accent); }
body.fal-on .card-match.m-strong::before { content: "★"; font-size: 12px; line-height: 1; }
body.fal-on .card-match.lead-reason.m-strong::before { content: none; }   /* F3-B occasion-led headline */
body.fal-on .discover-pick-name { font-family: var(--fal-serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -.015em; color: var(--text); }
body.fal-on .discover-pick-meta { font-family: var(--fal-sans); font-weight: 500; font-size: 15px; color: var(--text-3); }
body.fal-on .discover-pick-budget { font-family: var(--fal-serif); font-style: italic; font-size: 17px; color: var(--text-2); margin: 4px 0 16px; }
body.fal-on .discover-why-line { font-family: var(--fal-sans); font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
body.fal-on .discover-pick-dish { font-family: var(--fal-sans); font-weight: 700; font-size: 15.5px; line-height: 1.5; color: var(--accent); margin: 8px 0 0; }
body.fal-on .df-relaxed { margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-2); font-family: var(--fal-sans); font-size: 13.5px; line-height: 1.45; }
body.fal-on .why-tonight-k { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
body.fal-on .why-chip { font-family: var(--fal-sans); font-weight: 600; font-size: 14px; color: var(--text); background: color-mix(in srgb, #2A2018 7%, transparent); border-radius: 999px; padding: 9px 14px; }
body.fal-on .discover-cta { color: var(--accent); font-family: var(--fal-sans); font-weight: 600; font-size: 16px; }
body.fal-on .discover-handoff { display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 15px; color: var(--text); font-family: var(--fal-sans); font-weight: 700; font-size: 15px; text-decoration: none; }
body.fal-on .discover-handoff:hover { border-color: var(--accent); color: var(--accent); }
/* Why-this-fits — the transparent trust block on the match (occasion + real taste reasons) */
body.fal-on .why-fits { margin: 14px 0 2px; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 14px; }
body.fal-on .why-fits-k { font-family: var(--fal-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 9px; }
body.fal-on .why-fits-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
body.fal-on .wf-row { position: relative; padding-left: 18px; font-family: var(--fal-sans); font-size: 14.5px; line-height: 1.4; color: var(--text-2); }
body.fal-on .wf-row::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
body.fal-on .wf-occ { font-weight: 700; color: var(--text); }
/* Handoff — "Build my order" (primary) + "I'm going" (secondary), Maps demoted */
body.fal-on .discover-actions { display: flex; gap: 10px; margin: 16px 0 8px; }
body.fal-on .discover-actions .btn { flex: 1; border-radius: 999px; padding: 16px 14px; font-family: var(--fal-sans); font-weight: 700; font-size: 15.5px; text-align: center; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
body.fal-on .discover-build { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); border: none; }
body.fal-on .discover-build:hover { background: var(--accent-deep); }
body.fal-on .discover-going { background: var(--surface); color: var(--text); border: 1.5px solid var(--line-2); }
body.fal-on .discover-going:hover { border-color: var(--accent); color: var(--accent); }
body.fal-on .discover-handoff-mini { padding: 11px; font-size: 13.5px; font-weight: 600; color: var(--text-3); border: none; background: transparent; }
body.fal-on .discover-handoff-mini:hover { color: var(--accent); border: none; }
/* Tightened funnel — Area + Mood sit a touch closer under the occasion grid */
body.fal-on .df-block-slim { margin-top: 8px; }
/* Back to home — quiet, top-left of the ask screen */
body.fal-on .df-backhome { display: inline-block; font-family: var(--fal-sans); font-weight: 600; font-size: 13.5px; color: var(--text-3); text-decoration: none; margin: 0 0 12px; }
body.fal-on .df-backhome:hover { color: var(--accent); }
body.fal-on .tonight-adjust { color: var(--text-3); }
/* Alternates */
body.fal-on .alt-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 16px; }
body.fal-on .alt-card .card-name { font-family: var(--fal-serif); font-weight: 400; font-size: 28px; color: var(--text); }
body.fal-on .alt-card .card-area { color: var(--text-3); }
body.fal-on .alt-card .card-cta { color: var(--accent); font-weight: 600; }
body.fal-on .pp-section-label { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--text-3); }
/* Decide reveal alternates: sentence-case section label (no all-caps) */
body.fal-on .df-reveal-alts .pp-section-label { text-transform: none; letter-spacing: .01em; font-weight: 600; }

/* Decide cinematic reveal — match the warm-shell typeface (DM Serif + Jakarta) so the
   hero, headline and dish line read native to the fal shell, not a foreign font. */
body.fal-on .dp-hero-name { font-family: var(--fal-serif); font-weight: 400; font-size: 32px; letter-spacing: -.02em; }
body.fal-on .dp-hero-eyebrow, body.fal-on .dp-hero-rating, body.fal-on .dp-hero-cuisine,
body.fal-on .dp-hero-price, body.fal-on .dp-hero-area, body.fal-on .dp-card-headline,
body.fal-on .dp-ring-k { font-family: var(--fal-sans); }
/* "For your table of N" — DM Serif Display in the warm shell (item 5, founder dislike fix) */
body.fal-on .dp-hero-eyebrow.dp-hero-table { font-family: var(--fal-serif); font-weight: 400; font-size: 16px; letter-spacing: -.01em; }
body.fal-on .dp-ring-n { font-family: var(--fal-serif); font-weight: 400; }
body.fal-on .dp-card-headline.lead-reason { font-family: var(--fal-serif); font-weight: 400; }
body.fal-on .dp-dish-txt { font-family: var(--fal-serif); font-weight: 400; font-style: normal; font-size: 17px; }

/* ── Rating pill — small gold star + rating, on alternates + more-options rows (item 6) ── */
body.fal-on .df-rating { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fal-sans); }
body.fal-on .df-rating svg { color: #E0A92E; }
body.fal-on .df-rating-n { font-weight: 700; font-size: 13px; color: var(--text); }
body.fal-on .df-rating-c { font-weight: 500; font-size: 12px; color: var(--text-3); }
/* place the rating pill alongside the badge/menu chips in the alt-card chiprow */
body.fal-on .alt-card .df-chiprow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }

/* ── Group: per-member fit rows — each diner's individual % match (item 7) ──────── */
body.fal-on .df-gm { margin: 14px 0 4px; padding: 15px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); }
body.fal-on .df-gm-k { font-family: var(--fal-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
body.fal-on .df-gm-list { display: flex; flex-direction: column; gap: 11px; }
body.fal-on .df-gm-row { display: flex; align-items: center; gap: 10px; }
body.fal-on .df-gm-av { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  font-family: var(--fal-serif); font-size: 12px; color: var(--on-accent);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 78%, #2A1109), var(--accent)); }
body.fal-on .df-gm-name { flex: 0 0 76px; font-family: var(--fal-sans); font-weight: 600; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .df-gm-bar { flex: 1; height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text-3) 18%, transparent); }
body.fal-on .df-gm-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transition: width .5s var(--ease-out); }
body.fal-on .df-gm-pct { flex: 0 0 auto; min-width: 34px; text-align: right; font-family: var(--fal-sans);
  font-weight: 700; font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }
body.fal-on .df-gm-limited { flex: 0 0 auto; font-family: var(--fal-sans); font-weight: 600; font-size: 10.5px;
  color: var(--text-3); white-space: nowrap; }

/* ── Staged "Show more" — the deeper shortlist, revealed 3 → 10 → 20 (item 8) ──── */
body.fal-on .df-more { margin: 16px 0 4px; display: flex; flex-direction: column; }
/* the toggle sits BELOW the list now (it's a "reveal the next batch" affordance) */
body.fal-on .df-more-toggle { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 14px 18px; border-radius: var(--r-lg); background: var(--surface);
  border: 1.5px solid var(--line-2); box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .2s, transform .18s var(--ease-spring); }
body.fal-on .df-more-toggle:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
body.fal-on .df-more-toggle:active { transform: scale(.99); }
body.fal-on .df-more-toggle:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
body.fal-on .df-more-toggle-l { flex: 1; text-align: left; font-family: var(--fal-sans); font-weight: 700; font-size: 15px; color: var(--text); }
body.fal-on .df-more-count { flex: none; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center; font-family: var(--fal-sans); font-weight: 700; font-size: 12px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* chevron points DOWN ("reveal more"); nudges on hover for life */
body.fal-on .df-more-chev { flex: none; width: 18px; height: 18px; color: var(--text-3);
  transform: rotate(90deg); transition: transform .26s var(--ease-out), color .2s; }
body.fal-on .df-more-toggle:hover .df-more-chev { color: var(--accent); transform: rotate(90deg) translateX(2px); }
body.fal-on .df-more-chev svg { width: 100%; height: 100%; display: block; }
body.fal-on .df-more-list { display: flex; flex-direction: column; gap: 8px; }
/* item wrappers carry the gap + a gentle entrance for each newly revealed row.
   Hidden items collapse fully (no phantom gap) until a stage reveals them. */
body.fal-on .df-more-item { display: block; }
body.fal-on .df-more-item[hidden] { display: none !important; }
body.fal-on .df-more-item:not([hidden]) { animation: dpCardIn .42s var(--ease-out) both; }
/* the list (with at least one revealed row) and the toggle never collide */
body.fal-on .df-more-list:has(.df-more-item:not([hidden])) + .df-more-toggle { margin-top: 8px; }
body.fal-on .df-more-row { display: flex; align-items: center; gap: 13px; text-decoration: none;
  padding: 11px 13px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-spring), box-shadow .2s, border-color .18s; }
body.fal-on .df-more-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
body.fal-on .df-more-row:active { transform: scale(.99); }
body.fal-on .df-more-row:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
body.fal-on .df-more-thumb { flex: none; width: 56px; height: 56px; border-radius: 13px; background-size: cover; background-position: center; }
body.fal-on .df-more-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.fal-on .df-more-name { font-family: var(--fal-serif); font-weight: 400; font-size: 18px; line-height: 1.1; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .df-more-meta { font-family: var(--fal-sans); font-weight: 500; font-size: 12.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .df-more-stats { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
body.fal-on .df-more-match { font-family: var(--fal-sans); font-weight: 700; font-size: 12.5px; color: var(--accent); }
body.fal-on .df-more-go { flex: none; width: 18px; height: 18px; color: var(--text-3); }
body.fal-on .df-more-go svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  body.fal-on .df-more-list, body.fal-on .df-more-item:not([hidden]) { animation: none; }
  body.fal-on .df-gm-fill { transition: none; }
  body.fal-on .df-more-row, body.fal-on .df-more-toggle, body.fal-on .df-more-chev { transition: none; }
}

/* Group — heads, occasion cards, stepper */
body.fal-on .group-title { font-family: var(--fal-serif); font-weight: 400; font-size: 38px; line-height: 1.04; letter-spacing: -.015em; color: var(--text); }
body.fal-on .group-sub { font-family: var(--fal-sans); font-size: 17px; line-height: 1.5; color: var(--text-2); }
body.fal-on .group-step-eyebrow, body.fal-on .group-result-eyebrow, body.fal-on .group-section-label { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
body.fal-on .group-step-eyebrow { color: var(--accent); }
body.fal-on .grp-back { font-family: var(--fal-sans); font-weight: 600; font-size: 16px; color: var(--text-3); }
body.fal-on .grp-occ-grid { gap: 12px; }
body.fal-on .grp-occ-tile { border-radius: var(--r-lg); padding: 18px 18px 20px; gap: 12px; border: 1.5px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
body.fal-on .grp-occ-tile:hover { border-color: var(--accent); }
body.fal-on .grp-occ-ic { width: 42px; min-width: 42px; max-width: 42px; height: 42px; flex: none; box-sizing: border-box; border-radius: 12px; background: color-mix(in srgb, #2A2018 7%, transparent); color: var(--text); display: grid; place-items: center; }
body.fal-on .grp-occ-ic svg { width: 22px; height: 22px; }

/* ════════════════════════════════════════════════════════════════════════════
   BROWSE DUBAI (Palate 5) — component pass on the shared fal-on shell (which
   already provides the tan page + cream 620px column + P-squircle header).
   The headline enhancement: a real, varied match meter (% from personal_score
   + cuisine taste read + fill) per card, vs the old flat "BEST FOR YOU".
   ════════════════════════════════════════════════════════════════════════════ */
/* Intro */
body.fal-on .restaurants-header { margin-bottom: 4px; }
body.fal-on .restaurants-header .eyebrow { display: inline-block; font-family: var(--fal-sans); font-weight: 700; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border-radius: 999px; padding: 6px 12px; }
body.fal-on .restaurants-title { font-family: var(--fal-serif); font-weight: 400; font-size: 50px; line-height: 1; letter-spacing: -.02em; color: var(--text); margin: 14px 0 0; }
body.fal-on .restaurants-subtitle { font-family: var(--fal-sans); font-size: 15px; line-height: 1.4; color: var(--text-2); margin: 10px 0 0; }

/* Search */
body.fal-on .search-wrap { position: relative; margin: 18px 0 0; }
body.fal-on .search-input { width: 100%; box-sizing: border-box; font-family: var(--fal-sans); font-weight: 500; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 15px 44px 15px 18px; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s; }
body.fal-on .search-input::placeholder { color: var(--text-3); }
body.fal-on .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
body.fal-on .search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
  border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 15px; display: grid; place-items: center; }

/* Filter rail */
/* Founder, Jul 18: "the top filter bar still looks really bad." Three structural fixes:
   (1) the sticky tool bar goes FULL-BLEED (the page has 26px side padding; the bar used
   to sit inside it, so while stuck the venue cards scrolled visibly through the gutters
   beside the search + chips); (2) the chip row scrolls to the SCREEN edge with an edge
   fade — chips used to hard-clip mid-word ("…ts for you") at the padding line; scroll-
   snap settles them aligned, never cut (native snap per the house carousel rule);
   (3) real bottom padding — the stuck bar sat 2px off the cards under it. */
/* The brand row flows (scrolls away) where a page declares its tools the sticky owner
   of the top — sticky-nav + sticky-tools at the same top/z interleave into a mess. */
body.fal-on .ob-nav.ob-nav-flow { position: relative; z-index: 1; }
body.fal-on .rf-stick { margin: -8px -26px 0; padding: 10px 26px 12px; }
body.fal-on .rfbar { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -26px; padding: 12px 26px 4px; scroll-padding-left: 26px;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); }
body.fal-on .rfbar .rfpill { scroll-snap-align: start; }
body.fal-on .rfbar::-webkit-scrollbar { display: none; height: 0; }
body.fal-on .rfpill { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--fal-sans); font-weight: 600; font-size: 14px;
  white-space: nowrap; border-radius: 999px; padding: 11px 15px; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
body.fal-on .rfpill .rf-ic { color: var(--accent); }
body.fal-on .rfpill.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-accent); }
body.fal-on .rfpill.on .rf-ic { color: var(--on-accent); }
body.fal-on .rfpill.rfclear { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); }
body.fal-on .rfbadge { background: var(--accent); color: var(--on-accent); border-radius: 999px; min-width: 16px; height: 16px; font-size: 10px; display: inline-grid; place-items: center; padding: 0 4px; }
body.fal-on .rfpill.on .rfbadge { background: var(--on-accent); color: var(--accent); }

/* Filter dropdown panel */
body.fal-on .rfpanel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); margin-top: 8px; padding: 8px; }
body.fal-on .rfopts { display: flex; flex-wrap: wrap; gap: 8px; }
body.fal-on .rfopts-list { flex-direction: column; flex-wrap: nowrap; }
body.fal-on .rfopt { font-family: var(--fal-sans); font-weight: 600; font-size: 14.5px; color: var(--text); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
/* Two options, two boxes (founder, 2026-08-07). These rows were `border: none`, so the
   Drinks panel read as one paragraph of centred prose — "Serves alcohol" and
   "Alcohol-free" were already <button>s wired to a real filter, and nothing on screen
   said so. The outline is the whole affordance. `text-align: left` goes with it: a
   <button> centres its text by default, which is why the wrapped hint looked like body
   copy rather than a label. Sort rows keep their borderless list look — they re-declare
   `border: none` at higher specificity further down (.rfopt-sort). */
body.fal-on .rfopts-list .rfopt { width: 100%; justify-content: space-between; text-align: left; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 11px 13px; }
body.fal-on .rfopt.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
body.fal-on .rfopts-list .rfopt.on { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }

/* ════ Filter system v2 — premium, scannable panel (popular group + counts + search) ════ */
/* Keep the 26px side inset here — this rule comes AFTER the full-bleed rfbar rule above
   and would otherwise zero its horizontal padding, leaving the first chip ("For you")
   flush against the screen edge with no left margin (founder report). The bar still
   full-bleeds (margin:-26px above); the padding just holds the chips off the edges. */
body.fal-on .rfbar { padding: 14px 26px 0; }
body.fal-on .rfpill { transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; }
body.fal-on .rfpill:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
body.fal-on .rfpill:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
body.fal-on .rfpill .rfchev { font-size: 10px; opacity: .5; transition: transform .2s ease, opacity .16s; }
body.fal-on .rfpill.on .rfchev { opacity: .85; }
body.fal-on .rfpill[aria-expanded="true"] { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
body.fal-on .rfpill[aria-expanded="true"] .rfchev { transform: rotate(180deg); }

body.fal-on .rfpanel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); margin-top: 10px; padding: 0; overflow: hidden; }
body.fal-on .rfpanel.open { animation: rfPanelIn .24s cubic-bezier(.22,1,.36,1); }
@keyframes rfPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
body.fal-on .rfpanel-inner { padding: 16px 16px 14px; }
body.fal-on .rfpanel-title { font-family: var(--fal-serif); font-weight: 400; font-size: 21px; line-height: 1;
  letter-spacing: -.01em; color: var(--text); margin: 0 0 12px; }

body.fal-on .rfsearch { position: relative; margin: 0 0 12px; }
body.fal-on .rfsearch-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
body.fal-on .rfsearch-input { width: 100%; box-sizing: border-box; font-family: var(--fal-sans); font-weight: 500;
  font-size: 15px; color: var(--text); background: var(--lp-sand); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 11px 14px 11px 38px; transition: border-color .15s, box-shadow .15s, background .15s; }
body.fal-on .rfsearch-input::placeholder { color: var(--text-3); }
body.fal-on .rfsearch-input:focus { outline: none; background: var(--surface); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }

body.fal-on .rfscroll { max-height: calc(72vh - 128px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  margin: 0 -4px; padding: 0 4px 2px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
body.fal-on .rfscroll::-webkit-scrollbar { width: 7px; }
body.fal-on .rfscroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }

body.fal-on .rfgroup-head { display: flex; align-items: baseline; gap: 8px; margin: 4px 2px 9px; }
body.fal-on .rfgroup-head:not(:first-child) { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
body.fal-on .rfgroup-lbl { font-family: var(--fal-sans); font-weight: 700; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); }
body.fal-on .rfgroup-n { font-family: var(--fal-sans); font-weight: 700; font-size: 11px; color: var(--text-3); }

body.fal-on .rfopts-cz { display: flex; flex-wrap: wrap; gap: 8px; }

body.fal-on .rfopt { font-family: var(--fal-sans); font-weight: 600; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 13px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; }
body.fal-on .rfopt:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
body.fal-on .rfopt:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
body.fal-on .rfopt:active { transform: scale(.97); }
body.fal-on .rfopt.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: var(--shadow-accent); }

body.fal-on .rfopt-n { font-weight: 700; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
body.fal-on .rfopt.on .rfopt-n { color: color-mix(in srgb, var(--on-accent) 78%, var(--accent)); }
body.fal-on .rfopt-lbl { line-height: 1; }

body.fal-on .rfopt-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--accent); }
body.fal-on .rfopt-cz[data-cz="coral"]     .rfopt-dot { background: var(--c-coral); }
body.fal-on .rfopt-cz[data-cz="lemon"]     .rfopt-dot { background: var(--c-lemon); }
body.fal-on .rfopt-cz[data-cz="mint"]      .rfopt-dot { background: var(--c-mint); }
body.fal-on .rfopt-cz[data-cz="sky"]       .rfopt-dot { background: var(--c-sky); }
body.fal-on .rfopt-cz[data-cz="lavender"]  .rfopt-dot { background: var(--c-lavender); }
body.fal-on .rfopt-cz[data-cz="pistachio"] .rfopt-dot { background: var(--c-pistachio); }
body.fal-on .rfopt-cz[data-cz="blush"]     .rfopt-dot { background: var(--c-blush); }
body.fal-on .rfopt.on .rfopt-dot { background: var(--on-accent); }

body.fal-on .rfshowall { display: inline-flex; align-items: center; gap: 5px; margin: 12px 2px 0;
  background: none; border: none; cursor: pointer; padding: 4px 0;
  font-family: var(--fal-sans); font-weight: 700; font-size: 13px; color: var(--accent); transition: color .14s ease; }
body.fal-on .rfshowall:hover { color: var(--accent-deep); }
body.fal-on .rfshowall:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 6px; }

body.fal-on .rfopt-empty { font-family: var(--fal-sans); font-size: 14px; color: var(--text-2); padding: 14px 2px; margin: 0; }

body.fal-on .rfopts-list { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
body.fal-on .rfopts-list .rfopt.rfopt-sort { width: 100%; justify-content: space-between; border: none;
  border-radius: var(--r-md); padding: 12px 13px; background: transparent; box-shadow: none; }
body.fal-on .rfopts-list .rfopt.rfopt-sort:hover { background: var(--lp-sand); }
body.fal-on .rfopts-list .rfopt.rfopt-sort.on { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
body.fal-on .rfopt-sort .rfcheck { color: var(--accent); font-weight: 800; }
body.fal-on .rfopt-lock { font-size: 12px; }

body.fal-on .rfopts-price { display: flex; flex-wrap: wrap; gap: 9px; }
body.fal-on .rfopt-price { flex-direction: column; gap: 3px; min-width: 72px; justify-content: center;
  padding: 11px 14px; border-radius: var(--r-md); }
body.fal-on .rfopt-price .rfopt-psym { font-family: var(--fal-serif); font-size: 18px; letter-spacing: 1px; line-height: 1; }
body.fal-on .rfopt-price .rfopt-phint { font-family: var(--fal-sans); font-weight: 600; font-size: 11px; color: var(--text-3); line-height: 1; }
body.fal-on .rfopt-price.on .rfopt-phint { color: color-mix(in srgb, var(--on-accent) 80%, var(--accent)); }

@media (prefers-reduced-motion: reduce) {
  body.fal-on .rfpanel.open { animation: none; }
  body.fal-on .rfopt, body.fal-on .rfpill, body.fal-on .rfpill .rfchev,
  body.fal-on .rfsearch-input, body.fal-on .rfshowall { transition: none; }
  body.fal-on .rfopt:active { transform: none; }
}

/* Cards */
body.fal-on .restaurant-grid { display: grid; gap: 16px; margin-top: 18px; padding-bottom: 120px; }
body.fal-on .restaurant-card, body.fal-on .rcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
/* Explicit aspect ratio, NOT a fixed height: a fixed 210px box stretched to
   ~566px wide on desktop (box AR 2.7) showed only ~half of a 3:2 photo's height
   — the "absurdly zoomed-in" crop. 16:9 keeps the framing honest at every
   width (336px mobile card → 189px tall); the cap only guards ultra-wide. */
body.fal-on .rcard-media { aspect-ratio: 16 / 9; height: auto; max-height: 320px; border-radius: 0; }
body.fal-on .rcard-price { position: absolute; top: 14px; right: 14px; font-family: var(--fal-sans); font-weight: 700; font-size: 14px; letter-spacing: .04em;
  color: var(--text); background: color-mix(in srgb, var(--surface) 96%, transparent);   /* NO backdrop-filter — one blurred pill per card = ~500 GPU blur layers on this page → iOS crash. Solid-ish bg reads the same. */
  border-radius: 999px; padding: 8px 13px; box-shadow: var(--shadow-sm); }
body.fal-on .rcard-body { padding: 16px; }
/* `.rcard` scope (0,3,1) beats the per-cuisine `.rcard[data-cz] .card-cuisine`
   theming (0,3,0) so the browse cuisine label is a uniform terracotta micro-pill,
   matching the handoff's `pd-eyebrow` (var(--accent), not a per-cuisine hue). */
body.fal-on .rcard .card-cuisine { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, transparent); border-radius: 999px; padding: 6px 12px; }
body.fal-on .card-name { font-family: var(--fal-serif); font-weight: 400; font-size: 28px; line-height: 1.02; letter-spacing: -.01em; color: var(--text); margin: 10px 0 0; }
body.fal-on .card-area { font-family: var(--fal-sans); font-weight: 500; font-size: 14px; color: var(--text-3); margin: 5px 0 0; }

/* Match meter — the key enhancement */
body.fal-on .match-meter { margin: 14px 0 0; display: block; }
body.fal-on .mm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
body.fal-on .mm-pct { font-family: var(--fal-sans); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--accent); flex: none; }
body.fal-on .mm-read { font-family: var(--fal-serif); font-style: italic; font-size: 15px; line-height: 1.2; color: var(--text-2); flex: 1; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .mm-track { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, #2A2018 9%, transparent); overflow: hidden; }
body.fal-on .mm-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transform-origin: left; animation: falMeter .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes falMeter { from { transform: scaleX(0); } }

/* Premium match flag — a featured ribbon pinned bottom-left on the photo (over the
   existing has-img bottom gradient; clear of the top-left glyph + top-right price).
   Shown only on a personalised + calibrated read, never on an early/uncalibrated one. */
body.fal-on .rcard-flag {
  position: absolute; bottom: 14px; left: 14px; z-index: 2;
  font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .02em;
  color: #fff; background: var(--accent);
  border-radius: 999px; padding: 7px 13px; box-shadow: 0 6px 18px rgba(42,32,24,.28);
}
/* For-You funnel hook — the single dish here that ranks best for this diner. */
body.fal-on .rcard-dish { font-family: var(--fal-sans); font-weight: 500; font-size: 14px; line-height: 1.35; color: var(--text-2); margin: 12px 0 0; }
body.fal-on .rcard-dish-spark { color: var(--accent); font-weight: 700; }
body.fal-on .rcard-dish-name { font-weight: 700; color: var(--text); }

/* Rating line + footer */
body.fal-on .rcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
body.fal-on .fal-rating { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fal-sans); font-weight: 600; font-size: 14px; color: var(--text); }
body.fal-on .fal-star { fill: var(--accent); }
body.fal-on .fal-rating-cnt { color: var(--text-3); font-weight: 500; }
body.fal-on .fal-rating-new { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 999px; padding: 7px 12px; font-weight: 600; font-size: 13px; }
body.fal-on .card-cta { font-family: var(--fal-sans); font-weight: 600; font-size: 15px; color: var(--accent); text-decoration: none; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { body.fal-on .mm-fill { animation: none; } }
body.fal-on .grp-occ-l { font-family: var(--fal-sans); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
body.fal-on .grp-occ-sub { font-family: var(--fal-sans); font-size: 13.5px; font-weight: 500; color: var(--text-3); }
body.fal-on .grp-stepper { display: inline-flex; align-items: center; gap: 0; padding: 8px; background: color-mix(in srgb, #2A2018 5%, transparent); border-radius: var(--r-xl); }
body.fal-on .grp-step-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); font-size: 24px; display: grid; place-items: center; }
body.fal-on .grp-step-val { min-width: 72px; text-align: center; font-family: var(--fal-serif); font-size: 40px; color: var(--text); }
body.fal-on .group-go { background: var(--accent); border-radius: 999px; box-shadow: var(--shadow-accent); font-weight: 700; }
body.fal-on .group-go:disabled { background: color-mix(in srgb, var(--accent) 42%, var(--surface)); color: color-mix(in srgb, var(--on-accent) 75%, transparent); box-shadow: none; }
body.fal-on .grp-crave.on, body.fal-on .group-friend.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body.fal-on .group-pick, body.fal-on .group-pick-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
body.fal-on .group-pick-name { font-family: var(--fal-serif); font-weight: 400; color: var(--text); }

/* ════════════════════════════════════════════════════════════════════════════
   RANK (Palate 6) — matchup game + "Your taste, ranked" leaderboard, on the
   shared fal-on shell. Deliberately typographic (no photos): the serif is the
   hero. Cards/scores/wins/counts are all driven by real /api/game data.
   ════════════════════════════════════════════════════════════════════════════ */
body.fal-on .rk-page { padding-bottom: 120px; }
body.fal-on .rk-loading { padding: 60px 0; text-align: center; font-family: var(--fal-sans); color: var(--text-3); }

/* Intro (game = centered, leaderboard = left) */
body.fal-on .rk-intro { margin: 22px 0 26px; }
body.fal-on .rk-intro-c { text-align: center; }
body.fal-on .rk-eyebrow { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
body.fal-on .rk-h1 { font-family: var(--fal-serif); font-weight: 400; font-size: clamp(34px, 8vw, 46px); line-height: 1.02; letter-spacing: -.015em; color: var(--text); margin: 0 0 10px; text-wrap: balance; }
body.fal-on .rk-sub { font-family: var(--fal-sans); font-weight: 400; font-size: 17px; line-height: 1.5; color: var(--text-2); margin: 0; }
body.fal-on .rk-intro:not(.rk-intro-c) .rk-sub { margin-bottom: 20px; }

/* Category tabs */
body.fal-on .rk-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 22px; }
body.fal-on .rk-tabs::-webkit-scrollbar { display: none; height: 0; }
body.fal-on .rk-tab { flex: none; cursor: pointer; white-space: nowrap; font-family: var(--fal-sans); font-weight: 600; font-size: 14px;
  border-radius: 999px; padding: 10px 16px; background: var(--surface); color: var(--text-2); border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s, transform .2s; }
body.fal-on .rk-tab:active { transform: scale(.97); }
body.fal-on .rk-tab[data-on="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-accent); }

/* Matchup arena */
body.fal-on .rk-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; }
body.fal-on .rk-vs { align-self: center; width: 54px; height: 54px; border-radius: 999px; flex: none; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line-2); box-shadow: var(--shadow-md); font-family: var(--fal-serif); font-style: italic; font-size: 21px; color: var(--text-3); }

/* Contender card */
body.fal-on .rk-card { position: relative; cursor: pointer; text-align: left; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 286px; padding: 26px 26px 28px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm);
  transition: transform .36s var(--ease-out), box-shadow .2s, border-color .2s, opacity .2s, filter .2s; }
body.fal-on .rk-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, #2A2018 16%, transparent); border-color: var(--line-2); }
body.fal-on .rk-card.is-win { border-color: var(--accent); box-shadow: var(--shadow-accent); transform: translateY(-4px) scale(1.015); }
body.fal-on .rk-card.is-lose { opacity: .5; filter: saturate(.6); transform: scale(.97); }
body.fal-on .rk-mono { position: absolute; top: -28px; right: 2px; z-index: 0; font-family: var(--fal-serif); font-weight: 400;
  font-size: 150px; line-height: 1; letter-spacing: -.04em; color: color-mix(in srgb, var(--accent) 7%, transparent); pointer-events: none; user-select: none; }
body.fal-on .rk-badge { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line-2); color: var(--text-2); font-family: var(--fal-sans); font-weight: 700; font-size: 13px;
  transition: background .2s, color .2s, border-color .2s; }
body.fal-on .rk-card.is-win .rk-badge { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body.fal-on .rk-cbody { position: relative; z-index: 1; }
body.fal-on .rk-name { font-family: var(--fal-serif); font-weight: 400; font-size: 31px; line-height: 1.05; letter-spacing: -.015em; color: var(--text); margin: 0 0 9px; text-wrap: balance; }
body.fal-on .rk-place { display: flex; align-items: center; gap: 7px; font-family: var(--fal-sans); font-weight: 500; font-size: 14px; line-height: 1.35; color: var(--text-3); margin: 0 0 16px; }
body.fal-on .rk-pin { width: 14px; height: 14px; flex: none; color: var(--accent); }
body.fal-on .rk-div { height: 1px; background: var(--line); margin: 0 0 13px; }
body.fal-on .rk-meta { font-family: var(--fal-sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
body.fal-on .rk-stamp { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 999px; display: none; place-items: center;
  background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); }
body.fal-on .rk-stamp svg { width: 20px; height: 20px; }
body.fal-on .rk-card.is-win .rk-stamp { display: grid; animation: rkPop .36s var(--ease-out) both; }

/* Footer + progress */
body.fal-on .rk-foot { margin-top: 34px; }
body.fal-on .rk-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
body.fal-on .rk-skip { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--fal-sans); font-weight: 600; font-size: 15px; color: var(--text-3); }
body.fal-on .rk-skip:disabled { opacity: .4; cursor: default; }
body.fal-on .rk-count { font-family: var(--fal-sans); font-weight: 600; font-size: 14px; color: var(--text-3); }
body.fal-on .rk-board-link { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: var(--fal-sans); font-weight: 600; font-size: 15px; color: var(--accent); }
body.fal-on .rk-progress { height: 6px; border-radius: 999px; background: color-mix(in srgb, #2A2018 9%, transparent); overflow: hidden; }
body.fal-on .rk-progress > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .36s var(--ease-out); }

/* Leaderboard */
body.fal-on .rk-back { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fal-sans); font-weight: 600; font-size: 16px; color: var(--text-3); margin-bottom: 20px; transition: color .2s; }
body.fal-on .rk-back:hover { color: var(--accent); }
body.fal-on .rk-top { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 28px;
  box-shadow: var(--shadow-md); padding: 28px 30px 30px; margin-bottom: 18px; }
body.fal-on .rk-top-ghost { position: absolute; top: -52px; right: 2px; font-family: var(--fal-serif); font-weight: 400;
  font-size: clamp(170px, 42vw, 230px); line-height: 1; color: color-mix(in srgb, var(--accent) 8%, transparent); pointer-events: none; user-select: none; }
body.fal-on .rk-top-inner { position: relative; z-index: 1; }
body.fal-on .rk-top-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fal-sans); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 8px 13px; box-shadow: var(--shadow-accent); margin-bottom: 24px; }
body.fal-on .rk-tr { width: 13px; height: 13px; }
body.fal-on .rk-top-name { font-family: var(--fal-serif); font-weight: 400; font-size: clamp(36px, 9vw, 50px); line-height: 1; letter-spacing: -.02em; color: var(--text); margin: 0 0 7px; text-wrap: balance; }
body.fal-on .rk-top-stat { display: flex; align-items: center; gap: 14px; }
body.fal-on .rk-top-stat .rk-wins { font-family: var(--fal-sans); font-weight: 700; font-size: 13px; color: var(--accent); flex: none; white-space: nowrap; }
body.fal-on .rk-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, #2A2018 9%, transparent); overflow: hidden; }
body.fal-on .rk-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transform-origin: left; animation: rkGrow .36s var(--ease-out); }
body.fal-on .rk-rows { display: grid; gap: 12px; }
body.fal-on .rk-row { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); padding: 18px 22px; }
body.fal-on .rk-num { font-family: var(--fal-serif); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--text-3); text-align: center; }
body.fal-on .rk-rbody { min-width: 0; }
body.fal-on .rk-rname { font-family: var(--fal-serif); font-weight: 400; font-size: 23px; line-height: 1.1; letter-spacing: -.01em; color: var(--text); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .rk-rsub { font-family: var(--fal-sans); font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--text-3); margin: 0 0 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .rk-rstat { display: flex; align-items: center; gap: 12px; }
body.fal-on .rk-row .rk-wins { font-family: var(--fal-sans); font-weight: 600; font-size: 12.5px; color: var(--text-3); flex: none; }

/* Empty / CTA states */
body.fal-on .rk-empty, body.fal-on .rk-board-empty { text-align: center; padding: 30px 10px 10px; }
body.fal-on .rk-empty p, body.fal-on .rk-board-empty p { font-family: var(--fal-sans); font-size: 16px; line-height: 1.5; color: var(--text-2); margin: 0 0 18px; }
body.fal-on .rk-btn.btn-primary { display: inline-block; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; box-shadow: var(--shadow-accent); font-family: var(--fal-sans); font-weight: 700; font-size: 15px; padding: 14px 22px; cursor: pointer; text-decoration: none; }

/* Taste-Off — the settled "on the record" payoff + share + refine */
body.fal-on .rk-settled { text-align: center; padding: 26px 6px 8px; }
body.fal-on .rk-settled-ic { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); box-shadow: var(--shadow-sm); margin-bottom: 20px; }
body.fal-on .rk-settled-ic .rk-tr { width: 27px; height: 27px; }
body.fal-on .rk-settled .rk-h1, body.fal-on .rk-settled .rk-sub { text-align: center; }
body.fal-on .rk-settled .rk-sub { max-width: 30ch; margin-left: auto; margin-right: auto; }
body.fal-on .rk-settled-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
body.fal-on .rk-cta-ghost { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--accent); border: 1.5px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 999px; font-family: var(--fal-sans); font-weight: 700; font-size: 14.5px; padding: 12px 20px; cursor: pointer; transition: background .2s, transform .2s; }
body.fal-on .rk-cta-ghost:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); transform: translateY(-1px); }
body.fal-on .rk-cta-ghost svg { width: 16px; height: 16px; }
body.fal-on .rk-refine { display: inline-block; margin-top: 22px; background: none; border: none; cursor: pointer; font-family: var(--fal-sans); font-weight: 600; font-size: 13.5px; color: var(--text-3); transition: color .2s; }
body.fal-on .rk-refine:hover { color: var(--accent); }
body.fal-on .rk-board-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
body.fal-on .rk-passport-link { font-family: var(--fal-sans); font-weight: 700; font-size: 13.5px; color: var(--text-3); text-decoration: none; transition: color .2s; }
body.fal-on .rk-passport-link:hover { color: var(--accent); }

@keyframes rkGrow { from { transform: scaleX(0); } }
@keyframes rkPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.fal-on .rk-card, body.fal-on .rk-card:hover, body.fal-on .rk-card.is-win { transform: none; }
  body.fal-on .rk-bar > i, body.fal-on .rk-stamp.is-win, body.fal-on .rk-card.is-win .rk-stamp { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PASSPORT · TASTE DNA (Palate 7) — on the shared fal-on shell. The passport
   already renders .ob-nav + .page in the Ember palette, so the shell (tan margin
   + 620px cream column + sticky P-squircle) comes for free. This pass adds the
   centrepiece: the elevated, hue-coded Taste-DNA axis bars (the one sanctioned
   use of the 5 spectrum hues).
   ════════════════════════════════════════════════════════════════════════════ */
/* No page-level bottom padding: `body.has-nav #app` already pays the 104px
   floating-nav clearance for every screen. The passport used to add 120px on
   top of that (+ .page's 28px), which left ~250px of dead space under the
   "Share my taste passport" note. Same double-count the home page fixes above. */
body.fal-on .passport { padding-bottom: 0; }

/* Spectrum hues — taste viz only (project rule). */
body.fal-on { --adventure: #5C8C68; --heat: #D6492F; --indulgence: #8E3D5B; --bold: #5C8C68; --table: #2E7A95; }
body.fal-on .pp-axis-adventure  { --hue: var(--taste-adventure); }
body.fal-on .pp-axis-heat       { --hue: var(--taste-spice); }
body.fal-on .pp-axis-indulgence { --hue: var(--taste-richness); }
body.fal-on .pp-axis-bold       { --hue: var(--taste-adventure); }
body.fal-on .pp-axis-table      { --hue: var(--taste-sharing); }

/* Elevated axis bar */
body.fal-on .taste-dims { display: flex; flex-direction: column; gap: 26px; margin: 4px 0 0; }
body.fal-on .pp-axis-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
body.fal-on .pp-axis-id { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
body.fal-on .pp-axis-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--hue) 15%, transparent); color: var(--hue); }
body.fal-on .pp-axis-icon svg { width: 17px; height: 17px; }
body.fal-on .pp-axis-name { font-family: var(--fal-sans); font-weight: 700; font-size: 16px; color: var(--text); }
body.fal-on .pp-axis-val { display: inline-flex; align-items: baseline; gap: 3px; flex: none; }
body.fal-on .pp-axis-num { font-family: var(--fal-serif); font-weight: 400; font-size: 26px; line-height: 1; color: var(--hue); }
body.fal-on .pp-axis-of { font-family: var(--fal-sans); font-weight: 500; font-size: 13px; color: var(--text-3); }
body.fal-on .pp-axis-track { position: relative; height: 12px; border-radius: 999px; }
body.fal-on .pp-axis-bg { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--hue) 14%, transparent); }
body.fal-on .pp-axis-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hue) 45%, var(--surface)), var(--hue)); }
body.fal-on .pp-axis-knob { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 999px; transform: translate(-50%, -50%);
  background: var(--surface); border: 3px solid var(--hue); box-shadow: var(--shadow-sm); z-index: 2; }
body.fal-on .pp-axis-poles { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
body.fal-on .pp-axis-pole { font-family: var(--fal-sans); font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--text-3); }
body.fal-on .pp-axis-pole.on { font-weight: 600; color: var(--hue); }

/* ════════════════════════════════════════════════════════════════════════════
   PASSPORT · PROGRESS QUEUE (Palate 8) — the verdict queue on the fal-on shell.
   Terracotta + neutrals only (no spectrum hues). One dish at a time: a 1–5
   cumulative-fill rating, "Logged · +N Taste Points" feedback, "all caught up".
   ════════════════════════════════════════════════════════════════════════════ */
body.fal-on .pp-progress { padding-top: 4px; }
body.fal-on .pq-head { margin-bottom: 22px; }
body.fal-on .pq-eyebrow { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
body.fal-on .pq-intro { font-family: var(--fal-sans); font-size: 15.5px; line-height: 1.5; color: var(--text-2); margin: 0 0 14px; max-width: 46ch; }
body.fal-on .pq-momentum { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fal-sans); font-weight: 600; font-size: 13.5px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 999px; padding: 8px 14px; }
body.fal-on .pq-ic { width: 15px; height: 15px; flex: none; }

/* Verdict card */
body.fal-on .pq-card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-md); padding: 28px; }
body.fal-on .pq-cuisine { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
body.fal-on .pq-dish { font-family: var(--fal-serif); font-weight: 400; font-size: 30px; line-height: 1.06; letter-spacing: -.015em; color: var(--text); margin: 0 0 5px; text-wrap: balance; }
body.fal-on .pq-place { font-family: var(--fal-sans); font-weight: 500; font-size: 14.5px; color: var(--text-3); margin: 0 0 24px; }

/* 1–5 rating scale — cumulative terracotta fill */
body.fal-on .pq-scale { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.fal-on .pq-dot { width: clamp(46px, 13.5vw, 54px); height: clamp(46px, 13.5vw, 54px); flex: none; border-radius: 999px; box-sizing: border-box;
  border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text-2); font-family: var(--fal-sans); font-weight: 700; font-size: 17px;
  cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s, transform .15s; }
body.fal-on .pq-dot.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body.fal-on .pq-dot:hover { transform: scale(1.09); }
body.fal-on .pq-dot:disabled { cursor: default; }
body.fal-on .pq-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; min-height: 18px; }
body.fal-on .pq-end { font-family: var(--fal-sans); font-weight: 500; font-size: 13px; color: var(--text-3); flex: none; }
body.fal-on .pq-live { font-family: var(--fal-sans); font-weight: 700; font-size: 13.5px; color: var(--accent); text-align: center; flex: 1; min-width: 0; }
body.fal-on .pq-skip { display: block; margin: 22px auto 0; background: none; border: none; padding: 4px; cursor: pointer;
  font-family: var(--fal-sans); font-weight: 500; font-size: 14px; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
body.fal-on .pq-skip:hover { color: var(--accent); }

/* Logged feedback */
body.fal-on .pq-logged { text-align: center; padding: 14px 0 8px; }
body.fal-on .pq-check { width: 44px; height: 44px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); margin-bottom: 14px; animation: rkPop .36s var(--ease-out) both; }
body.fal-on .pq-check svg { width: 22px; height: 22px; }
body.fal-on .pq-logged-main { font-family: var(--fal-sans); font-weight: 700; font-size: 17px; color: var(--text); margin: 0 0 4px; }
body.fal-on .pq-logged-sub { font-family: var(--fal-sans); font-weight: 500; font-size: 14px; color: var(--text-2); margin: 0; }

/* All caught up */
body.fal-on .pq-caught { text-align: center; padding: 40px 16px 24px; }
body.fal-on .pq-caught-ring { width: 76px; height: 76px; border-radius: 999px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); margin-bottom: 22px; animation: rkPop .4s var(--ease-out) both; }
body.fal-on .pq-caught-ring svg { width: 34px; height: 34px; }
body.fal-on .pq-caught-title { font-family: var(--fal-serif); font-weight: 400; font-size: clamp(30px, 8vw, 38px); line-height: 1.05; letter-spacing: -.015em; color: var(--text); margin: 0 0 10px; }
body.fal-on .pq-caught-meta { font-family: var(--fal-sans); font-weight: 600; font-size: 15px; color: var(--accent); margin: 0 0 8px; }
body.fal-on .pq-caught-calm { font-family: var(--fal-sans); font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--text-3); margin: 0 auto 24px; max-width: 38ch; }
body.fal-on .pq-caught-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 12px 20px; cursor: pointer; font-family: var(--fal-sans); font-weight: 700; font-size: 15px; color: var(--text); }
body.fal-on .pq-caught-cta:hover { border-color: var(--accent); color: var(--accent); }
body.fal-on .pq-caught-cta .pq-ic { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { body.fal-on .pq-check, body.fal-on .pq-caught-ring { animation: none; } body.fal-on .pq-dot:hover { transform: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   PASSPORT · FOOD PASSPORT GALLERY (Palate 9) — grouped-by-restaurant gallery on
   the fal-on shell. Terracotta + neutrals only. Stats strip, search + verified
   filter, equal-height dish cards (uniform photo height + single-line names).
   ════════════════════════════════════════════════════════════════════════════ */
body.fal-on .pp-foodprofile.fp9 { padding-bottom: 130px; position: relative; }
body.fal-on .fp9-intro { margin-bottom: 20px; }
body.fal-on .fp9-eyebrow { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; }
body.fal-on .fp9-sub { font-family: var(--fal-sans); font-size: 17px; line-height: 1.5; color: var(--text-2); margin: 0; max-width: 42ch; }

/* Stats strip */
body.fal-on .fp9-stats { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm); padding: 20px 10px; margin-bottom: 26px; }
body.fal-on .fp9-stat { flex: 1; text-align: center; border-right: 1px solid var(--line); }
body.fal-on .fp9-stat:last-child { border-right: none; }
body.fal-on .fp9-stat-n { display: block; font-family: var(--fal-serif); font-weight: 400; font-size: 36px; line-height: 1; color: var(--text); }
body.fal-on .fp9-stat-l { display: block; font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; }

/* Search + filter */
body.fal-on .fp9-controls { margin-bottom: 28px; }
body.fal-on .pp-search { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 18px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
body.fal-on .pp-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
body.fal-on .fp9-search-ic { width: 19px; height: 19px; flex: none; color: var(--text-3); }
body.fal-on .pp-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: var(--fal-sans); font-weight: 500; font-size: 16px; color: var(--text); padding: 14px 0; }
body.fal-on .pp-search input::placeholder { color: var(--text-3); }
body.fal-on .fp9-search-clear { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 20px; line-height: 1; padding: 4px; flex: none; }
body.fal-on .fp9-chips { display: flex; gap: 9px; margin-top: 12px; }
body.fal-on .fp9-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; cursor: pointer; white-space: nowrap; font-family: var(--fal-sans); font-weight: 600; font-size: 14px;
  border-radius: 999px; padding: 11px 15px; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); transition: background .2s, color .2s, border-color .2s; }
body.fal-on .fp9-chip-ic { width: 15px; height: 15px; flex: none; color: var(--accent); }
body.fal-on .fp9-chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-accent); }
body.fal-on .fp9-chip.on .fp9-chip-ic { color: var(--on-accent); }

/* Groups */
body.fal-on .fp9-gallery { display: grid; gap: 34px; }
body.fal-on .fp9-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
body.fal-on .fp9-group-id { min-width: 0; }
body.fal-on .fp9-place { display: flex; align-items: center; gap: 9px; font-family: var(--fal-serif); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: -.015em; color: var(--text); margin: 0 0 4px; }
body.fal-on .fp9-place-v { display: inline-grid; place-items: center; color: var(--accent); flex: none; }
body.fal-on .fp9-place-v .fp9-vic { width: 20px; height: 20px; }
body.fal-on .fp9-place-sub { display: flex; align-items: center; gap: 6px; font-family: var(--fal-sans); font-weight: 500; font-size: 13.5px; line-height: 1.3; color: var(--text-3); margin: 0; }
body.fal-on .fp9-pin { width: 13px; height: 13px; flex: none; color: var(--accent); }
body.fal-on .fp9-mid { color: var(--line-2); margin: 0 2px; }
body.fal-on .fp9-group-when { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); flex: none; margin-top: 4px; }

/* Dish cards — equal height */
body.fal-on .fp9-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* content-visibility:auto = off-screen cards skip layout/paint/decode entirely, so
   revealing a gallery of remote photos can't freeze the tab. (This guard used to live
   on the old .fp-card class and was lost when the gallery was redesigned to .fp9-card.) */
body.fal-on .fp9-card { display: block; text-align: left; padding: 0; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 280px; }
body.fal-on .fp9-cphoto { position: relative; display: block; }
body.fal-on .fp9-cphoto img { width: 100%; height: 196px; object-fit: cover; display: block; background: color-mix(in srgb, #2A2018 6%, transparent); }
/* "Add photo" tile — a rated dish with no photo yet. Same footprint as a photo card
   so the grid stays even; a quiet terracotta wash, NO backdrop-filter. */
body.fal-on .fp9-cphoto-empty { width: 100%; height: 196px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent); border-bottom: 1px solid var(--line); }
body.fal-on .fp9-cphoto-empty .fp9-addic { width: 30px; height: 30px; opacity: .9; }
body.fal-on .fp9-addlbl { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .02em; }
body.fal-on .fp9-card-add:hover .fp9-cphoto-empty { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
/* "Add a photo?" prompts — transient rows for rated dishes with no photo yet. Add a
   photo → it joins the album; "No photo" → it moves out. Plain rows, NO overlay. */
body.fal-on .fp9-prompts { margin-bottom: 26px; }
body.fal-on .fp9-prompts-h { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; }
body.fal-on .fp9-prompt { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 11px 13px; margin-bottom: 10px; }
body.fal-on .fp9-prompt-cam { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent); }
body.fal-on .fp9-prompt-cam .fp9-addic { width: 20px; height: 20px; }
body.fal-on .fp9-prompt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.fal-on .fp9-prompt-dish { font-family: var(--serif); font-size: 16px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fal-on .fp9-prompt-sub { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fal-sans); font-size: 12px; color: var(--text-3); min-width: 0; }
body.fal-on .fp9-prompt-acts { flex: none; display: flex; align-items: center; gap: 6px; }
body.fal-on .fp9-prompt-add { font-family: var(--fal-sans); font-weight: 700; font-size: 12.5px; color: var(--on-accent, #fff); background: var(--accent); border: none; border-radius: 999px; padding: 9px 14px; cursor: pointer; }
body.fal-on .fp9-prompt-skip { font-family: var(--fal-sans); font-weight: 600; font-size: 12.5px; color: var(--text-3); background: none; border: none; padding: 9px 6px; cursor: pointer; }
body.fal-on .fp9-prompt-skip:hover { color: var(--text); }
/* "Shared" badge on album cards whose photo is public (community-visible). */
body.fal-on .fp9-shared { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; font-family: var(--fal-sans); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent, #fff); background: color-mix(in srgb, var(--accent) 92%, #000); border-radius: 999px; padding: 5px 9px; box-shadow: 0 2px 8px rgba(20,14,8,.3); }
body.fal-on .fp9-badge { position: absolute; top: 11px; left: 11px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--fal-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 6px 10px; }
body.fal-on .fp9-badge .fp9-vic, body.fal-on .fp9-badge .fp9-pic { width: 12px; height: 12px; flex: none; }
body.fal-on .fp9-badge-v { color: var(--on-accent); background: var(--accent); box-shadow: var(--shadow-accent); }
body.fal-on .fp9-badge-p { color: var(--text-2); background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); font-weight: 600; letter-spacing: .08em; }
body.fal-on .fp9-cbody { display: block; padding: 15px 17px 17px; }
body.fal-on .fp9-crow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
body.fal-on .fp9-stars { display: inline-flex; gap: 2px; }
body.fal-on .fp9-star { width: 13px; height: 13px; flex: none; fill: color-mix(in srgb, #2A2018 16%, transparent); }
body.fal-on .fp9-star.on { fill: var(--accent); }
body.fal-on .fp9-cwhen { font-family: var(--fal-sans); font-weight: 500; font-size: 12px; color: var(--text-3); flex: none; }
body.fal-on .fp9-cname { display: block; font-family: var(--fal-serif); font-weight: 400; font-size: 21px; line-height: 1.12; letter-spacing: -.01em; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* No-results */
body.fal-on .fp9-noresults { text-align: center; padding: 44px 20px; }
body.fal-on .fp9-noresults-ic { display: inline-grid; place-items: center; color: var(--text-3); margin-bottom: 14px; }
body.fal-on .fp9-noresults-ic svg { width: 32px; height: 32px; }
body.fal-on .fp9-noresults-t { font-family: var(--fal-serif); font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--text); margin: 0 0 6px; }
body.fal-on .fp9-noresults-s { font-family: var(--fal-sans); font-size: 15px; line-height: 1.5; color: var(--text-3); margin: 0; }

/* Footer hint */
body.fal-on .fp9-foot { font-family: var(--fal-sans); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--text-3); text-align: center; margin: 26px auto 0; max-width: 44ch; }

/* Camera FAB */
body.fal-on .fp9-fab { position: fixed; right: 24px; bottom: 92px; z-index: 55; width: 60px; height: 60px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  box-shadow: 0 14px 32px color-mix(in srgb, #2A2018 22%, transparent), var(--shadow-accent); transition: transform .2s; }
body.fal-on .fp9-fab:hover { transform: scale(1.06); }
body.fal-on .fp9-fab svg { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) { body.fal-on .fp9-fab:hover { transform: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   PASSPORT · COLLECTION — "Culinary Travels" stamp album (Palate 10). Terracotta
   + neutrals only. Collected cuisines = terracotta ink stamps; uncollected =
   dashed collect slots → Browse. Progress hero, per-region bars, highlights,
   and a single link out to the Rank game.
   ════════════════════════════════════════════════════════════════════════════ */
body.fal-on .pp-coll { padding-bottom: 8px; }
body.fal-on .pp-coll-intro { margin-bottom: 22px; }
body.fal-on .pp-coll-eyebrow { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
body.fal-on .pp-coll-h1 { font-family: var(--fal-serif); font-weight: 400; font-size: clamp(34px, 8.5vw, 44px); line-height: 1.04; letter-spacing: -.015em; color: var(--text); margin: 0 0 10px; text-wrap: balance; }
body.fal-on .pp-coll-sub { font-family: var(--fal-sans); font-size: 17px; line-height: 1.5; color: var(--text-2); margin: 0; max-width: 42ch; }
body.fal-on .pp-coll-label { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin: 0 0 4px; }

/* Progress hero */
body.fal-on .pp-coll-hero { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-md); padding: 26px 28px; margin-bottom: 30px; }
body.fal-on .pp-coll-globe { position: absolute; top: 50%; right: -34px; transform: translateY(-50%); width: 160px; height: 160px; color: color-mix(in srgb, var(--accent) 8%, transparent); pointer-events: none; }
body.fal-on .pp-coll-globe svg { width: 100%; height: 100%; }
body.fal-on .pp-coll-hero-in { position: relative; z-index: 1; }
body.fal-on .pp-coll-bignum { display: flex; align-items: baseline; gap: 11px; margin-bottom: 16px; flex-wrap: wrap; }
body.fal-on .pp-coll-n { font-family: var(--fal-serif); font-weight: 400; font-size: 56px; line-height: 1; color: var(--accent); }
body.fal-on .pp-coll-of { font-family: var(--fal-sans); font-weight: 500; font-size: 16px; color: var(--text-2); }
body.fal-on .pp-prog-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, #2A2018 9%, transparent); overflow: hidden; }
body.fal-on .pp-prog-track > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s var(--ease-out); }
body.fal-on .pp-coll-togo { font-family: var(--fal-sans); font-weight: 500; font-size: 13px; line-height: 1.45; color: var(--text-3); margin: 13px 0 0; }

/* Regions + tile grid */
body.fal-on .pp-album { display: grid; gap: 30px; margin-bottom: 30px; }
body.fal-on .pp-region-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
body.fal-on .pp-region-name { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); flex: none; }
body.fal-on .pp-regionbar { width: 70px; height: 5px; border-radius: 999px; background: color-mix(in srgb, #2A2018 9%, transparent); overflow: hidden; flex: none; }
body.fal-on .pp-regionbar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
body.fal-on .pp-region-count { font-family: var(--fal-sans); font-weight: 700; font-size: 12.5px; color: var(--text-3); margin-left: auto; flex: none; }
body.fal-on .pp-region-count.on { color: var(--accent); }
body.fal-on .pp-stamp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }

/* Collected stamp */
body.fal-on .pp-stamp { position: relative; min-height: 130px; box-sizing: border-box; display: flex; flex-direction: column; padding: 16px 16px 14px;
  border-radius: 14px; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: var(--shadow-sm);
  transform: rotate(var(--rot, 0deg)); transition: transform .2s var(--ease-out), box-shadow .2s; }
body.fal-on .pp-stamp::before { content: ""; position: absolute; inset: 6px; border: 1px dashed color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 9px; pointer-events: none; }
body.fal-on .pp-stamp:hover { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-md); }
body.fal-on .pp-stamp-cuisine { position: relative; font-family: var(--fal-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
body.fal-on .pp-stamp-country { position: relative; font-family: var(--fal-serif); font-weight: 400; font-size: 23px; line-height: 1.05; letter-spacing: -.01em; color: var(--accent-deep); margin: 3px 0 8px; }
body.fal-on .pp-stamp-meta { position: relative; display: inline-flex; align-items: center; gap: 5px; font-family: var(--fal-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: auto; }
body.fal-on .pp-stamp-ic { width: 13px; height: 13px; flex: none; }
body.fal-on .pp-stamp-place { position: relative; font-family: var(--fal-sans); font-weight: 500; font-size: 12.5px; color: color-mix(in srgb, var(--accent) 70%, var(--text-3)); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ghost (to collect) */
body.fal-on .pp-ghost { position: relative; min-height: 130px; box-sizing: border-box; display: flex; flex-direction: column; padding: 16px; border-radius: 14px;
  border: 1.5px dashed var(--line-2); background: transparent; text-decoration: none; transition: border-color .2s, background .2s; }
body.fal-on .pp-ghost-cuisine { font-family: var(--fal-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); transition: color .2s; }
body.fal-on .pp-ghost-country { font-family: var(--fal-serif); font-weight: 400; font-size: 23px; line-height: 1.05; letter-spacing: -.01em; color: var(--text-2); margin: 3px 0 8px; transition: color .2s; }
body.fal-on .pp-ghost-not { font-family: var(--fal-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: auto; }
body.fal-on .pp-ghost-collect { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; color: var(--accent); margin-top: 6px; opacity: 0; transition: opacity .2s; }
body.fal-on .pp-ghost:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
body.fal-on .pp-ghost:hover .pp-ghost-cuisine, body.fal-on .pp-ghost:hover .pp-ghost-country, body.fal-on .pp-ghost:hover .pp-ghost-not { color: var(--accent); }
body.fal-on .pp-ghost:hover .pp-ghost-collect { opacity: 1; }
@media (prefers-reduced-motion: reduce) { body.fal-on .pp-stamp { transform: none; } body.fal-on .pp-stamp:hover { transform: translateY(-3px); } }

/* Highlights */
body.fal-on .pp-hi-card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm); padding: 22px 24px; margin-bottom: 22px; }
body.fal-on .pp-hi-rows { margin-top: 14px; }
body.fal-on .pp-hi-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
body.fal-on .pp-hi-row:first-child { border-top: none; padding-top: 2px; }
body.fal-on .pp-hi-label { font-family: var(--fal-sans); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); width: 92px; flex: none; }
body.fal-on .pp-hi-mid { flex: 1; min-width: 0; }
body.fal-on .pp-hi-value { display: block; font-family: var(--fal-serif); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .pp-hi-meta { display: block; font-family: var(--fal-sans); font-weight: 500; font-size: 13px; color: var(--text-3); margin-top: 2px; }
body.fal-on .pp-hi-spark { color: var(--accent); flex: none; }
body.fal-on .pp-hi-ic { width: 18px; height: 18px; }

/* Rankings link */
body.fal-on .pp-rank-link { display: flex; align-items: center; gap: 14px; text-decoration: none; background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 20px; box-shadow: var(--shadow-sm); padding: 18px 20px; transition: border-color .2s, background .2s; }
body.fal-on .pp-rank-link:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
body.fal-on .pp-rank-ic { width: 26px; height: 26px; flex: none; color: var(--accent); display: grid; place-items: center; }
body.fal-on .pp-rank-ic svg { width: 26px; height: 26px; }
body.fal-on .pp-rank-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.fal-on .pp-rank-t { font-family: var(--fal-sans); font-weight: 700; font-size: 16px; color: var(--text); }
body.fal-on .pp-rank-s { font-family: var(--fal-sans); font-weight: 500; font-size: 13px; line-height: 1.35; color: var(--text-3); }
body.fal-on .pp-rank-go { font-family: var(--fal-sans); font-weight: 700; font-size: 15px; color: var(--accent); margin-left: auto; flex: none; }

/* ════════════════════════════════════════════════════════════════════════════
   PASSPORT · FRIENDS — "Your Circle" (Palate 11). Taste-first: a real DNA-overlap
   match ring per friend, shared-cuisine chips, last bite, Plan-a-meal. Terracotta
   + neutrals only (the ring is an affinity meter, not a spectrum hue).
   ════════════════════════════════════════════════════════════════════════════ */
body.fal-on .fr9 { padding-bottom: 10px; }
body.fal-on .fr9-intro { margin-bottom: 22px; }
body.fal-on .fr9-eyebrow { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
body.fal-on .fr9-h1 { font-family: var(--fal-serif); font-weight: 400; font-size: clamp(34px, 8.5vw, 44px); line-height: 1.04; letter-spacing: -.015em; color: var(--text); margin: 0 0 10px; text-wrap: balance; }
body.fal-on .fr9-sub { font-family: var(--fal-sans); font-size: 17px; line-height: 1.5; color: var(--text-2); margin: 0; max-width: 42ch; }
body.fal-on .fr-ic { width: 17px; height: 17px; flex: none; }

/* Avatar */
body.fal-on .fr-avatar { width: 52px; height: 52px; flex: none; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-family: var(--fal-serif); font-weight: 400; font-size: 24px; color: var(--accent); }

/* Add a friend */
body.fal-on .fr-add { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm); padding: 22px 24px; margin-bottom: 26px; }
body.fal-on .fr-add-label { font-family: var(--fal-sans); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; }
body.fal-on .fr-add-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.fal-on .fr-add-pill { flex: 1 1 200px; }
body.fal-on .fr-add-pill .fr-ic { color: var(--text-3); }
/* One clean focus outline. The pill's :focus-within ring and the inner input's
   :focus ring stacked into a double outline; keep the pill's border (it turns
   terracotta on focus via :focus-within) and drop both glow rings. */
body.fal-on .fr-add-row .fr-add-pill:focus-within { box-shadow: none; }
body.fal-on .fr-add-row .fr-add-pill .fr-add-input:focus { box-shadow: none; border-color: transparent; }
body.fal-on .fr-add-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; box-shadow: var(--shadow-accent); font-family: var(--fal-sans); font-weight: 700; font-size: 15px; padding: 13px 18px; cursor: pointer; }
body.fal-on .fr-add-msg { font-family: var(--fal-sans); font-weight: 500; font-size: 13.5px; margin: 12px 0 0; }
body.fal-on .fr-add-msg.fr-add-ok { color: var(--accent); }
body.fal-on .fr-add-msg.fr-add-err { color: #B4452C; }
body.fal-on .fr-search-results { margin-top: 10px; display: grid; gap: 6px; }
body.fal-on .fr-search-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md, 14px); }
body.fal-on .fr-search-id { font-family: var(--fal-sans); font-size: 14px; color: var(--text); min-width: 0; }
body.fal-on .fr-search-empty { font-family: var(--fal-sans); font-size: 13.5px; color: var(--text-3); margin: 8px 2px 0; }
body.fal-on .fr-search-add { background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; font-family: var(--fal-sans); font-weight: 700; font-size: 13px; padding: 8px 14px; cursor: pointer; flex: none; }
body.fal-on .fr-handle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
body.fal-on .fr-handle-mine { font-family: var(--fal-sans); font-weight: 500; font-size: 14px; color: var(--text-2); }
body.fal-on .fr-handle-mine strong { color: var(--accent); font-weight: 700; }
body.fal-on .fr-share { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--fal-sans); font-weight: 600; font-size: 14px; color: var(--text-3); padding: 2px; }
body.fal-on .fr-share:hover { color: var(--accent); }
body.fal-on .fr-share.on { color: var(--accent); }

/* Blocks */
body.fal-on .fr-block { margin-bottom: 26px; }
body.fal-on .fr-block-label { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; }

/* Request card */
body.fal-on .fr-req { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 13px 15px; margin-bottom: 9px; }
body.fal-on .fr-req-info { flex: 1; min-width: 0; }
body.fal-on .fr-req-name { font-family: var(--fal-serif); font-weight: 400; font-size: 20px; line-height: 1.1; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .fr-req-sub { font-family: var(--fal-sans); font-weight: 500; font-size: 13px; color: var(--text-3); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .fr-req-actions { display: flex; align-items: center; gap: 8px; flex: none; }
body.fal-on .fr-decline { background: none; border: none; cursor: pointer; font-family: var(--fal-sans); font-weight: 600; font-size: 14px; color: var(--text-3); padding: 8px 6px; }
body.fal-on .fr-accept { display: inline-flex; align-items: center; gap: 5px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; box-shadow: var(--shadow-accent); font-family: var(--fal-sans); font-weight: 700; font-size: 14px; padding: 9px 15px; cursor: pointer; }
body.fal-on .fr-accept .fr-ic { width: 14px; height: 14px; }
body.fal-on .fr-req-pending { font-family: var(--fal-sans); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); flex: none; }

/* Friend (circle) card */
body.fal-on .fr-circle { display: grid; gap: 16px; }
body.fal-on .fr-fcard { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm); padding: 20px 22px; }
body.fal-on .fr-fcard-top { display: flex; align-items: center; gap: 14px; }
body.fal-on .fr-fcard-info { flex: 1; min-width: 0; }
body.fal-on .fr-fcard-name { font-family: var(--fal-serif); font-weight: 400; font-size: 23px; line-height: 1.1; letter-spacing: -.01em; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .fr-fcard-sub { font-family: var(--fal-sans); font-weight: 500; font-size: 13.5px; color: var(--text-3); margin: 3px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .fr-match { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; }
body.fal-on .fr-ring { position: relative; width: 54px; height: 54px; display: grid; place-items: center; }
body.fal-on .fr-ring-track { stroke: color-mix(in srgb, #2A2018 10%, transparent); }
body.fal-on .fr-ring-arc { stroke: var(--accent); transition: stroke-dashoffset .6s var(--ease-out); }
body.fal-on .fr-ring-val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fal-serif); font-weight: 400; font-size: 19px; color: var(--text); }
body.fal-on .fr-match-l { font-family: var(--fal-sans); font-weight: 700; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
body.fal-on .fr-match-l.twin { color: var(--accent); }
body.fal-on .fr-fcard-div { height: 1px; background: var(--line); margin: 16px 0; }
body.fal-on .fr-bothlove { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
body.fal-on .fr-bothlove-l { font-family: var(--fal-sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
body.fal-on .fr-chip { font-family: var(--fal-sans); font-weight: 700; font-size: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border-radius: 999px; padding: 5px 11px; }
body.fal-on .fr-bothlove-n { font-family: var(--fal-sans); font-weight: 500; font-size: 13px; color: var(--text-3); }
body.fal-on .fr-lastbite { display: flex; align-items: center; gap: 9px; margin-top: 12px; min-width: 0; }
body.fal-on .fr-stars { display: inline-flex; gap: 2px; flex: none; }
body.fal-on .fr-star { width: 13px; height: 13px; flex: none; fill: color-mix(in srgb, #2A2018 16%, transparent); }
body.fal-on .fr-star.on { fill: var(--accent); }
body.fal-on .fr-lastbite-txt { font-family: var(--fal-sans); font-weight: 500; font-size: 13.5px; color: var(--text-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .fr-lastbite-txt strong { color: var(--text); font-weight: 700; }
body.fal-on .fr-fcard-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
body.fal-on .fr-plan { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; background: var(--accent); color: var(--on-accent); border-radius: 999px; box-shadow: var(--shadow-accent); font-family: var(--fal-sans); font-weight: 700; font-size: 15px; padding: 12px 16px; }
body.fal-on .fr-unfriend-x { flex: none; background: none; border: none; cursor: pointer; font-family: var(--fal-sans); font-weight: 600; font-size: 13.5px; color: var(--text-3); padding: 8px 6px; }
body.fal-on .fr-unfriend-x:hover { color: #B4452C; }
body.fal-on .fr-empty { font-family: var(--fal-sans); font-size: 15px; line-height: 1.5; color: var(--text-3); margin: 0; }
@media (prefers-reduced-motion: reduce) { body.fal-on .fr-ring-arc { transition: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   FRIENDS v3 — premium animated taste-twin hero + simple circle rows.
   Clean white-card system (terracotta on the marks only). Mirrors the agreed
   design-reference/friends-mockup.html.
   ════════════════════════════════════════════════════════════════════════════ */
body.fal-on .fr9-intro .fr9-h1 { font-size: clamp(27px, 7vw, 34px); }

/* ── Taste-twin hero ──────────────────────────────────────────────────────── */
body.fal-on .tt { position: relative; overflow: hidden; margin: 0 0 24px; padding: 24px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-md); animation: frPop .55s var(--ease-out) both; }
body.fal-on .tt-glow { position: absolute; z-index: 0; left: 50%; top: 60px; width: 200px; height: 170px; transform: translateX(-50%); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%); filter: blur(9px); animation: glowPulse 3.8s ease-in-out infinite; pointer-events: none; }
body.fal-on .tt-eyebrow { position: relative; z-index: 2; margin: 0 0 16px; text-align: center; font-family: var(--fal-sans); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
body.fal-on .tt-more { position: absolute; z-index: 4; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: none; border-radius: 999px; background: none; color: var(--text-3); cursor: pointer; }
body.fal-on .tt-more:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
body.fal-on .tt-stage { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: center; gap: 14px; }
body.fal-on .tt-side, body.fal-on .tt-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.fal-on .tt-side { flex: 1; min-width: 0; }
body.fal-on .tt-mid { flex: none; }
body.fal-on .tt-avawrap { height: 92px; display: grid; place-items: center; }
body.fal-on .tt-ava { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; font-family: var(--fal-serif); font-weight: 400; font-size: 23px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--accent) 38%, transparent); transform-origin: center; }
body.fal-on .tt-ringwrap { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
body.fal-on .tt-ring { width: 92px; height: 92px; transform: rotate(-90deg); }
body.fal-on .tt-track { fill: none; stroke: color-mix(in srgb, var(--accent) 13%, transparent); stroke-width: 3.5; }
body.fal-on .tt-arc { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--accent) 34%, transparent)); }
body.fal-on .tt-pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fal-serif); font-weight: 400; font-size: 30px; color: var(--accent); font-variant-numeric: tabular-nums; }
body.fal-on .tt-cap { font-family: var(--fal-sans); font-weight: 600; font-size: 13px; color: var(--text); max-width: 11ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .tt-cap.you { color: var(--text-3); }
body.fal-on .tt-cap.mid { color: var(--accent); font-weight: 700; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; max-width: none; overflow: visible; }
body.fal-on .spark { position: absolute; z-index: 3; color: var(--accent); opacity: 0; pointer-events: none; }
body.fal-on .spark.s1 { top: 10px; right: 31%; }
body.fal-on .spark.s2 { bottom: 30px; left: 30%; }
body.fal-on .spark.s3 { top: 32px; left: 33%; }
body.fal-on .tt-meta { position: relative; z-index: 2; margin: 18px 0 0; text-align: center; }
body.fal-on .tt-name { font-family: var(--fal-serif); font-weight: 400; font-size: 23px; line-height: 1.1; color: var(--text); margin: 0; }
body.fal-on .tt-why { margin: 8px auto 0; max-width: 34ch; font-family: var(--fal-sans); font-weight: 500; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
body.fal-on .tt-why strong { color: var(--text); font-weight: 700; }
body.fal-on .tt-cta { position: relative; z-index: 2; margin-top: 18px; }
body.fal-on .tt-plan { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-decoration: none; background: var(--accent); color: var(--on-accent); border: none; border-radius: 14px; font-family: var(--fal-sans); font-weight: 700; font-size: 15px; padding: 13px 16px; cursor: pointer; transition: background .15s, transform .12s; }
body.fal-on .tt-plan:hover { background: var(--accent-deep); }
body.fal-on .tt-plan:active { transform: scale(.98); }
body.fal-on .tt-plan .fr-ic { width: 17px; height: 17px; }

body.fal-on .tt.in .tt-ava.you { animation: popIn .5s var(--ease-out) both; animation-delay: .12s; }
body.fal-on .tt.in .tt-ava.them { animation: popIn .5s var(--ease-out) both; animation-delay: .28s; }
body.fal-on .tt.in .spark.s1 { animation: twinkle 2.6s ease-in-out infinite; animation-delay: .7s; }
body.fal-on .tt.in .spark.s2 { animation: twinkle 3.0s ease-in-out infinite; animation-delay: 1.5s; }
body.fal-on .tt.in .spark.s3 { animation: twinkle 2.8s ease-in-out infinite; animation-delay: 2.1s; }

@keyframes frPop { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.72); } 60% { transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes glowPulse { 0%, 100% { opacity: .36; transform: translateX(-50%) scale(1); } 50% { opacity: .62; transform: translateX(-50%) scale(1.08); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: .8; transform: scale(1) rotate(15deg); } }

/* ── Circle rows ──────────────────────────────────────────────────────────── */
body.fal-on .cc-list { display: grid; gap: 9px; }
body.fal-on .cc-row { position: relative; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); transition: border-color .16s var(--ease-out), transform .16s var(--ease-out); }
body.fal-on .cc-row:hover { border-color: var(--line-strong); transform: translateY(-1px); }
body.fal-on .cc-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 13px; padding: 13px 6px 13px 15px; text-decoration: none; color: inherit; }
body.fal-on .cc-ava { width: 44px; height: 44px; flex: none; border-radius: 999px; display: grid; place-items: center; font-family: var(--fal-serif); font-weight: 400; font-size: 20px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
body.fal-on .cc-id { flex: 1; min-width: 0; }
body.fal-on .cc-name { font-family: var(--fal-serif); font-weight: 400; font-size: 18px; line-height: 1.12; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .cc-sub { font-family: var(--fal-sans); font-weight: 500; font-size: 12.5px; color: var(--text-3); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fal-on .cc-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
body.fal-on .cc-pct { font-family: var(--fal-serif); font-weight: 400; font-size: 19px; line-height: 1; color: var(--accent); }
body.fal-on .cc-pct-l { font-family: var(--fal-sans); font-weight: 700; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
body.fal-on .cc-more { flex: none; align-self: stretch; width: 40px; display: grid; place-items: center; border: none; background: none; color: var(--text-3); cursor: pointer; border-radius: 0 14px 14px 0; }
body.fal-on .cc-more:hover { color: var(--text); }

/* ── Shared ⋯ menu + empty state ──────────────────────────────────────────── */
body.fal-on .fr-more svg { width: 18px; height: 18px; }
.fr-menu { position: fixed; z-index: 320; min-width: 168px; background: var(--surface, #FCF6EC); border: 1px solid var(--line, rgba(42,32,24,.13)); border-radius: 12px; box-shadow: var(--shadow-md, 0 6px 18px -8px rgba(42,32,24,.16)); padding: 6px; }
.fr-menu-item { display: flex; width: 100%; align-items: center; gap: 8px; background: none; border: none; border-radius: 8px; padding: 10px 12px; font-family: var(--fal-sans, sans-serif); font-weight: 600; font-size: 14px; color: var(--text, #2A2018); cursor: pointer; text-align: left; }
.fr-menu-item:hover { background: color-mix(in srgb, #2A2018 5%, transparent); }
.fr-menu-remove { color: #B4452C; }

body.fal-on .fr-empty-hero { text-align: center; padding: 8px 0 20px; }
body.fal-on .fr-empty-ic { display: inline-grid; place-items: center; width: 60px; height: 60px; color: var(--accent); margin-bottom: 14px; }
body.fal-on .fr-empty-ic svg { width: 46px; height: 46px; }
body.fal-on .fr-empty-h { font-family: var(--fal-serif); font-weight: 400; font-size: 24px; line-height: 1.12; color: var(--text); margin: 0 0 9px; }
body.fal-on .fr-empty-p { font-family: var(--fal-sans); font-size: 15px; line-height: 1.5; color: var(--text-2); margin: 0 auto; max-width: 38ch; }

@media (prefers-reduced-motion: reduce) {
  body.fal-on .tt, body.fal-on .tt.in .tt-ava.you, body.fal-on .tt.in .tt-ava.them, body.fal-on .tt-glow, body.fal-on .spark { animation: none !important; opacity: 1; }
  body.fal-on .spark { opacity: .45; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOTION PASS — logged-out landing entrance + micro-interactions
   The rest of the app is already motion-complete (screenIn route transition,
   :active press feedback across 40+ components, hover lift, focus rings, hero
   reveals, progress fills). This fills the one gap: the marketing landing's
   "How it works" steps and "Find your type" chips appeared with no per-element
   reveal. Additive · transform/opacity only (no layout props) · reduced-motion
   honored at the foot. Reuses the existing --ease-out token.
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes lpRevealUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* "How it works" — the header leads, the three steps cascade in (~80ms apart) */
.home-steps-eyebrow { animation: lpRevealUp 0.5s var(--ease-out) backwards; }
.home-step { animation: lpRevealUp 0.5s var(--ease-out) backwards; }
.home-step:nth-child(1) { animation-delay: 0.08s; }
.home-step:nth-child(2) { animation-delay: 0.16s; }
.home-step:nth-child(3) { animation-delay: 0.24s; }

/* "Find your type" — the six palate chips flick in in sequence (~50ms apart) */
.lp-type-chip { animation: lpRevealUp 0.44s var(--ease-out) backwards; }
.lp-type-chip:nth-child(1) { animation-delay: 0.04s; }
.lp-type-chip:nth-child(2) { animation-delay: 0.09s; }
.lp-type-chip:nth-child(3) { animation-delay: 0.14s; }
.lp-type-chip:nth-child(4) { animation-delay: 0.19s; }
.lp-type-chip:nth-child(5) { animation-delay: 0.24s; }
.lp-type-chip:nth-child(6) { animation-delay: 0.29s; }

/* Round out the landing's press feedback to match the app's :active language */
.lp-types-cta { transition: transform 0.12s var(--ease-out), background 0.2s var(--ease-out); }
.lp-types-cta:active { transform: scale(0.97); }
.lp-modal-close { transition: background 0.15s ease, color 0.15s ease, transform 0.12s var(--ease-out); }
.lp-modal-close:active { transform: scale(0.92); }

@media (prefers-reduced-motion: reduce) {
  .home-steps-eyebrow, .home-step, .lp-type-chip { animation: none; }
  .lp-types-cta:active, .lp-modal-close:active { transform: none; }
}

/* ── Onboarding fixes ─────────────────────────────────────────────────────────
   1) Diet (hard-filter) chips were carrying TWO indicators — the legacy
      .chip-tick span AND the generic .quiz-chip::before circle. Drop the pseudo
      on diet chips so only the single ✓ tick shows.
   2) Sex: Female/Male render as a 2-up segmented row matching the eater-build
      buttons' height (63px); "Prefer not to say" demotes to a small checkbox so
      people choose their sex rather than defaulting to the opt-out. */
.diet-chip::before { display: none; }
#sexChips { margin-bottom: 7px; }
#sexChips .quiz-seg-btn { min-height: 63px; }
.sex-skip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; cursor: pointer;
  font-family: var(--lp-sans); font-size: 12.5px; color: var(--lp-fg3); }
.sex-skip input { width: 15px; height: 15px; flex: none; accent-color: var(--lp-terra); cursor: pointer; margin: 0; }
.sex-skip:hover { color: var(--lp-fg2); }

/* "+ Add your own" allergen row + the full-width custom allergen chips it makes
   (each is a selected diet-chip at the top of the grid; tap the × to remove). */
.quiz-addown { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
.quiz-addown .quiz-text-input { flex: 1; min-width: 0; margin: 0; }
.quiz-addown-btn { flex: none; padding: 0 18px; border-radius: var(--r-md); cursor: pointer;
  -webkit-appearance: none; appearance: none; background: var(--lp-terra); color: var(--lp-cream);
  border: 1.5px solid var(--lp-terra); font-family: var(--lp-sans); font-weight: 700; font-size: 14px;
  transition: background .15s, transform .12s; }
.quiz-addown-btn:hover { background: var(--lp-terra-deep); }
.quiz-addown-btn:active { transform: scale(0.96); }
.custom-allergen { grid-column: 1 / -1; flex: 1 0 100%; }
.custom-allergen .chip-x { margin-left: auto; font-size: 18px; line-height: 1; opacity: .75; padding-left: 8px; }

/* Per-item allergy/preference: a small sub-note on each custom chip + the allergy "!" /
   preference "–" tick. Allergy chips keep the hard terracotta diet treatment; preference
   chips ("just don't like it") get a softer sand fill so the diner reads the difference. */
.chip-note { margin-left: 8px; font-family: var(--lp-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; opacity: .68; }
.chip-tick--alg { background: var(--lp-terra) !important; border-color: var(--lp-terra) !important;
  color: var(--lp-cream) !important; font-weight: 800; }
.chip-tick--pref { background: transparent !important; border-color: var(--line-2, #d8cbbd) !important;
  color: var(--lp-fg3, #8a7a6b) !important; font-weight: 800; }
.pref-block { margin-top: 12px; }
.pref-cap { margin: 0 0 8px; font-family: var(--lp-sans); font-size: 13px; line-height: 1.4;
  color: var(--lp-fg2, #6b5d50); }
.pref-cap b { color: var(--lp-espresso, #3a2c20); }
.pref-chip { grid-column: 1 / -1; flex: 1 0 100%; }
.pref-chip.on { background: var(--lp-sand, #f5ede2) !important; border-color: var(--line-2, #e0d4c6) !important;
  color: var(--lp-espresso, #3a2c20) !important; }
.pref-chip .chip-x { margin-left: auto; font-size: 18px; line-height: 1; opacity: .7; padding-left: 8px; }

/* The inline "what did we understand?" resolver row under the add field. */
.ob-resolve { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md, 12px);
  background: var(--lp-tint, #f6ece7); border: 1.5px solid color-mix(in srgb, var(--lp-terra) 22%, transparent);
  animation: obrIn .2s ease both; }
@keyframes obrIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.obr-q { font-family: var(--lp-sans); font-size: 14px; line-height: 1.45; color: var(--lp-espresso, #3a2c20); }
.obr-q b { color: var(--lp-terra-deep, #9c3d22); }
.obr-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.obr-btn { -webkit-appearance: none; appearance: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-family: var(--lp-sans);
  font-weight: 600; font-size: 13.5px; background: #fff; color: var(--lp-espresso, #3a2c20);
  border: 1.5px solid var(--line-2, #e0d4c6); transition: transform .12s, border-color .15s, background .15s; }
.obr-btn:hover { border-color: var(--lp-terra); }
.obr-btn:active { transform: scale(0.96); }
.obr-btn.is-rec { border-color: var(--lp-terra); background: color-mix(in srgb, var(--lp-terra) 10%, #fff); }
.obr-ic { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; font-size: 12px; font-weight: 800; line-height: 1; }
.obr-alg .obr-ic { background: var(--lp-terra); color: var(--lp-cream); }
.obr-pref .obr-ic { background: transparent; border: 1.5px solid var(--lp-fg3, #8a7a6b); color: var(--lp-fg3, #8a7a6b); }
.obr-unknown { display: flex; align-items: flex-start; gap: 10px; }
.obr-unknown .obr-q i { font-style: italic; color: var(--lp-terra-deep, #9c3d22); }
.obr-x { margin-left: auto; flex: none; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: none; border: none; font-size: 20px; line-height: 1; color: var(--lp-fg3, #8a7a6b); padding: 0 2px; }
.obr-x:hover { color: var(--lp-espresso, #3a2c20); }
.obr-loading { display: flex; align-items: center; gap: 9px; font-family: var(--lp-sans);
  font-size: 14px; color: var(--lp-fg2, #6b5d50); }
.obr-loading b { color: var(--lp-espresso, #3a2c20); }
.obr-spin { width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--lp-terra) 30%, transparent); border-top-color: var(--lp-terra);
  animation: obrSpin .7s linear infinite; }
@keyframes obrSpin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════════
   MY TABLE — manage saved companions + party presets (/my-table).
   Scoped to .mytable + the body-level .mt-sheet; renders inside the warm fal-on
   column so it inherits --surface/--text/--accent/--line tokens.
   ════════════════════════════════════════════════════════════════════════════ */
.mytable { padding-bottom: 12px; }
.mt-head { margin-bottom: 6px; }

/* ════════════════════════════════════════════════════════════════════════════
   SETTINGS — account, preferences & privacy (/settings). Reached from the
   top-right profile avatar / name link (NOT a nav tab — Passport stays the tab).
   Scoped to .settings / .set-*.
   ════════════════════════════════════════════════════════════════════════════ */
.settings { max-width: 600px; margin: 0 auto; padding: 4px 2px 120px; animation: setFadeIn .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes setFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .settings { animation: none; } }
.set-head { padding: 10px 4px 20px; }
.set-title { font-family: var(--lp-serif, "DM Serif Display", Georgia, serif); font-size: 32px; line-height: 1.02; letter-spacing: -.01em; color: var(--text, #2C2017); margin: 0 0 6px; }
.set-sub { font-family: var(--lp-sans, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 500; font-size: 13.5px; color: var(--lp-muted, #8A7B6B); margin: 0; }
.set-group { margin: 0 0 22px; }
.set-group-label { display: flex; align-items: center; gap: 9px; font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 700; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--lp-muted, #8A7B6B); margin: 0 4px 9px; }
.set-soon { font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 700; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--lp-terra, #C2502F); background: rgba(194,80,47,.10); padding: 3px 7px; border-radius: 999px; }
.set-card { background: var(--lp-card, #FFFFFF); border: 1px solid rgba(44,32,23,.08); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(44,32,23,.045), 0 8px 22px -14px rgba(44,32,23,.16); }
.set-card-muted { opacity: .7; }
.settings button.set-row { width: 100%; background: none; border: none; cursor: pointer; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; border-bottom: 1px solid rgba(44,32,23,.07); text-align: left; text-decoration: none; color: inherit; }
/* Taste-Buddy preview chip on the Profile row (the editor's home is Settings). */
.set-buddy { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.set-buddy:empty { display: none; }
.set-buddy svg { width: 100%; height: 100%; display: block; }
.set-row:last-child { border-bottom: none; }
.set-rowlink { transition: background .12s; }
.set-rowlink:hover { background: rgba(44,32,23,.025); }
.set-rowlink:active { background: rgba(44,32,23,.05); }
.set-row-main { display: block; min-width: 0; flex: 1; }
.set-row-label { display: block; font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 600; font-size: 14.5px; line-height: 1.25; color: var(--text, #2C2017); margin: 0 0 2px; }
.set-row-val { display: block; font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 500; font-size: 12.5px; line-height: 1.35; color: var(--lp-muted, #8A7B6B); margin: 0; overflow-wrap: anywhere; }
.set-chev { color: #B9AC9C; flex: none; }
.set-note { font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 500; font-size: 11.5px; line-height: 1.45; color: var(--lp-muted, #8A7B6B); margin: 9px 6px 0; }
.set-navlink { font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 600; font-size: 13.5px; color: var(--lp-terra, #C2502F); text-decoration: none; }
.set-pad { padding: 15px 16px; }
.set-inline-note { font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--lp-muted, #8A7B6B); margin: 0 0 12px; }
.set-row-act { font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 600; font-size: 13px; color: var(--lp-terra, #C2502F); background: none; border: none; cursor: pointer; padding: 6px 2px; white-space: nowrap; flex: none; }
.set-switch { flex: none; width: 44px; height: 26px; border-radius: 999px; border: none; background: #D9CFC2; position: relative; cursor: pointer; transition: background .2s ease; padding: 0; }
.set-switch.on { background: var(--lp-terra, #C2502F); box-shadow: inset 0 0 0 1px rgba(194,80,47,.55), 0 1px 4px rgba(194,80,47,.28); }
.set-switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s cubic-bezier(.34,1.4,.5,1); }
.set-switch.on .set-switch-knob { transform: translateX(18px); }
.set-switch:active .set-switch-knob { width: 23px; }
.set-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.set-chip { font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 600; font-size: 13px; color: var(--text, #2C2017); background: #fff; border: 1.5px solid rgba(44,32,23,.14); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .08s; }
.set-chip:hover { border-color: rgba(194,80,47,.5); }
.set-chip:active { transform: scale(.96); }
.set-chip.on { background: var(--lp-terra, #C2502F); border-color: var(--lp-terra, #C2502F); color: #fff; box-shadow: 0 2px 8px -2px rgba(194,80,47,.45); }
.set-input { width: 100%; box-sizing: border-box; font-family: var(--lp-sans, system-ui, sans-serif); font-size: 14px; color: var(--text, #2C2017); background: #fff; border: 1.5px solid rgba(44,32,23,.14); border-radius: 12px; padding: 11px 13px; outline: none; transition: border-color .14s, box-shadow .14s; }
.set-input:focus { border-color: var(--lp-terra, #C2502F); box-shadow: 0 0 0 3px rgba(194,80,47,.13); }
.set-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.set-btn { font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 700; font-size: 13.5px; color: #fff; background: var(--lp-terra, #C2502F); border: none; border-radius: 999px; padding: 9px 20px; cursor: pointer; transition: opacity .12s, transform .08s, box-shadow .14s; }
.set-btn:not(:disabled):hover { box-shadow: 0 4px 14px -4px rgba(194,80,47,.5); }
.set-btn:not(:disabled):active { transform: scale(.97); }
.set-btn:disabled { opacity: .4; cursor: default; }
.set-saved { font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 600; font-size: 12.5px; color: #4a8c5f; }
.set-row-seg { display: block; }
.set-seg { display: flex; gap: 4px; background: #EFE7DB; border-radius: 11px; padding: 3px; width: 100%; }
.set-seg-btn { flex: 1; font-family: var(--lp-sans, system-ui, sans-serif); font-weight: 600; font-size: 13px; color: var(--lp-muted, #8A7B6B); background: none; border: none; border-radius: 9px; padding: 8px 6px; cursor: pointer; transition: background .12s, color .12s; }
.set-seg-btn.on { background: #fff; color: var(--text, #2C2017); box-shadow: 0 1px 2px rgba(44,32,23,.08); }
.set-card-danger { border-color: rgba(178,59,46,.22); background: linear-gradient(180deg, rgba(178,59,46,.035), rgba(178,59,46,.015)); }
.set-card-danger .set-rowlink:hover { background: rgba(178,59,46,.05); }
.set-card-danger .set-row-label { color: #b23b2e; }
.set-card-danger .set-chev { color: rgba(178,59,46,.5); }
.mt-eyebrow { font-family: var(--fal-serif); font-style: italic; font-weight: 400; font-size: 16.5px; letter-spacing: 0; text-transform: none; color: var(--accent); }
.mt-h1 { font-family: var(--fal-serif); font-weight: 400; font-size: 38px; line-height: 1.05; letter-spacing: -.015em; color: var(--text); margin: 8px 0 0; }
.mt-sub { font-family: var(--fal-sans); font-size: 16px; line-height: 1.5; color: var(--text-2); margin: 12px 0 0; max-width: 46ch; }

.mt-sec { margin-top: 30px; }
.mt-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mt-sec-t { font-family: var(--fal-serif); font-weight: 400; font-size: 23px; color: var(--text); margin: 0; }
.mt-addbtn { font-family: var(--fal-sans); font-weight: 600; font-size: 13.5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background .15s, transform .1s; white-space: nowrap; }
.mt-addbtn:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.mt-addbtn:active { transform: scale(.96); }
.mt-addbtn:disabled { opacity: .4; cursor: not-allowed; }

.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 13px; }
.mt-card { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm); }
.mt-card-top { display: flex; align-items: center; gap: 12px; }
.mt-ava { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 23px; background: color-mix(in srgb, var(--accent) 11%, var(--surface)); border: 1px solid var(--line); }
.mt-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-name { font-family: var(--fal-sans); font-weight: 700; font-size: 16.5px; color: var(--text); line-height: 1.2; }
.mt-rel { font-family: var(--fal-sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.mt-diet { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-chip { font-family: var(--fal-sans); font-weight: 600; font-size: 11.5px; color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 999px; padding: 4px 10px; }
.mt-chip-ok { color: var(--text-3); background: color-mix(in srgb, var(--text) 5%, transparent); border-color: var(--line); }
.mt-card-foot { display: flex; gap: 16px; margin-top: auto; padding-top: 2px; }
.mt-link { font-family: var(--fal-sans); font-weight: 600; font-size: 13px; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; }
.mt-link:hover { text-decoration: underline; }
.mt-link.mt-del { color: var(--text-3); }
.mt-link.mt-del:hover { color: #B23A2A; }

.mt-empty { font-family: var(--fal-sans); font-size: 14.5px; line-height: 1.5; color: var(--text-2); border: 1px dashed var(--line-2); border-radius: 14px; padding: 18px; background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.mt-empty-soft { border-style: solid; border-color: var(--line); }

.mt-preset-list { display: flex; flex-direction: column; gap: 10px; }
.mt-preset { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.mt-preset-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mt-preset-name { font-family: var(--fal-sans); font-weight: 700; font-size: 15.5px; color: var(--text); }
.mt-preset-members { font-family: var(--fal-sans); font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.mt-foot-note { font-family: var(--fal-sans); font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Editor bottom-sheet (appended to <body>) */
body.mt-sheet-open { overflow: hidden; }
.mt-scrim { position: fixed; inset: 0; z-index: 220; background: color-mix(in srgb, #2A2018 52%, transparent); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .22s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mt-scrim.in { opacity: 1; }
.mt-sheet { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--bg, #F6EFE4); border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px color-mix(in srgb, #2A2018 30%, transparent); transform: translateY(100%); transition: transform .26s cubic-bezier(.22,.61,.36,1); }
.mt-scrim.in .mt-sheet { transform: translateY(0); }
.mt-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: var(--bg, #F6EFE4); border-bottom: 1px solid var(--line); }
.mt-sheet-head h3 { font-family: var(--fal-serif); font-weight: 400; font-size: 22px; color: var(--text); margin: 0; }
.mt-x { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 15px; cursor: pointer; }
.mt-sheet-body { padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 20px; }
.mt-field { display: flex; flex-direction: column; gap: 9px; }
.mt-flabel { font-family: var(--fal-sans); font-weight: 700; font-size: 13.5px; color: var(--text); }
.mt-flabel em { font-style: normal; font-weight: 500; color: var(--text-3); }
.mt-fhint { font-family: var(--fal-sans); font-size: 12.5px; color: var(--text-3); margin-top: -4px; }
.mt-input { font-family: var(--fal-sans); font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; width: 100%; }
.mt-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow-soft); }
.mt-input.mt-err { border-color: #B23A2A; }
/* BUG E — "Add someone on Noodl" typeahead (create mode). */
.mt-uresults { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.mt-ures { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 12px; cursor: pointer; transition: border-color .14s, background .14s; }
.mt-ures:hover { border-color: var(--accent); }
.mt-ures:active { transform: scale(.99); }
.mt-ures:disabled { opacity: .55; cursor: default; }
.mt-ures-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-deep, var(--accent)); font-family: var(--fal-sans); font-weight: 700; font-size: 15px; }
.mt-ures-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mt-ures-n { font-family: var(--fal-sans); font-weight: 600; font-size: 14.5px; color: var(--text); }
.mt-ures-h { font-family: var(--fal-sans); font-size: 12px; color: var(--text-3); }
.mt-ures-add { font-family: var(--fal-sans); font-weight: 700; font-size: 12.5px; color: var(--accent); flex: none; }
.mt-ures-none { font-family: var(--fal-sans); font-size: 12.5px; color: var(--text-3); margin: 2px 0 0; }
.mt-or { display: flex; align-items: center; text-align: center; color: var(--text-3); font-family: var(--fal-sans); font-size: 12px; font-weight: 600; }
.mt-or::before, .mt-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mt-or span { padding: 0 12px; text-transform: uppercase; letter-spacing: .08em; }
.mt-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-pick { font-family: var(--fal-sans); font-weight: 600; font-size: 13px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.mt-pick:hover { border-color: var(--accent); }
.mt-pick.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mt-emojis { gap: 7px; }
.mt-emoji { width: 44px; height: 44px; font-size: 21px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color .14s, background .14s; }
.mt-emoji.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mt-toggle { display: flex; align-items: center; gap: 10px; font-family: var(--fal-sans); font-size: 14.5px; color: var(--text); cursor: pointer; }
.mt-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.mt-sheet-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 14px 20px 20px; background: var(--bg, #F6EFE4); border-top: 1px solid var(--line); }
.mt-btn-ghost { font-family: var(--fal-sans); font-weight: 600; font-size: 14px; color: var(--text-2); background: none; border: none; cursor: pointer; padding: 10px 6px; }
.mt-save { min-width: 130px; }

/* "Manage my table" entry link inside the Discover party picker */
.df-managetable { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-family: var(--fal-sans); font-weight: 600; font-size: 13.5px; color: var(--accent); text-decoration: none; }
.df-managetable:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════════
   MY TABLE v2 — full redesign (hero + avatar stack + member cards + saved
   tables + the reusable nav entry pill). Appended so these rules win over the
   originals above. Scoped to .mytable + the body-level pill/stack classes.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Relationship tints (one source of truth for avatars + pill faces) ──────── */
.mt-ava, .mt-pill-face { --rt: var(--accent); --rtd: var(--accent-deep); }
.mt-ava[data-rel="partner"],  .mt-pill-face[data-rel="partner"]  { --rt: var(--c-blush);     --rtd: var(--c-blush-deep); }
.mt-ava[data-rel="child"],    .mt-pill-face[data-rel="child"]    { --rt: var(--c-lemon);     --rtd: var(--c-lemon-deep); }
.mt-ava[data-rel="parent"],   .mt-pill-face[data-rel="parent"]   { --rt: var(--c-sky);       --rtd: var(--c-sky-deep); }
.mt-ava[data-rel="sibling"],  .mt-pill-face[data-rel="sibling"]  { --rt: var(--c-pistachio); --rtd: var(--c-pistachio-deep); }
.mt-ava[data-rel="friend"],   .mt-pill-face[data-rel="friend"]   { --rt: var(--c-mint);      --rtd: var(--c-mint-deep); }
.mt-ava[data-rel="colleague"],.mt-pill-face[data-rel="colleague"]{ --rt: var(--c-lavender);  --rtd: var(--c-lavender-deep); }
.mt-ava[data-rel="other"],    .mt-pill-face[data-rel="other"]    { --rt: var(--c-coral);     --rtd: var(--c-coral-deep); }
/* re-skin the base avatar disc to use the tint (wins over the original .mt-ava) */
.mt-ava { background: color-mix(in srgb, var(--rt) 42%, var(--surface)); border: 1px solid color-mix(in srgb, var(--rtd) 32%, var(--line)); }

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.mt-hero { position: relative; overflow: hidden; border-radius: 26px; padding: 26px 24px 24px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
  box-shadow: var(--shadow-sm); margin-bottom: 30px; }
/* slot for a bespoke generated "set table" photo — add .has-photo once it exists */
.mt-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .45s var(--ease-out); }
.mt-hero.has-photo .mt-hero-photo { opacity: 1; }
.mt-hero.has-photo::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(30,18,10,.06) 0%, rgba(30,18,10,.34) 62%, rgba(30,18,10,.62) 100%); }
.mt-hero.has-photo .mt-h1, .mt-hero.has-photo .mt-sub, .mt-hero.has-photo .mt-hero-stat { color: #FFF7EE; }
.mt-hero.has-photo .mt-eyebrow { color: #FFE3CF; }
.mt-hero-grain { position: absolute; inset: 0; pointer-events: none; opacity: .45; mix-blend-mode: soft-light;
  background-image: radial-gradient(rgba(120,70,40,.55) .5px, transparent .6px); background-size: 4px 4px; }
.mt-hero-inner { position: relative; z-index: 2; }
.mt-hero .mt-h1 { margin: 5px 0 0; font-size: clamp(32px, 9vw, 40px); }
.mt-hero .mt-sub { margin: 11px 0 0; max-width: 40ch; }
.mt-hero-foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.mt-hero-stat { font-family: var(--fal-sans); font-weight: 600; font-size: 13.5px; color: var(--text-2); }

/* ── Overlapping avatar stack (hero + saved tables) ─────────────────────────── */
.mt-avastack { display: inline-flex; align-items: center; flex: none; }
.mt-ava-stack { width: 48px; height: 48px; flex: none; margin-left: -15px; border: 3px solid var(--surface);
  box-shadow: 0 2px 7px -2px rgba(54,36,18,.22); transition: transform .18s var(--ease-out); }
.mt-ava-stack:first-child { margin-left: 0; }
.mt-avastack:hover .mt-ava-stack { transform: translateY(-1px); }
.mt-ava-more { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: var(--surface);
  color: var(--accent-deep); font-family: var(--fal-sans); font-weight: 700; font-size: 15px; }
.mt-ava-add { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); font-size: 26px; font-weight: 300; }
.mt-ava-sm.mt-ava-stack { width: 36px; height: 36px; margin-left: -12px; font-size: 18px; border-width: 2.5px; }

/* ── Member cards (Family & regulars) ───────────────────────────────────────── */
.mt-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mt-card { gap: 13px; border-radius: 18px; padding: 17px 17px 15px; transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), border-color .16s var(--ease-out); }
.mt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 20%, var(--line)); }
.mt-card-top { align-items: center; gap: 13px; }
.mt-ava-lg { width: 54px; height: 54px; font-size: 28px; border-width: 1.5px; box-shadow: var(--shadow-xs); }
.mt-card-edit { margin-left: auto; flex: none; font-family: var(--fal-sans); font-weight: 700; font-size: 12.5px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 999px; padding: 7px 14px; cursor: pointer;
  transition: background .14s, transform .1s; }
.mt-card-edit:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mt-card-edit:active { transform: scale(.95); }
.mt-card-remove { align-self: flex-start; margin-top: 2px; font-size: 12.5px; }

/* ── Dashed "add someone" card ──────────────────────────────────────────────── */
.mt-addcard { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; min-height: 168px; padding: 22px 18px; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 32%, var(--line-2)); border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 3.5%, transparent);
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), transform .16s var(--ease-out); }
.mt-addcard:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); transform: translateY(-3px); }
.mt-addcard:active { transform: scale(.99); }
.mt-addcard-empty { min-height: 184px; }
.mt-addcard-plus { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 7px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); font-size: 27px; font-weight: 300; line-height: 1; }
.mt-addcard-l { font-family: var(--fal-sans); font-weight: 700; font-size: 15px; color: var(--text); }
.mt-addcard-s { font-family: var(--fal-sans); font-size: 12.5px; line-height: 1.45; color: var(--text-3); max-width: 30ch; }

/* ── Saved-table (preset) cards ─────────────────────────────────────────────── */
.mt-preset { display: flex; flex-direction: column; align-items: stretch; gap: 14px; border-radius: 18px; padding: 17px 18px;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), border-color .16s var(--ease-out); }
.mt-preset:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 18%, var(--line)); }
.mt-preset-head { display: flex; align-items: center; gap: 14px; }
.mt-preset-head .mt-avastack { flex: none; }
.mt-preset-name { font-family: var(--fal-serif); font-weight: 400; font-size: 20px; color: var(--text); line-height: 1.1; }
.mt-preset-members { font-family: var(--fal-sans); font-size: 13px; color: var(--text-3); margin-top: 3px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-preset-safe { display: flex; flex-direction: column; gap: 9px; padding-top: 13px; border-top: 1px dashed var(--line); }
.mt-preset-safe-k { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fal-sans); font-weight: 700; font-size: 11.5px; color: var(--c-mint-deep); }
.mt-preset-safe-k::before { content: ""; width: 13px; height: 13px; flex: none;
  background: var(--c-mint-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1 3 5v6c0 5.25 3.84 10.74 9 12 5.16-1.26 9-6.75 9-12V5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1 3 5v6c0 5.25 3.84 10.74 9 12 5.16-1.26 9-6.75 9-12V5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.mt-preset-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
.mt-preset-plan { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fal-sans); font-weight: 700; font-size: 13.5px;
  color: var(--accent-deep); text-decoration: none; padding: 9px 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  transition: background .15s, transform .1s; }
.mt-preset-plan:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.mt-preset-plan:active { transform: scale(.97); }
.mt-preset-plan .mt-arr { transition: transform .25s var(--ease-out); }
.mt-preset-plan:hover .mt-arr { transform: translateX(3px); }

/* ── Reusable nav entry pill (the "better button") ──────────────────────────── */
.mt-navpill { display: inline-flex; align-items: center; gap: 9px; padding: 5px 15px 5px 7px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-xs); text-decoration: none;
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .14s var(--ease-out); }
.mt-navpill:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line-2)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.mt-navpill:active { transform: scale(.97); }
.mt-pill-stack { display: inline-flex; align-items: center; }
.mt-pill-face { width: 27px; height: 27px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  background: color-mix(in srgb, var(--rt) 42%, var(--surface)); border: 2px solid var(--surface); margin-left: -10px; }
.mt-pill-face:first-child { margin-left: 0; }
.mt-pill-more { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-deep);
  font-family: var(--fal-sans); font-weight: 700; font-size: 11px; }
.mt-pill-ic { width: 29px; height: 29px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
.mt-pill-label { font-family: var(--fal-sans); font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; }

/* ── Entrance motion ────────────────────────────────────────────────────────── */
.mytable .mt-hero, .mytable .mt-sec, .mytable .mt-linkreqs { animation: mtIn .5s var(--ease-out) both; }
.mytable .mt-linkreqs { animation-delay: .04s; }
.mytable .mt-sec:nth-of-type(2) { animation-delay: .08s; }
.mytable .mt-sec:nth-of-type(3) { animation-delay: .13s; }
@keyframes mtIn { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mytable .mt-hero, .mytable .mt-sec, .mytable .mt-linkreqs { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   TRIP PASSPORT (/trip) — visitor Dubai bucket list. Reuses .mt-* sheet + tokens.
   ════════════════════════════════════════════════════════════════════════════ */
.trip-head { margin-bottom: 8px; }
.trip-meta { font-family: var(--fal-sans); font-size: 15.5px; color: var(--text-2); margin: 10px 0 14px; }
.trip-head .mt-addbtn { display: inline-block; }

.trip-progress { display: flex; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 28px; }
.trip-ring { width: 92px; height: 92px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.trip-ring-in { width: 70px; height: 70px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.trip-ring-n { font-family: var(--fal-serif); font-size: 28px; color: var(--text); line-height: 1; }
.trip-ring-d { font-size: 15px; color: var(--text-3); }
.trip-progress-txt { min-width: 0; }
.trip-progress-h { font-family: var(--fal-serif); font-weight: 400; font-size: 20px; color: var(--text); margin: 0 0 4px; }
.trip-progress-s { font-family: var(--fal-sans); font-size: 14px; line-height: 1.45; color: var(--text-2); margin: 0; }

.trip-list-t { font-family: var(--fal-serif); font-weight: 400; font-size: 22px; color: var(--text); margin: 0 0 12px; }
.trip-list { display: flex; flex-direction: column; gap: 9px; }
.trip-icon { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; text-decoration: none; color: inherit; transition: border-color .14s, transform .1s; }
.trip-icon:hover { border-color: var(--line-2); }
.trip-icon:active { transform: scale(.99); }
.trip-icon.done { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.trip-check { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--on-accent); }
.trip-icon.done .trip-check { background: var(--accent); border-color: var(--accent); }
.trip-icon-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.trip-icon-name { font-family: var(--fal-sans); font-weight: 700; font-size: 15px; color: var(--text); }
.trip-icon-sub { font-family: var(--fal-sans); font-size: 12.5px; color: var(--text-3); }
.trip-icon .mt-chip { flex: none; }

/* Trip — venue thumb (real photo, or an honest tinted monogram when we have none) */
.trip-thumb { position: relative; width: 44px; height: 44px; flex: none; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); display: grid; place-items: center; }
.trip-thumb-mono { font-family: var(--fal-serif); font-size: 19px; color: var(--accent-deep); }
.trip-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Trip — the discovery funnel card ("Where tonight?" → /discover) */
.trip-decide { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 18px; padding: 18px 20px; margin-bottom: 28px; }
.trip-decide-txt { flex: 1; min-width: 200px; }
.trip-decide-h { font-family: var(--fal-serif); font-weight: 400; font-size: 21px; color: var(--text); margin: 0 0 3px; }
.trip-decide-s { font-family: var(--fal-sans); font-size: 13.5px; line-height: 1.45; color: var(--text-2); margin: 0; }
.trip-decide-btn { flex: none; text-decoration: none; }

.trip-list-head { margin: 0 0 12px; }
.trip-list-head .trip-list-t { margin: 0 0 3px; }
.trip-list-s { font-family: var(--fal-sans); font-size: 13.5px; line-height: 1.45; color: var(--text-2); margin: 0; }

/* "Yours specifically" — the taste-matched lane above the Googleable icons. Warmer
   than an icon row (accent-tinted) so the personal list reads as the richer half. */
.trip-yours { margin: 0 0 30px; }
.trip-yours-row { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 16%, transparent); }
.trip-yours-row:hover { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.trip-yours-m { flex: none; font-family: var(--fal-sans); font-weight: 700; font-size: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 99px; padding: 5px 9px; }

/* ── Taste Mirror v2 — ring gauge + fun paragraph + cutout dimension boxes ──── */
.tm-wrap{max-width:480px;margin:0 auto;padding:16px 16px 64px}
.tm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.tm-eyebrow{font:700 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}
.tm-close{all:unset;cursor:pointer;font:600 14px/1 var(--sans);color:var(--fg3)}

/* dimension detail — a centered popup over the (blurred) mirror; stays on the page */
.tm-modal{position:fixed;inset:0;z-index:5300;display:grid;place-items:center;padding:20px}
.tm-modal-backdrop{position:absolute;inset:0;background:color-mix(in srgb,#1a1008 34%,transparent);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .26s ease}
.tm-modal.open .tm-modal-backdrop{opacity:1}
.tm-modal-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:420px;max-height:82vh;overflow:hidden;background:var(--bg);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 70px -26px rgba(20,14,10,.62);transform:scale(.93) translateY(10px);opacity:0;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .24s ease}
.tm-modal.open .tm-modal-card{transform:none;opacity:1}
.tm-chip{display:inline-flex;align-items:center;font:600 12.5px/1 var(--sans);color:var(--fg1);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 12px;margin:0 7px 8px 0}
.tm-chip.love{background:var(--tint);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.tm-chip.nogo{color:var(--fg2)}
/* ── Taste-summary sheet — editorial prose treatment (Tolan / Co-Star inspired) ── */
.tm-cl-head{position:relative;flex:none;padding:24px 24px 18px}
.tm-cl-head::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--line) 92%,transparent),transparent)}
.tm-cl-x{all:unset;cursor:pointer;position:absolute;top:16px;right:16px;z-index:3;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--ink-soft);background:color-mix(in srgb,var(--ink) 6%,transparent);transition:background .18s}
.tm-cl-x:hover{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.tm-cl-eyebrow{font:700 10.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0 0 11px;display:inline-flex;align-items:center;gap:9px}
.tm-cl-eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:currentColor;opacity:.65}
.tm-cl-title{font:400 31px/1.04 var(--serif);color:var(--ink);margin:0;letter-spacing:-.015em}
.tm-cl-body{flex:1;min-height:0;overflow-y:auto;padding:4px 24px max(24px,env(safe-area-inset-bottom))}
.tm-prose{padding:19px 0 2px}
.tm-prose p{font:400 16px/1.74 var(--sans);color:var(--ink-soft);margin:0 0 16px;letter-spacing:-.003em}
.tm-prose p:last-child{margin:0}
.tm-prose .tm-lede{font:400 20.5px/1.5 var(--serif);color:var(--ink);margin-bottom:18px;letter-spacing:-.011em}
.tm-empty{font:500 14.5px/1.65 var(--sans);color:var(--ink-faint);padding:19px 0 0;margin:0}

/* ── Taste DNA: compact colored axes rectangle ─────────────────────────────── */
.tdna-mini{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),color-mix(in srgb,var(--accent-deep) 9%,var(--surface)));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:18px;padding:18px 17px 19px;box-shadow:var(--shadow-sm)}
.tdna-mini-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px}
.tdna-mini-eyebrow{flex:none;font:700 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.tdna-mini-headline{font:600 12.5px/1.2 var(--sans);color:var(--fg2);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdna-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 16px}
.tdna-ax-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.tdna-ax-nm{font:700 12px/1.1 var(--sans);color:var(--fg1);letter-spacing:-.01em}
.tdna-ax-lean{font:600 10px/1.1 var(--sans);color:var(--accent-deep);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdna-ax-bar{height:7px;border-radius:99px;background:color-mix(in srgb,var(--accent) 16%,transparent);overflow:hidden}
.tdna-ax-bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-deep))}

/* ── Taste Mirror rendered INLINE on the Taste DNA tab (not the overlay) ────── */
.tm-host{margin-top:18px}
.tm-host-loading{text-align:center;color:var(--fg3);padding:22px 0;font:500 13px/1.5 var(--sans)}

/* ════ Passport social/taste-identity spine — identity · share · friend profile · public ════ */
button.cc-main{background:none;border:0;-webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;text-align:left}
button.tt-plan{-webkit-appearance:none;appearance:none}
.ppid{display:flex;align-items:center;gap:13px;margin:0 0 16px}
.ppid-ava{flex:none;width:46px;height:46px;border-radius:50%;background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:var(--on-accent);font:500 21px/46px var(--serif);text-align:center;box-shadow:var(--shadow-sm)}
.ppid-id{flex:1;min-width:0}
body.fal-on .ppid-name{font:500 21px/1.1 var(--serif);color:var(--fg1);margin:0}
.ppid-handle{font:600 12.5px/1.2 var(--sans);color:var(--accent);margin:2px 0 0}
.ppid-persona{font:500 12.5px/1.3 var(--sans);color:var(--fg3);margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppid-share{flex:none;all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line))}
.ppid-share svg{width:17px;height:17px}
.ppid-share:hover{background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.shc-modal,.fpf-modal{position:fixed;inset:0;z-index:6000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .26s ease}
.shc-modal.open,.fpf-modal.open{opacity:1}
.shc-backdrop,.fpf-backdrop{position:absolute;inset:0;background:rgba(20,14,10,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.shc-wrap,.fpf-card{position:relative;z-index:1;width:100%;max-width:380px;transform:translateY(10px) scale(.98);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.shc-modal.open .shc-wrap,.fpf-modal.open .fpf-card{transform:none}
.shc-card{position:relative;overflow:hidden;border-radius:24px;padding:30px 24px 26px;text-align:center;color:var(--on-accent);background:linear-gradient(155deg,var(--accent),var(--accent-deep));box-shadow:0 24px 60px rgba(20,14,10,.4)}
.shc-glow{position:absolute;top:-40%;right:-30%;width:80%;height:80%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.shc-brand{position:relative;font:700 12px/1 var(--sans);letter-spacing:.32em;opacity:.85;margin:0 0 18px}
.shc-persona{position:relative;font:500 26px/1.15 var(--serif);margin:0 0 20px}
.shc-ringline{position:relative;display:flex;flex-direction:column;align-items:center;margin:0 0 20px}
.shc-pct{font:500 52px/1 var(--serif)}.shc-pct-s{font-size:24px;opacity:.8}
.shc-band{font:700 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;opacity:.9;margin-top:6px}
.shc-stats{position:relative;display:flex;justify-content:center;gap:26px;margin:0 0 16px}
.shc-stat{display:flex;flex-direction:column;gap:3px}
.shc-stat-n{font:500 24px/1 var(--serif)}
.shc-stat-l{font:600 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;opacity:.8}
.shc-fav{position:relative;font:500 13px/1.4 var(--sans);opacity:.92;margin:0 0 14px}.shc-fav strong{font-weight:700}
.shc-handle{position:relative;font:700 14px/1 var(--sans);letter-spacing:.02em;margin:0;opacity:.95}
.shc-actions{display:flex;gap:10px;margin-top:16px}
.shc-btn{flex:1;all:unset;cursor:pointer;text-align:center;border-radius:999px;padding:14px;font:700 14px/1 var(--sans);box-sizing:border-box}
.shc-copy{background:var(--accent);color:var(--on-accent)}
.shc-share{background:var(--surface);color:var(--fg1);border:1.5px solid var(--line)}
.shc-close{all:unset;cursor:pointer;display:block;width:100%;text-align:center;margin-top:12px;font:600 13px/1 var(--sans);color:rgba(255,255,255,.9)}
.fpf-card{background:var(--bg);border-radius:24px;max-height:86vh;overflow:hidden;box-shadow:0 24px 60px rgba(20,14,10,.4)}
.fpf-body{max-height:86vh;overflow-y:auto;padding:26px 22px max(24px,env(safe-area-inset-bottom));position:relative}
.fpf-loading{text-align:center;color:var(--fg3);padding:40px 0;font:500 14px/1.5 var(--sans)}
.fpf-close{position:absolute;top:14px;right:16px;z-index:3;all:unset;cursor:pointer;font:600 16px/1 var(--sans);color:var(--fg3)}
.fpf-hero{text-align:center;margin-bottom:14px}
.fpf-ava{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:var(--on-accent);font:500 27px/1 var(--serif);box-shadow:var(--shadow-sm);margin-bottom:10px}
body.fal-on .fpf-name{font:500 24px/1.1 var(--serif);color:var(--fg1);margin:0}
.fpf-handle{font:600 13px/1.2 var(--sans);color:var(--accent);margin:3px 0 0}
.fpf-persona{font:500 13px/1.35 var(--sans);color:var(--fg3);margin:5px 0 0}
.fpf-match{position:relative;width:92px;height:92px;margin:6px auto 2px}
.fpf-ring{width:92px;height:92px;display:block}
.fpf-track{fill:none;stroke:color-mix(in srgb,var(--accent) 16%,transparent);stroke-width:6}
.fpf-arc{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round}
.fpf-match-pct{position:absolute;top:30px;left:0;right:0;text-align:center;font:500 26px/1 var(--serif);color:var(--fg1)}.fpf-match-s{font-size:13px;color:var(--fg3)}
.fpf-match-l{position:absolute;bottom:13px;left:0;right:0;text-align:center;font:700 8.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--fg3)}
.fpf-shared{text-align:center;font:500 13px/1.4 var(--sans);color:var(--accent-deep);margin:4px 0 16px}
.fpf-sec{margin:0 0 18px}
.fpf-sec-h{font:700 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--fg3);margin:0 0 10px}
.fpf-meal{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.fpf-meal:last-child{border-bottom:0}
.fpf-meal-id{min-width:0}
.fpf-meal-dish{display:block;font:600 14px/1.25 var(--sans);color:var(--fg1)}
.fpf-meal-at{display:block;font:500 12px/1.3 var(--sans);color:var(--fg3);margin-top:1px}
.fpf-rate{flex:none;display:inline-flex;gap:3px}
.fpf-dot{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--fg3) 24%,transparent)}
.fpf-dot.on{background:var(--accent)}
.fpf-chips{display:flex;flex-wrap:wrap;gap:7px}
.fpf-chip{font:600 12.5px/1 var(--sans);color:var(--fg1);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 12px}
.fpf-cta{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.fpf-plan{all:unset;cursor:pointer;text-align:center;border-radius:999px;padding:14px;font:700 14px/1 var(--sans);background:var(--accent);color:var(--on-accent);box-sizing:border-box}
.fpf-link{all:unset;cursor:pointer;text-align:center;border-radius:999px;padding:13px;font:600 13.5px/1 var(--sans);background:var(--surface);color:var(--fg1);border:1.5px solid var(--line);box-sizing:border-box}
.pub{max-width:440px;margin:0 auto;padding:8px 0 40px}
.pub-loading{text-align:center;color:var(--fg3);padding:60px 0;font:500 14px/1.5 var(--sans)}
/* ══ /u/:handle — the full Instagram-style taste profile (renderPublicProfile) ══ */
.prof { max-width: 620px; margin: 0 auto; }
.prof-head { padding: 6px 4px 14px; }
.prof-idrow { display: flex; align-items: center; gap: 22px; }
.prof-av { flex: none; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center;
  font: 700 30px/1 var(--fal-sans, var(--sans)); background: var(--t-bg, var(--accent)); color: var(--t-text, #fff);
  box-shadow: 0 8px 22px -10px rgba(42,32,24,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.prof-stats { flex: 1; display: flex; justify-content: space-around; gap: 6px; }
.prof-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 4px 2px; cursor: pointer; font: inherit; }
.prof-stat[disabled], span.prof-stat { cursor: default; }
.prof-stat-n { font: 700 20px/1 var(--fal-sans, var(--sans)); color: var(--ink, #2A2018); }
.prof-stat-l { font: 500 12.5px/1 var(--fal-sans, var(--sans)); color: var(--text-3, #8B7B63); }
.prof-nameline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.prof-name { font: 500 24px/1.1 var(--fal-serif, var(--serif)); color: var(--ink, #2A2018); margin: 0; }
.prof-tier { font: 700 11px/1 var(--fal-sans, var(--sans)); letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: var(--t-bg, var(--accent)); color: var(--t-text, #fff); }
.prof-handle { font: 500 14px/1.2 var(--fal-sans, var(--sans)); color: var(--text-3, #8B7B63); margin: 4px 0 0; }
/* Audit M5 — the archetype line: the taste identity on the taste profile. */
.prof-arch { font: italic 400 14.5px/1.3 var(--fal-serif, Georgia, serif); color: var(--terracotta, #C2502F); margin: 7px 0 0; }
/* Taste Buddy as the avatar — the SVG fills the disc; no monogram bg/shadow-inset. */
.prof-av-buddy { background: transparent; box-shadow: none; overflow: hidden; padding: 0; }
.prof-av-buddy svg { width: 100%; height: 100%; display: block; }
.prof-actions { margin: 16px 0 0; }
/* Taste match banner (viewer ↔ this diner) — the compatibility story on a friend's profile. */
.prof-match { display: flex; align-items: center; gap: 13px; margin: 14px 0 0; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.prof-match-ring { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--m,0) * 1%), color-mix(in srgb, var(--accent) 15%, transparent) 0); }
.prof-match-ring::before { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-3, #FFFBF2); }
.prof-match-pct { position: relative; font: 800 15px/1 var(--fal-sans, var(--sans)); color: var(--accent-deep, var(--accent)); }
.prof-match-pct small { font-size: 8.5px; font-weight: 700; }
.prof-match-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prof-match-h { font: 800 15px/1.1 var(--fal-sans, var(--sans)); color: var(--ink, #2A2018); }
.prof-match-s { font: 500 12.5px/1.35 var(--fal-sans, var(--sans)); color: var(--text-2, #5C4F3D); }
.prof-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 11px 16px; border-radius: 12px; font: 700 14.5px/1 var(--fal-sans, var(--sans)); cursor: pointer; text-decoration: none; border: 1px solid transparent; }
.prof-btn-primary { background: var(--accent); color: var(--on-accent, #FFF7EE); border: none; }
.prof-btn-ghost { background: var(--surface, #fff); color: var(--ink, #2A2018); border: 1px solid var(--line, #E7DECF); }
.prof-connected { color: var(--accent-deep, var(--accent)); }
.prof-tabs { display: flex; border-top: 1px solid var(--line, #E7DECF); margin-top: 6px; position: sticky; top: 0; background: var(--bg, #FBF7F1); z-index: 5; }
.prof-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 8px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-3, #8B7B63); font: 600 13.5px/1 var(--fal-sans, var(--sans)); cursor: pointer; }
.prof-tab i { font-size: 18px; }
.prof-tab.on { color: var(--ink, #2A2018); border-bottom-color: var(--accent); }
.prof-body { min-height: 40vh; padding-bottom: 30px; }
.prof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.prof-tile { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: var(--tint, #F4EADD); cursor: pointer; overflow: hidden; }
.prof-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-tile-multi { position: absolute; top: 6px; right: 6px; color: #fff; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.5); display: grid; }
/* Reaction count on a tile (founder, 2026-08-09 — "similar to Instagram"). Bottom-left
   so it never collides with the multi-photo mark top-right. Food photos are bright and
   busy, so the number rides its own scrim rather than trusting a text-shadow to carry
   white over a plate of rice. Absent entirely at zero. */
.prof-tile-rx {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 7px 6px;
  display: flex; align-items: center; gap: 4px;
  color: #fff; font: 700 12px/1 var(--sans); letter-spacing: .01em;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
}
.prof-tile-rx-e { font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }

.prof-been { display: flex; flex-direction: column; gap: 10px; padding: 14px 4px; }
.prof-been-card { display: flex; align-items: center; gap: 13px; text-decoration: none; padding: 8px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--line, #E7DECF); }
.prof-been-img { flex: none; width: 56px; height: 56px; border-radius: 11px; overflow: hidden; background: var(--tint, #F4EADD); display: grid; place-items: center; }
.prof-been-img img { width: 100%; height: 100%; object-fit: cover; }
.prof-been-ph { color: var(--accent); font-size: 22px; }
.prof-been-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prof-been-n { font: 700 15px/1.2 var(--fal-sans, var(--sans)); color: var(--ink, #2A2018); }
.prof-been-s { font: 500 12.5px/1.2 var(--fal-sans, var(--sans)); color: var(--text-3, #8B7B63); }
.prof-empty { text-align: center; padding: 48px 24px; color: var(--text-3, #8B7B63); }
.prof-empty i { font-size: 34px; color: var(--line-2, #DCD0BB); display: block; margin-bottom: 12px; }
.prof-empty p { font: 500 14.5px/1.5 var(--fal-sans, var(--sans)); margin: 0; }
.prof-taste { padding: 22px 4px; display: flex; justify-content: center; }
.prof-cardstage { position: relative; width: min(88vw, 320px); aspect-ratio: 2/3; border-radius: 20px; box-shadow: 0 24px 60px rgba(20,14,10,.32); background: #FAF5EC; overflow: hidden; }
/* Post sheet (tap a grid tile) */
.prof-postsheet { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: flex-end; justify-content: center; }
.prof-ps-bd { position: absolute; inset: 0; background: rgba(20,14,8,.5); }
.prof-ps-card { position: relative; width: min(520px, 100%); max-height: 92dvh; overflow-y: auto; background: var(--bg-3, #FFFBF2); border-radius: 20px 20px 0 0; padding: 14px 0 max(16px, env(safe-area-inset-bottom)); animation: cmSheetUp .3s var(--ease-out, ease) both; }
.prof-ps-x { position: absolute; top: 10px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line, #E7DECF); background: var(--surface, #fff); color: var(--text-2, #5C4F3D); font-size: 20px; cursor: pointer; }
.prof-ps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 16px 12px; }
.prof-ps-who { font: 700 15px/1.2 var(--fal-sans, var(--sans)); color: var(--ink, #2A2018); }
.prof-ps-venue { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1.2 var(--fal-sans, var(--sans)); color: var(--accent-deep, var(--accent)); text-decoration: none; }
.prof-ps-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.prof-ps-track::-webkit-scrollbar { display: none; }
/* snap-stop:always — one swipe, one photo, natively (it was missing here) */
.prof-ps-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 4/3; background: #000; }
.prof-ps-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-ps-dots { display: flex; justify-content: center; gap: 5px; padding: 10px 0 2px; }
.prof-ps-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line-2, #DCD0BB); }
.prof-ps-dots span.on { background: var(--accent); }
.prof-ps-cap { padding: 12px 16px 0; font: 500 14.5px/1.5 var(--fal-sans, var(--sans)); color: var(--text-2, #5C4F3D); margin: 0; }
/* Post-sheet social row — the shared rx- reaction bar (visit-keyed, same API as the feed). */
.prof-ps-social { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; }

/* ═══ v920 — profile post viewer (.pfv): the Instagram flow. Tap a grid tile and
   the profile becomes ONE full-screen feed — every post as a full premium card
   (the stream's .cms-card/.cmp language), landed on the tapped one; scroll for
   the rest; back/Esc uncovers the untouched grid. Slides in from the right the
   way a drill-down should. ═══ */
.pfv {
  position: fixed; inset: 0; z-index: 1290;
  background: var(--bg-2, #FAF3E7);
  display: flex; flex-direction: column;
  animation: pfvIn 0.3s var(--ease-out, ease) both;
}
@keyframes pfvIn { from { transform: translateX(7%); opacity: 0.35; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pfv { animation: none; } }
.pfv-top {
  flex: none; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  background: color-mix(in srgb, var(--bg-2, #FAF3E7) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--line, #E7DECF) 70%, transparent);
}
.pfv-back {
  flex: none; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line, #E7DECF); background: var(--surface, #fff);
  color: var(--text, #2A2018); font-size: 18px; display: grid; place-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s var(--ease-out, ease);
}
.pfv-back:active { transform: scale(0.92); }
.pfv-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pfv-kick { font: 700 10px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfv-h { font: 400 19px/1.15 var(--serif); color: var(--text, #2A2018); }
/* v977 — the viewer follows the stream full-bleed: no side padding, no 20px gutters
   between cards, hairline separators. It's the same feed, opened on one post. */
/* Same seam as the stream — this IS the stream, opened on one post, and it's the
   surface a diner reaches from the All-of-Noodl grid. The two must never diverge:
   gap:0 here would bring back the "where does one post end" problem, and the old
   --bg-2 band would bring back the brown stripe. */
.pfv-scroll {
  flex: 1; overflow-y: auto; position: relative; overscroll-behavior: contain;
  padding: 0 0 calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface-2, #FBF6EC);
}
.pfv-scroll > .cms-card { width: 100%; max-width: 470px; margin: 0 auto; flex: none; animation: none; }
/* keyed wrapper (the All-of-Noodl viewer keys cards by feed key to land the scroll) */
.pfv-item { width: 100%; max-width: 470px; margin: 0 auto; flex: none; }
/* the 10px ground band separates them now — a border on top of it double-draws */
.pfv-item .cms-card { animation: none; }
.pfv-item .cm-loadmore { margin: 14px 16px; }
.pfv-item .cm-loadmore { width: 100%; }
/* the viewer's avatar disc (prof.avatar spec / monogram fallback) */
.pfv-av { flex: none; width: 44px; height: 44px; border-radius: 999px; overflow: hidden; display: inline-flex; }
.pfv-av-mono {
  background: var(--lp-terra, #C2502F); color: var(--lp-cream, #FFF7EE);
  display: grid; place-items: center; font: 400 20px/1 var(--serif);
}
/* inline comment thread inside a viewer card */
.pfv-th { padding: 2px 16px 14px; }

/* BUG A — the /u/{handle} page hero is now the shared share-style card canvas, centered. */
.pub-cardstage{position:relative;width:min(88vw,320px);aspect-ratio:2/3;margin:4px auto 22px;border-radius:20px;box-shadow:0 24px 60px rgba(20,14,10,.32);background:#FAF5EC;overflow:hidden}
.pub-card{position:relative;overflow:hidden;border-radius:26px;padding:34px 26px 28px;text-align:center;color:var(--on-accent);background:linear-gradient(155deg,var(--accent),var(--accent-deep));box-shadow:0 24px 60px rgba(20,14,10,.32)}
.pub-glow{position:absolute;top:-40%;right:-30%;width:80%;height:80%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%);pointer-events:none}
.pub-eyebrow{position:relative;font:700 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.22em;opacity:.82;margin:0 0 12px}
body.fal-on .pub-name{font:500 30px/1.08 var(--serif);color:var(--on-accent);margin:0}
.pub-handle{position:relative;font:700 13px/1.2 var(--sans);opacity:.9;margin:5px 0 0}
.pub-persona{position:relative;font:500 17px/1.3 var(--serif);font-style:italic;margin:14px 0 0;opacity:.96}
.pub-opener{position:relative;font:500 13px/1.45 var(--sans);opacity:.9;margin:9px 0 0}
.pub-ring{position:relative;display:flex;flex-direction:column;align-items:center;margin:22px 0}
.pub-pct{font:500 56px/1 var(--serif)}.pub-pct-s{font-size:26px;opacity:.8}
.pub-band{font:700 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;opacity:.9;margin-top:6px}
.pub-stats{position:relative;display:flex;justify-content:center;gap:30px;margin:0 0 16px}
.pub-stat{display:flex;flex-direction:column;gap:4px}
.pub-stat-n{font:500 26px/1 var(--serif)}
.pub-stat-l{font:600 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;opacity:.8}
.pub-stamps{position:relative;margin:0 auto 14px;max-width:260px}
.pub-stamps-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}
.pub-stamps-bar>i{display:block;height:100%;border-radius:99px;background:var(--on-accent)}
.pub-stamps-l{display:block;font:600 11px/1.3 var(--sans);opacity:.85;margin-top:7px}
.pub-fav{position:relative;font:500 13px/1.4 var(--sans);opacity:.92;margin:0}.pub-fav strong{font-weight:700}
.pub-foot{text-align:center;margin-top:22px}
.pub-cta,.pub-add{min-width:240px}
.pub-tagline{font:500 13px/1.5 var(--sans);color:var(--fg2);margin:16px auto 0;max-width:300px}
.pub-signin{display:inline-block;margin-top:12px;font:600 13px/1 var(--sans);color:var(--accent)}
.pub-empty{text-align:center;padding:60px 20px}
body.fal-on .pub-empty-h{font:500 24px/1.15 var(--serif);color:var(--fg1);margin:0 0 8px}
.pub-empty-p{font:500 14px/1.5 var(--sans);color:var(--fg3);margin:0 0 22px}
@media (prefers-reduced-motion:reduce){.shc-wrap,.fpf-card{transition:none}}
.tm-wrap.tm-inline{max-width:none;margin:0;padding:0}
.tm-wrap.tm-inline .tm-top{margin-bottom:2px}
.tm-wrap.tm-inline .tm-gauge{margin-top:6px}

/* Inline Mirror loading skeleton — mirrors the real layout (ring · blurb · boxes)
   so the page appears instantly and fills in with no jump. Reuses skPulse. */
.tm-sk{pointer-events:none}

/* G1 — verified-visit (presence) line on the Cred card: visiting earns, not just rating */
.pp-cred-visits{margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.01em;opacity:.72}

/* (The old .off-* public-offers tab + .loy-* first-gen loyalty card CSS were
   removed 2026-06-12 with the third-party deals feature — no JS renders them.) */

/* ═══════════════════════════════════════════════════════════════════════════
   LOYALTY REDESIGN (.pl-*) — membership card + climb track + Fetch-style scan/
   earn-reveal + image-led reward cards. Scoped; reuses the .tier-<id> --t-* tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --pl-cream:#FBF6EC; --pl-sand:#F3EADB; --pl-line:#E7DBC6; --pl-line2:#EFE6D6;
  --pl-espresso:#2A2018; --pl-ink2:#6B6358; --pl-ink3:#9A9085;
  /* accent aligned to the global ember so Loyalty CTAs match every other primary */
  --pl-terra:var(--accent,#F2502E); --pl-terra-d:var(--accent-deep,#CC3F16);
  --pl-terra-soft:#FDE5DB; --pl-garnet:#8C2742;
  --pl-serif:'Fraunces','DM Serif Display',Georgia,serif;
  --pl-sans:'Plus Jakarta Sans','Inter',-apple-system,sans-serif;
}
.pl-page{max-width:520px;margin:0 auto;font-family:var(--pl-sans)}
.pl-h1{font-family:var(--pl-serif);font-weight:600;font-size:30px;letter-spacing:-.01em;margin:5px 0 0;color:var(--pl-espresso)}

/* (the .pl-header wrapper + the .pl-card* membership-card family were reaped
   2026-07-09 — the v767 .lyx-* Loyalty redesign renders the card as .lyx-card and
   the header as .lyx-head; zero .pl-header/.pl-card* references remain in frontend/.) */

/* (the legacy horizontal climb .pl-track/.pl-node/.pl-pip block was reaped
   2026-07-09 — the v767 .lyx-* Loyalty redesign renders no climb track and no
   JS/HTML references remained. Home's own .pl-rail keeps its rules elsewhere.) */

/* scan CTA */
.pl-scan{margin:18px 0 6px;background:#fff;border:1px solid var(--pl-line);border-radius:20px;padding:18px;box-shadow:0 12px 26px -18px rgba(120,80,40,.3)}
.pl-scan-top{display:flex;align-items:center;gap:14px}
.pl-scan-cam{width:50px;height:50px;border-radius:15px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--pl-terra),#D9663E);box-shadow:0 8px 18px -6px rgba(194,80,47,.6)}
.pl-scan-cam svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.9}
.pl-scan h3{font-family:var(--pl-serif);font-weight:600;font-size:18px;margin:0}
.pl-scan p{font-size:12.5px;color:var(--pl-ink2);line-height:1.45;margin:2px 0 0}
.pl-scan-btn{margin-top:14px;width:100%;border:none;border-radius:14px;padding:13px;font-family:inherit;font-size:14.5px;font-weight:800;color:#fff;background:var(--pl-terra);cursor:pointer;box-shadow:0 10px 20px -8px rgba(194,80,47,.55)}
.pl-scan-btn:disabled{opacity:.7;cursor:default}
.pl-scan-alt{display:block;text-align:center;margin-top:10px;font-size:11.5px;color:var(--pl-ink3)}

/* sections + reward cards */
.pl-sec{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-espresso);margin:22px 2px 12px}
.pl-sec span{color:var(--pl-ink3)}
.pl-rewards{display:flex;flex-direction:column;gap:12px}
.pl-reward{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--pl-line);border-radius:20px;padding:13px;
  box-shadow:0 14px 30px -20px rgba(120,80,40,.45);transition:transform .18s var(--ease-spring, ease)}
.pl-reward:active{transform:scale(.985)}
.pl-reward.is-locked{background:#FCFAF5;border-color:var(--pl-line2)}
.pl-rw-thumb{width:78px;height:78px;border-radius:16px;flex:none;position:relative;overflow:hidden;background-color:#E6D8C0;background-size:cover;background-position:center;display:grid;place-items:center}
.pl-rw-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.16))}
.pl-rw-grad{background-image:linear-gradient(135deg,#E7A24B,#C2502F)}
.pl-rw-emoji{display:none}
.pl-rw-grad .pl-rw-emoji{display:grid;font-size:30px;position:relative;z-index:1}
.pl-reward.is-locked .pl-rw-thumb{filter:grayscale(.35) opacity(.88)}
.pl-rw-body{flex:1;min-width:0}
.pl-rw-venue{font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--pl-ink3);display:flex;align-items:center;gap:6px}
.pl-pv{font-size:8.5px;color:var(--pl-ink3);background:var(--pl-line2);padding:2px 6px;border-radius:999px;letter-spacing:.05em}
.pl-rw-title{font-family:var(--pl-serif);font-weight:600;font-size:17px;line-height:1.15;margin:3px 0 7px;color:var(--pl-espresso)}
.pl-reward.is-locked .pl-rw-title{color:#5a5248}
.pl-rw-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px}
.pl-lock-ic{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;flex:none}
.pl-pill.match{color:var(--pl-terra-d);background:var(--pl-terra-soft)}
.pl-pill.lock{color:var(--pl-ink2);background:var(--pl-line2)}
.pl-pill.lock.tier{color:#fff;background:var(--pl-garnet)}
.pl-pill.lock.tier.tm{background:#1A150F}
.pl-claimed{font-size:11px;color:var(--pl-ink3);font-weight:600}
.pl-rw-cta{flex:none}
/* Mobile: the reward-card row [thumb | text | Claim] crushes the title to ~68px on
   phones (word-by-word wrap). Stack the Claim button full-width below the content. */
@media (max-width:440px){
  .pl-reward{flex-wrap:wrap}
  .pl-rw-cta{flex-basis:100%}
  .pl-rw-cta .pl-claim{width:100%}
}
.pl-claim{border:none;border-radius:999px;padding:11px 16px;font-family:inherit;font-size:13px;font-weight:800;color:#fff;
  background:var(--accent-grad,linear-gradient(135deg,#FF6B3D,#E2421C));cursor:pointer;
  box-shadow:0 10px 22px -10px var(--glow,rgba(242,80,46,.4));transition:transform .15s ease}
.pl-claim:active{transform:scale(.94)}
.pl-claim.is-out{background:var(--pl-line2);color:var(--pl-ink3);cursor:default;box-shadow:none}
.pl-code{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--pl-terra);border:1px dashed var(--pl-terra);border-radius:10px;padding:8px 10px;white-space:nowrap}
.pl-foot{font-size:11.5px;color:var(--pl-ink3);text-align:center;padding:20px 18px 8px;line-height:1.5}
.pl-empty{text-align:center;padding:30px 16px}
.pl-empty-t{font-size:17px;font-weight:700;color:var(--pl-espresso);margin:0 0 6px}
.pl-empty-s{font-size:14px;color:var(--pl-ink2);margin:0 0 16px;line-height:1.5}

/* skeleton (the offsh shimmer keyframe used to live in the removed .off-* block) */
@keyframes offsh{to{background-position:-200% 0}}
.pl-skel-card{height:120px;border:none;background:linear-gradient(100deg,#efe7da 30%,#f7f1e7 50%,#efe7da 70%);background-size:200% 100%;animation:offsh 1.2s ease-in-out infinite;box-shadow:none}
.pl-skel-row{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.pl-skel-rw{height:94px;border-radius:18px;background:linear-gradient(100deg,#efe7da 30%,#f7f1e7 50%,#efe7da 70%);background-size:200% 100%;animation:offsh 1.2s ease-in-out infinite}

/* earn reveal */
.pl-ov{position:fixed;inset:0;background:rgba(30,20,12,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.pl-reveal{position:relative;width:100%;max-width:360px;background:var(--pl-cream);border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(40,30,15,.45);text-align:center}
.pl-rtop{background:linear-gradient(170deg,#33261A,#241A12);color:#F3EFE2;padding:26px 24px 22px;position:relative}
.pl-confetti{position:absolute;inset:0 0 auto 0;height:90px;background:radial-gradient(60px 40px at 50% 0,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
.pl-check{position:relative;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);margin:0 auto 12px;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(255,255,255,.07)}
.pl-check svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:3}
.pl-vlabel{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.82;margin:0}
.pl-reveal h2{font-family:var(--pl-serif);font-weight:600;font-size:24px;margin:5px 0 0}
.pl-ticket{margin:18px 18px 0;background:#fff;border-radius:18px;box-shadow:0 14px 30px -16px rgba(60,50,20,.4);padding:6px 0 14px}
/* (the old modal .pl-earn{text-align:center} rule was removed 2026-06-12 — it
   collided with the "How your standing builds" explainer's .pl-earn block) */
.pl-big{font-family:var(--pl-serif);font-weight:600;font-size:44px;color:var(--pl-terra-d);line-height:1}
.pl-big small{font-size:19px;color:var(--pl-terra-d)}
.pl-esub{font-size:12.5px;color:var(--pl-ink2);margin-top:6px}
.pl-perf{height:1px;border-top:2px dashed var(--pl-line);margin:13px 18px}
.pl-li{display:flex;justify-content:space-between;align-items:center;padding:5px 20px;font-size:13px;color:var(--pl-espresso)}
.pl-q{color:var(--pl-ink3);font-weight:700;margin-right:8px}
.pl-pr{color:var(--pl-ink2);font-variant-numeric:tabular-nums}
.pl-note{margin:10px 16px 0;background:var(--pl-terra-soft);border-radius:12px;padding:10px 12px;font-size:11.5px;color:var(--pl-terra-d);font-weight:600;line-height:1.4}
.pl-reveal .pl-done{margin:18px;width:calc(100% - 36px);border-radius:14px;padding:14px;font-weight:800}
.pl-reveal-calm{padding-bottom:0}
.pl-reveal-calm .pl-rtop{background:#fff;color:var(--pl-espresso);padding:26px 24px 6px}
.pl-reveal-calm h2{color:var(--pl-espresso)}
.pl-calm-body{font-size:13px;color:var(--pl-ink2);line-height:1.5;margin:8px 24px 0}
.pl-code-box{font-family:ui-monospace,Menlo,monospace;font-size:23px;font-weight:700;letter-spacing:.08em;color:var(--pl-terra);background:#fff;border:1px dashed var(--pl-terra);border-radius:12px;padding:14px;margin:14px 24px 0}

/* ── Tier-up celebration (LOYALTY.md §6) — the rare, tasteful crossing moment.
   Tier-coloured via the .tier-<id> tokens (--t-bg/--t-text/--t-gold). Shared
   module: tierup.js (NoodlTierUp) — fired by the rating response's server-side
   tier_promotion or the /loyalty load fallback. */
.pl-tierup{padding:0;text-align:center;color:var(--t-text,#fff);background:var(--t-bg,linear-gradient(170deg,#33261A,#241A12));animation:pl-tierup-in .42s cubic-bezier(.2,.9,.25,1) both;position:relative;overflow:hidden}
@keyframes pl-tierup-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.pl-tierup-crest{display:block;width:66px;height:66px;margin:30px auto 8px;color:var(--t-gold,#EAD4A0)}
.pl-tierup-crest svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.28))}
.pl-tierup-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--t-text-soft,rgba(255,255,255,.72));margin:0}
.pl-tierup-tier{font-family:var(--pl-serif);font-weight:600;font-size:32px;line-height:1.05;margin:6px 24px 0;color:var(--t-text,#fff)}
.pl-tierup-promise{margin:16px 22px 0;padding:12px 14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:14px;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--t-text,#fff)}
.pl-tierup-plabel{display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--t-gold,#EAD4A0);margin-bottom:4px}
.pl-tierup-body{font-size:12.5px;line-height:1.55;color:var(--t-text-soft,rgba(255,255,255,.74));margin:14px 26px 0}
.pl-tierup-acts{display:flex;flex-direction:column;gap:9px;padding:20px 22px 24px}
.pl-tierup-acts .pl-tierup-share{background:var(--t-gold,#EAD4A0);color:#2A2018;border:none}
.pl-tierup-acts .pl-tierup-done{color:var(--t-text,#fff);border-color:rgba(255,255,255,.34);background:transparent}
/* New Diner / light-background tiers keep dark ink on the gold-ish button + readable ghost. */
.pl-tierup.tier-new_diner .pl-tierup-share{color:#3E3020}
.pl-tierup.tier-new_diner .pl-tierup-done{color:var(--t-text,#3E3020);border-color:rgba(62,48,32,.34)}
/* Confetti — a short drift in the tier's own palette (gold / cream / terracotta).
   Rendered ONLY when prefers-reduced-motion is off (tierup.js gates it), and the
   CSS guard below removes it defensively too. Pieces fall + fade, then vanish. */
.pl-tierup-confetti{position:absolute;inset:0;pointer-events:none;z-index:1}
.pl-tu-cf{position:absolute;top:-12px;width:7px;height:11px;border-radius:2px;opacity:0;animation:pl-tu-fall 2.2s ease-in both}
.pl-tu-cf.k0{background:var(--t-gold,#EAD4A0)}
.pl-tu-cf.k1{background:#FFF7EE}
.pl-tu-cf.k2{background:#C2502F;width:6px;height:6px;border-radius:50%}
@keyframes pl-tu-fall{
  0%{opacity:0;transform:translate(0,0) rotate(0deg)}
  8%{opacity:.95}
  78%{opacity:.85}
  100%{opacity:0;transform:translate(var(--tu-dx,0px),340px) rotate(var(--tu-rot,180deg))}
}
@media (prefers-reduced-motion: reduce){
  .pl-tierup{animation:none}
  .pl-tierup-confetti{display:none}
}

/* Loyalty = BONUS reframe (2026-06-10): subtle intro, reward→restaurant link,
   an optional low-key receipt (price-contribution) card. (.pl-deal third-party
   deal cards removed 2026-06-12 with the feature.) */
.pl-intro{font-size:13px;line-height:1.55;color:var(--pl-ink2);margin:10px 2px 0;max-width:42ch}
.pl-rw-main{display:flex;gap:14px;align-items:center;flex:1;min-width:0;text-decoration:none;color:inherit}
a.pl-rw-main:active{opacity:.7}
/* optional receipt — a one-off price contribution, deliberately muted (not a CTA) */
/* (the .pl-contrib receipt-contribution card was reaped 2026-07-09 — only the
   one-line message below survives; receipt.js renders it inside .pl-ticket.) */
.pl-contrib-msg{font-size:13px;color:var(--pl-ink2);line-height:1.5;text-align:center;padding:16px 20px 4px}
.pl-earn-mini{font-size:12px;color:var(--pl-ink3);text-align:center;margin:10px 18px 0;font-weight:600}

/* Coupon caps — "first N people" scarcity on perk cards */
.pk-scarcity{font-size:12px;font-weight:600;color:var(--accent,#c2502f);margin:2px 0 8px}
.pk-scarcity.pk-soldout{color:var(--fg2,#8a7c70)}
.pk-card-soldout{opacity:.72}
.pk-soldout-btn{opacity:.6;cursor:default}

/* ═══════════════════════════════════════════════════════════════════════════
   COLLECTION EXPERIENCE (.cx) — Culinary Travels + Rankings. Fully scoped:
   tokens are --cx-* on :root (no clashes); every class is cx- prefixed.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --cx-cream:#F6EFE4; --cx-sand:#FCF6EC; --cx-paper:#FFFDF8;
  --cx-espresso:#2A2018; --cx-fg2:#6E6353; --cx-fg3:#9A8F78; --cx-fg4:#BCB199;
  --cx-terra:#C2502F; --cx-terra-deep:#9A3C20; --cx-terra-bright:#D85A33;
  --cx-line:rgba(42,32,24,.12); --cx-line-strong:rgba(42,32,24,.20);
  --cx-tint:#F1E7D6; --cx-gold:#B68A2E; --cx-gold-soft:#E7CE8E;
  --cx-serif:'DM Serif Display',Georgia,serif;
  --cx-num:'Fraunces','DM Serif Display',Georgia,serif;
  --cx-sans:'Plus Jakarta Sans','Inter',-apple-system,sans-serif;
  --cx-sh-sm:0 1px 2px rgba(42,32,24,.10),0 1px 3px rgba(42,32,24,.06);
  --cx-sh-md:0 14px 34px -12px rgba(42,32,24,.22),0 3px 10px rgba(42,32,24,.07);
  --cx-sh-lg:0 28px 60px -18px rgba(42,32,24,.30),0 8px 20px rgba(42,32,24,.08);
  --cx-spring:cubic-bezier(.34,1.5,.46,1); --cx-ease:cubic-bezier(.16,1,.3,1);
}
.cx{ font-family:var(--cx-sans); color:var(--cx-espresso) }
.cx-tnum{ font-family:var(--cx-num); font-variant-numeric:tabular-nums; letter-spacing:-.01em }

/* segmented switcher — the two pages */
.cx-seg{ position:relative; display:flex; background:var(--cx-tint); border:1px solid var(--cx-line); border-radius:999px; padding:5px; box-shadow:inset 0 1px 2px rgba(42,32,24,.05); margin:6px 0 4px }
.cx-seg-pill{ position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); background:var(--cx-paper); border-radius:999px; box-shadow:var(--cx-sh-sm); transition:transform .42s var(--cx-spring) }
.cx-seg.r .cx-seg-pill{ transform:translateX(100%) }
.cx-seg button{ position:relative; z-index:1; flex:1; background:none; border:0; cursor:pointer; font:700 14px/1 var(--cx-sans); color:var(--cx-fg3); padding:12px 8px; display:flex; align-items:center; justify-content:center; gap:8px; transition:color .3s }
.cx-seg button.on{ color:var(--cx-terra) }
.cx-seg button svg{ width:16px; height:16px; flex:none }

.cx-page{ display:none; animation:cxPgIn .5s var(--cx-ease) both }
.cx-page.on{ display:block }
@keyframes cxPgIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.cx-intro{ padding:18px 0 6px }
.cx-intro .ey{ font:800 11px/1 var(--cx-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--cx-terra); margin-bottom:11px }
.cx-intro h1{ font:400 clamp(30px,7.5vw,40px)/1.05 var(--cx-serif); letter-spacing:-.015em; color:var(--cx-espresso) }
.cx-intro p{ font:500 14px/1.5 var(--cx-sans); color:var(--cx-fg2); margin-top:11px; max-width:42ch }
.cx-tasteoff-link{ display:inline-block; margin-top:13px; font:700 13px/1 var(--cx-sans); color:var(--cx-terra); text-decoration:none }
.cx-tasteoff-link:hover{ color:var(--cx-terra-deep) }

/* passport artifact */
.cx-book{ position:relative; margin-top:20px; border-radius:22px; overflow:hidden;
  background:radial-gradient(120% 90% at 85% -10%,#fff7ea 0,transparent 55%),linear-gradient(165deg,#FBF4E7 0%,#F4E9D4 60%,#EEDFC4 100%);
  border:1px solid var(--cx-line-strong); box-shadow:var(--cx-sh-md),inset 0 1px 0 rgba(255,255,255,.7) }
.cx-book::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-radial-gradient(circle at 18% 26%,transparent 0 7px,rgba(154,60,32,.06) 7px 8px),repeating-radial-gradient(circle at 82% 74%,transparent 0 9px,rgba(154,60,32,.05) 9px 10px) }
.cx-book-top{ display:flex; align-items:flex-start; justify-content:space-between; padding:18px 20px 6px; position:relative; z-index:2 }
.cx-passport-lbl{ font:800 10px/1.3 var(--cx-sans); letter-spacing:.26em; text-transform:uppercase; color:var(--cx-terra-deep) }
.cx-passport-lbl span{ display:block; font:500 11px/1.4 var(--cx-sans); letter-spacing:.04em; color:var(--cx-fg2); text-transform:none; margin-top:4px }
.cx-seal{ width:44px; height:44px; flex:none; border-radius:50%; border:2px solid rgba(154,60,32,.4); display:flex; align-items:center; justify-content:center; color:var(--cx-terra-deep); transform:rotate(-8deg); opacity:.8 }
.cx-seal svg{ width:23px; height:23px }
.cx-map{ position:relative; height:200px; margin:2px 8px 0; z-index:1 }
.cx-canvas{ position:absolute; inset:0; width:100%; height:100% }
.cx-pin{ position:absolute; width:12px; height:12px; transform:translate(-50%,-50%); z-index:3 }
.cx-pin i{ position:absolute; inset:0; border-radius:50%; background:var(--cx-terra); box-shadow:0 0 0 3px rgba(194,80,47,.18),0 2px 5px rgba(42,32,24,.4) }
.cx-pin::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid rgba(194,80,47,.5); animation:cxPing 2.6s var(--cx-ease) infinite }
.cx-pin .lbl{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); white-space:nowrap; font:700 10px/1 var(--cx-sans); color:var(--cx-terra-deep); background:rgba(251,244,231,.92); padding:3px 6px; border-radius:5px; opacity:0; transition:opacity .25s; pointer-events:none; box-shadow:var(--cx-sh-sm) }
.cx-pin:hover .lbl{ opacity:1 }
@keyframes cxPing{ 0%{transform:scale(.5);opacity:.9} 70%,100%{transform:scale(2.1);opacity:0} }
.cx-book-foot{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:6px 22px 18px }
.cx-bignum{ display:flex; align-items:baseline; gap:10px }
.cx-bignum .n{ font:600 54px/.9 var(--cx-num); color:var(--cx-terra) }
.cx-bignum .of{ font:500 13px/1.3 var(--cx-sans); color:var(--cx-fg2); max-width:11ch }
.cx-stampbtn{ display:inline-flex; align-items:center; gap:9px; background:var(--cx-terra); color:#fff; border:0; border-radius:999px; padding:13px 18px; font:700 13px/1 var(--cx-sans); cursor:pointer; box-shadow:0 10px 22px -8px rgba(194,80,47,.7); transition:transform .2s var(--cx-spring) }
.cx-stampbtn:hover{ transform:translateY(-2px) }
.cx-stampbtn:active{ transform:translateY(1px) scale(.97) }
.cx-stampbtn svg{ width:16px; height:16px }
/* when a freshly-visited cuisine is waiting, the button gently bobs + glows to
   nudge you — the slot itself stays UNCOLOURED until you actually stamp it. */
/* HAS a freshly-visited cuisine waiting → bright + a periodic wiggle so it clearly
   says "press me, you've got something new". */
.cx-stampbtn.has-pending{ opacity:1; box-shadow:0 13px 30px -8px rgba(194,80,47,.9); animation:cxStampWiggle 2.6s ease-in-out infinite }
@keyframes cxStampWiggle{
  0%,66%,100%{ transform:translateY(0) rotate(0deg) }
  72%{ transform:translateY(-3px) rotate(-6deg) }
  78%{ transform:translateY(-2px) rotate(6deg) }
  84%{ transform:translateY(-2px) rotate(-5deg) }
  90%{ transform:translateY(-1px) rotate(3deg) }
}
/* NOTHING to stamp → faded + still, so the difference is obvious at a glance. */
.cx-stampbtn.no-pending{ opacity:.42; box-shadow:none; animation:none }
.cx-stampbtn.no-pending:hover{ opacity:.7; transform:none }
@media (prefers-reduced-motion:reduce){ .cx-stampbtn.has-pending{ animation:none } }
.cx-prog{ height:7px; border-radius:99px; background:rgba(42,32,24,.10); overflow:hidden; margin:0 22px }
.cx-prog i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--cx-terra),var(--cx-terra-bright)); width:0; transition:width 1.1s var(--cx-ease) }
.cx-prog-cap{ font:500 11.5px/1.4 var(--cx-sans); color:var(--cx-fg3); padding:8px 22px 16px }

/* stamp album */
.cx-region{ margin-top:28px }
.cx-region-h{ display:flex; align-items:center; gap:12px; margin-bottom:14px }
.cx-region-h .nm{ font:800 11.5px/1 var(--cx-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--cx-espresso) }
.cx-region-h .bar{ flex:1; height:4px; border-radius:99px; background:rgba(42,32,24,.10); overflow:hidden }
.cx-region-h .bar i{ display:block; height:100%; background:var(--cx-terra); border-radius:99px }
.cx-region-h .ct{ font:700 12px/1 var(--cx-sans); color:var(--cx-fg3) }
.cx-region-h .ct.on{ color:var(--cx-terra) }
.cx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px }

.cx-stamp{ position:relative; padding:14px 14px 13px; min-height:124px; cursor:pointer; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(158deg,#FBE4CD 0%,#F3C79E 100%); border-radius:7px;
  box-shadow:0 6px 15px -5px rgba(154,60,32,.34),inset 0 0 0 1px rgba(255,255,255,.40) }
.cx-stamp::after{ content:""; position:absolute; inset:5px; border:1px solid rgba(154,60,32,.36); border-radius:4px; pointer-events:none; z-index:2 }
.cx-stamp .cuisine{ font:400 22px/1.02 var(--cx-serif); color:var(--cx-espresso); position:relative; z-index:1 }
.cx-stamp .country{ font:700 10px/1 var(--cx-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--cx-terra-deep); margin-top:6px; position:relative; z-index:1 }
.cx-stamp .meta{ display:flex; align-items:center; gap:5px; font:600 11px/1.2 var(--cx-sans); color:#7A4A2C; margin-top:auto; padding-top:12px; position:relative; z-index:1 }
.cx-stamp .meta svg{ width:13px; height:13px; color:var(--cx-terra-deep); flex:none }
.cx-stamp .place{ font:500 10.5px/1.2 var(--cx-sans); color:#9A6B45; margin-top:3px; position:relative; z-index:1 }
.cx-stamp .cancel{ position:absolute; top:9px; right:8px; transform:rotate(-10deg); font:800 8px/1 var(--cx-sans); letter-spacing:.14em; text-transform:uppercase; color:rgba(154,60,32,.62); border:1.4px solid rgba(154,60,32,.46); border-radius:5px; padding:4px 6px 3px; z-index:3 }
.cx-stamp.pending .cuisine,.cx-stamp.pending .country,.cx-stamp.pending .meta,.cx-stamp.pending .place,.cx-stamp.pending .cancel,.cx-stamp.pending::after{ opacity:0 }
.cx-stamp.pending .cx-ink{ transform:translate(-50%,-50%) scale(.2); opacity:0 }
.cx-ink{ position:absolute; left:50%; top:48%; width:150%; height:150%; border-radius:50%; background:radial-gradient(circle,rgba(194,80,47,.18) 0,transparent 60%); transform:translate(-50%,-50%) scale(1); filter:blur(3px); z-index:0; pointer-events:none }
.cx-stamp.inked{ animation:cxSettle .5s var(--cx-spring) both }
.cx-stamp.inked .cuisine,.cx-stamp.inked .country,.cx-stamp.inked .meta,.cx-stamp.inked .place,.cx-stamp.inked .cancel,.cx-stamp.inked::after{ opacity:1; transition:opacity .45s ease .06s }
.cx-stamp.inked .cx-ink{ transform:translate(-50%,-50%) scale(1); opacity:1; transition:transform .5s var(--cx-spring),opacity .5s }
@keyframes cxSettle{ 0%{transform:scale(1.14)} 60%{transform:scale(.975)} 100%{transform:scale(1)} }

.cx-ghost{ position:relative; display:flex; flex-direction:column; gap:3px; padding:15px 14px; min-height:124px; border:1.6px dashed var(--cx-line-strong); border-radius:7px; background:rgba(255,253,248,.35); text-decoration:none; cursor:pointer; transition:border-color .25s,background .25s,transform .2s }
.cx-ghost:hover{ border-color:var(--cx-terra); background:rgba(242,231,214,.5); transform:translateY(-2px) }
.cx-ghost .cuisine{ font:400 22px/1.02 var(--cx-serif); color:var(--cx-fg2) }
.cx-ghost .country{ font:700 10px/1 var(--cx-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--cx-fg4); margin-top:6px }
.cx-ghost .not{ font:700 10px/1 var(--cx-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--cx-fg4); margin-top:auto }
.cx-ghost .collect{ font:700 11.5px/1 var(--cx-sans); color:var(--cx-terra); opacity:0; transform:translateY(4px); transition:.25s }
.cx-ghost:hover .collect{ opacity:1; transform:none }
.cx-ghost .collect.locked{ color:var(--cx-fg4) }
/* VISITED but not stamped — kept fully NEUTRAL (no colour). Colour only arrives
   once you actually stamp it; the animated button is the nudge instead. */
.cx-ghost.ready .cuisine{ color:var(--cx-espresso) }
.cx-ghost.ready .country{ color:var(--cx-fg4) }
.cx-ghost.ready .collect{ margin-top:auto; opacity:1; transform:none; color:var(--cx-fg2); font-weight:700 }
.cx-badge{ display:inline-flex; align-items:center; gap:4px; align-self:flex-start; font:800 8.5px/1 var(--cx-sans); letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(42,32,24,.5); border-radius:999px; padding:5px 8px 4px }
.cx-badge svg{ width:11px; height:11px }

/* Dubai stats + highlights */
.cx-dstats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:28px; background:var(--cx-line); border:1px solid var(--cx-line); border-radius:18px; overflow:hidden }
.cx-dstat{ background:var(--cx-sand); padding:18px 10px; text-align:center }
.cx-dstat .n{ font:600 32px/1 var(--cx-num); color:var(--cx-terra) }
.cx-dstat .n small{ font-size:17px; color:var(--cx-fg3) }
.cx-dstat .l{ font:600 10px/1.25 var(--cx-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--cx-fg3); margin-top:8px }
.cx-dfoot{ text-align:center; font:500 12px/1.4 var(--cx-sans); color:var(--cx-fg3); margin-top:13px }
/* (The "Still to taste" chip row — the audit's collapse of un-earned countries — was
   reverted 2026-08-03: the founder wants the full collection-book album, grey
   NOT-VISITED cards and all. The empty slots are the collectible's pull.) */
.cx-hicard{ margin-top:24px; background:var(--cx-paper); border:1px solid var(--cx-line); border-radius:18px; padding:16px 18px 6px; box-shadow:var(--cx-sh-sm) }
.cx-hicard .lab{ font:800 10px/1 var(--cx-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--cx-fg3); margin-bottom:4px }
.cx-hirow{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--cx-line) }
.cx-hirow:last-child{ border:0 }
.cx-hirow .hl{ font:600 12px/1.2 var(--cx-sans); color:var(--cx-fg3); width:96px; flex:none }
.cx-hirow .hv{ flex:1; min-width:0 }
.cx-hirow .hv b{ font:400 18px/1.1 var(--cx-serif); color:var(--cx-espresso); display:block }
.cx-hirow .hv span{ font:500 11.5px/1.2 var(--cx-sans); color:var(--cx-fg3) }
.cx-hirow .hs{ color:var(--cx-terra); flex:none }
.cx-hirow .hs svg{ width:18px; height:18px }

/* recent visits — folded into the bottom of the Collection (Culinary Travels) page */
.cx-recent{ margin-top:30px; padding-top:26px; border-top:1px solid var(--cx-line) }
.cx-recent-h{ margin-bottom:18px }
.cx-recent-h .pg-kicker{ margin-bottom:9px !important }
.cx-recent-h p{ font:500 14px/1.5 var(--cx-sans); color:var(--cx-fg2); margin:9px 0 0; max-width:42ch }

/* rankings */
.cx-scope{ position:relative; display:flex; gap:6px; background:var(--cx-tint); border:1px solid var(--cx-line); border-radius:999px; padding:5px; margin-top:18px }
.cx-scope button{ flex:1; background:none; border:0; cursor:pointer; font:700 13.5px/1 var(--cx-sans); color:var(--cx-fg3); padding:11px; border-radius:999px; transition:.25s }
.cx-scope button.on{ background:var(--cx-espresso); color:#fff; box-shadow:var(--cx-sh-sm) }
.cx-scoreinfo{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; font:600 12px/1 var(--cx-sans); color:var(--cx-fg3); margin:12px 2px 0 }
.cx-scoreinfo:hover{ color:var(--cx-terra) }
.cx-scoreexplain{ background:var(--cx-sand); border:1px solid var(--cx-line); border-radius:14px; padding:13px 15px; margin-top:10px; font:500 12.5px/1.55 var(--cx-sans); color:var(--cx-fg2) }
.cx-scoreexplain[hidden]{ display:none }
.cx-scoreexplain b{ color:var(--cx-espresso); font-weight:700 }
/* ── Ladder cards (rankings rebuild, Jul '26): every ELO ladder renders as its
   own titled card — podium ≥3, duel at 2 — so no bucket is ever hidden or
   unlabeled, and the arena pin ("Settling ✓") is visible per ladder. */
.cx-ladder{ margin-top:20px; background:var(--cx-paper); border:1px solid var(--cx-line); border-radius:20px; padding:16px 16px 12px; box-shadow:var(--cx-sh-sm) }
.cx-ladder-h{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.cx-ladder-hh{ flex:1; min-width:0 }
.cx-ladder-t{ font:400 20px/1.1 var(--cx-serif); color:var(--cx-espresso); margin:0 }
.cx-ladder-n{ font:600 10.5px/1 var(--cx-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--cx-fg3) }
/* count + state pill on ONE meta line under the title — see ladderHTML */
.cx-ladder-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px }
.cx-ladder-share{ flex:none; width:34px; height:34px; border-radius:999px; border:1px solid var(--cx-line-strong); background:none; color:var(--cx-terra); display:grid; place-items:center; cursor:pointer; transition:.2s }
.cx-ladder-share svg{ width:16px; height:16px }
.cx-ladder-share:hover{ border-color:var(--cx-terra) }
.cx-ladder-go{ flex:none; background:none; border:1px solid var(--cx-line-strong); border-radius:999px; padding:8px 13px; font:700 11.5px/1 var(--cx-sans); color:var(--cx-terra); cursor:pointer; transition:.2s }
.cx-ladder-go:hover{ border-color:var(--cx-terra) }
.cx-ladder-go.on{ background:var(--cx-terra); border-color:var(--cx-terra); color:#fff }
/* A settled ladder's remaining action is refinement — an opt-in extra, not the
   main job. It stays a quiet ghost so the eye goes to the ladders still open. */
.cx-ladder-go.refine{ color:var(--cx-fg3); border-color:var(--cx-line) }
.cx-ladder-go.refine:hover{ color:var(--cx-terra); border-color:var(--cx-terra) }
.cx-ladder-go.refine.on{ background:var(--cx-terra); border-color:var(--cx-terra); color:#fff }

/* ── Which ladder needs settling, and which is settled (2026-08-02) ────────────
   The pill is the ladder's STATE; the button beside it is the ACTION. Before
   this the button carried both and contradicted itself: "Settling ✓" meant only
   "the arena is pointed here", but read as "finished" — and a genuinely settled
   ladder was indistinguishable from an untouched one. */
.cx-ladder-pill{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:999px;
  font:700 11px/1 var(--cx-sans); letter-spacing:.02em; white-space:nowrap;
}
.cx-ladder-pill b{ font-weight:800 }
/* still to do — the ember, because this is where the work is */
.cx-ladder-pill.todo{
  color:var(--cx-terra);
  background:color-mix(in srgb, var(--cx-terra) 11%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cx-terra) 22%, transparent);
}
/* settled — deliberately QUIET. A finished ladder should recede, not compete
   with the ones that still need the diner. */
.cx-ladder-pill.done{
  color:var(--cx-fg3);
  background:color-mix(in srgb, var(--cx-espresso) 6%, transparent);
  box-shadow:inset 0 0 0 1px var(--cx-line);
}
.cx-ladder.is-settled{ border-color:var(--cx-line) }
.cx-ladder.is-open{ border-color:color-mix(in srgb, var(--cx-terra) 26%, var(--cx-line)) }

/* the overview strip — answers "what still needs rating?" before the diner
   scrolls ten cards hunting for it, and jumps straight to the first open one */
.cx-ladsum{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding:12px 14px; border-radius:16px;
  background:color-mix(in srgb, var(--cx-terra) 7%, var(--cx-paper));
  border:1px solid color-mix(in srgb, var(--cx-terra) 20%, transparent);
}
.cx-ladsum.all-done{
  background:var(--cx-paper); border-color:var(--cx-line);
}
.cx-ladsum-t{ flex:1; min-width:0; font:600 13px/1.35 var(--cx-sans); color:var(--cx-espresso) }
.cx-ladsum-t b{ font-weight:800; color:var(--cx-terra) }
.cx-ladsum.all-done .cx-ladsum-t{ color:var(--cx-fg3) }
.cx-ladsum.all-done .cx-ladsum-t b{ color:var(--cx-fg3) }
.cx-ladsum-go{
  flex:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:var(--cx-terra); border:0; border-radius:999px;
  padding:9px 14px; font:700 11.5px/1 var(--cx-sans); color:#fff; cursor:pointer;
  transition:.2s;
}
.cx-ladsum-go:hover{ filter:brightness(1.06) }
.cx-ladsum-go:active{ transform:scale(.97) }
.cx-ladder .cxg-hero{ margin-top:16px }
.cx-ladder .cx-ranklist{ margin-top:12px; box-shadow:none }
.cx-arena-lane{ margin-top:5px; text-align:center; font:800 10.5px/1 var(--cx-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--cx-fg3) }

/* ── The Gallery (Jul '26 premium board) — champion as a full-bleed editorial
   photo hero, №2/№3 as identical twin frames, everything fixed-height so the
   board can never go ragged. Photos are the venue's own image_url; a venue
   without one gets a serif monogram tile — never an invented image. ── */
.cxg-hero{ position:relative; height:216px; border-radius:18px; overflow:hidden; box-shadow:var(--cx-sh-md); animation:cxgIn .55s var(--cx-ease) both }
.cxg-media{ position:absolute; inset:0; background-size:cover; background-position:center }
.cxg-media.no-img{ background:linear-gradient(160deg,#EFE3CD,#DECBAB); display:flex; align-items:center; justify-content:center }
.cxg-media.no-img span{ font:400 64px/1 var(--cx-serif); color:rgba(42,32,24,.26) }
.cxg-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(26,16,8,.80) 0%, rgba(26,16,8,.30) 44%, rgba(26,16,8,.06) 68%, rgba(26,16,8,.10) 100%) }
.cxg-frame{ position:absolute; inset:9px; border:1px solid rgba(255,247,238,.32); border-radius:12px; pointer-events:none }
.cxg-crest{ position:absolute; top:17px; left:17px; display:flex; align-items:center; gap:7px; color:#F3DFA6; text-shadow:0 1px 6px rgba(26,16,8,.55) }
.cxg-crest svg{ width:19px; height:19px }
.cxg-crest span{ font:800 10px/1 var(--cx-sans); letter-spacing:.18em; text-transform:uppercase }
.cxg-hero-foot{ position:absolute; left:0; right:0; bottom:0; padding:14px 17px 15px; display:flex; align-items:flex-end; gap:12px }
.cxg-hero-id{ flex:1; min-width:0 }
.cxg-hero-id .nm{ display:block; font:400 26px/1.06 var(--cx-serif); color:#FFF9F0; text-shadow:0 2px 10px rgba(26,16,8,.5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cxg-hero-id .mt{ display:block; font:700 10px/1.3 var(--cx-sans); letter-spacing:.11em; text-transform:uppercase; color:rgba(255,247,238,.78); margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cxg-score{ flex:none; text-align:right; color:#FFF9F0 }
.cxg-score b{ font:600 25px/1 var(--cx-num); text-shadow:0 2px 8px rgba(26,16,8,.45) }
.cxg-score span{ display:block; font:800 8.5px/1 var(--cx-sans); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,247,238,.68); margin-top:4px }
.cxg-score em{ display:block; font:600 10.5px/1 var(--cx-sans); font-style:normal; color:#F3DFA6; margin-top:4px }
.cxg-duo{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px }
.cxg-card{ position:relative; height:148px; border-radius:16px; overflow:hidden; box-shadow:var(--cx-sh-sm); animation:cxgIn .55s var(--cx-ease) both; animation-delay:.06s }
.cxg-card.p3{ animation-delay:.12s }
.cxg-card .cxg-media.no-img span{ font-size:40px }
.cxg-card .cxg-scrim{ background:linear-gradient(to top, rgba(26,16,8,.78) 0%, rgba(26,16,8,.26) 52%, transparent 78%) }
.cxg-rank{ position:absolute; top:10px; left:10px; font:800 9.5px/1 var(--cx-sans); letter-spacing:.12em; color:#FFF9F0; background:rgba(26,16,8,.46); backdrop-filter:blur(4px); border:1px solid rgba(255,247,238,.34); border-radius:999px; padding:6px 9px 5px }
.cxg-card.p1 .cxg-rank{ color:#F3DFA6; border-color:rgba(233,201,105,.55) }
.cxg-card.p2 .cxg-rank{ border-color:rgba(222,224,228,.5) }
.cxg-card.p3 .cxg-rank{ color:#EFC9A2; border-color:rgba(226,180,136,.5) }
.cxg-card-foot{ position:absolute; left:0; right:0; bottom:0; padding:10px 12px 11px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px }
.cxg-card-id{ flex:1; min-width:0 }
.cxg-card-id .sub{ display:block; font:700 8.5px/1 var(--cx-sans); letter-spacing:.11em; text-transform:uppercase; color:rgba(255,247,238,.72); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cxg-card-foot .nm{ display:block; min-width:0; font:400 16px/1.12 var(--cx-serif); color:#FFF9F0; text-shadow:0 1px 8px rgba(26,16,8,.55); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cxg-card-foot b{ flex:none; font:600 13px/1 var(--cx-num); color:#F3DFA6 }
.cxg-duel{ margin-top:16px }
.cxg-vsseal{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:38px; height:38px; border-radius:50%; background:var(--cx-paper); border:1px solid var(--cx-line-strong); display:flex; align-items:center; justify-content:center; font:400 15px/1 var(--cx-serif); color:var(--cx-fg2); box-shadow:var(--cx-sh-md) }
@keyframes cxgIn{ from{ opacity:0; transform:translateY(10px) scale(.985) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .cxg-hero,.cxg-card{ animation:none } }
.cx-intro-rk p a{ white-space:nowrap }
/* 4+ — the ledger: fixed-height rows, photo thumb, single-line ellipsis. */
.cx-ranklist{ margin-top:22px; background:var(--cx-paper); border:1px solid var(--cx-line); border-radius:18px; overflow:hidden; box-shadow:var(--cx-sh-sm) }
.cx-rrow{ display:flex; align-items:center; gap:12px; height:64px; padding:0 14px; border-bottom:1px solid var(--cx-line); will-change:transform; background:var(--cx-paper) }
.cx-rrow:last-child{ border-bottom:0 }
.cx-rrow .rn{ font:600 15px/1 var(--cx-num); color:var(--cx-fg4); width:22px; text-align:center; flex:none }
.cx-rrow .rt{ width:42px; height:42px; border-radius:12px; flex:none; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(42,32,24,.08) }
.cx-rrow .rt.no-img{ background:var(--cx-tint); display:flex; align-items:center; justify-content:center }
.cx-rrow .rt.no-img span{ font:400 18px/1 var(--cx-serif); color:var(--cx-fg3) }
.cx-rrow .rb{ flex:1; min-width:0 }
.cx-rrow .rb b{ font:400 17px/1.15 var(--cx-serif); color:var(--cx-espresso); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cx-rrow .rb span{ font:600 11px/1 var(--cx-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--cx-fg3) }
.cx-rrow .rs{ text-align:right; flex:none }
.cx-rrow .rs b{ font:700 14px/1 var(--cx-num); color:var(--cx-terra) }
.cx-rrow .rs span{ display:block; font:600 10px/1 var(--cx-sans); color:var(--cx-fg3); margin-top:3px }
.cx-rankmore[hidden]{ display:none }
.cx-rankmore-btn{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:14px; background:var(--cx-paper); border:0; cursor:pointer; font:700 12.5px/1 var(--cx-sans); letter-spacing:.02em; color:var(--cx-terra) }
.cx-rankmore-btn:hover{ background:rgba(242,231,214,.55) }
.cx-rankmore-arr{ font-size:11px; transition:transform .22s ease }
.cx-rankmore-btn.open .cx-rankmore-arr{ transform:rotate(180deg) }
.cx-mv{ display:inline-flex; align-items:center; gap:2px; font:700 10px/1 var(--cx-sans) }
.cx-mv.up{ color:#5C8C68 } .cx-mv.dn{ color:var(--cx-fg4) } .cx-mv.same{ color:var(--cx-fg4) }
.cx-settle{ margin-top:24px; background:linear-gradient(165deg,#FFFCF5,#F7EDDC); border:1px solid var(--cx-line-strong); border-radius:22px; padding:20px 18px; box-shadow:var(--cx-sh-md) }
/* Working state — the card keeps its size and wears the app's loading mark instead
   of collapsing to the word "Loading…" (founder, 2026-08-09). position:relative is
   what lets the overlay sit ON the arena rather than replace it; the contents stay
   in place underneath, dimmed, so the pick you just made is still visible while the
   next pair is fetched. min-height is pinned in JS from the live height, so this
   never guesses a size that is wrong for a one-pair or an end-card state. */
.cx-settle { position: relative; }
.cx-settle.is-busy > *:not(.cx-settle-load) { opacity: .34; transition: opacity .18s ease; pointer-events: none; }
.cx-settle-load {
  position: absolute; inset: 0; display: grid; place-items: center;
  z-index: 2; pointer-events: none; animation: cxLoadIn .18s ease-out both;
}
@keyframes cxLoadIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .cx-settle-load { animation: none }
  .cx-settle.is-busy > *:not(.cx-settle-load) { transition: none }
}

.cx-settle .ey{ font:800 10.5px/1 var(--cx-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--cx-terra); text-align:center }
.cx-settle h3{ font:400 23px/1.1 var(--cx-serif); text-align:center; margin-top:9px; color:var(--cx-espresso) }
.cx-settle .hint{ font:500 12px/1.3 var(--cx-sans); color:var(--cx-fg3); text-align:center; margin-top:6px }
/* ── The arena, laid out HORIZONTALLY (founder 2026-07-29). Two side-by-side
   columns gave each contender ~145px on a phone, so a real venue name
   ("DIMO'S Cafe and Restaurant") ellipsised away and every card wrapped to a
   different height. Each contender is now a full-width ROW — photo left, name
   right — which triples the space the name gets, makes both cards identical
   height by construction, and lets the photo grow. The DOM order is already
   [A][vs][B], so the vs becomes a horizontal divider with no JS change. */
.cx-vs{ display:flex; flex-direction:column; align-items:stretch; gap:9px; margin-top:18px }
/* The venue's photo IS the card (founder 2026-07-29): full-bleed behind white type,
   so each contender reads as the place itself rather than a thumbnail beside a label.
   The markup already has the two layers — the media span is promoted to a background
   and the body floats above it, so this needs no JS. */
.cx-vscard{ min-width:0; background:#2A1F17; border:1.5px solid var(--cx-line); border-radius:16px; padding:0; cursor:pointer; text-align:left; display:flex; flex-direction:row; align-items:stretch; overflow:hidden; transition:transform .2s var(--cx-spring),border-color .2s,box-shadow .2s; position:relative; isolation:isolate }
.cx-vscard:hover{ border-color:var(--cx-terra); transform:translateY(-3px); box-shadow:var(--cx-sh-md) }
.cx-vscard .cxg-vmedia{ position:absolute; inset:0; z-index:0; display:block; width:auto; background-size:cover; background-position:center; transition:transform .45s var(--cx-spring) }
@media (hover:hover) and (pointer:fine){ .cx-vscard:hover .cxg-vmedia{ transform:scale(1.04) } }
/* THE SCRIM — type over an unknown photo is only legible if we guarantee contrast.
   Left-weighted (the type is left-aligned and vertically centred) with a floor of
   darkness across the whole frame, so a blown-out white plate on the right can't
   swallow the meta line. Same discipline as the feed's venue mastheads. */
.cx-vscard::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(24,14,8,.88) 0%, rgba(24,14,8,.72) 42%, rgba(24,14,8,.44) 78%, rgba(24,14,8,.34) 100%) }
/* No photo → the brand gradient, with the monogram as a big quiet watermark on the
   right rather than a letter sitting behind the name. */
.cx-vscard .cxg-vmedia.no-img{ background:linear-gradient(140deg,#A8431F 0%,#C2502F 55%,#C98A3B 125%); display:flex; align-items:center; justify-content:flex-end }
.cx-vscard .cxg-vmedia.no-img i{ font:400 96px/1 var(--cx-serif); font-style:normal; color:rgba(255,247,238,.15); margin-right:14px }
.cx-vsbody{ position:relative; z-index:2; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:16px 18px; min-height:116px }
.cx-vscard .side{ font:800 10px/1 var(--cx-sans); letter-spacing:.14em; color:#F2AC85; text-shadow:0 1px 3px rgba(20,11,5,.55) }
/* Two lines of room at full card width — enough for any real venue name. */
.cx-vscard .nm{ font:400 21px/1.16 var(--cx-serif); color:#FFF7EE; text-shadow:0 1px 10px rgba(20,11,5,.5), 0 1px 2px rgba(20,11,5,.4); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
/* Cuisine · Visited 1× on one quiet line, separated by a dot the CSS owns. */
.cx-vscard .meta{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:1px }
.cx-vscard .cu{ font:600 11.5px/1.2 var(--cx-sans); color:rgba(255,247,238,.9); text-shadow:0 1px 3px rgba(20,11,5,.5) }
.cx-vscard .pl{ font:600 11.5px/1.2 var(--cx-sans); color:rgba(255,247,238,.72); text-shadow:0 1px 3px rgba(20,11,5,.5); position:relative; padding-left:9px }
.cx-vscard .cu + .pl::before{ content:"·"; position:absolute; left:0; top:50%; transform:translateY(-50%); color:rgba(255,247,238,.5) }
/* Winner lifts without scaling — a full-width row scaled 1.03 would overflow the card.
   On a photo the tell is a terracotta ring plus a LIFTED scrim, so the chosen place
   brightens while the other dims. */
.cx-vscard.win{ border-color:var(--cx-terra); box-shadow:0 0 0 3px rgba(194,80,47,.28), var(--cx-sh-md) }
.cx-vscard.win::after{ background:linear-gradient(90deg, rgba(24,14,8,.78) 0%, rgba(24,14,8,.55) 45%, rgba(168,67,31,.34) 100%) }
.cx-vscard.lose{ opacity:.38; transform:scale(.98) }
/* The vs, now a horizontal rule with the badge centred on it. */
.cx-vsmid{ display:flex; align-items:center; justify-content:center; gap:12px; width:auto; flex:none; padding:1px 4px }
.cx-vsmid::before,.cx-vsmid::after{ content:""; flex:1; height:1px; background:var(--cx-line) }
.cx-vsmid span{ font:400 15px/1 var(--cx-serif); color:var(--cx-fg4); background:var(--cx-cream); border:1px solid var(--cx-line); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none }
.cx-settle-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:16px }
.cx-settle-foot .sk{ background:none; border:0; cursor:pointer; font:600 12.5px/1 var(--cx-sans); color:var(--cx-fg3) }
.cx-settle-foot .ct{ font:700 12.5px/1 var(--cx-sans); color:var(--cx-terra) }
.cx-rank-empty{ margin-top:22px; text-align:center; background:var(--cx-paper); border:1px solid var(--cx-line); border-radius:18px; padding:26px 18px }
.cx-rank-empty p{ font:500 14px/1.5 var(--cx-sans); color:var(--cx-fg2); margin-bottom:14px }
.cx-rank-intro{ font:500 14px/1.55 var(--cx-sans); color:var(--cx-fg2); text-align:center; padding:18px 12px 2px; margin-top:6px }
/* head-to-head progress — shows the bounded end so it never feels endless */
.cx-prog2{ display:flex; align-items:center; gap:10px; margin:11px 0 15px }
.cx-prog2-bar{ flex:1; height:6px; border-radius:99px; background:rgba(42,32,24,.10); overflow:hidden }
.cx-prog2-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--cx-terra),var(--cx-terra-bright)); transition:width .4s var(--cx-ease) }
.cx-prog2 span{ font:700 11px/1 var(--cx-num); color:var(--cx-fg3); white-space:nowrap; letter-spacing:.02em }
/* settled / finalized state */
.cx-settle-end{ text-align:center; padding:6px 4px 2px }
.cx-end-ic{ font-size:32px; line-height:1; display:block; margin-bottom:8px }
.cx-settle-end h3{ font:400 22px/1.15 var(--cx-serif); color:var(--cx-espresso) }
.cx-end-actions{ display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap }
.cx-end-btn{ background:var(--cx-terra); color:#fff; border:0; border-radius:999px; padding:12px 20px; font:700 13px/1 var(--cx-sans); cursor:pointer; box-shadow:var(--cx-sh-sm) }
.cx-end-btn.ghost{ background:transparent; color:var(--cx-terra); border:1.5px solid color-mix(in srgb,var(--cx-terra) 42%,transparent); box-shadow:none }

/* body-appended bits (outside .cx) — picker sheet, presser, toast, spark, confetti */
.cx-sheet{ position:fixed; inset:0; z-index:6200; display:flex; align-items:flex-end; justify-content:center }
.cx-sheet[hidden]{ display:none }
.cx-sheet-back{ position:absolute; inset:0; background:rgba(26,16,8,.42); opacity:0; transition:opacity .3s }
.cx-sheet.show .cx-sheet-back{ opacity:1 }
.cx-sheet-card{ position:relative; width:100%; max-width:560px; max-height:84vh; overflow:auto; background:var(--cx-cream); border-radius:24px 24px 0 0; padding:20px 20px max(20px,env(safe-area-inset-bottom)); box-shadow:var(--cx-sh-lg); transform:translateY(100%); transition:transform .42s var(--cx-spring) }
.cx-sheet.show .cx-sheet-card{ transform:translateY(0) }
.cx-sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:4px }
.cx-sheet-ttl{ font:400 25px/1.08 var(--cx-serif); color:var(--cx-espresso) }
.cx-sheet-sub{ font:500 12.5px/1.45 var(--cx-sans); color:var(--cx-fg2); margin-top:5px; max-width:40ch }
.cx-sheet-x{ flex:none; background:none; border:0; cursor:pointer; font:600 17px/1 var(--cx-sans); color:var(--cx-fg3); padding:4px 6px }
.cx-sheet-lbl{ font:800 10px/1 var(--cx-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--cx-fg3); margin:20px 2px 11px }
.cx-claim{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--cx-paper); border:1px solid var(--cx-line); border-radius:14px; padding:12px 13px; margin-bottom:9px; cursor:pointer; transition:border-color .2s,transform .2s }
.cx-claim:hover{ border-color:var(--cx-terra); transform:translateY(-1px) }
.cx-claim .ci{ width:38px; height:38px; flex:none; border-radius:11px; background:var(--cx-tint); display:flex; align-items:center; justify-content:center; color:var(--cx-terra) }
.cx-claim .ci svg{ width:19px; height:19px }
.cx-claim .cb{ flex:1; min-width:0 }
.cx-claim .cb b{ font:400 18px/1.05 var(--cx-serif); color:var(--cx-espresso); display:block }
.cx-claim .cb span{ font:600 11px/1.3 var(--cx-sans); color:var(--cx-fg3) }
.cx-claim .cgo{ flex:none; font:700 11.5px/1 var(--cx-sans); color:#fff; background:var(--cx-terra); border-radius:999px; padding:9px 15px }
.cx-claim-empty{ font:500 13px/1.55 var(--cx-sans); color:var(--cx-fg3); background:var(--cx-sand); border:1px dashed var(--cx-line-strong); border-radius:14px; padding:18px 16px; text-align:center }
.cx-presser{ position:fixed; z-index:6300; left:0; top:0; width:122px; height:144px; margin-left:-61px; margin-top:-144px; pointer-events:none; display:none; will-change:transform }
.cx-presser svg{ width:100%; height:100%; filter:drop-shadow(0 14px 18px rgba(42,32,24,.4)) }
.cx-spark{ position:fixed; width:7px; height:7px; border-radius:50%; pointer-events:none; z-index:6280 }
.cx-shake{ animation:cxShake .4s ease }
@keyframes cxShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }
.cx-toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px); z-index:6400; background:var(--cx-espresso); color:#fff; border-radius:14px; padding:13px 20px; font:700 13.5px/1.3 var(--cx-sans); box-shadow:var(--cx-sh-lg); opacity:0; transition:.4s var(--cx-ease); text-align:center; max-width:300px; pointer-events:none }
.cx-toast.on{ opacity:1; transform:translateX(-50%) translateY(0) }
.cx-toast small{ display:block; font-weight:500; opacity:.8; margin-top:3px }
.cx-confetti{ position:fixed; width:9px; height:13px; z-index:6350; pointer-events:none; border-radius:1px }

/* ── PLY2/SF2 — loyalty stamp + feed reskin (appended) ── */

/* PLY2 · the loyalty claim = a STAMP MOMENT. A terracotta passport stamp slams
   onto the code modal's top-right corner (CSS keyframe only — can't break the page).
   .ply2-wrap exists so the stamp can overhang .pl-reveal, which clips (overflow:hidden). */
.ply2-wrap{position:relative;width:100%;max-width:360px}
.ply2-eyebrow{font:700 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 7px}
.ply2-rtop{padding-left:54px;padding-right:54px}
.ply2-venue{font:italic 500 14px/1.35 var(--serif);color:var(--text-2);margin:7px 0 0}
.ply2-note{font:italic 500 13px/1.45 var(--serif);color:var(--text-3);margin:8px 24px 0}
.ply2-stamp{position:absolute;top:-26px;right:-14px;width:80px;height:80px;z-index:5;pointer-events:none;
  transform:rotate(var(--ply2-rot,-8deg));
  filter:drop-shadow(0 8px 16px rgba(154,60,32,.25));
  animation:ply2Slam .5s cubic-bezier(.34,1.56,.64,1) .15s both}
.ply2-stamp svg{display:block;width:100%;height:100%}
.ply2-stamp-ring{font:700 8.2px var(--sans);letter-spacing:2.6px;fill:#C2502F}
.ply2-stamp-init{font:italic 600 22px var(--serif);fill:#B2431F;text-anchor:middle}
.ply2-stamp-date{font:700 7px var(--sans);letter-spacing:1.6px;fill:rgba(178,67,31,.85);text-anchor:middle}
@keyframes ply2Slam{
  from{opacity:0;transform:scale(1.8) rotate(calc(var(--ply2-rot,-8deg) + 14deg))}
  to{opacity:1;transform:scale(1) rotate(var(--ply2-rot,-8deg))}
}
@media (prefers-reduced-motion:reduce){ .ply2-stamp{animation:none} }

/* ── PLH2 — Tonight hero home (appended) ── */
/* Home-only re-token: the signed-in home joins the app's porcelain/Fraunces
   design system. Scoped to .plhome.plh2 (home.js adds the class), so /order +
   /order-in — which also wrap in .plhome — keep their current skin. */
.plhome.plh2 {
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bg: #FFFFFF; --bg-2: #F4ECDD; --surface: #FFFDF8; --surface-2: #FAF5EC;
  --fg1: #23150D; --fg2: #6E5F4F; --fg3: #A89A85;
  --line: #EBE0CC; --line-strong: #DCCDB4;
  --accent: #C2502F; --accent-press: #A8431F; --on-accent: #FFF7EE;
  --tint: rgba(194, 80, 47, .10);
  --shadow-sm: 0 1px 2px rgba(90, 48, 25, .07), 0 4px 10px -6px rgba(90, 48, 25, .14);
  --shadow-md: 0 14px 30px -20px rgba(90, 48, 25, .45), 0 2px 6px -2px rgba(90, 48, 25, .10);
  --shadow-lg: 0 24px 50px -24px rgba(90, 48, 25, .50), 0 6px 14px -8px rgba(90, 48, 25, .14);
  --shadow-accent: 0 10px 24px -10px var(--glow);
}

/* greeting block */
.plh2-greet { margin-bottom: 16px; }
.plh2-eyebrow { margin: 0 0 9px; font: 700 10.5px/1.1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.plh2-eyebrow span { color: var(--fg3); }
.plh2-h2 { margin: 0; font: 400 28px/1.06 var(--serif); letter-spacing: -.015em; color: var(--fg1); }
.plh2-h2 em { font-style: italic; color: var(--accent); }
.plh2-hi { margin: 8px 0 0; font: 500 13.5px/1.4 var(--sans); color: var(--fg2); }

/* hero slot + loading shimmer */
.plh2-heroslot { margin: 0 0 12px; }
.plh2-skel { height: 212px; border-radius: 24px; border: 1px solid var(--line);
  background: linear-gradient(100deg, #F3EADA 38%, #FAF3E6 50%, #F3EADA 62%) 0 0 / 220% 100%;
  animation: plh2-shimmer 1.3s linear infinite; }
@keyframes plh2-shimmer { to { background-position: -120% 0; } }

/* the Tonight hero — full-bleed photo card, the whole card is the link */
.plh2-hero { position: relative; display: block; height: 212px; border-radius: 24px; overflow: hidden;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 18px 38px -18px rgba(90, 48, 25, .55), 0 4px 12px -8px rgba(90, 48, 25, .22);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.plh2-hero:active { transform: scale(.97); }
.plh2-hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(28, 15, 8, .88) 0%, rgba(28, 15, 8, .46) 36%, rgba(28, 15, 8, .10) 60%, rgba(28, 15, 8, 0) 76%),
              linear-gradient(to bottom, rgba(28, 15, 8, .44) 0%, rgba(28, 15, 8, 0) 32%); }
.plh2-hero-flag { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center;
  font: 700 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #FFF3E4;
  background: rgba(35, 21, 13, .5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 243, 228, .2); border-radius: 999px; padding: 7px 12px 7px 10px; white-space: nowrap; }
.plh2-hero-match { position: absolute; right: 16px; top: 13px; z-index: 2; text-align: right; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.plh2-mnum { display: block; font: 600 30px/1 var(--serif); letter-spacing: -.01em; color: #FFE9CF; }
.plh2-mnum i { font-style: normal; font-size: 16px; margin-left: 1px; }
.plh2-mlab { display: block; margin-top: 4px; font: 700 8.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 233, 207, .78); }
/* Locked hero match — a lock glyph + "take a quiz" prompt instead of a number, until
   the diner crosses the reveal threshold (≥15% known, or 5 rated dishes). */
.plh2-hero-match--locked { cursor: pointer; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.plh2-mlock { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; color: #FFE9CF; opacity: .92; }
.plh2-hero-match--locked .plh2-mlab { max-width: 96px; text-align: right; }
.plh2-hero-body { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: block; }
.plh2-hero-caps { display: block; font: 700 9.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 243, 228, .85); margin-bottom: 5px; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.plh2-hero-gold { color: #FFD9A0; margin-left: 8px; }
.plh2-hero-name { display: block; font: 500 24px/1.05 var(--serif); letter-spacing: -.012em; color: #FFF7EE; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.plh2-hero-dish { display: block; margin-top: 6px; padding-right: 96px; font: italic 500 13.5px/1.35 var(--serif); color: #FFE9CF; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

/* hero fallback (no engine pick) — honest porcelain prompt into /discover */
.plh2-hero-empty { height: auto; min-height: 170px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 14px 30px -20px rgba(90, 48, 25, .45); display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: 12px; padding: 16px; }
.plh2-hero-empty .plh2-hero-flag { position: static; background: var(--tint); color: var(--accent); border-color: rgba(194, 80, 47, .25); -webkit-backdrop-filter: none; backdrop-filter: none; }
.plh2-empty-line { font: 400 19px/1.25 var(--serif); color: var(--fg1); max-width: 26ch; margin-top: auto; }
.plh2-empty-cta { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 var(--sans); color: var(--on-accent);
  background: var(--accent-grad); border-radius: 999px; padding: 11px 16px; box-shadow: 0 10px 24px -10px var(--glow);
  border: 0; cursor: pointer; }
/* "warm" empty/failure hero — brand gradient + noodle mark, so the no-pick and the
   waking-up states read as DESIGNED cards, never a white box (founder, Jul '26) */
.plh2-hero-warm { background: linear-gradient(152deg, #FFF6EA 0%, #F7E4CE 52%, #F0CFAE 100%);
  border-color: rgba(194, 80, 47, .18); position: relative; overflow: hidden; }
.plh2-hero-warm::after { content: ""; position: absolute; right: -46px; top: -46px; width: 190px; height: 190px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(194, 80, 47, .16), rgba(194, 80, 47, 0) 68%); }
.plh2-empty-mark { display: block; line-height: 0; filter: drop-shadow(0 8px 18px rgba(154, 61, 32, .35)); }
.plh2-hero-warm .plh2-hero-flag { background: rgba(255, 255, 255, .72); }

/* (Noodler II Block ⑤ — the espresso "Ask the Noodler" row + the "I'm at a spot"
   tile, and their .plh2-maitre-* / .plh2-tiles / .plh2-tile styles, are GONE:
   both actions folded into the dock orb's first screen in concierge_v5.js.) */

/* "% we know you" — terracotta gradient band (premium banner) */
.plh2-know { position: relative; display: block; text-decoration: none; border-radius: 22px; overflow: hidden;
  background: var(--accent-grad); color: #FFF3E4; padding: 18px 18px 16px;
  box-shadow: 0 18px 36px -16px rgba(194, 80, 47, .55), 0 4px 10px -6px rgba(90, 48, 25, .25);
  -webkit-tap-highlight-color: transparent; transition: transform .16s var(--ease-out); }
.plh2-know:active { transform: scale(.98); }
.plh2-know-sheen { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 95% at 88% -12%, rgba(255, 233, 207, .35), transparent 56%); }
.plh2-know-row { position: relative; display: flex; align-items: center; gap: 16px; }
.plh2-know-num { flex: none; font: 500 46px/.95 var(--serif); letter-spacing: -.02em; color: #FFF7EE; }
.plh2-know-num span { font-size: 22px; }
.plh2-know-meta { flex: 1; min-width: 0; }
.plh2-know-band { font: 700 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 233, 207, .85); margin-bottom: 8px; }
.plh2-know-bar { height: 6px; border-radius: 999px; background: rgba(35, 21, 13, .3); overflow: hidden; }
.plh2-know-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FFE9CF, #FFD9A0); }
.plh2-know-step { margin-top: 8px; font: 500 12px/1.4 var(--sans); color: rgba(255, 243, 228, .85); }
.plh2-know-rank { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 13px; padding-top: 12px;
  border-top: 1px dashed rgba(255, 243, 228, .32); font: 500 12.5px/1.35 var(--sans); color: rgba(255, 243, 228, .92); }
.plh2-know-rank b { font-weight: 700; color: #FFF7EE; }
.plh2-know-cta { position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 13px;
  font: 700 13px/1 var(--sans); color: #FFF7EE; background: rgba(35, 21, 13, .3);
  border: 1px solid rgba(255, 243, 228, .25); border-radius: 999px; padding: 10px 15px; }

@media (prefers-reduced-motion: reduce) {
  .plh2-skel { animation: none; }
  .plh2-hero, .plh2-tile, .plh2-know { transition: none; }
}

/* =============================================================================
   HOME RESKIN -- "insane clean" pass (2026-06-15). CSS-ONLY override, scoped to
   .plhome.plh2 so ONLY the signed-in Home changes; every other screen is
   untouched. To REVERT: delete this whole block. No JS / no markup changed.
   Wins over the .plh2 rules above by source order + higher specificity.
   ============================================================================= */
#app:has(.plhome.plh2) { background: #FFFFFF; }
.plhome.plh2 {
  --bg: #FFFFFF; --bg-2: #F3ECE0; --surface: #FFFFFF; --surface-2: #FBF8F3;
  --fg1: #211A13; --fg2: #6E6256; --fg3: #A99C88;
  --line: #EEE6D8; --line-strong: #E4DAC8;
  --accent: #C2502F; --accent-press: #9A3C20; --on-accent: #FFF7EE;
  --accent-grad: #C2502F;                 /* flatten every gradient on Home */
  --tint: rgba(194, 80, 47, .08);
  --shadow-sm: 0 1px 2px rgba(34, 26, 19, .05);
  --shadow-md: 0 4px 16px rgba(34, 26, 19, .06), 0 1px 3px rgba(34, 26, 19, .04);
  --shadow-lg: 0 12px 32px rgba(34, 26, 19, .10);
}
/* quiet, sentence-case eyebrow (was shouty uppercase terracotta) */
.plhome.plh2 .plh2-eyebrow { text-transform: none; letter-spacing: .005em; font-weight: 600; font-size: 12px; color: var(--fg3); }
.plhome.plh2 .plh2-eyebrow span { color: var(--fg3); }
/* one soft shadow on the hero + tiles (was heavy brown drop-shadows) */
.plhome.plh2 .plh2-hero { box-shadow: 0 6px 22px rgba(34, 26, 19, .10), 0 1px 3px rgba(34, 26, 19, .05); }
.plhome.plh2 .plh2-tile { box-shadow: var(--shadow-sm); border-radius: 18px; }
.plhome.plh2 .plh2-tile:hover { border-color: var(--line-strong); }
/* "% we know you" -> clean WHITE card (was a terracotta gradient banner) */
.plhome.plh2 .plh2-know { background: var(--surface); color: var(--fg1); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.plhome.plh2 .plh2-know-sheen { display: none; }
.plhome.plh2 .plh2-know-num { color: var(--accent); }
.plhome.plh2 .plh2-know-band { color: var(--fg3); }
.plhome.plh2 .plh2-know-bar { background: #EFE7DA; }
.plhome.plh2 .plh2-know-bar i { background: var(--accent); }
.plhome.plh2 .plh2-know-step { color: var(--fg2); }
.plhome.plh2 .plh2-know-rank { color: var(--fg2); border-top: 1px solid var(--line); }
.plhome.plh2 .plh2-know-rank b { color: var(--fg1); }
.plhome.plh2 .plh2-know-cta { background: var(--tint); color: var(--accent); border-color: transparent; }
/* bigger hero + white "Tonight's table" pill (approved white design, 2026-06-15) */
.plhome.plh2 .plh2-hero, .plhome.plh2 .plh2-skel { height: 256px; }
.plhome.plh2 .plh2-hero-flag { background: #fff; color: var(--accent-press); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Phosphor icons + clean terracotta sparkle "Tonight" orb — match approved mock */
.plhome.plh2 .plh2-hero-flag { display: inline-flex; align-items: center; gap: 7px; }
.plhome.plh2 .plh2-hero-flag i { font-size: 14px; }
.plhome.plh2 .plh2-tile-ic i { font-size: 18px; color: var(--accent); line-height: 1; }
.dock-ic i { font-size: 22px; line-height: 1; }
.dock-orb { background: var(--accent) !important; display: grid; place-items: center; color: #FFF7EE; }
.dock-orb i { font-size: 22px; }
.dock-orb::after { display: none; }
/* ── The orb wears your loyalty tier — the Mediterranean climb, on the dock.
   Same tokens as .tier-* (loyalty card); ring + glow tinted to match. Signed-out
   and unknown tiers keep the terracotta above. ─────────────────────────────── */
.dock-orb.ot-new_diner { background: linear-gradient(135deg, #EFE5D1, #E2D2B6) !important; color: #9A6A34;
  box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4px rgba(154, 106, 52, 0.55), 0 12px 26px -8px rgba(154, 106, 52, 0.5); }
.dock-orb.ot-verified { background: linear-gradient(135deg, #9A6A39, #7E4F25) !important; color: #EAD4A0;
  box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4px rgba(126, 79, 37, 0.6), 0 12px 26px -8px rgba(126, 79, 37, 0.55); }
.dock-orb.ot-local { background: linear-gradient(135deg, #6B6D3B, #54562E) !important; color: #EAE3C0;
  box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4px rgba(94, 97, 50, 0.6), 0 12px 26px -8px rgba(94, 97, 50, 0.55); }
.dock-orb.ot-insider { background: linear-gradient(135deg, #8C2742, #6C1A2D) !important; color: #EAC78E;
  box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4px rgba(124, 30, 52, 0.6), 0 12px 26px -8px rgba(124, 30, 52, 0.55); }
.dock-orb.ot-tastemaker { background: linear-gradient(135deg, #17130D, #262017) !important; color: #E7C988;
  box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4px rgba(231, 201, 136, 0.55), 0 12px 26px -8px rgba(23, 19, 13, 0.6); }
/* Founder: the nav center is Noodl's signature mark — ALWAYS the terracotta disc +
   cream noodle, regardless of loyalty tier (overrides the .ot-* tints above). */
.dock-orb.dock-orb--mark { background: var(--accent) !important; color: #FFF7EE !important;
  box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4px rgba(194, 80, 47, 0.6), 0 12px 26px -8px rgba(166, 62, 30, 0.55) !important; }
.dock-orb--mark .dock-noodle { width: 30px; height: 30px; display: block; overflow: visible; }
/* match the mock copy/casing: sentence-case flag, terracotta eyebrow (no middle-dots), gold hero star */
.plhome.plh2 .plh2-hero-flag { text-transform: none; letter-spacing: 0; font-weight: 700; }
.plhome.plh2 .plh2-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-transform: none; }
.plhome.plh2 .plh2-eyebrow i { font-size: 14px; }
.plhome.plh2 .plh2-hero-star { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font: 600 13px/1 var(--sans); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.plhome.plh2 .plh2-hero-star i { color: #FFC861; font-size: 14px; }
/* location pill + "near me" sheet + ETA */
.plhome.plh2 .plh2-hero-eta { margin-left:12px; }
.plhome.plh2 .plh2-hero-eta i { color:#fff; font-size:12px; }
.plhome.plh2 .plh2-hero-open { display:inline-flex; align-items:center; gap:5px; margin-left:12px; color:#9BE8B6; font-weight:700; }
.plhome.plh2 .plh2-hero-open .plh2-dot { width:6px; height:6px; border-radius:50%; background:#7CE0A2; box-shadow:0 0 6px rgba(124,224,162,.85); }
@keyframes plspin { to{transform:rotate(360deg)} }
/* "How well we know you" card — the brand fingerprint whorl is the DOMINANT motif.
   A LARGE whorl is anchored top-left and stretched past the box edges, loaded
   ~pct% terracotta (filled outside-in). The big % numeral sits over a soft white
   radial "pocket" so it punches through crisply while the rings read around it;
   the band + step sit lower-right where a radial mask fades the whorl out, so
   both stay clean + AA-legible. Layers back→front: whorl, pocket, body text. */
.plhome.plh2 .plh2-know {
  position:relative; display:block; min-height:158px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:18px 20px 17px; box-shadow:var(--shadow-md); overflow:hidden;
  isolation:isolate;
}
/* big whorl, anchored so its centre (~50% of the 220 viewBox) lands near the
   card's top-left and the outer rings bleed off the top + left edges. A radial
   mask fades it toward the lower-right so the band/step read cleanly over it. */
.plhome.plh2 .plh2-know-fp {
  position:absolute; z-index:0; top:-126px; left:-120px;
  width:368px; height:368px; pointer-events:none;
  -webkit-mask-image:radial-gradient(128% 116% at 24% 20%, #000 30%, rgba(0,0,0,.6) 56%, rgba(0,0,0,.22) 76%, transparent 92%);
          mask-image:radial-gradient(128% 116% at 24% 20%, #000 30%, rgba(0,0,0,.6) 56%, rgba(0,0,0,.22) 76%, transparent 92%);
}
.plhome.plh2 .plh2-know-fp svg { width:100%; height:100%; display:block; }
.plhome.plh2 .plh2-fp-arc { stroke:#ECE2D2; stroke-width:5.5; transition:stroke .55s var(--ease-out); }   /* very faint unlit */
.plhome.plh2 .plh2-fp-arc.lit { stroke:var(--accent); stroke-width:6.8; }   /* lit rings = the gauge read */
/* soft white pocket — white→transparent halo sized just around the % numeral,
   above the whorl rings but below the number, so the number stays crisp + AA. */
.plhome.plh2 .plh2-know-pocket {
  position:absolute; z-index:1; pointer-events:none;
  top:-18px; left:-10px; width:188px; height:150px;
  background:radial-gradient(54% 52% at 46% 44%,
    #FFFFFF 0%, #FFFFFF 30%, rgba(255,255,255,.94) 48%,
    rgba(255,255,255,.62) 64%, rgba(255,255,255,0) 80%);
}
/* a quiet white scrim across the BOTTOM where the band + step sit, so the whorl
   reads behind them but the copy stays full-contrast (AA over white). */
.plhome.plh2 .plh2-know::after {
  content:""; position:absolute; z-index:1; pointer-events:none;
  left:0; right:0; bottom:0; height:92px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,.94) 100%);
}
/* body text rides above every layer */
.plhome.plh2 .plh2-know-body { position:relative; z-index:2; display:block; height:100%; }
/* the % numeral is the hero — top-left, over its white pocket, well clear + crisp */
.plhome.plh2 .plh2-know-num {
  font:600 58px/.82 var(--serif); color:var(--accent); letter-spacing:-.025em;
  display:inline-block; margin:0 0 0 1px;
  text-shadow:0 1px 12px rgba(255,255,255,.95);
}
.plhome.plh2 .plh2-know-num span { font-size:25px; margin-left:1px; letter-spacing:0; }
/* band + step sit lower, over the bottom white scrim — full AA contrast */
.plhome.plh2 .plh2-know-meta { margin:16px 0 0 1px; max-width:240px; }
.plhome.plh2 .plh2-know-band {
  text-transform:none; letter-spacing:-.006em;
  font:700 14.5px/1.15 var(--sans); color:var(--fg1); margin-bottom:5px;
}
.plhome.plh2 .plh2-know-step { font:400 13px/1.45 var(--sans); color:var(--fg2); }
.plhome.plh2 .plh2-know:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .plhome.plh2 .plh2-fp-arc { transition:none; } }
/* regulars card — "You've been N×" tag on the photo + "Your spot" foot (mock) */
.plhome.plh2 .plv-tag { position:absolute; left:10px; top:10px; background:#fff; color:var(--accent-press); font:700 11px/1 var(--sans); padding:5px 10px; border-radius:999px; box-shadow:0 2px 8px rgba(34,25,15,.16); }
.plhome.plh2 .plv-foot { display:flex; align-items:center; gap:6px; margin-top:9px; color:var(--accent); font:700 12px/1 var(--sans); }
/* small gold-star rating, bottom-left of each card photo (boxless, like the hero) */
.plhome.plh2 .plv-rate { position:absolute; left:12px; bottom:11px; display:inline-flex; align-items:center; gap:4px; color:#fff; font:700 13px/1 var(--sans); text-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.45); }
.plhome.plh2 .plv-rate i { color:#FFC861; font-size:13px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* ════════════════════════════════════════════════════════════════════════════
   HOME ELEVATE PASS (2026-06-16) — bring the signed-in home to the landing /
   onboarding "Taste Board" bar: porcelain + terracotta, Fraunces headings with
   italic accents, sentence-case labels (NO shouty uppercase + wide tracking),
   NO · middots, premium location pill + sheet, a little scroll life. Scoped to
   .plhome.plh2 so nothing bleeds. Wins by source order over the rules above.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Section headings — refined kicker (small terracotta label with a short
      rule) + serif title with an italic accent. Replaces the old uppercase,
      .18em-tracked eyebrow that read as an AI template tell. ────────────────── */
.plhome.plh2 .plh2-shead { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 15px; }
.plhome.plh2 .plh2-shead-tx { min-width:0; }
.plhome.plh2 .plh2-kicker { display:inline-flex; align-items:center; gap:8px; font:700 12px/1 var(--sans); letter-spacing:.005em; text-transform:none; color:var(--accent-press); margin-bottom:9px; }
.plhome.plh2 .plh2-kicker::before { content:""; width:16px; height:1.5px; border-radius:2px; background:var(--accent); opacity:.55; flex:none; }
.plhome.plh2 .plh2-stitle { margin:0; font:400 26px/1.06 var(--serif); letter-spacing:-.018em; color:var(--fg1); }
.plhome.plh2 .plh2-stitle em { font-style:italic; color:var(--accent); }
.plhome.plh2 .plh2-saction { display:inline-flex; align-items:center; gap:4px; flex:none; white-space:nowrap; background:none; border:none; cursor:pointer; padding:0 0 3px; font:600 13px/1 var(--sans); color:var(--accent); border-radius:8px; transition:opacity .15s var(--ease-out); }
.plhome.plh2 .plh2-saction:hover { opacity:.72; }
.plhome.plh2 .plh2-saction svg { transition:transform .18s var(--ease-out); }
.plhome.plh2 .plh2-saction:hover svg { transform:translateX(2px); }
.plhome.plh2 .plh2-saction:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ── Venue card meta — sentence case, comma/em-dash separated (was UPPERCASE,
      .13em-tracked, · middots). Two-line clamp keeps every name aligned. ────── */
.plhome.plh2 .plv-meta { font:600 11.5px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--fg3); margin-bottom:7px; min-height:30px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* $-tier price — overlay pill on Home rail-card images (matches the Restaurants page);
   inline bold on the hero caps line. So every Home restaurant shows its $$$ tier. */
.pl-price { position:absolute; top:10px; right:10px; z-index:2; font:700 12px/1 var(--sans); color:#fff; background:rgba(42,32,24,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:5px 8px; border-radius:8px; letter-spacing:.02em; pointer-events:none; }
.plh2-hero-price { font-weight:800; margin-left:7px; letter-spacing:.02em; }

/* ── De-cap remaining shouty micro-labels ─────────────────────────────────── */
.plhome.plh2 .plh2-mlab { text-transform:none; letter-spacing:.02em; font-weight:700; font-size:9.5px; color:rgba(255,233,207,.9); }
.plhome.plh2 .pl-rc-place { text-transform:none; letter-spacing:.005em; font:600 12px/1.3 var(--sans); color:var(--fg3); }
.plhome.plh2 .pl-fa-when { text-transform:none; letter-spacing:0; }
.plhome.plh2 .pl-xbadge { letter-spacing:.01em; text-transform:none; font-weight:700; font-size:10.5px; }

/* ── Hero polish — give the photo a touch more lift + a smoother press; the
      flag pill reads as a quiet white chip, the match numeral in warm cream. ── */
.plhome.plh2 .plh2-hero { border-radius:24px; box-shadow:0 10px 30px -14px rgba(90,48,25,.42), 0 2px 8px -4px rgba(90,48,25,.18); transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.plhome.plh2 .plh2-hero:hover { transform:translateY(-2px); box-shadow:0 18px 40px -16px rgba(90,48,25,.5), 0 4px 12px -6px rgba(90,48,25,.22); }
.plhome.plh2 .plh2-hero:active { transform:scale(.985); }
.plhome.plh2 .plh2-hero-flag { box-shadow:0 2px 8px rgba(34,25,15,.18); }
.plhome.plh2 .plh2-hero-name { font-weight:500; letter-spacing:-.02em; }
.plhome.plh2 .plh2-hero-caps { text-transform:none; letter-spacing:.02em; font:700 11px/1.4 var(--sans); color:rgba(255,243,228,.92); }
.plhome.plh2 .plh2-hero:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ── Quick tiles — gentle hover lift, accent-tinted on hover ──────────────── */
.plhome.plh2 .plh2-tile { transition:transform .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .18s var(--ease-out); }
.plhome.plh2 .plh2-tile:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); box-shadow:var(--shadow-md); }
.plhome.plh2 .plh2-tile:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Friend activity cards — warmer ring avatar, lift on hover ────────────── */
.plhome.plh2 .pl-fa { transition:transform .16s var(--ease-out), box-shadow .18s var(--ease-out), border-color .16s; }
.plhome.plh2 .pl-fa:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.plhome.plh2 .pl-fa:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.plhome.plh2 .pl-fa-av, .plhome.plh2 .pl-fa-thumb-fb { background:linear-gradient(150deg, #D98A5E, var(--accent)); }
.plhome.plh2 .pl-finvite:focus-visible, .plhome.plh2 .pl-loybonus:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Loyalty bonus tile — em-dash separator between tier + points ─────────── */
.plhome.plh2 .pl-loybonus-sep { color:var(--fg3); margin:0 7px; font-weight:500; }

/* ── Location pill — make it read as a tappable, premium chip (it had been a
      bare text button bolted on by another work-stream). ───────────────────── */
/* min-width:0 lets the pill SHRINK inside the header flex row so its label ellipsizes
   instead of overrunning the Loyalty pill on a narrow screen (the reported overlap). */

/* ── Location sheet — brand-fitted: serif title, terracotta GPS button, chips
      that match the home, comfortable rhythm + a clear apply button. ───────── */

@media (prefers-reduced-motion: reduce) {
  .plhome.plh2 .plh2-hero, .plhome.plh2 .plh2-tile, .plhome.plh2 .pl-fa,
  .plhome.plh2 .plh2-saction svg { transition:none; }
  .plhome.plh2 .plh2-hero:hover, .plhome.plh2 .plh2-tile:hover, .plhome.plh2 .pl-fa:hover { transform:none; }
}

/* ── AU2/OB2 — auth + onboard porcelain (appended) ─────────────────────────────
   Reskin of /signin /forgot-password /reset-password (.au2-*) and /onboard
   (.ob2 scope wrapping the existing .quiz- / .ob- / .tg- / .to- / .onbi / .onbr
   renderers) to the porcelain "Taste is a fingerprint." landing language:
   warm radial porcelain, terracotta eyebrows, Fraunces titles with italic
   accents, porcelain cards (radius 22–26, 1px line, warm shadow), accent-grad
   pill CTAs with press scale(.97). Selection = terracotta tint + border +
   small check dot — never a heavy fill. Everything scoped to .au2-page/.ob2. */

/* ── shared page shell ── */
.au2-page{ position:relative; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  font-family:var(--sans); color:var(--text);
  background:#FFFFFF; }
.au2-top{ display:flex; justify-content:center; padding:calc(env(safe-area-inset-top, 0px) + 26px) 22px 4px; }
.au2-wm{ display:inline-flex; align-items:center; gap:8px; font-family:var(--serif); font-style:italic;
  font-weight:560; font-size:21px; letter-spacing:-.01em; color:var(--text); text-decoration:none; }
.au2-wm svg{ width:19px; height:19px; flex:none; display:block; }
.au2-wm .au2-dot{ color:var(--accent); }
.au2-body{ flex:1; display:flex; flex-direction:column; justify-content:center; width:100%; max-width:434px;
  margin:0 auto; padding:22px 22px calc(env(safe-area-inset-bottom, 0px) + 34px); }
.au2-card{ background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:28px 24px 26px;
  box-shadow:0 26px 56px -26px rgba(54,36,18,.22), 0 4px 14px -8px rgba(54,36,18,.08), inset 0 1px 0 rgba(255,255,255,.85);
  animation:au2Up .5s var(--ease-out) both; }
@keyframes au2Up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
/* Eyebrow — refined serif italic, sentence case, no tracking (echoes the landing
   eyebrow). The serif greeting below carries the hierarchy. */
.au2-eyebrow{ font-family:var(--serif); font-style:italic; font-weight:420; font-size:14px;
  letter-spacing:0; text-transform:none; color:var(--accent); margin:0 0 8px; }
.au2-title{ font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 144; font-size:31px;
  line-height:1.06; letter-spacing:-.018em; color:var(--text); margin:0 0 18px; }
.au2-title em{ font-style:italic; font-weight:480; color:var(--accent); }
.au2-sub{ font-size:13.5px; line-height:1.55; color:var(--text-2); margin:-10px 0 18px; }
/* sign-in greeting subline — sits just under the Fraunces greeting, before fields */
.au2-sub--in{ margin:-8px 0 20px; }
.au2-sub b{ color:var(--text); font-weight:650; }
.au2-hint{ font-size:12px; line-height:1.5; color:var(--text-3); margin:-6px 0 18px; }

/* fields */
.au2-label{ display:block; font-size:12px; font-weight:650; letter-spacing:.01em; color:var(--text-2); margin:0 0 7px; }
.au2-input{ display:block; width:100%; padding:13px 15px; margin:0 0 14px; font-family:var(--sans); font-size:15px;
  line-height:1.3; color:var(--text); background:var(--surface-3); border:1px solid var(--line); border-radius:14px;
  outline:none; transition:border-color .16s ease, box-shadow .16s ease; }
.au2-input::placeholder{ color:var(--text-3); }
.au2-input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,80,47,.12); }
.au2-input.shake{ animation:shake .4s ease; border-color:var(--accent); }
.au2-forgot{ text-align:right; margin:-4px 0 0; }
.au2-forgot a{ font-size:12.5px; font-weight:650; color:var(--text-2); text-decoration:none; }
.au2-forgot a:hover{ color:var(--accent); }
.au2-err{ font-size:13px; font-weight:500; line-height:1.45; color:var(--accent-deep);
  background:rgba(194,80,47,.07); border:1px solid rgba(194,80,47,.16); border-radius:12px;
  padding:10px 13px; margin:12px 0 0; animation:fadeUp .25s var(--ease-out); }
.au2-err[hidden]{ display:none; }
.au2-err a{ color:var(--accent); font-weight:700; text-decoration:none; }
.au2-cta{ display:flex; align-items:center; justify-content:center; width:100%; margin-top:18px; padding:16px 26px;
  font-family:var(--sans); font-size:14.5px; font-weight:700; letter-spacing:.03em; color:var(--on-accent);
  /* Deeper terracotta (matches the landing .fp-cta) so the white label clears WCAG AA
     (4.5:1); the global --accent-grad's brighter start only reaches ~4.42 on this label. */
  background:linear-gradient(135deg, #BD4928 0%, #B0451F 55%, #A8431F 100%); border:none; border-radius:999px; cursor:pointer; text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(178,67,31,.5), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease; }
.au2-cta:hover{ filter:brightness(1.05) saturate(1.05); }
.au2-cta:active{ transform:scale(.97); }
.au2-cta[disabled]{ cursor:default; filter:saturate(.55) brightness(1.04); box-shadow:none; transform:none; }
.au2-or{ display:flex; align-items:center; gap:12px; margin:20px 0 16px; }
.au2-or::before, .au2-or::after{ content:""; flex:1; height:1px; background:var(--line); }
.au2-or span{ font-family:var(--serif); font-style:italic; font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--text-2); }
.au2-oauth{ margin:0; }
.au2-goog{ display:flex; justify-content:center; min-height:40px; }
.au2-alt{ text-align:center; font-size:13.5px; color:var(--text-2); margin:22px 0 0; }
.au2-alt a{ color:var(--accent); font-weight:700; text-decoration:none; }
.au2-alt--in{ margin:18px 0 0; }
.au2-done-ic{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; margin:0 0 14px;
  background:rgba(194,80,47,.08); border:1px solid rgba(194,80,47,.25); color:var(--accent); }
.au2-done-ic svg{ width:20px; height:20px; }

/* ── sign-in brand warmth (scoped to .au2-signin only — forgot/reset stay clean) ──
   A soft terracotta+ochre porcelain glow fills the ground behind the card, and a
   delicate fingerprint whorl crests the top-right corner (the "taste is a
   fingerprint" motif from the landing). Both sit BEHIND the card and are kept
   very low in opacity so the card surface stays a clean, legible porcelain. */
.au2-signin{ overflow:hidden; }
.au2-signin .au2-glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(118% 62% at 18% 8%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 58%),
    radial-gradient(96% 56% at 88% 92%, color-mix(in srgb, var(--ochre) 11%, transparent) 0%, transparent 60%);
  animation:au2GlowIn 1.1s var(--ease-out) both; }
.au2-signin .au2-print{ position:absolute; top:calc(env(safe-area-inset-top, 0px) + 64px); right:-15%;
  width:min(56vw, 260px); transform:rotate(9deg); opacity:.42; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(118% 118% at 78% 22%, #000 40%, transparent 82%);
  mask-image:radial-gradient(118% 118% at 78% 22%, #000 40%, transparent 82%);
  animation:au2PrintIn 1.5s var(--ease-out) both .2s; }
.au2-signin .au2-print svg{ width:100%; height:auto; display:block; }
/* lift the card + chrome above the decorative layers */
.au2-signin .au2-top, .au2-signin .au2-body{ position:relative; z-index:2; }
/* a touch more presence on the card so it reads as a premium plate over the glow */
.au2-signin .au2-card{ box-shadow:0 30px 64px -28px rgba(54,36,18,.26), 0 5px 16px -9px rgba(54,36,18,.10), inset 0 1px 0 rgba(255,255,255,.9); }
@keyframes au2GlowIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes au2PrintIn{ from{ opacity:0; transform:rotate(9deg) scale(.92); } to{ opacity:.42; transform:rotate(9deg) scale(1); } }

@media (prefers-reduced-motion: reduce){
  .au2-card{ animation:none; }
  .au2-signin .au2-glow, .au2-signin .au2-print{ animation:none; opacity:1; }
  .au2-signin .au2-print{ opacity:.42; }
}

/* ── OB2 — onboarding shell (porcelain page + frosted minimal nav) ── */
.ob2{ min-height:100vh; min-height:100dvh; font-family:var(--sans); color:var(--text);
  background:#FFFFFF;
  /* Every screen of the flow ends in a CTA at the foot of a scroll, and .quiz-wrap /
     .tg-wrap reserved NOTHING below it — so the button sat flush on the scroller's
     bottom edge. Reserved here, on the one root all these screens share, rather than
     in each wrapper: a new screen inherits it instead of having to remember. */
  padding-bottom:calc(24px + var(--noodl-sab, 0px)); }
.ob2-center{ display:grid; place-items:center; }
.ob-nav.ob2-nav{ display:flex; align-items:center; justify-content:center; height:58px; padding:0 22px;
  position:sticky; top:0; z-index:100; border-bottom:1px solid transparent;
  background:color-mix(in srgb, var(--bg-3) 72%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.35); backdrop-filter:blur(14px) saturate(1.35); }

/* ════════════════════════════════════════════════════════════════════════════
   UNIFIED NOODL WORDMARK (2026-06-17) — the SAME "Noodl." lockup, top-left, on EVERY
   screen: upright Fraunces + a terracotta dot, no circle mark. `!important` forces it
   over every per-screen variant (italic landing/auth, DM-Serif 27px in-app, etc.).
   ════════════════════════════════════════════════════════════════════════════ */
.fp-wm > svg, .au2-wm > svg, .lp-brand .lp-pmark { display: none !important; }
.fp-wm, .au2-wm, .lp-brand, body.fal-on .lp-brand { gap: 0 !important; }
.fp-wm > span, .au2-wm > span,
.lp-word, body.fal-on .lp-word, .lp-photohome .lp-word, .ph-brand .lp-word {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-style: normal !important; font-weight: 500 !important;
  font-size: 23px !important; letter-spacing: -.015em !important;
  color: var(--text) !important; line-height: 1 !important;
}
.fp-dot, .au2-dot,
.lp-dot, body.fal-on .lp-dot, .lp-photohome .lp-dot, .ph-brand .lp-dot { color: var(--accent) !important; }
/* Same POSITION — top-left — including the previously-centered auth + onboarding navs. */
.au2-top { justify-content: flex-start !important; }
.ob-nav.ob2-nav { justify-content: flex-start !important; }

/* ════════════════════════════════════════════════════════════════════════════
   REC2 — the redesigned "Decide for me" RESULT page (2026-06-18). Ported from the
   ui-skill-agent mockup (Resy/Airbnb/Apple-News grounded). Editorial, no boxes, one
   accent. Self-contained tokens on .rec2 so the app's per-screen vars can't shift it.
   Namespaced `.rec2 .r2-*` so nothing leaks in or out. Full-bleed: cancels .page pad.
   ════════════════════════════════════════════════════════════════════════════ */
.rec2{
  --ink:#1A120C; --ink-2:#5C5249; --ink-3:#8B8178;
  --line:#ECE6DF; --line-2:#E2DAD0;
  --terra:#C2502F; --terra-deep:#A8431F; --terra-wash:#F7ECE6;
  --gold:#B98A3C; --paper:#FCFAF7;
  --r2-shadow:0 1px 2px rgba(26,18,12,.04), 0 8px 24px rgba(26,18,12,.06);
  --r2-shadow-lg:0 2px 6px rgba(26,18,12,.05), 0 20px 50px rgba(26,18,12,.12);
  --r2-ease:cubic-bezier(.22,.61,.36,1);
  position:relative; margin:-30px -26px -28px; background:#fff; color:var(--ink);
  font-family:'Plus Jakarta Sans','Plus Jakarta Sans',-apple-system,system-ui,sans-serif;
  overflow:hidden;
}
/* faint paper grain — tactile, not noisy */
.rec2::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:40;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); }

/* ---- HERO ---- */
.rec2 .r2-hero{ position:relative; height:min(62vh,540px); min-height:430px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; }
.rec2 .r2-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center 52%; transform:scale(1.06); transition:transform 1.2s var(--r2-ease); }
.rec2.is-in .r2-hero-bg{ transform:scale(1); }
.rec2 .r2-hero-scrim{ position:absolute; inset:0; background:
  linear-gradient(to bottom, rgba(26,18,12,.34) 0%, rgba(26,18,12,0) 24%, rgba(26,18,12,0) 42%, rgba(26,18,12,.36) 62%, rgba(26,18,12,.8) 88%, rgba(26,18,12,.92) 100%); }
.rec2 .r2-hero-scrim::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(26,18,12,.42) 0%, rgba(26,18,12,.12) 34%, rgba(26,18,12,0) 58%); }
/* Top-left BACK over the hero (founder: the way back must be visible up top, not a
   bottom-of-page link). A sibling of the hero <a> — never inside it, so a tap can't
   also open the venue — floating on the image: dark translucent circle + white
   chevron (no backdrop-filter: the known full-screen GPU-freeze trap). */
.rec2{ position:relative; }
.rec2 .r2-backbtn{ position:absolute; top:22px; left:16px; z-index:5; width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,247,238,.28); background:rgba(20,14,8,.45); color:#FFF7EE; display:grid; place-items:center; cursor:pointer; padding:0; }
.rec2 .r2-backbtn:active{ transform:scale(.94); }
/* eyebrow steps right so the back button owns the corner */
.rec2 .r2-eyebrow{ position:relative; z-index:2; align-self:flex-start; display:flex; align-items:center; gap:9px; margin:0 0 auto 64px; padding-top:30px; color:rgba(255,255,255,.95); }
.rec2 .r2-eyebrow{ gap:8px; }
.rec2 .r2-eyebrow svg{ width:15px; height:15px; opacity:.92; }
.rec2 .r2-eyebrow span{ font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.rec2 .r2-eyebrow em{ font-style:normal; }
.rec2 .r2-badge{ position:absolute; top:28px; right:18px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:7px 13px 7px 10px; border-radius:100px; background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4); border:1px solid rgba(255,255,255,.34); color:#fff; font-size:12.5px; font-weight:500; box-shadow:0 4px 18px rgba(0,0,0,.18); }
.rec2 .r2-badge svg{ width:14px; height:14px; }
.rec2 .r2-hero-body{ position:relative; z-index:2; padding:0 22px 26px; color:#fff; }
.rec2 .r2-hero-name{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(38px,11vw,48px); line-height:.98; letter-spacing:-.02em; margin:0 0 14px; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.rec2 .r2-hero-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:14.5px; color:rgba(255,255,255,.92); margin-bottom:6px; }
.rec2 .r2-sep{ width:1px; height:12px; background:rgba(255,255,255,.4); display:inline-block; }
.rec2 .r2-price b{ font-weight:600; color:#fff; } .rec2 .r2-price s{ color:rgba(255,255,255,.4); }
.rec2 .r2-rating{ display:inline-flex; align-items:center; gap:5px; } .rec2 .r2-rating svg{ width:14px; height:14px; color:#FFD27A; } .rec2 .r2-rating b{ font-weight:600; } .rec2 .r2-rating .cnt{ color:rgba(255,255,255,.72); font-size:13px; }

/* ---- MATCH BAND ---- */
.rec2 .r2-matchband{ position:relative; z-index:3; margin:-30px 16px 0; background:#fff; border-radius:26px; box-shadow:var(--r2-shadow-lg); padding:22px 22px 20px; }
.rec2 .r2-mb-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:16px; }
.rec2 .r2-mb-num{ display:flex; align-items:baseline; gap:3px; font-family:'Fraunces',Georgia,serif; line-height:.9; }
.rec2 .r2-mb-num .big{ font-size:58px; font-weight:500; letter-spacing:-.03em; }
.rec2 .r2-mb-num .pct{ font-size:22px; font-weight:500; color:var(--terra); }
.rec2 .r2-mb-label{ padding-bottom:7px; text-align:right; }
.rec2 .r2-mb-label .l1{ font-size:13px; color:var(--ink-3); }
.rec2 .r2-mb-label .l2{ font-family:'Fraunces',Georgia,serif; font-size:17px; font-weight:500; font-style:italic; }
.rec2 .r2-mb-track{ position:relative; height:7px; border-radius:100px; background:linear-gradient(90deg,#F0E9E1,#EFE7DE); overflow:hidden; }
.rec2 .r2-mb-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:100px; background:linear-gradient(90deg,#E08A5B,var(--terra) 60%,var(--terra-deep)); transition:width 1.1s var(--r2-ease) .25s; }
.rec2 .r2-mb-scale{ display:flex; justify-content:space-between; margin-top:9px; font-size:11px; color:var(--ink-3); }

/* ---- SECTION SHELL ---- */
.rec2 .r2-sheet{ position:relative; z-index:2; padding:0 22px; }
.rec2 .r2-kicker{ font-size:12.5px; font-weight:600; color:var(--terra-deep); margin:0 0 3px; display:inline-flex; align-items:center; gap:7px; }
.rec2 .r2-kicker .tick{ width:14px; height:1.5px; background:var(--terra); display:inline-block; border-radius:2px; }

/* WHY (editorial prose) */
.rec2 .r2-why{ margin:30px 0 4px; }
.rec2 .r2-why-text{ font-family:'Fraunces',Georgia,serif; font-size:24px; line-height:1.34; font-weight:400; letter-spacing:-.012em; margin:11px 0 0; }
.rec2 .r2-why-text .hl{ color:var(--terra-deep); font-style:italic; }
.rec2 .r2-why-sign{ margin:16px 0 0; font-size:13.5px; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.rec2 .r2-dotline{ flex:0 0 22px; height:1px; background:var(--line-2); }

/* reasons ledger */
.rec2 .r2-reasons{ margin:24px 0 4px; border-top:1px solid var(--line); }
.rec2 .r2-reason{ display:flex; align-items:center; gap:14px; padding:15px 2px; border-bottom:1px solid var(--line); }
.rec2 .r2-ico{ flex:0 0 22px; width:22px; height:22px; color:var(--terra-deep); display:flex; align-items:center; justify-content:center; }
.rec2 .r2-ico svg{ width:20px; height:20px; }
.rec2 .r2-rtxt{ flex:1; font-size:15px; line-height:1.3; } .rec2 .r2-rtxt b{ font-weight:600; }
.rec2 .r2-rval{ font-size:13px; color:var(--ink-3); white-space:nowrap; }

/* WHAT TO ORDER */
.rec2 .r2-order{ margin:34px 0 6px; }
.rec2 .r2-order-dish{ font-family:'Fraunces',Georgia,serif; font-size:27px; font-weight:500; line-height:1.12; letter-spacing:-.015em; margin:14px 0 0; }
.rec2 .r2-order-dish .u{ background-image:linear-gradient(transparent 62%, var(--terra-wash) 62%); padding:0 1px; }
.rec2 .r2-order-note{ font-size:13.5px; color:var(--ink-2); margin:9px 0 0; line-height:1.45; }
.rec2 .r2-sig{ margin:20px 0 0; }
.rec2 .r2-sig-lead{ font-size:13.5px; color:var(--ink-2); margin:0 0 13px; } .rec2 .r2-sig-lead b{ color:var(--ink); font-weight:600; }
.rec2 .r2-strip{ display:flex; gap:11px; overflow-x:auto; padding:2px 22px 6px 0; margin:0 -22px 0 0; scroll-padding-left:2px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.rec2 .r2-strip::-webkit-scrollbar{ display:none; }
.rec2 .r2-dish{ flex:0 0 auto; scroll-snap-align:start; }
.rec2 .r2-dish-txt{ display:flex; align-items:center; min-height:64px; max-width:200px; border-radius:14px; border:1px solid var(--line); padding:0 16px; font-family:'Fraunces',Georgia,serif; font-size:15px; font-weight:500; line-height:1.2; margin:0; background:#fff; }

/* FIT */
.rec2 .r2-fit{ margin:36px 0 6px; }
.rec2 .r2-fit-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:26px; row-gap:17px; margin:18px 0 0; }
.rec2 .r2-fit-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.rec2 .r2-fit-name{ font-size:13.5px; } .rec2 .r2-fit-pct{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.rec2 .r2-fit-bar{ height:4px; border-radius:100px; background:#F0E9E1; overflow:hidden; }
.rec2 .r2-fit-bar i{ display:block; height:100%; width:0; border-radius:100px; background:var(--terra); transition:width .9s var(--r2-ease); }
.rec2 .r2-fit-bar.soft i{ background:#D9C2B4; }

/* CTA */
.rec2 .r2-cta{ padding:30px 22px 8px; }
.rec2 .r2-cta-primary{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:17px 20px; border:none; cursor:pointer; background:var(--terra); color:#fff; border-radius:100px; font-family:inherit; font-size:16px; font-weight:600; text-decoration:none; box-shadow:0 8px 22px rgba(194,80,47,.32); transition:transform .2s var(--r2-ease), box-shadow .2s var(--r2-ease), background .2s var(--r2-ease); }
.rec2 .r2-cta-primary:hover{ background:var(--terra-deep); transform:translateY(-1px); box-shadow:0 12px 28px rgba(194,80,47,.4); }
.rec2 .r2-cta-primary svg{ width:18px; height:18px; transition:transform .25s var(--r2-ease); } .rec2 .r2-cta-primary:hover svg{ transform:translateX(3px); }
.rec2 .r2-cta-secondary{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px 20px; margin-top:11px; cursor:pointer; background:#fff; color:var(--ink); border:1px solid var(--line-2); border-radius:100px; font-family:inherit; font-size:14.5px; font-weight:500; text-decoration:none; transition:background .2s var(--r2-ease), border-color .2s var(--r2-ease); }
.rec2 .r2-cta-secondary:hover{ background:var(--paper); border-color:var(--ink-3); }
.rec2 .r2-cta-secondary svg{ width:16px; height:16px; color:var(--ink-2); }

/* ALTERNATES */
.rec2 .r2-alts{ margin:42px 0 0; padding:30px 0 4px; border-top:1px solid var(--line); }
.rec2 .r2-alts-head{ padding:0 22px; }
.rec2 .r2-alts-title{ font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:500; letter-spacing:-.01em; margin:5px 0 3px; }
.rec2 .r2-alts-sub{ font-size:13.5px; color:var(--ink-2); margin:0; }
.rec2 .r2-altstrip{ display:flex; gap:15px; overflow-x:auto; padding:18px 22px 8px; scroll-padding-left:22px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.rec2 .r2-altstrip::-webkit-scrollbar{ display:none; }
.rec2 .r2-alt{ flex:0 0 224px; scroll-snap-align:start; border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--r2-shadow); text-decoration:none; color:var(--ink); transition:transform .3s var(--r2-ease), box-shadow .3s var(--r2-ease); }
.rec2 .r2-alt:hover{ transform:translateY(-3px); box-shadow:var(--r2-shadow-lg); }
.rec2 .r2-alt-imgwrap{ position:relative; height:140px; overflow:hidden; display:block; }
.rec2 .r2-alt-img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s var(--r2-ease); }
.rec2 .r2-alt:hover .r2-alt-img{ transform:scale(1.05); }
.rec2 .r2-alt-match{ position:absolute; top:11px; left:11px; padding:5px 10px; border-radius:100px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:12px; font-weight:600; color:var(--terra-deep); box-shadow:0 2px 10px rgba(0,0,0,.12); }
.rec2 .r2-alt-pad{ display:block; padding:13px 15px 16px; }
.rec2 .r2-alt-nm{ display:block; font-family:'Fraunces',Georgia,serif; font-size:18px; font-weight:500; letter-spacing:-.01em; line-height:1.1; }
.rec2 .r2-alt-meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-top:6px; }
.rec2 .r2-alt-meta .r2-sep{ background:var(--line-2); height:10px; }
.rec2 .r2-star{ display:inline-flex; align-items:center; gap:3px; } .rec2 .r2-star svg{ width:11px; height:11px; color:var(--gold); }

/* SHORTLIST */
.rec2 .r2-more{ margin:34px 0 0; padding:30px 22px 6px; background:var(--paper); border-top:1px solid var(--line); }
.rec2 .r2-more-title{ font-family:'Fraunces',Georgia,serif; font-size:21px; font-weight:500; letter-spacing:-.01em; margin:5px 0 16px; }
.rec2 .r2-mrow{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:padding-left .2s var(--r2-ease); }
.rec2 .r2-mrow:hover{ padding-left:5px; }
.rec2 .r2-mrow.r2-hidden{ display:none; }
.rec2 .r2-mrow-img{ flex:0 0 56px; width:56px; height:56px; border-radius:13px; background-size:cover; background-position:center; box-shadow:0 1px 4px rgba(26,18,12,.1); }
.rec2 .r2-mrow-mid{ flex:1; min-width:0; }
.rec2 .r2-mrow-nm{ display:block; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec2 .r2-mrow-meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-top:3px; }
.rec2 .r2-mrow-meta .r2-sep{ background:var(--line-2); height:9px; }
.rec2 .r2-mrow-match{ flex:0 0 auto; text-align:right; }
.rec2 .r2-mrow-match .m{ font-family:'Fraunces',Georgia,serif; font-size:18px; font-weight:500; color:var(--terra-deep); line-height:1; }
.rec2 .r2-mrow-match .s{ font-size:10.5px; color:var(--ink-3); margin-top:2px; }
.rec2 .r2-morebtn{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:18px; padding:13px; cursor:pointer; background:transparent; border:1px solid var(--line-2); border-radius:100px; font-family:inherit; font-size:14px; font-weight:500; color:var(--ink); transition:background .2s var(--r2-ease), border-color .2s var(--r2-ease); }
.rec2 .r2-morebtn:hover{ background:#fff; border-color:var(--ink-3); }
.rec2 .r2-morebtn svg{ width:15px; height:15px; color:var(--ink-2); transition:transform .25s var(--r2-ease); }

/* REFINE */
.rec2 .r2-refine{ padding:30px 22px 12px; background:var(--paper); }
.rec2 .r2-refine-q{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:18px; font-weight:400; margin:0 0 14px; }
.rec2 .r2-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.rec2 .r2-chip{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:100px; cursor:pointer; background:#fff; border:1px solid var(--line-2); font-family:inherit; font-size:13.5px; font-weight:500; color:var(--ink); transition:transform .18s var(--r2-ease), border-color .18s var(--r2-ease), background .18s var(--r2-ease), color .18s var(--r2-ease); }
.rec2 .r2-chip svg{ width:14px; height:14px; color:var(--ink-3); transition:color .18s var(--r2-ease); }
.rec2 .r2-chip:hover{ border-color:var(--terra); transform:translateY(-1px); } .rec2 .r2-chip:hover svg{ color:var(--terra-deep); }
/* "Change the request" is a restart, not a refine-reason — give it a clear gap (a hairline
   divider above) so it reads as its own step, while staying the same pill button. */
.rec2 .r2-refine .nbk{ margin-top:20px; }
.rec2 .r2-refine .r2-chips{ padding-bottom:20px; border-bottom:1px solid var(--line-2); }
.rec2 .r2-changeback{ display:inline-flex; align-items:center; gap:8px; margin:22px 0 4px; cursor:pointer; background:none; border:none; padding:6px 0; font-family:inherit; font-size:14px; font-weight:500; color:var(--ink-2); transition:color .2s var(--r2-ease), gap .2s var(--r2-ease); }
.rec2 .r2-changeback:hover{ color:var(--terra-deep); gap:11px; } .rec2 .r2-changeback svg{ width:16px; height:16px; }
.rec2 .r2-footmark{ text-align:center; padding:26px 22px 38px; font-family:'Fraunces',Georgia,serif; font-size:15px; color:var(--ink-3); font-style:italic; }
.rec2 .r2-footmark .dot{ color:var(--terra); font-style:normal; }

/* reveal-on-scroll */
.rec2 .r2-rv{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--r2-ease), transform .7s var(--r2-ease); }
.rec2 .r2-rv.in{ opacity:1; transform:none; }
/* Group result — per-member "how each of you fits" rows (rec2-styled). */
.rec2 .r2-members{ margin:34px 0 6px; }
.rec2 .r2-member-list{ margin:16px 0 0; display:flex; flex-direction:column; gap:14px; }
.rec2 .r2-member{ display:flex; align-items:center; gap:12px; }
.rec2 .r2-member-av{ flex:0 0 36px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:16px; color:var(--terra-deep); background:linear-gradient(155deg,#F7EDE4,#EFE0D2); box-shadow:0 1px 0 rgba(255,255,255,.6) inset; }
.rec2 .r2-member-name{ flex:0 0 auto; min-width:50px; font-size:14px; font-weight:500; color:var(--ink); }
.rec2 .r2-member-bar{ flex:1; height:5px; border-radius:100px; background:#F0E9E1; overflow:hidden; }
.rec2 .r2-member-bar i{ display:block; height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,#E08A5B,var(--terra)); transition:width .9s var(--r2-ease); }
.rec2 .r2-member-pct{ flex:0 0 auto; min-width:34px; text-align:right; font-size:13px; font-weight:600; color:var(--terra-deep); font-variant-numeric:tabular-nums; }
.rec2 .r2-member-lim{ flex:0 0 auto; font-size:11px; color:var(--ink-3); }
/* The /group result mounts rec2 inside .group-wrap (28/20/120 padding), not .page —
   re-bleed the hero to that container's edges (id+class beats the global .rec2 margin). */
#group-wrap .rec2{ margin:-28px -20px 0; }
@media (prefers-reduced-motion:reduce){
  .rec2 *{ transition:none !important; animation:none !important; }
  .rec2 .r2-rv{ opacity:1; transform:none; } .rec2 .r2-hero-bg{ transform:scale(1.03); }
}

/* ════════════════════════════════════════════════════════════════════════════
   DT — the "Who's at the table tonight?" add-diners panel (2026-06-18). Ported from
   the ui-skill-agent mockup: a living table (monogram avatars in an arc that collapses
   into an Apple-Invites cluster at 5+), live "A table for N", premium stepper, empty
   state. Namespaced `.dt-*` + self-contained tokens so it can't clash or be shifted.
   ════════════════════════════════════════════════════════════════════════════ */
.dt-panel{
  --ink:#1A120C; --muted:#5C5249; --faint:#8A7F75; --line:#EFE7DF; --line-soft:#F4EEE7;
  --terra:#C2502F; --terra-deep:#A8431F; --terra-wash:#FBF1EC; --cream:#F6EEE6; --cream-deep:#EDE1D5; --paper:#FEFCFA;
  --dt-sm:0 1px 2px rgba(26,18,12,.04), 0 4px 14px rgba(26,18,12,.05);
  --dt-md:0 6px 24px rgba(26,18,12,.08), 0 2px 6px rgba(26,18,12,.04);
  --dt-lift:0 14px 34px rgba(168,67,31,.16), 0 4px 10px rgba(26,18,12,.06);
  --dt-ease:cubic-bezier(.34,1.4,.4,1); --dt-ease-soft:cubic-bezier(.22,.61,.36,1);
  font-family:'Plus Jakarta Sans','Plus Jakarta Sans',-apple-system,system-ui,sans-serif;
  color:var(--ink); margin:8px 0 4px;
}
.dt-panel .dt-stage{ position:relative; overflow:hidden; margin:4px 0 8px; padding:28px 20px 22px; border-radius:26px; background:radial-gradient(140% 120% at 50% 0%, #FFFFFF 0%, #FDF8F4 60%, #FBF3ED 100%); box-shadow:var(--dt-md); }
.dt-panel .dt-stage::before{ content:""; position:absolute; left:50%; top:34px; width:286px; height:286px; transform:translateX(-50%); border-radius:50%; border:1.5px dashed rgba(194,80,47,.15); pointer-events:none; }
.dt-panel .dt-stage::after{ content:""; position:absolute; left:50%; top:62px; width:228px; height:228px; transform:translateX(-50%); border-radius:50%; border:1.5px solid rgba(194,80,47,.07); pointer-events:none; }
.dt-panel .dt-gather{ position:relative; height:176px; margin:0 auto 12px; z-index:1; }
.dt-panel .dt-seat{ position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px; transition:transform .45s var(--dt-ease), opacity .4s var(--dt-ease-soft); }
.dt-panel .dt-mono{ width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:26px; box-shadow:0 6px 16px rgba(26,18,12,.12), 0 1px 0 rgba(255,255,255,.6) inset; position:relative; }
.dt-panel .dt-name{ font-size:12.5px; color:var(--muted); font-weight:500; max-width:64px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dt-panel .dt-seat.you .dt-mono{ width:74px; height:74px; font-size:31px; background:linear-gradient(155deg,var(--terra),var(--terra-deep)); color:#fff; box-shadow:0 10px 22px rgba(168,67,31,.34), 0 1px 0 rgba(255,255,255,.25) inset; border:2.5px solid #fff; }
.dt-panel .dt-seat.you .dt-name{ color:var(--terra-deep); font-weight:600; }
.dt-panel .dt-seat.friend .dt-mono{ background:linear-gradient(155deg,#F7EDE4,#EFE0D2); color:var(--terra-deep); border:2px solid #fff; }
.dt-panel .dt-seat.extra .dt-mono{ background:#fff; color:var(--faint); border:2px dashed var(--cream-deep); box-shadow:0 4px 12px rgba(26,18,12,.06); font-size:22px; }
.dt-panel .dt-seat .dt-name.ghost{ color:var(--faint); font-weight:400; }
.dt-panel .dt-seat.clustered .dt-mono{ width:58px; height:58px; font-size:24px; box-shadow:0 4px 12px rgba(26,18,12,.14), 0 0 0 3px #fff; border:none; }
.dt-panel .dt-seat.clustered.you .dt-mono{ width:66px; height:66px; font-size:28px; box-shadow:0 8px 18px rgba(168,67,31,.34), 0 0 0 3px #fff; border:none; }
.dt-panel .dt-seat.clustered.extra .dt-mono{ width:58px; height:58px; font-size:22px; box-shadow:0 0 0 3px #fff; }
.dt-panel .dt-seat.overflow .dt-mono{ width:58px; height:58px; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:20px; background:linear-gradient(155deg,#EFE3D7,#E4D3C2); color:var(--muted); box-shadow:0 4px 12px rgba(26,18,12,.12), 0 0 0 3px #fff; }
.dt-panel .dt-cluster-cap{ position:absolute; left:0; right:0; text-align:center; font-size:14px; font-weight:600; color:var(--terra-deep); }
@keyframes dtSeatPop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.dt-panel .dt-seat.pop{ animation:dtSeatPop .45s var(--dt-ease) both; }
.dt-panel .dt-count{ text-align:center; position:relative; z-index:1; margin-top:8px; }
.dt-panel .dt-count-n{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:23px; letter-spacing:-.01em; color:var(--ink); transition:transform .35s var(--dt-ease); display:inline-block; }
.dt-panel .dt-count-n b{ color:var(--terra-deep); font-weight:600; }
.dt-panel .dt-promise{ font-size:13.5px; color:var(--faint); margin-top:3px; display:flex; align-items:center; justify-content:center; gap:6px; }
.dt-panel .dt-promise svg{ flex-shrink:0; color:var(--terra); }
.dt-panel .dt-count.bump .dt-count-n{ transform:scale(1.12); }
.dt-panel .dt-seclabel{ display:flex; align-items:baseline; justify-content:space-between; margin:22px 2px 12px; }
.dt-panel .dt-seclabel h2{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:19px; letter-spacing:-.01em; color:var(--ink); margin:0; }
.dt-panel .dt-hint{ font-size:13px; color:var(--faint); }
.dt-panel .dt-rail{ display:flex; gap:14px; padding:6px 2px 16px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-left:2px; }
.dt-panel .dt-rail::-webkit-scrollbar{ display:none; }
.dt-panel .dt-friend{ flex:0 0 auto; width:86px; display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; border:none; background:none; padding:6px 2px; scroll-snap-align:center; border-radius:18px; transition:transform .3s var(--dt-ease); }
.dt-panel .dt-friend:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }
.dt-panel .dt-av{ position:relative; width:68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:28px; color:var(--terra-deep); background:linear-gradient(155deg,#F8EFE7,#F0E2D5); box-shadow:0 4px 12px rgba(26,18,12,.07), 0 1px 0 rgba(255,255,255,.7) inset; transition:transform .35s var(--dt-ease), box-shadow .35s var(--dt-ease-soft), background .3s; }
.dt-panel .dt-av::after{ content:""; position:absolute; inset:-5px; z-index:1; border-radius:50%; border:2.5px solid var(--terra); opacity:0; transform:scale(.8); transition:opacity .3s var(--dt-ease-soft), transform .35s var(--dt-ease); }
.dt-panel .dt-check{ position:absolute; right:-2px; bottom:-2px; z-index:3; width:25px; height:25px; border-radius:50%; background:var(--terra); border:2.5px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; transform:scale(0); transition:transform .35s var(--dt-ease); box-shadow:0 3px 8px rgba(168,67,31,.4); }
.dt-panel .dt-check svg{ width:13px; height:13px; }
.dt-panel .dt-nm{ font-size:14px; color:var(--muted); font-weight:500; transition:color .25s; white-space:nowrap; }
.dt-panel .dt-friend:hover .dt-av{ transform:translateY(-3px); box-shadow:0 10px 20px rgba(26,18,12,.1); }
.dt-panel .dt-friend:active .dt-av{ transform:translateY(-1px) scale(.97); }
.dt-panel .dt-friend.sel .dt-av{ transform:translateY(-4px); background:linear-gradient(155deg,#FCEDE5,#F6DDCF); box-shadow:var(--dt-lift); }
.dt-panel .dt-friend.sel .dt-av::after{ opacity:1; transform:scale(1); }
.dt-panel .dt-friend.sel .dt-check{ transform:scale(1); }
.dt-panel .dt-friend.sel .dt-nm{ color:var(--terra-deep); font-weight:600; }
.dt-panel .dt-headcount{ margin:4px 0 0; padding:16px 18px; border-radius:18px; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; transition:border-color .25s, box-shadow .25s; }
.dt-panel .dt-headcount.active{ border-color:rgba(194,80,47,.28); box-shadow:0 6px 18px rgba(168,67,31,.08); }
.dt-panel .dt-hc-title{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:16px; color:var(--ink); margin:0 0 3px; }
.dt-panel .dt-hc-desc{ font-size:13px; color:var(--faint); margin:0; line-height:1.4; max-width:24ch; }
.dt-panel .dt-stepper{ display:flex; align-items:center; gap:4px; background:#fff; border-radius:999px; padding:5px; box-shadow:inset 0 0 0 1px var(--line), 0 2px 6px rgba(26,18,12,.04); flex-shrink:0; }
.dt-panel .dt-step{ width:40px; height:40px; border-radius:50%; border:none; background:var(--cream); color:var(--terra-deep); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, transform .15s var(--dt-ease), opacity .2s; }
.dt-panel .dt-step svg{ width:18px; height:18px; }
.dt-panel .dt-step:hover{ background:var(--cream-deep); } .dt-panel .dt-step:active{ transform:scale(.9); }
.dt-panel .dt-step:focus-visible{ outline:2px solid var(--terra); outline-offset:2px; }
.dt-panel .dt-step.is-off{ opacity:.35; cursor:not-allowed; }
.dt-panel .dt-step-val{ min-width:34px; text-align:center; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:21px; color:var(--ink); font-variant-numeric:tabular-nums; transition:transform .3s var(--dt-ease); }
.dt-panel .dt-step-val.bump{ transform:scale(1.18); }
.dt-panel .dt-empty{ text-align:center; padding:6px 0 2px; }
.dt-panel .dt-empty .dt-em-ic{ width:56px; height:56px; border-radius:50%; margin:0 auto 16px; background:linear-gradient(155deg,#F8EFE7,#F0E2D5); display:flex; align-items:center; justify-content:center; color:var(--terra-deep); box-shadow:0 5px 14px rgba(26,18,12,.07), 0 1px 0 rgba(255,255,255,.7) inset; }
.dt-panel .dt-empty h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:18px; margin:0 0 6px; color:var(--ink); }
.dt-panel .dt-empty p{ font-size:14px; color:var(--muted); margin:0 0 16px; line-height:1.5; }
.dt-panel .dt-invite{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--terra-deep); cursor:pointer; border:none; background:none; text-decoration:none; border-bottom:1.5px solid rgba(168,67,31,.35); padding:2px 0; transition:color .2s, border-color .2s; }
.dt-panel .dt-invite svg{ width:15px; height:15px; }
.dt-panel .dt-invite:hover{ color:var(--terra); border-color:var(--terra); }
.dt-panel .dt-head{ padding:4px 2px 0; }
.dt-panel .dt-eyebrow{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--terra-deep); margin:0 0 8px; }
.dt-panel .dt-eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--terra); display:inline-block; }
.dt-panel .dt-title{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:32px; line-height:1.05; letter-spacing:-.018em; margin:0 0 10px; color:var(--ink); }
.dt-panel .dt-title em{ font-style:italic; color:var(--terra-deep); }
.dt-panel .dt-sub{ font-size:15px; line-height:1.5; color:var(--muted); margin:0; max-width:34ch; }
.dt-panel .dt-next{ width:100%; margin-top:26px; }
@media (prefers-reduced-motion:reduce){ .dt-panel *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ════════════════════════════════════════════════════════════════════════════
   DNA2 — the Taste DNA page redesign (2026-06-18). "The living taste fingerprint":
   a hero fingerprint-whorl that lights outside-in to the % we-know-you (the home
   format, scaled up), the archetype lockup, an inline hue-forward taste spectrum,
   gravitate/passes, the "sharpen your fingerprint" clusters + dimension grid (the
   reskinned Taste Mirror, wiring preserved), lifestyle + stats, share. Self-contained
   tokens; everything scoped under .dna2 so it can't bleed into the rest of passport.
   ════════════════════════════════════════════════════════════════════════════ */
.dna2{
  --terra:#C2502F; --terra-deep:#A8431F;
  --card:#FFFDF8; --hair:#EBE0CC; --hair-soft:#F0E7D6;
  --ink:#23150D; --t2:#6E6256; --t3:#9A9085;
  --h-spice:#CE3F28; --h-rich:#C96A2D; --h-adv:#E0A330; --h-share:#8E7029;
  --d2-serif:'Fraunces',Georgia,serif;
  --d2-sans:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;
  --d2-ease:cubic-bezier(.22,.61,.36,1);
  position:relative; font-family:var(--d2-sans); color:var(--ink);
}
.dna2 *{ box-sizing:border-box; }

/* ── "Your standing" strip — compact, labelled loyalty entry (LOYALTY.md §7) ── */
.dna2 .d2-stand{ display:flex; align-items:center; gap:13px; margin:14px 0 0;
  padding:13px 15px; border-radius:16px; text-decoration:none;
  background:var(--t-bg,linear-gradient(135deg,#EFE5D1,#E2D2B6));
  box-shadow:0 10px 24px -16px rgba(80,50,20,.55); transition:transform .16s var(--d2-ease),box-shadow .2s; }
.dna2 .d2-stand:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -16px rgba(80,50,20,.6); }
.dna2 .d2-stand:focus-visible{ outline:2px solid var(--terra); outline-offset:2px; }
.dna2 .d2-stand-crest{ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:color-mix(in srgb,var(--t-text,#fff) 18%,transparent); color:var(--t-text,#fff); font-size:17px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent); }
.dna2 .d2-stand-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.dna2 .d2-stand-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.dna2 .d2-stand-label{ font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--t-text-soft,rgba(255,255,255,.72)); }
.dna2 .d2-stand-to{ font-size:11px; font-weight:800; color:var(--t-text-soft,rgba(255,255,255,.72)); white-space:nowrap; }
.dna2 .d2-stand-to b{ color:var(--t-text,#fff); }
.dna2 .d2-stand-name{ font-family:var(--d2-serif); font-weight:600; font-size:18px; line-height:1.05;
  color:var(--t-text,#fff); display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.dna2 .d2-stand-pts{ font-family:var(--d2-sans); font-size:11.5px; font-weight:700;
  color:var(--t-text-soft,rgba(255,255,255,.72)); }
.dna2 .d2-stand-bar{ height:5px; border-radius:999px; margin-top:2px;
  background:color-mix(in srgb,var(--t-text,#fff) 22%,transparent); overflow:hidden; }
.dna2 .d2-stand-bar i{ display:block; height:100%; border-radius:999px;
  background:var(--t-gold,var(--t-text,#fff)); transition:width .6s var(--d2-ease); }
.dna2 .d2-stand-chev{ flex:none; width:20px; height:20px; fill:none;
  stroke:var(--t-text-soft,rgba(255,255,255,.72)); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
/* the light New Diner card needs dark ink for legibility (its --t-text is dark already) */

/* hero — living taste fingerprint */
.dna2 .d2-hero{ text-align:center; padding:6px 0 2px; margin-top:28px; }
.dna2 .d2-kicker{ font-size:12.5px; font-weight:600; color:var(--terra); margin:2px 0 12px; }
.dna2 .d2-kicker span{ color:var(--t3); font-weight:500; }
.dna2 .d2-fp{ position:relative; width:262px; max-width:74vw; aspect-ratio:1; margin:0 auto; }
.dna2 .d2-fp svg{ display:block; width:100%; height:100%; overflow:visible; }
.dna2 .d2-fp-arc{ fill:none; stroke:#E4D6BB; stroke-width:6.5; stroke-linecap:round; }
.dna2 .d2-fp-arc.lit{ stroke:url(#d2warm); stroke-width:7; }
.dna2 .d2-fp-core{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:118px; height:118px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fff 0%,#FFFDF8 70%,#FBF4E6 100%);
  box-shadow:0 1px 0 #fff inset, 0 10px 26px -10px rgba(168,67,31,.42), 0 0 0 1px rgba(235,224,204,.9);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dna2 .d2-fp-num{ font-family:var(--d2-serif); font-weight:600; font-size:57px; line-height:.82; color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.dna2 .d2-fp-num .pct{ font-size:21px; font-weight:500; color:var(--terra); vertical-align:top; margin-left:1px; }
.dna2 .d2-fp-cap{ font-size:9.5px; font-weight:600; color:var(--t3); margin-top:5px; letter-spacing:.03em; }
/* Audit S6 — the ring frames a journey: the band EARNED under the number, the next
   named band as a small milestone line under the whorl. Framing only — same %. */
.dna2 .d2-fp-band{ font:700 10.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--terra); margin-top:6px; }
.dna2 .d2-fp-band:empty{ display:none; }
.dna2 .d2-fp-next{ text-align:center; font:500 11.5px/1.4 var(--sans); color:var(--t3); margin-top:10px; }
.dna2 .d2-fp-next b{ color:var(--t2); font-weight:600; }
/* Audit M4 — the Moments card rides the Highlights card chrome (.cx-hicard). */
.cx-moments .hl{ min-width:0; }
.dna2 .d2-arch{ margin-top:16px; }
.dna2 .d2-arch-label{ font-size:12px; color:var(--t3); font-weight:500; margin-bottom:4px; }
.dna2 .d2-arch h1{ font-family:var(--d2-serif); font-weight:500; font-size:31px; line-height:1.04; margin:0; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.dna2 .d2-arch h1 em{ font-style:italic; color:var(--terra-deep); font-weight:400; }
.dna2 .d2-headline{ font-family:var(--d2-serif); font-style:italic; font-weight:360; font-size:16.5px; line-height:1.42; color:var(--t2); max-width:300px; margin:11px auto 0; }
/* R20 — the three live passport sentences (palate / style / needs), grounded in real data. */
.dna2 .d2-blurbs{ margin:18px auto 0; max-width:340px; text-align:left; display:flex; flex-direction:column; gap:13px; }
.dna2 .d2-blurb-row{ position:relative; padding-left:14px; }
.dna2 .d2-blurb-row::before{ content:""; position:absolute; left:0; top:3px; bottom:3px; width:3px; border-radius:3px; background:linear-gradient(180deg, var(--terra), color-mix(in srgb, var(--terra) 40%, transparent)); }
.dna2 .d2-blurb-k{ display:block; font:700 10.5px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase; color:var(--terra-deep); margin-bottom:4px; }
.dna2 .d2-blurb-t{ margin:0; font:400 14.5px/1.5 var(--sans); color:var(--t2); letter-spacing:-.002em; }
.dna2 .d2-band{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; padding:7px 14px 7px 11px; border-radius:999px; background:#fff; border:1px solid var(--hair); box-shadow:0 4px 12px -8px rgba(35,21,13,.3); }
.dna2 .d2-band .dot{ width:7px; height:7px; border-radius:50%; background:var(--terra); box-shadow:0 0 0 3px rgba(194,80,47,.16); }
.dna2 .d2-band b{ font-size:13px; font-weight:600; color:var(--ink); }
.dna2 .d2-band span{ font-size:13px; color:var(--t2); }
/* The hero pill is now a "Continue sharpening" CTA (replaced the static band label). */
.dna2 .d2-band-cta{ cursor:pointer; border-color:color-mix(in srgb,var(--terra) 34%,var(--hair)); transition:transform .12s ease, box-shadow .12s ease; }
.dna2 .d2-band-cta b{ color:var(--terra); }
.dna2 .d2-band-cta svg{ width:13px; height:13px; stroke:var(--terra); fill:none; }
.dna2 .d2-band-cta:hover{ box-shadow:0 7px 18px -8px rgba(194,80,47,.55); }
.dna2 .d2-band-cta:active{ transform:scale(.97); }
.dna2 .d2-next{ display:flex; align-items:center; justify-content:center; gap:7px; margin:13px auto 0; font-size:12.5px; color:var(--t3); max-width:290px; line-height:1.4; }
.dna2 .d2-next svg{ width:13px; height:13px; stroke:var(--terra); fill:none; flex-shrink:0; }
/* Audit S1 — the nudge IS the quiz entry now (the page's ONE sharpen door), so it
   dresses like a button: pill chrome, a chevron, a press state. */
.dna2 .d2-next-btn{ cursor:pointer; font-family:inherit; background:#fff; border:1px solid color-mix(in srgb,var(--terra) 30%,var(--hair)); border-radius:999px; padding:10px 15px; max-width:330px; box-shadow:0 5px 14px -9px rgba(194,80,47,.5); text-align:left; transition:transform .12s ease, box-shadow .12s ease; }
.dna2 .d2-next-btn .d2-next-tx{ flex:1; min-width:0; color:var(--t2); font-weight:500; }
.dna2 .d2-next-btn .d2-next-go{ color:var(--terra); font-size:17px; font-weight:700; line-height:1; flex-shrink:0; }
.dna2 .d2-next-btn:hover{ box-shadow:0 8px 18px -9px rgba(194,80,47,.6); }
.dna2 .d2-next-btn:active{ transform:scale(.97); }
/* Audit B2 — the needs row is a real button (its copy asks the diner to act). */
.dna2 .d2-blurb-btn{ all:unset; cursor:pointer; display:block; position:relative; padding-left:14px; padding-right:22px; text-align:left; box-sizing:border-box; width:100%; }
.dna2 .d2-blurb-btn::before{ content:""; position:absolute; left:0; top:3px; bottom:3px; width:3px; border-radius:3px; background:linear-gradient(180deg, var(--terra), color-mix(in srgb, var(--terra) 40%, transparent)); }
.dna2 .d2-blurb-btn .d2-blurb-go{ position:absolute; right:2px; top:50%; transform:translateY(-50%); color:var(--terra); font-size:19px; font-weight:700; }
.dna2 .d2-blurb-btn:active{ opacity:.75; }
/* Audit M2 — the streak chip in the standing strip (weeks already computed server-side). */
.dna2 .d2-stand-streak{ font:700 10.5px/1 var(--sans); color:#B4531B; background:#FCEDD9; border:1px solid #F0D3AC; border-radius:999px; padding:4px 9px; white-space:nowrap; }
/* Audit S3 — the Taste-Off signpost from the taste home to the Journey tab's rankings. */
.dna2 .d2-ranks-tease{ all:unset; cursor:pointer; box-sizing:border-box; display:flex; align-items:center; gap:12px; width:100%; margin-top:26px; padding:14px 16px; border-radius:16px; background:#fff; border:1px solid var(--hair); box-shadow:0 4px 12px -8px rgba(35,21,13,.28); transition:transform .12s ease, box-shadow .12s ease; }
.dna2 .d2-ranks-tease:hover{ box-shadow:0 8px 18px -9px rgba(194,80,47,.45); }
.dna2 .d2-ranks-tease:active{ transform:scale(.98); }
.dna2 .d2-rt-ic{ flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:color-mix(in srgb,var(--terra) 10%,#fff); color:var(--terra); }
.dna2 .d2-rt-ic svg{ width:20px; height:20px; }
.dna2 .d2-rt-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dna2 .d2-rt-t{ font:600 14px/1.2 var(--sans); color:var(--ink); }
.dna2 .d2-rt-s{ font:400 12px/1.4 var(--sans); color:var(--t3); }
.dna2 .d2-rt-go{ flex:none; color:var(--terra); font-size:19px; font-weight:700; }

/* section heads */
.dna2 .d2-sec{ margin-top:34px; }
.dna2 .d2-sech{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:2px; }
.dna2 .d2-sech h2{ font-family:var(--d2-serif); font-weight:500; font-size:20px; margin:0; letter-spacing:-.02em; color:var(--ink); }
.dna2 .d2-sech .meta{ font-size:12px; color:var(--t3); font-weight:500; flex-shrink:0; }
.dna2 .d2-subh{ font-size:12.5px; color:var(--t3); margin:2px 0 16px; line-height:1.4; }

/* taste-spectrum CTA — a white box + terracotta button into the 4-bar popup */
.dna2 .d2-spec-cta{ border:1px solid var(--hair); border-radius:18px; background:var(--card); padding:22px 20px; text-align:center; margin-top:12px; }
.dna2 .d2-spec-cta-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--on-accent); font:700 14.5px/1 var(--sans); border:none; border-radius:999px; padding:14px 26px; cursor:pointer; box-shadow:0 6px 18px -8px color-mix(in srgb, var(--accent) 55%, transparent); transition:transform .15s ease, box-shadow .15s ease; }
.dna2 .d2-spec-cta-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -8px color-mix(in srgb, var(--accent) 62%, transparent); }
.dna2 .d2-spec-cta-btn:active{ transform:translateY(0); }

/* taste spectrum */
.dna2 .d2-spectrum{ display:flex; flex-direction:column; gap:16px; }
.dna2 .d2-ax-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.dna2 .d2-ax-nm{ font-size:13.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:7px; }
.dna2 .d2-hue{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dna2 .d2-ax-val{ font-family:var(--d2-serif); font-size:14px; font-weight:600; color:var(--t2); font-variant-numeric:tabular-nums; }
.dna2 .d2-track{ position:relative; height:7px; border-radius:6px; background:var(--hair-soft); box-shadow:inset 0 1px 2px rgba(35,21,13,.06); }
.dna2 .d2-fill{ position:absolute; top:0; bottom:0; left:0; border-radius:6px; transition:width .95s var(--d2-ease); }
.dna2 .d2-knob{ position:absolute; top:50%; width:15px; height:15px; border-radius:50%; transform:translate(-50%,-50%); background:#fff; box-shadow:0 1px 4px rgba(35,21,13,.3), 0 0 0 3px rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; transition:left .95s var(--d2-ease); }
.dna2 .d2-knob i{ width:6px; height:6px; border-radius:50%; }
.dna2 .d2-poles{ display:flex; justify-content:space-between; gap:10px; margin-top:6px; }
.dna2 .d2-poles span{ font-size:11px; color:var(--t3); }
.dna2 .d2-poles span.lit{ color:var(--t2); font-weight:600; }

/* gravitate / passes */
.dna2 .d2-gp{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.dna2 .d2-gp.one{ grid-template-columns:1fr; }
.dna2 .d2-gpc{ border:1px solid var(--hair); border-radius:18px; background:var(--card); padding:14px; }
.dna2 .d2-gph{ display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.dna2 .d2-gph svg{ width:15px; height:15px; flex-shrink:0; fill:none; }
.dna2 .d2-gph b{ font-size:12.5px; font-weight:600; color:var(--ink); }
.dna2 .d2-chip{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--t2); padding:5px 0; font-weight:500; }
.dna2 .d2-chip + .d2-chip{ border-top:1px solid var(--hair-soft); }
.dna2 .d2-pip{ width:6px; height:6px; border-radius:2px; flex-shrink:0; }
.dna2 .d2-chip.pass .d2-pip{ background:var(--t3); border-radius:50%; }

/* clusters (sharpen your fingerprint) */
.dna2 .d2-clusters{ display:flex; flex-direction:column; gap:10px; }
.dna2 .d2-cluster{ display:flex; align-items:center; gap:14px; padding:13px 16px; border:1px solid var(--hair); border-radius:18px; background:var(--card); cursor:pointer; text-align:left; width:100%; font-family:inherit; transition:transform .18s var(--d2-ease), box-shadow .18s var(--d2-ease), border-color .18s; }
.dna2 .d2-cluster:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -16px rgba(35,21,13,.4); border-color:#E0D2B6; }
.dna2 .d2-cluster.is-static{ cursor:default; }
.dna2 .d2-cluster.is-static:hover{ transform:none; box-shadow:none; border-color:var(--hair); }
.dna2 .d2-clr{ position:relative; width:42px; height:42px; flex-shrink:0; }
.dna2 .d2-clr svg{ transform:rotate(-90deg); display:block; }
.dna2 .d2-clr .frac{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--d2-serif); font-size:12.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.dna2 .d2-clb{ flex:1; min-width:0; }
.dna2 .d2-clb .t{ font-size:14px; font-weight:600; color:var(--ink); display:block; }
.dna2 .d2-clb .s{ font-size:12px; color:var(--t3); margin-top:1px; display:block; }
.dna2 .d2-clb .s b{ color:var(--terra); font-weight:600; }
.dna2 .d2-clar{ width:16px; height:16px; stroke:var(--t3); fill:none; flex-shrink:0; }
/* Editorial uplift — soft hue medallion (no number badge) + serif cluster name */
.dna2 .d2-cluster{ padding:15px 17px; gap:15px; }
.dna2 .d2-medal{ width:46px; height:46px; flex-shrink:0; border-radius:14px; display:grid; place-items:center; color:var(--terra); background:color-mix(in srgb, currentColor 12%, transparent); }
.dna2 .d2-medal .d2-medal-ic{ width:23px; height:23px; display:block; color:currentColor; }
.dna2 .d2-medal .d2-medal-ic svg{ width:100%; height:100%; stroke:currentColor; fill:none; }
.dna2 .d2-cluster .d2-clb .t{ font-family:var(--serif); font-size:18px; font-weight:400; letter-spacing:-.01em; line-height:1.12; color:var(--ink); }
.dna2 .d2-cluster .d2-clb .s{ font-size:13px; font-weight:500; color:var(--t3); margin-top:4px; line-height:1.45; }

/* dimension grid */
.dna2 .d2-dimgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.dna2 .d2-dim{ position:relative; border:1px solid var(--hair); border-radius:16px; background:var(--card); padding:12px 10px 11px; cursor:pointer; overflow:hidden; text-align:left; font-family:inherit; display:flex; flex-direction:column; align-items:flex-start; min-height:96px; transition:transform .18s var(--d2-ease), box-shadow .18s var(--d2-ease), border-color .18s; }
.dna2 .d2-dim:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -18px rgba(35,21,13,.5); border-color:#E0D2B6; }
.dna2 .d2-dim .glyph{ width:50px; height:50px; border-radius:14px; margin:0 0 auto; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(150deg,#FBF1E0,#F4E5D2); }
.dna2 .d2-dim.done .glyph{ background:linear-gradient(150deg,#F7E7CF,#EFD9BC); }   /* locked-in chips glow a touch warmer */
.dna2 .d2-dim .glyph img{ width:100%; height:100%; object-fit:cover; display:block; }   /* real food photo fills the square */
.dna2 .d2-dim.todo .glyph{ opacity:.82; filter:saturate(.72); }   /* "still learning" dims read a touch softer */
.dna2 .d2-dim .glyph svg{ width:22px; height:22px; fill:none; stroke:#9A8B6A; }
.dna2 .d2-dim.done .glyph svg{ stroke:var(--terra-deep); }
.dna2 .d2-dim .nm{ font-size:12.5px; font-weight:600; color:var(--ink); margin-top:11px; line-height:1.1; }
.dna2 .d2-dim .st{ font-size:10.5px; margin-top:3px; font-weight:500; display:flex; align-items:center; gap:4px; }
.dna2 .d2-dim .st .sd{ width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.dna2 .d2-dim .st.locked{ color:var(--h-share); } .dna2 .d2-dim .st.locked .sd{ background:var(--h-share); }
.dna2 .d2-dim .st.learning{ color:var(--terra); } .dna2 .d2-dim .st.learning .sd{ background:var(--terra); }
.dna2 .d2-dim .corner{ position:absolute; top:9px; right:9px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dna2 .d2-dim.done .corner{ background:var(--terra); }
.dna2 .d2-dim.done .corner svg{ width:9px; height:9px; stroke:#fff; stroke-width:3; fill:none; }
.dna2 .d2-dim.todo .corner{ border:1.5px dashed var(--hair); }

/* skeleton for the async sharpen section */
.dna2 .d2-sk-cluster{ height:68px; border-radius:18px; background:var(--hair-soft); margin-bottom:10px; animation:d2pulse 1.3s infinite; }
.dna2 .d2-sk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.dna2 .d2-sk-tile{ min-height:96px; border-radius:16px; background:var(--hair-soft); animation:d2pulse 1.3s infinite; }
@keyframes d2pulse{ 0%,100%{opacity:1} 50%{opacity:.5} }

/* lifestyle */
.dna2 .d2-life{ border:1px solid var(--hair); border-radius:20px; background:var(--card); overflow:hidden; }
.dna2 .d2-life-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; }
.dna2 .d2-life-row + .d2-life-row{ border-top:1px solid var(--hair-soft); }
.dna2 .d2-life-ic{ width:36px; height:36px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#FBF1E0,#F6E8D2); color:var(--terra-deep); }
.dna2 .d2-life-ic svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
.dna2 .d2-life-tx{ flex:1; min-width:0; }
.dna2 .d2-life-tx .a{ font-size:12px; color:var(--t3); font-weight:500; }
.dna2 .d2-life-tx .a .sup{ font-variant-numeric:tabular-nums; }
.dna2 .d2-life-tx .b{ font-size:14px; color:var(--ink); font-weight:600; margin-top:1px; }
.dna2 .d2-life-tx .b em{ font-style:italic; font-family:var(--d2-serif); font-weight:500; color:var(--terra-deep); }
.dna2 .d2-life-tag{ font-family:var(--d2-serif); font-size:13px; font-weight:600; color:var(--t2); padding:3px 10px; border-radius:999px; background:#FBF4E6; border:1px solid var(--hair); flex-shrink:0; white-space:nowrap; }
.dna2 .d2-life-empty{ font-family:var(--d2-serif); font-style:italic; font-weight:500; font-size:13.5px; color:var(--t3); margin:0; padding:16px; line-height:1.5; }
.dna2 .d2-life{ margin-top:12px; }
.dna2 .go-tiles:first-child{ margin-top:0; }

/* ── "How you go out" — the DESCRIPTIVE half (counts, not claims). Same card
      language as .d2-life above so the section reads as one object.
      ONE vertical rhythm (12px chart → tiles → rows → stats; founder 2026-07-26
      "fix spacing" — the old clock-era `+` override glued the tiles to the chart),
      and one shared elevation so the cards sit ON the page instead of drawn on it. */
.dna2 .go-when, .dna2 .go-tile, .dna2 .d2-life, .dna2 .d2-stats{
  box-shadow: 0 1px 2px rgba(42,32,24,.04), 0 14px 30px -24px rgba(42,32,24,.22);
}
.dna2 .go-when{ border:1px solid var(--hair); border-radius:20px; background:var(--card); padding:15px 15px 13px; }
.dna2 .go-when-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
.dna2 .go-when-h > span:first-child{ font-size:12px; font-weight:600; color:var(--t3); letter-spacing:.04em; text-transform:uppercase; }
.dna2 .go-when-n{ font-family:var(--d2-serif); font-style:italic; font-size:12.5px; color:var(--t3); font-variant-numeric:tabular-nums; }
/* stretch (not end): on a narrow phone "Late night" wraps to two lines, and aligning
   columns by their BOTTOM would push that bar off the shared baseline — the one thing
   a bar chart may never do. Stretch keeps every fixed-height track top-aligned and lets
   the taller label hang below. */
.dna2 .go-bars{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; align-items:stretch; }
.dna2 .go-bar{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:5px; min-width:0; }
/* Fixed-height track so the five bars share one baseline and one ceiling — a bar
   chart that rescales its own frame per column isn't comparable. */
.dna2 .go-bar-track{ width:100%; height:64px; border-radius:9px; background:#FBF4E6; display:flex; align-items:flex-end; overflow:hidden; }
.dna2 .go-bar-track > i{ display:block; width:100%; border-radius:9px; background:linear-gradient(180deg,var(--terra),var(--terra-deep)); transition:height .5s var(--d2-ease,cubic-bezier(.22,1,.36,1)); }
.dna2 .go-bar.is-top .go-bar-track > i{ box-shadow:0 0 0 1.5px color-mix(in srgb, var(--terra) 35%, transparent) inset; }
.dna2 .go-bar-n{ font-family:var(--d2-serif); font-size:16px; font-weight:600; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
/* the busiest daypart's count carries the accent — the eye lands where the story is */
.dna2 .go-bar.is-top .go-bar-n{ color:var(--terra-deep); font-size:17px; }
.dna2 .go-bar.is-top .go-bar-l{ color:var(--terra-deep); font-weight:600; }
.dna2 .go-bar-l{ font-size:9.5px; color:var(--t3); text-align:center; line-height:1.15; letter-spacing:.01em; }
/* A zero is information ("you never do breakfast") — keep it, just quiet it. */
.dna2 .go-bar.is-zero .go-bar-n{ color:var(--t3); font-weight:500; }
.dna2 .go-bar.is-zero .go-bar-track{ background:#F7F1E6; }

/* (The table-time clock ribbon lived here — deleted with its feature, founder 2026-07-26.) */

.dna2 .go-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
/* A lone trailing tile spans the row instead of orphaning half-empty beside a gap. */
.dna2 .go-tiles > .go-tile:last-child:nth-child(odd){ grid-column:1 / -1; }
.dna2 .go-tile{
  border:1px solid var(--hair); border-radius:20px; background:var(--card); padding:15px 16px 13px; min-width:0;
  position:relative; overflow:hidden;
}
/* a whisper of warmth in the corner — lifts the tile off flat cream without a hue shift */
.dna2 .go-tile::before{
  content:""; position:absolute; right:-30px; top:-30px; width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--terra) 7%, transparent), transparent 70%);
  pointer-events:none;
}
.dna2 .go-tile-v{ font-family:var(--d2-serif); font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* A venue name is prose, not a figure — it wraps and drops out of tabular-nums. */
.dna2 .go-tile-v .go-tile-name{ font-size:16px; white-space:normal; display:block; line-height:1.25; }
.dna2 .go-tile-v .go-cur{ font-size:12px; font-weight:600; color:var(--t3); margin-right:3px; letter-spacing:.02em; }
.dna2 .go-tile-s{ font-size:11px; color:var(--t3); margin-top:3px; font-variant-numeric:tabular-nums; }
/* the tile's label speaks the same micro-caps voice as the WHEN YOU EAT header */
.dna2 .go-tile-l{ font-size:10px; color:var(--terra-deep); font-weight:700; margin-top:7px; letter-spacing:.08em; text-transform:uppercase; }
@media (prefers-reduced-motion: reduce){ .dna2 .go-bar-track > i{ transition:none; } }

/* stats strip */
.dna2 .d2-stats{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:12px; border:1px solid var(--hair); border-radius:20px; background:var(--card); overflow:hidden; }
.dna2 .d2-stat{ padding:15px 6px; text-align:center; position:relative; }
.dna2 .d2-stat + .d2-stat::before{ content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--hair-soft); }
.dna2 .d2-stat .n{ font-family:var(--d2-serif); font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.dna2 .d2-stat .l{ font-size:10.5px; color:var(--t3); margin-top:5px; font-weight:500; line-height:1.15; }

/* rating queue — app-width, centered (the fal shell is 620px; a full-width card flung
   the dots to the edges and read as huge). Clear gap below the spectrum button too. */
.dna2 .d2-rate{ max-width:400px; margin:42px auto 0; }
/* a little breathing room under the spectrum button in the identity section, too */
.dna2 .d2-identity{ padding-bottom:6px; }

/* share */
.dna2 .d2-share{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:28px; padding:16px; border-radius:18px; cursor:pointer; background:linear-gradient(180deg,var(--terra),var(--terra-deep)); color:#fff; font-family:inherit; font-size:15px; font-weight:600; border:none; box-shadow:0 12px 26px -12px rgba(168,67,31,.7), 0 1px 0 rgba(255,255,255,.25) inset; transition:transform .18s var(--d2-ease), box-shadow .18s var(--d2-ease); }
.dna2 .d2-share:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(168,67,31,.78), 0 1px 0 rgba(255,255,255,.25) inset; }
.dna2 .d2-share svg{ width:18px; height:18px; stroke:#fff; fill:none; }
.dna2 .d2-share-note{ text-align:center; font-size:11.5px; color:var(--t3); margin:11px 0 0; }

/* taste-identity section (its own thing, separate from the fingerprint) + the spectrum button */
.dna2 .d2-identity{ text-align:center; margin-top:30px; }
.dna2 .d2-identity .d2-arch{ margin-top:0; }
.dna2 .d2-spec-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:11px 20px; border-radius:999px; border:1px solid var(--hair); background:#fff; color:var(--terra-deep); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 4px 14px -8px rgba(35,21,13,.3); transition:transform .18s var(--d2-ease), box-shadow .18s var(--d2-ease), border-color .18s; }
.dna2 .d2-spec-btn:hover{ transform:translateY(-1px); border-color:#E0D2B6; box-shadow:0 10px 22px -12px rgba(35,21,13,.4); }
.dna2 .d2-spec-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; }

/* spectrum popup — TRANSIENT (created on open, removed on close). The documented
   backdrop-filter freeze was an IDLE/persistent full-screen blur; this never lingers. */
.d2-spec-ov{ position:fixed; inset:0; z-index:5200; display:flex; align-items:center; justify-content:center; padding:22px; background:color-mix(in srgb,#1a1008 44%,transparent); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); opacity:0; transition:opacity .26s ease; }
.d2-spec-ov.open{ opacity:1; }
.d2-spec-ov > .dna2{ width:100%; max-width:440px; }
.dna2 .d2-spec-card{ width:100%; max-height:84vh; overflow-y:auto; background:var(--card); border:1px solid var(--hair); border-radius:24px; box-shadow:0 30px 70px -24px rgba(35,21,13,.55); padding:20px 20px max(20px,env(safe-area-inset-bottom)); transform:scale(.94) translateY(10px); transition:transform .3s var(--d2-ease); }
.d2-spec-ov.open .d2-spec-card{ transform:none; }
.dna2 .d2-spec-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.dna2 .d2-spec-eyebrow{ font-family:var(--d2-serif); font-weight:500; font-size:19px; color:var(--ink); letter-spacing:-.01em; }
.dna2 .d2-spec-x{ all:unset; cursor:pointer; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--t2); transition:background .18s; }
.dna2 .d2-spec-x:hover{ background:var(--hair-soft); }
.dna2 .d2-spec-x svg{ width:17px; height:17px; }
.dna2 .d2-spec-lead{ font-size:12.5px; line-height:1.5; color:var(--t3); margin:0 0 16px; }
.dna2 .d2-spec-rib{ height:13px; border-radius:999px; overflow:hidden; margin-bottom:20px; box-shadow:inset 0 1px 2px rgba(35,21,13,.12); }
.dna2 .d2-spec-rib span{ display:block; height:100%; }
/* Discreet inline entry to the explained taste-currents popup (NOT the removed
   "Your taste spectrum" box — a quiet text link under the identity blurbs). */
.d2-spec-link{ display:inline-flex; align-items:center; gap:5px; margin:14px 0 0; padding:0;
  background:none; border:0; cursor:pointer; font:600 12.5px/1.4 var(--sans);
  color:var(--accent); letter-spacing:.01em; }
.d2-spec-link:hover{ color:var(--accent-press, var(--accent)); text-decoration:underline; }
.d2-spec-link span{ font-size:16px; line-height:1; }
.dna2 .d2-spec-bars{ display:flex; flex-direction:column; gap:18px; }
.dna2 .d2-specrow{ display:flex; flex-direction:column; gap:7px; }
.dna2 .d2-specgloss{ margin:0; padding-left:94px; font-size:11.5px; line-height:1.5; color:var(--t3); }
@media (max-width:420px){ .dna2 .d2-specgloss{ padding-left:0; } }
/* Spectrum redesign (Jul '26): archetype crown + receipts + the earned badge shelf */
.dna2 .d2-spec-arch{ background:linear-gradient(135deg,#2A1E13,#3A2A1A); color:#FBF7F1; border-radius:16px; padding:14px 16px; margin:0 0 14px; }
.dna2 .d2-spec-archname{ font-family:var(--serif,'DM Serif Display',Georgia,serif); font-size:21px; }
.dna2 .d2-spec-tent{ font:700 9.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:#F0A982; border:1px solid rgba(240,169,130,.45); border-radius:999px; padding:4px 8px; margin-left:9px; vertical-align:middle; }
.dna2 .d2-spec-arch p{ margin:5px 0 0; font:500 12.5px/1.5 var(--sans); color:rgba(251,247,241,.82); }
.dna2 .d2-spec-receipt{ color:var(--accent-deep,#9A3D20); font-weight:600; }
.dna2 .d2-spec-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.dna2 .d2-spec-badge{ display:flex; flex-direction:column; gap:2px; border:1px solid var(--line,#ECE2D4); border-radius:14px; padding:8px 12px; font:700 12.5px/1.2 var(--sans); background:var(--surface,#fff); }
.dna2 .d2-spec-badge i{ font:500 10.5px/1.35 var(--sans); font-style:normal; color:var(--fg2,#7A6A5D); }
.dna2 .d2-specbar{ display:grid; grid-template-columns:82px 1fr auto; align-items:center; gap:12px; }
.dna2 .d2-specbar .k{ font-size:13.5px; font-weight:600; color:var(--ink); }
.dna2 .d2-specbar .trk{ position:relative; height:8px; border-radius:999px; background:var(--hair-soft); overflow:hidden; box-shadow:inset 0 1px 2px rgba(35,21,13,.06); }
.dna2 .d2-specbar .fil{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px; transition:width .9s var(--d2-ease); }
.dna2 .d2-specbar .rd{ font-family:var(--d2-serif); font-style:italic; font-size:13px; color:var(--t2); white-space:nowrap; }
.dna2 .d2-spec-card .d2-gp{ margin-top:20px; }

/* ── Alignment harmonisation (founder: "fix the alignment") ─────────────────────
   The hero + identity are centred; centre the lower section headers too so the whole
   page shares ONE axis (cards/grids below stay full-width). */
.dna2 .d2-sec > .d2-sech{ justify-content:center; text-align:center; }
.dna2 .d2-sec > .d2-sech .meta{ display:none; }   /* the count also lives in the stat strip */
.dna2 .d2-sec > .d2-subh{ text-align:center; max-width:300px; margin-left:auto; margin-right:auto; }
/* keep the momentum line a real pill that hugs its text, never full-bleed */
body.fal-on .pp4 .pq-momentum{ align-self:flex-start; max-width:max-content; line-height:1.35; }
/* de-cap the cuisine label in the rating card (house rule: no all-caps tracked labels) */
body.fal-on .pp4 .pq-cuisine{ text-transform:none; letter-spacing:0; font-weight:600; font-size:12.5px; }
/* balance a completed cluster row with a quiet right-anchored check (no dead gutter) */
.dna2 .d2-cluster.is-static{ position:relative; }
.dna2 .d2-cluster.is-static::after{ content:""; width:18px; height:18px; flex-shrink:0; border-radius:50%; background:var(--h-share) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }

@media (prefers-reduced-motion:reduce){ .dna2 *{ transition:none !important; animation:none !important; } .d2-spec-ov, .dna2 .d2-spec-card{ transition:none !important; } }

/* ════════════════════════════════════════════════════════════════════════════
   MY FOOD tab — "the editorial food diary" (2026-06-18). A magazine-style food
   journal: masthead, ruled add-photo prompts, restaurant sections each opening with
   a feature photo + a grid, editorial captions. The diner's REAL photos are the hero.
   Scoped under .mf so it can't bleed; the lightbox (body-appended) is .mf-lb.
   ════════════════════════════════════════════════════════════════════════════ */
.mf{
  --terra:#C2502F; --terra-deep:#A8431F; --porcelain:#FFFDF8;
  --ink:#23150D; --t2:#6E6256; --t3:#9A9085; --hair:#EBE0CC; --hair-soft:#F0E8D8;
  --star:#C2502F; --star-off:#DDD2C0;
  --mf-serif:'Fraunces',Georgia,serif; --mf-sans:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;
  --mf-shadow-soft:0 1px 2px rgba(60,40,20,.03), 0 8px 22px -18px rgba(80,50,25,.22);
  font-family:var(--mf-sans); color:var(--ink);
}
.mf *{ box-sizing:border-box; }
/* BUG D — Recent visits tab (owner's dated dining history, grouped chronologically). */
.pv .pv-mast{ padding:2px 2px 0; margin-bottom:16px; }
.pv .pv-kicker{ display:flex; align-items:center; gap:10px; color:var(--terra); font-size:12.5px; font-weight:500; font-style:italic; font-family:var(--mf-serif,var(--serif)); margin-bottom:7px; }
.pv .pv-kicker .ln{ height:1px; width:26px; background:var(--terra); opacity:.5; }
.pv .pv-title{ font-family:var(--mf-serif,var(--serif)); font-weight:400; font-size:33px; line-height:.98; letter-spacing:-.5px; margin:0; color:var(--ink); }
.pv .pv-title em{ font-style:italic; font-weight:300; color:var(--terra-deep,var(--accent-deep)); }
.pv .pv-standfirst{ margin:13px 0 0; color:var(--t2,var(--text-2)); font-size:14.5px; line-height:1.5; max-width:330px; }
.pv .pv-group{ margin:0 0 22px; }
.pv .pv-group-h{ font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin:0 0 8px; }
.pv .pv-row{ display:flex; align-items:center; gap:12px; text-decoration:none; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 1px 3px rgba(46,42,38,.06); margin-bottom:8px; transition:transform .16s var(--ease-out,ease), box-shadow .16s; }
.pv a.pv-row:active{ transform:scale(.99); }
.pv .pv-row-flat{ cursor:default; }
.pv .pv-row-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pv .pv-place{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--text); line-height:1.25; }
.pv .pv-meta{ font-family:var(--sans); font-size:12px; color:var(--text-3); text-transform:capitalize; }
.pv .pv-dish{ font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--text-2); margin-top:2px; }
.pv .pv-cuisine{ text-transform:capitalize; }
.pv .pv-chev{ width:18px; height:18px; flex:none; color:var(--text-3); }
.pv .pv-row-flat .pv-chev{ display:none; }
.pv .pv-empty{ text-align:center; padding:40px 16px; color:var(--text-2); }
.pv .pv-empty p{ margin:0 0 16px; font-size:14.5px; }
.mf .mf-mast{ padding:2px 2px 0; }
.mf .mf-kicker{ display:flex; align-items:center; gap:10px; color:var(--terra); font-size:12.5px; font-weight:500; font-style:italic; font-family:var(--mf-serif); margin-bottom:7px; }
.mf .mf-kicker .ln{ height:1px; width:26px; background:var(--terra); opacity:.5; }
.mf .mf-title{ font-family:var(--mf-serif); font-weight:400; font-size:33px; line-height:.98; letter-spacing:-.5px; margin:0; color:var(--ink); }
.mf .mf-title em{ font-style:italic; font-weight:300; color:var(--terra-deep); }
.mf .mf-standfirst{ margin:13px 0 0; color:var(--t2); font-size:14.5px; line-height:1.5; max-width:330px; }
/* Audit M1 — GREATEST HITS: the loved dishes (4★+), the shelf the Passport never had.
   Photo tiles carry the shot; photo-less tiles invite the camera. Horizontal scroll,
   snap per card, no page-level overflow. */
.mf .mf-hits{ margin:18px 0 6px; }
.mf .mf-hits-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.mf .mf-hits-h h2{ font-family:var(--mf-serif); font-weight:400; font-size:22px; letter-spacing:-.02em; color:var(--ink); margin:0; }
.mf .mf-hits-h h2 em{ color:var(--terra); font-style:italic; }
.mf .mf-hits-n{ font:500 11.5px/1 var(--sans); color:var(--t3); white-space:nowrap; }
.mf .mf-hits-row{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 8px; margin:0 -2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.mf .mf-hits-row::-webkit-scrollbar{ display:none; }
.mf .mf-hit{ all:unset; cursor:pointer; position:relative; flex:0 0 150px; height:190px; border-radius:16px; overflow:hidden; scroll-snap-align:start; background-color:#2A2018; background-size:cover; background-position:center; box-shadow:0 6px 16px -9px rgba(35,21,13,.5); isolation:isolate; }
.mf .mf-hit::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,12,8,.06) 40%, rgba(20,12,8,.78) 100%); z-index:1; }
.mf .mf-hit-tx{ position:absolute; left:11px; right:11px; bottom:10px; z-index:2; display:flex; flex-direction:column; gap:2px; }
.mf .mf-hit-tx b{ font:600 13px/1.25 var(--sans); color:#fff; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mf .mf-hit-tx span{ font:400 11px/1.3 var(--sans); color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mf .mf-hit-r{ position:absolute; top:9px; left:9px; z-index:2; font:700 11px/1 var(--sans); color:#3A2A16; background:#F5C86A; border-radius:999px; padding:5px 8px; box-shadow:0 2px 6px rgba(20,12,8,.35); }
.mf .mf-hit-bare{ background-image:radial-gradient(120% 90% at 20% 0%, #6B4A33 0%, #4A3123 52%, #332117 100%), linear-gradient(160deg,#5C3E2C,#2A2018); }
.mf .mf-hit-add{ position:absolute; left:11px; bottom:44px; z-index:2; display:inline-flex; align-items:center; gap:5px; font:600 10.5px/1 var(--sans); color:#fff; background:rgba(194,80,47,.92); border-radius:999px; padding:6px 10px; }
.mf .mf-hit-add svg{ width:12px; height:12px; }
.mf .mf-hit:active{ transform:scale(.98); }
/* Audit M3 — "Dining since" on the hero (was only on the share card + stamp book). */
.passport .pp-since{ margin:2px 0 0; font:500 12.5px/1.3 var(--sans); color:var(--t3); letter-spacing:.01em; }
.mf .mf-standfirst b{ color:var(--ink); font-weight:600; }
.mf .mf-search{ margin:20px 0 4px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--hair); padding:0 2px 11px; }
.mf .mf-search svg{ color:var(--t3); flex:none; width:17px; height:17px; fill:none; stroke:currentColor; }
.mf .mf-search input{ border:0; background:transparent; outline:none; font-family:var(--mf-sans); font-size:15px; color:var(--ink); width:100%; }
.mf .mf-search input::placeholder{ color:var(--t3); }
.mf .mf-search-clear{ all:unset; cursor:pointer; color:var(--t3); font-size:18px; padding:0 4px; }
/* ── Capture bar (flow split, Jul '26): ONE calm row replaces the old per-dish
   "Show it off" card stack. Capture is private; publishing lives in Community. ── */
.mf .mf-capture{ display:flex; align-items:center; gap:13px; margin:20px 0 8px; padding:13px 14px; border:1px solid var(--hair-soft); border-radius:16px; background:rgba(194,80,47,.03); }
.mf .mf-cam{ width:42px; height:42px; border-radius:12px; flex:none; border:1px dashed var(--terra); color:var(--terra); display:flex; align-items:center; justify-content:center; background:rgba(194,80,47,.045); }
.mf .mf-cam svg{ width:20px; height:20px; fill:none; stroke:currentColor; }
.mf .mf-capture-tx{ flex:1; min-width:0; }
.mf .mf-capture-t{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.mf .mf-capture-s{ display:block; font-size:12px; color:var(--t3); line-height:1.45; margin-top:2px; }
.mf .mf-add{ font-family:var(--mf-sans); font-size:13px; font-weight:600; color:#fff; background:var(--terra); border:0; border-radius:999px; padding:8px 15px; cursor:pointer; transition:background .2s, transform .15s; white-space:nowrap; flex:none; }
.mf .mf-add:hover{ background:var(--terra-deep); } .mf .mf-add:active{ transform:scale(.96); }
/* The pending-dish sheet behind the bar. */
.mfcs-sheet{ position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:min(440px,100%); max-height:72vh; overflow:auto; background:var(--surface,#fff); border-radius:20px 20px 0 0; padding:22px 18px max(18px,env(safe-area-inset-bottom)); z-index:1201; box-shadow:0 -8px 30px rgba(0,0,0,0.18); }
.mfcs-h{ font:700 18px/1.3 var(--serif,serif); color:var(--fg1,#2E2A26); margin:0 0 4px; }
.mfcs-n{ font:500 12.5px/1.45 var(--sans,sans-serif); color:var(--fg3,#9A8F78); margin:0 0 12px; }
.mfcs-row{ display:flex; align-items:center; gap:6px; border-top:1px solid var(--line,#EFE7DF); }
.mfcs-row:first-child{ border-top:0; }
.mfcs-pick{ flex:1; min-width:0; display:block; text-align:left; background:none; border:0; padding:12px 2px; cursor:pointer; }
.mfcs-dish{ display:flex; align-items:center; gap:8px; font:600 15px/1.25 var(--sans,sans-serif); color:var(--fg1,#2E2A26); }
.mfcs-loved{ flex:none; font:700 9.5px/1 var(--sans,sans-serif); letter-spacing:.08em; text-transform:uppercase; color:var(--accent,#C2502F); background:color-mix(in srgb, var(--accent,#C2502F) 10%, transparent); border-radius:999px; padding:4px 8px; }
.mfcs-sub{ display:flex; align-items:center; gap:8px; margin-top:3px; font:500 12.5px/1.3 var(--sans,sans-serif); color:var(--fg3,#9A8F78); }
.mfcs-skip{ flex:none; background:none; border:0; font-size:14px; color:var(--fg3,#9A8F78); padding:10px; cursor:pointer; }
.mfcs-skip:hover{ color:var(--fg1,#2E2A26); }
/* The one-tap way out for a diner who doesn't photograph their food. Deliberately
   quiet — it's an escape hatch, not a competing call to action, so it never outshines
   the dish rows above it. Sticky to the sheet's floor so it's reachable without
   scrolling past a long list (the whole point: not tapping ✕ 74 times). */
.mfcs-foot{
  position:sticky; bottom:calc(-1 * max(18px, env(safe-area-inset-bottom)));
  margin:6px -18px calc(-1 * max(18px, env(safe-area-inset-bottom)));
  padding:12px 18px max(18px, env(safe-area-inset-bottom));
  background:var(--surface,#fff); border-top:1px solid var(--hair-soft,#F0E7D8);
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
}
.mfcs-none{
  width:100%; border:1px solid var(--hair,#E8DDCF); background:transparent;
  color:var(--fg2,#6B584A); font:600 13.5px/1 var(--sans,sans-serif);
  padding:12px 14px; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mfcs-none:hover{ border-color:var(--accent,#C2502F); color:var(--accent,#C2502F); }
.mfcs-none:active{ transform:scale(0.98); }
.mfcs-foot-n{ font:500 11.5px/1.35 var(--sans,sans-serif); color:var(--fg3,#9A8F78); }
/* The muted capture bar (quiet mode): the door without the doorbell. */
.mf .mf-capture-quiet{ background:transparent; border-style:dashed; }
.mf .mf-capture-quiet .mf-capture-t{ font-weight:500; color:var(--fg2,#6B584A); }
.mf .mf-add-quiet{ background:transparent; border:1px solid var(--hair,#E8DDCF); color:var(--fg2,#6B584A); }
.mf .mf-add-quiet:hover{ border-color:var(--accent,#C2502F); color:var(--accent,#C2502F); }
/* The sheet mounts on <body>, outside .mf — scope the stars here too, or they
   render as raw unsized SVGs (the shipped giant-black-SVG lesson). */
.mfcs-sub .mf-stars{ display:inline-flex; gap:1.5px; flex:none; vertical-align:middle; }
.mfcs-sub .mf-stars svg{ width:13px; height:13px; display:block; }

/* ── Photo tags — "we ate together, use my photo" ── */
.mf .mf-th-tag{ font-size:12px; display:grid; place-items:center; }           /* corner credit mark on a friend's photo */
.mf-tagrow-th{ flex:none; width:52px; height:52px; border-radius:12px; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(44,32,23,.1); }
.mf-tag-acc{ flex:none; font:700 12.5px/1 var(--sans,sans-serif); color:#fff; background:var(--accent,#C2502F); border:0; border-radius:999px; padding:9px 14px; cursor:pointer; }
.mf-tag-acc:disabled{ opacity:.5; }
.lb-tagbtn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px; font:600 13px/1 var(--sans,sans-serif); color:var(--accent,#C2502F); background:none; border:1.5px solid color-mix(in srgb,var(--accent,#C2502F) 40%,transparent); border-radius:999px; padding:12px; cursor:pointer; }
.lb-tagbtn:hover{ background:color-mix(in srgb,var(--accent,#C2502F) 7%,transparent); }
.lb-tag-remove{ color:var(--fg3,#9A8F78); border-color:var(--line,#EFE7DF); }
.mf-tagpick-on{ flex:none; font:700 15px/1 var(--sans,sans-serif); color:var(--accent,#C2502F); padding:0 10px; }
.mf-tag-send{ width:100%; margin-top:10px; font:700 13.5px/1 var(--sans,sans-serif); color:#fff; background:var(--accent,#C2502F); border:0; border-radius:999px; padding:13px; cursor:pointer; }
.mf-tag-send:disabled{ opacity:.45; cursor:default; }

/* ── "Add a past meal" — photo-first retro-rating ── */
.mf .mf-past, .mf-past{ display:flex; align-items:center; gap:8px; width:100%; margin:10px 0 4px; padding:12px 14px; font:600 13px/1.4 var(--mf-sans,sans-serif); color:var(--terra,#C2502F); background:none; border:1.5px dashed color-mix(in srgb, var(--terra,#C2502F) 38%, transparent); border-radius:14px; cursor:pointer; text-align:left; }
.mf .mf-past:hover, .mf-past:hover{ background:rgba(194,80,47,.05); }
.mf-past i{ flex:none; font-size:17px; }
.mf-past-s{ font-weight:500; color:var(--t3,#9A9085); }
.mfp-step{ margin-top:4px; }
.mfp-src{ display:flex; align-items:center; gap:10px; width:100%; margin-bottom:9px; padding:13px 14px; font:600 14px/1.2 var(--sans,sans-serif); color:var(--fg1,#2E2A26); background:none; border:1px solid var(--line,#EFE7DF); border-radius:14px; cursor:pointer; }
.mfp-src i{ color:var(--accent,#C2502F); font-size:18px; }
.mfp-src:hover{ border-color:var(--accent,#C2502F); }
.mfp-prev{ width:88px; height:88px; border-radius:14px; overflow:hidden; margin-bottom:10px; box-shadow:inset 0 0 0 1px rgba(44,32,23,.1); }
.mfp-when-l{ display:block; margin-bottom:10px; font:600 12.5px/1.4 var(--sans,sans-serif); color:var(--fg2,#6B5E4E); }
.mfp-when-l input{ margin-top:5px; }
.mfp-prev img{ width:100%; height:100%; object-fit:cover; display:block; }
.mfp-venues{ margin:-3px 0 8px; }
.mfp-venue{ display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line,#EFE7DF); padding:10px 4px; cursor:pointer; }
.mfp-venue:last-child{ border-bottom:0; }
.mfp-venue b{ display:block; font:600 14.5px/1.25 var(--sans,sans-serif); color:var(--fg1,#2E2A26); }
.mfp-venue span{ display:block; font:500 11.5px/1.3 var(--sans,sans-serif); color:var(--fg3,#9A8F78); margin-top:2px; }
.mfp-stars{ display:flex; gap:4px; margin:4px 0 10px; }
.mfp-star{ font-size:26px; line-height:1; background:none; border:0; cursor:pointer; color:var(--line,#E4D9CA); padding:4px; transition:color .15s, transform .1s; }
.mfp-star.on{ color:var(--accent,#C2502F); }
.mfp-star:active{ transform:scale(1.15); }
.mfp-status{ min-height:16px; font:500 12px/1.4 var(--sans,sans-serif); color:var(--fg3,#9A8F78); margin:8px 2px 0; }
.mf .mf-album{ padding:6px 0 8px; }
.mf .mf-venue{ margin-top:26px; }
.mf .mf-venue:first-of-type{ margin-top:6px; }
.mf .mf-vhead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid var(--hair); padding-bottom:8px; margin-bottom:9px; }
.mf .mf-vhead h2{ font-family:var(--mf-serif); font-weight:400; font-size:18px; line-height:1.08; letter-spacing:-.2px; margin:0; color:var(--ink); }
.mf .mf-vnum{ font-family:var(--mf-sans); font-size:11.5px; color:var(--t3); flex:none; white-space:nowrap; }
/* Scalable uniform gallery — tight square thumbnails (clean to 300+ photos);
   dish/rating/sharing live in the lightbox, so the grid stays purely visual. */
/* 2-col 4:5 cells (was 3-col squares — founder: "so small, it devalues my image"):
   each photo gets ~2.3× the canvas, portrait-first like the photos themselves. */
.mf .mf-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.mf .mf-thumb{ position:relative; margin:0; padding:0; border:0; cursor:pointer; width:100%; display:block; overflow:hidden; border-radius:13px; background:#efe7d7; box-shadow:var(--mf-shadow-soft); aspect-ratio:4/5; }
.mf .mf-thumb::after{ content:""; position:absolute; inset:0; border-radius:11px; box-shadow:inset 0 0 0 1px rgba(60,40,20,.06); pointer-events:none; }
.mf .mf-thumb img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.mf .mf-thumb:hover img{ transform:scale(1.06); }
.mf .mf-th-shared{ position:absolute; top:7px; right:7px; z-index:2; width:21px; height:21px; border-radius:50%; background:rgba(255,253,248,.92); color:var(--terra-deep); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px -2px rgba(60,40,20,.35); }
/* Multi-shot tile — the stack badge (bottom-right, opposite the share mark). */
.mf .mf-th-stack{ position:absolute; bottom:7px; right:7px; z-index:2; display:inline-flex; align-items:center; gap:3px; font:700 10.5px/1 var(--mf-sans,sans-serif); color:#fff; background:rgba(20,14,8,.55); border-radius:999px; padding:4px 7px; }
.mf .mf-th-stack svg{ width:11px; height:11px; }
.mf .mf-th-shared svg{ width:10.5px; height:10.5px; fill:none; stroke:currentColor; display:block; }
.mf .mf-stars{ display:inline-flex; gap:1.5px; flex:none; vertical-align:middle; }
.mf .mf-stars svg{ width:13px; height:13px; display:block; }
.mf .mf-closing{ text-align:center; margin:42px auto 6px; max-width:250px; color:var(--t3); font-size:12px; line-height:1.55; }
.mf .mf-closing .mk{ font-family:var(--mf-serif); font-style:italic; color:var(--terra); font-size:15px; display:block; margin-bottom:5px; }
.mf .mf-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:54px 30px 40px; }
.mf .mf-empty-glyph{ width:78px; height:78px; border-radius:50%; border:1px dashed var(--terra); display:flex; align-items:center; justify-content:center; color:var(--terra); margin-bottom:24px; background:rgba(194,80,47,.045); }
.mf .mf-empty-glyph svg{ width:34px; height:34px; fill:none; stroke:currentColor; }
.mf .mf-empty h3{ font-family:var(--mf-serif); font-weight:400; font-size:26px; line-height:1.18; margin:0 0 12px; letter-spacing:-.3px; color:var(--ink); }
.mf .mf-empty h3 em{ font-style:italic; color:var(--terra-deep); }
.mf .mf-empty p{ font-size:14.5px; color:var(--t2); line-height:1.55; margin:0 0 26px; max-width:280px; }
.mf .mf-cta{ font-family:var(--mf-sans); font-size:14px; font-weight:600; color:#fff; background:var(--terra); border:0; border-radius:999px; padding:13px 24px; cursor:pointer; display:inline-flex; align-items:center; gap:9px; text-decoration:none; transition:background .2s, transform .15s; }
.mf .mf-cta:hover{ background:var(--terra-deep); } .mf .mf-cta:active{ transform:scale(.97); }
.mf .mf-cta svg{ width:17px; height:17px; fill:none; stroke:currentColor; }
.mf .mf-noresults{ text-align:center; padding:50px 20px; color:var(--t3); }
.mf .mf-noresults svg{ width:30px; height:30px; fill:none; stroke:currentColor; margin-bottom:10px; }
.mf .mf-noresults-t{ font-family:var(--mf-serif); font-size:18px; color:var(--ink); margin:0 0 4px; }
.mf .mf-noresults-s{ font-size:13px; margin:0; }
.mf .mf-loaderr{ text-align:center; padding:40px 20px; }
.mf .mf-loaderr-t{ font-family:var(--mf-serif); font-size:18px; color:var(--ink); margin:0 0 4px; }
.mf .mf-loaderr-s{ font-size:13px; color:var(--t3); margin:0; }
.mf .mf-retry{ margin-top:12px; font-family:var(--mf-sans); font-size:14px; font-weight:600; color:#fff; background:var(--terra); border:0; border-radius:999px; padding:11px 20px; cursor:pointer; }

/* My Food lightbox — dark warm stage so the photo glows (body-appended, transient) */
.mf-lb{ position:fixed; inset:0; z-index:5400; background:#1c130c; display:flex; flex-direction:column; opacity:0; transition:opacity .25s ease; }
.mf-lb.show{ opacity:1; }
.mf-lb .lb-top{ display:flex; align-items:center; justify-content:space-between; padding:max(40px,env(safe-area-inset-top)) 22px 14px; color:#F3E8D6; flex:none; }
.mf-lb .lb-top button{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,253,248,.10); color:#F3E8D6; border:0; cursor:pointer; transition:background .2s; }
.mf-lb .lb-top button svg{ width:18px; height:18px; fill:none; stroke:currentColor; }
.mf-lb .lb-top .x:hover{ background:rgba(255,253,248,.18); }
.mf-lb .lb-top .del:hover{ background:rgba(194,80,47,.35); color:#fff; }
.mf-lb .lb-ct{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:14px; color:rgba(243,232,214,.7); }
.mf-lb .lb-photo{ flex:1; display:flex; align-items:center; justify-content:center; padding:0 16px; min-height:0; position:relative; }
.mf-lb .lb-photo img{ max-width:100%; max-height:100%; border-radius:14px; object-fit:contain; box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }
/* Multi-shot dish → the lightbox is a native scroll-snap carousel (one swipe,
   one photo — never a JS drag carousel). Dots + counter follow the swipe. */
.mf-lb .lb-track{ display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.mf-lb .lb-track::-webkit-scrollbar{ display:none; }
.mf-lb .lb-slide{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; display:flex; align-items:center; justify-content:center; min-width:0; }
.mf-lb .lb-count{ position:absolute; top:10px; right:24px; z-index:3; font:700 11px/1 var(--mf-sans,sans-serif); color:#fff; background:rgba(20,14,8,.55); border-radius:999px; padding:5px 9px; }
.mf-lb .lb-dots{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:3; display:flex; gap:5px; }
.mf-lb .lb-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:background .2s, transform .2s; }
.mf-lb .lb-dot.on{ background:#fff; transform:scale(1.2); }
.mf-lb .lb-spin{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(243,232,214,.25); border-top-color:#F3E8D6; animation:mfspin .8s linear infinite; }
@keyframes mfspin{ to{ transform:rotate(360deg); } }
.mf-lb .lb-info{ flex:none; padding:22px 26px max(34px,env(safe-area-inset-bottom)); color:#F3E8D6; }
.mf-lb .lb-dish{ font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:25px; line-height:1.1; letter-spacing:-.3px; margin:0 0 8px; color:#FFF8EC; }
.mf-lb .lb-meta{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(243,232,214,.78); margin-bottom:22px; }
.mf-lb .lb-meta .mf-stars svg{ width:13px; height:13px; }
.mf-lb .share-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 0 0; border-top:1px solid rgba(243,232,214,.14); }
.mf-lb .sr-t{ font-size:14px; font-weight:600; color:#FFF8EC; }
.mf-lb .sr-s{ font-size:12px; color:rgba(243,232,214,.6); margin-top:3px; line-height:1.4; max-width:250px; }
.mf-lb .mf-toggle{ width:50px; height:29px; border-radius:999px; flex:none; cursor:pointer; background:#7a6c5a; position:relative; border:0; transition:background .25s; }
.mf-lb .mf-toggle.on{ background:var(--terra,#C2502F); }
.mf-lb .mf-toggle .knob{ position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%; background:#fff; transition:left .25s cubic-bezier(.2,.7,.2,1); box-shadow:0 2px 6px rgba(0,0,0,.3); }
.mf-lb .mf-toggle.on .knob{ left:24px; }
/* 3-tier visibility segmented control (lightbox) — replaces the binary share toggle */
.mf-lb .lb-vis{ padding:16px 0 0; border-top:1px solid rgba(243,232,214,.14); }
.mf-lb .lb-vis-t{ font-size:13px; font-weight:600; color:#FFF8EC; margin-bottom:10px; }
.mf-lb .lb-vis-seg{ display:flex; gap:6px; background:rgba(243,232,214,.08); border-radius:12px; padding:4px; }
.mf-lb .lb-vseg{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px; border:0; border-radius:9px; background:transparent; color:rgba(243,232,214,.62); font:600 11.5px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:background .2s, color .2s; }
.mf-lb .lb-vseg i{ font-size:17px; }
.mf-lb .lb-vseg.on{ background:var(--terra,#C2502F); color:#FFF8EC; }
.mf-lb .lb-vseg:disabled{ opacity:.6; cursor:default; }
.mf-lb .lb-vis-s{ margin-top:9px; }
.mf-lb .lb-err{ color:rgba(243,232,214,.7); font-size:14px; text-align:center; }
@media (prefers-reduced-motion:reduce){ .mf *, .mf-lb *{ transition:none !important; animation:none !important; } .mf .mf-thumb:hover img{ transform:none; } }

/* quiz shell — porcelain card, 2px terracotta→ochre progress */
.ob2 .quiz-wrap{ font-family:var(--sans); color:var(--text); padding-top:26px; }
.ob2 .quiz-card{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--line); border-radius:26px;
  box-shadow:0 26px 56px -26px rgba(54,36,18,.20), 0 4px 14px -8px rgba(54,36,18,.07), inset 0 1px 0 rgba(255,255,255,.85); }
.ob2 .quiz-progress{ height:2px; background:rgba(194,80,47,.14); border-radius:999px; margin-bottom:30px; overflow:visible; }
.ob2 .quiz-progress-bar{ height:2px; background:linear-gradient(90deg, var(--accent), var(--ochre)); border-radius:999px; }

/* step header — refined serif-italic eyebrow (sentence case, no tracking; echoes the
   de-capped /signin .au2-eyebrow) + Fraunces question w/ italic accent. De-capping
   here lifts EVERY onboarding step out of the wide-tracked all-caps "claudey" look. */
.ob2 .quiz-step-label{ font-family:var(--serif); font-style:italic; font-weight:420; font-size:14.5px;
  letter-spacing:0; text-transform:none; color:var(--accent); text-align:center; margin:0 0 10px; }
.ob2 .quiz-step-label .ob2-stepnum{ font-style:normal; color:var(--text-3); }
.ob2 .quiz-question{ font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 144;
  font-size:27px; line-height:1.12; letter-spacing:-.015em; color:var(--text); }
.ob2 .quiz-question em{ font-style:italic; font-weight:480; color:var(--accent); }
.ob2 .quiz-hint{ font-family:var(--sans); color:var(--text-2); }
.ob2 .quiz-hint b, .ob2 .quiz-hint strong{ color:var(--accent-deep); }
.ob2 .quiz-why{ color:var(--text-2); }
.ob2 .quiz-why-k{ color:var(--accent); }
/* Section grouping captions ("Your account" / "About you") — de-capped to a quiet
   serif-italic caption with a hairline rule (sentence case, no tracking). Shared by
   every step that uses .quiz-section, so it's kept general and safe. */
.ob2 .quiz-section{ font-family:var(--serif); font-style:italic; font-weight:420; font-size:14px;
  letter-spacing:0; text-transform:none; color:var(--accent-deep); margin:24px 0 13px; }
.ob2 .quiz-section::after{ background:var(--line); }
.ob2 .quiz-mini-label{ color:var(--text-2); }

/* inputs + custom dropdown (Selectish) */
.ob2 .quiz-name-input, .ob2 .quiz-text-input{ font-family:var(--sans); font-size:15px; color:var(--text);
  background:var(--surface-3); border:1px solid var(--line); border-radius:14px;
  transition:border-color .16s ease, box-shadow .16s ease; }
.ob2 .quiz-name-input::placeholder, .ob2 .quiz-text-input::placeholder{ color:var(--text-3); }
.ob2 .quiz-name-input:focus, .ob2 .quiz-text-input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,80,47,.12); }
.ob2 .auth-label{ font-family:var(--sans); color:var(--text-2); }
/* helper text: darkened from --text-3 (#A89A85, ~2.7:1 — fails AA) to a muted tone
   that clears WCAG AA (4.5:1) on both the porcelain card and the inset panel, while
   staying clearly lighter than body copy so it still reads as a quiet hint. */
.ob2 .auth-subhint{ color:#807058; }
.ob2 .sel-btn{ background:var(--surface-3); border:1px solid var(--line); border-radius:14px;
  font-family:var(--sans); color:var(--text); }
.ob2 .sel-btn:hover{ border-color:rgba(194,80,47,.45); }
.ob2 .quiz-selectish.open .sel-btn{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,80,47,.12); }
.ob2 .sel-val.sel-ph{ color:var(--text-3); }
.ob2 .sel-chev{ color:var(--text-3); }
.ob2 .quiz-selectish.open .sel-chev{ color:var(--accent); }
.ob2 .sel-pop{ background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-md); }
.ob2 .sel-opt{ font-family:var(--sans); color:var(--text); }
.ob2 .sel-opt:hover{ background:rgba(194,80,47,.07); }
.ob2 .sel-opt.on{ background:rgba(194,80,47,.10); color:var(--accent-deep); }
.ob2 .sel-opt.on .sel-chk{ color:var(--accent); }
.ob2 .sel-opt.sel-active:not(.on){ background:rgba(194,80,47,.13); }
/* Searchable popover (nationality + home-area) — porcelain field stuck to the top
   of the popover, matching the onboarding's surface tokens + terracotta focus ring. */
.ob2 .sel-search-wrap{ background:var(--surface); border-bottom:1px solid var(--line);
  border-radius:16px 16px 0 0; }
.ob2 .sel-search{ background:var(--surface-3); border:1px solid var(--line); border-radius:11px;
  font-family:var(--sans); color:var(--text); }
.ob2 .sel-search::placeholder{ color:var(--text-3); }
.ob2 .sel-search:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,80,47,.12); }
.ob2 .sel-nomatch{ font-family:var(--sans); color:#807058; }

/* segmented mini-choices (residency / appetite / sex) — porcelain tile + tint select */
.ob2 .quiz-seg-btn{ background:var(--surface-3); border:1px solid var(--line); border-radius:14px;
  font-family:var(--sans); color:var(--text); }
.ob2 .quiz-seg-btn:hover{ border-color:rgba(194,80,47,.45); }
.ob2 .quiz-seg-btn.on{ background:rgba(194,80,47,.08); border-color:rgba(194,80,47,.6); color:var(--accent-deep); }
.ob2 .quiz-seg-btn.on .quiz-seg-s{ color:var(--accent-deep); }   /* solid deep terracotta clears AA on the selected tint */
.ob2 .quiz-seg-s{ color:#807058; }   /* darkened for AA (was --text-3 ~2.7:1) */
.ob2 .sex-skip{ color:var(--text-2); }

/* chips (multi-select + dislikes) — porcelain tile, tint select, terracotta check dot */
.ob2 .quiz-chip{ background:var(--surface-3); border:1px solid var(--line); border-radius:13px;
  font-family:var(--sans); color:var(--text); flex-direction:row; align-items:center; }
.ob2 .quiz-chip:hover{ border-color:rgba(194,80,47,.45); }
.ob2 .quiz-chip::before{ border:1px solid var(--line-2); }
.ob2 .quiz-chip.on{ background:rgba(194,80,47,.08); border-color:rgba(194,80,47,.6); color:var(--accent-deep); }
.ob2 .quiz-chip.on::before{ border-color:var(--accent); background-color:var(--accent); }
.ob2 .quiz-chip.on .chip-hint{ color:rgba(168,67,31,.72); }
.ob2 .chip-hint{ color:var(--text-3); }
.ob2 .diet-chip .chip-tick{ border:1px solid var(--line-2); }   /* diet chips keep their inline check dot (their ::before is off at the base layer) */
.ob2 .diet-chip.on .chip-tick{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.ob2 .diet-chip.on{ background:rgba(194,80,47,.08); border-color:rgba(194,80,47,.6); color:var(--accent-deep); }
.ob2 .quiz-custom-chip{ background:rgba(194,80,47,.08); color:var(--accent-deep); border:1px solid rgba(194,80,47,.4); }
.ob2 .quiz-custom-x{ background:rgba(194,80,47,.16); color:var(--accent-deep); }
.ob2 .quiz-count-note{ color:var(--text-3); }
.ob2 .quiz-count-note.at-max{ color:var(--accent-deep); }
.ob2 .quiz-skip-link{ color:var(--text-3); }
.ob2 .quiz-skip-link:hover{ color:var(--accent); }
.ob2 .quiz-text-add, .ob2 .quiz-addown-btn{ background:var(--accent); border-color:var(--accent); border-radius:12px; }
.ob2 .quiz-text-add:hover, .ob2 .quiz-addown-btn:hover{ background:var(--accent-deep); }

/* option rows + descriptive cards */
.ob2 .quiz-option, .ob2 .quiz-card-opt{ background:var(--surface-3); border:1px solid var(--line);
  border-radius:14px; font-family:var(--sans); color:var(--text); }
.ob2 .quiz-option:hover, .ob2 .quiz-card-opt:hover{ border-color:rgba(194,80,47,.45); }
.ob2 .quiz-option.selected, .ob2 .quiz-card-opt.selected{ background:rgba(194,80,47,.08);
  border-color:rgba(194,80,47,.6); box-shadow:none; }
.ob2 .quiz-option.selected::after{ border-color:var(--accent); background:var(--accent);
  box-shadow:inset 0 0 0 3.5px var(--surface); }
.ob2 .quiz-card-opt{ position:relative; }
.ob2 .quiz-card-opt.selected::after{ content:"✓"; position:absolute; top:14px; right:14px; width:18px; height:18px;
  border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:10px; font-weight:800;
  display:grid; place-items:center; box-shadow:0 2px 6px -1px var(--glow); }
.ob2 .quiz-card-opt.selected .quiz-card-label{ color:var(--accent-deep); }
.ob2 .quiz-card-desc{ color:var(--text-3); }
.ob2 .quiz-option.selected .rank-badge{ background:var(--accent); color:var(--on-accent); }

/* opt-out card + goal rows + cuisine chips + spice scale */
.ob2 .ob-optout{ background:var(--surface-3); border:1px solid var(--line); border-radius:16px; box-shadow:none; }
.ob2 .ob-optout:hover{ border-color:rgba(194,80,47,.45); }
.ob2 .ob-optout.sel{ background:rgba(194,80,47,.08); border-color:rgba(194,80,47,.6); }
.ob2 .ob-optout-ico{ background:rgba(194,80,47,.10); color:var(--accent); }
.ob2 .ob-optout.sel .ob-optout-ico{ background:var(--accent); color:var(--on-accent); }
.ob2 .ob-optout-title{ color:var(--text); }
.ob2 .ob-optout.sel .ob-optout-title{ color:var(--accent-deep); }
.ob2 .ob-optout-sub{ color:var(--text-3); }
.ob2 .ob-opt-radio{ border-color:var(--line-2); }
.ob2 .ob-optout.sel .ob-opt-radio{ border-color:var(--accent); }
.ob2 .ob-opt-radio::after{ background:var(--accent); }
.ob2 .ob-or-divider{ color:var(--text-3); }
.ob2 .ob-or-divider::before, .ob2 .ob-or-divider::after{ background:var(--line); }
.ob2 .ob-count{ color:var(--text-3); }
.ob2 .ob-goal-row{ background:var(--surface-3); border:1px solid var(--line); border-radius:16px; }
.ob2 .ob-goal-row:hover{ border-color:rgba(194,80,47,.45); }
.ob2 .ob-goal-row.sel{ background:rgba(194,80,47,.08); border-color:rgba(194,80,47,.6); }
.ob2 .ob-goal-ico{ background:rgba(194,80,47,.10); color:var(--accent); border-radius:12px; }
.ob2 .ob-goal-row.sel .ob-goal-ico{ background:var(--accent); color:var(--on-accent); }
.ob2 .ob-goal-title{ color:var(--text); }
.ob2 .ob-goal-row.sel .ob-goal-title{ color:var(--accent-deep); }
.ob2 .ob-goal-sub{ color:var(--text-3); }
.ob2 .ob-goal-check{ border-color:var(--line-2); }
.ob2 .ob-goal-row.sel .ob-goal-check{ background:var(--accent); border-color:var(--accent); }
.ob2 .ob-cchip{ background:var(--surface-3); border:1px solid var(--line); color:var(--text); }
.ob2 .ob-cchip:hover{ border-color:rgba(194,80,47,.45); }
.ob2 .ob-cchip.sel{ background:rgba(194,80,47,.08); border-color:rgba(194,80,47,.6); color:var(--accent-deep); }
.ob2 .ob-spice-opt{ background:var(--surface-3); border:1px solid var(--line); border-radius:16px; }
.ob2 .ob-spice-opt:hover{ border-color:rgba(194,80,47,.45); }
.ob2 .ob-spice-opt.sel{ background:rgba(194,80,47,.08); border-color:rgba(194,80,47,.6); }
.ob2 .ob-spice-flames svg{ color:var(--text-4); }
.ob2 .ob-spice-flames svg.lit{ color:var(--accent); fill:rgba(194,80,47,.2); }
.ob2 .ob-spice-opt.sel .ob-spice-flames svg.lit{ fill:var(--accent); }
.ob2 .ob-spice-level{ color:var(--text-3); }
.ob2 .ob-spice-opt.sel .ob-spice-level{ color:var(--accent); }
.ob2 .ob-spice-desc{ color:var(--text); }
.ob2 .oc2-label{ font-family:var(--sans); color:var(--text); }
.ob2 .oc2.sel .oc2-photo{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px rgba(194,80,47,.65), 0 9px 20px -8px var(--glow); }
.ob2 .oc2.sel .oc2-label{ color:var(--accent-deep); }

/* validation + buttons */
.ob2 .quiz-inline-err{ color:var(--accent-deep); background:rgba(194,80,47,.07);
  border:1px solid rgba(194,80,47,.16); border-radius:12px; }
/* 409 "email exists" inline log-in-and-attach mini-form (account-at-end). Keeps the
   diner on the account step so the taste profile they just built isn't lost. */
.ob2 .ob-login-attach{ display:flex; gap:8px; align-items:stretch; margin-top:10px; }
.ob2 .ob-login-attach .auth-input{ flex:1 1 auto; min-width:0; margin:0; }
.ob2 .ob-attach-btn{ flex:0 0 auto; padding:0 16px; white-space:nowrap; }
.ob2 .btn{ border-radius:999px; font-family:var(--sans); }
.ob2 .btn-primary, .ob2 .quiz-next.btn-primary, .ob2 .quiz-card .btn-primary{
  /* Deeper terracotta (matches the landing .fp-cta + /signin .au2-cta) so the white
     label clears WCAG AA (4.5:1); the global --accent-grad's brighter start only
     reaches ~4.42 on this label. */
  background:linear-gradient(135deg,#BD4928 0%,#B0451F 55%,#A8431F 100%); color:var(--on-accent); border:none; font-weight:700; letter-spacing:.02em;
  box-shadow:0 14px 30px -12px rgba(178,67,31,.5), inset 0 1px 0 rgba(255,255,255,.22); }
.ob2 .btn-primary:hover, .ob2 .quiz-next.btn-primary:hover, .ob2 .quiz-card .btn-primary:hover{
  background:linear-gradient(135deg,#BD4928 0%,#B0451F 55%,#A8431F 100%); filter:brightness(1.05) saturate(1.05); transform:none; }
.ob2 .btn-primary:active{ transform:scale(.97); }
.ob2 .quiz-next:disabled, .ob2 .quiz-next.btn-primary:disabled, .ob2 .quiz-card .btn-primary[disabled]{
  background:var(--bg-2) !important; color:var(--text-3) !important; box-shadow:none !important; filter:none; }
.ob2 .btn-ghost, .ob2 .quiz-card .btn-ghost{ background:transparent; color:var(--text-2);
  border:1px solid var(--line-2); box-shadow:none; }
.ob2 .btn-ghost:hover, .ob2 .quiz-card .btn-ghost:hover{ border-color:var(--text-3); background:var(--surface); transform:none; }

/* intro ("Read my palate" cover) */
/* Stage = the positioned ground for the soft porcelain glow + faint terracotta
   fingerprint, so the intro carries the same warmth as the sign-up step. The card
   is lifted above both decorative layers. (.ob2.su2 clips the print to the column.) */
.ob2 .onbi-stage{ position:relative; }
.ob2 .onbi-stage > .onbi-card{ position:relative; z-index:2; }
/* The card is vertically centered in the tall intro stage, so re-anchor the glow to
   the card itself (not the top of the viewport) so the warmth reads behind the card,
   like the sign-up step. (The decorative fingerprint was removed in the Tim Cook-demo
   cleanup — 2026-06-17.) */
.ob2 .onbi-stage .su-glow{ inset:14% -22% 30%; }
.ob2 .onbi-card{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--line); border-radius:26px;
  box-shadow:0 26px 56px -26px rgba(54,36,18,.20), 0 4px 14px -8px rgba(54,36,18,.07), inset 0 1px 0 rgba(255,255,255,.85); }
/* Eyebrow — de-capped to a refined serif italic, sentence case, no tracking
   (echoes the /signin .au2-eyebrow + the sign-up step's .quiz-step-label), so the
   intro reads as a sibling of the sign-up page instead of a wide-tracked all-caps line. */
.ob2 .onbi-eyebrow{ font-family:var(--serif); font-style:italic; font-weight:420; font-size:14px;
  letter-spacing:0; text-transform:none; color:var(--accent); margin:0 0 12px; }
.ob2 .onbi-title{ font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 144; color:var(--text); }
.ob2 .onbi-title em{ font-style:italic; font-weight:480; color:var(--accent); }
.ob2 .onbi-sub{ font-family:var(--sans); color:var(--text-2); }
.ob2 .onbi-ic{ background:rgba(194,80,47,.09); border:1px solid rgba(194,80,47,.18); color:var(--accent); }
.ob2 .onbi-txt{ font-family:var(--sans); color:var(--text-2); }
.ob2 .onbi-txt strong{ color:var(--text); }
.ob2 .onbi-cta{ background:linear-gradient(135deg,#BD4928 0%,#B0451F 55%,#A8431F 100%); border-radius:999px; font-family:var(--sans); font-weight:700;
  letter-spacing:.02em; color:var(--on-accent);
  box-shadow:0 14px 30px -12px rgba(178,67,31,.5), inset 0 1px 0 rgba(255,255,255,.22); }
.ob2 .onbi-cta:hover{ background:linear-gradient(135deg,#BD4928 0%,#B0451F 55%,#A8431F 100%); filter:brightness(1.05) saturate(1.05); transform:none; }
.ob2 .onbi-cta:active{ transform:scale(.97); }

/* ── SU2 — sign-up step (step 0) premium pass ──────────────────────────────────
   Scoped to .su2 (a wrapper added only on renderNameStep) so nothing here can bleed
   into the question steps. Two ideas from premium account-creation flows (Apple
   "Create Apple Account", Rappi, Paramount+): (1) a soft porcelain glow behind the
   card for brand cohesion with /signin + the landing, and (2) the long list of fields
   gathered into two calm "panels" with hairline dividers, captioned by the de-capped
   section eyebrows — so it reads as two guided groups instead of a wall of boxes.
   (The top-right fingerprint whorl was removed in the Tim Cook-demo cleanup, 2026-06-17,
   to keep the screen cleaner — the glow alone carries the warmth.) */
.ob2.su2{ overflow:hidden; }
.ob2 .su2-wrap{ position:relative; }
/* decorative ground — behind the card, very low opacity so the surface stays legible */
.ob2 .su-glow{ position:absolute; inset:-8% -20% 40%; z-index:0; pointer-events:none;
  background:
    radial-gradient(118% 54% at 18% 4%, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 56%),
    radial-gradient(96% 50% at 88% 30%, color-mix(in srgb, var(--ochre) 9%, transparent) 0%, transparent 60%);
  animation:au2GlowIn 1.1s var(--ease-out) both; }
/* lift the card above the decorative layers + give it a touch more presence */
.ob2 .su2-wrap > .quiz-card{ position:relative; z-index:2;
  box-shadow:0 30px 64px -28px rgba(54,36,18,.26), 0 5px 16px -9px rgba(54,36,18,.10), inset 0 1px 0 rgba(255,255,255,.9); }

/* the two field groups — an inset porcelain panel with hairline-divided rows */
.ob2 .su-panel{ background:color-mix(in srgb, var(--surface-3) 86%, var(--bg-3)); border:1px solid var(--line);
  border-radius:18px; padding:4px 16px; margin:0 0 6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.ob2 .su-field{ padding:14px 0 15px; border-bottom:1px solid color-mix(in srgb, var(--line) 78%, transparent); }
.ob2 .su-field:last-child{ border-bottom:none; }
/* labels inside a panel sit flush; the input loses its own card chrome (the panel IS the chrome) */
.ob2 .su-field > .auth-label{ margin:0 0 8px !important; }
.ob2 .su-field .quiz-name-input, .ob2 .su-field .auth-input{
  background:transparent; border:1px solid transparent; border-radius:11px; margin:0 !important;
  padding:11px 12px; }
.ob2 .su-field .quiz-name-input:not(:focus):not(.field-invalid),
.ob2 .su-field .auth-input:not(:focus):not(.field-invalid){ background:var(--surface); border-color:var(--line); }
.ob2 .su-field .quiz-name-input:focus, .ob2 .su-field .auth-input:focus{
  background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,80,47,.12); }
.ob2 .su-field .auth-subhint{ margin:8px 0 0 !important; }
.ob2 .su-field .quiz-mini-label{ font-weight:600; font-size:13px; color:var(--text-2); margin:0 0 9px; }
/* Selectish + DOB inside a panel: surface fill so it reads as a sub-field of the panel */
.ob2 .su-field .sel-btn{ background:var(--surface); }
.ob2 .su-field .dob-row{ margin:0 !important; }
.ob2 .su-field .quiz-seg{ margin:0 !important; }
/* "How big an eater are you?" — the three boxes sat flush under the "Sizes your
   orders…" subhint. Drop them a touch so the hint and the chips read as a label +
   its control, matching the breathing room of the other grouped fields. */
.ob2 .su-field--eater .quiz-seg{ margin:13px 0 0 !important; }
/* segmented chips: brighter selected fill + clean spacing inside the panel rows */
.ob2 .su-field .quiz-seg-btn{ background:var(--surface); padding:13px 9px; }
.ob2 .su-field .quiz-seg-btn:hover{ border-color:rgba(194,80,47,.5); }
/* a small caption row above each panel (sits with the de-capped .quiz-section) */
.ob2 .su2 .quiz-section:first-of-type, .ob2 .su2-wrap .quiz-section:first-of-type{ margin-top:18px; }
/* the lone CTA gets a touch more breathing room above the dense form */
.ob2 .su2-wrap .quiz-next--lone{ margin-top:24px; }

@media (prefers-reduced-motion: reduce){
  .ob2 .su-glow{ animation:none; }
  .ob2 .onbi-stage .su-glow{ animation:none; }
}

/* taste game (this-or-that) + taste-off */
.ob2 .tg-wrap{ font-family:var(--sans); color:var(--text); }
.ob2 .tg-back{ background:var(--surface); border:1px solid var(--line-2); color:var(--text); }
.ob2 .tg-pbar{ height:2px; background:rgba(194,80,47,.14); }
.ob2 .tg-pfill{ background:linear-gradient(90deg, var(--accent), var(--ochre)); }
.ob2 .tg-count{ color:var(--text-3); }
.ob2 .tg-q{ font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 144;
  letter-spacing:-.015em; color:var(--text); }
.ob2 .tg-q em{ font-style:italic; font-weight:480; color:var(--accent); }
.ob2 .tg-or{ background:var(--surface); color:var(--accent); font-style:italic;
  box-shadow:0 6px 16px -7px rgba(54,36,18,.3), 0 0 0 1px var(--line); }
.ob2 .tg-cap{ color:var(--text-2); }
.ob2 .tg-cap b{ color:var(--accent-deep); }
.ob2 .tg-skip{ font-family:var(--sans); color:var(--text-2); }
.ob2 .tg-skip:hover{ color:var(--accent-deep); }
.ob2 .tg-card.sel{ box-shadow:0 0 0 3px var(--accent), 0 26px 44px -22px var(--glow); }
.ob2 .tg-loading{ color:var(--text-2); }
.ob2 .to-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.2em; color:var(--accent); }
.ob2 .to-q{ font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 144;
  letter-spacing:-.015em; color:var(--text); }
.ob2 .to-q em{ font-style:italic; font-weight:480; color:var(--accent); }
.ob2 .to-cap{ color:var(--text-2); }
.ob2 .to-cap b{ color:var(--accent-deep); }
.ob2 .to-count{ font-family:var(--sans); color:var(--text-2); }
.ob2 .to-check{ background:var(--accent); }
.ob2 .to-card.on{ box-shadow:0 8px 22px -8px var(--glow), 0 0 0 3px var(--accent); }

/* the reveal — porcelain gallery + Fraunces card */
.onbr.ob2{ background:#FFFFFF;
  font-family:var(--sans); color:var(--text); }
.ob2 .onbr-eyebrow{ color:var(--accent); letter-spacing:.3em; }
.ob2 .onbr-card{ background:var(--surface); border:1px solid var(--line); }
.ob2 .onbr-edge{ background:var(--accent-grad); }
.ob2 .onbr-wordmark{ font-family:var(--serif); font-style:italic; font-weight:560; color:var(--text); }
.ob2 .onbr-pdot{ color:var(--accent); }
.ob2 .onbr-serial{ color:var(--text-3); }
.ob2 .onbr-youare{ color:var(--text-3); }
.ob2 .onbr-name{ font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 144;
  letter-spacing:-.02em; color:var(--text); }
.ob2 .onbr-accent{ font-style:italic; font-weight:480; color:var(--accent); }
.ob2 .onbr-tagline{ color:var(--text-2); }
.ob2 .onbr-settling{ color:var(--text-3); }
.ob2 .onbr-sig-label{ color:var(--text-3); }
.ob2 .onbr-sig-desc{ font-family:var(--serif); color:var(--text-2); }
.ob2 .onbr-leg span{ color:var(--text-3); }
.ob2 .onbr-trait-k{ color:var(--text-2); }
.ob2 .onbr-trait-read{ color:var(--text-3); }
.ob2 .onbr-seal{ border-color:var(--accent); color:var(--accent); }
.ob2 .onbr-seal-title{ font-family:var(--serif); color:var(--text); }
.ob2 .onbr-seal-sub{ color:var(--text-3); }
.ob2 .onbr-promise-ic{ color:var(--accent); }
.ob2 .onbr-promise-t{ color:var(--text-2); }
.ob2 .onbr-ready-k{ font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 144; color:var(--text); }
.ob2 .onbr-ready-s{ color:var(--text-2); }
.ob2 .onbr-start{ background:var(--accent-grad); border-radius:999px; font-weight:700; letter-spacing:.02em;
  color:var(--on-accent); box-shadow:0 14px 30px -12px rgba(178,67,31,.5), inset 0 1px 0 rgba(255,255,255,.22); }
.ob2 .onbr-start:hover{ background:var(--accent-grad); filter:brightness(1.05) saturate(1.05); }
.ob2 .onbr-start:active{ transform:scale(.97); }
.ob2 .onbr-start:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
/* "Enter Noodl" — the reveal's final CTA is its own moment: a taller full-width
   accent pill, springing in once the taste card has printed (distinct from the
   step "Next" buttons). fill-mode is backwards (NOT both) so the post-animation
   state returns to the cascade and :active's press-scale keeps working. */
.ob2 .onbr-enter{ padding:18px 24px; font-size:16px; letter-spacing:.025em;
  animation: onbrEnterPop .6s cubic-bezier(.34,1.56,.64,1) backwards .35s; }
@keyframes onbrEnterPop{ from{ opacity:0; transform:scale(.92) translateY(10px); } }
@media (prefers-reduced-motion: reduce){ .ob2 .onbr-enter{ animation:none; } }
.ob2 .onbr-share{ background:var(--surface); border:1px solid var(--line-2); border-radius:999px; color:var(--text-2); }
.ob2 .onbr-share:hover{ border-color:rgba(194,80,47,.45); color:var(--accent-deep); }
.ob2 .onbr-explore{ color:var(--text-3); }
.ob2 .onbr-explore:hover{ color:var(--accent); }
.ob2 .onbr-foot{ color:var(--text-3); }
/* Board completion gate — dimmed CTA + a hint under it + a flash on the incomplete zone. */
.bd-submit.is-locked{ opacity:.55; }
.bd-submit-hint{ margin:0 0 8px; text-align:center; font:500 13px/1.4 var(--sans); color:var(--accent-deep); }
/* The "Read my palate" CTA sits at the foot of the long board. #app carries a transform AND is the
   scroll container, which nullifies BOTH sticky and fixed — so instead of a pinned bar we auto-scroll
   the CTA into view the moment the board is complete (onboard.js _refreshGate), and give it a one-shot
   "ready" pop so it's unmissable. No scroll-hunting for the continue button (founder ask, 2026-06-26). */
.ob2 .bd-foot{ margin-top:22px; }
.ob2 .bd-foot .bd-submit{ width:100%; justify-content:center; margin:0; }
.ob2 .bd-foot .bd-submit:not(.is-locked){ box-shadow:0 6px 18px -4px rgba(194,80,47,.42); }
.ob2 .bd-foot .bd-submit.bd-ready-pop{ animation:bdReadyPop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes bdReadyPop{ 0%{ transform:scale(.96); } 55%{ transform:scale(1.04); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .ob2 .bd-foot .bd-submit.bd-ready-pop{ animation:none; } }
.bd-zone-flash{ animation:bdZoneFlash 1.1s var(--ease-out); border-radius:var(--r-lg); }
@keyframes bdZoneFlash{ 0%,100%{ box-shadow:none; } 18%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } }

/* ── ORB NUDGE (appended) ── */
/* One-time coach mark for the dock's center "Tonight" orb (app.js orbNudge):
   a small porcelain tooltip floats above the orb while the orb glow-pulses
   ~3 beats, then settles back to its normal breath. Shown to a signed-in
   diner on the home route, max twice, never after the orb's been tapped. */
.orbnudge {
  position: absolute; bottom: calc(100% + 30px); left: 50%;
  transform: translateX(-50%);
  z-index: 201; white-space: nowrap; pointer-events: none;
  background: var(--surface, #FFFDF8); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 16px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.005em; color: var(--text);
  box-shadow: 0 14px 34px -10px rgba(54, 36, 18, 0.35), 0 2px 8px -2px rgba(54, 36, 18, 0.12);
  animation: orbnudgeIn 0.45s var(--ease-spring, cubic-bezier(0.2, 0.9, 0.3, 1.2)) both;
}
.orbnudge::after { /* caret pointing down at the orb */
  content: ""; position: absolute; top: 100%; left: 50%;
  width: 11px; height: 11px;
  transform: translate(-50%, -6.5px) rotate(45deg);
  background: var(--surface, #FFFDF8);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@keyframes orbnudgeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.94); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.orbnudge.orbnudge-out { opacity: 0; transition: opacity 0.2s ease; }
/* Soft terracotta glow pulse on the orb — 3 beats, breath keeps running. */
.dock-orb.orbnudge-pulse {
  animation: dockOrbBreath 3.6s ease-in-out infinite,
             orbnudgePulse 1.15s ease-in-out 3;
}
@keyframes orbnudgePulse {
  /* Keep the photo-disc ring (porcelain ring + terracotta halo + drop) intact
     while a soft glow ring spreads — must mirror .dock-orb's resting shadow. */
  0%, 100% {
    box-shadow: 0 0 0 2.5px var(--surface),
                0 0 0 4px rgba(194, 80, 47, 0.6),
                0 12px 26px -8px rgba(166, 62, 30, 0.55),
                0 0 0 0 rgba(194, 80, 47, 0.45);
  }
  50% {
    box-shadow: 0 0 0 2.5px var(--surface),
                0 0 0 4px rgba(194, 80, 47, 0.6),
                0 12px 26px -8px rgba(166, 62, 30, 0.55),
                0 0 0 14px rgba(194, 80, 47, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* match the existing `.dock-orb { animation: none }` contract — this class's
     higher specificity must not re-enable motion */
  .orbnudge { animation: none; }
  .dock-orb.orbnudge-pulse { animation: none; }
}

/* ── OB3 — onboarding game-feel (appended) ── */
/* Springy step entrance. onboard.js stamps .ob3-card-enter only when the step
   index CHANGES, so chip toggles (same-step re-renders) never replay it. */
@keyframes ob3Rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ob3 .ob3-card-enter { animation: ob3Rise .42s cubic-bezier(.22, .9, .27, 1.08) both; }
.ob3 .ob3-round-enter { animation: ob3Rise .36s cubic-bezier(.22, .9, .27, 1.08) both; }

/* Thin terracotta→ochre progress fill (quiz bar + taste-game bar share it). */
.ob3 .ob3-progress-fill { background: linear-gradient(90deg, #C2502F, #C96A2D 55%, #E0A330) !important; }

/* One-shot springy pop — stamped by JS on JUST the element you tapped. */
@keyframes ob3Pop { 0% { transform: scale(.9); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } }
.ob3 .ob3-pop { animation: ob3Pop .3s cubic-bezier(.2, .9, .3, 1.4); }

/* Cuisine chips — springier tick + a touch more bounce on select. */
.ob3 .ob-cchip { transition: transform .14s, background .18s, border-color .18s, color .18s; }
.ob3 .ob-cchip-tick { transition: width .22s cubic-bezier(.2, .9, .3, 1.4), opacity .18s; }

/* Occasion photo tiles — a terracotta check badge that pops in on the corner. */
.ob3 .oc2 { position: relative; }
.ob3 .ob3-tilecheck {
  position: absolute; top: -3px; left: calc(50% + 26px); z-index: 2;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lp-terra, #C2502F); color: var(--lp-cream, #FFF7EE);
  box-shadow: 0 3px 8px -2px rgba(42, 32, 24, .45), 0 0 0 2px var(--lp-cream, #FFF7EE);
  opacity: 0; transform: scale(.3);
  transition: transform .24s cubic-bezier(.2, .9, .3, 1.5), opacity .16s;
  pointer-events: none;
}
.ob3 .ob3-tilecheck svg { width: 13px; height: 13px; display: block; }
.ob3 .oc2.sel .ob3-tilecheck { opacity: 1; transform: scale(1); }

/* ── The heat DIAL (spice_tolerance) ─────────────────────────────────────── */
.ob3-dial { padding: 10px 4px 2px; }
.ob3-dial-read { text-align: center; min-height: 112px; margin-bottom: 18px; }
.ob3-dial-flames { display: inline-flex; gap: 7px; margin-bottom: 8px; }
.ob3-dial-flames svg { width: 25px; height: 25px; color: #E4D5C4; transition: color .18s, transform .18s; }
.ob3-dial-flames svg.lit { color: #CE3F28; transform: scale(1.12); }
.ob3-dial-level {
  font: 700 30px/1.1 var(--lp-serif, serif); color: var(--lp-espresso, #2A2018);
  letter-spacing: -.01em; min-height: 36px;
}
.ob3-dial-desc { font: 500 14px/1.45 var(--lp-sans, sans-serif); color: var(--lp-mid, #7A6A58); margin-top: 5px; min-height: 21px; }
.ob3-track {
  position: relative; height: 54px; margin: 4px 10px 0; cursor: pointer;
  touch-action: none; -webkit-tap-highlight-color: transparent; outline: none;
}
.ob3-track:focus-visible { border-radius: 14px; box-shadow: 0 0 0 3px color-mix(in srgb, #C2502F 35%, transparent); }
.ob3-track-rail {
  position: absolute; left: 0; right: 0; top: 50%; height: 8px; transform: translateY(-50%);
  border-radius: 99px; background: #EFE3D3; box-shadow: inset 0 1px 2px rgba(42, 32, 24, .12);
}
.ob3-track-fill {
  position: absolute; left: 0; top: 50%; height: 8px; transform: translateY(-50%);
  border-radius: 99px; background: linear-gradient(90deg, #E0A330, #C96A2D 55%, #CE3F28);
  width: 0;
}
.ob3-tick {
  position: absolute; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--lp-cream, #FFF7EE);
  box-shadow: inset 0 0 0 2px #DECDB9;
  transition: box-shadow .18s, background .18s;
}
.ob3-tick.passed { background: #CE3F28; box-shadow: inset 0 0 0 2px #CE3F28; }
.ob3-thumb {
  position: absolute; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--lp-terra, #C2502F); color: var(--lp-cream, #FFF7EE);
  box-shadow: 0 8px 18px -6px rgba(166, 62, 30, .65), 0 0 0 3px var(--lp-cream, #FFF7EE);
  pointer-events: none;
}
.ob3-thumb svg { width: 22px; height: 22px; }
.ob3-track:not(.dragging) .ob3-thumb,
.ob3-track:not(.dragging) .ob3-track-fill {
  transition: left .24s cubic-bezier(.2, .9, .3, 1.3), width .24s cubic-bezier(.2, .9, .3, 1.3);
}
.ob3-track.dragging .ob3-thumb { transform: translate(-50%, -50%) scale(1.12); }
@keyframes ob3Breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } }
.ob3-thumb.unset { background: #CBB89F; animation: ob3Breathe 1.8s ease-in-out infinite; }
.ob3-dial-ends {
  display: flex; justify-content: space-between; margin: 10px 10px 0;
  font: 600 11.5px/1 var(--lp-sans, sans-serif); letter-spacing: .08em; text-transform: uppercase;
  color: var(--lp-mid, #7A6A58);
}

/* ── Taste game — bigger photo cards, win pulse, progress dots ───────────── */
.ob3 .tg-card { min-height: 178px; max-height: 400px; }
@media (min-width: 700px) { .ob3 .tg-card { min-height: 208px; } }
@keyframes ob3Win {
  0% { transform: translateY(-3px) scale(1.004); }
  40% { transform: translateY(-5px) scale(1.035); }
  100% { transform: translateY(-3px) scale(1.01); }
}
.ob3 .tg-card.sel { animation: ob3Win .32s cubic-bezier(.2, .9, .3, 1.35) both; }
.ob3 .tg-card.ob3-lost { opacity: .45; transform: scale(.975); transition: opacity .26s, transform .26s; }
.ob3 .ob3-tg-eyebrow { margin: 14px 0 2px; }
.ob3-dots { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 12px 0 2px; }
.ob3-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #E2D3BF;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.ob3-dot.done { background: #C2502F; }
.ob3-dot.now { background: #E0A330; transform: scale(1.35); box-shadow: 0 0 0 2.5px color-mix(in srgb, #E0A330 30%, transparent); }

/* Taste-Off cards — springier check pop on select (element persists, no re-render). */
.ob3 .to-check { transition: transform .26s cubic-bezier(.2, .9, .3, 1.5), opacity .16s; }

/* ── Decide-for-me: the appetite-default shape (restaurant page) ─────────── */
.rdecide-shape.ob3-sugg {
  border-color: var(--accent, #C2502F);
  background: color-mix(in srgb, var(--accent, #C2502F) 5%, var(--surface, #FFF));
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--accent, #C2502F) 55%, transparent);
}
.ob3-sugg-chip {
  display: inline-block; margin-left: 7px; padding: 2.5px 9px; border-radius: 99px;
  background: var(--accent, #C2502F); color: #FFF7EE;
  font: 700 10.5px/1.5 var(--sans, sans-serif); letter-spacing: .04em; text-transform: uppercase;
  vertical-align: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ob3 .ob3-card-enter, .ob3 .ob3-round-enter, .ob3 .ob3-pop,
  .ob3 .tg-card.sel, .ob3-thumb.unset { animation: none; }
  .ob3-track:not(.dragging) .ob3-thumb, .ob3-track:not(.dragging) .ob3-track-fill,
  .ob3 .ob3-tilecheck, .ob3 .to-check { transition: none; }
}

/* ══ THE TASTE BOARD (board) — one scrollable porcelain page ════════════════
   The whole quiz middle on a single page in the 460px frame: diet chips, three
   dials, the cuisine craving grid, the inline duel, the favourites + a DNA card
   that fills as zones complete. Warm porcelain + terracotta, serif headings with
   italic accents — matches the landing/signin polish. Scoped to .ob2 .board. */
.ob2 .bd-wrap{ position:relative; max-width:460px; margin:0 auto; padding:18px 20px 40px;
  font-family:var(--sans); color:var(--text); }
.ob2 .bd-head{ text-align:left; margin:6px 0 4px; padding-right:78px; }
.ob2 .bd-head .quiz-step-label{ text-align:left; margin:0 0 6px; }
.ob2 .bd-head .quiz-question{ text-align:left; font-size:30px; line-height:1.08; margin:0 0 8px; }
.ob2 .bd-head .quiz-hint{ text-align:left; font-size:14px; line-height:1.5; margin:0; max-width:36ch; }

/* live DNA card — pinned top-right, sticky so it follows as you scroll */
.ob2 .bd-dna{ position:sticky; top:70px; float:right; z-index:6; margin:-58px 0 -6px 14px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:10px 12px 11px; box-shadow:0 14px 30px -16px rgba(54,36,18,.24), inset 0 1px 0 rgba(255,255,255,.8); }
.ob2 .bd-dna-k{ font:400 11px/1 var(--serif); font-style:italic; letter-spacing:.005em; text-transform:none; color:var(--text-3); }
/* Taste-fingerprint progress — the whorl's arcs start faint grey and colour in
   terracotta as zones/answers complete ("taste is a fingerprint"). The % readout
   sits in the centre. Replaces the old DNA progress ring. */
.ob2 .bd-print{ position:relative; width:56px; height:56px; }
.ob2 .bd-print svg{ width:56px; height:56px; display:block; }
.ob2 .bd-fp-arc{ stroke:var(--line-2, #E6DCCB); transition:stroke .5s var(--ease-out); }
.ob2 .bd-fp-arc.lit{ stroke:var(--accent); }
.ob2 .bd-dna-pct{ position:absolute; inset:0; display:grid; place-items:center;
  font:700 12px/1 var(--serif); color:var(--accent-deep);
  /* a soft porcelain disc so the numeral reads over the whorl lines */
  text-shadow:0 0 5px var(--surface), 0 0 5px var(--surface), 0 0 8px var(--surface); }
@media (prefers-reduced-motion: reduce){ .ob2 .bd-fp-arc{ transition:none; } }

/* Scroll micro-animations — header, zones + the submit button fade + rise + settle
   with a gentle spring as they enter view; a zone's inner elements stagger in via
   --bd-rev-d, each with a small spring of its own. The reveal classes are added by
   JS ONLY when motion is allowed, so reduced-motion users never get the hidden
   start state — but this @media guard is a belt-and-braces backstop. The distance
   + spring easing are dialled up from the old subtle version so the motion is
   clearly visible on every zone (founder feedback). */
.ob2 .bd-rev{ opacity:0; transform:translateY(34px) scale(.985);
  transition:opacity .62s var(--ease-out), transform .72s cubic-bezier(.18,.78,.28,1); will-change:transform,opacity; }
.ob2 .bd-rev.bd-in{ opacity:1; transform:none; }
.ob2 .bd-rev .bd-rev-k{ opacity:0; transform:translateY(18px);
  transition:opacity .52s var(--ease-out), transform .58s cubic-bezier(.18,.82,.26,1.02); }
.ob2 .bd-rev.bd-in .bd-rev-k{ opacity:1; transform:none; transition-delay:var(--bd-rev-d, 0ms); }
/* the numbered zone header gets a touch more travel + a tiny scale pop on its badge */
.ob2 .bd-rev.bd-in .bd-zhead .bd-znum{ animation:bdZnumPop .5s cubic-bezier(.2,.9,.3,1.5) both; animation-delay:var(--bd-rev-d, 0ms); }
@keyframes bdZnumPop{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
/* the live fingerprint card itself eases in + the whorl gets a soft parallax (JS) */
.ob2 .bd-print svg{ transition:transform .2s linear; }
@media (prefers-reduced-motion: reduce){
  .ob2 .bd-rev, .ob2 .bd-rev .bd-rev-k{ opacity:1 !important; transform:none !important; transition:none !important; }
  .ob2 .bd-rev.bd-in .bd-zhead .bd-znum{ animation:none !important; }
  .ob2 .bd-print svg{ transition:none !important; transform:none !important; }
}

/* a zone — a soft porcelain panel with a numbered header */
.ob2 .bd-zone{ clear:right; background:var(--surface); border:1px solid var(--line);
  border-radius:22px; padding:18px 17px 19px; margin:16px 0 0;
  box-shadow:0 16px 38px -24px rgba(54,36,18,.16), inset 0 1px 0 rgba(255,255,255,.7); }
.ob2 .bd-zhead{ display:flex; align-items:flex-start; gap:11px; margin:0 0 15px; }
.ob2 .bd-znum{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--accent-deep);
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  font:700 14px/1 var(--serif); margin-top:1px; }
.ob2 .bd-ztitle{ font:400 19px/1.15 var(--serif); color:var(--text); margin:0 0 3px; letter-spacing:-.01em; }
.ob2 .bd-ztitle em{ font-style:italic; color:var(--accent); }
.ob2 .bd-zsub{ font:400 13px/1.45 var(--sans); color:var(--text-2); margin:0; }
.ob2 .bd-zsub b{ color:var(--accent-deep); }

/* Zone A — diet chips reuse the .quiz-chip/.diet-chip treatment; tighten spacing */
.ob2 .board .quiz-chip-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.ob2 .bd-addown{ margin-top:13px; }
.ob2 .board .diet-promise{ margin-top:14px; }

/* Zone C — cuisine craving photo tiles (3-col, circular dish photos) */
.ob2 .bcz-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px 9px; }
.ob2 .bcz-tile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ob2 .bcz-photo{ width:100%; aspect-ratio:1/1; border-radius:50%; background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(42,32,24,.08), 0 8px 16px -10px rgba(42,32,24,.4);
  transition:transform .22s var(--ease-out), box-shadow .22s; }
.ob2 .bcz-photo--grad{ position:relative; }
.ob2 .bcz-tile:hover .bcz-photo{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(42,32,24,.08), 0 11px 22px -10px rgba(42,32,24,.46); }
.ob2 .bcz-tile:active .bcz-photo{ transform:translateY(0) scale(.96); }
.ob2 .bcz-tile.sel .bcz-photo{ box-shadow:0 0 0 3px var(--accent), 0 9px 20px -8px var(--glow); transform:translateY(-1px); }
.ob2 .bcz-tile:focus-visible{ outline:none; }
.ob2 .bcz-tile:focus-visible .bcz-photo{ box-shadow:0 0 0 3px var(--surface), 0 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent); }
.ob2 .bcz-label{ font:550 12px/1.25 var(--sans); color:var(--text-2); text-align:center; max-width:11ch; }
.ob2 .bcz-tile.sel .bcz-label{ color:var(--accent-deep); }
.ob2 .board .bcz-tile .ob3-tilecheck{ top:-3px; left:calc(50% + 18px); }
@media (prefers-reduced-motion: reduce){ .ob2 .bcz-photo{ transition:none; } }

/* Zone B — each dial sits in its own captioned card */
.ob2 .bd-dial-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
  padding:14px 14px 12px; margin:0 0 12px; }
.ob2 .bd-dial-card:last-child{ margin-bottom:0; }
.ob2 .bd-dial-cap{ font:400 16px/1.2 var(--serif); color:var(--text); margin:0 0 2px; }
.ob2 .bd-dial-cap em{ font-style:italic; color:var(--accent); }
.ob2 .bd-dial-card .ob3-dial{ padding:4px 2px 0; }
.ob2 .bd-dial-card .ob3-dial-read{ min-height:auto; margin-bottom:12px; }
.ob2 .bd-dial-card .ob3-dial-level{ font-size:24px; min-height:30px; margin-top:2px; }
.ob2 .bd-dial-card .ob3-dial-flames svg{ width:21px; height:21px; }
/* budget/appetite dials (no pips) show the thumb glyph as their readout cue */
.ob2 .bd-dial-card .ob3-dial-desc{ min-height:20px; }

/* Zone D — the inline duel host */
.ob2 .bd-duel{ min-height:230px; }
.ob2 .bd-duel-top{ display:flex; justify-content:center; margin:0 0 8px; }
.ob2 .bd-duel-top .tg-count{ font:600 12px/1 var(--sans); letter-spacing:.02em; color:var(--text-3); }
.ob2 .bd-duel-q{ font:400 19px/1.2 var(--serif); color:var(--text); text-align:center; margin:0 0 13px; }
.ob2 .bd-duel-q em{ font-style:italic; color:var(--accent); }
.ob2 .bd-duel .tg-cards{ display:flex; align-items:stretch; gap:9px; position:relative; }
.ob2 .bd-duel .tg-card{ flex:1; min-width:0; min-height:158px; }
.ob2 .bd-duel-skip{ display:block; margin:13px auto 0; }
.ob2 .bd-duel-load, .ob2 .bd-faves-load{ display:grid; place-items:center; min-height:158px; }
.ob2 .bd-duel-done{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:26px 14px; }
.ob2 .bd-duel-tick{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.ob2 .bd-duel-tick svg{ width:21px; height:21px; }
.ob2 .bd-duel-done p{ font:400 15px/1.4 var(--serif); color:var(--text-2); margin:0; }

/* Zone E — favourites grid (2-col, reuses .to-card) */
.ob2 .bd-faves-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.ob2 .bd-faves-empty{ font:400 14px/1.45 var(--sans); color:var(--text-3); margin:6px 0 0; }
.ob2 .board .ob-count{ margin-top:13px; }

/* "Read my palate →" — full-width primary */
.ob2 .bd-submit{ width:100%; justify-content:center; margin:24px 0 0; gap:8px; }

/* the 13+ checkbox on the account step (replaces the DOB date-picker) */
.ob2 .su-agecheck{ display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:var(--surface-3); border:1px solid var(--line); border-radius:14px; padding:13px 14px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .16s, background .16s; }
.ob2 .su-agecheck:hover{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ob2 .su-agecheck:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,80,47,.12); }
.ob2 .su-agecheck-box{ flex:none; width:23px; height:23px; border-radius:7px; display:grid; place-items:center;
  border:2px solid color-mix(in srgb, var(--text-3) 70%, transparent); color:var(--on-accent);
  transition:background .16s, border-color .16s, transform .16s; }
.ob2 .su-agecheck-box svg{ width:14px; height:14px; opacity:0; transform:scale(.5); transition:opacity .16s, transform .2s cubic-bezier(.2,.9,.3,1.5); }
.ob2 .su-agecheck.on{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:rgba(194,80,47,.06); }
.ob2 .su-agecheck.on .su-agecheck-box{ background:var(--accent); border-color:var(--accent); }
.ob2 .su-agecheck.on .su-agecheck-box svg{ opacity:1; transform:scale(1); }
.ob2 .su-agecheck-txt{ font:550 15px/1.3 var(--sans); color:var(--text); }
.ob2 .su-agecheck.field-invalid{ border-color:#C0402A; box-shadow:0 0 0 3px rgba(192,64,42,.12); }
@media (prefers-reduced-motion: reduce){
  .ob2 .su-agecheck, .ob2 .su-agecheck-box, .ob2 .su-agecheck-box svg, .ob2 .bcz-photo{ transition:none; }
}

/* tighten at very narrow widths (360/390px) so nothing overflows */
@media (max-width:400px){
  .ob2 .bd-wrap{ padding:16px 15px 36px; }
  .ob2 .bd-head .quiz-question{ font-size:27px; }
  .ob2 .bcz-grid{ gap:14px 8px; }
  .ob2 .bcz-label{ font-size:11.5px; }
}

/* ── TBL3 — structured table plan (appended) ─────────────────────────────────
   "Plan the table's order" restructure: the How-are-we-eating appetite step
   (same porcelain chips as the venue decide flow), a top summary card with the
   composition math as big numerals, unmissable course sections (TO SHARE —
   STARTERS / MAINS / SIDES / TO FINISH), a one-tap Add-dessert button, and the
   honest table total. Scoped .tbl3-* — runs inside body.fal-on (/group). */

/* The plate-plan alignment step — steppers over the SAME counts the fill will build. */
.shape-sheet { padding: 6px 18px 14px; }
.shape-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line, #E3D7C2); }
.shape-row:last-of-type { border-bottom: 0; }
.shape-row-l { font: 600 15px/1.3 var(--fal-sans, var(--sans, sans-serif)); color: var(--text, #2A2018); }
.shape-step { display: inline-flex; align-items: center; gap: 2px; }
.shape-btn { width: 34px; height: 34px; border-radius: 999px; border: 1.5px solid var(--line, #E3D7C2); background: var(--surface, #FCF6EC); color: var(--accent-deep, #9A3C20); font: 700 18px/1 var(--fal-sans, sans-serif); cursor: pointer; transition: border-color .15s, background .15s; }
.shape-btn:hover { border-color: var(--accent, #C2502F); }
.shape-btn:active { background: color-mix(in srgb, var(--accent, #C2502F) 10%, var(--surface, #FCF6EC)); }
.shape-n { min-width: 34px; text-align: center; font: 800 17px/1 var(--fal-sans, sans-serif); color: var(--text, #2A2018); }
.shape-total { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line, #E3D7C2); font: 600 13.5px/1.4 var(--fal-sans, sans-serif); color: var(--text-2, #6B5B49); }
.tbl3-go { display: block; width: 100%; margin-top: 14px; background: var(--accent, #C2502F); color: var(--on-accent, #FCF6EC); border: none; border-radius: 999px; padding: 16px; font: 700 16px/1 var(--fal-sans, sans-serif); cursor: pointer; box-shadow: var(--shadow-md, 0 6px 18px rgba(42,32,24,.16)); transition: filter .14s, transform .14s; }
.tbl3-go:hover { filter: brightness(1.05); }
.tbl3-go:active { transform: scale(.98); }
.shape-note { margin: 10px 0 0; text-align: center; font: 500 12.5px/1.5 var(--fal-sans, sans-serif); color: var(--text-3, #A89A85); }


/* Appetite chips — porcelain cards, the chosen one lit terracotta. */
.tbl3-chips { display: grid; gap: 10px; margin-top: 6px; }
.tbl3-chip {
  position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: var(--surface, #FCF6EC); border: 1.5px solid var(--line, #E3D7C2);
  border-radius: 16px; padding: 16px 18px; cursor: pointer;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(42,32,24,.08)); transition: border-color .15s, background .15s, transform .15s;
}
.tbl3-chip:hover { border-color: var(--accent, #C2502F); transform: translateY(-1px); }
.tbl3-chip-t { font-family: var(--fal-sans, var(--sans, sans-serif)); font-weight: 700; font-size: 1rem; color: var(--text, #2A2018); }
.tbl3-chip-s { font-family: var(--fal-sans, var(--sans, sans-serif)); font-size: 0.82rem; line-height: 1.35; color: var(--text-3, #A89A85); }
.tbl3-chip.on { background: var(--accent, #C2502F); border-color: var(--accent, #C2502F); }
.tbl3-chip.on:hover { background: var(--accent-deep, #9A3C20); border-color: var(--accent-deep, #9A3C20); }
.tbl3-chip.on .tbl3-chip-t { color: var(--on-accent, #FCF6EC); }
.tbl3-chip.on .tbl3-chip-s { color: color-mix(in srgb, var(--on-accent, #FCF6EC) 82%, transparent); }
.tbl3-chip.on.rem::after {
  content: 'Last time'; position: absolute; top: 14px; right: 16px;
  font: 800 9.5px/1 var(--fal-sans, sans-serif); letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--on-accent, #FCF6EC) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-accent, #FCF6EC) 40%, transparent);
  border-radius: 999px; padding: 4px 8px;
}

/* Top summary card — the composition math, numbers first. */
.tbl3-sum {
  background: var(--surface, #FCF6EC); border: 1px solid var(--line, #E3D7C2);
  border-radius: 18px; padding: 18px 20px 15px; margin: 2px 0 16px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(42,32,24,.08));
}
.tbl3-sum[hidden] { display: none; }
.tbl3-nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.tbl3-num { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.tbl3-num-v {
  font-family: var(--fal-serif, var(--serif, serif)); font-size: 2.1rem; line-height: 1;
  color: var(--accent-deep, #9A3C20); font-variant-numeric: tabular-nums;
}
.tbl3-num-l {
  font-family: var(--fal-sans, var(--sans, sans-serif)); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2, #6E5F4F);
}
.tbl3-num-dot { font-family: var(--fal-serif, serif); font-size: 1.4rem; color: var(--text-3, #A89A85); align-self: center; }
.tbl3-sum-note {
  margin: 9px 0 0; padding-top: 9px; border-top: 1px dashed var(--line, #E3D7C2);
  font-family: var(--fal-sans, var(--sans, sans-serif)); font-size: 0.8rem; color: var(--text-3, #A89A85);
}
/* Portion check line under the table-plan summary (Fullness Units, backend verdict). */
.tbl3-sum-fu { margin: 7px 0 0; font: 500 12px/1.5 var(--sans); color: var(--fg2); }
.tbl3-sum-fu.is-heavy { color: var(--accent-deep); font-weight: 600; }

/* Course sections — unmissable eyebrow headers with a count + hairline rule. */
.tbl3-sec { margin: 0 0 6px; }
.tbl3-sec-h { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; }
.tbl3-sec-t {
  font-family: var(--fal-sans, var(--sans, sans-serif)); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep, #9A3C20);
}
.tbl3-sec-n {
  font-family: var(--fal-sans, var(--sans, sans-serif)); font-weight: 700; font-size: 0.68rem;
  color: var(--accent-deep, #9A3C20); background: color-mix(in srgb, var(--accent, #C2502F) 11%, transparent);
  border-radius: 999px; padding: 2.5px 8px; font-variant-numeric: tabular-nums;
}
.tbl3-sec-h::after { content: ""; flex: 1; height: 1px; background: var(--line, #E3D7C2); }
.tbl3-sec .grpo-item { margin-bottom: 10px; }

/* Diner chip on a personal (non-table) dish row. */
.tbl3-for {
  display: inline-block; vertical-align: 1px; margin-left: 6px; padding: 2px 8px;
  font-family: var(--fal-sans, var(--sans, sans-serif)); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep, #9A3C20);
  background: color-mix(in srgb, var(--accent, #C2502F) 11%, transparent); border-radius: 999px;
}

/* Add dessert — a dashed porcelain tap; becomes the dessert row once added. */
.tbl3-adddess {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: transparent; border: 1.5px dashed var(--line-2, #C9BBA4); border-radius: 14px;
  padding: 14px 16px; margin: 14px 0 2px; cursor: pointer; transition: border-color .15s, background .15s;
}
.tbl3-adddess:hover { border-color: var(--accent, #C2502F); background: color-mix(in srgb, var(--accent, #C2502F) 5%, transparent); }
.tbl3-adddess:disabled { cursor: default; opacity: .65; }
.tbl3-adddess-t { font-family: var(--fal-sans, var(--sans, sans-serif)); font-weight: 700; font-size: 0.92rem; color: var(--accent-deep, #9A3C20); }
.tbl3-adddess-s { font-family: var(--fal-sans, var(--sans, sans-serif)); font-size: 0.78rem; color: var(--text-3, #A89A85); }

/* Table total — honest sum of the prices we actually have. */
.tbl3-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 16px 0 4px; padding: 13px 2px 0; border-top: 1.5px solid var(--line-2, #C9BBA4);
}
.tbl3-total[hidden] { display: none; }
.tbl3-total-l {
  font-family: var(--fal-sans, var(--sans, sans-serif)); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2, #6E5F4F);
}
.tbl3-total-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tbl3-total-v {
  font-family: var(--fal-serif, var(--serif, serif)); font-size: 1.45rem; line-height: 1;
  color: var(--text, #2A2018); font-variant-numeric: tabular-nums;
}
.tbl3-total-s { font-family: var(--fal-sans, var(--sans, sans-serif)); font-size: 0.74rem; color: var(--text-3, #A89A85); }

/* ── LY4 — loyalty relationship rebuild (appended) ── */
/* Each unlocked gift now presents through the diner↔venue relationship the server
   computes from REAL visits: a birthday row on top, thank-yous from your regulars,
   win-backs from places that miss you, new tables courting a strong match. These
   classes only add the relationship layer — cards stay .pl-reward. */
.ly4-sec{margin-top:26px}
.ly4-sec span{font-weight:700;letter-spacing:.06em}

/* the venue's one-line why — reads like a note from the kitchen, not UI chrome */
.ly4-why{font-size:12px;font-style:italic;color:var(--pl-ink2,#6E5F4F);line-height:1.4;margin:-3px 0 7px}
.pl-reward .ly4-why{padding-right:4px}

/* birthday — a single celebratory band at the very top */
.ly4-bday{display:block;margin:22px 0 4px;padding:4px 14px 14px;border-radius:24px;
  background:linear-gradient(140deg,#FBF2DE,#F8E9D0 55%,#F6E3C6);
  border:1px solid #EBD8B4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 16px 32px -24px rgba(160,110,40,.55)}
.ly4-bday .pl-sec{margin:14px 2px 12px;color:#9A6A39}
.ly4-bday .pl-sec span{color:#B98F55}
.ly4-bday .pl-reward{border-color:#EBD8B4;box-shadow:0 12px 26px -20px rgba(160,110,40,.5)}
.ly4-candle{font-style:normal;font-size:13px;margin-right:2px}
/* a locked birthday reason can be a sentence — let the pill wrap honestly */
.pl-pill.lock.ly4-bdaylock{white-space:normal;line-height:1.35;text-align:left;border-radius:12px}

/* ── PP4 — passport DNA elevation (appended) ── */
/* Scope: the Taste DNA + Friends passport panels (.pp4 on the tab panels) and
   the friend-profile sheet (.pp4-fpf, a body-level modal).
   Porcelain surfaces + Fraunces / Instrument Sans. The Ember spectrum hues
   appear ONLY on taste visuals — the specimen-card iris arcs, the axis bars,
   and a friend's archetype ring — per design-reference-CLAUDE.md. Terracotta
   stays the lone decorative accent. */
.pp4, .pp4-fpf {
  --p4-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --p4-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --p4-surface: #FFFDF8;
  --p4-ink: #23150D;
}
.pp4-eyebrow { font: 700 10px/1 var(--p4-sans); text-transform: uppercase; letter-spacing: .18em; color: var(--accent); }

/* ── Specimen card — identity as a designed object ── */
.pp4-spec { position: relative; background: var(--p4-surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-sm); padding: 18px 18px 0; margin: 2px 0 20px; overflow: hidden; }
.pp4-spec::before { content: ""; position: absolute; top: -72px; right: -64px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); pointer-events: none; }
.pp4-spec-main { position: relative; display: flex; align-items: center; gap: 14px; }
.pp4-spec-id { flex: 1; min-width: 0; }
.pp4-spec-arch { font: 400 26px/1.06 var(--p4-serif); letter-spacing: -.012em; color: var(--p4-ink); margin: 8px 0 0; text-wrap: balance; }
.pp4-spec-arch em { font-style: italic; color: var(--accent); }
.pp4-spec-read { font: 500 12.5px/1.45 var(--p4-sans); color: var(--text-2); margin: 7px 0 0; }
.pp4-spec-share { align-self: flex-start; margin-top: -2px; }

/* the taste iris — one concentric arc per DNA axis, drawn at its real value */
.pp4-iris { position: relative; flex: none; width: 106px; height: 106px; display: grid; place-items: center; }
.pp4-iris svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pp4-iris-t { fill: none; stroke-width: 5.5; stroke: color-mix(in srgb, var(--hue) 16%, transparent); }
.pp4-iris-a { fill: none; stroke-width: 5.5; stroke: var(--hue); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease-out); }
.pp4-iris-ava { position: relative; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep)); color: var(--on-accent);
  font: 500 19px/42px var(--p4-serif); text-align: center; box-shadow: 0 3px 10px -2px var(--glow); }

/* passport data fields — perforated stub strip */
.pp4-spec-fields { position: relative; display: flex; gap: 20px; flex-wrap: wrap; border-top: 1.5px dashed var(--line-2);
  margin-top: 16px; padding: 12px 2px 15px; }
.pp4-spec-fields::before, .pp4-spec-fields::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.pp4-spec-fields::before { left: -27px; }
.pp4-spec-fields::after { right: -27px; }
.pp4-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp4-field-k { font: 700 8.5px/1 var(--p4-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); }
.pp4-field-v { font: 600 13px/1.25 var(--p4-sans); color: var(--p4-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp4-field-h { color: var(--accent); }
/* Round 10 — the spectrum lives BEHIND this button now (the DNA tab was overboard);
   tap → a dimmed overlay (scrim only, never a full-viewport backdrop blur). */
.pp4-spec-spectrum { all: unset; cursor: pointer; box-sizing: border-box; display: flex; align-items: center;
  justify-content: space-between; width: 100%; margin-top: 2px; padding: 12px 14px;
  font: 700 13px/1 var(--p4-sans); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 14px; }
.pp4-spec-spectrum:active { transform: scale(.985); }
.pp4-spec-spectrum span { font-size: 15px; }
.pp-spectrum-sheet .pp4-spectrum { margin: 0; }

/* ── Taste spectrum — hue-coded axis bars (the bars are the source of truth) ── */
.pp4-spectrum { margin: 0 0 22px; }
.pp4-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 12px; }
.pp4-axes { display: flex; flex-direction: column; gap: 19px; background: var(--p4-surface); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow-sm); padding: 20px 18px 22px; }
.pp4-ax-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pp4-ax-name { font: 600 14.5px/1.15 var(--p4-sans); letter-spacing: -.01em; color: var(--p4-ink); }
.pp4-ax-val { display: inline-flex; align-items: baseline; gap: 2px; flex: none; }
.pp4-ax-num { font-family: var(--p4-serif); font-weight: 500; font-size: 22px; line-height: 1; color: var(--hue);
  font-variant-numeric: tabular-nums; }
.pp4-ax-of { font: 500 11px/1 var(--p4-sans); color: var(--text-3); }
.pp4-ax-track { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--hue) 13%, transparent); }
.pp4-ax-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; min-width: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hue) 34%, var(--p4-surface)), var(--hue));
  transition: width 1s var(--ease-out); }
.pp4-ax-fill::after { content: ""; position: absolute; right: -1px; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  transform: translateY(-50%); background: var(--p4-surface); border: 3px solid var(--hue); box-sizing: border-box;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hue) 15%, transparent), 0 1px 5px color-mix(in srgb, var(--hue) 38%, transparent); }
.pp4-ax-poles { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.pp4-ax-pole { font: 500 11.5px/1.3 var(--p4-sans); color: var(--text-3); }
.pp4-ax-pole.on { font-family: var(--p4-serif); font-style: italic; font-weight: 600; font-size: 12.5px; color: var(--hue); }

/* ── Verdict queue — harmonised with the new rhythm (logic untouched) ── */
body.fal-on .pp4 .pp-progress { margin: 0 0 6px; }
body.fal-on .pp4 .pq-head { margin-bottom: 12px; }
/* compact + de-capped eyebrow (founder: the rating block was too big) */
body.fal-on .pp4 .pq-eyebrow { font-family: var(--p4-sans); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); margin: 0 0 8px; }
body.fal-on .pp4 .pq-intro { display: none; }
body.fal-on .pp4 .pq-momentum { font-family: var(--p4-sans); font-size: 12px; font-weight: 500; background: none; padding: 0; color: var(--text-3); }
/* small & sexy rating card (founder: keep it small) */
body.fal-on .pp4 .pq-card { border-radius: 18px; box-shadow: var(--shadow-sm); padding: 12px 16px; }
body.fal-on .pp4 .pq-dish { font-family: var(--p4-serif); font-size: 19px; line-height: 1.1; margin: 0 0 2px; }
body.fal-on .pp4 .pq-cuisine { font-size: 11.5px; margin: 0 0 3px; }
body.fal-on .pp4 .pq-place { font-size: 12.5px; margin: 0 0 8px; }
body.fal-on .pp4 .pq-scale { justify-content: center; gap: 16px; }
body.fal-on .pp4 .pq-dot { width: 34px; height: 34px; }
body.fal-on .pp4 .pq-dot span { font-size: 14px; }
body.fal-on .pp4 .pq-foot { margin-top: 6px; min-height: 14px; }
body.fal-on .pp4 .pq-end { font-size: 11.5px; }
body.fal-on .pp4 .pq-skip { margin: 8px auto 0; font-size: 12.5px; }
body.fal-on .pp4 .pq-cuisine, body.fal-on .pp4 .pq-place, body.fal-on .pp4 .pq-live, body.fal-on .pp4 .pq-end, body.fal-on .pp4 .pq-skip,
body.fal-on .pp4 .pq-logged-main, body.fal-on .pp4 .pq-logged-sub, body.fal-on .pp4 .pq-caught-meta, body.fal-on .pp4 .pq-caught-calm, body.fal-on .pp4 .pq-caught-cta { font-family: var(--p4-sans); }
body.fal-on .pp4 .pq-caught-title { font-family: var(--p4-serif); }

/* ── Knowledge band — ring + the one next question, one card not a stack ── */
body.fal-on .pp4 .tm-host { margin-top: 8px; }
.pp4-next { margin-top: 15px; border-top: 1.5px dashed var(--line-2); padding-top: 13px; }
.pp4-next-eyebrow { font: 700 9.5px/1.3 var(--p4-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 9px; }
.pp4-next-foot { font: 500 11.5px/1.5 var(--p4-sans); color: var(--text-3); margin: 10px 2px 0; }

/* ── Friends — porcelain cards, archetype rings, Fraunces match ── */
body.fal-on .pp4 .fr9-h1 { font-family: var(--p4-serif); font-weight: 400; }
body.fal-on .pp4 .fr9-h1 em { font-style: italic; color: var(--accent); }
body.fal-on .pp4 .fr9-sub { font-family: var(--p4-sans); font-size: 15.5px; }
body.fal-on .pp4 .tt { border-radius: 22px; background: var(--p4-surface); }
body.fal-on .pp4 .tt-eyebrow, body.fal-on .pp4 .tt-cap { font-family: var(--p4-sans); }
body.fal-on .pp4 .tt-name, body.fal-on .pp4 .tt-ava, body.fal-on .pp4 .tt-pct { font-family: var(--p4-serif); }
body.fal-on .pp4 .tt-why { font-family: var(--p4-serif); font-style: italic; font-weight: 500; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
body.fal-on .pp4 .tt-why strong { font-weight: 600; color: var(--accent-deep); }
body.fal-on .pp4 .cc-list { gap: 10px; grid-template-columns: minmax(0, 1fr); }
body.fal-on .pp4 .cc-row.pp4-fr-card { min-width: 0; }
body.fal-on .pp4 .cc-row.pp4-fr-card { border-radius: 18px; background: var(--p4-surface); }
body.fal-on .pp4 .pp4-fr-card .cc-main { gap: 12px; padding: 12px 4px 12px 13px; }
.pp4-fr-avawrap { --hue: var(--accent); flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid color-mix(in srgb, var(--hue) 45%, transparent); background: color-mix(in srgb, var(--hue) 7%, var(--p4-surface)); }
.pp4-fr-avawrap .cc-ava.pp4-fr-ava { width: 42px; height: 42px; border: 0; font-family: var(--p4-serif); font-size: 19px;
  background: color-mix(in srgb, var(--hue) 14%, var(--p4-surface)); color: color-mix(in srgb, var(--hue) 78%, var(--p4-ink)); }
body.fal-on .pp4 .cc-name { font-family: var(--p4-serif); font-size: 18.5px; }
.pp4-fr-taste { font-family: var(--p4-serif); font-style: italic; font-weight: 500; font-size: 12.5px; line-height: 1.35; color: var(--text-2);
  margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fal-on .pp4 .pp4-fr-card .fr-ring { flex: none; }
body.fal-on .pp4 .pp4-fr-card .fr-ring-val { font-family: var(--p4-serif); color: var(--accent); font-size: 17px; font-variant-numeric: tabular-nums;
  grid-auto-flow: column; align-items: baseline; align-content: center; justify-content: center; }
body.fal-on .pp4 .pp4-fr-card .fr-ring-val small { font-size: 10px; margin-left: .5px; }
body.fal-on .pp4 .pp4-fr-card .fr-ring-arc { stroke: var(--accent); }
body.fal-on .pp4 .fr-avatar, body.fal-on .pp4 .fr-req-name { font-family: var(--p4-serif); }
body.fal-on .pp4 .fr-req { border-radius: 16px; }
body.fal-on .pp4 .fr-add { border-radius: 22px; }
body.fal-on .pp4 .fr-add-label, body.fal-on .pp4 .fr-block-label { font-family: var(--p4-sans); }

/* friends empty state — a warm open seat + prominent share CTA */
.pp4-fr-empty { background: var(--p4-surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm);
  padding: 30px 22px 26px; text-align: center; margin-bottom: 26px; }
.pp4-fr-seats { display: flex; justify-content: center; margin-bottom: 16px; }
.pp4-fr-seat-you { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  color: var(--on-accent); font: 500 24px/54px var(--p4-serif); text-align: center; box-shadow: 0 4px 12px -4px var(--glow);
  position: relative; z-index: 1; }
.pp4-fr-seat-ghost { width: 54px; height: 54px; border-radius: 50%; border: 2px dashed var(--line-2); box-sizing: border-box;
  margin-left: -9px; background: var(--bg); display: grid; place-items: center; font: 600 22px/1 var(--p4-sans); color: var(--text-3); }
body.fal-on .pp4 .fr-empty-h { font-family: var(--p4-serif); }
body.fal-on .pp4 .fr-empty-h em { font-style: italic; color: var(--accent); }
body.fal-on .pp4 .fr-empty-p { font-family: var(--p4-sans); font-size: 14.5px; }
.pp4-fr-empty-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: 999px; padding: 14px 24px; font: 700 14.5px/1 var(--p4-sans); cursor: pointer;
  box-shadow: var(--shadow-accent); transition: background .15s, transform .12s; }
.pp4-fr-empty-cta:hover, .pp4-fr-empty-cta.on { background: var(--accent-deep); }
.pp4-fr-empty-cta:active { transform: scale(.97); }
.pp4-fr-empty-cta .fr-ic { width: 16px; height: 16px; }

/* ── Friend profile sheet — specimen-card header ── */
body .pp4-fpf .fpf-hero { margin-bottom: 16px; }
.pp4-fpf-ringwrap { position: relative; width: 92px; height: 92px; display: inline-grid; place-items: center; margin-bottom: 8px; }
.pp4-fpf-ringwrap .fpf-ring { position: absolute; inset: 0; }
.pp4-fpf-ringwrap .fpf-ava { width: 56px; height: 56px; font-size: 25px; margin: 0; font-family: var(--p4-serif); }
.pp4-fpf-match { margin: 0 0 12px; font: 500 13px/1 var(--p4-sans); color: var(--text-2); }
.pp4-fpf-pct { font-family: var(--p4-serif); font-style: italic; font-weight: 600; font-size: 19px; color: var(--accent);
  margin-right: 3px; font-variant-numeric: tabular-nums; }
/* Warming (under 5 verified ratings on either side) — an honest, soft "warming up", NEVER a 0%. */
.pp4-fpf-match.pp4-fpf-warm { display: flex; flex-direction: column; gap: 3px; font-weight: 600; color: var(--text-2); }
.pp4-fpf-match.pp4-fpf-warm .pp4-fpf-warmsub { font-weight: 500; font-size: 11.5px; color: var(--text-3); }
.fpf-ring.fpf-ring-warm .fpf-track { stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-dasharray: 5 7; opacity: .9; }
.fpf-ring.fpf-ring-warm { animation: fpfWarmPulse 2.4s ease-in-out infinite; }
@keyframes fpfWarmPulse { 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .fpf-ring.fpf-ring-warm { animation: none; } }
body .pp4-fpf .fpf-name { font-family: var(--p4-serif); font-weight: 400; }
body .pp4-fpf .fpf-persona { font-family: var(--p4-serif); font-style: italic; font-size: 13.5px; color: var(--text-2); }
body .pp4-fpf .fpf-shared { font-family: var(--p4-serif); font-style: italic; }
body .pp4-fpf .fpf-sec-h, body .pp4-fpf .fpf-meal-dish, body .pp4-fpf .fpf-meal-at, body .pp4-fpf .fpf-chip { font-family: var(--p4-sans); }

/* Spectrum hue map — taste visuals only. Declared LAST so the per-axis hue wins
   over any component's neutral terracotta default at equal specificity. */
.pp4-h-heat { --hue: var(--taste-spice); }
.pp4-h-indulgence { --hue: var(--taste-richness); }
.pp4-h-adventure, .pp4-h-bold { --hue: var(--taste-adventure); }
.pp4-h-table { --hue: var(--taste-sharing); }

@media (prefers-reduced-motion: reduce) {
  .pp4-iris-a, .pp4-ax-fill { transition: none !important; }
  .pp4-fr-empty-cta:active { transform: none; }
}

/* ── R5 — Taste-DNA spacing: clear air between the knowledge band and whatever follows ── */


/* ── R5A — sticky menu CTA must be TAPPABLE (founder: "the button pops up a random
   item from the menu") — .rmenu-ccbar is pointer-events:none so its full-width
   gradient never blocks menu rows scrolling beneath it; pointer-events inherits,
   so the bare .rmenu-go / .rmenu-plan buttons were click-dead and taps fell through
   to the dish row under the bar. restaurant.js now wraps them in .rmenu-orderbar
   (pointer-events:auto); this re-enables hits on the buttons themselves too. ── */
.rmenu-ccbar .rmenu-go, .rmenu-ccbar .rmenu-plan { pointer-events: auto; }

/* ── R5B — table plan: who-eats-what chips + per-item refresh ────────────────
   The backend tags every plate with WHO it's really for (everyone / a named
   subset / one person). Gold "EVERYONE" = genuine common ground (every member
   scores it); porcelain named chips = that person's plate. The ↻ swaps a row
   for its next-best server-ranked alternate. */
.tbl5-who { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tbl5-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 9px 2.5px 3.5px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg);
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--text-2); line-height: 1.45; white-space: nowrap;
}
.tbl5-chip-i {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  background: var(--wash-warm); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 800; line-height: 1;
}
.tbl5-chip-all {
  padding: 3px 11px; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.62rem;
  color: #8A671C; border-color: #DCC288;
  background: linear-gradient(160deg, #F9F0D7, #F2E2B8);
}
.tbl5-swap {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--wash-warm); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.16s ease, color 0.16s ease;
}
.tbl5-swap svg { transition: transform 0.35s ease; }
.tbl5-swap:hover:not([disabled]) { background: var(--accent); color: var(--on-accent); }
.tbl5-swap:hover:not([disabled]) svg { transform: rotate(180deg); }
.tbl5-swap:active:not([disabled]) svg { transform: rotate(360deg); }
.tbl5-swap[disabled] { opacity: 0.32; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .tbl5-swap svg { transition: none; }
}

/* ── R5C ── Loyalty polish (founder feedback 2026-06-11): the concrete-gift line on
   every reward card, and the new-diner WELCOME flow — at most two welcome gifts,
   an aspirational rail of real tier-locked previews, and a compact "How Taste
   Points work" expandable. All scoped under .pl-page / .pl-reward — no bleed. */
.pl-rw-gift{font-size:12px;color:var(--pl-ink2);line-height:1.5;margin:-4px 0 7px}
.pl-rw-gift + .ly4-why{margin-top:-2px}
.pl-reward.is-locked .pl-rw-gift{color:var(--pl-ink3)}

/* aspirational previews — locked, but presented as the payoff, not a grey wall */
.pl-aspire{background:linear-gradient(135deg,#FFFDF8,#FBF3E4);border-color:var(--pl-line)}
.pl-aspire .pl-rw-thumb{filter:saturate(.82)}
.pl-aspire .pl-rw-title{color:#4A4036}
.pl-pill.unlocksat{color:#7A5B22;background:#F5EAD0}

/* (the welcome-gifts empty hint .pl-welc-none* was reaped 2026-07-09 — the v767
   .lyx-* Loyalty redesign renders no such card and zero references remained.) */

/* "How Taste Points work" — compact expandable */
.pl-earn{margin:20px 0 2px;background:#fff;border:1px solid var(--pl-line);border-radius:18px;padding:2px 16px}
.pl-earn summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:13px 0;font-size:13.5px;font-weight:800;color:var(--pl-espresso)}
.pl-earn summary::-webkit-details-marker{display:none}
.pl-earn-chev{width:16px;height:16px;stroke:var(--pl-ink3);fill:none;stroke-width:2.4;flex:none;transition:transform .2s ease}
.pl-earn[open] .pl-earn-chev{transform:rotate(180deg)}
.pl-earn ul{margin:0;padding:0 0 14px;list-style:none;display:flex;flex-direction:column;gap:9px}
.pl-earn li{font-size:12.5px;color:var(--pl-ink2);line-height:1.55;padding-left:17px;position:relative}
.pl-earn li::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--pl-terra)}
.pl-earn li b{color:var(--pl-espresso)}
@media (prefers-reduced-motion: reduce){
  .pl-earn-chev{transition:none}
}

/* (the 2026-06-12 vertical climb rail — .pl-climb + the whole .pl-cl-* family —
   was reaped 2026-07-09: the v767 .lyx-* Loyalty redesign replaced it with the
   ring ("The road to …") and zero JS/HTML references remained. The rung-gift
   card .pl-runggift below is still LIVE — loyalty.js renders it.) */
/* (the cold-start nudge .pl-cold* and the empty-table action .pl-empty-act were
   reaped 2026-07-09 — the v767 .lyx-* Loyalty redesign renders its own cold/empty
   states and zero .pl-cold*/.pl-empty-act references remained in frontend/.) */
/* a REAL tier-locked gift on its rung — compact, full-fidelity, wordmark-locked (LIVE) */
.pl-runggift{padding:9px;gap:11px;text-decoration:none;color:inherit;display:flex;align-items:center}
.pl-rg-thumb{width:54px;height:54px;border-radius:12px}
.pl-rg-title{font-size:14.5px;margin:2px 0 5px}
/* one-line toast (claim rejected → honest reason, never a silent vanish) — LIVE (loyalty.js sets .pl-toast via JS) */
.pl-toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,14px);z-index:1200;max-width:86vw;
  background:var(--pl-espresso);color:var(--pl-cream);font-size:13px;font-weight:600;padding:11px 18px;
  border-radius:999px;box-shadow:0 16px 40px rgba(0,0,0,.3);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s}
.pl-toast.show{opacity:1;transform:translate(-50%,0)}

/* ── R6D — noodl loader ─────────────────────────────────────────────────────
   The signature loading mark (markup from window.NoodlLoader.html in
   cuisine.js): the brand circle breathes while the cream noodle slurps
   through — draws itself left→right, overshoots with a little tail-flick,
   settles, holds a beat on the full logo, then slides out the right and
   loops (~1.4s). Trick: pathLength="100" + dasharray 100 100, one
   continuous dashoffset sweep 100 → −100 = draw-in then slurp-out.
   Layout: a flex column that centres inside whatever skeleton container
   each page already uses (height:100% of fixed-height skels, spans grid
   parents) so the swap to real content never jumps the layout. */
.ndl-load{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;width:100%;height:100%;min-height:150px;padding:10px 0;text-align:center;grid-column:1/-1}
.ndl-load.sm{gap:9px;min-height:88px;padding:6px 0}
.ndl-load-mark{width:64px;height:64px;flex:none;filter:drop-shadow(0 6px 14px rgba(194,80,47,.22))}
.ndl-load.sm .ndl-load-mark{width:44px;height:44px}
.ndl-load-mark svg{width:100%;height:100%;display:block}
.ndl-load-circle{transform-box:fill-box;transform-origin:center;animation:ndlBreathe 2.6s ease-in-out infinite}
.ndl-load-wave{stroke-dasharray:100 100;stroke-dashoffset:0;animation:ndlSlurp 1.4s infinite}
.ndl-load-cap{font:600 13px/1.45 var(--sans,'Plus Jakarta Sans',sans-serif);color:var(--text-2,#6E5F4F);
  letter-spacing:.01em;animation:ndlCapPulse 1.4s ease-in-out infinite}
.ndl-load.sm .ndl-load-cap{font-size:12px}
@keyframes ndlSlurp{
  0%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.55,.06,.35,1)}  /* bare circle… */
  46%{stroke-dashoffset:-7;animation-timing-function:cubic-bezier(.33,1.4,.6,1)}   /* drawn in + tail flicks past */
  60%,74%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.6,.04,.9,.55)} /* recoil → soft pause, full mark */
  100%{stroke-dashoffset:-100}                                                     /* slurped out through the right */
}
@keyframes ndlBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes ndlCapPulse{0%,100%{opacity:.62}50%{opacity:1}}
/* per-surface sizing so the loader fills the same space the old skeleton did */
.restaurant-grid .ndl-load{min-height:44vh}
.r-skel .ndl-load{min-height:300px}
@media (prefers-reduced-motion:reduce){
  .ndl-load-circle,.ndl-load-wave,.ndl-load-cap{animation:none}  /* static full logo */
}

/* ── R6C — the "places I like" layer: venue ♥ everywhere + Browse "Places you
   like" rail + the home quick-tile trio. Hearts write the SAME reaction store as
   the feed thumbs (venue_reactions); like = the positive reaction only. ───────── */

/* The heart — outline → filled terracotta, springy pop on like. Base variant sits
   top-right of a browse-card photo, beside the price pill. */
.r6c-heart { position: absolute; top: 14px; right: 14px; z-index: 3;
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: none; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--surface, #FFFDF8) 96%, transparent);   /* NO backdrop-filter — one blurred heart per card = ~500 GPU blur layers here → iOS crash */
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(54,36,18,.10));
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease-out, ease); }
.r6c-heart svg { display: block; }
.r6c-heart svg path { fill: none; stroke: var(--accent, #C2502F); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round; transition: fill .14s ease; }
.r6c-heart:active { transform: scale(.9); }
.r6c-heart.on svg path { fill: var(--accent, #C2502F); }
.r6c-heart.pop svg { animation: r6cPop .46s cubic-bezier(.2, 2.2, .45, 1); }
@keyframes r6cPop { 0% { transform: scale(.55); } 58% { transform: scale(1.26); } 100% { transform: scale(1); } }

/* Make room: when a card carries a heart, its price pill steps left of it. */
.rcard-media:has(.r6c-heart) .rcard-price { right: 60px; }
body.fal-on .rcard-media:has(.r6c-heart) .rcard-price { right: 62px; }

/* Venue-page hero variant — lives in a top-right action cluster with Share (the
   cluster takes over .r-share's old absolute slot; Share itself goes static). */
.r6c-hero-actions { position: absolute; top: 16px; right: 16px; z-index: 4;
  display: flex; align-items: center; gap: 8px; }
.r6c-hero-actions .r-share { position: static; }
.r6c-heart-hero { position: static; width: 34px; height: 34px;
  background: rgba(20,14,10,0.42); box-shadow: none; }
.r6c-heart-hero svg path { stroke: #F6EFE4; }
.r6c-heart-hero:hover { background: rgba(20,14,10,0.58); }
.r6c-heart-hero.on { background: rgba(255,247,238,0.94); }
.r6c-heart-hero.on svg path { stroke: var(--accent, #C2502F); }

/* "Places you like" — photo-chip rail at the top of Browse (signed-in only). */
.r6c-likes { margin: 16px 0 4px; }
.r6c-likes-head { margin: 0 0 10px; }
.r6c-likes-title { display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font: 600 15px/1.2 var(--fal-sans, var(--sans, sans-serif));
  color: var(--text, #2A2018); letter-spacing: -.01em; }
.r6c-likes-heart, .r6c-empty-heart { display: inline-flex; vertical-align: -2px; }
.r6c-likes-heart svg, .r6c-empty-heart svg { width: 14px; height: 14px; }
.r6c-likes-heart svg path { fill: var(--accent, #C2502F); stroke: var(--accent, #C2502F); stroke-width: 2; }
.r6c-rail { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.r6c-rail::-webkit-scrollbar { display: none; }
.r6c-chip { flex: none; width: 152px; scroll-snap-align: start; text-decoration: none;
  background: var(--surface, #FFFDF8); border: 1px solid var(--line, #EBE0CC);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm, 0 2px 8px rgba(54,36,18,.08));
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease-out, ease), border-color .16s ease; }
.r6c-chip:hover { border-color: #E2BFA6; }
.r6c-chip:active { transform: scale(.97); }
.r6c-chip-media { display: block; position: relative; height: 88px; background-color: #EAD9C3;
  background-size: cover; background-position: center 40%; }
.r6c-chip-glyph { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 30px; opacity: .55; }
.r6c-chip-body { display: block; padding: 9px 11px 11px; }
.r6c-chip-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font: 600 13.5px/1.25 var(--fal-sans, var(--sans, sans-serif));
  color: var(--text, #2A2018); letter-spacing: -.01em; }
.r6c-chip-match { display: block; margin-top: 4px; font: 700 11px/1 var(--fal-sans, var(--sans, sans-serif));
  color: var(--accent, #C2502F); letter-spacing: .02em; }
/* Empty state — one quiet line. */
.r6c-likes.is-empty { margin: 12px 0 2px; }
.r6c-empty { margin: 0; font: 500 13px/1.5 var(--fal-sans, var(--sans, sans-serif));
  color: var(--text-3, #A89A85); }
.r6c-empty-heart svg path { fill: none; stroke: var(--accent, #C2502F); stroke-width: 2.2; }

@media (prefers-reduced-motion: reduce) {
  .r6c-heart, .r6c-chip { transition: none; }
  .r6c-heart.pop svg { animation: none; }
}

/* ── R6B ── Unified rating flow: honest throttle + error states on both rating
   surfaces (Passport verdict queue + home quick-rate rail). The anti-gaming 429
   used to be swallowed silently — the buttons looked dead. Now the backend's own
   reason shows, then the queue moves on; nothing fake-clears. */
/* verdict loading spinner — the "Logging your verdict…" beat before logged() (shared micro-flow with the home rail) */
.pq-spin { display: inline-block; width: 30px; height: 30px; border-radius: 999px; border: 3px solid var(--line, #e5ddd0); border-top-color: var(--accent, #C2502F); animation: spin .7s linear infinite; margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .pq-spin { animation-duration: 1.4s; } }
.pq-blocked { text-align: center; padding: 14px 0 8px; }
.pq-blocked-main { font: 700 16px/1.25 var(--sans, sans-serif); color: var(--text, #2A2018); margin: 0 0 6px; }
.pq-blocked-sub { font: 500 13.5px/1.5 var(--sans, sans-serif); color: var(--text-2, #6B5D4B); margin: 0 auto; max-width: 34ch; }
body.fal-on .pq-blocked-main, body.fal-on .pq-blocked-sub { font-family: var(--fal-sans, var(--sans, sans-serif)); }
.pq-err { margin: 12px 0 0; text-align: center; font: 600 12.5px/1.4 var(--sans, sans-serif); color: var(--accent, #C2502F); }
/* Points-held card — a saved verdict that earns no points (repeat within 14 days). Reuses the
   celebratory .pq-logged layout, just with a calmer, roomier reason line so it reads as info. */
.pq-held .pq-logged-sub, body.fal-on .pq-held .pq-logged-sub { color: var(--text-2, #6B5D4B); max-width: 32ch; margin: 0 auto; }
.pq-caught-held { font: 500 13px/1.5 var(--sans, sans-serif); color: var(--text-2, #6B5D4B); margin: 0 auto 8px; max-width: 36ch; }
body.fal-on .pq-err, body.fal-on .pq-caught-held { font-family: var(--fal-sans, var(--sans, sans-serif)); }
.plhome .pl-rc-blocked, .pl-rc-blocked { margin: 10px 0 0; font: 600 12.5px/1.45 var(--sans, sans-serif); color: var(--accent, #C2502F); }
.plhome .pl-ratecard .pl-star:disabled { opacity: .45; cursor: default; }


/* ===== R6 — COUPON ENGINE (loyalty page) ====================================
   The VIP "MADE FOR YOU" set-menu gift card (obsidian-gold, matches the
   tastemaker tier tokens) + the honest "ends in N days" expiry chip.
   All scoped under .pl-vipgift / .pl-ends — no bleed. */
.pl-pill.pl-ends{color:#8A5A1F;background:#F6E7CC;border:1px solid #E8CD9C}
.pl-vipgift{display:block;padding:0;border:1px solid #C9A45C;border-radius:22px;
  background:linear-gradient(150deg,#1D1812,#2A2218 55%,#1A150F);
  box-shadow:0 20px 44px -20px rgba(160,110,40,.62);overflow:hidden;position:relative}
.pl-vipgift::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% -10%,rgba(231,201,136,.20),transparent 55%)}
.pl-vipgift::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,236,200,.10) 45%,transparent 80%);
  transform:skewX(-18deg);animation:plvgsheen 5.2s ease-in-out infinite;pointer-events:none}
@keyframes plvgsheen{0%,55%{left:-70%}85%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.pl-vipgift::after{animation:none}}
.pl-vipgift .pl-vg-main{display:block;padding:17px 18px 6px;color:#F3E6CB;text-decoration:none}
.pl-vg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.pl-vg-eyebrow{font:800 10.5px/1 var(--sans,sans-serif);letter-spacing:.14em;text-transform:uppercase;
  color:#E7C988;border:1px solid rgba(231,201,136,.45);border-radius:999px;padding:5px 10px;white-space:nowrap}
.pl-vg-venue{font:700 12.5px/1.2 var(--sans,sans-serif);color:rgba(243,230,203,.62);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-vg-title{margin:0 0 4px;font:600 21px/1.15 var(--serif,Georgia,serif);color:#F7EDD6;letter-spacing:-.01em}
.pl-vg-why{margin:0 0 11px;font:italic 500 12.5px/1.45 var(--sans,sans-serif);color:rgba(243,230,203,.66)}
.pl-vg-items{list-style:none;margin:0 0 12px;padding:10px 12px;border:1px solid rgba(231,201,136,.26);
  border-radius:14px;background:rgba(0,0,0,.22);display:flex;flex-direction:column;gap:7px}
.pl-vg-items li{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pl-vg-dish{font:600 13.5px/1.3 var(--sans,sans-serif);color:#F3E6CB}
.pl-vg-p{font:600 12px/1 var(--sans,sans-serif);color:rgba(243,230,203,.55);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-vg-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 11px}
.pl-vg-their{font:600 12.5px/1.2 var(--sans,sans-serif);color:rgba(243,230,203,.55)}
.pl-vg-their s{text-decoration-color:rgba(231,160,120,.8)}
.pl-vg-arrow{color:#E7C988;font-size:14px}
.pl-vg-yours{font:600 12.5px/1.2 var(--sans,sans-serif);color:rgba(243,230,203,.78)}
.pl-vg-yours b{font:700 19px/1 var(--serif,Georgia,serif);color:#E7C988;letter-spacing:-.01em;margin-left:2px}
.pl-vg-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:8px}
.pl-pill.pl-vg-once{color:#E7C988;background:rgba(231,201,136,.13);border:1px solid rgba(231,201,136,.32)}
.pl-vipgift .pl-pill.pl-ends{color:#FFD9A8;background:rgba(194,110,40,.22);border-color:rgba(231,160,90,.45)}
.pl-vg-cta{padding:0 18px 16px;display:flex;justify-content:flex-end}
.pl-claim.pl-vg-claim{background:linear-gradient(135deg,#E7C988,#C9A45C);color:#241B10;
  box-shadow:0 10px 22px -10px rgba(231,201,136,.55)}
.pl-code.pl-vg-code{background:rgba(231,201,136,.14);color:#E7C988;border:1.5px dashed rgba(231,201,136,.5)}

/* ── R7D ── Effortless tables: one-tap saved-table (party preset) chips in BOTH
   group pickers + the companion↔account linking UI (My Table). Preset chips sit
   ABOVE the individual people; .on = the whole table is selected, .part = the
   host edited the selection after the tap (dashed = "partially this table").
   All tokens reuse the shared fal/group vocabulary — no new colors. */
.grp-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.grp-preset {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 18px; border-radius: var(--r-pill, 999px);
  border: 1.5px solid var(--line-2, var(--line)); background: var(--surface);
  cursor: pointer; transition: all 0.16s ease;
  font-family: var(--sans); font-weight: 700; font-size: 0.95rem; color: var(--text);
}
.grp-preset:hover { border-color: var(--accent); transform: translateY(-1px); }
.grp-preset:active { transform: scale(0.97); }
.grp-preset:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.grp-preset-bolt { display: inline-flex; color: var(--accent); }
.grp-preset-c { font-weight: 600; font-size: 0.85rem; color: var(--text-3); }
.grp-preset.on { background: var(--accent-grad); border-color: transparent; color: var(--on-accent); }
.grp-preset.on .grp-preset-bolt, .grp-preset.on .grp-preset-c { color: var(--on-accent); }
.grp-preset.part {
  border-style: dashed; border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.grp-preset.part .grp-preset-c::after { content: " · edited"; font-size: 0.72rem; color: var(--text-3); }

/* My Table — link badges on companion cards */
.mt-linkbadge {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-family: var(--fal-sans); font-weight: 700; font-size: 11px;
  color: var(--text-3); background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px dashed var(--line-2, var(--line)); border-radius: 999px; padding: 4px 10px;
  margin: 2px 0 0;
}
.mt-linkbadge-on {
  color: var(--accent-deep); border-style: solid;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

/* My Table — the consent inbox ("X wants to link 'Sara' to your account") */
.mt-linkreqs { display: flex; flex-direction: column; gap: 10px; }
.mt-linkreq {
  display: flex; gap: 14px; align-items: flex-start;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 16px; padding: 16px;
}
.mt-linkreq-ava { flex: none; }
.mt-linkreq-main { min-width: 0; }
.mt-linkreq-t { font-family: var(--fal-sans); font-size: 14.5px; line-height: 1.45; color: var(--text); margin: 0 0 3px; }
.mt-linkreq-h { color: var(--text-3); font-size: 12.5px; }
.mt-linkreq-s { font-family: var(--fal-sans); font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin: 0 0 10px; }
.mt-linkreq-acts { display: flex; gap: 10px; }
.mt-lr-accept {
  font-family: var(--fal-sans); font-weight: 700; font-size: 13px;
  background: var(--accent); color: var(--on-accent); border: none;
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
}
.mt-lr-accept:hover { filter: brightness(1.05); }
.mt-lr-decline {
  font-family: var(--fal-sans); font-weight: 600; font-size: 13px;
  background: none; color: var(--text-3); border: 1px solid var(--line-2, var(--line));
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
}
.mt-lr-accept:disabled, .mt-lr-decline:disabled { opacity: 0.5; cursor: default; }

/* Companion editor — the "Are they on Noodl?" link block */
.mt-linkbox { border-top: 1px solid var(--line); padding-top: 16px; }
.mt-linknote { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-family: var(--fal-sans); font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin: 0 0 4px; }
.mt-linknote svg { align-self: center; color: var(--accent); flex: none; }
.mt-linkfriends { margin-bottom: 4px; }
.mt-linkrow { display: flex; gap: 8px; align-items: stretch; }
.mt-linkrow .mt-input { flex: 1; min-width: 0; }
.mt-linkrow .mt-addbtn { white-space: nowrap; }
.mt-linkerr { font-family: var(--fal-sans); font-size: 12.5px; color: #B23A2A; margin: 2px 0 0; }

/* ── R7C — plant-based leaf chip (menu dish rows / Vegetarian lens) ──
   Explicit plant-based dishes (Switch™/Beyond/Impossible-style imitations,
   "vegan" in the dish identity) read distinctly from ordinary veg: a quiet
   leaf-green pill, uppercase like the other status chips. */
.rchip-plant { background: #EAF4E4; color: #2E6E3C; border: 1px solid #CFE5C6; font-weight: 800; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }

/* ── R7B ── Rating integrity + photo privacy + My Food load states ──────────
   1) Quick-rate honest finish: Done/Skip await the server commit ("Saving…"),
      so disabled states need to read as intentional, not broken.
   2) My Food tab: a real load-error state with retry (the tab used to wedge
      blank on a failed/raced first fetch until a full page refresh).
   All scoped (.plhome / .fp9-*) — no bleed. */
.plhome .pl-done:disabled, .plhome .pl-skip2:disabled {
  opacity: .55; cursor: progress; filter: none; transform: none;
}
.plhome .pl-notorder:disabled { opacity: .5; cursor: progress; }
.fp9-loaderr { text-align: center; padding: 34px 18px; background: var(--surface, #fff);
  border: 1px solid var(--line, #E8DECF); border-radius: 18px; }
.fp9-loaderr-t { font: 700 16px/1.3 var(--serif, Georgia, serif); color: var(--ink, #2A2018); margin: 0 0 6px; }
.fp9-loaderr-s { font: 500 13px/1.5 var(--fal-sans, var(--sans, sans-serif)); color: var(--text-2, #6B5D4B);
  margin: 0 auto 16px; max-width: 34ch; }
.fp9-retry { font: 700 13.5px/1 var(--fal-sans, var(--sans, sans-serif)); background: var(--accent, #C2502F);
  color: var(--on-accent, #FFF7EE); border: none; border-radius: 999px; padding: 11px 22px; cursor: pointer; }
.fp9-retry:hover { filter: brightness(1.05); }

/* ── R8C ── Lifestyle section (passport Taste-DNA tab) ───────────────────────
   The tier×moment patterns lifestyle.py PROVED (≥3 supporting visits + a real
   band majority per cell) under the Taste Spectrum: porcelain card, Fraunces
   value words hue-tinted by band ($$$+ = richness, $–$$ = sharing, big night =
   adventure — taste visuals only, per design-reference). Scoped .lf8-*. */
.lf8-card { display: flex; flex-direction: column; background: var(--p4-surface); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow-sm); padding: 8px 18px; }
.lf8-row { --hue: var(--accent); display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; }
.lf8-row + .lf8-row { border-top: 1.5px dashed var(--line-2); }
.lf8-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lf8-when { font: 600 14.5px/1.2 var(--p4-sans); letter-spacing: -.01em; color: var(--p4-ink); }
.lf8-note { font: italic 500 12.5px/1.2 var(--p4-serif); color: var(--hue); }
.lf8-support { font: 500 11.5px/1.3 var(--p4-sans); color: var(--text-3); font-variant-numeric: tabular-nums; }
.lf8-val { display: inline-flex; align-items: baseline; gap: 7px; flex: none; }
.lf8-word { font: italic 600 17px/1 var(--p4-serif); letter-spacing: -.01em; color: var(--hue); }
.lf8-d { font: 700 11px/1 var(--p4-sans); letter-spacing: .14em; color: color-mix(in srgb, var(--hue) 62%, var(--text-3)); }
.lf8-empty { font: italic 500 13.5px/1.55 var(--p4-serif); color: var(--text-3); margin: 0; padding: 14px 2px; }
/* band hues — the sanctioned spectrum palette, tier-coded */
.lf8-b-premium { --hue: var(--taste-richness); }
.lf8-b-easy { --hue: var(--taste-sharing); }
.lf8-b-night { --hue: var(--taste-adventure); }

/* ========================================================================
   TASTE DNA - desktop full-width revamp (Editorial Dashboard, v531).
   On wide screens the passport breaks out of the 620px column and the region
   below the spectrum button becomes a full-width dashboard: wide rating banner,
   cluster card row, 6-up dimension gallery, 2-col "how you go out". Mobile is
   left untouched (compact single column). Re-skins existing markup only; all JS
   wiring (rating dots, quiz, dim sheets, share) is preserved.
   ======================================================================== */
@media (min-width: 900px) {
  /* widen the passport canvas, only on the passport page */
  body.fal-on #app:has(.passport) { max-width: 1200px; }
  /* the other tabs keep their intended narrow centered column */
  .passport #tab-library, .passport #tab-collection, .passport #tab-friends { max-width: 660px; margin-left: auto; margin-right: auto; }
  /* hero + identity stay a centered intro above the wide dashboard */
  .dna2 .d2-hero, .dna2 .d2-identity { max-width: 680px; margin-left: auto; margin-right: auto; }

  /* section heads: left-aligned over the wide content */
  .dna2 .d2-sec { margin-top: 50px; }
  .dna2 .d2-sec > .d2-sech { justify-content: space-between; text-align: left; }
  .dna2 .d2-sec > .d2-sech .meta { display: inline; }
  .dna2 .d2-sec > .d2-subh { text-align: left; max-width: 54ch; margin-left: 0; margin-right: 0; }
  .dna2 .d2-sech h2 { font-size: 26px; }

  /* ---- rating banner (wide + low) ---- */
  .dna2 .d2-rate { max-width: none; margin: 26px 0 0; }
  .dna2 .d2-rate .pq-head { margin-bottom: 12px; }
  .pp4 .pq-card {
    padding: 24px 36px; border-radius: 24px;
    display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 56px;
    background: linear-gradient(110deg, #FFFFFF 0%, #FFFDF8 50%, #FBEDE6 122%);
    border: 1px solid var(--line); box-shadow: var(--shadow-md);
    position: relative; overflow: hidden;
  }
  .pp4 .pq-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--accent), var(--accent-deep)); }
  .pp4 .pq-card .pq-info { min-width: 0; }
  .pp4 .pq-card .pq-cuisine { font-size: 13px; margin: 0 0 4px; }
  .pp4 .pq-card .pq-dish { font-size: 30px; line-height: 1.04; margin: 0 0 5px; }
  .pp4 .pq-card .pq-place { font-size: 15px; margin: 0; }
  .pp4 .pq-card .pq-rate-col { width: 340px; display: flex; flex-direction: column; gap: 9px; }
  .pp4 .pq-card .pq-scale { justify-content: space-between; gap: 8px; }
  .pp4 .pq-card .pq-dot { width: 52px; height: 52px; }
  .pp4 .pq-card .pq-dot span { font-family: var(--d2-serif); font-size: 19px; }
  .pp4 .pq-card .pq-foot { margin-top: 2px; }
  .pp4 .pq-card .pq-skip { margin: 4px 0 0; align-self: center; }

  /* ---- cluster ring cards (row of 3) ---- */
  .dna2 .d2-clusters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .dna2 .d2-cluster { padding: 20px; border-radius: 18px; }

  /* ---- dimension gallery (6 across) ---- */
  .dna2 .d2-dimgrid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .dna2 .d2-dim { padding: 16px; border-radius: 18px; min-height: 0; align-items: stretch; }
  .dna2 .d2-dim .glyph { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 14px; margin: 0; }
  .dna2 .d2-dim .nm { font-family: var(--d2-serif); font-size: 16px; font-weight: 600; margin-top: 13px; }
  .dna2 .d2-dim .st { font-size: 12.5px; margin-top: 6px; }
  .dna2 .d2-dim .corner { top: 12px; right: 12px; }

  /* ---- how you go out (patterns | stats) ---- */
  .dna2 .d2-sec:has(.d2-life) { display: grid; grid-template-columns: 1.6fr 1fr; column-gap: 24px; row-gap: 16px; align-items: start; }
  .dna2 .d2-sec:has(.d2-life) > .d2-sech, .dna2 .d2-sec:has(.d2-life) > .d2-subh { grid-column: 1 / -1; }
  .dna2 .d2-sec:has(.d2-life) .d2-stats { margin-top: 0; grid-template-columns: 1fr 1fr; align-self: stretch; }
  .dna2 .d2-sec:has(.d2-life) .d2-stat + .d2-stat::before { display: none; }
  .dna2 .d2-sec:has(.d2-life) .d2-stat { padding: 20px 12px; }
  .dna2 .d2-sec:has(.d2-life) .d2-stat:nth-child(n+3) { border-top: 1px solid var(--hair-soft); }
  .dna2 .d2-sec:has(.d2-life) .d2-stat .n { font-size: 34px; }

  /* ---- share ---- */
  .dna2 .d2-share { max-width: 360px; margin: 50px auto 0; }
  .dna2 .d2-share-note { margin-top: 12px; }
}

/* ========================================================================
   FRIENDS - "Supper Club" (fr9 v2), full-width on desktop. Taste-twin hero +
   rich circle grid + side rail (requests, add, handle, activity). Mobile
   collapses to one clean column. Scoped under .fr9.sc; reuses .tt/.fr-* hooks.
   ======================================================================== */
@media (min-width: 900px){ .passport #tab-friends{ max-width:none; margin-left:0; margin-right:0; } }

.fr9.sc{
  --sc-terra:#C2502F; --sc-deep:#A8431F; --sc-ink:#23150D; --sc-ink2:#4A3A2E;
  --sc-mut:#8C7A6B; --sc-cream:#FAF5EC; --sc-cream2:#F4ECDD; --sc-sand:#EFE4D2;
  --sc-sand2:#E6D8C2; --sc-line:#EDE2D0;
  --sc-sh-sm:0 1px 2px rgba(63,38,20,.05),0 2px 8px rgba(63,38,20,.04);
  --sc-sh-md:0 2px 6px rgba(63,38,20,.06),0 14px 40px rgba(63,38,20,.07);
  font-family:var(--fal-sans,'Plus Jakarta Sans',sans-serif); color:var(--sc-ink);
}
.fr9.sc *{ box-sizing:border-box; }
.fr9.sc h1,.fr9.sc h2,.fr9.sc h3{ font-family:'Fraunces',Georgia,serif; }
.fr9.sc .heat{ background:linear-gradient(150deg,#C2502F,#A8431F); }
.fr9.sc .comfort{ background:linear-gradient(150deg,#B97A3C,#A8682F); }
.fr9.sc .advent{ background:linear-gradient(150deg,#A87C3C,#8A5E24); }
.fr9.sc .host{ background:linear-gradient(150deg,#8C5A3A,#6E4226); }

.fr9.sc .sc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:2px 0 28px; }
.fr9.sc .sc-h1{ font-weight:600; font-size:clamp(30px,4vw,46px); line-height:1.02; letter-spacing:-.02em; }
.fr9.sc .sc-h1 em{ font-style:italic; color:var(--sc-terra); }
.fr9.sc .sc-sub{ color:var(--sc-ink2); font-size:15.5px; max-width:48ch; margin-top:9px; }
.fr9.sc .sc-stats{ display:flex; gap:28px; align-items:flex-end; flex-shrink:0; }
.fr9.sc .sc-stat .num{ font-family:'Fraunces',serif; font-weight:600; font-size:32px; line-height:1; color:var(--sc-terra); }
.fr9.sc .sc-stat .num small{ font-size:18px; }
.fr9.sc .sc-stat .lbl{ font-size:12.5px; color:var(--sc-mut); margin-top:4px; }

.fr9.sc .sc-grid{ display:grid; grid-template-columns:minmax(0,1.62fr) minmax(280px,.95fr); gap:26px; align-items:start; }
/* P0-1 (one social home): the tab is twin-hero + Community hand-off only — no sidebar */
.fr9.sc .sc-grid-solo{ grid-template-columns:minmax(0,1fr); }
.fr9.sc .sc-golink{
  display:flex; align-items:center; gap:14px; margin-top:18px; padding:16px 18px;
  border:1px solid var(--sc-line); border-radius:16px; background:#FFFDF8;
  text-decoration:none; color:inherit; cursor:pointer; box-shadow:var(--sc-sh-sm, 0 1px 2px rgba(63,38,20,.05));
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fr9.sc .sc-golink:hover{ border-color:color-mix(in srgb, var(--sc-terra) 34%, var(--sc-line)); box-shadow:0 8px 22px -14px rgba(63,38,20,.3); }
.fr9.sc .sc-golink-ic{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--sc-terra) 10%, #fff); color:var(--sc-terra); }
.fr9.sc .sc-golink-ic svg{ width:20px; height:20px; }
.fr9.sc .sc-golink-tx{ flex:1; min-width:0; }
.fr9.sc .sc-golink-t{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-weight:700; font-size:15px; }
.fr9.sc .sc-golink-s{ display:block; font-size:12.5px; color:var(--sc-mut); margin-top:2px; }
.fr9.sc .sc-golink-go{ flex:none; font-size:18px; color:var(--sc-terra); }
.fr9.sc .sc-golink-badge{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:3px 8px; border-radius:999px; background:color-mix(in srgb, var(--sc-terra) 14%, #fff); color:var(--sc-deep); }
.fr9.sc .sc-main{ display:flex; flex-direction:column; gap:26px; min-width:0; }
.fr9.sc .sc-side{ display:flex; flex-direction:column; gap:18px; }
.fr9.sc .sc-sectitle{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.fr9.sc .sc-sectitle h2{ font-weight:600; font-size:21px; letter-spacing:-.01em; }
.fr9.sc .sc-sectitle .meta{ font-size:13px; color:var(--sc-mut); }

.fr9.sc .sc-twin{ position:relative; overflow:hidden; padding:30px 34px 32px; border-radius:24px; border:1px solid var(--sc-line); box-shadow:var(--sc-sh-md); background:radial-gradient(620px 360px at 18% -30%,#FFF3E8 0%,rgba(255,243,232,0) 60%),linear-gradient(180deg,#FFFDF8,#FBF4E9); }
.fr9.sc .sc-twin::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--sc-terra),var(--sc-deep)); }
.fr9.sc .sc-twin-tag{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--sc-deep); font-weight:600; margin-bottom:18px; }
.fr9.sc .sc-twin-tag svg{ width:16px; height:16px; }
.fr9.sc .sc-twin-more{ position:absolute; top:22px; right:20px; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--sc-mut); border:none; background:none; cursor:pointer; }
.fr9.sc .sc-twin-more:hover{ background:var(--sc-cream2); color:var(--sc-ink); }
.fr9.sc .sc-twin-more svg{ width:18px; height:18px; }
.fr9.sc .sc-twin-body{ display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center; }
.fr9.sc .sc-ringwrap{ position:relative; width:230px; height:172px; flex-shrink:0; }
.fr9.sc .sc-ringsvg{ position:absolute; top:0; left:50%; transform:translateX(-50%); }
.fr9.sc .sc-ringcenter{ position:absolute; inset:0; left:50%; transform:translateX(-50%); width:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.fr9.sc .sc-ring-pct{ font-family:'Fraunces',serif; font-weight:600; font-size:46px; line-height:.95; letter-spacing:-.02em; }
.fr9.sc .sc-ring-pct small{ font-size:22px; color:var(--sc-terra); }
/* The hero reuses the .tt/.tt-arc/.tt-pct reveal hooks, so the LEGACY fal-on
   taste-twin rules (the old friends-mockup block, ~line 9425) leak in on every
   fal page (passport included): .tt-pct's position:absolute painted the digits
   OVER the <small>%</small> (the reported mangled-% bug), and .tt-arc's CSS
   stroke/stroke-width:3.5 beat the SVG's stroke="url(#sctg)" stroke-width="11"
   presentation attributes, thinning the arc. Neutralize both here (higher
   specificity, later in file) — the ring center is honest in-flow text. */
.fr9.sc .sc-ring-pct .tt-pct{ position:static; inset:auto; display:inline; font:inherit; color:inherit; }
.fr9.sc .tt-arc{ stroke:url(#sctg); stroke-width:11; filter:none; }
.fr9.sc .sc-ring-warm svg{ width:34px; height:34px; color:var(--sc-terra); }
.fr9.sc .sc-ring-sub{ font-size:11.5px; color:var(--sc-mut); margin-top:4px; line-height:1.25; }
.fr9.sc .sc-twinav{ position:absolute; top:50%; transform:translateY(-50%); width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:24px; color:#fff; box-shadow:0 6px 16px rgba(63,38,20,.18); border:3px solid #FFFDF8; }
.fr9.sc .sc-twinav.you{ left:-6px; background:linear-gradient(150deg,#3D2A1C,#23150D); }
.fr9.sc .sc-twinav.them{ right:-6px; }
.fr9.sc .sc-twinav .who{ position:absolute; bottom:-19px; left:50%; transform:translateX(-50%); font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:600; color:var(--sc-mut); white-space:nowrap; }
/* identity render (photo-over-buddy): an INNER clip disc — clipping the .sc-twinav
   itself would eat the .who label that hangs below it */
.fr9.sc .sc-twinav-in{ position:absolute; inset:0; border-radius:50%; overflow:hidden; display:grid; place-items:center; }
/* "Ranked by taste" + leaderboard — moved here from Community (2026-07-28).
   Same cm- row anatomy; the supper-club shell already pads, so the section
   sheds its Community page gutters, and leaderboard rows tap through. */
.fr9.sc .sc-moved{ padding-left:0; padding-right:0; }
/* The move carried the cm- CLASSES but not the design tokens they read: --fg1/--fg2/
   --fg3/--tint are scoped to .plhome (Community) and .r-body, and the Passport defines
   neither. An undefined custom property in `color:` isn't ignored — it makes the
   property INHERIT, so every cm- name inside the circle's <a> rows fell through to the
   browser's default link BLUE (measured rgb(0,0,238)), while the leaderboard's <div>
   rows inherited dark text and looked fine by luck. Re-declaring the four here (the
   .plhome values, so the block renders exactly as it was designed) fixes the whole
   cm- family at the wrapper instead of patching colours row by row. */
.sc-moved{
  --fg1:#2A2018;
  --fg2:color-mix(in srgb, #2A2018 66%, #F6EFE4);
  --fg3:color-mix(in srgb, #2A2018 44%, #F6EFE4);
  --tint:rgba(194, 80, 47, .10);
}
.fr9.sc .cm-lbrow[data-fid]{ cursor:pointer; }
.fr9.sc .sc-twin-info{ min-width:0; }
.fr9.sc .sc-twin-name{ font-family:'Fraunces',serif; font-weight:600; font-size:28px; line-height:1.05; letter-spacing:-.01em; }
.fr9.sc .sc-twin-handle{ color:var(--sc-mut); font-size:14px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:500; }
.fr9.sc .sc-twin-arch{ display:inline-flex; align-items:center; gap:7px; margin-top:11px; background:#fff; border:1px solid var(--sc-sand); border-radius:999px; padding:5px 13px 5px 7px; font-size:13.5px; font-weight:600; }
.fr9.sc .ad{ width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.fr9.sc .ad svg{ width:11px; height:11px; color:#fff; }
.fr9.sc .sc-twin-why{ margin-top:15px; font-size:15.5px; color:var(--sc-ink2); line-height:1.55; max-width:52ch; }
.fr9.sc .sc-twin-why b{ color:var(--sc-ink); font-weight:600; }
.fr9.sc .sc-overlap{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.fr9.sc .sc-ov{ display:inline-flex; align-items:center; gap:6px; background:var(--sc-cream); border:1px solid var(--sc-line); border-radius:999px; padding:6px 12px; font-size:13px; color:var(--sc-ink2); font-weight:500; }
.fr9.sc .sc-ov .lab{ color:var(--sc-mut); }
.fr9.sc .sc-twin-cta{ margin-top:20px; display:flex; gap:11px; flex-wrap:wrap; }
.fr9.sc .sc-btn{ display:inline-flex; align-items:center; gap:9px; justify-content:center; border-radius:12px; font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; transition:transform .15s,box-shadow .2s,border-color .2s,color .2s; }
.fr9.sc .sc-btn svg{ width:17px; height:17px; }
.fr9.sc .sc-btn-primary{ background:linear-gradient(180deg,var(--sc-terra),var(--sc-deep)); color:#fff; padding:13px 22px; border:none; box-shadow:0 6px 16px rgba(168,67,31,.26); }
.fr9.sc .sc-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 9px 22px rgba(168,67,31,.32); }
.fr9.sc .sc-btn-ghost{ background:#fff; border:1px solid var(--sc-sand); color:var(--sc-ink); padding:12px 18px; }
.fr9.sc .sc-btn-ghost:hover{ border-color:var(--sc-terra); color:var(--sc-terra); }

.fr9.sc .sc-circle{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.fr9.sc .sc-fcard{ position:relative; display:flex; flex-direction:column; background:#FFFDF8; border:1px solid var(--sc-line); border-radius:18px; padding:20px; box-shadow:var(--sc-sh-sm); cursor:pointer; transition:transform .18s,box-shadow .25s,border-color .2s; }
.fr9.sc .sc-fcard:hover{ transform:translateY(-3px); box-shadow:var(--sc-sh-md); border-color:var(--sc-sand2); }
.fr9.sc .sc-fcard-top{ display:flex; align-items:flex-start; gap:13px; }
.fr9.sc .sc-fav{ width:52px; height:52px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:22px; color:#fff; box-shadow:0 4px 12px rgba(63,38,20,.16); }
.fr9.sc .sc-fid{ flex:1; min-width:0; }
.fr9.sc .sc-fname{ font-family:'Fraunces',serif; font-weight:600; font-size:18px; line-height:1.1; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr9.sc .sc-fhandle{ color:var(--sc-mut); font-size:13px; margin-top:1px; }
.fr9.sc .sc-farch{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--sc-ink2); }
.fr9.sc .sc-farch .ad{ width:15px; height:15px; } .fr9.sc .sc-farch .ad svg{ width:9px; height:9px; }
.fr9.sc .sc-fmatch{ flex-shrink:0; text-align:right; }
.fr9.sc .sc-fmatch .pct{ font-family:'Fraunces',serif; font-weight:600; font-size:26px; line-height:1; color:var(--sc-terra); }
.fr9.sc .sc-fmatch .pct small{ font-size:15px; }
.fr9.sc .sc-fmatch .lab{ font-size:11px; color:var(--sc-mut); margin-top:2px; }
.fr9.sc .sc-fwarm{ flex-shrink:0; text-align:right; min-width:96px; margin-right:30px; }   /* clear the absolute ••• menu (same as .has-match .sc-fmatch) so the progress bar doesn't sit under it */
.fr9.sc .sc-warmbar{ height:6px; width:84px; border-radius:99px; background:var(--sc-sand); overflow:hidden; margin-left:auto; position:relative; }
.fr9.sc .sc-warmbar i{ position:absolute; inset:0 auto 0 0; border-radius:99px; background:linear-gradient(90deg,#B97A3C,var(--sc-terra)); }
.fr9.sc .sc-warm-lab{ font-size:11px; color:var(--sc-deep); font-weight:600; margin-top:6px; }
.fr9.sc .sc-warm-sub{ font-size:10.5px; color:var(--sc-mut); margin-top:1px; }
.fr9.sc .sc-fmenu{ position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--sc-mut); border:none; background:none; cursor:pointer; }
.fr9.sc .sc-fmenu:hover{ background:var(--sc-cream2); color:var(--sc-ink); } .fr9.sc .sc-fmenu svg{ width:18px; height:18px; }
.fr9.sc .sc-fcard.has-match .sc-fmatch{ margin-right:30px; }
.fr9.sc .sc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.fr9.sc .sc-chip{ font-size:12px; color:var(--sc-ink2); background:var(--sc-cream); border:1px solid var(--sc-line); border-radius:99px; padding:3px 10px; }
.fr9.sc .sc-chip.share{ color:var(--sc-deep); border-color:#F0DCC9; background:#FCF1E6; font-weight:500; }
.fr9.sc .sc-loved{ margin-top:auto; padding-top:15px; border-top:1px solid var(--sc-line); display:flex; gap:11px; align-items:flex-start; }
.fr9.sc .sc-loved-ic{ flex-shrink:0; width:30px; height:30px; border-radius:9px; background:var(--sc-cream2); display:flex; align-items:center; justify-content:center; }
.fr9.sc .sc-loved-ic svg{ width:15px; height:15px; color:var(--sc-terra); }
.fr9.sc .sc-loved-tx{ font-size:13px; color:var(--sc-ink2); line-height:1.45; min-width:0; }
.fr9.sc .sc-loved-tx .seen{ color:var(--sc-mut); font-size:12px; }
.fr9.sc .sc-loved-tx b{ color:var(--sc-ink); font-weight:600; }
.fr9.sc .sc-loved-tx .place{ color:var(--sc-deep); font-weight:500; }
.fr9.sc .sc-loved-tx .when{ color:var(--sc-mut); }

.fr9.sc .sc-panel{ background:#FFFDF8; border:1px solid var(--sc-line); border-radius:18px; box-shadow:var(--sc-sh-sm); padding:20px; }
.fr9.sc .sc-panel h3{ font-weight:600; font-size:17px; letter-spacing:-.01em; margin-bottom:4px; }
.fr9.sc .sc-ph-sub{ font-size:13px; color:var(--sc-mut); margin-bottom:14px; }
.fr9.sc .sc-req{ background:linear-gradient(180deg,#FFFDF8,#FCF4E8); border-color:#F0E1CB; }
.fr9.sc .sc-req-pill{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--sc-deep); margin-bottom:13px; }
.fr9.sc .sc-req-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--sc-terra); box-shadow:0 0 0 4px rgba(194,80,47,.14); }
.fr9.sc .sc-req-row{ display:flex; align-items:center; gap:12px; }
.fr9.sc .sc-req-av{ width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:19px; color:#fff; background:linear-gradient(150deg,#8C5A3A,#6E4226); box-shadow:0 4px 12px rgba(63,38,20,.16); }
.fr9.sc .sc-req-av.sm{ width:38px; height:38px; font-size:16px; }
.fr9.sc .sc-req-id{ min-width:0; }
.fr9.sc .sc-req-name{ font-family:'Fraunces',serif; font-weight:600; font-size:16px; line-height:1.1; }
.fr9.sc .sc-req-name.sm{ font-size:14.5px; }
.fr9.sc .sc-req-meta{ font-size:12px; color:var(--sc-mut); margin-top:1px; }
.fr9.sc .sc-req-actions{ display:flex; align-items:stretch; gap:9px; margin-top:14px; }
/* Accept + Decline are a matched pair: identical box (flex-basis 0 → exactly equal width, border-box +
   min-height → equal height incl. Decline's 1px border), centred labels. The Accept shadow is kept tight
   so it doesn't bulge BELOW the flat Decline and read as "misaligned" (founder). */
.fr9.sc .sc-req-btn{ flex:1 1 0; box-sizing:border-box; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; padding:0 12px; font-size:14px; font-weight:600; line-height:1; cursor:pointer; transition:transform .15s,box-shadow .2s,border-color .2s,color .2s; }
.fr9.sc .sc-req-accept{ background:linear-gradient(180deg,var(--sc-terra),var(--sc-deep)); color:#fff; border:none; box-shadow:0 2px 7px rgba(168,67,31,.20); }
.fr9.sc .sc-req-accept:hover{ transform:translateY(-1px); }
.fr9.sc .sc-req-decline{ background:#fff; border:1px solid var(--sc-sand); color:var(--sc-ink2); }
.fr9.sc .sc-req-decline:hover{ border-color:#D9C3A8; color:var(--sc-ink); }
.fr9.sc .sc-out-row{ display:flex; align-items:center; gap:11px; margin-top:11px; }
.fr9.sc .sc-out-row:first-of-type{ margin-top:8px; }
.fr9.sc .sc-pending{ margin-left:auto; font-size:12px; font-weight:600; color:var(--sc-mut); background:var(--sc-cream2); border-radius:99px; padding:4px 11px; flex-shrink:0; }
.fr9.sc .sc-addfield{ display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--sc-sand); border-radius:12px; padding:4px 4px 4px 14px; transition:border-color .2s,box-shadow .2s; }
.fr9.sc .sc-addfield:focus-within{ border-color:var(--sc-terra); box-shadow:0 0 0 3px rgba(194,80,47,.12); }
.fr9.sc .sc-addfield .at{ color:var(--sc-mut); font-size:15px; font-weight:600; }
.fr9.sc .sc-addfield input{ flex:1; border:none; outline:none; background:none; font-family:inherit; font-size:15px; color:var(--sc-ink); padding:8px 0; min-width:0; }
.fr9.sc .sc-addfield input::placeholder{ color:#B6A691; }
.fr9.sc .sc-addsend{ background:linear-gradient(180deg,var(--sc-terra),var(--sc-deep)); color:#fff; border:none; border-radius:9px; padding:9px 15px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:6px; cursor:pointer; flex-shrink:0; box-shadow:0 4px 11px rgba(168,67,31,.22); transition:transform .15s; }
.fr9.sc .sc-addsend:hover{ transform:translateY(-1px); } .fr9.sc .sc-addsend svg{ width:15px; height:15px; }
.fr9.sc .sc-search-results{ margin-top:11px; display:flex; flex-direction:column; gap:8px; }
.fr9.sc .sc-add-msg{ margin-top:10px; font-size:13px; }
.fr9.sc .sc-handle-row{ display:flex; align-items:center; gap:12px; }
.fr9.sc .sc-handle-av{ width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:18px; color:#fff; background:linear-gradient(150deg,#3D2A1C,#23150D); box-shadow:0 4px 12px rgba(63,38,20,.18); }
.fr9.sc .sc-handle-info{ flex:1; min-width:0; }
.fr9.sc .sc-handle-h{ font-size:15px; font-weight:600; }
.fr9.sc .sc-handle-c{ font-size:12px; color:var(--sc-mut); }
.fr9.sc .sc-handle-share{ background:#fff; border:1px solid var(--sc-sand); border-radius:10px; padding:9px 13px; font-size:13.5px; font-weight:600; color:var(--sc-ink); display:inline-flex; align-items:center; gap:7px; cursor:pointer; flex-shrink:0; transition:border-color .2s,color .2s,transform .15s; }
.fr9.sc .sc-handle-share:hover{ border-color:var(--sc-terra); color:var(--sc-terra); transform:translateY(-1px); }
.fr9.sc .sc-handle-share svg{ width:15px; height:15px; }
.fr9.sc .sc-handle-share.on{ border-color:var(--sc-terra); color:var(--sc-terra); }
.fr9.sc .sc-activity{ background:linear-gradient(180deg,#FFFDF8,#FAF3E7); }
.fr9.sc .sc-act{ display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--sc-line); }
.fr9.sc .sc-act:last-child{ border-bottom:none; padding-bottom:2px; } .fr9.sc .sc-act:first-of-type{ padding-top:4px; }
.fr9.sc .sc-act-av{ width:33px; height:33px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:14px; color:#fff; }
.fr9.sc .sc-act-tx{ font-size:13px; color:var(--sc-ink2); line-height:1.45; }
.fr9.sc .sc-act-tx b{ color:var(--sc-ink); font-weight:600; } .fr9.sc .sc-act-tx .place{ color:var(--sc-deep); }
.fr9.sc .sc-act-when{ font-size:11px; color:var(--sc-mut); margin-top:3px; }

.fr9.sc .sc-empty{ text-align:center; padding:46px 28px 42px; background:#FFFDF8; border:1px dashed var(--sc-sand2); border-radius:24px; box-shadow:var(--sc-sh-sm); }
.fr9.sc .sc-empty-ic{ width:62px; height:62px; border-radius:50%; margin:0 auto 18px; background:var(--sc-cream2); display:flex; align-items:center; justify-content:center; color:var(--sc-terra); }
.fr9.sc .sc-empty-ic svg{ width:28px; height:28px; }
.fr9.sc .sc-empty h2{ font-weight:600; font-size:25px; letter-spacing:-.01em; }
.fr9.sc .sc-empty p{ color:var(--sc-ink2); font-size:15px; max-width:42ch; margin:9px auto 24px; }
/* The two CTAs are a STACK, not inline-flow: as inline-flex they wrapped onto two
   lines that nearly touched (margin:0 auto strips any gap — the founder's screenshot).
   Same width so the pair reads as one intentional cluster; the fill keeps hierarchy. */
.fr9.sc .sc-empty .sc-btn{ display:flex; width:min(300px,100%); margin:0 auto; box-sizing:border-box; }
.fr9.sc .sc-empty .sc-btn + .sc-btn{ margin-top:11px; }

@media (max-width:1080px){ .fr9.sc .sc-grid{ grid-template-columns:1fr; } }
@media (max-width:760px){
  .fr9.sc .sc-twin-body{ grid-template-columns:1fr; gap:14px; justify-items:center; text-align:center; }
  .fr9.sc .sc-twin-info{ text-align:center; }
  .fr9.sc .sc-twin-why{ margin-left:auto; margin-right:auto; }
  .fr9.sc .sc-overlap,.fr9.sc .sc-twin-cta{ justify-content:center; }
  .fr9.sc .sc-circle{ grid-template-columns:1fr; }
  .fr9.sc .sc-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .fr9.sc .sc-twin{ padding:24px 20px 26px; }
}
@media (prefers-reduced-motion:reduce){ .fr9.sc *{ transition:none !important; } }

/* ════════════════════════════════════════════════════════════════════════════
   PASSPORT — force the MOBILE PHONE FRAME at ALL window widths (founder: "make
   it mobile phone format, not website"). The Passport "Editorial Dashboard v531"
   added a desktop revamp (@media min-width:900px → #app 1200px + multi-column
   grids) and the Supper Club uses 2-col BASE grids that only collapse on a NARROW
   viewport — so on a wide browser window /passport rendered as a full-bleed
   website. These media queries key off VIEWPORT width, not the column width, so
   capping #app alone is not enough: the inner grids keep firing and overflow the
   460px frame. This block (additive, !important, scoped to .passport, no JS, no
   deletions — fully reversible) re-asserts the existing mobile single-column
   layout for /passport ONLY. Other fal-on screens (discover/restaurants/group/
   game/my-table/trip) keep their 620px column, untouched.
   Audited + adversarially verified across all 4 tabs (passport-mobile-audit).
   ════════════════════════════════════════════════════════════════════════════ */
/* 1. Shell — pin Passport's #app to the phone frame at every width (beats both
      the 620px fal-on base and the 1200px ≥900px breakout). */
body.fal-on #app:has(.passport) { max-width: var(--app-w) !important; margin: 0 auto !important; }
.passport #tab-library, .passport #tab-collection { max-width: none !important; margin-left: auto !important; margin-right: auto !important; }
.passport #tab-friends { max-width: var(--app-w) !important; margin-left: auto !important; margin-right: auto !important; }
.passport .dna2 .d2-hero, .passport .dna2 .d2-identity { max-width: none !important; margin-left: auto !important; margin-right: auto !important; }

/* 2. Taste DNA tab — undo the ≥900px desktop dashboard (restore the mobile base). */
.passport .dna2 .d2-clusters { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.passport .dna2 .d2-dimgrid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
.passport .dna2 .d2-dim { min-height: 96px !important; align-items: flex-start !important; padding: 12px 10px 11px !important; border-radius: 16px !important; }
.passport .dna2 .d2-dim .glyph { width: 50px !important; height: 50px !important; aspect-ratio: auto !important; margin: 0 0 auto !important; border-radius: 14px !important; }
.passport .dna2 .d2-sec:has(.d2-life) { display: block !important; }
.passport .dna2 .d2-sec:has(.d2-life) .d2-stats { grid-template-columns: repeat(4, 1fr) !important; margin-top: 12px !important; }   /* 12px — the section's one rhythm */
.passport .dna2 .d2-sec > .d2-sech { justify-content: center !important; text-align: center !important; }
.passport .dna2 .d2-sec > .d2-sech .meta { display: none !important; }
.passport .dna2 .d2-subh { text-align: center !important; max-width: 300px !important; margin-left: auto !important; margin-right: auto !important; }
/* rating banner — back to the compact centered single-column card */
.passport .dna2 .d2-rate { max-width: 400px !important; margin: 42px auto 0 !important; }
.passport .pp4 .pq-card { display: block !important; padding: 28px !important; }
.passport .pp4 .pq-card .pq-rate-col { width: auto !important; }

/* 3. Collection tab — rankings stay a single column (cx-grid stamp album is an
      intended 2-up and is deliberately left alone). */
.passport .pp-rank-grid { grid-template-columns: 1fr !important; }

/* 4. Friends tab ("Supper Club") — its grids are 2-col BASE rules that only
      collapse on a narrow viewport, so they overflow a pinned 460px frame on wide
      windows. Force a single clean column at all widths (matches the ≤760px base). */
.passport .fr9.sc .sc-grid { grid-template-columns: 1fr !important; }
.passport .fr9.sc .sc-circle { grid-template-columns: 1fr !important; }
.passport .fr9.sc .sc-twin-body { grid-template-columns: 1fr !important; gap: 14px !important; justify-items: center !important; text-align: center !important; }
.passport .fr9.sc .sc-twin-info { text-align: center !important; }
.passport .fr9.sc .sc-twin-why { margin-left: auto !important; margin-right: auto !important; }
.passport .fr9.sc .sc-overlap, .passport .fr9.sc .sc-twin-cta { justify-content: center !important; }
.passport .fr9.sc .sc-head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
.passport .fr9.sc .sc-twin { padding: 24px 20px 26px !important; }

/* ════════════════════════════════════════════════════════════════════════════
   PAGE-TITLE TREATMENT — the "My Food" look, reusable app-wide (founder pick,
   2026-06-19): Fraunces display title with the KEY WORD in terracotta italic,
   above it a small Fraunces-italic terracotta eyebrow with a short line.
   Add `pg-title` to a page's <h1> (wrap the key word in <em>) and `pg-kicker`
   to its eyebrow (with a leading <span class="ln"></span>). Only the FONT +
   keyword treatment are forced (DM-Serif titles become Fraunces, keywords go
   terracotta everywhere); each page keeps its own size/margins so layouts are
   untouched. Mirrors .mf-title / .mf-kicker (--serif = Fraunces, --accent
   #C2502F, --accent-deep #A8431F).
   ════════════════════════════════════════════════════════════════════════════ */
.pg-kicker { display: flex !important; align-items: center !important; gap: 10px !important; font-family: var(--serif) !important; font-style: italic !important; font-weight: 500 !important; font-size: 12.5px !important; line-height: 1.2; letter-spacing: 0 !important; text-transform: none !important; color: #C2502F !important; margin: 0 0 7px !important; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
.pg-kicker .ln { height: 1px !important; width: 26px !important; background: #C2502F !important; opacity: .5; flex: none; border: 0 !important; }
.pg-title { font-family: var(--serif) !important; font-weight: 400 !important; font-size: 33px !important; line-height: .98 !important; letter-spacing: -.5px !important; color: var(--text) !important; }
.pg-title em { font-family: var(--serif) !important; font-style: italic !important; font-weight: 300 !important; color: #A8431F !important; }

/* ════════════════════════════════════════════════════════════════════════════
   LOYALTY "Your standing" — section-header + entrance motion.
   (The membership-card artifact uplift .pl-card*/.pl-card-gloss/plGloss and the
   within-tier .pl-prog* bar were reaped 2026-07-09: the v767 .lyx-* Loyalty
   redesign renders the card as .lyx-card and its own progress meter — zero
   .pl-card*/.pl-prog*/.pl-invite class references remain in frontend/. The still-
   live .pl-sec/.pl-rewards/.pl-earn labels + their reveal motion are kept.)
   ════════════════════════════════════════════════════════════════════════════ */
/* section headers — retire the ALL-CAPS wide-tracked label for the warm editorial one */
.pl-sec { font-family: var(--pl-serif); font-weight: 500; font-size: 17.5px; letter-spacing: -.01em; text-transform: none; color: var(--pl-espresso); margin: 26px 2px 13px; line-height: 1.2; }
.pl-sec span { display: block; margin-top: 3px; font-family: var(--pl-sans); font-weight: 500; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--pl-ink3); }

/* entrance motion — gentle staggered reveal (reduced-motion safe) */
.pl-page .pl-sec, .pl-page .pl-rewards, .pl-page .pl-earn { animation: plRise .55s cubic-bezier(.16,1,.3,1) .14s both; }
@keyframes plRise { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pl-page .pl-sec, .pl-page .pl-rewards, .pl-page .pl-earn { animation: none !important; }
}

/* ============================================================================
   RATING CARD — FORCE MINIMUM HEIGHT (founder: "reduce the height as much as you
   can"). Every earlier attempt lost the cascade to the base body.fal-on .pq-card
   { padding:28px } (higher specificity) and to the desktop banner @media. This
   block is LAST in the file + !important, so it wins at ALL viewport widths:
   a tight, compact, single-column card. Tap targets kept usable (30px dots).
   ============================================================================ */
body.fal-on .pp4 .d2-rate{ margin-top:18px !important; }
body.fal-on .pp4 .pq-head{ margin-bottom:7px !important; }
body.fal-on .pp4 .pq-intro{ display:none !important; }
body.fal-on .pp4 .pq-eyebrow{ margin:0 0 2px !important; }
body.fal-on .pp4 .pq-momentum{ font-size:12px !important; }

body.fal-on .pp4 .pq-card{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
  padding:11px 16px !important;
  border-radius:16px !important;
}
body.fal-on .pp4 .pq-card .pq-info{ display:block !important; margin:0 !important; min-width:0 !important; }
body.fal-on .pp4 .pq-card .pq-cuisine{ font-size:11px !important; line-height:1.1 !important; margin:0 0 1px !important; }
body.fal-on .pp4 .pq-card .pq-dish{ font-size:16px !important; line-height:1.06 !important; margin:0 0 1px !important; }
body.fal-on .pp4 .pq-card .pq-place{ font-size:11.5px !important; line-height:1.1 !important; margin:0 0 6px !important; }
body.fal-on .pp4 .pq-card .pq-rate-col{ display:block !important; width:auto !important; margin:0 !important; }
body.fal-on .pp4 .pq-card .pq-scale{ justify-content:center !important; gap:14px !important; margin:0 !important; }
body.fal-on .pp4 .pq-card .pq-dot{ width:30px !important; height:30px !important; }
body.fal-on .pp4 .pq-card .pq-dot span{ font-size:13px !important; }
body.fal-on .pp4 .pq-card .pq-foot{ margin-top:4px !important; min-height:0 !important; }
body.fal-on .pp4 .pq-card .pq-end{ font-size:11px !important; }
body.fal-on .pp4 .pq-card .pq-live{ font-size:11.5px !important; }
body.fal-on .pp4 .pq-card .pq-skip{ margin:4px 0 0 !important; padding:2px !important; font-size:12px !important; }

/* Loyalty invitation cards — clearer offer + deliberate navigation (2026-06-19 founder fix) */
.pl-code-hint { display: block; margin-top: 5px; font-family: var(--pl-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pl-ink3); text-align: center; }
.pl-rw-seemenu { display: inline-flex; align-items: center; gap: 3px; margin-top: 9px; font-family: var(--pl-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .01em; color: var(--pl-terra-d, #A8431F); text-decoration: none; }
.pl-rw-seemenu:hover { text-decoration: underline; }
/* invitation cards top-align so the thumb sits with the venue/title (body now taller with the menu link) */
.pl-reward { align-items: flex-start; }

/* ============================================================================
   "WHAT TO ORDER" venue picker (order.js renderOrderPicker) — premium enhance.
   Scoped under .osp; /order is NOT in the fal shell so warm values are inline.
   ============================================================================ */
.osp{
  --o-terra:#C2502F; --o-deep:#A8431F; --o-ink:#23150D; --o-soft:#6B5A4E; --o-faint:#9A8B7E;
  --o-cream:#FFFDF8; --o-line:#ECE2D1; --o-line-soft:#F1E9DA; --o-tint:#FBEDE7; --o-tint2:#F7E3D9;
  --o-gold:#A2761F; --o-rose:#B0506A;
  --o-sh-card:0 1px 2px rgba(35,21,13,.04), 0 8px 22px rgba(35,21,13,.05);
  --o-sh-soft:0 1px 2px rgba(35,21,13,.04), 0 4px 14px rgba(35,21,13,.045);
  background:radial-gradient(120% 60% at 50% -8%, #FFFDF8 0%, #FCF6EC 38%, #FAF5EC 100%);
  min-height:100vh; color:var(--o-ink);
}
.osp *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

.osp .osp-topbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px;
  padding:max(13px,env(safe-area-inset-top)) 18px 12px; background:rgba(255,253,248,.84);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(236,226,209,.7); }
.osp .osp-back{ width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid var(--o-line); background:var(--o-cream); color:var(--o-ink);
  text-decoration:none; transition:transform .15s ease, background .18s ease, border-color .18s ease; }
.osp .osp-back:hover{ background:#FAF5EC; border-color:#E2D6C2; } .osp .osp-back:active{ transform:scale(.94); }
.osp .osp-title{ font-family:var(--sans,'Plus Jakarta Sans',sans-serif); font-size:16px; font-weight:600; letter-spacing:-.01em; }

.osp .osp-hero{ padding:24px 22px 16px; }
.osp .osp-kicker{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:var(--o-deep);
  background:var(--o-tint); border:1px solid var(--o-tint2); padding:5px 11px 5px 9px; border-radius:999px; margin-bottom:14px; }
.osp .osp-kicker svg{ width:14px; height:14px; }
.osp .osp-h1{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:30px; line-height:1.12; letter-spacing:-.015em; margin:0 0 10px; color:var(--o-ink); }
.osp .osp-h1 em{ font-style:italic; color:var(--o-terra); font-weight:600; }
.osp .osp-sub{ font-size:15px; line-height:1.5; color:var(--o-soft); margin:0; max-width:32ch; }

.osp .osp-find{ padding:6px 18px 4px; }
.osp .osp-locate{ width:100%; display:flex; align-items:center; gap:13px; padding:14px 16px; border:0; cursor:pointer; text-align:left;
  border-radius:16px; background:linear-gradient(180deg,#C2502F 0%,#AC451F 100%); color:#FFF6EF; font-family:inherit;
  box-shadow:0 1px 2px rgba(168,67,31,.25), 0 10px 22px rgba(168,67,31,.22); transition:transform .16s ease, box-shadow .2s ease, filter .2s ease; }
.osp .osp-locate:hover{ filter:brightness(1.04); box-shadow:0 1px 2px rgba(168,67,31,.28),0 14px 28px rgba(168,67,31,.28); }
.osp .osp-locate:active{ transform:translateY(1px) scale(.992); }
.osp .osp-pin{ width:38px; height:38px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(255,246,239,.18); position:relative; }
.osp .osp-pin::after{ content:""; position:absolute; inset:0; border-radius:11px; border:2px solid rgba(255,246,239,.45); animation:ospRadar 2.6s ease-out infinite; }
@keyframes ospRadar{ 0%{ transform:scale(1); opacity:.6; } 70%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }
.osp .osp-pin svg{ width:19px; height:19px; }
.osp .osp-lt{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.osp .osp-lt b{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.osp .osp-lt span{ font-size:12.5px; color:rgba(255,246,239,.8); font-weight:400; }
.osp .osp-chev{ opacity:.85; display:flex; } .osp .osp-chev svg{ width:18px; height:18px; }

.osp .osp-or{ display:flex; align-items:center; gap:12px; margin:14px 4px; color:var(--o-faint); font-size:12px; font-weight:500; }
.osp .osp-or::before, .osp .osp-or::after{ content:""; height:1px; flex:1; background:var(--o-line); }

.osp .osp-search{ display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:15px; background:var(--o-cream);
  border:1px solid var(--o-line); box-shadow:var(--o-sh-soft); cursor:text; transition:border-color .18s ease, box-shadow .18s ease; }
.osp .osp-search:focus-within{ border-color:#E0B7A6; box-shadow:0 0 0 4px rgba(194,80,47,.08),var(--o-sh-soft); }
.osp .osp-search svg{ width:18px; height:18px; color:var(--o-faint); flex:none; }
.osp .osp-search input{ border:0; outline:0; background:transparent; flex:1; min-width:0; font-family:inherit; font-size:15px; color:var(--o-ink); }
.osp .osp-search input::placeholder{ color:var(--o-faint); }

/* GPS confirm result (replaces the locate button on tap) */
.osp .osp-gmsg{ display:flex; align-items:center; gap:9px; font-size:13.5px; line-height:1.45; color:var(--o-soft); padding:14px 2px; }
.osp .osp-gprompt{ font-size:13px; font-weight:600; color:var(--o-deep); margin:4px 2px 10px; }
.osp .osp-gchips{ display:flex; flex-wrap:wrap; gap:9px; }
.osp .osp-gchip{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:var(--o-cream); border:1.5px solid var(--o-terra);
  border-radius:999px; padding:9px 14px; color:var(--o-ink); font-size:13.5px; font-weight:600; }
.osp .osp-gchip:hover{ background:var(--o-tint); }
.osp .osp-gdist{ color:var(--o-faint); font-weight:500; }

.osp .osp-list{ padding:4px 18px calc(96px + env(safe-area-inset-bottom)); }
.osp .osp-sechead{ display:flex; align-items:baseline; justify-content:space-between; margin:24px 4px 12px; }
.osp .osp-sechead h3{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-style:italic; font-size:19px; letter-spacing:-.01em; margin:0; color:var(--o-ink); }
.osp .osp-count{ font-size:13px; color:var(--o-faint); font-weight:500; }

.osp .osp-card{ display:flex; align-items:center; gap:14px; padding:11px 12px; margin-bottom:11px; text-decoration:none;
  background:var(--o-cream); border:1px solid var(--o-line-soft); border-radius:18px; box-shadow:var(--o-sh-card);
  cursor:pointer; position:relative; overflow:hidden; transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .18s ease; }
.osp .osp-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--o-terra); transform:scaleY(0); transition:transform .2s ease; }
.osp .osp-card:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(35,21,13,.05),0 14px 30px rgba(35,21,13,.09); border-color:#E7DAC6; }
.osp .osp-card:hover::before{ transform:scaleY(1); }
.osp .osp-card:active{ transform:translateY(0) scale(.992); }
.osp .osp-thumb{ width:64px; height:64px; flex:none; border-radius:13px; background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(35,21,13,.06); position:relative; }
.osp .osp-thumb::after{ content:""; position:absolute; inset:0; border-radius:13px; background:linear-gradient(180deg,rgba(35,21,13,0) 55%,rgba(35,21,13,.14)); }
.osp .osp-vbody{ flex:1; min-width:0; }
.osp .osp-vname{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:17.5px; letter-spacing:-.01em; line-height:1.15; color:var(--o-ink);
  margin:0 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.osp .osp-vmeta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.osp .osp-cuisine{ font-size:12.5px; font-weight:500; color:var(--o-deep); background:var(--o-tint); padding:3px 9px; border-radius:7px; }
.osp .osp-area{ display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--o-soft); }
.osp .osp-area svg{ width:12px; height:12px; color:var(--o-faint); flex:none; }
.osp .osp-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; color:var(--o-gold); margin-top:7px; }
.osp .osp-badge.osp-badge-loved{ color:var(--o-rose); }
.osp .osp-badge svg{ width:13px; height:13px; }
.osp .osp-cta{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:600; color:var(--o-terra);
  padding:9px 13px; border-radius:11px; background:var(--o-tint); border:1px solid var(--o-tint2); transition:background .18s ease, gap .18s ease, color .18s ease, border-color .18s ease; }
.osp .osp-card:hover .osp-cta{ background:var(--o-terra); color:#FFF6EF; border-color:var(--o-terra); gap:8px; }
.osp .osp-cta svg{ width:14px; height:14px; }

.osp .osp-foot{ text-align:center; padding:22px 24px 8px; font-size:13px; color:var(--o-faint); line-height:1.5; }

@media (prefers-reduced-motion:reduce){ .osp *{ animation:none !important; transition:none !important; } }

/* ── Taste Arcade — Crave deck (visual pass: editorial gradient cards + motion) ──
   Contract: NOODL_ARCADE_DESIGN_CONTRACT.md. Namespaced arc-*. Real food photos
   (Nano Banana / Google) layer ON TOP of the designed gradient base via JS, so this
   already looks intentional and only gets richer when art files land. */
.arc-modebar{ display:flex; gap:4px; justify-content:center; padding:12px 0 2px; }
.arc-modebar{ background:transparent; }
.arc-modetab{ font:700 13px/1 var(--sans); padding:10px 20px; border-radius:999px; letter-spacing:.01em;
  border:1px solid transparent; background:transparent; color:var(--text-2,#6b6258); cursor:pointer; transition:all .18s ease; }
.arc-modetab[data-on="true"]{ background:var(--accent,#C2502F); color:#FFF6EF;
  box-shadow:0 6px 16px rgba(194,80,47,.28); }
.arc-modetab:not([data-on="true"]):hover{ color:var(--text-1,#2b2521); }

.arc-root{ max-width:430px; margin:0 auto; padding:6px 16px calc(104px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:16px; }

/* topbar: progress + streak + know-meter */
.arc-topbar{ display:flex; align-items:center; gap:12px; }
.arc-progress{ flex:1; height:7px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden; }
.arc-progress-fill{ display:block; height:100%; border-radius:999px; transition:width .35s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,#E07A4E,var(--accent,#C2502F)); }
.arc-streak{ display:inline-flex; align-items:center; gap:5px; font:800 14px/1 var(--sans); color:#b9b2a8; }
.arc-streak svg{ width:16px; height:16px; transition:transform .2s ease; }
.arc-streak.is-hot{ color:var(--accent,#C2502F); }
.arc-streak.is-hot svg{ color:#F5A623; transform:scale(1.18); animation:arcFlame 1.1s ease-in-out infinite; }
@keyframes arcFlame{ 0%,100%{ transform:scale(1.12) } 50%{ transform:scale(1.28) } }
.arc-knowmeter{ font:700 12px/1 var(--sans); color:var(--text-2,#6b6258); letter-spacing:.01em; }

/* the deck */
.arc-deck{ position:relative; width:100%; aspect-ratio:4/5; max-height:min(58vh,540px); }
.arc-card{ position:absolute; inset:0; border-radius:26px; overflow:hidden; background:#2a211c;
  box-shadow:0 24px 60px rgba(40,20,10,.34),0 2px 8px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.06);
  transform:translateY(calc(var(--depth,0)*14px)) scale(calc(1 - var(--depth,0)*0.05));
  z-index:calc(10 - var(--depth,0)); transition:transform .28s cubic-bezier(.34,1.2,.5,1), opacity .28s ease;
  touch-action:none; user-select:none; -webkit-user-select:none; }
.arc-card.is-top{ transform:translate(var(--drag-x,0),var(--drag-y,0)) rotate(var(--drag-rot,0)); cursor:grab; }
.arc-card.is-top:active{ cursor:grabbing; }
.arc-card.is-drag{ transition:none; }
.arc-card.is-leaving{ opacity:0; transition:transform .32s ease, opacity .32s ease; }
.arc-card.is-leaving.leave-crave{ transform:translate(160%,-10%) rotate(22deg); }
.arc-card.is-leaving.leave-pass{ transform:translate(-160%,-10%) rotate(-22deg); }
.arc-card.is-leaving.leave-fine{ transform:translateY(160%) scale(.94); }
.arc-card.is-leaving.leave-never{ transform:translateY(150%) scale(.9) rotate(4deg); }

.arc-card-media{ position:absolute; inset:0; background-size:cover; background-position:center; }
/* (arc-card-glyph removed 2026-08-06 — founder: no letter behind the food cards) */
/* soft top sheen so the gradient reads as lit */
.arc-card-sheen{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 26% 8%, rgba(255,255,255,.26), rgba(255,255,255,0) 55%); }
.arc-card-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(20,12,8,0) 30%,rgba(20,12,8,.4) 62%,rgba(20,12,8,.86) 100%); }
.arc-card-body{ position:absolute; left:0; right:0; bottom:0; padding:22px 22px 24px; color:#fff; }
.arc-card-cuisine{ display:inline-block; font:800 10.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:5px 11px; border-radius:999px; margin-bottom:10px; }
.arc-card-name{ font:400 30px/1.08 var(--serif,'DM Serif Display',serif); margin:0 0 6px; letter-spacing:.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.4); }
.arc-card-desc{ font:400 14px/1.45 var(--sans); opacity:.92; margin:0; max-width:90%; }

/* drag verdict stamp — appears as you cross the threshold */
.arc-card-verdict{ position:absolute; top:22px; left:22px; opacity:0; transform:scale(.8) rotate(-12deg);
  transition:opacity .12s ease, transform .12s ease; pointer-events:none; z-index:3; }
.arc-card-verdict::after{ content:""; display:inline-block; font:900 24px/1 var(--sans); letter-spacing:.06em;
  padding:8px 14px; border-radius:12px; border:4px solid; background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.arc-card.hint-crave .arc-card-verdict,.arc-card.hint-pass .arc-card-verdict,.arc-card.hint-fine .arc-card-verdict{ opacity:1; transform:scale(1) rotate(-12deg); }
.arc-card.hint-crave .arc-card-verdict::after{ content:"LIKE"; color:#3ad29a; border-color:#3ad29a; }
.arc-card.hint-pass .arc-card-verdict{ left:auto; right:22px; transform:scale(1) rotate(12deg); }
.arc-card.hint-pass .arc-card-verdict::after{ content:"DISLIKE"; color:#ff7a5e; border-color:#ff7a5e; }
.arc-card.hint-fine .arc-card-verdict{ top:auto; bottom:26px; left:50%; transform:translateX(-50%) scale(1) rotate(-3deg); }
.arc-card.hint-fine .arc-card-verdict::after{ content:"FINE"; color:#E0A330; border-color:#E0A330; }

/* action row */
.arc-actions{ display:flex; align-items:center; justify-content:center; gap:16px; }
.arc-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; cursor:pointer;
  border:none; background:#fff; box-shadow:0 6px 18px rgba(40,20,10,.16),inset 0 0 0 1px rgba(0,0,0,.05);
  transition:transform .14s ease, box-shadow .14s ease; }
.arc-btn svg{ width:26px; height:26px; }
.arc-btn:hover{ transform:translateY(-2px); }
.arc-btn:active{ transform:scale(.9); }
.arc-pass,.arc-fine{ width:56px; height:56px; }
.arc-crave{ width:68px; height:68px; }
.arc-pass{ color:#ff7a5e; } .arc-pass svg{ width:25px; height:25px; }
.arc-crave{ color:#fff; background:linear-gradient(150deg,#3ad29a,#1fae7e); box-shadow:0 10px 24px rgba(31,174,126,.4); }
.arc-crave svg{ width:30px; height:30px; }
.arc-fine{ color:#b09a78; } .arc-fine svg{ width:30px; height:30px; }   /* neutral — it's fine */
.arc-never{ display:block; width:auto; height:40px; padding:0 16px; margin:12px auto 0; font:600 12.5px/1 var(--sans); color:var(--text-2,#6b6258); background:transparent; box-shadow:none; text-decoration:underline; text-underline-offset:3px; }

/* ── Swipe affordances: small white thumbs (black outline) over the card edges ── */
.arc-stage{ position:relative; }
/* Half the old size, no colour fill — a clean white circle with a black outline,
   fully visible in front of the photo (founder: the red/green blobs read badly). */
.arc-side{ position:absolute; top:50%; z-index:15; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0;
  background:#fff; border:2px solid #1c140e;
  box-shadow:0 4px 12px rgba(40,20,10,.18); transition:transform .14s ease, box-shadow .14s ease; }
.arc-side svg{ width:20px; height:20px; color:#1c140e; }
.arc-side-l{ left:10px; transform:translate(0,-50%); }
.arc-side-r{ right:10px; transform:translate(0,-50%); }
.arc-side-l:hover,.arc-side-r:hover{ transform:translate(0,-50%) scale(1.08); }
.arc-side-l:active,.arc-side-r:active{ transform:translate(0,-50%) scale(.9); }

.arc-okay{ display:flex; align-items:center; justify-content:center; gap:9px; width:auto; height:auto;
  margin:18px auto 2px; padding:14px 26px; border-radius:999px; background:#fff; color:var(--fg1,#2b2018);
  border:none; box-shadow:0 4px 14px rgba(40,20,10,.12), inset 0 0 0 1px rgba(0,0,0,.05);
  font:700 15px/1 var(--sans); }
.arc-okay svg{ width:18px; height:18px; color:var(--accent,#C2502F); }
.arc-okay:hover{ transform:translateY(-2px); }
.arc-okay:active{ transform:scale(.97); }

/* tierdrop drag-and-drop — the tier/tray a dragged card is hovering over lights up (inline styles
   on .pq-tz/.pq-tray, so !important wins). */
.pq-tz.is-over, .pq-tray.is-over{ border-style:solid !important; border-color:var(--accent,#C2502F) !important; background:color-mix(in srgb, var(--accent,#C2502F) 13%, transparent) !important; }
.arc-hint{ text-align:center; font:500 13px/1.4 var(--sans); color:var(--text-3,#9a9088); margin:0; }

/* end-of-deck reveal */
.arc-reveal{ max-width:430px; margin:0 auto; padding:56px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; transform:translateY(14px) scale(.96); }
.arc-reveal.is-shown{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.3,.5,1); }
.arc-reveal-ic{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:color-mix(in srgb,var(--accent,#C2502F) 12%,transparent); margin-bottom:6px; }
.arc-reveal-ic svg{ width:32px; height:32px; color:var(--accent,#C2502F); }
.arc-reveal-delta{ font:400 64px/1 var(--serif,'DM Serif Display',serif); color:var(--accent,#C2502F); margin:6px 0 2px; }
.arc-reveal-sub{ font:400 15px/1.55 var(--sans); color:var(--text-2,#6b6258); margin:0 0 10px; max-width:300px; }
.arc-reveal-actions{ display:flex; flex-direction:column; gap:12px; align-items:center; width:100%; max-width:280px; }
.arc-reveal-actions .rk-btn{ width:100%; }

@media (prefers-reduced-motion:reduce){ .arc-card,.arc-progress-fill,.arc-reveal,.arc-streak svg{ transition:none !important; animation:none !important; } }

/* ── Unified back button — the one "Soft chip" for every back action across the app.
   Works on <a> (data-link nav) or <button> (handler). Markup: chevron SVG.nbk-i + <span>label</span>.
   Icon-only contexts: add .nbk-icon and drop the span. ──────────────────────────────────── */
.nbk{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 15px 0 12px; margin:0; background:var(--surface,#FFFDF8); border:1px solid var(--line,#EBE0CC); border-radius:999px; color:var(--fg1,#2A2018); font:600 13.5px/1 var(--sans); letter-spacing:-.01em; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; box-shadow:0 1px 2px rgba(42,32,24,.05); transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease; }
.nbk-i{ flex:none; color:var(--accent,#C2502F); transition:transform .18s ease; }   /* terracotta directional cue */
.nbk:hover{ background:#fff; border-color:color-mix(in srgb, var(--accent,#C2502F) 28%, var(--line,#EBE0CC)); box-shadow:0 3px 8px -2px rgba(42,32,24,.10); }
.nbk:hover .nbk-i{ transform:translateX(-2px); }
.nbk:active{ background:var(--bg-2,#F4ECDD); box-shadow:0 1px 2px rgba(42,32,24,.05); transform:translateY(.5px); }
.nbk:focus-visible{ outline:2px solid var(--accent,#C2502F); outline-offset:2px; }
.nbk-icon{ padding:0; width:44px; justify-content:center; gap:0; }
@media (prefers-reduced-motion:reduce){ .nbk,.nbk-i{ transition:none; } .nbk:hover .nbk-i{ transform:none; } .nbk:active{ transform:none; } }


/* ════════════════════════════════════════════════════════════════════════════════════
   TASTE-TWIN SHEET (.cmt-*) — the two-person compatibility story behind a tap in
   Community → "find your people". Body-appended on the .rds-* sheet skeleton; this block
   only styles the .cmt-* body. Brand vars only (terracotta + cream). Mobile-first ~390px.
   Pattern echoes compatibility profiles (Tinder/Bumble "things in common", Polywork
   "interests in common"): lead with the pair, prove with receipts, end in one Add.
   ════════════════════════════════════════════════════════════════════════════════════ */
/* The sheet is appended to <body>, OUTSIDE the screen-scoped blocks (.plhome etc.) that
   define --fg1/2/3 — at :root they're empty, which would silently break every color-mix
   here. Declare the foreground vars locally so the whole .cmt-* tree resolves. (--accent,
   --accent-deep, --surface, --line, --line-2, --on-accent, --r-*, --shadow-* ARE at root.) */
.cmt-panel { padding-top: 12px; --fg1: #2A2018; --fg2: #6E5F4F; --fg3: #A89A85; }
.cmt-panel .rds-x { z-index: 3; }

/* ── Hero: the "you two" lockup — the match-ring centred, your avatar + theirs linked
   to its lower corners (a compatibility "&" lockup, the ring stays primary). ──────── */
.cmt-hero { text-align: center; padding: 6px 2px 4px; }
.cmt-pair { position: relative; width: 176px; height: 100px; margin: 4px auto 0; }
.cmt-pair-ring { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 1; }
.cmt-pair-av { position: absolute; bottom: 0; width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center;
  font: 700 18px/1 var(--serif); color: #FFF7EE; box-shadow: 0 0 0 3px var(--surface), var(--shadow-sm); z-index: 2; }
.cmt-pair-me { left: 2px; background: linear-gradient(140deg, color-mix(in srgb, var(--fg1) 70%, var(--accent)), var(--fg1)); }
.cmt-pair-them { right: 2px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 78%, #2A1109), var(--accent)); }
.cmt-pair-in { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; display: grid; place-items: center; }

/* The hero match-ring (bigger sibling of the .plhome-scoped .pl-fa-ring) — conic on --m. */
.cmt-ring { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--accent) calc(var(--m,0) * 1%), color-mix(in srgb, var(--accent) 14%, var(--line)) 0);
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--accent) 42%, transparent); }
.cmt-ring-in { position: relative; z-index: 1; width: 82px; height: 82px; border-radius: 50%; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.cmt-ring-n { font: 400 30px/0.9 var(--serif); color: var(--accent); letter-spacing: -.02em; }
.cmt-ring-n small { font: 600 13px/1 var(--sans); }
.cmt-ring-cap { font: 700 8.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 64%, var(--fg3)); }
.cmt-ring-warm { background: none; box-shadow: none; }
.cmt-ring-warm::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2.5px dashed color-mix(in srgb, var(--accent) 34%, var(--line)); animation: cmtSpinSlow 22s linear infinite; }
.cmt-ring-warm .cmt-ring-in { width: 80px; height: 80px; color: color-mix(in srgb, var(--accent) 60%, var(--fg3)); font-size: 26px; }
@keyframes cmtSpinSlow { to { transform: rotate(360deg); } }

.cmt-hero-proof { font: 500 13.5px/1.4 var(--sans); color: var(--fg2); margin: 14px auto 4px; max-width: 300px; }
.cmt-warm-lead { font-weight: 700; color: var(--accent-deep); }
.cmt-hero-name { font: 400 26px/1.1 var(--serif); color: var(--fg1); letter-spacing: -.01em; margin: 2px 0 0; }
.cmt-hero-name em { color: var(--accent); font-style: italic; }

/* ── Quick pills: mutual friends + taste-off agreement ─────────────────────────────── */
.cmt-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 2px; }
.cmt-pill { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--sans); color: var(--fg2);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  padding: 7px 12px; border-radius: var(--r-pill); }
.cmt-pill i { color: var(--accent); font-size: 14px; }

/* ── Sections + receipt chips ──────────────────────────────────────────────────────── */
.cmt-sec { margin-top: 20px; }
.cmt-sec-h { margin-bottom: 11px; }
.cmt-sec-k { display: block; font: 700 10.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 68%, var(--fg3)); }
.cmt-sec-t { font: 400 19px/1.15 var(--serif); color: var(--fg1); margin: 5px 0 0; }
.cmt-chips { display: flex; flex-direction: column; gap: 8px; }
.cmt-chip { display: flex; align-items: center; gap: 10px; font: 600 13px/1.3 var(--sans); color: var(--fg1);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  padding: 11px 13px; border-radius: var(--r-md); }
.cmt-chip i { flex: none; color: var(--accent); font-size: 17px; }
/* diverge = discovery, cooler treatment so it reads as "their world, not yours yet" */
.cmt-chips-soft .cmt-chip { background: var(--surface); border-style: dashed; border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); color: var(--fg2); }
.cmt-chips-soft .cmt-chip i { color: color-mix(in srgb, var(--accent) 72%, var(--fg3)); }

/* ── Signature: archetype crest + tier badge + last loved dish ─────────────────────── */
.cmt-sig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 15px; box-shadow: var(--shadow-sm); }
.cmt-sig-crest { display: flex; flex-wrap: wrap; gap: 8px; }
.cmt-crest { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--sans);
  color: var(--on-accent); background: var(--accent-grad); padding: 8px 12px; border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent); }
.cmt-crest i { font-size: 14px; }
.cmt-crest-tier { color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); }
.cmt-sig-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.cmt-sig-meta { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--sans); color: var(--fg2); }
.cmt-sig-meta i { color: var(--accent); font-size: 15px; }
.cmt-sig-last { display: flex; align-items: flex-start; gap: 8px; font: 500 13px/1.45 var(--sans); color: var(--fg2);
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.cmt-sig-last i { flex: none; color: var(--accent); font-size: 16px; margin-top: 1px; }
.cmt-sig-last strong { color: var(--fg1); font-weight: 700; }
.cmt-sig-twin { display: flex; align-items: flex-start; gap: 8px; font: 600 13px/1.4 var(--sans); color: var(--accent-deep);
  margin: 11px 0 0; padding: 10px 12px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-radius: var(--r-md); }
.cmt-sig-twin i { flex: none; color: var(--accent); font-size: 16px; margin-top: 1px; }
.cmt-sig-twin strong { font-weight: 800; }

/* ── Cold-start ladder (warming only) — viewer-owned progress, never a dead-end ────── */
.cmt-ladder { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--r-lg); padding: 15px 16px; }
.cmt-ladder-top { display: flex; align-items: flex-start; gap: 9px; font: 500 13.5px/1.45 var(--sans); color: var(--fg1); }
.cmt-ladder-top i { flex: none; color: var(--accent); font-size: 18px; margin-top: 1px; }
.cmt-ladder-top strong { color: var(--accent-deep); font-weight: 700; }
.cmt-ladder-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--line)); overflow: hidden; margin: 13px 0; }
.cmt-ladder-bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #E0A24C)); transition: width .9s var(--ease-out); }
.cmt-ladder-go { width: 100%; }

/* ── Locked post-connect teaser (non-friends) — affordance only, no real content ───── */
.cmt-locked { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 14px;
  font: 500 12.5px/1.4 var(--sans); color: var(--fg3);
  background: color-mix(in srgb, var(--fg3) 5%, var(--surface)); border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.cmt-locked i { flex: none; font-size: 17px; color: color-mix(in srgb, var(--accent) 44%, var(--fg3)); }

/* ── Footer: ONE dominant Add (every state) + secondary "Plan a meal" post-connect ─── */
.cmt-foot { position: sticky; bottom: 0; margin: 22px -22px 0; padding: 16px 22px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 26%); }
.cmt-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  font: 800 15px/1 var(--sans); border-radius: var(--r-pill); padding: 16px 18px; cursor: pointer; border: 1px solid transparent;
  text-decoration: none; transition: transform .16s var(--ease-out), box-shadow .2s var(--ease-out), filter .18s ease; }
.cmt-btn i { font-size: 18px; }
.cmt-btn-add { color: var(--on-accent); background: var(--accent-grad); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.cmt-btn-add:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--accent) 64%, transparent); }
.cmt-btn-add:active { transform: translateY(0); }
.cmt-btn-add.cmt-done { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-deep); box-shadow: none; cursor: default; }
.cmt-btn-add:disabled { cursor: default; }
.cmt-btn-add:focus-visible, .cmt-btn-soft:focus-visible, .cmt-ladder-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmt-btn-soft { margin-top: 9px; color: color-mix(in srgb, var(--accent) 82%, #2A1109);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 20%, var(--line)); }
.cmt-btn-soft:hover { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
.cmt-plan { animation: cmtSlideUp .3s var(--ease-out) both; }
@keyframes cmtSlideUp { from { opacity: 0; transform: translateY(6px); } }

/* ── Loading shimmer (the rest, while /api/twin fetches) ───────────────────────────── */
.cmt-shim { height: 64px; border-radius: var(--r-md); margin-top: 16px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 5%, var(--surface)) 30%, color-mix(in srgb, var(--accent) 12%, var(--surface)) 50%, color-mix(in srgb, var(--accent) 5%, var(--surface)) 70%);
  background-size: 220% 100%; animation: cmtShim 1.3s ease-in-out infinite; }
.cmt-shim-a { height: 86px; }
.cmt-shim-b { height: 120px; }
.cmt-shim-c { height: 64px; }
@keyframes cmtShim { to { background-position: -120% 0; } }

.cmt-spin { animation: cm-spin 0.7s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .cmt-ring-warm::before, .cmt-shim, .cmt-spin, .cmt-plan, .cmt-ladder-bar i { animation: none; transition: none; }
  .cmt-btn-add:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Founder test-drive UI fixes (Jul '26) — Maps affordance on the venue hero,
   photo-forward taste-twin pick cards on Home, and the ?dish= deep-link flash.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── "Maps" pill on the venue address line — sits inline after the address, the
   place a diner's eye already is when they wonder "where is this?". Chip family
   matches the rht-* trust chips; pointer-events:auto keeps it tappable when
   .has-gallery sets pointer-events:none on the whole hero-inner (swipe layer). */
.r-maps {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px;
  margin-left: 8px; padding: 4px 11px 4px 9px; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; line-height: 1;
  color: var(--text-1); background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-decoration: none; cursor: pointer; pointer-events: auto;
  transition: background 0.18s, transform 0.18s var(--ease-out);
}
.r-maps svg { width: 12px; height: 12px; flex: none; color: var(--accent); }
.r-maps:hover { background: rgba(255,255,255,0.85); transform: translateY(-1px); }
.r-maps:active { transform: translateY(0); }
.r-maps:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.r-hero.has-img .r-maps { color: #fff; background: rgba(20,14,10,0.42); }
.r-hero.has-img .r-maps svg { color: #FFD9C4; }
.r-hero.has-img .r-maps:hover { background: rgba(20,14,10,0.58); }
/* Book a table — the venue's primary action, so it's a filled terracotta pill
   (overrides the ghost .r-maps look it shares markup with, on both hero styles). */
.r-book, .r-hero.has-img .r-book { color: #fff; background: var(--accent); border: none; }
.r-book svg, .r-hero.has-img .r-book svg { color: #fff; }
.r-book:hover, .r-hero.has-img .r-book:hover { background: var(--accent-700, #A63F22); }

/* ── Hero action cluster — Directions + Book a table (founder: "they don't appear
   much; enlarge them and make it clear they're available"). Right-aligned on its
   own row at the FOOT of the hero, so it reads as the venue's two real-world
   actions instead of tiny links hiding inside the address sentence. */
/* Hero FOOT — ratings and actions on ONE baseline (founder, 2026-07-26: "the
   Directions button is a line below... same level as the reviews, parallel to each
   other"). The rating row was a block above the action row, so the button read as an
   orphaned second line. Now one flex row: ratings left, actions right, both centred on
   the same axis. `align-items:center` is what makes them read as parallel rather than
   merely adjacent. */
.r-hero-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
/* both children own the row now — their individual top margins would re-introduce the
   very offset this pairing removes */
.r-hero-foot .r-hero-trust { margin-top: 0; margin-bottom: 0; }
.r-hero-foot .r-hero-cta { margin-top: 0; margin-left: auto; }
@media (max-width: 380px) {
  /* wrapped onto two lines, the actions still hold the right edge */
  .r-hero-foot { gap: 10px; }
  .r-hero-foot .r-hero-cta { width: 100%; }
}
.r-hero-cta {
  display: flex; justify-content: flex-end; align-items: center; gap: 9px;
  margin-top: 14px; flex-wrap: wrap;
  /* .r-hero.has-gallery sets pointer-events:none on .r-hero-inner so horizontal
     swipes reach the gallery underneath — these buttons must opt back IN or they
     are dead on every gallery venue. */
  pointer-events: auto;
}
.r-hero-cta .r-cta {
  margin-left: 0; vertical-align: baseline;
  padding: 11px 18px; gap: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  border-radius: 999px; min-height: 44px;          /* a real touch target */
  box-shadow: 0 4px 14px -6px rgba(20,14,10,.45);
}
.r-hero-cta .r-cta svg { width: 17px; height: 17px; }
/* Secondary (Directions): frosted so it reads as a button on a photo, not text. */
.r-hero-cta .r-cta:not(.r-book) { background: rgba(255,255,255,.92); color: var(--text-1); }
.r-hero.has-img .r-hero-cta .r-cta:not(.r-book) {
  background: rgba(255,255,255,.16); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 4px 14px -6px rgba(20,14,10,.5);
}
.r-hero.has-img .r-hero-cta .r-cta:not(.r-book) svg { color: #fff; }
.r-hero.has-img .r-hero-cta .r-cta:not(.r-book):hover { background: rgba(255,255,255,.26); }
/* Primary (Book a table) keeps the filled terracotta, now at full button weight. */
.r-hero-cta .r-book { box-shadow: 0 6px 18px -6px rgba(194,80,47,.75); }
@media (max-width: 380px) {
  /* Narrow phones: let the pair share the row edge-to-edge rather than wrapping
     one lonely button onto its own line. */
  .r-hero-cta { gap: 7px; }
  .r-hero-cta .r-cta { flex: 1 1 0; justify-content: center; padding: 11px 12px; font-size: 13.5px; }
}

/* ── ?dish= deep-link target — a brief warm flash + ring so the eye lands on the
   exact dish a taste twin loved. One-shot; reduced-motion gets a static tint. */
.rdish.rdish-hit { border-radius: 14px; animation: rdishHit 2.5s var(--ease-out) 1 both; }
@keyframes rdishHit {
  0%   { background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }
  55%  { background: color-mix(in srgb, var(--accent) 9%, transparent);  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .rdish.rdish-hit { animation: none; background: color-mix(in srgb, var(--accent) 9%, transparent); }
}

/* ── Home "Loved by your taste twins" — photo-forward pick cards (replaces the
   basic icon rows). Venue photo (or the warm cuisine duotone) on top with the
   match ring floating on it; below, the "loved by N like you" proof line, the
   DISH as the serif headline (2-line clamp — never one word + "…"), then the
   venue. The whole card deep-links to the exact dish. */
.plhome .pl-pick {
  flex: none; width: 218px; max-width: 72vw; scroll-snap-align: start;
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .22s var(--ease-out), border-color .18s var(--ease-out);
}
.plhome .pl-pick:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.plhome .pl-pick:active { transform: translateY(-1px); }
.plhome .pl-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plhome .pl-pick-media { display: block; border-radius: 0; }
.plhome .pl-pick-ring { position: absolute; right: 10px; top: 10px; z-index: 2; box-shadow: 0 2px 8px -2px rgba(30,20,14,.45); }
.plhome .pl-pick-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; min-width: 0; }
.plhome .pl-pick-why {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font: 700 11px/1.3 var(--sans); letter-spacing: .01em; color: var(--accent);
}
.plhome .pl-pick-why svg { width: 12px; height: 12px; flex: none; }
.plhome .pl-pick-why span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plhome .pl-pick-dish {
  font: 400 17px/1.25 var(--serif); letter-spacing: -.01em; color: var(--fg1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.plhome .pl-pick-place { display: flex; align-items: center; gap: 4px; font: 500 12px/1.3 var(--sans); color: var(--fg3); min-width: 0; margin-top: 1px; }
.plhome .pl-pick-place svg { flex: none; }
.plhome .pl-pick-place span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* R22 — kill the dish-vs-venue % ambiguity: this ring/number is the VENUE's taste match,
   not the dish's. Explicit caption on a dish-headlined card. */
.plhome .pl-pick-vmatch { display: block; margin-top: 3px; font: 600 11px/1.2 var(--sans); color: var(--accent); letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) {
  .plhome .pl-pick, .plhome .pl-pick:hover, .plhome .pl-pick:active { transform: none; transition: none; }
  .r-maps, .r-maps:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   /places — "Places you like", the full grouped view ("See all" from the
   Passport rail). Same ♥ store as the venue heart / Browse rail; rows are
   compact venue cards grouped by cuisine with a live search. All .plx-scoped.
   ════════════════════════════════════════════════════════════════════════════ */
.r6c-likes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.r6c-likes-seeall { flex: none; text-decoration: none; font: 700 12.5px/1 var(--fal-sans, var(--sans, sans-serif));
  color: var(--accent, #C2502F); letter-spacing: .01em; padding: 4px 2px; }
.r6c-likes-seeall:hover { text-decoration: underline; }

.plx { padding-bottom: 28px; }
.plx .tnum, .plx-row-match, .plx-group-n { font-variant-numeric: tabular-nums; }
.plx-back { display: inline-block; margin: 4px 0 14px; text-decoration: none;
  font: 700 13px/1 var(--fal-sans, var(--sans, sans-serif)); color: var(--text-3, #8A8177); }
.plx-back:hover { color: var(--accent, #C2502F); }
.plx-head { margin: 0 0 6px; }
/* Plain flowing paragraph — NOT flex (a flex <p> turned the text + <strong> chunks into
   separate flex items, which wrapped into the mangled subtitle the founder reported). */
.plx-sub { margin: 9px 0 0; max-width: 42ch;
  font: 400 14.5px/1.5 var(--fal-sans, var(--sans, sans-serif)); color: var(--text-2, #5C554D); }
.plx-sub strong { font-weight: 700; color: var(--text, #2E2A26); }

/* ── Segmented tab control: ♥ Places you like · 🔖 Want to try ─────────────── */
.plx-tabs { position: relative; display: flex; margin: 20px 0 2px; padding: 4px;
  background: color-mix(in srgb, var(--accent, #C2502F) 6%, var(--surface, #fff));
  border: 1px solid var(--line, #ECE4D8); border-radius: 999px; isolation: isolate; }
.plx-tab-hl { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--surface, #fff);
  box-shadow: 0 2px 10px -3px rgba(46, 42, 38, .26), 0 0 0 1px rgba(46, 42, 38, .03);
  transition: transform .28s cubic-bezier(.34, 1.12, .4, 1); }
.plx-tabs[data-active="watch"] .plx-tab-hl { transform: translateX(100%); }
.plx-tab { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 700 13.5px/1 var(--fal-sans, var(--sans, sans-serif)); letter-spacing: -.01em;
  color: var(--text-3, #8A8177); transition: color .2s ease; }
.plx-tab.is-active { color: var(--accent, #C2502F); }
.plx-tab:focus-visible { outline: 3px solid rgba(194, 80, 47, .4); outline-offset: 2px; border-radius: 999px; }
.plx-tab-ic { display: inline-flex; flex: none; }
.plx-tab-ic svg { width: 14px; height: 14px; fill: currentColor; }
.plx-tab-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plx-tab-n { flex: none; font: 800 11px/1 var(--fal-sans, var(--sans, sans-serif));
  padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 13%, transparent); }
.plx-panel[hidden] { display: none; }
.plx-panel { animation: plx-fade .26s ease both; }
@keyframes plx-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.plx-tab-empty { margin: 40px 0; text-align: center; }
.plx-tab-empty-ic { display: inline-flex; margin-bottom: 12px; opacity: .5; }
.plx-tab-empty-ic svg { width: 24px; height: 24px; fill: var(--accent, #C2502F); }
.plx-tab-empty p { margin: 0 auto; max-width: 30ch;
  font: 400 14.5px/1.55 var(--fal-sans, var(--sans, sans-serif)); color: var(--text-2, #5C554D); }
.plx-tab-empty em { font-style: normal; font-weight: 700; color: var(--accent, #C2502F); }
@media (prefers-reduced-motion: reduce) {
  .plx-tab-hl { transition: none; }
  .plx-panel { animation: none; }
}

.plx-search { margin: 18px 0 6px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--hair, var(--line, #E8DFD3)); padding: 0 2px 11px; }
.plx-search svg { color: var(--text-3, #8A8177); flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; }
.plx-search input { border: 0; background: transparent; outline: none;
  font-family: var(--fal-sans, var(--sans, sans-serif)); font-size: 15px; color: var(--text, #2E2A26); width: 100%; }
.plx-search input::placeholder { color: var(--text-3, #8A8177); }
.plx-search-clear { all: unset; cursor: pointer; color: var(--text-3, #8A8177); font-size: 18px; padding: 0 4px; }

/* Two lists, kept apart: "Places you like" (♥, a taste signal) + "Want to try" (🔖, a bookmark). */
.plx-sect { margin: 26px 0 0; }
.plx-sect:first-child { margin-top: 18px; }
.plx-sectlabel { display: flex; align-items: center; gap: 9px; padding: 0 0 8px; border-bottom: 1px solid var(--line, #ECE4D8); }
.plx-sectlabel-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #C2502F) 12%, var(--surface, #fff)); color: var(--accent, #C2502F); }
.plx-sectlabel-ic svg { fill: currentColor; }
.plx-sectlabel-t { flex: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: -.01em; color: var(--text, #2E2A26); }
.plx-sectlabel-n { flex: none; font: 700 13px/1 var(--sans); color: var(--text-3, #8A8177); }
.plx-sectlabel-watch .plx-sectlabel-ic { background: color-mix(in srgb, var(--accent, #C2502F) 8%, var(--surface, #fff)); }

.plx-group { margin: 22px 0 0; }
.plx-group-h { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.plx-group-glyph { font-size: 17px; line-height: 1; }
.plx-group-name { margin: 0; font: 400 21px/1.1 var(--serif); color: var(--text, #2E2A26); }
.plx-group-n { flex: none; min-width: 22px; text-align: center; padding: 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #C2502F) 10%, transparent);
  font: 800 11.5px/1 var(--fal-sans, var(--sans, sans-serif)); color: var(--accent, #C2502F); }
.plx-rows { display: flex; flex-direction: column; gap: 9px; }
.plx-row { display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--surface, #FFFDF9); border: 1px solid var(--line, #E8DFD3); border-radius: 16px;
  padding: 9px 12px 9px 9px; box-shadow: 0 1px 3px rgba(46, 42, 38, .06); transition: border-color .15s, transform .1s; }
.plx-row:hover { border-color: #E2BFA6; }
.plx-row:active { transform: scale(.985); }
.plx-row[hidden] { display: none; }
.plx-thumb { flex: none; width: 54px; height: 54px; border-radius: 12px; overflow: hidden; position: relative;
  background: var(--cz-wash, #EAD9C3); background-size: cover; background-position: center; }
.plx-thumb-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; }
.plx-row-body { flex: 1; min-width: 0; }
.plx-row-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 14.5px/1.25 var(--fal-sans, var(--sans, sans-serif)); color: var(--text, #2E2A26); }
.plx-row-meta { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 12px/1.3 var(--fal-sans, var(--sans, sans-serif)); color: var(--text-3, #8A8177); }
.plx-row-match { flex: none; font: 800 14px/1 var(--fal-sans, var(--sans, sans-serif)); color: var(--accent, #C2502F); }
.plx-row-match small { font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.plx-row-go { flex: none; font: 400 22px/1 var(--serif); color: var(--text-3, #8A8177); padding: 0 3px; }
.plx-none { margin: 26px 2px 0; text-align: center;
  font: 500 13.5px/1.55 var(--fal-sans, var(--sans, sans-serif)); color: var(--text-3, #8A8177); }
.plx-empty { margin: 26px 0 0; text-align: center; background: var(--surface, #FFFDF9);
  border: 1px solid var(--line, #E8DFD3); border-radius: 18px; padding: 34px 24px; }
.plx-empty-heart { display: inline-flex; margin-bottom: 10px; }
.plx-empty-heart svg { width: 22px; height: 22px; }
.plx-empty-heart svg path { fill: color-mix(in srgb, var(--accent, #C2502F) 30%, transparent); stroke: var(--accent, #C2502F); stroke-width: 1.6; }
.plx-empty p { margin: 0 auto 18px; max-width: 34ch;
  font: 500 14px/1.55 var(--fal-sans, var(--sans, sans-serif)); color: var(--text-2, #5C554D); }
@media (prefers-reduced-motion: reduce) { .plx-row { transition: none; } }

/* ── Loyalty program close (2026-07-03 · LOYALTY_PROGRAM.md) ──────────────────
   Tier flair on the loyalty header (resident only — visitors keep trip framing)
   + the off-menu "Only yours to order" treatment. The flair reuses the existing
   .tier-<id> token set (--t-bg/--t-text/--t-gold — the Mediterranean climb),
   so each standing wears its own card colours. Scoped to .pl-page. */
.pl-page .pl-flair{display:inline-flex;align-items:center;gap:6px;margin:2px 0 10px;padding:6px 13px;border-radius:999px;background:var(--t-bg,#EFE5D1);color:var(--t-text,#3E3020);font:800 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 1px 5px rgba(42,32,24,.16)}
.pl-page .pl-flair i{font-style:normal;font-size:10px;color:var(--t-gold,currentColor)}
/* the off-menu pill — obsidian + gold, the Tastemaker material (never a % off) */
.pl-pill.pl-only{color:#E7C988;background:linear-gradient(135deg,#17130D,#262017);letter-spacing:.03em}

/* ── Order cluster (founder test-drive, 2026-07-03) ───────────────────────────
   1) "+ Add a dish" on the table order (group.js) — reuses the dashed
      .tbl3-adddess tap; sits directly under the course sections.
   2) .dcc-* — the Decide-for-me COURSE CONSTRUCTOR sheet (order.js module):
      per-course +/- steppers pre-filled with Noodl's recommendation, appetite
      chips, one CTA. Porcelain sheet, terracotta accents, scoped .dcc-. */
.tbl3-addone { margin: 16px 0 0; }
.tbl3-addone-note { margin: 8px 2px 0; font: 500 12.5px/1.5 var(--fal-sans, var(--sans, sans-serif)); color: var(--text-3, #A89A85); }

#dcc-scrim { position: fixed; inset: 0; z-index: 6500; display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, #1a1008 44%, transparent); opacity: 0; transition: opacity .18s ease; }
#dcc-scrim.in { opacity: 1; }
.dcc-sheet { width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto; box-sizing: border-box;
  background: var(--bg, #FFF9F0); border-radius: 22px 22px 0 0; padding: 10px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(42, 32, 24, .28); transform: translateY(14px); transition: transform .2s ease; }
#dcc-scrim.in .dcc-sheet { transform: translateY(0); }
@media (min-width: 720px) { #dcc-scrim { align-items: center; padding: 24px; } .dcc-sheet { border-radius: 22px; } }
.dcc-grab { width: 42px; height: 4px; border-radius: 999px; background: var(--line-2, #D8CCB8); margin: 4px auto 14px; }
.dcc-kicker { margin: 0 0 4px; font: 800 10.5px/1 var(--sans, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--accent, #C2502F); }
.dcc-title { margin: 0 0 12px; font: 400 24px/1.2 var(--serif, serif); color: var(--fg1, #2A2018); }
.dcc-title em { font-style: italic; color: var(--accent-deep, #9A3C20); }
.dcc-loading { display: flex; align-items: center; gap: 10px; padding: 22px 2px 26px;
  font: 500 13.5px/1 var(--sans, sans-serif); color: var(--fg3, #8A8177); }
.dcc-rec { margin: 0 0 12px; padding: 9px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #C2502F) 8%, transparent);
  font: 500 12.5px/1.45 var(--sans, sans-serif); color: var(--accent-deep, #9A3C20); }
.dcc-rec b { font-weight: 700; }
.dcc-rows { display: flex; flex-direction: column; }
.dcc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px;
  border-bottom: 1px solid var(--line, #EDE4D6); }
.dcc-row:last-child { border-bottom: 0; }
.dcc-row-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dcc-row-l { font: 700 15px/1.2 var(--sans, sans-serif); color: var(--fg1, #2A2018); }
.dcc-row-s { font: 500 11.5px/1.35 var(--sans, sans-serif); color: var(--fg3, #A89A85); }
.dcc-step { display: flex; align-items: center; gap: 2px; flex: none; }
.dcc-btn { all: unset; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; text-align: center;
  line-height: 36px; font: 600 18px/36px var(--sans, sans-serif); color: var(--accent-deep, #9A3C20);
  background: var(--surface, #FFFDF9); border: 1.5px solid var(--line-2, #D8CCB8); box-sizing: border-box;
  transition: border-color .15s, background .15s, opacity .15s; }
.dcc-btn:hover { border-color: var(--accent, #C2502F); }
.dcc-btn:active { background: color-mix(in srgb, var(--accent, #C2502F) 10%, transparent); }
.dcc-btn.off { opacity: .32; pointer-events: none; }
.dcc-val { min-width: 34px; text-align: center; font: 800 17px/1 var(--sans, sans-serif); color: var(--fg1, #2A2018);
  font-variant-numeric: tabular-nums; }
.dcc-val.zero { color: var(--fg3, #B4A878); }
.dcc-aplbl { margin: 14px 2px 8px; font: 800 10.5px/1 var(--sans, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3, #8A8177); }
.dcc-appet { display: flex; gap: 8px; }
.dcc-ap { all: unset; cursor: pointer; box-sizing: border-box; flex: 1; text-align: center; padding: 10px 6px;
  border-radius: 12px; border: 1.5px solid var(--line-2, #D8CCB8); background: var(--surface, #FFFDF9);
  font: 700 12.5px/1.2 var(--sans, sans-serif); color: var(--fg2, #5C554D); transition: all .15s; }
.dcc-ap.on { border-color: var(--accent, #C2502F); background: color-mix(in srgb, var(--accent, #C2502F) 10%, transparent);
  color: var(--accent-deep, #9A3C20); }
.dcc-cta { all: unset; cursor: pointer; box-sizing: border-box; display: block; width: 100%; margin: 16px 0 6px;
  padding: 15px; border-radius: 999px; text-align: center; background: var(--accent, #C2502F);
  color: var(--on-accent, #FFF7EE); font: 700 14.5px/1 var(--sans, sans-serif); transition: opacity .15s, transform .12s; }
.dcc-cta:active { transform: scale(.985); }
.dcc-cta:disabled { opacity: .45; cursor: default; }
.dcc-ghost { all: unset; cursor: pointer; display: block; width: 100%; text-align: center; padding: 10px;
  font: 600 12.5px/1 var(--sans, sans-serif); color: var(--fg3, #8A8177); }

/* ── Share card v2 (Taste Passport image) — the canvas PNG is the preview, so the
   modal shows exactly what gets shared. Reuses .shc-modal/.shc-backdrop shell. ── */
.shc2-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:420px;transform:translateY(12px) scale(.98);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.shc-modal.open .shc2-wrap{transform:none}
.shc2-stage{position:relative;width:min(78vw,340px,calc((100dvh - 260px)*.6667));aspect-ratio:2/3;border-radius:20px;box-shadow:0 30px 80px rgba(20,14,10,.5);background:#FAF5EC;overflow:hidden}
.shc2-img{display:block;width:100%;height:100%;opacity:0;transition:opacity .4s ease}
.shc2-img.on{opacity:1}
.shc2-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#8A7A6A;font:600 13px/1.4 var(--sans);text-align:center;padding:20px}
.shc2-spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(194,80,47,.18);border-top-color:#C2502F;animation:shc2spin .8s linear infinite}
@keyframes shc2spin{to{transform:rotate(360deg)}}
/* The taste card's failure state — a spinner that can never end is the bug this
   replaces (founder, 2026-08-09: "Drawing Tester's passport…" forever). The usual
   cause is a server still waking, so the wording says so and the retry is one tap. */
.prof-cardfail{gap:16px}
.prof-cardfail p{margin:0;max-width:220px;color:#8A7A6A}
.prof-cardfail .btn{padding:10px 22px;font-size:13px}
.shc2-actions{width:min(78vw,340px);margin-top:2px}
.shc2-actions .shc-btn{transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease}
.shc2-actions .shc-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(20,14,10,.22)}
.shc2-actions .shc-btn:focus-visible{outline:2px solid #FFF7EE;outline-offset:2px}
.shc2-actions .shc-btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.shc2-linkbtn{all:unset;cursor:pointer;font:700 13px/1 var(--sans);color:rgba(255,255,255,.92);padding:8px 12px;border-radius:8px;transition:opacity .18s ease}
.shc2-linkbtn:hover{text-decoration:underline}
.shc2-linkbtn:focus-visible{outline:2px solid #FFF7EE;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.shc2-wrap,.shc2-img,.shc2-actions .shc-btn{transition:none}.shc2-spin{animation:none}}
/* R21 — community profile card: the friend actions (Add + Compare) beneath the passport-card
   hero. Reuses .shc-btn / .shc-copy / .shc-share; just the row + settled-state polish. */
.cm-card-acts{display:flex;gap:10px}
.cm-card-acts .shc-btn.cm-done{background:color-mix(in srgb,var(--accent) 16%,transparent);color:#FFF7EE;cursor:default}
.cm-card-acts .shc-btn:disabled{opacity:.7;cursor:default}


/* R1 — DISH-led placeholder thumb on the craving "Best in Dubai" board. A cuisine-toned
   terracotta duotone with the craving's food glyph, shown when there's no APPROVED community
   photo of that specific dish — never the venue storefront. Terracotta/cream, on-brand. */
.cv-thumb.cv-thumb-dish{
  background:radial-gradient(120% 130% at 72% 14%,#E6A06B 0%,#C2502F 52%,#8A3A1E 100%);
  color:#FFF3E7;font-size:26px;border:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 1px 3px rgba(46,42,38,.10);
}
.cv-thumb.cv-thumb-dish::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.42) .5px,transparent .6px);background-size:4px 4px;
  mix-blend-mode:soft-light;opacity:.5;
}
.cv-thumb.cv-thumb-dish i{position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}

/* ── Meal posts — the multi-photo, per-dish-rated community card ──────────────
   Carousels here are NATIVE scroll-snap (snap-stop:always → one swipe, one photo).
   Never a JS pointer/drag carousel — passes desktop, fails real iOS. */
.cm-pc { position: relative; margin-top: 12px; border-radius: 14px; overflow: hidden; background: var(--tint, #F4EADD); }
.cm-pc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cm-pc-track::-webkit-scrollbar { display: none; }
/* ONE standard frame — 4:5, every post (founder 2026-07-26: "each post has a
   different size… not being very consistent"). This replaced the per-photo aspect
   (first photo's ratio, clamped 4:5…1.91:1): a landscape post rendered at ~40% of a
   portrait post's height and the scroll rhythm stuttered. 4:5 is the Instagram-
   consensus feed standard; food shots are center-composed so the cover-crop keeps
   the dish; and the crop is presentation only — tap-to-open shows the photo
   UNCROPPED on black, which is what keeps the fixed frame honest. */
.cm-pc-track { aspect-ratio: 4 / 5; }
.cm-pc-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.cm-pc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the dish signature has no container, so the PHOTO carries its legibility — the
   same soft foot scrim .cms-gal-slide already paints (shared by the composer
   preview, which signs the same way). */
.cm-pc-slide::after, .pc-slide::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(24, 14, 8, 0.46));
}
/* ── The dish signature — the tagged dish, SIGNED on the photo ────────────────
   ONE treatment shared by the community meal post (.cm-pc-tag), the feed's photo
   gallery (.cms-gal-cap) and the composer preview (.pc-slide-tag), so a dish reads
   the same everywhere it appears.
   (2026-08-07) Founder, pointing at a card: "have the order box look like this —
   italic, bottom right." So the box is gone. A pill — ember or glass — is luggage
   sitting ON a picture; a signature belongs TO it. The dish is now set in the
   display serif, ITALIC, cream, in the bottom-right corner, with its stars under it
   in micro-caps. It rhymes with the venue lockup at top-left (serif name over a
   micro-caps line) and claims the one corner a plated photo can always spare.
   Legibility comes from the foot scrim baked into the slide, not from a container —
   no background, no border, no blur. */
.cm-pc-tag, .pc-slide-tag, .cms-gal-cap {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  text-align: right; pointer-events: none; overflow: hidden;
  font: italic 400 19px/1.25 var(--serif); letter-spacing: 0.005em; color: #FDF9F2;
  text-shadow: 0 1px 2px rgba(22, 12, 6, 0.5), 0 2px 14px rgba(22, 12, 6, 0.4);
  background: none; border: 0; border-radius: 0; padding: 0;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* the dish itself — the only part allowed to truncate */
.cm-pc-tag-n, .pc-slide-tag-n, .cms-gal-cap-n {
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the stars — micro-caps under the name, the venue chip's second-line voice */
.cm-pc-tag-r, .pc-slide-tag-r {
  flex: none; font: 700 9.5px/1.2 var(--sans, sans-serif); font-style: normal;
  letter-spacing: 0.14em; color: rgba(253, 249, 242, 0.9);
}
/* A multi-photo plate carries dots along its foot, and a long dish name is
   right-aligned INTO them — so on those plates only, the signature sits above the
   dots instead of through them. (Single-photo plates keep the tighter corner.) */
.cms-gal.multi .cms-gal-cap,
.cm-pc-track:not([data-pc-n="1"]) .cm-pc-tag { bottom: 30px; }
.cm-pc-count { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(20,14,8,0.55); color: #FFF7EE; font: 700 11px/1.4 var(--sans, sans-serif); }
.cm-pc-dots { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; gap: 5px; padding: 7px 0; pointer-events: none; }
.cm-pc-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,247,238,0.5); transition: background .15s, transform .15s; }
.cm-pc-dot.on { background: #FFF7EE; transform: scale(1.2); }
.cm-pc-cap { margin-top: 10px; font: 500 14px/1.5 var(--sans, sans-serif); color: var(--fg1, #2A2018); }
/* (2026-08-06) #cm-pv lived here — the full-screen uncropped photo viewer a feed
   photo opened on tap. Founder: "you cannot click on an image to zoom in, you just
   keep it the same size" — Instagram's feed has no tap-to-zoom, so neither does
   ours. Deleted with both its triggers rather than left orphaned. */
.cm-pcard .cm-post-place { margin-top: 8px; text-decoration: none; }
.cm-pc-meta { color: var(--fg3, #8B7B63); font-weight: 500; }
.cm-pc-del { margin-left: 4px; flex: none; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line, #E7DECF); background: transparent; color: var(--fg3, #8B7B63); display: grid; place-items: center; cursor: pointer; font-size: 14px; }
.cm-pc-del:hover { color: var(--accent, #C2502F); border-color: var(--accent, #C2502F); }
/* Settings → Blocked accounts (expand-in-place under the Privacy group) */
.set-blocked-list { padding: 4px 16px 12px; }
.set-blocked-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-top: 1px solid var(--line, #E7DECF); }
.set-blocked-name { font: 600 14px/1.3 var(--sans); color: var(--fg1, #2A2018);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-unblock { all: unset; cursor: pointer; flex: none; font: 700 12.5px/1 var(--sans);
  color: var(--accent, #C2502F); border: 1px solid var(--line, #E7DECF);
  border-radius: 999px; padding: 8px 14px; }
.set-unblock:hover { border-color: var(--accent, #C2502F); }
.set-unblock:disabled { opacity: .5; cursor: default; }

/* Report/block overflow — only on OTHER people's cards. Quiet by design: it sits in
   every card header, so it must recede until it's wanted (Guideline 1.2). */
.cm-post-more { margin-left: 4px; flex: none; width: 30px; height: 30px; border-radius: 999px;
  border: none; background: transparent; color: var(--fg3, #8B7B63); display: grid;
  place-items: center; cursor: pointer; font-size: 16px; align-self: flex-start; }
.cm-post-more:hover { color: var(--accent, #C2502F); background: var(--surface-2, #F4ECDD); }
/* ── Owner menu — the ⋯ on YOUR OWN card (2026-07-31). One destructive action,
   as a bottom sheet so the tap target is thumb-height on a phone. Portals to
   <body> for the same reason the notification sheet does: #app is the frozen-
   shell scroller, so a fixed child mounted inside it gets trapped under the dock. */
.cm-ownmenu { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: flex-end; justify-content: center; }
.cm-ownmenu-bd { position: absolute; inset: 0; background: rgba(20, 14, 8, 0.5); }
.cm-ownmenu-sheet { position: relative; width: min(520px, 100%); background: var(--surface, #fff);
  border-radius: 20px 20px 0 0; padding: 10px 12px max(14px, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px -12px rgba(43, 28, 19, 0.4); animation: cmSheetUp .26s var(--ease-out, ease) both; }
.cm-ownmenu-act { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; background: transparent; padding: 15px 12px; border-radius: 14px; cursor: pointer; color: #B4442E; }
.cm-ownmenu-act:hover { background: color-mix(in srgb, #B4442E 8%, transparent); }
.cm-ownmenu-act:disabled { opacity: .5; cursor: default; }
.cm-ownmenu-act i { font-size: 21px; flex: none; }
.cm-ownmenu-t { display: block; font: 700 15px/1.25 var(--sans, sans-serif); }
.cm-ownmenu-s { display: block; margin-top: 2px; font: 500 12.5px/1.4 var(--sans, sans-serif); color: var(--fg3, #8B7B63); }
.cm-ownmenu-cancel { width: 100%; margin-top: 4px; border: 0; background: transparent; padding: 14px;
  border-radius: 14px; font: 700 14.5px/1 var(--sans, sans-serif); color: var(--fg2, #5C4F3D); cursor: pointer; }
.cm-ownmenu-cancel:hover { background: var(--surface-2, #F4ECDD); }
@media (prefers-reduced-motion: reduce) { .cm-ownmenu-sheet { animation: none; } }

/* "Ready to post" — rated meals waiting for photos */
.cm-ready-rail { display: flex; align-items: stretch; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
/* Every card the SAME height, every row on the SAME line (founder: "no ups and
   downs"): the venue name is a FIXED two-line block (short names reserve the
   second line, long names clamp to it), sub/dishes are single-line, and the
   button pins to the card bottom (margin-top:auto) with the rail stretching all
   cards to one height — so the Add-photos buttons align to the pixel. */
.cm-ready { position: relative; flex: 0 0 240px; background: var(--surface, #fff); border: 1px solid var(--line, #E7DECF); border-radius: 16px; padding: 14px 14px 12px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)); display: flex; flex-direction: column; gap: 3px; }
.cm-ready-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: none; background: transparent; color: var(--fg3, #8B7B63); border-radius: 999px; display: grid; place-items: center; cursor: pointer; font-size: 13px; }
.cm-ready-rest { font: 700 14.5px/1.25 var(--sans, sans-serif); color: var(--fg1, #2A2018); padding-right: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.5em; }
.cm-ready-sub { font: 600 11.5px/1.35 var(--sans, sans-serif); color: var(--accent, #C2502F); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-ready-dishes { font: 500 12px/1.4 var(--sans, sans-serif); color: var(--fg3, #8B7B63); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 9px; }
.cm-ready-go { margin-top: auto; justify-content: center; }

/* ── The post composer (postcomposer.js) — staged locally, one explicit Share ── */
.pc-ov { position: fixed; inset: 0; z-index: 1300; background: rgba(20,14,8,0.5); }
.pc-sheet { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: min(520px, 100%); max-height: 96dvh; display: flex; flex-direction: column; background: var(--bg, #FFF7EE); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,0.2); }
.pc-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line, #E7DECF); }
.pc-cancel { border: none; background: transparent; color: var(--fg3, #8B7B63); font: 600 14px/1 var(--sans, sans-serif); cursor: pointer; padding: 6px 2px; }
.pc-title { flex: 1; text-align: center; font: 700 16px/1.2 var(--serif, serif); color: var(--fg1, #2A2018); display: flex; flex-direction: column; }
.pc-title-rest { font: 600 11.5px/1.3 var(--sans, sans-serif); color: var(--fg3, #8B7B63); }
.pc-head-spacer { width: 44px; }
.pc-scroll { overflow-y: auto; padding: 14px 16px; flex: 1; min-height: 120px; }
.pc-carousel { position: relative; border-radius: 14px; overflow: hidden; background: var(--tint, #F4EADD); margin-bottom: 12px; }
.pc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pc-track::-webkit-scrollbar { display: none; }
.pc-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 4/3; }
.pc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* shared dish signature (see .cm-pc-tag) — lifted to clear the composer's tools row */
.pc-slide-tag { bottom: 46px; }
.pc-slide-cover { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(20,14,8,0.55); color: #FFF7EE; font: 700 10.5px/1.4 var(--sans, sans-serif); }
.pc-slide-tools { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 8px; }
.pc-tool { width: 32px; height: 32px; border-radius: 999px; border: none; background: rgba(20,14,8,0.55); color: #FFF7EE; display: grid; place-items: center; cursor: pointer; font-size: 14px; }
.pc-tool:disabled { opacity: 0.35; cursor: default; }
.pc-tool-del { background: rgba(160,45,26,0.8); }
.pc-dots { position: absolute; top: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.pc-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,247,238,0.5); }
.pc-dot.on { background: #FFF7EE; }
.pc-pick { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border: 1.5px dashed var(--line, #E7DECF); border-radius: 14px; background: var(--surface, #fff); cursor: pointer; color: var(--accent, #C2502F); font-size: 26px; }
.pc-pick.pc-pick-more { flex-direction: row; justify-content: center; padding: 12px 16px; font-size: 18px; gap: 8px; }
.pc-pick-t { font: 700 14.5px/1.3 var(--sans, sans-serif); color: var(--fg1, #2A2018); }
.pc-pick-s { font: 500 12px/1.4 var(--sans, sans-serif); color: var(--fg3, #8B7B63); }
.pc-pick.pc-pick-more .pc-pick-s { display: none; }
/* Two photo sources (founder: add now OR pick from My Food). The doors stack;
   once slides exist both collapse to compact rows via .pc-pick-more. */
.pc-src { display: flex; flex-direction: column; gap: 8px; }
.pc-src:has(.pc-pick-lib:not([hidden])) .pc-pick:not(.pc-pick-lib) { padding: 18px 16px; }
.pc-pick-lib { border-style: solid; background: color-mix(in srgb, var(--accent) 5%, var(--surface, #fff)); }
/* "From My Food" picker grid — thumbs with a terracotta check, in-sheet */
.pc-lib { margin-top: 4px; }
.pc-lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pc-lib-cell { position: relative; aspect-ratio: 1; border: 2px solid transparent; border-radius: 12px; overflow: hidden; padding: 0; background: var(--line, #E7DECF); cursor: pointer; }
.pc-lib-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-lib-cell .pc-lib-ck { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(26, 15, 9, 0.45); color: transparent; border: 1.5px solid rgba(255, 247, 238, 0.75); font-size: 13px; transition: background 0.15s ease, color 0.15s ease; }
.pc-lib-cell.on { border-color: var(--accent, #C2502F); }
.pc-lib-cell.on .pc-lib-ck { background: var(--accent, #C2502F); color: #FFF7EE; border-color: transparent; }
.pc-lib-acts { display: flex; gap: 8px; margin-top: 10px; }
.pc-lib-add { flex: 1; border: 0; border-radius: 12px; padding: 12px 16px; background: var(--accent, #C2502F); color: #FFF7EE; font: 700 14px/1 var(--sans, sans-serif); cursor: pointer; }
.pc-lib-add:disabled { opacity: 0.45; cursor: default; }
.pc-lib-close { border: 1px solid var(--line, #E7DECF); border-radius: 12px; padding: 12px 16px; background: var(--surface, #fff); font: 600 13.5px/1 var(--sans, sans-serif); color: var(--fg1, #2A2018); cursor: pointer; }
.pc-lbl { font: 700 12.5px/1.3 var(--sans, sans-serif); color: var(--fg1, #2A2018); margin: 14px 0 8px; }
.pc-lbl-s { font-weight: 500; color: var(--fg3, #8B7B63); }
.pc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line, #E7DECF); background: var(--surface, #fff); font: 600 12.5px/1.2 var(--sans, sans-serif); color: var(--fg1, #2A2018); cursor: pointer; }
.pc-chip-r { color: var(--accent, #C2502F); font-weight: 700; }
.pc-chip.on { border-color: var(--accent, #C2502F); background: color-mix(in srgb, var(--accent, #C2502F) 9%, transparent); }
/* Shared tray: several dishes on one photo. The HERO (first tapped) reads
   strongest; the rest carry a quiet order number so the diner can see what
   they've claimed. Numbers only appear once more than one dish is tagged. */
.pc-chip.is-hero { border-color: var(--accent, #C2502F); background: color-mix(in srgb, var(--accent, #C2502F) 16%, transparent); font-weight: 700; }
.pc-chip-n { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px; border-radius: 50%; background: var(--accent, #C2502F); color: #fff; font: 700 10px/1 var(--sans, sans-serif); }
.pc-chip-none { color: var(--fg3, #8B7B63); }
.pc-cap-in { width: 100%; border: 1px solid var(--line, #E7DECF); border-radius: 12px; background: var(--surface, #fff); padding: 10px 12px; font: 500 14px/1.5 var(--sans, sans-serif); color: var(--fg1, #2A2018); resize: vertical; margin-top: 14px; }
.pc-seg { display: flex; gap: 7px; }
.pc-seg-b { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 12px; border: 1px solid var(--line, #E7DECF); background: var(--surface, #fff); font: 600 12.5px/1.2 var(--sans, sans-serif); color: var(--fg2, #5C4F3D); cursor: pointer; }
.pc-seg-b.on { border-color: var(--accent, #C2502F); color: var(--accent, #C2502F); background: color-mix(in srgb, var(--accent, #C2502F) 9%, transparent); }
/* Community needs a photo — the All-of-Noodl lane is a photo grid, so a photo-less
   meal can't reach it. Disabled and dimmed rather than silently accepted. */
.pc-seg-b:disabled, .pc-seg-b.pc-seg-off { opacity: 0.42; cursor: not-allowed; }
.pc-seg-b:disabled.on, .pc-seg-b.pc-seg-off.on { border-color: var(--line, #E7DECF); color: var(--fg2, #5C4F3D); background: var(--surface, #fff); }
/* the audience block now rides the pinned footer — tighten its label lead-in */
.pc-foot .pc-aud { margin-bottom: 10px; }
.pc-foot .pc-lbl { margin: 0 0 7px; }
.pc-foot { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line, #E7DECF); }
.pc-share { width: 100%; padding: 13px; border: none; border-radius: 999px; background: var(--accent, #C2502F); color: #FFF7EE; font: 700 15px/1.2 var(--sans, sans-serif); cursor: pointer; }
.pc-share:disabled { opacity: 0.75; cursor: default; }
.pc-foot-note { margin: 8px 0 0; text-align: center; font: 500 11.5px/1.4 var(--sans, sans-serif); color: var(--fg3, #8B7B63); }
.pc-foot-err { color: var(--accent, #C2502F); font-weight: 600; }
/* Reposition entry (on each carousel slide) + the focused drag-to-crop editor */
.pc-reposition { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: none; border-radius: 999px; background: rgba(20,14,8,0.6); color: #FFF7EE; font: 700 11.5px/1 var(--sans, sans-serif); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pc-reposition i { font-size: 14px; }
.pcr-ov { position: fixed; inset: 0; z-index: 1400; background: #17110B; display: flex; flex-direction: column; }
.pcr-head { display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 18px 12px; }
.pcr-cancel, .pcr-done { border: none; background: transparent; font: 700 15px/1 var(--sans, sans-serif); cursor: pointer; padding: 6px 2px; }
.pcr-cancel { color: rgba(255,247,238,0.7); }
.pcr-done { color: #F2A65A; }
.pcr-title { font: 700 15px/1 var(--sans, sans-serif); color: #FFF7EE; }
.pcr-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 12px; }
.pcr-frame { width: min(92vw, 520px); aspect-ratio: 4/3; overflow: hidden; border-radius: 14px; background: #000; cursor: grab; touch-action: none; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.7); }
.pcr-dragging .pcr-frame { cursor: grabbing; }
.pcr-img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.pcr-hint { margin: 0; font: 600 13px/1.4 var(--sans, sans-serif); color: rgba(255,247,238,0.7); text-align: center; }
/* ═══════════════════════════════════════════════════════════════════════════
   LYX — LOYALTY REDESIGN (2026-07-09, founder brief): Bonvoy-grade standing
   page. Membership card (tier material artifact) + circular progress ring +
   "Rewards are being built" honest anticipation + the five-tier climb, each
   rung a premium card in its OWN tier colour (.tier-<id> --t-* tokens).
   EVERYTHING here is scoped .lyx-* / .pl-page.lyx — zero bleed. The perk-card,
   stamp-modal, tier-up-modal and toast styles above are UNCHANGED and shared.
   Reuses existing keyframes: plRise, plGloss, offsh.
   ═══════════════════════════════════════════════════════════════════════════ */
.pl-page.lyx{max-width:560px}
.lyx-head{margin:6px 0 16px}

/* ── the membership card — the artifact ───────────────────────────────────── */
.lyx-card{position:relative;overflow:hidden;border-radius:24px;padding:22px 22px 19px;
  min-height:196px;display:flex;flex-direction:column;
  background:var(--t-bg,linear-gradient(135deg,#EFE5D1,#E2D2B6));color:var(--t-text,#3E3020);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-gold,#EAD4A0) 42%,transparent),
             inset 0 1.5px 0 rgba(255,255,255,.16),
             0 30px 56px -24px rgba(45,33,14,.6),0 8px 18px -10px rgba(45,33,14,.4)}
.lyx-c-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:radial-gradient(rgba(255,255,255,.55) .5px,transparent .6px);background-size:3px 3px}
.lyx-c-sheen{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(460px 220px at 86% -12%,rgba(255,255,255,.2),transparent 62%)}
.lyx-c-gloss{position:absolute;top:0;bottom:0;left:-45%;width:40%;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.32) 50%,transparent);
  transform:skewX(-14deg);animation:plGloss 1.15s cubic-bezier(.16,1,.3,1) .3s 1 both}
.lyx-c-mark{position:absolute;right:-22px;bottom:-34px;width:168px;height:168px;opacity:.13;pointer-events:none}
.lyx-c-mark svg{width:100%;height:100%;display:block}
.lyx-c-mark circle,.lyx-c-mark path{stroke:var(--t-gold,#EAD4A0)}
.lyx-c-top{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lyx-c-brand{font:800 10px/1 var(--pl-sans);letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--t-text,#3E3020) 80%,transparent)}
.lyx-c-lvl{font:800 10px/1 var(--pl-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-gold,color-mix(in srgb,var(--t-text,#3E3020) 85%,transparent));white-space:nowrap}
.lyx-c-tier{position:relative;font-family:var(--pl-serif);font-weight:600;font-size:33px;
  line-height:1.03;letter-spacing:-.01em;margin:15px 0 0}
.lyx-c-tag{position:relative;font:500 12.5px/1.5 var(--pl-sans);margin:7px 0 0;max-width:34ch;
  color:color-mix(in srgb,var(--t-text,#3E3020) 82%,transparent)}
.lyx-c-foot{position:relative;margin-top:auto;padding-top:13px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:12px;
  border-top:1px solid color-mix(in srgb,var(--t-gold,#EAD4A0) 28%,transparent)}
.lyx-c-holder{font-family:var(--pl-serif);font-weight:500;font-size:16.5px;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lyx-c-pts{flex:none;text-align:right;font:800 9.5px/1 var(--pl-sans);letter-spacing:.15em;
  text-transform:uppercase;color:color-mix(in srgb,var(--t-text,#3E3020) 78%,transparent)}
.lyx-c-pts b{display:block;font:600 30px/1 var(--pl-serif);letter-spacing:-.01em;margin-bottom:4px;
  color:var(--t-gold,var(--t-text,#3E3020))}
/* skeleton variant keeps the shimmer, not the tier material */
.lyx-card.pl-skel-card{background:linear-gradient(100deg,#efe7da 30%,#f7f1e7 50%,#efe7da 70%);
  background-size:200% 100%;animation:offsh 1.2s ease-in-out infinite;box-shadow:none;min-height:196px}

/* ── "The road to {next}" — the progress block INSIDE the membership card
   (merged 2026-07-09, founder: one big tier-coloured box). All text/stroke
   colours come from the .tier-<id> material tokens so the block reads on the
   light New-Diner sand AND the dark bronze/olive/garnet/obsidian materials. ── */
.lyx-road{position:relative;margin-top:16px;padding-top:15px;
  border-top:1px solid color-mix(in srgb,var(--t-gold,#EAD4A0) 28%,transparent)}
.lyx-sec-t{font-family:var(--pl-serif);font-weight:600;font-size:18px;color:var(--t-text,var(--pl-espresso));margin:0}
.lyx-next-row{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:12px;text-align:center}
.lyx-ring{position:relative;width:150px;height:150px;flex:none}
.lyx-ring svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.lyx-ring-track{fill:none;stroke:color-mix(in srgb,var(--t-text,#3E3020) 12%,transparent);stroke-width:11}
.lyx-ring-fill{fill:none;stroke:var(--t-gold,var(--pl-terra));stroke-width:11;stroke-linecap:round;
  stroke-dasharray:var(--lyx-c);stroke-dashoffset:var(--lyx-o);
  animation:lyxRingIn 1.3s cubic-bezier(.16,1,.3,1) .35s both}
.lyx-ring-fill.is-summit{stroke:var(--t-gold,#BC8F35)}
@keyframes lyxRingIn{from{stroke-dashoffset:var(--lyx-c)}}
.lyx-ring-center{position:absolute;inset:0;display:grid;place-content:center;gap:3px;text-align:center}
.lyx-ring-num{font:600 38px/1 var(--pl-serif);letter-spacing:-.02em;color:var(--t-text,var(--pl-espresso))}
.lyx-ring-sub{font:800 9.5px/1.4 var(--pl-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--t-text-soft,var(--pl-ink3))}
.lyx-ring-crest{display:block;width:36px;height:36px;margin:0 auto;color:var(--t-gold,#BC8F35)}
.lyx-ring-crest svg{width:100%;height:100%;display:block;transform:none}
.lyx-ring-crest-ink{color:var(--t-gold,var(--pl-terra))}
.lyx-ring-crest-ink svg{stroke:currentColor;fill:none;stroke-width:1.8}
.lyx-next-info{flex:1;min-width:0}
.lyx-ni-pts{font:500 13px/1.2 var(--pl-sans);color:var(--t-text-soft,var(--pl-ink2));margin:0}
.lyx-ni-pts b{font:600 24px/1 var(--pl-serif);letter-spacing:-.01em;color:var(--t-text,var(--pl-espresso));margin-right:5px}
.lyx-ni-line{font:500 12.5px/1.55 var(--pl-sans);color:var(--t-text-soft,var(--pl-ink2));margin:7px 0 0}
.lyx-ni-gate{font:700 11.5px/1.45 var(--pl-sans);color:var(--t-gold,var(--pl-terra));margin:6px 0 0}
.lyx-ni-cap{font:500 11px/1.5 var(--pl-sans);color:var(--t-text-soft,var(--pl-ink3));margin:10px 0 0;padding-top:9px;
  border-top:1px dashed color-mix(in srgb,var(--t-text,#3E3020) 24%,transparent)}
@media (min-width:480px){
  .lyx-next-row{flex-direction:row;text-align:left;gap:20px}
  .lyx-ni-cap{max-width:30ch}
}

/* ── "Rewards are being built" — the honest anticipation note ─────────────── */

/* ── cold-start — the quiz nudge (never a dead tab) ───────────────────────── */
.lyx-cold{margin:20px 0 0;padding:22px 18px;border-radius:20px;text-align:center;
  background:linear-gradient(160deg,#FFFDF8,#FBF3E6);border:1px solid var(--pl-line);
  box-shadow:0 12px 30px -22px rgba(120,80,40,.5)}
.lyx-cold-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:color-mix(in srgb,var(--pl-terra) 12%,transparent);color:var(--pl-terra-d);margin-bottom:10px}
.lyx-cold-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.lyx-cold-t{font-family:var(--pl-serif);font-weight:600;font-size:19px;color:var(--pl-espresso);margin:0}
.lyx-cold-s{font:600 13.5px/1.5 var(--pl-sans);color:var(--pl-ink2);margin:7px auto 0;max-width:32ch}
.lyx-cold-note{font:500 11.5px/1.5 var(--pl-sans);color:var(--pl-ink3);margin:9px auto 0;max-width:36ch}
.lyx-cta{display:inline-block;margin-top:14px;padding:12px 22px;border-radius:999px;cursor:pointer;
  background:var(--pl-terra);color:#fff;font:800 13.5px/1 var(--pl-sans);text-decoration:none;
  box-shadow:0 8px 20px -8px rgba(194,80,47,.6);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.lyx-cta:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 11px 24px -8px rgba(194,80,47,.65)}

/* ── the climb — five tier cards, each in its own material ────────────────── */
.lyx-ladder{margin:26px 0 0}
.lyx-sec{margin:0 2px 14px}
.lyx-sec h2{font-family:var(--pl-serif);font-weight:600;font-size:21px;letter-spacing:-.01em;
  color:var(--pl-espresso);margin:0}
.lyx-sec p{font:500 12.5px/1.5 var(--pl-sans);color:var(--pl-ink3);margin:3px 0 0}
.lyx-ladder ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lyx-tier{position:relative;overflow:hidden;border-radius:22px;padding:17px 18px 16px;
  background:var(--t-bg,#EFE5D1);color:var(--t-text,#3E3020);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-gold,#fff) 30%,transparent),
             0 16px 34px -26px rgba(45,33,14,.6)}
.lyx-tier.is-cur{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--t-gold,#fff) 65%,transparent),
             0 22px 44px -24px rgba(45,33,14,.66)}
.lyx-t-wm{position:absolute;right:8px;top:-14px;font:600 92px/1 var(--pl-serif);
  color:color-mix(in srgb,var(--t-gold,#fff) 15%,transparent);pointer-events:none;user-select:none}
.lyx-t-head{position:relative;display:flex;align-items:center;gap:11px}
.lyx-t-rank{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font:600 15px/1 var(--pl-serif);color:var(--t-gold,var(--t-text,#3E3020));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--t-gold,#fff) 55%,transparent)}
.lyx-t-names{flex:1;min-width:0}
.lyx-t-name{font-family:var(--pl-serif);font-weight:600;font-size:19px;line-height:1.05;margin:0}
.lyx-t-min{font:800 9.5px/1 var(--pl-sans);letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--t-text,#3E3020) 72%,transparent);margin:4px 0 0}
.lyx-t-state{flex:none;display:inline-flex;align-items:center;gap:5px;font:800 10px/1 var(--pl-sans);
  letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px;white-space:nowrap}
.lyx-t-state svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3}
.lyx-t-state.is-done{color:var(--t-gold,var(--t-text));
  background:color-mix(in srgb,var(--t-gold,#fff) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-gold,#fff) 40%,transparent)}
.lyx-t-state.is-cur{background:var(--t-gold,#EAD4A0);color:#2A2018}
.lyx-tier.tier-new_diner .lyx-t-state.is-cur{color:#FFF8EC}
.lyx-t-state.is-fut{color:color-mix(in srgb,var(--t-text,#3E3020) 76%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-text,#3E3020) 30%,transparent)}
.lyx-t-desc{position:relative;font:500 12.5px/1.55 var(--pl-sans);margin:11px 0 0;max-width:46ch;
  color:color-mix(in srgb,var(--t-text,#3E3020) 84%,transparent)}
/* The rung says what it MEANS about the diner — one line, no benefit rows and no
   Live/Coming-soon tags (2026-08-08). An unfunded benefit is not listed at all. */
/* The rung description is INSIDE a tier-coloured card, so it must use the card's
   own text token — never a fixed ink. It shipped as var(--pl-ink2) (dark) and so
   was legible on the sand New Diner card and effectively invisible on Verified,
   Local and Tastemaker (founder screenshot, v1051). --t-text-soft is published by
   every .tier-* block for exactly this: white-ish on the dark rungs, espresso on
   the light one. The border follows the same token so it can't go dark-on-dark
   either. */
.lyx-t-line{position:relative;margin:12px 0 0;padding:12px 0 0;
  font:500 12.5px/1.6 var(--pl-sans);
  color:var(--t-text-soft,color-mix(in srgb,var(--t-text,#3E3020) 78%,transparent));
  border-top:1px solid color-mix(in srgb,var(--t-text,#3E3020) 20%,transparent)}

/* THE RECORD — the page's lead. Facts the diner earned, owing nothing to a partner. */
.lyx-rec{margin:16px 0 0;padding:16px 18px;border-radius:20px;
  background:var(--pl-paper,#FFFDF9);border:1px solid var(--pl-line,#E8DDCF)}
.lyx-rec-t{font:800 9.5px/1 var(--pl-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--pl-ink2);margin:0}
.lyx-rec-row{display:flex;flex-wrap:wrap;gap:22px;margin:12px 0 0}
.lyx-rec-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.lyx-rec-cell b{font-family:var(--pl-serif);font-weight:600;font-size:26px;line-height:1;
  color:var(--pl-espresso)}
.lyx-rec-cell span{font:600 11.5px/1.3 var(--pl-sans);color:var(--pl-ink2)}
.lyx-rec-s{font:500 11.5px/1.5 var(--pl-sans);color:var(--pl-ink2);margin:12px 0 0;opacity:.85}
.lyx-t-carrot{position:relative;margin:12px 0 0;padding:12px 14px;border-radius:14px;
  background:color-mix(in srgb,#fff 52%,transparent);font:600 12.5px/1.55 var(--pl-sans);color:#3E3020}
.lyx-t-carrot b{color:#7A4D22}
.lyx-t-gifts{position:relative;display:flex;flex-direction:column;gap:9px;margin-top:12px}
.lyx-t-unlock{position:relative;font:600 11.5px/1.5 var(--pl-sans);margin:12px 0 0;
  color:color-mix(in srgb,var(--t-text,#3E3020) 72%,transparent)}
.lyx-t-unlock b{color:var(--t-gold,var(--t-text,#3E3020));font-weight:800}

/* ── referral invite ──────────────────────────────────────────────────────── */
.lyx-invite{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin:22px 0 0;
  background:#fff;border:1px solid var(--pl-line);border-radius:18px;padding:14px 16px}
.lyx-inv-ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--pl-terra) 10%,transparent);color:var(--pl-terra-d)}
.lyx-inv-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9}
.lyx-inv-body{flex:1;min-width:180px}
.lyx-inv-t{font:700 13.5px/1.3 var(--pl-sans);color:var(--pl-espresso);margin:0}
.lyx-inv-s{font:500 12px/1.5 var(--pl-sans);color:var(--pl-ink2);margin:3px 0 0}
.lyx-inv-s b{color:var(--pl-terra-d)}
.lyx-inv-btn{flex:none;border:none;cursor:pointer;padding:10px 16px;border-radius:999px;
  background:var(--pl-terra);color:#fff;font:800 12.5px/1 var(--pl-sans);
  box-shadow:0 8px 18px -8px rgba(194,80,47,.55);transition:transform .2s ease,filter .2s ease}
.lyx-inv-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.lyx-inv-btn:active{transform:scale(.96)}

/* ── visitor trip card ────────────────────────────────────────────────────── */
.lyx-trip{display:flex;align-items:center;gap:14px;margin:18px 0 0;text-decoration:none;
  background:#fff;border:1px solid var(--pl-line);border-radius:18px;padding:15px 17px;
  box-shadow:0 12px 26px -20px rgba(120,80,40,.4);transition:transform .2s ease,box-shadow .2s ease}
.lyx-trip:hover{transform:translateY(-1px);box-shadow:0 16px 30px -20px rgba(120,80,40,.5)}
.lyx-trip-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--pl-terra) 10%,transparent);color:var(--pl-terra-d)}
.lyx-trip-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.lyx-trip-body{flex:1;min-width:0}
.lyx-trip-t{display:block;font:600 15px/1.25 var(--pl-sans);color:var(--pl-espresso)}
.lyx-trip-s{display:block;margin-top:3px;font:400 12.5px/1.45 var(--pl-sans);color:var(--pl-ink3)}

/* ── entrance motion + a11y (reduced-motion safe) ─────────────────────────── */
.pl-page.lyx .lyx-card{animation:plRise .55s cubic-bezier(.16,1,.3,1) both}
.pl-page.lyx .lyx-rec,.pl-page.lyx .lyx-cold{animation:plRise .55s cubic-bezier(.16,1,.3,1) .12s both}
.pl-page.lyx .lyx-ladder,.pl-page.lyx .lyx-invite,.pl-page.lyx .lyx-trip{animation:plRise .55s cubic-bezier(.16,1,.3,1) .16s both}
.pl-page.lyx a:focus-visible,.pl-page.lyx button:focus-visible,.pl-page.lyx summary:focus-visible{
  outline:2px solid var(--pl-terra-d);outline-offset:2px;border-radius:10px}
.pl-page.lyx .pl-claim:hover{filter:brightness(1.05)}
@media (prefers-reduced-motion:reduce){
  .pl-page.lyx .lyx-card,.pl-page.lyx .lyx-rec,.pl-page.lyx .lyx-cold,
  .pl-page.lyx .lyx-ladder,.pl-page.lyx .lyx-invite,.pl-page.lyx .lyx-trip,
  .lyx-c-gloss,.lyx-ring-fill{animation:none !important}
  .lyx-cta,.lyx-inv-btn,.lyx-trip{transition:none}
}

/* ── desktop refinement ───────────────────────────────────────────────────── */
@media (min-width:768px){
  .lyx-card{padding:26px 26px 22px;min-height:212px;border-radius:26px}
  .lyx-c-tier{font-size:38px}
  .lyx-c-pts b{font-size:34px}
  .lyx-road{padding-top:18px;margin-top:19px}
  .lyx-tier{padding:19px 22px 18px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV-SET — the Settings gear in page headers (2026-07-09). Moved from the
   Loyalty header to the Passport, next to the My Table pill. Promoted from the
   old loyalty.js inline styles to a REAL rule so any header can reuse it:
   a 34px tappable circle on the header surface/line grammar, sized to sit
   flush beside .mt-navpill (nav-actions centers them vertically).
   Passport runs under body.fal-on — the vars below resolve on that shell too.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-set {
  width: 34px; height: 34px; flex: none; padding: 0;
  display: grid; place-items: center; text-decoration: none;
  border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line-2, var(--line));
  color: var(--fg2, var(--text-2)); font-size: 18px; line-height: 1;
  box-shadow: var(--shadow-xs);
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out),
              transform 0.18s var(--ease-spring);
}
.nav-set i { display: block; }
.nav-set:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--fg1, var(--text)); transform: translateY(-1px);
}
.nav-set:active { transform: scale(0.94); }
/* fal-on (the Passport's warm shell): a weightier presence there. */
body.fal-on .nav-set { color: var(--fg1); box-shadow: var(--shadow-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   RCARD-OFFER — the "Your gift here" badge on venue cards (2026-07-09).
   Personal-eligibility marker ONLY: injected post-paint from the diner's own
   /api/perks payload (already tier/taste/audience-gated server-side), so it can
   never over-promise, and it NEVER affects sort order. Top-LEFT of the photo —
   .rcard-price owns top-right, .rcard-flag/.rcard-soon own bottom-left. Quiet,
   premium: terracotta on cream, gift glyph, pill radius. Never a % or "deal".
   Shared by the Browse cards (.rcard-media) and the Home rail photo boxes.
   ═══════════════════════════════════════════════════════════════════════════ */
.rcard-offer {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--sans); letter-spacing: 0.02em; white-space: nowrap;
  color: var(--accent-deep, #9A3C20);
  background: rgba(255, 250, 242, 0.94);
  padding: 6px 11px 6px 9px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(42, 32, 24, 0.28),
              inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none;   /* decoration — never intercepts the card tap */
}
.rcard-offer i { font-size: 13px; color: var(--accent); }
/* Photo-less gradient cards keep their decorative glyph in this corner — the badge wins. */
.rcard-media:has(.rcard-offer) .rcard-glyph { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CMS — the COMMUNITY STREAM, editorial edition (2026-07-13). Beli card anatomy
   in Noodl's terracotta/cream, set like a magazine plate: Taste-Buddy header →
   venue MASTHEAD (photo-less posts get the venue's REAL Places photo under an
   espresso scrim; venues without one get an honest terracotta gradient) or the
   EDGE-TO-EDGE dish carousel (photo posts) → serif dish receipt → action bar.
   The carousel is NATIVE CSS scroll-snap with scroll-snap-stop:always (one
   photo per swipe) — the proven .r-gal-* venue-gallery pattern; NEVER a JS
   pointer carousel (fails on real iOS, reported 3×). Entrance is a pure CSS
   animation on .cms-card so "load more" appends animate too — no observers.
   Everything scoped .cms-* + appended overrides on existing .cm-* (later-in-
   file wins; the legacy .cm-post block stays intact — /u/{handle} still renders
   with it). Ember spectrum NOT used here (taste visuals only).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the bell + notification sheet (the in-app inbox) ── */
.cm-bell { position: relative; }
.cm-bell-dot {
  position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 999px;
  background: var(--accent); border: 2px solid var(--surface, #FFFDF8);
}
.cm-ntf-k { font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 6px 4px; }
.cm-ntf-t { font: 400 24px/1.1 var(--serif); color: var(--text); margin: 0 6px 14px; }
.cm-ntf-list { display: flex; flex-direction: column; }
.cm-ntf-row {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 6px;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor: pointer;
}
.cm-ntf-row:first-child { border-top: 0; }
.cm-ntf-row.is-new { background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 12px; }
/* like/comment rows deep-link to the post — the chevron says "this goes somewhere" */
.cm-ntf-go { margin-left: auto; flex: none; color: var(--text-3); font-size: 14px; }
/* the located post pulses once so the eye lands on it (Instagram-style) */
.cms-card.cm-hl, .cm-post.cm-hl { animation: cmHl 2.4s ease; }
@keyframes cmHl {
  0%, 55% { box-shadow: 0 0 0 2px var(--accent), 0 10px 28px -14px color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .cms-card.cm-hl, .cm-post.cm-hl { animation: none; box-shadow: 0 0 0 2px var(--accent); } }
.cm-ntf-toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 3000;
  background: var(--text); color: var(--surface); font: 600 13.5px/1 var(--fal-sans, var(--sans)); border-radius: 999px; padding: 12px 18px;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.4); }
.cm-ntf-av { flex: none; width: 34px; height: 34px; border-radius: 999px; overflow: hidden; display: inline-flex; }
.cm-ntf-tx { flex: 1; min-width: 0; }
.cm-ntf-line { display: block; font: 500 13.5px/1.45 var(--sans); color: var(--text); }
.cm-ntf-line b { font-weight: 700; }
.cm-ntf-q { font-family: var(--serif); font-style: italic; color: var(--text-2); }
.cm-ntf-when { display: block; font: 500 11px/1.3 var(--sans); color: var(--text-3, #A89A85); margin-top: 3px; }

/* ── stream lanes: You & friends ↔ All of Noodl — a SEGMENTED CONTROL (one warm
   track, the active side lifts to a raised surface), not two floating chips ── */
.cms-lanes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 2px 0 16px;
  padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.cms-lane-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 12.5px/1 var(--sans); letter-spacing: .01em;
  min-height: 38px; padding: 0 10px; border-radius: 999px;
  border: 0; background: transparent; color: var(--text-2);
  cursor: pointer; -webkit-tap-highlight-color: transparent; white-space: nowrap;
  transition: background .18s var(--ease-out, ease), color .18s var(--ease-out, ease), box-shadow .18s var(--ease-out, ease);
}
.cms-lane-chip i { font-size: 15px; }
.cms-lane-chip.on {
  background: var(--surface);
  color: var(--accent-deep, #A8431F);
  box-shadow: 0 1px 2px rgba(35, 21, 13, 0.08), 0 4px 12px -6px rgba(35, 21, 13, 0.2);
}
.cms-top[data-puid] { cursor: pointer; }

/* ── the All-of-Noodl DISCOVERY GRID (Lemon8/Zesty anatomy, Noodl language):
   2-column staggered wall — photo tile → serif title → buddy chip + live ♥ ── */
/* The wall is INSET; the single-column stream beside it is not (founder, 2026-08-09:
   "the pictures touch the screen on the right and left hand side — let's add a very
   small margin"). .cms-feed pulls itself out to the page edges with margin-inline:-20px
   so a full-bleed 4:5 plate touches both sides, which is right for the circle lane's
   one-per-row sheets and wrong here: two rounded tiles jammed against the bezel read
   as clipped rather than composed. 12px matches the column gutter exactly, so the gap
   outside the wall equals the gap down its middle. */
/* The all-lane GRID shares its container (#cm-feed-all) with the STREAM, which
   paints a --surface-2 ground so the gap between full-bleed cards reads as a seam
   of light. A grid has no such seam to draw — the tiles are separate objects with
   their own edges — so that ground only ever surfaced as a grey wash in the
   gutters and down both margins. Founder: "let the margins here on the right and
   left be white, not gray." The ground belongs to the stream; the grid overrides
   it back to the page's own white. */
.cms-feed:has(> .cms-grid) { background: transparent; }
.cms-grid { columns: 2; column-gap: 12px; padding-inline: 12px; }
.cms-tile {
  break-inside: avoid; margin: 0 0 14px; border-radius: 18px; overflow: hidden;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  box-shadow: 0 1px 2px rgba(35, 21, 13, 0.05), 0 10px 26px -18px rgba(35, 21, 13, 0.2);
  animation: cmsIn 0.3s var(--ease-out, ease) both;
}
.cms-tile-ph {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  position: relative; background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  -webkit-tap-highlight-color: transparent;
}
.cms-tile-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cms-tile-ph.r45 { aspect-ratio: 4 / 5; }
.cms-tile-ph.r11 { aspect-ratio: 1 / 1; }
.cms-tile-ph.r34 { aspect-ratio: 3 / 4; }
.cms-tile-n {
  position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 4px;
  font: 700 10.5px/1 var(--sans); color: #FBF6EF; padding: 5px 8px; border-radius: 999px;
  background: rgba(35, 21, 13, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cms-tile-n i { font-size: 12px; }
.cms-tile-t {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  font: 400 15px/1.35 var(--serif); color: var(--text); padding: 10px 12px 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* the venue line — where the plate lives; quiet, one line, opens the same sheet */
.cms-tile-v {
  display: flex; align-items: center; gap: 4px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 11px/1.3 var(--sans); color: var(--text-3, #A89A85);
  padding: 3px 12px 0; -webkit-tap-highlight-color: transparent;
}
.cms-tile-v i { flex: none; font-size: 12px; }
.cms-tile-v span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-tile-meta { display: flex; align-items: center; gap: 6px; padding: 7px 12px 11px; }
.cms-tile-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer; }
.cms-tile-av { flex: none; width: 20px; height: 20px; border-radius: 999px; overflow: hidden; display: inline-flex; }
.cms-tile-name { font: 600 11.5px/1 var(--sans); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ── tile → the full editorial card, in a bottom sheet (all actions live) ── */
.cm-postsheet { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; }
.cm-postsheet-bd { position: absolute; inset: 0; background: rgba(35, 21, 13, 0.44); animation: cmsIn 0.2s ease both; }
.cm-postsheet-card {
  position: relative; width: min(600px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--bg-3, #FFFBF2); border-radius: 22px 22px 0 0; padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
  animation: cmSheetUp 0.32s var(--ease-out, ease) both;
}
@keyframes cmSheetUp { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
.cm-postsheet-x {
  position: sticky; top: 0; margin-left: auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2); font-size: 20px; cursor: pointer; z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .cms-lane-chip { transition: none; }
  .cms-tile, .cm-postsheet-bd, .cm-postsheet-card { animation: none; }
}

/* ── feed rhythm — the FULL-BLEED stream (v977) ────────────────────────────────
   Founder, 2026-08-02: "the posts have different dimensions… I need it very
   consistent… rather than these curved rectangles, let's have it very similar to
   Instagram." So the boxed poster is gone. There is no card any more: no surface,
   no border, no 24px radius, no triple shadow, no hover lift. Each post is a
   header, a full-width plate, an action row and its words — separated by a
   hairline, the way a feed reads on a phone.

   The consistency comes from ONE rule enforced three ways below: every post,
   whatever it is made of, presents a 4:5 plate at the full width of the screen.
     · meal post   → its photo carousel      (.cm-pc-track)
     · order/photo → the dish gallery        (.cms-gal-slide)
     · no photo    → the venue's own plate   (.cms-mast)
   Nothing renders at 4:3, nothing renders as a 112px band, and nothing renders
   with no plate at all. Scroll rhythm is the product.

   .cm-sec pads the page 20px; the feed escapes it so the plates touch both edges. */
/* ── the seam between posts ────────────────────────────────────────────────────
   Three attempts, and the third is the one that's right:

   v979  a single 60%-opacity hairline on one continuous cream column. At arm's
         length on a phone that hairline is simply not there — ten posts read as
         one endless scroll with no beat.
   v993  a 10px band of --bg-2 (#F1E6D4) between sheets. Legible, but the founder's
         verdict was blunt: "this brown divider line looks ugly." It was — a
         saturated tan stripe against white is pigment doing a job that wants
         DEPTH, and at the top of the feed it read as a stray band under the lane
         toggle rather than a divider between anything.
   v1016 (this) separation by LIGHT, not colour. The ground drops to --surface-2,
         a warm near-white barely off the card, and each post lifts off it on a
         soft two-stop shadow. The eye still gets an unmistakable "new post starts
         here" — it reads it as a physical edge instead of a drawn line, which is
         what premium actually looks like. Nothing brown, nothing striped.

   .cm-sec pads the page 20px; the feed escapes it so the plates touch both edges. */
.cms-feed {
  display: flex; flex-direction: column; gap: 12px;
  margin-inline: -20px;
  background: var(--surface-2, #FBF6EC);
  /* No top/bottom padding: that band had nothing above the first card to divide it
     FROM, so it showed as a loose stripe under the lane toggle (the founder's
     screenshot). The gap between siblings is the whole mechanism. */
  padding: 0;
  /* NOT box-shadow-spread + clip-path to bleed the ground wider: a clip-path on the
     feed clips every descendant — including the reaction picker that pops above the
     action row — and makes the feed the containing block for any position:fixed
     child. The -20px inline margin already reaches the page edges. */
}
.cms-card {
  position: relative;
  background: var(--surface, #FFFDF8);
  border: 0;
  border-radius: 0;
  padding-bottom: 12px;
  /* the seam: a tight contact shadow so the edge is crisp, over a wider soft one so
     the sheet reads as lifted rather than outlined. No inset hairlines — a drawn
     line on top of a shadow is belt-and-braces, and it muddies both. */
  box-shadow: 0 1px 2px rgba(43, 28, 19, 0.05),
              0 8px 20px -12px rgba(43, 28, 19, 0.16);
  animation: cmsIn 0.3s var(--ease-out, ease) both;
}
@keyframes cmsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── card header: Taste Buddy · name + soft verb · time · match ring ── */
/* (2026-08-04) Founder: "highlight the name at the top… I need to see directly the
   name, and that's it." The header is now two quiet elements — the NAME, carrying
   the bar, and the time in small grey under it. The verb ("shared a photo at") and
   the venue line are gone from here: the venue already lives on the plate, and
   rendering it twice per card was half of what read as cheap. .cms-verb and
   .cms-venue are deleted, not orphaned. */
.cms-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.cms-id { flex: 1; min-width: 0; }
.cms-name {
  display: block; font: 700 15.5px/1.25 var(--sans); letter-spacing: -0.015em;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cms-sub {
  display: block; font: 600 11px/1.3 var(--sans); color: var(--text-3, #9A8F78);
  margin-top: 2px; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── the venue masthead — the photo-less post's PLATE ──
   Was a 112px band inset 12px with an 18px radius: it made a photo-less post less
   than half the height of a photo post, which is exactly the inconsistency the
   founder called out. It is now the same full-bleed 4:5 plate every other post
   gets, so a "shared their order" card and a meal post are the same object.

   Real venue photo (Places-backed) under a warm espresso scrim, venue name in
   DM Serif cream, area · cuisine in micro-caps. The whole plate links to the
   venue. .no-img = venue has NO real photo → terracotta/ochre gradient + quiet
   fork glyph. Honest either way — never a broken img, never a faked photo. */
.cms-mast {
  position: relative; display: block; aspect-ratio: 4 / 5;
  margin: 0; border-radius: 0; overflow: hidden;
  text-decoration: none; isolation: isolate;
  background: linear-gradient(var(--mast-ang, 140deg), var(--accent-deep, #A8431F) 0%, var(--accent) 52%, var(--ochre, #C98A3B) 125%);
  -webkit-tap-highlight-color: transparent;
}
/* the photo-less plate's monogram — the venue's initial, letterpressed into the
   wash. Big enough to be composition, faint enough that the name still leads. */
.cms-mast-mono {
  position: absolute; z-index: 0; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  font: 400 210px/1 var(--serif); letter-spacing: -0.03em;
  color: rgba(255, 247, 238, 0.17);
  text-shadow: 0 2px 30px rgba(35, 21, 13, 0.18);
  pointer-events: none; user-select: none;
}
a.cms-mast { cursor: pointer; }
.cms-mast-ph {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.001);
  transition: transform 0.5s var(--ease-out, ease);
}
@media (hover: hover) and (pointer: fine) {
  a.cms-mast:hover .cms-mast-ph { transform: scale(1.05); }
  a.cms-mast:hover .cms-mast-go { background: var(--accent); border-color: transparent; transform: translate(1px, -1px); }
}
.cms-mast-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(182deg, rgba(35, 21, 13, 0.14) 34%, rgba(35, 21, 13, 0.74) 100%);
}
.cms-mast.no-img .cms-mast-scrim {
  background:
    radial-gradient(130% 170% at 90% -35%, rgba(255, 247, 238, 0.20), transparent 55%),
    linear-gradient(182deg, transparent 40%, rgba(35, 21, 13, 0.30) 100%);
}
.cms-mast-glyph {
  position: absolute; right: -14px; bottom: -26px; z-index: 0;
  font-size: 168px; line-height: 1; color: rgba(255, 247, 238, 0.11);
  transform: rotate(-10deg);
}
.cms-mast-tx {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
  height: 100%; padding: 16px 54px 18px 16px;
}
.cms-mast-venue {
  font: 400 27px/1.12 var(--serif); letter-spacing: -0.01em; color: var(--on-accent, #FFF7EE);
  text-shadow: 0 1px 12px rgba(35, 21, 13, 0.4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cms-mast-sub {
  font: 700 10px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--on-accent, #FFF7EE) 92%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cms-mast-go {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center; font-size: 15px;
  color: var(--on-accent, #FFF7EE);
  background: rgba(35, 21, 13, 0.32);
  border: 1px solid rgba(255, 247, 238, 0.24);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background 0.2s var(--ease-out, ease), transform 0.2s var(--ease-out, ease), border-color 0.2s var(--ease-out, ease);
}

/* ── photo carousel — native scroll-snap, one photo per swipe ── */
.cms-gal { position: relative; background: var(--tint, color-mix(in srgb, var(--accent) 6%, var(--surface))); }
.cms-gal-track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain;
}
.cms-gal-track::-webkit-scrollbar { display: none; height: 0; }
/* 4:5, not 4:3 — the one plate aspect (see .cms-feed). A 4:3 gallery next to a
   4:5 meal post is a ~25% height jump between two adjacent posts. */
.cms-gal-slide {
  position: relative; flex: 0 0 100%; margin: 0; aspect-ratio: 4 / 5;
  background-size: cover; background-position: center;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.cms-gal-slide::after {   /* soft foot scrim so the dish signature always reads */
  content: ""; position: absolute; inset: auto 0 0 0; height: 36%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(24, 14, 8, 0.42));
}
/* Venue name ON the photo (founder 2026-07-16, v2 "not a chip — transparent, elegant";
   refs: Mobbin — TIDE's type-straight-on-photo, Locals' soft-scrim place name). No
   container at all: a whisper of espresso gradient baked into the top of the frame
   (photos keep their color; the type stays legible on pale shots), and the venue name
   set in the brand SERIF cream — the same voice the venue mastheads speak — with a
   tiny ember pin. Tappable through to the venue. Shared by the feed carousel
   (.cms-gal) and the friends-lane post carousel (.cm-pc). */
.cms-gal::before, .cm-pc::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 88px; z-index: 1;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(26, 15, 9, 0.52) 0%, rgba(26, 15, 9, 0.22) 55%, rgba(26, 15, 9, 0) 100%);
}
/* (2026-08-04) Two lines now — this chip is the venue's ONLY appearance on a photo
   card (the header carries just the diner's name), so it also says area · cuisine,
   in the same micro-caps voice the masthead plate uses. */
.cm-photo-venue {
  position: absolute; left: 14px; top: 13px; right: 54px; z-index: 2;
  display: flex; align-items: flex-start; gap: 7px;
  background: none; border: none; padding: 0; text-decoration: none;
}
.cm-photo-venue .ph-fill {
  color: #F2AC85; font-size: 13px; flex: none; margin-top: 4px;
  filter: drop-shadow(0 1px 2px rgba(22, 12, 6, 0.5));
}
.cm-photo-venue-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cm-photo-venue-n {
  font: 400 18px/1.2 var(--serif); letter-spacing: 0.005em; color: #FDF9F2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(22, 12, 6, 0.45), 0 2px 14px rgba(22, 12, 6, 0.35);
}
.cm-photo-venue-s {
  font: 700 9.5px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(253, 249, 242, 0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(22, 12, 6, 0.5);
}
a.cm-photo-venue:active { opacity: 0.8; }

/* .cms-gal-cap — the shared dish signature (see .cm-pc-tag) */
/* Dots ON the plate, not under it. Under-the-photo dots (the old Lemon8 read) added
   ~18px to multi-photo posts only — a height that changed with the photo COUNT, on
   top of a plate that was supposed to be fixed. Overlaid on the foot scrim they cost
   nothing and match .cm-pc-dots, so the two carousels finally speak the same way. */
.cms-gal-dots {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: center; gap: 5px; padding: 0 0 11px;
  pointer-events: none;
}
/* content-box + background-clip: a 5px dot inside a 21px tap target, so routing the
   tap through NoodlSnap still works now that the dots live on the plate. */
.cms-gal-dot {
  box-sizing: content-box; width: 5px; height: 5px; padding: 8px 2px;
  border-radius: 999px; cursor: pointer; pointer-events: auto;
  background: rgba(255, 247, 238, 0.55); background-clip: content-box;
  transition: width 0.22s var(--ease-out, ease), background 0.22s var(--ease-out, ease);
}
.cms-gal-dot.on { background: #FFF7EE; background-clip: content-box; width: 16px; border-radius: 3px; }

/* (2026-08-03) The dish receipt lived here — .cms-dishes / .cms-dish / .cms-tag /
   .cms-stars / .cms-hid / .cms-more, ~50 lines. Founder: "remove the order at the
   bottom below each post. No need. Just have the pictures and the reactions."
   Deleted rather than left orphaned: nothing emits these classes any more, and a
   dead ruleset is the thing the next redesign trips over. The dish still speaks on
   a photo card through .cms-gal-cap, stamped on the plate itself. */

/* ── photo-less single post: the dish as a pull-quote ── */
.cms-quote { position: relative; margin: 2px 16px 0; padding: 2px 0 2px 28px; font: 400 18px/1.4 var(--serif); color: var(--text); }
.cms-quote-q { position: absolute; left: 0; top: -3px; font: 400 36px/1 var(--serif); color: color-mix(in srgb, var(--accent) 38%, transparent); }
.cms-quote-r { display: inline-flex; align-items: center; gap: 3px; margin-left: 9px; font: 500 15px/1 var(--serif); color: var(--accent-deep, #A8431F); vertical-align: 1px; }
.cms-quote-r i { font-size: 10.5px; color: var(--ochre, #C98A3B); }

/* ── action bar: reactions left · want-to-try + menu right (44px targets) ──
   Instagram puts the actions directly under the media, above the caption — the plate
   ends and the row you can act on begins. That's where this sits now, and the
   hairline above it is gone: the plate's own edge draws the line. */
.cms-acts { display: flex; align-items: center; gap: 4px; margin: 0 16px; padding: 8px 0 4px; border-top: 0;
  /* never clip a pill off the right edge — if a combo can't fit, it scrolls */
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cms-acts::-webkit-scrollbar { display: none; }
.cms-acts-sp { flex: 1 0 auto; min-width: 4px; }
/* ── REACTIONS (rx-) — the emoji palette that replaced likes + comments
   (2026-07-26). A shared component: Community feed cards, photo posts, the
   discovery-grid post sheet AND the passport profile post sheet all render the
   same bar, so it lives here once. Chips = existing reactions (tap = set /
   switch / remove yours); the smiley+ opens the full picker. ── */
.rx-bar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
/* Quieter than v915's outlined pills (founder 2026-08-03: "feels cheap"). Four
   hard-bordered chips plus a hard-bordered Menu button gave five competing outlines
   under every photo. The chips are a soft tinted group now — no border at all until
   one is YOURS — so the row reads as a tally, not as five buttons. */
.rx-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2, var(--surface)));
  min-height: 30px; padding: 0 10px 0 7px; border-radius: 999px;
  font: 700 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s var(--ease-out, ease), background 0.18s var(--ease-out, ease), transform 0.18s var(--ease-out, ease);
}
.rx-chip .rx-e { font-size: 16px; line-height: 1; }
.rx-chip:active { transform: scale(0.94); }
.rx-chip.on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent-deep, var(--accent));
}
.rx-chip.pop .rx-e { animation: rxPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes rxPop { 0% { transform: scale(1); } 40% { transform: scale(1.4) rotate(-8deg); } 65% { transform: scale(0.9); } 100% { transform: scale(1); } }
.rx-add {
  display: inline-flex; align-items: center; border: 0; background: transparent;
  min-height: 32px; min-width: 40px; padding: 0 6px; border-radius: 999px;
  color: var(--text-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color 0.18s var(--ease-out, ease), transform 0.18s var(--ease-out, ease);
}
.rx-add i { font-size: 21px; line-height: 1; }
.rx-add .rx-add-plus { font-size: 11px; margin: -10px 0 0 -3px; }
.rx-add:hover, .rx-add[aria-expanded="true"] { color: var(--accent); }
.rx-add:active { transform: scale(0.94); }
.rx-picker {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
  display: flex; gap: 2px; padding: 6px 8px; border-radius: 999px;
  background: var(--surface, #fff); border: 1px solid var(--line);
  box-shadow: 0 10px 30px -12px rgba(43, 28, 19, 0.35);
  animation: rxPickerIn 0.18s var(--ease-out, ease) both;
}
@keyframes rxPickerIn { from { opacity: 0; transform: translateY(5px) scale(0.96); } to { opacity: 1; transform: none; } }
.rx-pick {
  border: 0; background: transparent; font-size: 21px; line-height: 1;
  padding: 6px; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s var(--ease-out, ease), background 0.15s var(--ease-out, ease);
}
.rx-pick:hover { transform: scale(1.25); }
.rx-pick.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* the action row clips horizontal overflow by design — but an OPEN picker must
   escape it (rx-open is toggled by the picker handler while a picker exists) */
.cms-acts.rx-open, .cm-post-acts.rx-open { overflow: visible; }
/* compact tile tally (display-only — reacting happens on the opened post) */
.rx-tile { margin-left: auto; font: 700 12px/1 var(--sans); color: var(--text-2); white-space: nowrap; }

/* ── "You and 4 others reacted" + the who-reacted sheet (reactors.js) ──────────
   Founder 2026-08-02: "when I click on reactions, I can see who reacted to my post.
   Very similar to Instagram." A reaction CHIP is your own reaction — tapping it
   sets/switches/removes — so it can never double as "show me the list". The list
   gets Instagram's "Liked by …" position instead: its own line under the action
   row, tappable, sized like a caption so it never competes with the plate. */
.rxw-sum-row:empty { display: none; }
.rxw-sum {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 16px; padding: 4px 0 2px;
  background: none; border: 0; cursor: pointer;
  font: 600 13px/1.3 var(--sans); color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s var(--ease-out, ease);
}
.rxw-sum:hover { color: var(--text); }
.rxw-sum:active { transform: scale(0.98); }
/* the stacked faces — overlapped discs, the way a like-row reads */
.rxw-sum-e {
  width: 21px; height: 21px; border-radius: 999px; flex: none;
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  background: var(--surface, #fff);
  box-shadow: 0 0 0 1.5px var(--bg, #FAF3E7);
}
.rxw-sum-e + .rxw-sum-e { margin-left: -8px; }
.rxw-sum-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the sheet */
.rxw { position: fixed; inset: 0; z-index: 1320; display: flex; align-items: flex-end; justify-content: center; }
.rxw-bd { position: absolute; inset: 0; background: rgba(20, 14, 8, 0.5); }
.rxw-sheet {
  position: relative; width: min(520px, 100%); max-height: 78dvh;
  display: flex; flex-direction: column;
  background: var(--surface, #FFF7EE); border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
  padding-bottom: env(safe-area-inset-bottom);
  animation: rxwIn 0.22s var(--ease-out, ease) both;
}
@keyframes rxwIn { from { transform: translateY(14px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rxw-sheet { animation: none; } }
.rxw-grab { flex: none; width: 38px; height: 4px; border-radius: 999px; margin: 9px auto 2px; background: color-mix(in srgb, var(--line) 90%, transparent); }
.rxw-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.rxw-h { flex: 1; font: 400 19px/1.2 var(--serif); color: var(--text); }
.rxw-x { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 0; background: transparent; color: var(--text-2); font-size: 24px; line-height: 1; cursor: pointer; }
.rxw-x:hover { color: var(--text); }
.rxw-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.rxw-note { margin: 0; padding: 26px 16px; text-align: center; font: 500 13.5px/1.5 var(--sans); color: var(--text-2); }
/* per-emoji filter — only rendered when more than one emoji actually landed */
.rxw-tabs { display: flex; gap: 6px; padding: 10px 14px 4px; overflow-x: auto; scrollbar-width: none; }
.rxw-tabs::-webkit-scrollbar { display: none; }
.rxw-tab {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: transparent; color: var(--text-2);
  font: 700 12.5px/1 var(--sans); font-variant-numeric: tabular-nums;
}
.rxw-tab-e { font-size: 15px; line-height: 1; }
.rxw-tab.on { border-color: transparent; background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent-deep, var(--accent)); }
.rxw-list { padding: 4px 0 12px; }
.rxw-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 16px; border: 0; background: none; cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.rxw-row[hidden] { display: none; }
.rxw-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.rxw-av { flex: none; width: 42px; height: 42px; border-radius: 999px; overflow: hidden; display: inline-flex; }
.rxw-av svg, .rxw-av img { width: 100%; height: 100%; display: block; }
.rxw-av-mono { background: var(--accent, #C2502F); color: var(--on-accent, #FFF7EE); display: grid; place-items: center; font: 400 19px/1 var(--serif); }
.rxw-id { flex: 1; min-width: 0; }
.rxw-name { display: block; font: 700 14px/1.3 var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rxw-you { font: 700 9.5px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep, #A8431F); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 3px 7px; vertical-align: 1px; }
.rxw-handle { display: block; margin-top: 2px; font: 500 12px/1.3 var(--sans); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rxw-when { flex: none; font: 500 11.5px/1 var(--sans); color: var(--text-3, #9A8F78); font-variant-numeric: tabular-nums; }
.rxw-kind { flex: none; font-size: 21px; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  .rx-chip.pop .rx-e { animation: none; }
  .rx-picker { animation: none; }
  .rx-pick:hover { transform: none; }
}
/* soft pills — no label ever wraps at 375px */
/* Menu / Want to try are SECONDARY — the photo and the reactions are the post. They
   were filled, bordered pills competing with the reaction chips for the same row;
   they're quiet ghosts now (Instagram's bookmark, not a call to action). */
.cms-acts .cm-btn { min-height: 40px; padding: 0 8px; font-size: 12px; white-space: nowrap; flex: none; }
.cms-acts .cm-btn i { font-size: 15px; }
.cms-acts .cm-btn-soft {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.cms-acts .cm-btn-soft:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.cms-acts .cm-watch.cm-done { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-deep, #A8431F); border-color: transparent; }
.cms-menu { flex: none; }
/* ═══ v920 — premium meal-post card (.cmp): the photo IS the card. ═══
   The old boxed poster (padded shell, inset rounded photo, place row) reads cheap
   next to the stream's editorial cards; this rebuilds it on the SAME .cms-card
   anatomy — the carousel runs edge to edge inside the shell, dish tags become
   quiet glass, the caption speaks serif. Scoped .cmp so /u/{handle}'s viewer and
   the feed share one look. */
.cmp .cm-pc { margin: 0; border-radius: 0; background: #1A0F09; }
.cmp .cms-top { padding-bottom: 11px; }
/* glass furniture on the frame — hairline + blur. The dish label is NOT here:
   it stopped being furniture in v1017 (see the dish signature, .cm-pc-tag). */
.cm-pc-count {
  background: rgba(26, 15, 9, 0.5); border: 1px solid rgba(255, 247, 238, 0.14);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.cm-pc-dot { width: 5px; height: 5px; background: rgba(255, 247, 238, 0.55); }
.cm-pc-dot.on { width: 16px; border-radius: 3px; background: #FFF7EE; transform: none; }
/* the caption — editorial serif under the actions, never a cramped footnote */
.cmp-cap { margin: 0; padding: 2px 16px 0; font: 400 15.5px/1.55 var(--serif); color: var(--text); }
.cmp .cms-acts { border-top: 0; }
.cmp .cm-pc-del { border-color: transparent; background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* ── page-wide polish (appended overrides — same selectors, later wins) ── */
.cm-sec { padding: 20px 20px 6px; }
.cm-head { margin-bottom: 14px; }
.cm-btn { transition: background 0.18s var(--ease-out, ease), border-color 0.18s var(--ease-out, ease), color 0.18s var(--ease-out, ease), transform 0.18s var(--ease-out, ease); }
.cm-btn:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cm-btn:active { transform: scale(0.96); }
.cm-btn-primary:hover { border-color: transparent; filter: brightness(1.06); }
.cm-twin { transition: transform 0.2s var(--ease-out, ease), box-shadow 0.2s var(--ease-out, ease); }
.cm-twin:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(43, 28, 19, 0.28); }
.cm-friend, .cm-lbrow { transition: background 0.18s var(--ease-out, ease), border-color 0.18s var(--ease-out, ease); }
.cm-friend:hover { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 20%, var(--line)); }
.cmty a:focus-visible, .cmty button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }

/* ── desktop refinement — Instagram-web's single centred column ──
   Full-bleed is right on a phone and wrong on a 27" display, where a 4:5 plate at
   viewport width would be absurd. So the stream becomes a fixed 470px column,
   centred, with the plate still 4:5 (NEVER 16:10 here — the aspect is the whole
   point of the redesign) and a hairline down each side to seat it on the page. */
@media (min-width: 768px) {
  /* the ground stays full-bleed; only the COLUMN of sheets narrows, so a wide window
     reads as a feed on a warm page rather than a 470px strip floating in cream */
  .cms-feed { padding-inline: calc((100% - 470px) / 2); gap: 12px; }
  .cms-card { border-radius: 12px; overflow: hidden;
              box-shadow: 0 1px 2px rgba(43, 28, 19, 0.05),
                          0 10px 26px -14px rgba(43, 28, 19, 0.20); }
  .cms-top { padding: 15px 18px 12px; }
  .cms-quote { margin-left: 18px; margin-right: 18px; }
  .cms-acts { margin-left: 18px; margin-right: 18px; }
  .cmp-cap { padding-left: 18px; padding-right: 18px; }
}

/* ── reduced motion: keep every state change, drop the theatrics ── */
@media (prefers-reduced-motion: reduce) {
  .cms-card, .cms-card.open .cms-hid { animation: none; }
  .cms-card, .cms-card:hover { transition: none; transform: none; }
  .cms-gal-track { scroll-behavior: auto; }
  .cms-mast-ph, a.cms-mast:hover .cms-mast-ph { transition: none; transform: none; }
  .cms-mast-go, .cms-gal-dot, .rx-chip, .rx-add,
  .cm-btn, .cm-twin, .cm-friend, .cm-lbrow { transition: none; }
  .cm-twin:hover, .cm-btn:active, .rx-chip:active, .rx-add:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VPOST — the post-rating "Your post" composer (verdict.js), styled from CSS
   only on its stable hooks (.vpost, [data-aud], [data-add], [data-share],
   [data-private], [data-dismiss]) — the widget's markup/behavior is verified
   and HANDS OFF. Same terracotta/cream grammar as the stream it feeds.
   ═══════════════════════════════════════════════════════════════════════════ */
.vpost {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line, #E8E0D5));
  border-radius: 18px; padding: 16px 16px 12px;
}
.vpost .vmulti-q { font-family: var(--serif); font-size: 20px; font-weight: 400; }
.vpost .vpost-dish [data-add] {
  border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line, #E8E0D5));
  color: color-mix(in srgb, var(--accent) 84%, #2A1109);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.vpost .vpost-dish [data-add]:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 14%, var(--surface, #fff)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line, #E8E0D5)); }
.vpost .vpost-auds .verdict-chip { border-radius: 999px; }
.vpost [data-share] {
  border-radius: 999px; font-weight: 700; letter-spacing: 0.01em;
  background: var(--accent); border-color: var(--accent); color: var(--on-accent, #FFF7EE);
  box-shadow: 0 8px 18px -8px rgba(194, 80, 47, 0.55);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.vpost [data-share]:hover:not(:disabled) { border-color: var(--accent); filter: brightness(1.06); transform: translateY(-1px); }
.vpost [data-share]:active:not(:disabled) { transform: scale(0.97); }
.vpost [data-private] { border-radius: 999px; }
.vpost [data-dismiss] { transition: color 0.18s ease; border-radius: 8px; }
.vpost [data-dismiss]:hover { color: var(--accent, #C2502F); }
.vpost [data-aud]:focus-visible, .vpost [data-add]:focus-visible, .vpost [data-share]:focus-visible,
.vpost [data-private]:focus-visible, .vpost [data-dismiss]:focus-visible { outline: 2px solid var(--accent, #C2502F); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .vpost [data-share], .vpost .vpost-dish [data-add], .vpost [data-dismiss] { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R2-GIFT — the Discover result gift indicator (2026-07-09). Compact sibling of
   .rcard-offer: same personal-eligibility contract (injected post-paint from the
   diner's own /api/perks payload — already tier/taste/audience-gated server-side)
   and it NEVER affects which venue the engine picked or the shortlist order.
   Hero pick → small "Your gift" pill (gift glyph, terracotta on cream); alt cards
   and shortlist rows are tighter → a quiet icon-dot with an aria-label. Scoped
   .rec2 so nothing bleeds outside the Discover result. Never a % or "deal".
   ═══════════════════════════════════════════════════════════════════════════ */
.rec2 .r2-gift {
  position: absolute; top: 28px; right: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--sans); letter-spacing: 0.02em; white-space: nowrap;
  color: var(--accent-deep, #9A3C20);
  background: rgba(255, 250, 242, 0.94);
  padding: 6px 11px 6px 9px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(42, 32, 24, 0.28),
              inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none;   /* decoration — never intercepts the hero tap */
}
.rec2 .r2-gift i { font-size: 13px; color: var(--accent); }
/* when the hero also carries the location badge (top-right), stack below it */
.rec2 .r2-badge ~ .r2-gift { top: 68px; }
.rec2 .r2-gift-dot {
  position: absolute; z-index: 2; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--accent); font-size: 11px;
  background: rgba(255, 250, 242, 0.94);
  box-shadow: 0 2px 8px rgba(42, 32, 24, 0.25),
              inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
  pointer-events: none;
}
.rec2 .r2-alt-imgwrap .r2-gift-dot { top: 11px; right: 11px; }   /* imgwrap is already relative */
.rec2 .r2-mrow-img:has(.r2-gift-dot) { position: relative; }     /* only gifted rows get a context */

/* ════════════════════════════════════════════════════════════════════════════
   (2026-07-26) Post comments retired — reactions (rx-, defined with the .cms-
   action bar above) replaced likes AND comments. Only the shared fallback
   toast below survives from the old thread UI (community.js _toast uses it).
   ════════════════════════════════════════════════════════════════════════════ */

/* scoped fallback toast (only used if window.NoodlToast is absent) */
.cmc-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px);
  z-index: 9999; max-width: 82vw;
  background: var(--fg1, #2A2018); color: #fff;
  font: 600 13px/1.4 var(--sans); padding: 10px 16px; border-radius: 12px;
  box-shadow: 0 6px 22px rgba(42, 32, 24, 0.3);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s var(--ease-out, ease), transform 0.22s var(--ease-out, ease);
}
.cmc-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .cmc-toast { transition: opacity 0.22s ease; }
}
.rec2 .r2-mrow-img .r2-gift-dot { top: 4px; left: 4px; width: 18px; height: 18px; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   "Gifts for you" filter chip (Browse / restaurants.js syncGiftChip, 2026-07-09).
   Personal-eligibility filter — narrows the list to venues holding one of the
   diner's OWN unlocked gifts (reuses the same _offerRids the .rcard-offer badge is
   built from). Rides the existing .rfpill grammar so it composes with the cuisine/
   area/price pills; only the gift glyph is themed here. Injected into .rfbar only
   when the diner has >=1 eligible offer (never an empty filter). Never a % / "deal".
   ═══════════════════════════════════════════════════════════════════════════ */
.rfpill.rfgifts .rf-gift-ic { font-size: 15px; color: var(--accent, #C2502F); }
.rfpill.rfgifts.on .rf-gift-ic { color: inherit; }   /* the active pill flips to accent bg → glyph rides the text colour */
body.fal-on .rfpill.rfgifts .rf-gift-ic { color: var(--accent); }
body.fal-on .rfpill.rfgifts.on .rf-gift-ic { color: var(--on-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   NOODLER — the dish-rating chatbot (Home entry box + full-screen chat).
   Scoped under .ndlr-*; reuses the app design tokens so it themes for free.
   ══════════════════════════════════════════════════════════════════════════ */

/* — the mascot face — real art shows the WHOLE standing noodle (no circle crop);
     the circular emoji blob is only the fallback when the PNG is missing (.no-img). — */
.ndlr-face { position: relative; display: inline-grid; place-items: end center; width: 46px; height: 64px; flex: none; }
.ndlr-face img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block;
  filter: drop-shadow(0 3px 5px color-mix(in srgb, #5A3A22 20%, transparent)); }
.ndlr-face.sm { width: 26px; height: 34px; }
.ndlr-face.lg { width: 58px; height: 82px; }
/* emoji fallback (no art yet) → warm circular blob at the original square sizes */
.ndlr-face-fb { display: none; }
.ndlr-face.no-img { border-radius: 999px; overflow: hidden; place-items: center; width: 40px; height: 40px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 22%, transparent); }
.ndlr-face.no-img.sm { width: 26px; height: 26px; }
.ndlr-face.no-img.lg { width: 54px; height: 54px; }
.ndlr-face.no-img .ndlr-face-fb { display: grid; place-items: center; font-size: 22px; line-height: 1; }
.ndlr-face.no-img.sm .ndlr-face-fb { font-size: 15px; }
.ndlr-face.no-img.lg .ndlr-face-fb { font-size: 30px; }

/* — Home entry box — */
/* Terracotta entry box with the premium Noodler peeking in from the left (founder call) */
.ndlr-cta { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 14px 16px; min-height: 82px; border-radius: var(--r-lg); overflow: hidden; border: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 86%, #fff) 0%, var(--accent) 50%, var(--accent-deep, #9A3C20) 100%);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 62%, transparent);
  transition: transform .18s var(--ease-out); }
.ndlr-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18); pointer-events: none; }
.ndlr-cta:active { transform: scale(.985); }
.ndlr-cta-peek { flex: none; width: 86px; align-self: flex-start; margin: -6px 2px -44px -22px; }
.ndlr-cta-peek .ndlr-art-img { width: 100%; height: auto; display: block;
  filter: drop-shadow(2px 3px 7px rgba(70,35,15,.32)); animation: ndlr-bob 4s ease-in-out infinite; transform-origin: bottom center; }
.ndlr-cta-txt { flex: 1; min-width: 0; }
.ndlr-cta-title { display: block; font: 800 15.5px/1.25 var(--sans); color: #FFF7EE; }
.ndlr-cta-sub { display: block; font: 500 12.5px/1.4 var(--sans); color: color-mix(in srgb, #FFF7EE 80%, var(--accent)); margin-top: 3px; }
.ndlr-cta-go { flex: none; display: flex; align-items: center; gap: 6px; color: #FFF7EE; font-size: 20px; }
.ndlr-cta-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #FFF7EE;
  color: var(--accent); font: 800 12px/22px var(--sans); text-align: center; }
@keyframes ndlr-bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }

/* — full-screen chat sheet — premium warm backdrop with a soft vignette for depth — */
.ndlr-sheet { --ndlr-spring: cubic-bezier(0.34, 1.4, 0.5, 1); position: fixed; inset: 0; z-index: 1300;
  display: flex; flex-direction: column;
  background:
    radial-gradient(140% 60% at 50% 108%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 55%),
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 9%, var(--bg)) 0%, var(--bg) 62%),
    var(--bg);
  transform: translateY(100%); opacity: 0; transition: transform .34s var(--ease-out), opacity .34s var(--ease-out); }
.ndlr-sheet.ndlr-in { transform: translateY(0); opacity: 1; }
.ndlr-sheet.ndlr-out { transform: translateY(100%); opacity: 0; }
/* body = the stage the log scrolls in AND the peeking Noodler is anchored to */
.ndlr-body { position: relative; flex: 1; min-height: 0; }
/* Noodler grips the LEFT EDGE and leans in. Sits above the input, in front of the log. */
.ndlr-peek { position: absolute; left: 0; bottom: 0; z-index: 3; width: min(44vw, 178px);
  height: min(50vh, 380px); pointer-events: none;
  transform: translateX(-118%) rotate(-6deg); opacity: 0; }
.ndlr-peek .ndlr-art-img { width: 100%; height: 100%; object-fit: contain; object-position: bottom left;
  filter: drop-shadow(6px 6px 12px color-mix(in srgb, #5A3A22 26%, transparent)); }
.ndlr-peek.in { opacity: 1; transform: translateX(-40%) rotate(0deg); transition: transform .55s var(--ndlr-spring), opacity .3s ease; }
.ndlr-peek.reenter { animation: ndlr-peek-reenter .62s var(--ndlr-spring); }
@keyframes ndlr-peek-reenter {
  0% { transform: translateX(-40%) rotate(0); }
  30% { transform: translateX(-72%) rotate(-8deg); }   /* ducks out to the left */
  100% { transform: translateX(-40%) rotate(0); } }    /* springs back to peek */
/* Duolingo lesson chrome: X + a chunky segmented progress bar that fills as you rate */
.ndlr-head { flex: none; display: flex; align-items: center; gap: 14px;
  padding: max(14px, env(safe-area-inset-top)) 18px 14px; }
.ndlr-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  cursor: pointer; border: 0; background: transparent; color: var(--fg3); }
.ndlr-close:active { transform: scale(.9); }
.ndlr-prog { flex: 1; height: 15px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  overflow: hidden; }
.ndlr-prog-fill { display: block; height: 100%; width: 0%; border-radius: 999px; background: var(--accent);
  box-shadow: inset 0 4px 0 color-mix(in srgb, #fff 32%, transparent);   /* Duolingo glossy top sheen */
  transition: width .5s var(--ease-out); }

/* — transcript — scrolls inside .ndlr-body; a left gutter keeps bubbles clear of Noodler — */
/* Bottom-anchored WITHOUT justify-content:flex-end (start-edge overflow is unscrollable —
   old messages would become unreachable): a ::before margin-top:auto spacer instead. */
.ndlr-log { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 22px 18px 20px 116px; display: flex; flex-direction: column; gap: 13px; }
.ndlr-log:not(.ndlr-log--finale)::before { content: ""; margin-top: auto; }
.ndlr-row { display: flex; max-width: 100%; opacity: 0;
  transform: translateY(10px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.ndlr-row.ndlr-show { opacity: 1; transform: none; }
.ndlr-row.ndlr-u { flex-direction: row-reverse; margin-left: -92px; }   /* user bubbles reclaim the gutter */
.ndlr-msg { max-width: 84%; font: 500 15px/1.46 var(--sans); padding: 12px 15px; border-radius: 20px; letter-spacing: -.005em; }
.ndlr-n .ndlr-msg { position: relative; background: color-mix(in srgb, #fff 78%, var(--surface)); color: var(--fg1);
  border: 1px solid color-mix(in srgb, var(--fg1) 7%, transparent); border-bottom-left-radius: 7px;
  box-shadow: 0 1px 2px color-mix(in srgb, #5A3A22 8%, transparent), 0 12px 30px -14px color-mix(in srgb, #5A3A22 34%, transparent);
  backdrop-filter: blur(3px); }
/* speech-bubble tail — points toward Noodler at the left edge */
.ndlr-n .ndlr-msg::before { content: ""; position: absolute; left: -6px; bottom: 10px; width: 12px; height: 12px;
  background: color-mix(in srgb, #fff 78%, var(--surface)); border-left: 1px solid color-mix(in srgb, var(--fg1) 7%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fg1) 7%, transparent); transform: rotate(45deg); border-bottom-left-radius: 3px; }
.ndlr-u .ndlr-msg { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff) 0%, var(--accent) 100%);
  color: var(--on-accent); border-bottom-right-radius: 7px;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.ndlr-msg b { font-weight: 750; }
.ndlr-opt { color: var(--fg3); font-weight: 500; font-size: .88em; }
/* the avatar pops IN from the left as Noodler speaks; older ones recede (moved-on feel) */
.ndlr-av { flex: none; animation: ndlr-pop .5s var(--ease-out) both; }
.ndlr-row.ndlr-n:not(:last-of-type) .ndlr-av { opacity: .34; transform: scale(.78); transition: .3s var(--ease-out); }
@keyframes ndlr-pop { 0% { opacity: 0; transform: translateX(-150%) scale(.5) rotate(-18deg); }
  60% { opacity: 1; transform: translateX(6%) scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: none; } }
/* typing shimmer */
.ndlr-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.ndlr-typing i { width: 7px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 45%, var(--fg3));
  animation: ndlr-blink 1.1s ease-in-out infinite; }
.ndlr-typing i:nth-child(2) { animation-delay: .18s; } .ndlr-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes ndlr-blink { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* — input dock — */
.ndlr-input { flex: none; padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px); min-height: 8px; }
.ndlr-input:empty { padding-top: 0; padding-bottom: env(safe-area-inset-bottom); border-top: 0; }
/* Chunky "pushable" answer buttons (Duolingo): 2px border, thick 4px bottom edge that
   presses down on tap. Shared by the rating numbers + the two-choice buttons. */
.ndlr-rate { display: flex; align-items: stretch; gap: 9px; }
.ndlr-num { flex: 1; height: 54px; border-radius: 15px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg1); font: 650 19px/1 var(--sans); cursor: pointer;
  box-shadow: 0 2px 5px color-mix(in srgb, #5A3A22 6%, transparent); transition: transform .12s var(--ease-out), background .16s, color .16s, border-color .16s; }
.ndlr-num:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ndlr-num:active { transform: scale(.94); background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ndlr-skip { flex: none; padding: 0 12px; align-self: center; height: 40px; border-radius: 999px; border: 0;
  background: transparent; color: var(--fg3); font: 600 12.5px/1 var(--sans); cursor: pointer; }
.ndlr-skip:hover { color: var(--fg2); }
.ndlr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ndlr-chip { padding: 11px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg1); font: 600 13px/1 var(--sans); cursor: pointer;
  box-shadow: 0 2px 5px color-mix(in srgb, #5A3A22 5%, transparent); transition: transform .12s var(--ease-out), background .16s, color .16s, border-color .16s; }
.ndlr-chip:active { transform: scale(.95); }
.ndlr-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); color: var(--accent-deep, var(--accent)); }
.ndlr-note-in { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 13px; font: 500 14px/1.45 var(--sans); color: var(--fg1); background: var(--surface); resize: none; margin-bottom: 12px; }
.ndlr-note-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.ndlr-chip-actions { display: flex; align-items: stretch; gap: 10px; }
.ndlr-note-add { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--line); background: transparent; color: var(--fg2); font: 600 13px/1 var(--sans); cursor: pointer; transition: transform .12s var(--ease-out); }
.ndlr-note-add:active { transform: scale(.96); }
.ndlr-note-add.on { color: var(--accent); border-color: var(--accent); }
/* Primary CTA — a refined filled terracotta button (Send / Continue / Done) */
.ndlr-send, .ndlr-cont { flex: 1; height: 54px; border-radius: 15px; border: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent));
  color: var(--on-accent); font: 750 15px/1 var(--sans); letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 72%, transparent); transition: transform .12s var(--ease-out), box-shadow .12s; }
.ndlr-send:active, .ndlr-cont:active { transform: scale(.97); box-shadow: 0 5px 12px -8px color-mix(in srgb, var(--accent) 72%, transparent); }
.ndlr-two { display: flex; align-items: stretch; gap: 9px; }
.ndlr-two button { flex: 1; height: 54px; border-radius: 15px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg1); font: 650 14px/1 var(--sans); cursor: pointer;
  box-shadow: 0 2px 5px color-mix(in srgb, #5A3A22 6%, transparent); transition: transform .12s var(--ease-out), border-color .16s; }
.ndlr-two button:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ndlr-two button:active { transform: scale(.96); }
.ndlr-two .ndlr-skip { flex: none; height: auto; border: 0; box-shadow: none; }

/* ── Feedback banner (Duolingo's post-answer beat) ── */
.ndlr-fb { border-top-width: 0; }
.ndlr-fb.ndlr-fb--good { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.ndlr-fb.ndlr-fb--soft { background: color-mix(in srgb, var(--fg3) 12%, var(--surface)); }
.ndlr-fb-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ndlr-fb-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); }
.ndlr-fb--soft .ndlr-fb-ic { background: var(--fg3); }
.ndlr-fb-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ndlr-fb-txt b { font: 800 15.5px/1.2 var(--sans); color: var(--accent); }
.ndlr-fb--soft .ndlr-fb-txt b { color: var(--fg1); }
.ndlr-fb-txt span { font: 500 12.5px/1.35 var(--sans); color: var(--fg2); }
.ndlr-cont--full { width: 100%; flex: none; }

/* ── Lesson-complete celebration ── */
.ndlr-log--finale { align-items: center; justify-content: center; text-align: center; }
/* Completion = premium restraint (founder, Jul '26): no cartoon art, no lesson chrome.
   A fine dual-ring seal with a draw-on check, a quiet serif line, and a hairline
   receipt row. The peeking Noodler (celebrate pose) is the only character on screen. */
.ndlr-sheet--fin .ndlr-head { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.ndlr-fin { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 340px; margin: auto;
  opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); }
.ndlr-fin.in { opacity: 1; transform: none; }
.ndlr-seal { position: relative; width: 96px; height: 96px; margin-bottom: 14px; }
.ndlr-seal::before { content: ""; position: absolute; inset: -46px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 68%); }
.ndlr-fin.in .ndlr-seal { animation: ndlr-seal-in .65s var(--ndlr-spring, cubic-bezier(.34,1.4,.5,1)) both; }
@keyframes ndlr-seal-in { 0% { transform: scale(.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ndlr-seal-halo { fill: var(--surface); }
.ndlr-seal-ring { fill: none; stroke: color-mix(in srgb, #C99A4B 55%, var(--accent)); stroke-width: 1.4; }
.ndlr-seal-ring--in { stroke: var(--accent); stroke-width: 1.8; opacity: .9; }
.ndlr-seal-check { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 50; stroke-dashoffset: 50; }
.ndlr-fin.in .ndlr-seal-check { animation: ndlr-check-draw .55s ease-out .35s forwards; }
@keyframes ndlr-check-draw { to { stroke-dashoffset: 0; } }
.ndlr-fin-title { font: 800 28px/1.1 var(--serif); color: var(--fg1); margin: 4px 0 0; letter-spacing: .01em; }
.ndlr-fin-sub { font: 500 13.5px/1.55 var(--sans); color: var(--fg3); margin: 2px 0 10px; max-width: 30ch; }
.ndlr-fin-receipt { display: flex; align-items: stretch; justify-content: center; gap: 26px; padding: 16px 30px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(8px); animation: ndlr-fr-up .5s var(--ease-out) .5s forwards; }
@keyframes ndlr-fr-up { to { opacity: 1; transform: none; } }
.ndlr-fr-item { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 88px; }
.ndlr-fr-v { font: 600 30px/1 var(--serif); color: var(--fg1); font-variant-numeric: lining-nums; }
.ndlr-fr-v--pts { color: var(--accent); }
.ndlr-fr-l { font: 700 10px/1.2 var(--sans); color: var(--fg3); text-transform: uppercase; letter-spacing: .14em; }
.ndlr-fr-div { width: 1px; background: var(--line); }

/* (Character intro splash deleted — founder, 2026-07-24: the rating chat opens
   directly, no full-body Noodler interstitial.) */

@media (prefers-reduced-motion: reduce) {
  .ndlr-cta-face, .ndlr-av, .ndlr-typing i { animation: none !important; }
  .ndlr-sheet, .ndlr-row, .ndlr-fin { transition: none !important; }
  /* the seal + receipt land fully drawn — no draw-on/rise animation */
  .ndlr-fin.in .ndlr-seal, .ndlr-fin.in .ndlr-seal-check, .ndlr-fin-receipt { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ndlr-fin.in .ndlr-seal-check { stroke-dashoffset: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   /admin — THE APPROVAL HUB (founder, 2026-07-29)
   A work surface, not a brand surface: dense, scannable, and built so the
   BEFORE → AFTER of a venue's edit is the loudest thing on each card. Scoped
   .adm so nothing here can leak into a diner screen.
   ═══════════════════════════════════════════════════════════════════════════ */
.adm { max-width: 720px; margin: 0 auto; padding: 18px 20px 90px; }
.adm-h1 { font: 400 30px/1.1 var(--serif); margin: 4px 0 8px; }
.adm-lede { font: 500 14px/1.5 var(--sans); color: var(--text-2, #6B584A); margin: 0 0 18px; }
.adm-deny { text-align: center; padding: 60px 20px; }

.adm-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.adm-tab {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 12.5px/1 var(--sans); color: var(--text-2, #6B584A);
  background: transparent; border: 1px solid var(--line, #E8DDCF); border-radius: 999px;
  padding: 10px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .18s, color .18s, border-color .18s;
}
.adm-tab.on { background: var(--accent, #C2502F); border-color: transparent; color: #FFF7EE; }
.adm-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent, #C2502F); color: #FFF7EE;
  font: 800 10.5px/18px var(--sans); text-align: center;
}
.adm-tab.on .adm-badge { background: rgba(255,247,238,.24); }

.adm-hint { font: 500 12.5px/1.55 var(--sans); color: var(--text-2, #6B584A);
  background: color-mix(in srgb, var(--accent, #C2502F) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #C2502F) 16%, transparent);
  border-radius: 12px; padding: 11px 13px; margin: 0 0 14px; }
.adm-hint a { color: var(--accent-deep, #A03E22); font-weight: 700; }
.adm-empty, .adm-loading { font: 500 13.5px/1.6 var(--sans); color: var(--text-3, #9A8F78);
  text-align: center; padding: 34px 18px; border: 1px dashed var(--line, #E8DDCF); border-radius: 14px; }

.adm-card { border: 1px solid var(--line, #E8DDCF); border-radius: 14px; background: var(--surface, #fff);
  padding: 13px 14px; margin-bottom: 10px; transition: opacity .25s, border-color .2s; }
.adm-card.done { opacity: .62; border-color: color-mix(in srgb, var(--accent, #C2502F) 30%, var(--line, #E8DDCF)); }
.adm-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.adm-kind { font: 800 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 999px; background: var(--surface-2, #F6EFE4); color: var(--text-2, #6B584A); }
.adm-kind-price { background: color-mix(in srgb, var(--accent, #C2502F) 13%, transparent); color: var(--accent-deep, #A03E22); }
.adm-kind-new_dish { background: #E6F0E4; color: #3D6B37; }
.adm-kind-flag { background: #FBE9D6; color: #9A5B12; }
.adm-venue { font: 700 13px/1.2 var(--sans); color: var(--text, #2A2018); text-decoration: none; }
a.adm-venue:hover { color: var(--accent, #C2502F); }
.adm-when { margin-left: auto; font: 500 11px/1 var(--sans); color: var(--text-3, #9A8F78); }
.adm-dish { font: 400 18px/1.25 var(--serif); color: var(--text, #2A2018); margin: 2px 0 8px; }

/* the diff — the whole point of the card */
.adm-diffs { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
.adm-diff { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font: 600 12.5px/1.4 var(--sans); background: var(--surface-2, #F9F4EB);
  border-radius: 9px; padding: 7px 10px; }
.adm-dl { font: 700 10px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3, #9A8F78); min-width: 74px; }
.adm-from { color: var(--text-3, #9A8F78); text-decoration: line-through; }
.adm-arrow { color: var(--text-3, #9A8F78); }
.adm-to { color: var(--accent-deep, #A03E22); font-weight: 700; }
.adm-by { font: 500 11.5px/1.4 var(--sans); color: var(--text-3, #9A8F78); margin-bottom: 9px; }
.adm-note { font: 400 14px/1.5 var(--serif); color: var(--text-2, #6B584A); margin-bottom: 9px; }
.adm-note-none { font-style: italic; color: var(--text-3, #9A8F78); }

.adm-acts { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.adm-btn { font: 700 12.5px/1 var(--sans); padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line, #E8DDCF); background: var(--surface, #fff); color: var(--text, #2A2018);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s, background .18s, border-color .18s; }
.adm-btn:active { transform: scale(.96); }
.adm-yes { background: var(--accent, #C2502F); border-color: transparent; color: #FFF7EE; }
.adm-no:hover { border-color: #B4442E; color: #B4442E; }
.adm-working { font: 600 12.5px/1 var(--sans); color: var(--text-3, #9A8F78); }
.adm-done { font: 700 12.5px/1.4 var(--sans); color: var(--accent-deep, #A03E22); }
.adm-fail { font: 700 12.5px/1.4 var(--sans); color: #B4442E; }

/* photo rows carry the shot itself */
.adm-photo { display: flex; gap: 12px; align-items: flex-start; }
.adm-img { width: 104px; height: 104px; flex: none; object-fit: cover; border-radius: 11px; background: var(--surface-2, #F6EFE4); }
.adm-pbd { flex: 1; min-width: 0; }
@media (max-width: 420px) { .adm-photo { flex-direction: column; } .adm-img { width: 100%; height: 168px; } }

/* Settings → Approvals carries the same waiting count the hub shows */
.set-pend { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; flex: none;
  background: var(--accent, #C2502F); color: #FFF7EE; font: 800 11px/20px var(--sans); text-align: center; }

/* "Waking things up" — shown under the passport loader once a retry is in flight, so a
   cold-DB wake reads as a wait with a reason instead of a spinner that might be stuck. */
.passport-shell .pp-waking, .pp-waking{ margin:12px auto 0; max-width:280px; text-align:center;
  font:500 12.5px/1.45 var(--sans); color:var(--t3, #8B7B63); }
/* ═══ Packaged app (Capacitor) — the system-bar strip ═══════════════════════
   Android 15+ draws the app EDGE-TO-EDGE: the OS clock/battery paint over the
   top of the page. native.js tags <html class="noodl-native"> inside the shell
   only. The model is deliberately MINIMAL (learned 2026-08-07 via faithful
   inset simulation): the app scrolls INNER containers, so the body padding
   shifts every page's whole scrollport below the clock — and that is ALL that
   is needed. Sticky headers keep their natural top:0 — they pin to their
   scrollport, which already starts below the strip; adding env() offsets to
   them double-shifts and slides titles UNDER the nav (the founder's clipped
   "Build your palate"). body gets the page background so the reserved strip
   is cream, never white. env() is capped: a lying WebView (founder's device
   reported ~250px) can cost at most a status-bar of space, never a third of
   the screen. Web builds: class absent, all of this inert. */
html.noodl-native {
  /* The capped status-bar inset, named ONCE so the two places that reserve it can
     never drift — and so a test can override this single variable to simulate a
     notched device (a browser can't fake env()). */
  --noodl-sat-raw: min(env(safe-area-inset-top, 0px), 56px);
}
html.noodl-native body {
  padding-top: var(--noodl-sat-raw);
  /* NO padding-bottom (founder 2026-08-08: "the bottom strip you've created as
     spacing does not look nice — let's have it full screen view to the bottom").
     Padding on the SHELL letterboxes the app: #app stops short and body's own
     background shows through as a dead band above the home indicator. The inset
     is reserved by the CONTENT instead (--noodl-sab below), so pages paint
     edge-to-edge and still clear the indicator at maximum scroll. */
  background: var(--bg, #FAF5EC);
}
/* COLLAPSE THE DOUBLE GAP (founder 2026-08-07: "the white spacing above Noodl
   is too large"). Three headers (home's compact bar, twin-picks, the concierge
   sheet) pad themselves by the status-bar inset inline — correct on the web,
   where nothing else reserves it. In the shell, body ALREADY reserves it, so
   those headers added a SECOND status bar of space on top of the first.
   --noodl-sat is that inset for whoever needs to reserve it themselves; in the
   shell it is zero, because body did the reserving. The headers read the var
   instead of env() directly, so the strip is reserved exactly once in each mode.
   (An earlier attempt keyed a rule off [style*="safe-area-inset-top"] — a hook
   too fragile to verify, and it silently did nothing. A variable is testable.) */
:root { --noodl-sat: env(safe-area-inset-top, 0px); }
html.noodl-native { --noodl-sat: 0px; }
/* The bottom half of the same idea (founder, 2026-08-08: the sign-up CTA sat under
   the home indicator on EVERY screen of the flow). --noodl-sab is the bottom inset
   for whoever must reserve it themselves; in the shell it is zero, because body
   already reserved it. Same discipline as --noodl-sat: reserved exactly once. */
/* Unlike --noodl-sat, this needs NO native override: the shell deliberately does
   not pad the bottom (see above), so content reserves the same inset in both
   modes — and there is nothing to double-count. */
:root { --noodl-sab: env(safe-area-inset-bottom, 0px); }
/* THE SHELL WAS CLIPPING ITS OWN SCROLLER. body pads itself by both insets, but #app
   is height:100dvh — the FULL viewport — so inside a body whose content box is
   (100dvh - 56px - 34px) the scroller overhung its parent by 90px and body's
   overflow:hidden cut that off the bottom of the screen. Measured on a simulated
   iPhone: #app's bottom edge landed at y=900 against an 844px viewport, and the
   onboarding CTA's last 12px were sliced away under the home indicator.
   Signed-in pages hid the bug — body.has-nav gives #app 104px of bottom padding,
   far more than the clip — so it only ever showed on the nav-less sign-in flow.
   Sizing it to (100dvh - the status-bar strip) makes the scroller start under the
   status bar and end ON the bottom edge of the screen: no clipping, and no
   letterbox strip either (founder 2026-08-08: "the bottom strip you've created as
   spacing does not look nice — let's have it full screen view to the bottom").
   body's padding-top (and therefore --noodl-sat) is untouched, so none of the
   sticky-header work above has to move. */
html.noodl-native #app {
  height:     calc(100dvh - var(--noodl-sat-raw));
  min-height: calc(100dvh - var(--noodl-sat-raw));
}
/* …and min-height too, or the fix only reaches half the app. `body.fal-on #app`
   (the Passport, Discover, the taste screens) carries `min-height: 100vh` — the
   VIEWPORT — at equal specificity, so it quietly won the used height back and
   those pages kept overhanging. That is why the Passport still showed it after the
   sign-up flow was fixed, with "Share my taste passport" ending up under the dock.
   This rule sits after every page theme, so it wins. (Found by the parallel dock
   round; kept here verbatim because the trap survives the change of formula — only
   the number it should equal moved.) */
/* …and the page roots that stretch to 100dvh must follow the scroller down, or they
   overhang it by the same 90px and every screen gains phantom scroll slack. These
   three are the nav-less flow (sign-in → auth → onboarding); nav pages never reach
   their own bottom edge, so they are deliberately left alone. */
html.noodl-native .ob2,
html.noodl-native .signin-screen,
html.noodl-native .au2-page { min-height: 100%; }
/* …EXCEPT on the one screen body's padding cannot reach (founder, 2026-08-07:
   "all pages on the app are perfected in terms of spacing at the top except the
   noodler chat page"). #ccv5-surface is position:fixed; inset:0 — a fixed box is
   laid out against the VIEWPORT, so body's padding-top never moves it and it spans
   the status bar. Zeroing --noodl-sat was right for the in-flow headers and wrong
   here: it removed this surface's ONLY reservation, and the OS clock landed on the
   back arrow and the Rank pill. Re-declaring the variable ON the surface lets the
   header's existing max(14px, var(--noodl-sat)) reserve the strip exactly once.
   (Its input bar reads env(safe-area-inset-bottom) directly, which is precisely why
   the bottom edge was never wrong — the same reason the top was.) */
html.noodl-native #ccv5-surface { --noodl-sat: var(--noodl-sat-raw); }
html.noodl-native .fp-hero { padding-top: 84px; }
html.noodl-native .fp-print { top: 52px; }
html.noodl-native .fp-top { padding-top: 20px; }