/* ========================================
   Recipe index — Covers / Strips switch and the Strips view
   Covers stay the default. Strips lists every extracted recipe as a
   recipe-filter item, so the chips filter it too.
   ======================================== */

/* ── View tokens: sizes and motion for the switch and Strips ── */
.rx-groups {
  --rv-icon: 20px;
  --rv-icon-sm: 18px;
  --rv-switch-width: 40px;
  --rv-switch-height: 32px;
  --rv-switch-icon: 18px;
  --rv-switch-width-phone: 36px;
  --rv-switch-height-phone: 24px;
  --rv-switch-icon-phone: 16px;
  --rv-pill: 52px;
  --rv-number: 24px;
  --rv-nudge: 32px;
  --rv-nudge-stroke: 2.4;
  --rv-edge: 64px;
  --rv-blur-soft: 2px;
  --rv-blur: 6px;
  --rv-thumb: 78px;
  --rv-thumb-phone: 66px;
  --rv-idea-column: 360px;
  --rv-pill-max: 340px;
  --rv-pending: 180px;
  --rv-focus-ring: 3px;
  --rv-focus-offset: 2px;
  --rv-lift: 2px;
  --rv-enter-offset: 6px;
  --rv-duration-fast: 120ms;
  --rv-duration: 160ms;
  --rv-duration-enter: 220ms;
  --rv-duration-slide: 260ms;
}

/* ── Toolbar: filters on the left, views on the right ── */
.rx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm-md) var(--space-md);
}

/* The switch is a compact track with one paper thumb under the chosen view, as on the
   Groceries tabs. The track takes the unselected-chip fill, so it sits with the filters
   instead of competing with them. */
.rv-switch {
  position: relative;
  display: inline-flex;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-radius: var(--radius-control);
  background: var(--color-hover);
}

/* Nested radius: the track's radius less its padding. */
.rv-switch::before {
  content: "";
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  width: var(--rv-switch-width);
  height: var(--rv-switch-height);
  box-sizing: border-box;
  border: var(--line);
  border-color: var(--color-ink);
  border-radius: calc(var(--radius-control) - var(--space-xs));
  background: var(--color-paper);
  transition: transform var(--rv-duration-slide) var(--ease-out-soft);
}

.rx-groups[data-view="strips"] .rv-switch::before { transform: translateX(calc(100% + var(--space-xs))); }

/* Drawn small; the tap-area rule in theme.css keeps a 44px target. The gap keeps the two targets apart. */
.rv-switch__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rv-switch-width);
  height: var(--rv-switch-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: color var(--rv-duration) ease, transform var(--rv-duration) var(--ease-out);
}

.rv-switch__icon { flex: 0 0 auto; width: var(--rv-switch-icon); height: var(--rv-switch-icon); }
.rv-switch__option[aria-pressed="true"] { color: var(--color-ink); }
.rv-switch__option:active { transform: scale(0.94); }
.rv-switch__option:focus-visible { outline: var(--rv-focus-ring) solid var(--ui-focus-outline); outline-offset: var(--rv-focus-offset); }

@media (hover: hover) and (pointer: fine) {
  .rv-switch__option[aria-pressed="false"]:hover { color: var(--color-ink); }
}

/* ── Which view shows ───────────────── */
.rv-pane { display: none; min-width: 0; }
.rx-groups:not([data-view="covers"]) .rx-grid { display: none; }
.rx-groups[data-view="strips"] .rv-strips { display: block; animation: rv-in var(--rv-duration-enter) var(--ease-out-soft) backwards; }

@keyframes rv-in { from { opacity: 0; transform: translateY(var(--rv-enter-offset)); } }

.rv-pane [hidden] { display: none !important; }
/* An idea with every recipe filtered out leaves no empty header behind. An idea with
   no recipes yet is a filter item itself, so the filter hides it directly. */
.rv-group:has([data-recipe-row]):not(:has([data-recipe-row]:not([hidden]))) { display: none; }

/* Shared bits */
.rv-pane :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
.rv-pane a { color: inherit; text-decoration: none; }
.rv-pane a:focus-visible { outline: var(--rv-focus-ring) solid var(--ui-focus-outline); outline-offset: var(--rv-focus-offset); border-radius: var(--radius-sm); }

.rv-thumb--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream-dark);
  color: var(--color-ink-soft);
}

.rv-thumb__icon { width: var(--rv-icon); height: var(--rv-icon); }

.rv-pane .recipe-favorite-control { flex: 0 0 auto; }

.rv-pane .recipe-favorite-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: transform var(--rv-duration) var(--ease-out), color var(--rv-duration) ease;
}

