/* Recipes — warm editorial grid. Anti-slop: tinted warm palette (no pure
   black/gray), Newsreader display serif (not Inter/system default), terracotta
   accent (no purple→blue gradient), flat cards (no cards-in-cards), smooth
   easing (no bounce). See DESIGN.md for the enforced token system. */

:root {
  /* LIGHT — "warm dim" (Option A). Softened from the original near-white so
     the page reads as warm paper, not a glowing screen: paper pulled a notch
     deeper, card off near-white to a warm ivory, line deepened to match. */
  --paper: #efe8da;
  --paper-2: #e7dccb;
  --card: #f9f3e7;
  --ink: #2a2017;
  --ink-soft: #6f6253;
  --ink-faint: #9a8b76;
  --line: #ddd1bd;

  /* Terracotta accent + appetizing supporting tints */
  --accent: #c2562a;
  --accent-deep: #a8451f;
  --accent-wash: #f6e2d2;
  --veg: #5f7d4f;
  --veg-wash: #e9f0e0;
  --amber: #b97e1f;
  --amber-wash: #f6ead0;

  /* Semantic tag hues (alcohol = plum, watching = blue) + ink for colored fills */
  --tag-alcohol: #7a3b8f;
  --tag-watching: #2f6fed;
  --ink-on-fill: #241a0d;
  --scrim: rgba(42, 32, 23, 0.5);

  /* Collection-tag palette — hashed by label in app.js (var(--coll-N)).
     Dark ink reads on all seven in both themes, so no dark override. */
  --coll-1: #d98a5c;
  --coll-2: #cf7d8c;
  --coll-3: #b98ac9;
  --coll-4: #6fae9e;
  --coll-5: #7aa3d4;
  --coll-6: #c98f6a;
  --coll-7: #9ab36a;

  --shadow-1: 0 1px 2px rgba(74, 52, 30, 0.06), 0 4px 14px rgba(74, 52, 30, 0.08);
  --shadow-2: 0 6px 16px rgba(74, 52, 30, 0.12), 0 18px 40px rgba(74, 52, 30, 0.16);

  --r-card: 16px;
  --r-pill: 999px;
  --r-sheet: 22px;
  --r-handle: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --sans: "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  color-scheme: light;
}

/* ============================================================
   DARK — "toasted" (Option B). Warm espresso ground, warm off-white
   ink, terracotta accent brightened for contrast. Same token names as
   the light theme, so every card / chip / modal / sibling vertical
   inherits with no per-component dark rules. Only genuinely light-only
   values (shadows, washes, the purple alcohol tag, the modal scrim) get
   an explicit dark override below.
   ============================================================ */
:root[data-theme="dark"] {
  --paper: #1c1712;
  --paper-2: #241d16;
  --card: #261f17;
  --ink: #ece2d1;
  --ink-soft: #b3a48c;
  --ink-faint: #8a7c66;
  --line: #3a3024;

  /* Honey / saffron gold accent + tints, brightened for the dark ground */
  --accent: #e0b15a;
  --accent-deep: #c9923a;
  --accent-wash: #362c16;
  --veg: #8aab6f;
  --veg-wash: #283320;
  --amber: #d8a23f;
  --amber-wash: #332813;

  /* Tag hues brightened for the dark ground */
  --tag-alcohol: #b072c9;
  --tag-watching: #5a8cf0;
  --scrim: rgba(0, 0, 0, 0.62);

  /* Warm-brown shadows vanish on dark — use deep black with a faint lift */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.50), 0 20px 44px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Dark-only component overrides — the handful of spots that hardcode a light
   value the token swap can't reach. */
:root[data-theme="dark"] .tag--alcohol {
  background: var(--tag-alcohol);
  color: var(--ink-on-fill);
  border-color: transparent;
}
:root[data-theme="dark"] .tag--watching {
  background: color-mix(in srgb, var(--tag-watching) 88%, transparent);
}

/* Honey gold is light, so white text on accent/colored fills is unreadable in
   dark mode — flip those fills to dark ink. Scoped to the filled contexts only
   (card/list tags, pressed chips, solid buttons, step numbers); modal chips use
   a wash background + accent text and are deliberately left alone. */
