:root {
  --bg: #faf7f2;
  --panel: #ffffff;
  --text: #26221c;
  --muted: #7a7268;
  --accent: #b5722a;
  --border: #e4dcd0;
  --badge-bg: #e8f5e9;
  --badge-text: #2f5e3c;
  --warn-bg: #fdecc8;
  --warn-text: #7a5410;
}
html[data-theme="dark"] {
  --bg: #17150f;
  --panel: #211e17;
  --text: #ece7df;
  --muted: #a49a8c;
  --accent: #d99a52;
  --border: #3a3529;
  --badge-bg: #1e3323;
  --badge-text: #9fd3ab;
  --warn-bg: #3a2f14;
  --warn-text: #e5c987;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.45;
}
main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
/* Wide screens: give the card grid, filter sidebar and flow diagram more
   room to breathe. Prose (tagline, step list) stays capped at a readable
   measure below so it doesn't stretch edge-to-edge on ultrawide monitors. */
@media (min-width: 1400px) {
  main { max-width: 1500px; }
  .list-layout > .filters { flex-basis: 280px; }
}
a { color: var(--accent); }
.muted { color: var(--muted); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 800; font-size: 1.2rem; text-decoration: none; color: var(--text); }
.brand span { color: var(--accent); }
.controls { display: flex; align-items: center; gap: 0.6rem; }
.controls select, .render-controls select, .render-controls input:not([type="checkbox"]) {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  font: inherit;
}
#theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}
.nav-link { text-decoration: none; font-weight: 600; }
/* Pending import requests: unmissable bright red */
.nav-link.nav-alert { color: #e01313; font-weight: 800; }
.nav-link.nav-alert:hover { color: #ff2a2a; }
/* Unreviewed drafts: orange */
.nav-link.nav-warn { color: #ef8a00; font-weight: 800; }
.nav-link.nav-warn:hover { color: #ffa32e; }

/* Hamburger menu: the topbar controls collapse behind ☰ on narrow screens */
#menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
}
.menu-label { display: none; }
@media (max-width: 860px) {
  #menu-toggle { display: block; }
  .topbar { flex-wrap: wrap; }
  .controls { display: none; }
  .topbar.menu-open .controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.55rem;
    padding: 0.7rem 0 0.3rem;
    border-top: 1px solid var(--border);
    margin-top: 0.6rem;
  }
  .topbar.menu-open .controls select,
  .topbar.menu-open .controls .nav-link,
  .topbar.menu-open .controls button { width: 100%; text-align: left; padding: 0.45rem 0.5rem; }
  .topbar.menu-open .lang-form select { width: 100%; }
  .topbar.menu-open .menu-label { display: inline; font-weight: 600; }
}

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
}
.card img { width: 100%; height: 140px; object-fit: cover; display: block; transition: transform 0.25s ease; }
.cards .card:hover img { transform: scale(1.06); }
.card-body { padding: 0.7rem 0.9rem; }
.card h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.card .meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--muted); font-size: 0.85rem; }
.card.draft { opacity: 0.75; border-style: dashed; }

.badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 99px;
  padding: 0.05rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge.warn { background: var(--warn-bg); color: var(--warn-text); }
.badge.allergen { background: var(--warn-bg); color: var(--warn-text); }

.recipe-head h1 { margin-bottom: 0.2rem; }
.recipe-head .tagline {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.4;
  max-width: 70ch;
}

/* Star + rating widget */
.rating-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
.rate-stars { display: inline-flex; }
.rate-star {
  background: none;
  border: 0;
  padding: 0 0.1rem;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--accent);
  cursor: pointer;
}
.rate-star.mine { text-shadow: 0 0 6px rgba(217, 154, 82, 0.7); }
.rating-summary { font-weight: 700; }
.star-toggle[aria-pressed="true"] { border-color: var(--accent); }
.card-rating { color: var(--accent); font-weight: 700; }
.stats { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; color: var(--muted); }
.stat { padding-right: 0.4rem; }
.render-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: end;
  margin: 0.8rem 0;
}
.render-controls label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--muted); gap: 0.15rem; }
.render-controls input[type="number"] { width: 5rem; }
.render-controls .veg-toggle { flex-direction: row; align-items: center; font-size: 0.9rem; color: var(--text); }
.btn {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  text-decoration: none;
  font-size: 0.9rem;
}