.rv-pane .recipe-favorite-button svg { width: var(--rv-icon-sm); height: var(--rv-icon-sm); transition: fill var(--rv-duration) ease; }
.rv-pane .recipe-favorite-button.is-favorited { color: var(--color-ink); }
.rv-pane .recipe-favorite-button.is-favorited svg { fill: var(--color-tomato); }
.rv-pane .recipe-favorite-button:active { transform: scale(0.85); }
.rv-pane .recipe-favorite-button:focus-visible { outline: var(--rv-focus-ring) solid var(--ui-focus-outline); outline-offset: calc(var(--rv-focus-ring) * -1); }

@media (hover: hover) and (pointer: fine) {
  .rv-pane .recipe-favorite-button:hover { color: var(--color-ink); }
}

/* ── Strips ─────────────────────────── */
/* Rows carry no fill and no line: the thumbnails line up with the chips above, and the tiles are the only surfaces. */
.rv-strips__list { display: flex; flex-direction: column; gap: var(--space-md); }

.rv-strip {
  display: grid;
  grid-template-columns: minmax(0, min(var(--rv-idea-column), 36%)) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}

.rv-strip__idea { display: flex; align-items: center; gap: var(--space-sm-md); min-width: 0; }
.rv-strip__thumb { flex: 0 0 auto; width: var(--rv-thumb); aspect-ratio: 3 / 2; border-radius: var(--radius-sm); object-fit: cover; }
.rv-strip__thumb[hidden] { display: none; }
.rv-strip__text { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.rv-strip__title, .rv-strip__byline { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rv-strip__title { font-weight: var(--weight-medium); font-size: var(--text-body); line-height: var(--leading-label); font-family: var(--font-display); color: var(--color-ink-soft); transition: color var(--rv-duration) ease; }
.rv-strip__byline { font-size: var(--text-label); font-weight: var(--weight-regular); line-height: var(--leading-label); color: var(--color-ink-soft); }

/* The thumbnail and title open the first recipe, as the title does on a cover. */
@media (hover: hover) and (pointer: fine) {
  a.rv-strip__idea:hover .rv-strip__title { color: var(--color-ink); }
}

.rv-strip__track { position: relative; min-width: 0; }

.rv-strip__pills {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--space-sm);
  scrollbar-width: none;
  /* Room above and below for a tile's lift and focus ring. Tiles are cut at the lane's own edges, so a cut tile
     ends where the toolbar does; the lane's contents start one step in, clear of the cut. */
  margin-block: calc(var(--space-sm) * -1);
  padding: var(--space-sm);
}

.rv-strip__pills::-webkit-scrollbar { display: none; }

/* A recipe tile is a chip-shaped Covers row: number, title over its ingredient count, heart. */
.rv-pill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  max-width: var(--rv-pill-max);
  min-height: var(--rv-pill);
  padding-left: var(--space-sm);
  border-radius: var(--radius-control);
  background: var(--color-cream-dark);
  scroll-snap-align: start;
  transition: background-color var(--rv-duration) ease, transform var(--rv-duration) var(--ease-out);
}

.rv-pill__link { display: flex; align-items: center; gap: var(--space-sm); align-self: stretch; min-width: 0; }
.rv-pill__number { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--rv-number); height: var(--rv-number); border-radius: var(--radius-round); background: var(--color-paper); color: var(--color-ink-soft); font-weight: var(--weight-bold); font-size: var(--text-label); line-height: var(--leading-display); font-family: var(--font-body); }
.rv-pill__text { display: flex; flex-direction: column; min-width: 0; }
.rv-pill__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--weight-medium); font-size: var(--text-body); line-height: var(--leading-title); font-family: var(--font-display); color: var(--color-ink); }
.rv-pill__count { font-size: var(--text-label); font-weight: var(--weight-semibold); line-height: var(--leading-label); color: var(--color-ink-soft); white-space: nowrap; }

/* Extraction still running: the place the next recipe lands says so. */
.rv-pill--pending { min-width: var(--rv-pending); padding-inline: var(--space-sm-md); border: var(--line); border-style: dashed; border-color: var(--color-ink-faint); background: transparent; font-size: var(--text-label); }

.rv-strip__note { margin: 0; padding-inline-start: var(--space-sm); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--text-label); line-height: var(--leading-label); }

/* Focus rings the whole tile, in its own shape; the heart keeps its own ring. */
.rv-pane .rv-pill .rv-pill__link:focus-visible { outline: none; }
.rv-pill:has(.rv-pill__link:focus-visible) { outline: var(--rv-focus-ring) solid var(--ui-focus-outline); outline-offset: var(--rv-focus-offset); }

@media (hover: hover) and (pointer: fine) {
  .rv-pill:not(.rv-pill--pending):hover { background: var(--color-hover); transform: translateY(calc(var(--rv-lift) * -1)); }
}

.rv-strip__nudge {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--rv-nudge);
  height: var(--rv-nudge);
  border: 0;
  border-radius: var(--radius-round);
  background: var(--color-ink);
  color: var(--color-paper);
  cursor: pointer;
  transform: translateY(-50%);
}