:root[data-theme="dark"] .chip[aria-pressed="true"],
:root[data-theme="dark"] .chip--tag[aria-pressed="true"],
:root[data-theme="dark"] .card__diet .tag,
:root[data-theme="dark"] .ecard__tags .tag,
:root[data-theme="dark"] .filter-toggle__badge,
:root[data-theme="dark"] .empty__reset,
:root[data-theme="dark"] .filter-sheet__apply,
:root[data-theme="dark"] .modal__close:hover,
:root[data-theme="dark"] .modal__steps li::before {
  color: var(--ink-on-fill);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--paper-2), transparent 60%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

/* ---------- Masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 22px clamp(18px, 4vw, 56px) 14px;
  transition: box-shadow 0.25s var(--ease), background-color 0.3s var(--ease);
}
/* Floats above the board once the page scrolls (toggled from JS). */
.masthead.is-stuck { box-shadow: var(--shadow-1); }

.masthead__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.masthead__title h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}

.masthead__count {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* ---------- Search ---------- */
.search {
  position: relative;
  flex: 1 1 320px;
  max-width: 460px;
}

.search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.search input {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  padding: 13px 16px 13px 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--shadow-1);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.search input::placeholder { color: var(--ink-faint); }
.search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}

/* ---------- Masthead tools (search + filter toggle) ---------- */
.masthead__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 320px;
  max-width: 520px;
}
/* The class display:flex outranks the UA [hidden] rule, so JS setting `hidden`
   (coming-soon verticals) won't hide the search/filter tools without this guard. */
.masthead__tools[hidden] { display: none; }
.masthead__tools .search { flex: 1 1 auto; max-width: none; }

/* Filter toggle — hidden on desktop (filters are an inline strip), shown on mobile. */
.filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.filter-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }
.filter-toggle__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.filter-toggle__badge {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border-radius: var(--r-pill);
}

/* Filter sheet — desktop is a transparent wrapper; its chrome (scrim, head,
   foot) is hidden and .filters renders as an inline chip strip. The whole
   thing converts to a slide-up bottom sheet under the mobile breakpoint. */
.filter-sheet__scrim,
.filter-sheet__head,
.filter-sheet__foot { display: none; }

/* ---------- Tab bar (one tab per vertical) ---------- */
.tabs {
  display: flex;
  gap: 2px;
  margin-top: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 2px 12px;
  margin-right: 22px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.tab:last-child { margin-right: 0; }
.tab:hover { color: var(--accent-deep); }
.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.tab__soon {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  background: var(--paper-2);
  border-radius: var(--r-pill);
  padding: 2px 6px;
}

/* ---------- Filter chips ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chip {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  text-transform: capitalize;
}
.chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.chip--group-label {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 7px 4px 7px 8px;
  border: none;
  background: none;
  cursor: default;
  align-self: center;
}
.chip--diet[aria-pressed="true"] { background: var(--veg); border-color: var(--veg); }
.chip--tag[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Group wrapper is transparent to the flex row (chips + label still wrap as
   before); it just scopes the "+N more" reveal to its own facet group. */
.filter-group { display: contents; }
.chip--more {
  font-style: italic;
  color: var(--ink-faint);
  border-style: dashed;
}
.chip--more:hover { color: var(--accent-deep); border-color: var(--accent); }

/* ---------- Board + grid ---------- */
.board {
  max-width: min(2200px, 94vw);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) clamp(18px, 4vw, 56px) 64px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 22%, 300px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
/* Restaurants (and other text-first verticals): denser, thumbnail-less cards. */
.grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 15%, 230px), 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}
/* Global cross-vertical search: stack per-vertical groups, each reusing its own
   .grid card layout for native-looking cards. */
.grid.grid--global { display: block; }
.global-group { margin: 0 0 clamp(22px, 3.4vw, 40px); }
.global-group__header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  cursor: pointer;
}
.global-group__title {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  margin: 0;
  letter-spacing: 0.01em;
}
.global-group__count {
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.global-group__go {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
}
.global-group__go:hover { color: var(--accent-deep); text-decoration: underline; }
/* The explicit display:grid outranks the UA [hidden] rule, so JS setting
   `hidden` (0 search results) won't hide the grid without this guard. */
.grid[hidden] { display: none; }

/* ---------- Card ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-2);
}
.card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Compact, thumbnail-less card (restaurants) — text-first, denser. */
.card--compact .card__body { padding: 15px 16px 16px; }
.card--compact .card__title { font-size: 1.02rem; }
.card--compact .ecard__tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.card--compact::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-wash));
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--paper-2), var(--accent-wash));
  border-bottom: 1px solid var(--line);
}
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.card:hover .card__img { transform: scale(1.05); }