/* The flow: horizontal scroll on small screens, pinch-zoom stays enabled
   because the viewport meta does not restrict user scaling. Wide SVGs may
   break out of the content column up to the full viewport width, and the
   panel supports click-drag scrolling. */
.flow-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem;
  width: fit-content;
  min-width: 100%;
  max-width: calc(100vw - 2rem);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  cursor: grab;
}
.flow-scroll.dragging { cursor: grabbing; user-select: none; }
.flow { min-width: min-content; }
.flow svg { display: block; height: auto; max-width: none; }

.recipe-image { display: flex; justify-content: flex-end; margin-top: 1rem; }
.recipe-image img { max-width: min(420px, 100%); border-radius: 10px; border: 1px solid var(--border); }

form.inline { display: inline; }
textarea { width: 100%; min-height: 12rem; font: inherit; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; }
input[type="url"], input[type="text"] { width: 100%; font: inherit; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem; }
button[type="submit"] { font: inherit; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 0.5rem 1.1rem; cursor: pointer; }
.transcript { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem; overflow-x: auto; font-size: 0.8rem; }
.error-box { background: var(--warn-bg); color: var(--warn-text); border-radius: 8px; padding: 0.7rem 1rem; }

@media print {
  .topbar, .render-controls, #theme-toggle { display: none !important; }
}

/* Home-page intro banner: expanded by default, chevron collapses it to
   just the heading, ✕ removes it outright (both remembered client-side). */
