/* ===================================================================
   Recipes tab (mobile redesign §3) — Gallery⇄List swipe pager,
   A–Z scrubber, per-recipe add-to-plan buttons.
   Prototype: "Ramekin Mobile.dc.html" turn 5a.
   ================================================================= */

:root {
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.rcx-page {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------------- Header ---------------- */

.rcx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rcx-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.rcx-title {
  margin: 0;
  font-size: 24px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.rcx-count {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.rcx-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary-hover);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: var(--font-semibold);
  text-decoration: none;
  box-shadow: 0 2px 6px -2px rgba(56, 122, 152, 0.5);
  flex: none;
}

.rcx-library-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 2px;
  border-bottom: 1px solid var(--hairline-control, #E3E0D8);
  overflow-x: auto;
  scrollbar-width: none;
}

.rcx-library-tabs::-webkit-scrollbar {
  display: none;
}

.rcx-library-tab {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 1px;
  border-bottom: 2.5px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: var(--font-semibold);
  white-space: nowrap;
  text-decoration: none;
}

.rcx-library-tab span {
  min-width: 18px;
  padding: 1px 5px;
  color: var(--brand-primary, #387A98);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

.rcx-library-tab.is-active {
  border-bottom-color: #5BC5EE;
  color: var(--text-primary);
  font-weight: var(--font-bold);
}

.rcx-library-tab.is-active span {
  color: var(--brand-primary, #387A98);
}

.rcx-library-note {
  margin: 2px 3px 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.rcx-add-btn:hover {
  background: var(--brand-primary-hover);
  color: #fff;
}

.rcx-add-btn i {
  font-size: 11px;
}

/* ---------------- Recipe collection ---------------- */

/* Collection tabs + suggestion note removed — recipe suggestions live on
   the Plan tab now. */

/* ---------------- Search ---------------- */

.rcx-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
}

.rcx-search i {
  color: var(--color-neutral-300);
  font-size: 13px;
  flex: none;
}

.rcx-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-primary);
}

.rcx-search input::placeholder {
  color: var(--color-neutral-300);
}

.rcx-search-submit {
  min-width: 44px;
  min-height: 44px;
  margin-right: -8px;
  padding: 0 8px 0 12px;
  border: 0;
  border-left: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--brand-primary, #387a98);
  font: 700 12px/1 inherit;
  cursor: pointer;
}

.rcx-search-submit:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--brand-primary, #387a98);
  outline-offset: -2px;
}

.rcx-ingredient-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 3px;
  cursor: pointer;
}

.rcx-ingredient-toggle > span:first-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.rcx-ingredient-toggle strong {
  color: var(--text-primary);
  font-size: 13px;
}

.rcx-ingredient-toggle small {
  color: var(--text-muted);
  font-size: 11px;
}

.rcx-ingredient-toggle input {
  position: absolute;
  opacity: 0;
}

.rcx-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: none;
  border-radius: 999px;
  background: var(--color-neutral-200);
  transition: background .18s ease;
}

.rcx-switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 35, 43, .2);
  transition: transform .18s ease;
}

.rcx-ingredient-toggle input:checked + .rcx-switch {
  background: var(--brand-primary);
}

.rcx-ingredient-toggle input:checked + .rcx-switch::after {
  transform: translateX(18px);
}

.rcx-filters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.rcx-filters::-webkit-scrollbar { display: none; }