/* Placeholder for image-less recipes — keeps the grid uniform */
.card__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 64px;
  color: color-mix(in srgb, var(--accent) 55%, var(--paper));
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--accent) 8%, var(--card)), transparent 72%),
    var(--paper);
}

/* Cuisine-emoji placeholder (restaurants without a photo) — a generic food
   icon by cuisine, instantly more scannable than a single letter. */
.card__placeholder--emoji {
  font-size: 60px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  -webkit-text-fill-color: initial; /* let the emoji render in full color */
}

/* Monogram placeholder for restaurants with no detectable cuisine — a colored
   initial (tinted by name hash via --mono) so unknown cards stay visually
   distinct instead of repeating one generic plate. */
.card__placeholder--mono {
  -webkit-text-fill-color: initial;
  color: color-mix(in srgb, var(--mono, var(--accent)) 78%, var(--ink));
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--mono, var(--accent)) 24%, var(--card)), transparent 72%),
    var(--paper);
}

/* Serves-alcohol marker chip — distinct from the freeform collection tags. */
.tag--alcohol {
  background: color-mix(in srgb, var(--tag-alcohol) 16%, var(--paper));
  color: color-mix(in srgb, var(--tag-alcohol) 88%, black);
  border-color: color-mix(in srgb, var(--tag-alcohol) 32%, transparent);
}

.card__diet {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}
.tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}
.tag--veg { background: color-mix(in srgb, var(--veg) 88%, transparent); color: #fff; }
.tag--collection { background: var(--tag-bg, color-mix(in srgb, var(--accent) 88%, transparent)); color: var(--tag-fg, #fff); }
.tag--status {
  background: color-mix(in srgb, var(--amber) 88%, transparent);
  color: #fff;
}
.tag--watched { background: color-mix(in srgb, var(--veg) 90%, transparent); color: #fff; }
.tag--watching { background: color-mix(in srgb, var(--tag-watching) 92%, transparent); color: #fff; }
/* For You: events matching Brian's taste profile (relevance_score > 0). */
.tag--foryou {
  background: color-mix(in srgb, var(--accent) 92%, transparent);
  color: #fff;
  text-transform: none;
}
.modal__chips .tag--foryou { background: var(--accent-wash); color: var(--accent); }

.card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
}
.card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.card__meta .dot { color: var(--ink-faint); }
.card__cuisine { text-transform: capitalize; }

/* ---------- Compact list verticals (Things to Do, Sources) ----------
   Events and sources have no meaningful imagery, so they drop the 4:3 media
   block entirely and use a denser, text-forward row: a date badge on the left
   for events, a compact body + platform badge for sources. */
.grid--list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 10px;
}
.card--event,
.card--source {
  flex-direction: row;
  align-items: stretch;
}
.card--event:hover,
.card--source:hover { transform: translateY(-2px); }

.ecard__date {
  flex: 0 0 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  background: linear-gradient(160deg, var(--accent-wash), var(--paper-2));
  border-right: 1px solid var(--line);
  text-align: center;
  line-height: 1.05;
}
.ecard__mon {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent);
}
.ecard__day {
  font-family: var(--display); font-weight: 700; font-size: 25px; color: var(--ink);
}
.ecard__dow {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-soft);
}
.ecard__date--ongoing { background: linear-gradient(160deg, var(--paper-2), var(--paper)); }
.ecard__ongoing {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: color-mix(in srgb, var(--accent) 70%, var(--ink-soft));
}
.ecard__body {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.card--event .card__title,
.card--source .card__title { font-size: 16px; }
.ecard__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecard__meta .dot { color: var(--ink-faint); }
.ecard__time {
  margin: 3px 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.ecard__venue {
  margin: 1px 0 3px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.tag--venue {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--ink);
  text-transform: none;
}
.ecard__accolade {
  font-size: 12.5px;
  font-style: italic;
  color: var(--accent);
  margin: 2px 0 4px;
  line-height: 1.3;
}
/* Restaurant card blurb (clean one-sentence description) — accent italic like
   the event accolade. No line-clamp: descriptions are short and must never
   trail off. */
.card__blurb {
  font-size: 12.5px;
  font-style: italic;
  color: var(--accent);
  margin: 6px 0 0;
  line-height: 1.35;
}
.ecard__tags { display: flex; flex-wrap: wrap; gap: 5px; }.ecard__tags .tag { position: static; text-transform: none; }
.ecard__badge { align-self: center; flex: 0 0 auto; margin: 0 14px; }
/* Source metas are short; let them wrap rather than clip beside the badge. */
.card--source .ecard__meta { white-space: normal; overflow: visible; }

/* ---------- Empty state ---------- */
.empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-soft);
}
.empty__mark {
  font-family: var(--display);
  font-size: 56px;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.empty__text { font-size: 16px; margin: 0 0 18px; }
.empty__reset {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--r-pill);
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.18s var(--ease);
}
.empty__reset:hover { background: var(--accent-deep); }

/* ---------- Coming soon (placeholder verticals) ---------- */
.coming-soon {
  text-align: center;
  padding: clamp(56px, 12vw, 120px) 20px;
  color: var(--ink-soft);
}
.coming-soon__mark {
  font-family: var(--display);
  font-size: 52px;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 52%, var(--paper));
  margin: 0 0 14px;
}
.coming-soon__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 34px);
  color: var(--ink);
  margin: 0 0 12px;
}
.coming-soon__text {
  font-size: 16px;
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto;
}

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  animation: fade 0.25s var(--ease);
}
.modal__card {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow-2);
  animation: rise 0.3s var(--ease);
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-1);
  transition: background 0.18s var(--ease);
}
.modal__close:hover { background: var(--accent); color: #fff; }
.modal__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--paper-2), var(--accent-wash));
  overflow: hidden;
}
.modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal__media .modal__ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--display); font-size: 88px;
  color: color-mix(in srgb, var(--accent) 55%, var(--paper));
}
.modal__body { padding: clamp(20px, 3vw, 34px); }
.modal__head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.1;
  margin: 0;
}
.modal__meta { color: var(--ink-soft); font-size: 14px; margin: 8px 0 0; text-transform: capitalize; }
.modal__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.modal__chips .tag { backdrop-filter: none; }
.modal__chips .tag--cuisine { background: var(--amber-wash); color: var(--amber); }
.modal__chips .tag--veg { background: var(--veg-wash); color: var(--veg); }
.modal__chips .tag--collection { background: var(--accent-wash); color: var(--accent); }