.intro-banner {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 0 0 1rem;
}
.intro-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.intro-head h2 { margin: 0; font-size: 1rem; }
.intro-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.intro-toggle, .intro-x {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.intro-toggle:hover, .intro-x:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.intro-banner p { margin: 0.6rem 0 0; color: var(--text); line-height: 1.5; max-width: 68ch; }
.intro-banner.collapsed p { display: none; }

/* Recipe list: filter sidebar (desktop) / collapsible panel (mobile).
   Flexbox, not grid: a grid row's track always stretches to its tallest
   cell (align-items only positions content *within* that tall track), so
   the sticky sidebar's containing block ended up as tall as the results
   list — near the end of a long list it had to "unstick" to stay inside
   that block, sliding down to sit flush with the page bottom. A flex
   container with align-items: flex-start does not stretch children, so
   the sidebar's containing block is just its own height and it can stay
   pinned near the top for the whole scroll instead. */
.list-layout { display: flex; align-items: flex-start; gap: 1.2rem; }
.list-layout > .filters { flex: 0 0 230px; }
.list-layout > .results { flex: 1 1 auto; }
.filters-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.filters-box > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  font-weight: 700;
  user-select: none;
}
.filters-box > summary::-webkit-details-marker { display: none; }
.filters-box > summary::after { content: '▾'; color: var(--muted); }
.filters-box[open] > summary::after { content: '▴'; }
.filter-count {
  display: inline-block;
  min-width: 1.35rem;
  text-align: center;
  background: var(--accent);
  color: #fff;
  border-radius: 99px;
  font-size: 0.78rem;
  padding: 0.05rem 0.35rem;
  margin-left: 0.3rem;
}
#filter-form { display: flex; flex-direction: column; gap: 0.9rem; padding: 0 0.9rem 0.9rem; }
.filter-search { display: flex; flex-direction: column; gap: 0.45rem; }
.filter-search button[type="submit"] { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
fieldset.filter-group {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
  padding: 0.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
fieldset.filter-group legend {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 0 0.3rem;
}
.filter-group .check:hover { background: var(--bg); }
/* Slight gap between the meals (breakfast…side dish) and the rest (pies, …) */
.check:not(.type-secondary) + .check.type-secondary {
  margin-top: 0.45rem;
  position: relative;
}
.check:not(.type-secondary) + .check.type-secondary::before {
  content: '';
  position: absolute;
  top: -0.28rem;
  left: 0.35rem;
  right: 0.35rem;
  border-top: 1px solid var(--border);
}
.chip-list { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.2rem; }
.filter-details summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 0 0.3rem;
}
.filter-details summary::-webkit-details-marker { display: none; }
.filter-details summary::after { content: ' ▾'; }
.filter-details[open] summary::after { content: ' ▴'; }
.filter-reset { text-align: center; font-size: 0.85rem; }
/* Mobile: explicit "show results" button closes the filter drawer */
.filter-close { display: none; }
@media (max-width: 899.98px) {
  .filter-close {
    display: block;
    width: 100%;
    position: sticky;
    bottom: 0.5rem;
    font: inherit;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0.55rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  }
}
.results { min-width: 0; transition: opacity 0.15s; }
.results.loading { opacity: 0.55; }
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.results-tools { display: inline-flex; align-items: center; gap: 0.8rem; }
.sort-label { color: var(--muted); font-size: 0.85rem; }
.sort-label select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  font: inherit;
  font-size: 0.9rem;
  margin-left: 0.3rem;
}
@media (min-width: 900px) {
  /* the sidebar is always expanded; the summary is just a heading */
  .filters-box > summary { pointer-events: none; }
  .filters-box > summary::after { content: none; }
  /* taller than the viewport since the extra filter groups: scroll inside */
  .filters {
    position: sticky;
    top: 0.8rem;
    max-height: calc(100vh - 1.6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 899.98px) {
  .list-layout { flex-direction: column; gap: 0.8rem; }
  .list-layout > .filters { flex-basis: auto; width: 100%; }
}

/* Pill toggles (vegetarian / vegan) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  font-size: 0.9rem;
  background: var(--panel);
  user-select: none;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) {
  background: var(--badge-bg);
  color: var(--badge-text);
  border-color: var(--badge-text);
  font-weight: 600;
}

/* Allergen-avoid dropdown */
.dropdown { position: relative; }
.dropdown summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-size: 0.9rem;
  user-select: none;
  white-space: nowrap;
}
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary::after { content: ' ▾'; color: var(--muted); }
.dropdown[open] summary { border-color: var(--accent); }
.dropdown-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  max-height: 45vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  padding: 0.25rem 0.35rem;
  border-radius: 5px;
}
.check input[type="checkbox"] {
  order: -1;               /* checkbox always left of the name */
  flex: 0 0 auto;
  accent-color: var(--accent);
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.check .check-name { text-transform: capitalize; }
.dropdown-panel .check:hover { background: var(--bg); }

/* Superuser debug box */
.debug-box {
  margin-top: 1.5rem;
  border: 2px solid #e07b00;
  border-radius: 10px;
  background: var(--panel);
  font-size: 0.85rem;
}
.debug-box > summary {
  cursor: pointer;
  padding: 0.6rem 1rem;
  font-weight: 700;
  color: #e07b00;
  user-select: none;
}
.debug-box .debug-body { padding: 0 1rem 1rem; overflow-x: auto; }
.debug-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.debug-actions button {
  font: inherit;
  font-size: 0.85rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid #e07b00;
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.debug-actions button:hover { background: var(--warn-bg); }
.debug-box table { border-collapse: collapse; width: 100%; margin: 0.4rem 0 1rem; }
.debug-box th, .debug-box td { border: 1px solid var(--border); padding: 0.25rem 0.5rem; text-align: left; vertical-align: top; }
.debug-box th { background: var(--bg); }

.portion-row { display: flex; gap: 0.3rem; align-items: center; }
.btn.reset { padding: 0.25rem 0.5rem; line-height: 1; }

.toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid var(--badge-text);
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 100;
  font-size: 0.95rem;
}
.toast a { color: inherit; font-weight: 700; }

.zoom-controls {
  position: sticky;
  top: 0.3rem;
  left: 0.3rem;
  float: left;
  display: flex;
  gap: 0.25rem;
  z-index: 10;
}
.zoom-controls button {
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.zoom-controls button:hover { border-color: var(--accent); }

/* Starred page */
.starred-group { margin-bottom: 1.6rem; }
.group-title { font-size: 1.15rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }

/* Import job progress strip */
.job-stages { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.6rem 0 1rem; }
.job-stage {
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.2rem 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--panel);
}
.job-stage.done { color: var(--badge-text); background: var(--badge-bg); border-color: var(--badge-text); }
.job-live { font-size: 0.85rem; }
.job-stage.warn { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-text); }
.setlive-form { display: inline-block; margin: -0.2rem 0 0.5rem; }
.setlive-form .btn { background: var(--badge-bg); color: var(--badge-text); border-color: var(--badge-text); font-weight: 700; }