.rv-strip__nudge svg { width: var(--rv-icon-sm); height: var(--rv-icon-sm); fill: none; stroke: currentColor; stroke-width: var(--rv-nudge-stroke); stroke-linecap: round; stroke-linejoin: round; }
.rv-strip__nudge--back { left: 0; }
.rv-strip__nudge--next { right: 0; }

/* A cut edge of the lane blurs progressively under its arrow (DESIGN.md Flat Rule, Strips scroll edge): a light
   blur fades in first, then a stronger one with a cream veil, so tiles soften into the page as they scroll away
   instead of ending in a hard cut beside the solid arrow. Two layers, because a parent with a filter or mask would
   stop its children's backdrop from seeing the tiles. */
.rv-strip__edge { position: absolute; top: 0; bottom: 0; z-index: 1; display: none; width: var(--rv-edge); pointer-events: none; }
.rv-strip__edge--back { left: 0; --rv-edge-to: to left; }
.rv-strip__edge--next { right: 0; --rv-edge-to: to right; }
.rv-strip__edge::before, .rv-strip__edge::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--rv-duration) ease; }
.rv-strip__edge::before {
  -webkit-backdrop-filter: blur(var(--rv-blur-soft));
  backdrop-filter: blur(var(--rv-blur-soft));
  -webkit-mask-image: linear-gradient(var(--rv-edge-to), transparent, var(--color-ink) 60%);
  mask-image: linear-gradient(var(--rv-edge-to), transparent, var(--color-ink) 60%);
}
.rv-strip__edge::after {
  background: color-mix(in srgb, var(--color-cream) 85%, transparent);
  -webkit-backdrop-filter: blur(var(--rv-blur));
  backdrop-filter: blur(var(--rv-blur));
  -webkit-mask-image: linear-gradient(var(--rv-edge-to), transparent 30%, var(--color-ink));
  mask-image: linear-gradient(var(--rv-edge-to), transparent 30%, var(--color-ink));
}
.rv-strip__track[data-more-back] .rv-strip__edge--back::before,
.rv-strip__track[data-more-back] .rv-strip__edge--back::after,
.rv-strip__track[data-more-next] .rv-strip__edge--next::before,
.rv-strip__track[data-more-next] .rv-strip__edge--next::after { opacity: 1; }

/* No see-through surfaces: the veil goes solid cream and does the fade alone. */
@media (prefers-reduced-transparency: reduce) {
  .rv-strip__edge::before { display: none; }
  .rv-strip__edge::after { background: var(--color-cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.rv-strip__nudge:focus-visible { outline: var(--rv-focus-ring) solid var(--ui-focus-outline); outline-offset: var(--rv-focus-offset); }

@media (hover: hover) and (pointer: fine) {
  .rv-strip__track[data-more-back] .rv-strip__nudge--back,
  .rv-strip__track[data-more-next] .rv-strip__nudge--next { display: flex; }
  .rv-strip__edge { display: block; }
  /* A tile the arrows or the keyboard bring in lands clear of the arrow and its blur. */
  .rv-strip__pills { scroll-padding-inline: var(--rv-edge); }
}

/* ── Phone ──────────────────────────── */
@media (max-width: 640px) {
  .rv-strips__list { gap: var(--space-lg); }
  .rv-strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .rv-strip__thumb { width: var(--rv-thumb-phone); }
  /* Level with the 32px phone chips. */
  .rx-groups { --rv-switch-width: var(--rv-switch-width-phone); --rv-switch-height: var(--rv-switch-height-phone); --rv-switch-icon: var(--rv-switch-icon-phone); }
  /* The tiles run to the screen edge (the page's 16px gutter) and scroll under it, instead of stopping short. */
  .rv-strip__track { margin-inline: calc(var(--space-md) * -1); }
  .rv-strip__pills { padding-inline: var(--space-md); scroll-padding-inline: var(--space-md); }
  .rv-strip__nudge--back { left: var(--space-sm); }
  .rv-strip__nudge--next { right: var(--space-sm); }
  /* A status reads as the third line of the idea, under its title. */
  .rv-strip__note { margin-top: calc(var(--space-xs) * -1); padding-inline-start: calc(var(--rv-thumb-phone) + var(--space-sm-md)); }
}

/* A narrow window with a mouse still gets arrows; tiles land clear of them. */
@media (max-width: 640px) and (hover: hover) and (pointer: fine) {
  .rv-strip__pills { scroll-padding-inline: var(--rv-edge); }
}

@media (prefers-reduced-motion: reduce) {
  .rx-groups .rv-pane { animation: none !important; }
  .rv-switch::before, .rv-switch__option, .rv-pill, .rv-strip__edge::before, .rv-strip__edge::after { transition: none; }
  .rv-pill:hover { transform: none; }
}