.modal__cols {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(20px, 4vw, 40px);
  margin-top: 26px;
}
.modal__cols h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent-wash);
}
.modal__ings ul { list-style: none; margin: 0; padding: 0; }
.modal__ings li {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 6px 0 6px 20px;
  position: relative;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.modal__ings li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.modal__steps ol { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.modal__steps li {
  counter-increment: step;
  position: relative;
  padding: 4px 0 18px 42px;
  font-size: 14.5px;
  line-height: 1.6;
}
.modal__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
}
.modal__notes {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--amber-wash);
  color: var(--amber);
  border-radius: 12px;
  font-size: 13.5px;
}
/* Generic modal detail block (restaurants: address / reserve). */
.modal__detail { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.modal__context { margin-top: 20px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.modal__ctxhead { margin: 0 0 8px; font-family: var(--display); font-size: 14px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.modal__context p { margin: 0 0 8px; }
.modal__context ul { margin: 0 0 8px; padding-left: 20px; }
.modal__context li { margin: 2px 0; }
.modal__sched { list-style: none; padding-left: 0; }
.modal__sched li { margin: 4px 0; font-size: 14px; }
.modal__sched .sched__date { display: inline-block; min-width: 92px; font-family: var(--display); color: var(--accent); }
.modal__sched .sched__time { color: var(--ink-soft); }
.modal__line { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.modal__line strong {
  display: inline-block;
  min-width: 84px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink-soft);
}
/* Watchlist synopsis lead paragraph. */
.modal__synopsis { margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.modal__source {
  display: inline-block;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: none;
}
/* The explicit display above outranks the UA [hidden] rule, so JS setting
   `hidden` won't hide the link without this guard (matches .modal[hidden]). */
.modal__source[hidden] { display: none; }
.modal__source:hover { text-decoration: underline; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Theme toggle + entrance polish
   ============================================================ */

/* Sun/moon toggle — sits in the masthead tools, pill-matched to the
   filter toggle. Only the active theme's glyph is shown. */
.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-soft);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease),
    background-color 0.3s var(--ease);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }
.theme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Show the moon in light mode (tap → go dark), the sun in dark mode. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Card entrance — staggered fade+rise, only on a "fresh" render (initial load
   and tab switch). The .is-fresh class is removed for search/filter renders so
   cards don't re-animate on every keystroke. */
.grid.is-fresh .card { animation: card-in 0.42s var(--ease) both; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* Stagger the first dozen; later cards land together so big grids stay snappy. */
.grid.is-fresh .card:nth-child(1)  { animation-delay: 0.00s; }
.grid.is-fresh .card:nth-child(2)  { animation-delay: 0.03s; }
.grid.is-fresh .card:nth-child(3)  { animation-delay: 0.06s; }
.grid.is-fresh .card:nth-child(4)  { animation-delay: 0.09s; }
.grid.is-fresh .card:nth-child(5)  { animation-delay: 0.12s; }
.grid.is-fresh .card:nth-child(6)  { animation-delay: 0.15s; }
.grid.is-fresh .card:nth-child(7)  { animation-delay: 0.18s; }
.grid.is-fresh .card:nth-child(8)  { animation-delay: 0.21s; }
.grid.is-fresh .card:nth-child(9)  { animation-delay: 0.24s; }
.grid.is-fresh .card:nth-child(10) { animation-delay: 0.27s; }
.grid.is-fresh .card:nth-child(11) { animation-delay: 0.30s; }
.grid.is-fresh .card:nth-child(12) { animation-delay: 0.33s; }

/* Hover: an accent hairline sweeps across the card top (image cards only —
   compact cards already carry a top accent bar). */
.card:not(.card--compact)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
  z-index: 2;
}
.card:not(.card--compact):hover::after { transform: scaleX(1); }

@media (max-width: 620px) {
  .modal__cols { grid-template-columns: 1fr; }
}

/* ---------- Mobile: filters collapse into a slide-up sheet ---------- */
@media (max-width: 720px) {
  .masthead { padding: 16px clamp(14px, 4vw, 56px) 14px; }
  .masthead__inner { gap: 14px; }
  .masthead__tools { flex-basis: 100%; max-width: none; }
  .filter-toggle { display: inline-flex; }
  .tabs { margin-top: 12px; }

  /* Filters leave the header flow and become a fixed bottom sheet. */
  .filter-sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    visibility: hidden;
  }
  .filter-sheet.is-open { visibility: visible; }

  .filter-sheet__scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.28s var(--ease);
  }
  .filter-sheet.is-open .filter-sheet__scrim { opacity: 1; }

  .filter-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    background: var(--paper);
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    box-shadow: var(--shadow-2);
    transform: translateY(100%);
    transition: transform 0.32s var(--ease);
  }
  .filter-sheet.is-open .filter-sheet__panel { transform: none; }
  .filter-sheet__panel::before {
    content: "";
    flex: none;
    width: 40px;
    height: 4px;
    border-radius: var(--r-handle);
    background: var(--line);
    margin: 10px auto 4px;
  }

  .filter-sheet__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 12px;
  }
  .filter-sheet__title {
    flex: 1;
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: 20px;
  }
  .filter-sheet__clear {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-deep);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }
  .filter-sheet__close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--paper-2);
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .filters {
    margin: 0;
    padding: 4px 20px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Each group label (Diet / Cuisine / Collections) starts its own row. */
  .filters .chip--group-label { flex-basis: 100%; padding-left: 2px; }

  .filter-sheet__foot {
    display: block;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .filter-sheet__apply {
    width: 100%;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--r-pill);
    padding: 14px;
    cursor: pointer;
    transition: background 0.18s var(--ease);
  }
  .filter-sheet__apply:hover { background: var(--accent-deep); }

  /* Denser browse grid on phones. */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card__title { font-size: 16px; }
  .card__body { padding: 12px 13px 13px; }
}

@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== BeeList brand + Ask assistant ===== */
.masthead__brand {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 3px;
}
.ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink-on-fill);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ask-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.ask-answer {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--accent-wash);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.ask-answer.is-loading { opacity: 0.75; }
.ask-answer.is-error { border-color: var(--accent-deep); }
.ask-answer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ask-answer__q { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.ask-answer__body { color: var(--ink); line-height: 1.55; white-space: pre-wrap; }
.ask-answer__close {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.ask-answer__close:hover { color: var(--ink); }
.ask-answer__cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-cite {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent-wash);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.ask-cite:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-on-fill);
}