/* Superuser-only filter group: orange frame, matching the Drafts badge */
fieldset.filter-group.super-only {
  border: 1.5px solid #ef8a00;
  border-radius: 8px;
  padding: 0.5rem 0.6rem 0.6rem;
  margin-top: 0.2rem;
}
fieldset.filter-group.super-only legend {
  color: #ef8a00;
  padding: 0 0.35rem;
}

/* Superuser banner: AI budget exhausted */
.budget-banner {
  background: #e01313;
  color: #fff;
  padding: 0.5rem 1rem;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.budget-banner a { color: #fff; text-decoration: underline; }
.budget-banner .budget-detail { font-weight: 400; font-size: 0.85rem; opacity: 0.9; }

/* Similar recipes: horizontal scroll of small cards under the flow */
.similar { margin-top: 1.2rem; }
.similar h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.similar-row {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  -webkit-overflow-scrolling: touch;
}
.similar-row .card { flex: 0 0 175px; min-width: 175px; }
.similar-row .card img { height: 90px; }
.similar-row .card h2 { font-size: 0.9rem; }
.similar-row .card .meta { font-size: 0.75rem; }
@media print { .similar { display: none !important; } }

/* Header photo: right of the header text on desktop (max 30% of the screen,
   capped in height so the flow start stays visible), below it on mobile */
.recipe-head.with-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(30%, 360px);
  gap: 1.2rem;
  align-items: start;
}
.head-photo img {
  width: 100%;
  max-height: 250px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
@media (max-width: 700px) {
  .recipe-head.with-image { grid-template-columns: 1fr; }
  .head-photo { order: 2; }
  .head-photo img { max-height: 200px; }
}
@media print { .head-photo { display: none !important; } }

/* Job overview: unmistakable per-row outcome */
.tchip {
  display: inline-block;
  border-radius: 99px;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.t-running { background: #e0f0fb; color: #1c5e8f; }
.t-pending { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.t-done { background: var(--badge-bg); color: var(--badge-text); }
.t-jobfail, .t-failed { background: #fddddd; color: #a01010; }
tr.trow-jobfail td, tr.trow-failed td { background: rgba(224, 19, 19, 0.06); }
html[data-theme="dark"] .t-running { background: #143246; color: #7fb8e0; }
html[data-theme="dark"] .t-jobfail, html[data-theme="dark"] .t-failed { background: #461414; color: #e08b8b; }

/* Recipe picker */
.picker { max-width: 760px; margin: 0 auto; }
.picker h1 { margin-bottom: 0.2rem; }
.picker-group { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0.7rem 0; }
.picker-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); min-width: 4.5rem; }
.picker-allergies summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0; }
.picker-cta {
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(181, 114, 42, 0.35);
}
.picker-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.pick-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.pick-card a { text-decoration: none; color: var(--text); flex: 1; }
.pick-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.pick-body { padding: 0.6rem 0.8rem; }
.pick-body h2 { font-size: 1rem; margin: 0 0 0.3rem; }
.pick-body .meta { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8rem; color: var(--muted); margin: 0; }
.pick-discard { margin: 0.5rem; text-align: center; }

/* Entry banner above the recipe list */
.picker-banner {
  display: block;
  text-align: center;
  background: linear-gradient(120deg, var(--badge-bg), var(--panel));
  border: 1px solid var(--badge-text);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  margin-bottom: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--badge-text);
}

/* Picker v2: wizard steps + fancier result cards */
.picker-dots { display: flex; gap: 0.45rem; margin: 0.6rem 0 1rem; }
.picker-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: background 0.2s; }
.picker-dots .dot.on { background: var(--accent); }
.pstep h2 { font-size: 1.25rem; margin: 0.4rem 0 0.7rem; }
.pstep { animation: pstep-in 0.25s ease; }
@keyframes pstep-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.picker-nav { display: flex; gap: 0.7rem; align-items: center; margin-top: 1.2rem; }
.picker-results { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pick-card {
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}
.pick-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); }
.pick-card img { height: 170px; }
.pick-noimg { height: 170px; display: flex; align-items: center; justify-content: center; font-size: 3rem; background: var(--bg); }
.pick-body h2 { font-size: 1.05rem; }
.pick-discard {
  margin: 0 0.7rem 0.7rem;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.55rem;
  border: 1.5px solid var(--warn-text);
  background: var(--warn-bg);
  color: var(--warn-text);
  border-radius: 10px;
  cursor: pointer;
}
.pick-discard:hover { filter: brightness(0.96); }

/* Picker v3: 2x2 cards, big friendly controls */
.picker-results { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
@media (max-width: 520px) { .picker-results { grid-template-columns: 1fr; } }
.picker .chip { font-size: 1.02rem; padding: 0.55rem 1.1rem; border-radius: 14px; }
.picker .chip:has(input:checked) { box-shadow: 0 3px 10px rgba(47, 94, 60, 0.25); }
.picker-cta {
  font-size: 1.15rem;
  padding: 0.85rem 2rem;
  border-radius: 14px;
  transition: transform 0.12s;
}
.picker-cta:hover { transform: scale(1.04); }
.picker-nav .btn, #repick-btn, #redo-btn {
  font-size: 1.02rem;
  padding: 0.6rem 1.2rem;
  border-radius: 12px;
}
.picker-allergies summary { font-size: 1rem; }

/* Flow legend + text steps */
.flow-legend { margin: 0.7rem 0; }
.flow-legend > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; user-select: none; }
.legend-grid { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; padding: 0.6rem 0 0.3rem; }
.lg { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.lg-shape { fill: var(--panel); stroke: var(--accent); stroke-width: 1.5; }
.lg-line { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.lg-arrow { fill: var(--muted); }
.lg-result { fill: var(--badge-bg); stroke: var(--badge-text); stroke-width: 1.5; }
.text-steps { margin-top: 1rem; }
.text-steps h2 { font-size: 1.15rem; }
.text-steps ol { margin: 0.4rem 0 0 1.2rem; padding: 0; max-width: 70ch; }
.text-steps li { margin: 0.25rem 0; }
@media print { .flow-legend { display: none !important; } }

.report-problem { margin: 0.5rem 0; font-size: 0.85rem; }
.report-link { color: var(--muted); }
.report-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-start; max-width: 32rem; }
.report-form textarea { min-height: 2.4rem; font-size: 0.85rem; padding: 0.4rem; flex: 1 1 16rem; }
.report-actions { display: flex; gap: 0.4rem; }
@media print { .report-problem { display: none !important; } }

/* Picker cards: round ✕ discard overlay, primary "This one!" action */
.pick-card { position: relative; }
.pick-x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(20, 20, 20, 0.45);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.15s, transform 0.1s;
}
.pick-x:hover { background: rgba(160, 16, 16, 0.75); transform: scale(1.08); }
.pick-this {
  display: block;
  margin: 0 0.7rem 0.7rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.55rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff !important;
  text-decoration: none;
}
.pick-this:hover { filter: brightness(1.08); }