.rcx-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 13px;
  border: 1px solid var(--border-subtle, #C2C9CC);
  border-radius: 10px;
  background: var(--bg-surface, #FFFFFF);
  color: var(--text-secondary, #374F5D);
  font: 600 12px/1 inherit;
}

/* Leading "Filters" chip — solid primary with a white count badge. */
.rcx-filter-summary {
  gap: 7px;
  border-color: var(--brand-primary-hover, #25566C);
  background: var(--brand-primary, #387A98);
  color: #fff;
}

.rcx-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #fff;
  color: var(--brand-primary, #387A98);
  font-size: 10px;
  font-weight: 700;
}

.rcx-filter-count[hidden] { display: none; }

/* Applied headline chips — soft blue, clear × when active. */
.rcx-filter-applied.is-active {
  border-color: var(--brand-primary-soft, #C8DCE9);
  background: var(--brand-primary-soft, #C8DCE9);
  color: var(--brand-primary-hover, #25566C);
}

.rcx-filter-clear { font-size: 11px; }

/* Dropdown chips — white with a muted chevron. */
.rcx-filter-dropdown .fa-chevron-down {
  color: var(--neutral-300, #A0A8AD);
  font-size: 10px;
}

.rcx-filter-dropdown.is-set {
  border-color: var(--brand-primary-soft, #C8DCE9);
  color: var(--brand-primary-hover, #25566C);
}

.rcx-active-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 3px;
  color: var(--text-muted);
  font-size: 11px;
}

.rcx-active-summary a { color: var(--brand-primary); font-weight: 600; text-decoration: none; }

.rcx-filter-dialog {
  /* Native dialog centering follows the layout viewport. On mobile Chromium,
     an open top-layer dialog can expand that viewport beyond the visual
     viewport, which put the close and submit controls off the physical
     screen. Anchor the sheet to viewport units and explicit coordinates so
     its own min-content width cannot move the viewport underneath it. The
     facet form fills this max-height in the shipped desktop and mobile
     layouts, preserving the intended bottom-sheet edge. */
  position: fixed;
  top: max(18vh, calc(100vh - 720px));
  top: max(18dvh, calc(100dvh - 720px));
  right: auto;
  bottom: auto;
  left: max(10px, calc((100vw - 520px) / 2));
  width: min(calc(100vw - 20px), 520px);
  max-width: calc(100vw - 20px);
  max-height: min(82vh, 720px);
  max-height: min(82dvh, 720px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  box-sizing: border-box;
  color: var(--text-primary);
  background: var(--bg-surface);
  box-shadow: 0 -12px 40px rgba(15, 35, 43, .2);
  overflow: hidden;
}

.rcx-filter-dialog::backdrop { background: rgba(15, 35, 43, .46); }
.rcx-filter-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-height: min(82vh, 720px);
  max-height: min(82dvh, 720px);
  padding: 20px 18px 0;
  overflow: hidden;
  box-sizing: border-box;
}
.rcx-filter-dialog-scroll {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rcx-filter-dialog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 14px;
}
.rcx-filter-dialog-head h2 { margin: 0; font-size: 20px; }
.rcx-filter-dialog-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.rcx-filter-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-primary);
}
.rcx-filter-fieldset { margin: 0; padding: 0; border: 0; }
.rcx-filter-fieldset legend,
.rcx-filter-field > span { margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.rcx-equipment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rcx-equipment-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  font-size: 12px;
}
.rcx-filter-field { display: flex; flex-direction: column; }
.rcx-filter-field input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  font: inherit;
}
.rcx-filter-field small,
.rcx-filter-check small { margin-top: 5px; color: var(--text-muted); font-size: 10px; }
.rcx-filter-check { display: flex; align-items: center; gap: 10px; }
.rcx-filter-check > span { display: flex; flex-direction: column; }
.rcx-filter-dialog-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 24px;
  background: var(--bg-surface);
}
.rcx-filter-dialog-actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--text-muted);
  font-weight: 600;
}
.rcx-filter-dialog-actions button {
  min-height: 46px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  font: 700 13px/1 inherit;
}

/* ---------------- Gallery / List segmented control ---------------- */

.rcx-browser-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.rcx-seg {
  position: relative;
  display: flex;
  background: var(--bg-subtle);
  border-radius: 12px;
  padding: 4px;
}

.rcx-seg-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  bottom: 4px;
  background: var(--bg-surface);
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(15, 35, 43, 0.1);
  transition: transform 0.25s ease;
}

.rcx-seg-thumb.is-list {
  transform: translateX(100%);
}

.rcx-seg-btn {
  flex: 1;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease;
}

.rcx-seg-btn.is-active {
  color: var(--text-primary);
}

.rcx-fullscreen-open {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--brand-primary, #387A98);
  border-radius: 12px;
  background: var(--bg-surface, #fff);
  color: var(--brand-primary-hover, #25566C);
  font: 700 12px/1 inherit;
  cursor: pointer;
}

body.rcx-fullscreen-open { overflow: hidden; }
.rcx-fullscreen-viewer {
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--bg-surface, #fff);
}
.rcx-fullscreen-viewer::backdrop { background: rgba(9, 28, 35, .62); }
.rcx-fullscreen-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; width: min(100%, 760px); height: 100%; min-height: 0; margin: 0 auto; overflow: hidden; background: var(--bg-surface, #fff); }
.rcx-fullscreen-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 62px; padding: 8px 18px; border-bottom: 1px solid #dce3e5; background: rgba(255, 255, 255, .98); }
.rcx-fullscreen-head button,
.rcx-fullscreen-nav button { min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: #e8eff1; color: #16323d; cursor: pointer; }
.rcx-fullscreen-head [data-rcx-fullscreen-close] { width: 44px; justify-self: start; }
.rcx-fullscreen-head #rcxFullscreenFilters { justify-self: end; padding: 0 12px; font-weight: 700; }
.rcx-focus-position { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #294650; font-size: 11px; font-weight: 750; white-space: nowrap; }
.rcx-fullscreen-counter { color: #6d797e; font-family: var(--font-mono); font-size: 12px; }
.rcx-fullscreen-swipe { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.rcx-fullscreen-hero { display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: linear-gradient(145deg, #dceff4, #f3e8e1); color: #387a98; font-size: 45px; }
.rcx-fullscreen-hero img { width: 100%; height: 100%; object-fit: cover; }
.rcx-fullscreen-hero img[hidden], .rcx-fullscreen-hero span[hidden] { display: none; }
.rcx-fullscreen-body { min-width: 0; padding: 22px 24px 26px; }
.rcx-fullscreen-collection { color: #28718e; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.rcx-fullscreen-body h2 { margin: 7px 0 0; color: #10272f; font-size: clamp(25px, 6vw, 36px); line-height: 1.15; }
.rcx-fullscreen-body p { margin: 9px 0 0; color: #526268; font-family: var(--font-mono); font-size: 12px; }
.rcx-focus-evidence { margin-top: 18px; padding-top: 16px; border-top: 1px solid #dce3e5; }
.rcx-focus-evidence h3 { margin: 0 0 9px; color: #294650; font-size: 13px; }
.rcx-focus-evidence ul { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 20px; color: #304f5a; font-size: 13px; line-height: 1.4; }
.rcx-focus-evidence ul[hidden] { display: none; }
.rcx-focus-evidence .rcx-focus-rank { display: inline-flex; margin: 0; padding: 5px 9px; border-radius: 999px; background: #e8f2f5; color: #25566c; font-family: inherit; font-size: 11px; font-weight: 750; line-height: 1.2; }
.rcx-focus-evidence .rcx-focus-empty { color: #6d797e; font-family: inherit; font-size: 12px; line-height: 1.45; }
.rcx-focus-evidence #rcxFullscreenFactors,
.rcx-focus-evidence #rcxFullscreenPantry,
.rcx-focus-evidence #rcxFullscreenProducts,
.rcx-focus-evidence #rcxFullscreenMethod,
.rcx-focus-evidence #rcxFullscreenStatus,
.rcx-focus-evidence #rcxFullscreenPersonal { padding-left: 21px; position: relative; font-family: inherit; font-size: 12px; line-height: 1.45; }
.rcx-focus-evidence #rcxFullscreenFactors::before,
.rcx-focus-evidence #rcxFullscreenPantry::before,
.rcx-focus-evidence #rcxFullscreenProducts::before,
.rcx-focus-evidence #rcxFullscreenMethod::before,
.rcx-focus-evidence #rcxFullscreenStatus::before,
.rcx-focus-evidence #rcxFullscreenPersonal::before { position: absolute; left: 0; color: #387a98; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.rcx-focus-evidence #rcxFullscreenFactors::before { content: "\f201"; }
.rcx-focus-evidence #rcxFullscreenPantry::before { content: "\f494"; }
.rcx-focus-evidence #rcxFullscreenProducts::before { content: "\f291"; }
.rcx-focus-evidence #rcxFullscreenMethod::before { content: "\f518"; }
.rcx-focus-evidence #rcxFullscreenStatus::before { content: "\f071"; }
.rcx-focus-evidence #rcxFullscreenPersonal::before { content: "\f005"; }
.rcx-fullscreen-nav { display: flex; min-height: 58px; align-items: center; justify-content: center; gap: 22px; border-top: 1px solid #dce3e5; background: var(--bg-surface, #fff); }
.rcx-fullscreen-nav span { color: #7b8589; font-size: 11px; }
.rcx-fullscreen-nav button { width: 44px; }
.rcx-fullscreen-nav button:disabled { opacity: .35; cursor: default; }
.rcx-fullscreen-actions { display: grid; grid-template-columns: .82fr 1.35fr; gap: 10px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 24px rgba(20, 46, 56, .07); }
.rcx-fullscreen-actions a,
.rcx-fullscreen-actions button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #bdd0d7; border-radius: 999px; background: #fff; color: #2d6d86; font: 750 14px/1 inherit; text-decoration: none; }
.rcx-fullscreen-actions a { border-color: transparent; font-size: 12.5px; }
.rcx-fullscreen-actions button { border-color: #387a98; background: #387a98; color: #fff; cursor: pointer; }
.rcx-fullscreen-actions button[hidden] { display: none; }
.rcx-fullscreen-actions.is-view-only { grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .rcx-fullscreen-viewer[open] { display: grid; place-items: center; padding: 32px; background: transparent; }
  .rcx-fullscreen-shell { width: min(1120px, calc(100vw - 64px)); min-height: 620px; height: min(780px, calc(100dvh - 64px)); overflow: hidden; border-radius: 20px; box-shadow: 0 24px 80px rgba(9, 28, 35, .28); }
  .rcx-fullscreen-swipe { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, .85fr); overflow: hidden; }
  .rcx-fullscreen-hero { width: auto; height: 100%; aspect-ratio: auto; }
  .rcx-fullscreen-body { align-self: stretch; overflow: visible; padding: 32px; }
  .rcx-fullscreen-body h2 { font-size: clamp(30px, 3vw, 44px); }
}

/* ---------------- Swipe pager ---------------- */

.rcx-pager-wrap {
  position: relative;
  /* Height is set by recipes_tab.js (viewport minus header stack & nav);
     this is a safety floor for no-JS rendering. */
  min-height: 380px;
}

.rcx-pager {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.rcx-pager::-webkit-scrollbar {
  display: none;
}

.rcx-pane {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scrollbar-width: none;
}

.rcx-pane::-webkit-scrollbar {
  display: none;
}

/* ---------------- Gallery tiles (2-up) ---------------- */

.rcx-grid {
  padding: 6px 2px 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rcx-tile {
  position: relative;
  border: 1px solid var(--hairline-card, #EEEBE4);
  border-radius: 12px;
  overflow: hidden;
  min-height: 172px;
  height: 280px;
  box-shadow: var(--shadow-card-v3, 0 1px 2px rgba(16, 39, 47, 0.04), 0 6px 16px -6px rgba(16, 39, 47, 0.10));
}

.rcx-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rcx-tile-link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  pointer-events: none;
}

.rcx-card-focus-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.rcx-card-focus-trigger:focus-visible {
  outline: 3px solid var(--brand-primary, #387A98);
  outline-offset: -3px;
}

.rcx-tile-cap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 26px 12px 38px;
}

.rcx-view-full-recipe {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  position: relative;
  z-index: 4;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #25566c;
  font-size: 10.5px;
  font-weight: 750;
  text-decoration: none;
  pointer-events: auto;
}

.rcx-tile.has-img .rcx-tile-cap {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.88) 34%, rgba(255, 255, 255, 0.96) 100%);
}

.rcx-tile-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.25;
  flex: 0 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 481px) {
  /* Desktop cards can carry several lines of match evidence. Keep the recipe
     identity first in the clipped copy region; the evidence is secondary. */
  .rcx-tile-title {
    order: -1;
  }
}

.rcx-tile-meta {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.rcx-tile-price,
.rcx-row-price {
  color: #25566c;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
}

/* A stale grounded price still shows — it is the only real price we have — with
   a quieter note saying when it was last checked (P0-8). It is emitted INSIDE
   the price span, not as a sibling, so a labelled card adds no extra flex row
   to the fixed-height 280px tile cap and clips nothing that an unlabelled card
   shows. Smaller and lighter than the figure it annotates, never larger. */
.rcx-price-stale {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
}

.rcx-tile-products {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 2px;
}

.rcx-tile-product {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 96px;
  gap: 4px;
  padding: 3px 6px 3px 3px;
  border: 1px solid rgba(56, 122, 152, .2);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .92);
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1;
}

.rcx-tile-product img,
.rcx-tile-product i {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
}

.rcx-tile-product i {
  display: grid;
  place-items: center;
  color: var(--brand-primary);
}

.rcx-tile-product span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcx-tile-product-more {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
}

.rcx-badge-warn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: var(--radius-md);
  background: var(--tint-warning);
  color: var(--color-warning);
  font-size: 10px;
  font-weight: var(--font-medium);
}

.rcx-tile-actions {
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.rcx-tile-action-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rcx-starter-save,
.rcx-row-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(56, 122, 152, .28);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .94);
  color: var(--brand-primary-hover);
  font-size: 11px;
  font-weight: var(--font-semibold);
  cursor: pointer;
  box-shadow: 0 2px 6px -2px rgba(56, 122, 152, .35);
}

.rcx-starter-save.is-saved,
.rcx-row-save.is-saved {
  border-color: rgba(44, 120, 88, .25);
  background: rgba(241, 250, 246, .95);
  color: var(--color-success, #287a58);
  cursor: default;
}

.rcx-row-save {
  flex: none;
  box-shadow: none;
}

.rcx-tile-action {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C2413A;
  cursor: pointer;
  box-shadow: 0 2px 6px -2px rgba(56, 122, 152, 0.5);
}

.rcx-tile-action:hover {
  background: #fff;
}

.rcx-tile-action.is-plan {
  background: var(--brand-primary);
  color: #fff;
}

.rcx-tile-action.is-favorite,
.rcx-row-action.is-favorite { color: var(--text-muted); }

.rcx-tile-action.is-favorite.is-active,
.rcx-row-action.is-favorite.is-active { color: var(--brand-tomato, #D14D47); }

.rcx-tile-action.is-plan:hover {
  background: var(--brand-primary-hover);
}

.rcx-tile-action i {
  font-size: 12px;
}

.rcx-plan-label {
  display: none;
  font-size: 11px;
  font-weight: var(--font-semibold);
}

.rcx-page.is-suggested .rcx-tile-action.is-plan,
.rcx-page.is-suggested .rcx-row-action.is-plan {
  width: auto;
  padding: 0 9px;
  gap: 5px;
}

.rcx-page.is-suggested .rcx-plan-label {
  display: inline;
}

.rcx-tile-rating {
  position: absolute;
  left: 9px;
  bottom: 8px;
  z-index: 3;
}

/* Soft tint placeholders (design-language palette) */
.rcx-tint-0 { background: #E3EDF1; }
.rcx-tint-1 { background: #E1EBE5; }
.rcx-tint-2 { background: #DBE8EE; }
.rcx-tint-3 { background: #E9ECDF; }
.rcx-tint-4 { background: #EBE7DE; }
.rcx-tint-5 { background: #E4EAEC; }

/* ---------------- List pane ---------------- */

.rcx-list {
  padding: 6px 22px 26px 2px;
  display: flex;
  flex-direction: column;
}

.rcx-letter {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--brand-primary);
  padding: 12px 0 2px;
  letter-spacing: 0.06em;
}

.rcx-letter:first-child {
  padding-top: 8px;
}

.rcx-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--bg-subtle);
}

/* Search filtering sets [hidden] on rows; without this counter-rule the
   display:flex above beats the UA's [hidden]{display:none} and List view
   ignores the search box entirely (QA 2026-07-26 H4). */
.rcx-row[hidden] {
  display: none;
}

.rcx-row-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.rcx-row-thumb {
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-300);
  font-size: 17px;
}

.rcx-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-menu-add].is-added {
  background: #dfece5 !important;
  color: #2c6a4a !important;
  cursor: default;
}

.rcx-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rcx-row-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rcx-row-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.rcx-suggestion-reason {
  display: none;
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: var(--font-medium);
  line-height: 1.3;
}

.rcx-page.is-suggested .rcx-suggestion-reason:not(:empty) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rcx-page.is-suggested .rcx-tile {
  height: 190px;
}

.rcx-page.is-suggested .rcx-tile-cap {
  padding-bottom: 40px;
}

.rcx-row-warn {
  color: var(--color-warning);
  font-size: 10px;
}

.rcx-row-actions {
  display: flex;
  gap: 6px;
}

.rcx-row-view {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: #eef5f7;
  color: #25566c;
  text-decoration: none;
}

.rcx-row-action {
  width: 32px;
  height: 32px;
  flex: none;
  border: none;
  border-radius: var(--radius-full);
  background: var(--tint-error, #fef3f2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-error, #b42318);
  cursor: pointer;
}

.rcx-row-action:hover {
  background: var(--color-error-100, #fee4e2);
}

.rcx-row-action.is-plan {
  background: var(--tint-info);
  color: var(--brand-primary);
}

.rcx-row-action.is-plan:hover {
  background: var(--brand-primary-soft);
}

.rcx-row-action i {
  font-size: 13px;
}

.rcx-row-rating {
  flex: 0 0 100%;
  padding: 0 0 7px 62px;
  margin-top: -8px;
}

/* ---------------- A–Z scrubber ---------------- */

.rcx-scrub {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  z-index: 5;
  width: 18px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

.rcx-scrub.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.rcx-scrub-letter {
  font-size: 9px;
  line-height: 1.15;
  color: var(--border-subtle);
}

.rcx-scrub-letter.has {
  font-weight: var(--font-bold);
  color: var(--brand-primary);
}

/* ---------------- Pager dots ---------------- */

.rcx-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 4;
  pointer-events: none;
}

.rcx-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--border-subtle);
  transition: background 0.2s ease;
}

.rcx-dot.is-on {
  background: var(--brand-primary);
}

/* ---------------- No results / empty states ---------------- */

.rcx-no-results {
  padding: 24px 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.rcx-empty {
  text-align: center;
  padding: var(--space-16) var(--space-5);
  background: var(--bg-surface);
  border-radius: 20px;
  border: 2px dashed var(--border-subtle);
  margin-top: var(--space-4);
}

.rcx-empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  color: var(--brand-primary-soft);
}

.rcx-empty-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
}

.rcx-empty-text {
  color: var(--text-muted);
  margin: 0 auto var(--space-6);
  font-size: var(--text-base);
  max-width: 320px;
}

.rcx-empty-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.rcx-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-5);
  background: var(--brand-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.rcx-empty-btn:hover {
  background: var(--brand-primary-hover);
  color: #fff;
}

.rcx-empty-btn.is-secondary {
  background: var(--text-secondary);
}
.rcx-personal-cover {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #25566C;
  background: #EFF7FC;
  font-size: 9.5px;
  font-weight: 700;
}

/* =====================================================================
   UNIFIED BROWSE (2026-08-23)
   One /recipes surface: a composable filter form above one continuous
   immersive grid whose tiers are its ordering.
   ===================================================================== */

.rcx-browse-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 6px;
}

.rcx-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rcx-filter-label {
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: none;
}

/* One line per chip row, scrolled horizontally rather than wrapped. The grid
   below IS the surface, so the filter bar must not push it off the first
   screen; four wrapped rows of chips did exactly that on a phone. */
.rcx-chipset {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.rcx-chipset::-webkit-scrollbar { display: none; }

.rcx-chipset > * {
  flex: none;
}

/* Dietary is twelve options; collapsed until one is set. */
.rcx-diet > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: revert;
}

.rcx-diet[open] > summary {
  color: var(--text-secondary);
}

.rcx-diet .rcx-chipset {
  padding-top: 2px;
}

/* Filter chips are labels wrapping a real checkbox: the lit state is a
   projection of input state via :has(), never a click toggle, so the chip and
   the control it claims to show cannot disagree (see
   tests/test_template_form_integrity.py). */
.rcx-chip {
  /* Contain the absolutely positioned, visually hidden checkbox. Without a
     positioned ancestor its static position can widen the whole document,
     even though the chip row itself owns horizontal scrolling. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hairline-card, #EEEBE4);
  border-radius: var(--radius-full);
  background: var(--surface-card, #fff);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--font-medium);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.rcx-chip.is-disabled {
  cursor: default;
  opacity: 0.62;
}

.rcx-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.rcx-chip.is-on,
.rcx-chip:has(input:checked) {
    background: var(--brand-primary);
    border-color: var(--brand-primary-hover);
    color: #fff;
}

.rcx-chip-check {
  display: none;
  font-size: 10px;
}

.rcx-chip.is-on .rcx-chip-check,
.rcx-chip:has(input:checked) .rcx-chip-check {
  display: inline-block;
}

.rcx-chip.is-on > span,
.rcx-chip.is-on .rcx-chip-check,
.rcx-chip:has(input:checked) > span,
.rcx-chip:has(input:checked) .rcx-chip-check {
  color: #fff;
}

.rcx-chip:has(input:focus-visible) {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.rcx-chip-count {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.75;
}

.rcx-chip.is-on .rcx-chip-count,
.rcx-chip:has(input:checked) .rcx-chip-count {
  color: #fff;
  opacity: 1;
}

.rcx-chip-more {
  gap: 8px;
}

.rcx-field {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 132px;
}

.rcx-field > span {
  font-size: 10.5px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rcx-field input,
.rcx-field select {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--hairline-card, #EEEBE4);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-card, #fff);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  min-width: 0;
  width: 100%;
}

.rcx-discovery-lead {
  margin: 4px 3px 8px;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Real photography leads; the utensil glyph is the fallback the script
   reveals when the row has no image, or its image fails to load. */
.rcx-tile-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 26px;
  opacity: 0.55;
}

.rcx-tile-placeholder[hidden] {
  display: none;
}

/* Long single-token titles ("5-Ingredient…") used to hard-truncate at the
   first line on narrow columns. Two lines, and breaking inside a word is
   allowed rather than clipping it. */
.rcx-tile-title {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.rcx-tile-method {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* The honest "your rating moved this up" / "matches your X" line. Rendered
   only when the server put one on the entry. */
.rcx-why {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--brand-primary);
  font-size: 10.5px;
  font-weight: var(--font-semibold);
  line-height: 1.3;
}

.rcx-match-evidence {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.rcx-match-rank,
.rcx-match-pantry {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(232, 242, 245, .96);
  color: #25566c;
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1;
}

.rcx-match-pantry {
  background: rgba(237, 247, 241, .96);
  color: #2c6a4a;
}

.rcx-match-reason {
  display: -webkit-box;
  flex: 0 0 100%;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--brand-primary);
  font-size: 10.5px;
  font-weight: var(--font-semibold);
  line-height: 1.3;
}

.rcx-match-evidence > [hidden] {
  display: none;
}

@media (max-width: 480px) {
  /* Two-up phone cards are a glanceable preview. Rich evidence remains in
     the one-at-a-time view; keeping it in this 130–180px-wide cap can push
     the actual rank above the clipped tile boundary. */
  .rcx-tile .rcx-match-reason,
  .rcx-tile .rcx-match-pantry,
  .rcx-tile .rcx-tile-products,
  .rcx-tile .rcx-tile-method,
  .rcx-tile .rcx-personal-cover,
  .rcx-tile [data-focus-status] {
    display: none;
  }

  .rcx-tile-meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------------- TIER 3 link cards ----------------
   Visually distinct from a recipe card on purpose: no image, no meta, no
   price. Ramekin has not reviewed these, so it links rather than shows. */
.rcx-tile-link-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: flex-start;
  padding: 12px;
  height: auto;
  min-height: 172px;
  border-style: dashed;
  background: var(--surface-subtle, #FAF8F4);
  box-shadow: none;
}

.rcx-link-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rcx-link-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.rcx-link-domain {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.rcx-link-import {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
  background: transparent;
  font-size: 12.5px;
  font-weight: var(--font-semibold);
  text-decoration: none;
}

.rcx-row-thumb.is-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--surface-subtle, #FAF8F4);
  border: 1px dashed var(--hairline-card, #EEEBE4);
}

.rcx-import-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hairline-card, #EEEBE4);
  border-radius: var(--radius-full);
  background: var(--surface-card, #fff);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--font-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.rcx-import-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

@media (hover: none) and (pointer: coarse) {
  .rcx-starter-save,
  .rcx-row-save,
  .rcx-tile-action,
  .rcx-row-action,
  .rcx-row-view,
  .rcx-view-full-recipe {
    min-width: 44px;
    min-height: 44px;
  }

  .rcx-tile-action,
  .rcx-row-action,
  .rcx-row-view {
    width: 44px;
    height: 44px;
  }

  .rcx-view-full-recipe {
    padding: 0 10px;
  }
}

/* =====================================================================
   COMPACT BROWSE + LAZY RECIPE READER (2026-08-26)
   ===================================================================== */

.rcx-browse-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: stretch;
}

.rcx-browse-shell .rcx-search { min-width: 0; padding: 0 13px; border-radius: 12px; }
.rcx-browse-shell .rcx-search input { height: 44px; }
.rcx-search-pending {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  padding: 9px 12px;
  border: 1px solid #d9e5e9;
  border-radius: 12px;
  background: #f4f9fa;
  color: #315c6c;
  font-size: 12px;
  font-weight: 650;
}
.rcx-search-pending[hidden] { display: none; }
.rcx-search-pending::before {
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid #b9d0d8;
  border-top-color: var(--brand-primary, #387a98);
  border-radius: 999px;
  content: "";
  animation: rcx-search-spin .7s linear infinite;
}
.rcx-page.is-search-pending .rcx-search {
  border-color: #8fb7c6;
  box-shadow: 0 0 0 3px rgba(56, 122, 152, .1);
}
@keyframes rcx-search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rcx-search-pending::before { animation: none; }
}
.rcx-shell-button,
.rcx-sort-shell {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--hairline-card, #d9dedf);
  border-radius: 12px;
  background: var(--surface-card, #fff);
  color: var(--text-secondary, #374f5d);
  font: 700 12px/1 inherit;
}
.rcx-shell-button { cursor: pointer; }
.rcx-sort-shell select {
  max-width: 92px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.rcx-active-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 2px 3px;
  scrollbar-width: none;
}
.rcx-active-filters::-webkit-scrollbar { display: none; }
.rcx-active-chip,
.rcx-clear-filters,
.rcx-active-filters > a {
  display: inline-flex;
  min-height: 44px;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #bfd5de;
  border-radius: 999px;
  background: #edf6f8;
  color: #25566c;
  font: 650 11px/1 inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.rcx-clear-filters,
.rcx-active-filters > a { border-color: transparent; background: transparent; }
.rcx-dialog-chip-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.rcx-dialog-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rcx-dialog-field-grid .rcx-filter-field:last-child { grid-column: 1 / -1; }
.rcx-dialog-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rcx-dialog-check-grid label { display: flex; min-height: 44px; align-items: center; gap: 8px; font-size: 13px; }
.rcx-filter-field select {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border-subtle, #c2c9cc);
  border-radius: 10px;
  background: #fff;
  color: var(--text-primary);
  font: inherit;
}

/* Photography and information are two sharp surfaces. There is deliberately
   no translucent white fade over the food image. */
.rcx-tile { height: 280px; background: #fff; }
.rcx-tile-img { height: 55%; bottom: auto; }
.rcx-tile-placeholder { bottom: 45%; }
.rcx-tile-link {
  top: 55%;
  background: #fff;
  border-top: 1px solid var(--hairline-card, #eeebe4);
}
.rcx-tile-cap { height: 100%; justify-content: flex-start; padding: 11px 11px 8px; overflow: hidden; }
.rcx-tile.has-img .rcx-tile-cap { background: #fff; }
.rcx-tile .rcx-view-full-recipe[hidden] { display: none; }
.rcx-tile-actions { pointer-events: none; }
.rcx-tile-actions > * { pointer-events: auto; }
.rcx-card-overflow { position: relative; z-index: 7; }
.rcx-tile-actions .rcx-card-overflow { position: static; }
.rcx-card-overflow > summary { list-style: none; }
.rcx-card-overflow > summary::-webkit-details-marker { display: none; }
.rcx-card-overflow-menu {
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 10;
  display: grid;
  width: max-content;
  min-width: 188px;
  padding: 6px;
  border: 1px solid #dce3e5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 35, 43, .18);
}
.rcx-card-overflow.is-row .rcx-card-overflow-menu { right: 0; left: auto; }
.rcx-tile-actions .rcx-card-overflow-menu { right: 0; left: 0; width: auto; min-width: 0; }
.rcx-overflow-action {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: 600 12px/1 inherit;
  text-align: left;
  cursor: pointer;
}
.rcx-overflow-action:hover { background: #f5f7f7; }
.rcx-overflow-action.is-favorite.is-active { color: var(--brand-tomato, #d14d47); }
.rcx-overflow-action.is-danger { color: #a83b35; }
.rcx-tile-rating:empty,
.rcx-row-rating:empty { display: none; }
[data-starter-saved-only][hidden] { display: none !important; }
.rcx-rating-summary {
  display: inline-flex;
  width: max-content;
  min-width: 0;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #a76b05;
  font: 750 11px/1 var(--font-mono);
  box-shadow: 0 1px 4px rgba(15, 35, 43, .12);
}
.rcx-tile-rating.rcx-rating-summary { top: calc(55% - 30px); bottom: auto; }
.rcx-row-rating.rcx-rating-summary { flex: none; margin-top: -5px; padding: 4px 7px; }

.rcx-fullscreen-viewer .rcx-fullscreen-swipe:has(> .rcx-reader-content) {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-surface, #fff);
}
.rcx-reader-content { min-height: 100%; }
.rcx-reader-loading,
.rcx-reader-error {
  display: grid;
  min-height: 55vh;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #607177;
}
.rcx-reader-loading > span { width: min(280px, 72vw); height: 16px; border-radius: 8px; background: linear-gradient(90deg, #e5e8e6 25%, #f3f3ef 45%, #e5e8e6 65%); background-size: 240% 100%; animation: rcx-reader-pulse 1.2s ease infinite; }
.rcx-reader-loading > span:first-child { height: 150px; }
.rcx-reader-loading > span:nth-child(3) { width: min(210px, 55vw); }
.rcx-reader-loading p,
.rcx-reader-error p { margin: 6px 0 0; font-size: 12px; }
.rcx-reader-error button { min-height: 44px; margin-top: 8px; padding: 0 16px; border: 1px solid #387a98; border-radius: 999px; background: #fff; color: #28627a; font: 750 12px/1 inherit; cursor: pointer; }
@keyframes rcx-reader-pulse { to { background-position: -140% 0; } }
.rcx-reader-fragment { min-height: 100%; background: var(--bg-surface, #fff); }
.rcx-reader-hero { display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: #dfeaec; color: #387a98; font-size: 42px; }
.rcx-reader-hero img { width: 100%; height: 100%; object-fit: cover; }
.rcx-reader-hero [hidden] { display: none; }
.rcx-reader-copy { display: grid; gap: 14px; padding: 22px 18px 34px; }
.rcx-reader-title-block h2 { margin: 5px 0 0; color: #10272f; font-size: clamp(27px, 7vw, 40px); line-height: 1.08; letter-spacing: -.025em; }
.rcx-reader-kicker,
.rcx-reader-eyebrow { margin: 0; color: #28718e; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.rcx-reader-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; color: #526268; font-family: var(--font-mono); font-size: 11px; }
.rcx-reader-section { padding: 18px; border: 1px solid #e0e3df; border-radius: 16px; background: #fff; }
.rcx-reader-rationale { background: #f7fafb; }
.rcx-reader-section h3 { margin: 4px 0 12px; color: #17313a; font-size: 17px; }
.rcx-reader-muted,
.rcx-reader-cost-note,
.rcx-reader-rationale-detail { margin: 7px 0 0; color: #65747a; font-size: 12px; line-height: 1.5; }
.rcx-reader-rank { display: inline-flex; margin: 0; padding: 5px 9px; border-radius: 999px; background: #e8f2f5; color: #25566c; font-size: 11px; font-weight: 750; }
.rcx-reader-reasons { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 20px; color: #304f5a; font-size: 13px; line-height: 1.45; }
.rcx-reader-cost-completeness { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: start; margin: 0 0 12px; padding: 11px 12px; border: 1px solid #dfc982; border-radius: 12px; background: #fff8df; color: #6f5718; }
.rcx-reader-cost-completeness > i { margin-top: 2px; font-size: 13px; }
.rcx-reader-cost-completeness p { display: grid; gap: 2px; margin: 0; font-size: 11px; line-height: 1.45; }
.rcx-reader-cost-completeness strong { color: #5b4611; font-size: 12px; }
.rcx-reader-cost-completeness.is-incomplete { border-color: #dfb77b; background: #fff4e3; color: #795029; }
.rcx-reader-cost-completeness.is-incomplete strong { color: #633d1d; }
.rcx-reader-cost-explainer { margin: -2px 0 12px; color: #52656c; font-size: 12px; line-height: 1.45; }
.rcx-reader-cost-ledger { margin: 0; border: 1px solid #d8e1e3; border-radius: 14px; overflow: hidden; background: #f8faf9; }
.rcx-reader-cost-ledger > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-bottom: 1px solid #e2e7e6; }
.rcx-reader-cost-ledger > div:last-child { border-bottom: 0; }
.rcx-reader-cost-ledger > div.is-total { background: #eaf3f6; }
.rcx-reader-cost-ledger dt { display: grid; min-width: 0; gap: 2px; }
.rcx-reader-cost-ledger dt > span { color: #263f48; font-size: 12px; font-weight: 750; }
.rcx-reader-cost-ledger dt small { color: #6a797e; font-size: 9.5px; line-height: 1.3; }
.rcx-reader-cost-ledger dd { margin: 0; color: #17313a; font-family: var(--font-mono); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcx-reader-cost-ledger dd.is-review { max-width: 108px; color: #8a4f31; font-family: inherit; font-size: 12px; line-height: 1.25; text-align: right; white-space: normal; }
.rcx-reader-serving-cost { display: grid; gap: 8px; margin-top: 10px; padding: 13px; border-radius: 14px; background: #f3f7f7; }
.rcx-reader-serving-cost > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rcx-reader-serving-cost span { color: #30515e; font-size: 11px; font-weight: 750; }
.rcx-reader-serving-cost strong { color: #17313a; font-family: var(--font-mono); font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcx-reader-serving-cost p { margin: 0; color: #65747a; font-size: 10.5px; line-height: 1.45; }
.rcx-reader-cost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.rcx-reader-cost { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 11px 9px; border-radius: 12px; background: #f4f6f5; }
.rcx-reader-cost.is-primary { border: 1px solid #cbdfe6; background: #e9f3f6; }
.rcx-reader-cost.is-purchase { background: #eaf3f6; }
.rcx-reader-cost > span { color: #637278; font-size: 9px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.rcx-reader-cost strong { color: #17313a; font-family: var(--font-mono); font-size: 20px; font-variant-numeric: tabular-nums; }
.rcx-reader-cost.is-primary strong { color: #174b60; }
.rcx-reader-cost small { color: #65747a; font-size: 9.5px; line-height: 1.3; }
.rcx-reader-cost-note.is-approximate { color: #795a20; }
.rcx-reader-cost-note.is-stale { color: #8a4f31; }
.rcx-reader-price-action { display: grid; gap: 9px; margin-top: 13px; padding: 13px; border: 1px solid #cbdfe6; border-radius: 14px; background: #f2f8fa; }
.rcx-reader-price-action > p { margin: 0; color: #50666e; font-size: 11.5px; line-height: 1.45; }
.rcx-reader-price-action > p strong { color: #244752; }
.rcx-reader-price-action button { display: inline-flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #387a98; border-radius: 999px; background: #387a98; color: #fff; font: 750 12px/1.2 inherit; cursor: pointer; }
.rcx-reader-price-action button:disabled { cursor: wait; opacity: .7; }
.rcx-reader-price-action .rcx-reader-action-status:empty { display: none; }
.rcx-reader-products-section h3 { display: flex; align-items: center; gap: 7px; }
.rcx-reader-products-section h3 > span { display: inline-grid; min-width: 23px; height: 23px; padding: 0 6px; place-items: center; border-radius: 999px; background: #e8f2f5; color: #25566c; font: 700 10px/1 var(--font-mono); }
.rcx-reader-products { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #e4e8e6; }
.rcx-reader-products li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid #e4e8e6; }
.rcx-reader-products li[hidden] { display: none; }
.rcx-reader-products li.is-review { margin-inline: -8px; padding-inline: 8px; border-radius: 10px; background: #fffaf0; }
.rcx-reader-product-media { display: grid; width: 46px; height: 46px; place-items: center; overflow: hidden; border: 1px solid #e0e4df; border-radius: 11px; background: #f7f8f5; color: #487789; }
.rcx-reader-product-media img { width: 100%; height: 100%; object-fit: contain; }
.rcx-reader-product-copy { display: grid; min-width: 0; gap: 2px; }
.rcx-reader-product-copy small { overflow: hidden; color: #4b7888; font-size: 9px; font-weight: 750; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rcx-reader-product-copy strong { overflow: hidden; color: #20373f; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.rcx-reader-product-copy > span { color: #68777c; font-size: 10px; line-height: 1.35; }
.rcx-reader-product-copy > em { width: max-content; max-width: 100%; margin-top: 3px; padding: 3px 6px; border-radius: 999px; background: #edf5f1; color: #32664c; font-size: 9px; font-style: normal; font-weight: 750; line-height: 1.2; }
.rcx-reader-product-copy > em.is-review { background: #fff0d8; color: #81551d; }
.rcx-reader-product-copy > em.is-estimate { background: #f5f0df; color: #715b26; }
.rcx-reader-product-copy > em.is-covered { background: #edf6ef; color: #32664c; }
.rcx-reader-products-summary { margin: -4px 0 10px; color: #65747a; font-size: 11px; }
.rcx-reader-products-summary strong { color: #81551d; }
.rcx-reader-products-toggle { display: inline-flex; min-height: 44px; align-items: center; margin-top: 5px; padding: 0; border: 0; background: transparent; color: #28627a; font: 750 12px/1 inherit; cursor: pointer; }
.rcx-reader-products-link { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; margin-top: 7px; color: #28627a; font-size: 12px; font-weight: 750; text-decoration: none; }
.rcx-reader-ingredients,
.rcx-reader-instructions { display: grid; gap: 9px; margin: 0; padding-left: 22px; color: #2d4249; font-size: 14px; line-height: 1.55; }
.rcx-reader-instructions { gap: 15px; }
.rcx-reader-source-disclosure { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 12px; background: #eef5f7; color: #2f515d; }
.rcx-reader-source-disclosure p { margin: 5px 0 10px; font-size: 12px; line-height: 1.45; }
.rcx-reader-source-disclosure a { color: #25566c; font-size: 13px; font-weight: 750; }

@media (max-width: 480px) {
  /* Give search the full first row, then keep the two refinement controls
     equally weighted below it. This preserves the compact desktop toolbar
     without making phone users type into a cramped one-third-width field. */
  .rcx-browse-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rcx-browse-shell .rcx-search {
    grid-column: 1 / -1;
  }

  .rcx-shell-button,
  .rcx-sort-shell {
    width: 100%;
    min-width: 0;
  }

  .rcx-sort-shell select {
    min-width: 0;
    max-width: none;
  }

  .rcx-sort-shell i,
  .rcx-shell-button > i {
    display: inline-block;
  }

  /* The photograph owns the top 55% of a gallery tile. Align both actions
     nine pixels inside its lower edge while retaining full thumb targets. */
  .rcx-tile-actions {
    top: auto;
    bottom: calc(45% + 9px);
  }

  /* Ratings stay in the photograph's upper-left corner so the saved-recipe
     overflow control can own the lower-left 44px target without collision. */
  .rcx-tile-rating.rcx-rating-summary {
    top: 9px;
    bottom: auto;
  }

  .rcx-tile-action {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .rcx-tile-actions .rcx-card-overflow-menu {
    top: auto;
    bottom: 50px;
  }
}

@media (max-width: 390px) {
  .rcx-sort-shell { padding: 0 8px; }
  .rcx-shell-button { padding: 0 9px; }
  .rcx-dialog-field-grid { grid-template-columns: 1fr; }
  .rcx-dialog-field-grid .rcx-filter-field:last-child { grid-column: auto; }
}

@media (max-width: 350px) {
  .rcx-reader-cost-ledger > div { gap: 8px; padding-inline: 10px; }
  .rcx-reader-cost-ledger dd,
  .rcx-reader-serving-cost strong,
  .rcx-reader-cost strong { font-size: 18px; }
}

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  .rcx-seg-btn,
  .rcx-starter-save,
  .rcx-row-save,
  .rcx-tile-action,
  .rcx-row-action,
  .rcx-row-view {
    min-height: 44px;
  }

  .rcx-tile-action,
  .rcx-row-action,
  .rcx-row-view {
    width: 44px;
    height: 44px;
  }
}

@media (min-width: 900px) {
  /* The swipe pane has a definite grid-track height. Making it a size query
     container lets the sticky media column fill that visible pane instead of
     resolving 100% against a long recipe fragment and growing thousands of
     pixels tall. */
  .rcx-fullscreen-swipe { container-type: size; }
  .rcx-reader-fragment { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(390px, .85fr); min-height: 100%; align-items: start; }
  .rcx-reader-hero { position: sticky; top: 0; align-self: start; height: min(620px, calc(100dvh - 220px)); height: 100cqh; min-height: 0; max-height: 100cqh; aspect-ratio: auto; }
  .rcx-reader-copy { align-content: start; padding: 34px; }
  .rcx-reader-title-block h2 { font-size: 42px; }
}