// =============================================================================
// Recipe catalog — shared by RecipesPage, RecipeFormPage and every component
// under features/recipes/. Colocated here (rather than split per-component)
// since the catalog is one cohesive visual unit and most rules are small
// enough that splitting them would just add files to jump between — same
// choice as settings-pages.scss for the settings pages.
//
// The master-detail layout (tabs + table + detail panel) was ported from a
// reviewed standalone HTML mockup onto the app's real design tokens — no
// light/dark duplication needed here, every `var(--color-*)` below already
// resolves per-theme globally (see styles/_theme.scss).
// =============================================================================

@use "../../styles/breakpoints" as bp;

// --- Allergen / diet / disliked-ingredient badges ---------------------------
// Three visually distinct pill languages, each with its own meaning — never
// mixed, so a glance tells them apart without reading the label:
//   - allergens: --color-allergen, solid fill (a food-safety warning)
//   - diets: --color-tag (turmeric — "category/classification tag" per
//     _theme.scss), solid fill (a neutral reminder, not a warning)
//   - disliked ingredients: neutral outline, dashed border (a personal
//     taste preference — deliberately *not* on the allergen/warning scale)
.allergen-badges,
.diet-badges,
.disliked-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.allergen-badge,
.diet-badge,
.disliked-badge {
  padding: 0.15rem 0.6rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
}

.allergen-badge {
  color: var(--color-allergen-ink);
  background: var(--color-allergen);
}

.diet-badge {
  color: var(--color-tag-ink);
  background: var(--color-tag);
}

.disliked-badge {
  color: var(--color-text-muted);
  background: none;
  border: 1px dashed var(--color-border);
}

// A fourth, distinct pill language for `ReproducibleBadge` — neither a
// warning (allergen) nor a classification (diet) nor a negative (disliked):
// a positive nudge ("this could be homemade"), so it borrows
// --color-primary (the same tinted-fill treatment as `.is-selected` in
// global.scss) rather than any of the three above. `margin-top` matches its
// siblings' `.allergen-badges`/`.diet-badges` list wrappers even though this
// is a lone element, not a list, so it lines up the same way when it's the
// only badge present.
.reproducible-badge {
  display: inline-block;
  margin: var(--space-sm) 0 0;
  padding: 0.15rem 0.6rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  border-radius: var(--radius-pill);
}

.reproducible-badge--link {
  text-decoration: none;
  cursor: pointer;

  &:hover {
    background: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface));
  }
}

// --- Catalog page -------------------------------------------------------------
// `.app-content` (AppLayout.scss) already stretches to the full viewport
// height — same reasoning as `planning-page.scss`. `.recipes-page` fills
// that box as a column so `__catalog` can grow to fill whatever's left
// under the header/tabs, instead of being only as tall as its content.
.recipes-page {
  height: 100%;
  display: flex;
  flex-direction: column;

  &__header {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

  &__search {
    flex: 1 1 16rem;
    max-width: 24rem;
    padding: 0.5rem var(--space-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-surface);
    color: var(--color-text);
  }

  &__new-button {
    flex: none;
    padding: 0.5rem var(--space-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-base);
    cursor: pointer;
    text-decoration: none;

    &:hover {
      background: var(--color-primary-hover);
    }
  }

  &__status {
    margin-top: var(--space-xl);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
  }

  &__status--error {
    color: var(--color-error);
  }

  // The master-detail row: table (flexible) + detail panel (never under
  // 35% of the *viewport* width — `minmax(35vw, 38vw)`, not a fraction of
  // this grid, per the reviewed mockup), both stretched to the same full
  // height so the detail panel never just shrink-wraps to its own content.
  &__catalog {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(35vw, 38vw);
    // Without this, the grid's single implicit row falls back to
    // auto-sizing (tall enough for its content), not the full height of
    // `&__catalog` itself — silently masked as long as `.app-content`'s own
    // height was `min-height: 100vh` (auto-grew to fit anything, so
    // nothing downstream ever actually needed to stretch to a fixed
    // height). Fixing that (see AppLayout.scss) made `&__catalog`'s height
    // genuinely definite for the first time, which surfaced this: the
    // detail panel's own `height: 100%; overflow-y: auto` (see
    // `.recipe-detail-panel` below) had nothing to stretch against, came
    // out shorter than its content, and silently clipped it.
    grid-template-rows: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  @include bp.tablet-down {
    &__catalog {
      grid-template-columns: 1fr;
      // The single-row `1fr` track above only makes sense for the desktop
      // side-by-side layout — collapsed to one column, the table and the
      // detail panel stack into two separate rows instead, so forcing them
      // both into one `1fr` track split the available height in half and
      // gave the table row 0px (its own content pushed below the fold,
      // clipped by its `overflow-y: auto`). Reset to the default `auto`
      // (each row sized to its content) — matches `height: auto` below,
      // which already stopped assuming a single fixed-height row here.
      grid-template-rows: auto;
      height: auto;
    }
  }
}

// --- Tabs ------------------------------------------------------------------
.recipe-tabs {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-xs);
  // Never lets a tab overflow the page (which would force the whole body
  // to scroll horizontally, see global.scss's rule against that) — scrolls
  // within itself instead once the tabs (favoris/perso/foyer/publique,
  // plus one per household-enabled source) don't all fit, same pattern as
  // the sidebar's own nav.
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);

  &__tab {
    appearance: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    transition:
      color 0.15s ease,
      border-color 0.15s ease;

    svg {
      width: 1.05rem;
      height: 1.05rem;
      flex: none;
    }

    // A source tab's own icon (`SourceView.iconUrl`) — sized to match the
    // Lucide `svg` icons above so a source tab doesn't stand out from the
    // four real ones.
    .recipe-tabs__source-icon {
      width: 1.05rem;
      height: 1.05rem;
      flex: none;
      object-fit: contain;
    }

    &:hover {
      color: var(--color-text);
    }

    &.active {
      color: var(--color-primary);
      border-color: var(--color-primary);
    }

    &.placeholder {
      color: var(--color-border);
      cursor: not-allowed;

      &:hover {
        color: var(--color-border);
      }
    }
  }
}

// --- Catalog table -----------------------------------------------------------
.recipe-table-wrap {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  // Issue #90: unlike the planning grid's own wrapper (planning-page.scss),
  // this one had no horizontal guard at all — on a narrow viewport the
  // table's `width: 100%` below just let the browser compress every column
  // (photo/name/allergens/diets) to fit instead of scrolling. Same fix,
  // scaled down: 4 narrower columns don't need anywhere near the planning
  // grid's 62rem, but they do need *some* floor so the badge columns don't
  // get squeezed to the point of wrapping every single pill onto its own
  // line. Shared by both the full catalog (`/recettes`) and
  // `RecipePickerDialog`'s own instance of this same table/wrapper — fixes
  // the identical compression there too, not just the full-page case.
  overflow-x: auto;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.recipe-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  text-align: left;

  th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-surface);
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
  }

  td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
  }

  tbody tr {
    cursor: pointer;
    transition: background-color 0.12s ease;

    &:hover {
      background: var(--color-surface-alt);
    }

    &.selected {
      background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));

      td:first-child {
        box-shadow: inset 3px 0 0 var(--color-primary);
      }
    }

    &:last-child td {
      border-bottom: none;
    }
  }

  &__photo {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-base);
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__name {
    font-weight: 600;
  }

  &__fav-mark {
    color: var(--color-tag);
    margin-left: 0.3rem;
    font-size: var(--font-size-sm);
  }

  &__muted {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }
}

// --- Sources tab (RecipeSourcesPanel) ---------------------------------------
// Reuses .recipes-page__header/__search/__catalog and .recipe-table(-wrap)
// as-is (see RecipeSourcesPanel.tsx/SourceItemTable.tsx) — only what's
// actually new to this tab gets its own rules here.

.recipes-page__header--sources {
  gap: var(--space-sm);
}

.source-item-table__imported-badge {
  padding: 0.1rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.source-items-column {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

// Browsing a source scrolls infinitely (SourceItemTable's own sentinel row
// triggers RecipeSourcesPanel's handleLoadMore) — this is only the inline
// retry action shown alongside recipes.sources.loadMoreError when a page
// fetch actually fails, not a persistent "load more" control.
.source-items-retry {
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

// Pulsing placeholder rows `SourceItemTable` appends below the real items
// while `RecipeSourcesPanel`'s "load more" fetch is in flight — with that
// panel prefetching the next page ahead of time (as soon as the sentinel
// row scrolls near view), this is usually a very brief flash rather than
// an actual wait, but it keeps the list
// filling in instead of looking like nothing happened either way.
@keyframes source-item-skeleton-pulse {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.9;
  }
}

// Invisible marker row `SourceItemTable`'s `IntersectionObserver` watches
// to trigger infinite scroll — no padding/border of its own, unlike a real
// row, so it doesn't show up as a stray empty stripe at the bottom of the
// list.
.source-item-table__sentinel td {
  padding: 0;
  border: none;
}

.source-item-table__row--skeleton {
  cursor: default;
  pointer-events: none;

  &:hover {
    background: none;
  }
}

.source-item-table__photo--skeleton,
.source-item-table__skeleton-bar {
  background: var(--color-border);
  animation: source-item-skeleton-pulse 1.4s ease-in-out infinite;
}

.source-item-table__skeleton-bar {
  display: block;
  width: 60%;
  height: 0.9rem;
  border-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: reduce) {
  .source-item-table__photo--skeleton,
  .source-item-table__skeleton-bar {
    animation: none;
    opacity: 0.6;
  }
}

.source-item-preview__hint {
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
  border-radius: var(--radius-base);
}

// --- Recipe detail panel -----------------------------------------------------
// 100% of the grid row's height (see `.recipes-page__catalog` above): the
// panel itself never scrolls, only its content does past that height
// (`overflow-y: auto`) — the photo/star/name stay visible while reading.
.recipe-detail-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);

  &__status {
    padding: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
  }

  &__status--error {
    color: var(--color-error);
  }

  &__header {
    flex-shrink: 0;
    position: relative;
  }

  &__photo {
    height: 9rem;
    width: 100%;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--color-primary) 22%, var(--color-surface-alt)),
        var(--color-surface-alt));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md) 0;

    h2 {
      font-size: var(--font-size-lg);
    }
  }

  &__title-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;

    h2 {
      margin: 0;
    }
  }

  &__portions {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  &__title-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;

    .allergen-badges,
    .disliked-badges {
      justify-content: flex-end;
      margin-top: 0;
    }
  }

  &__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  &__danger-button {
    padding: 0.5rem var(--space-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #fff;
    background: var(--color-error);
    border: none;
    border-radius: var(--radius-base);
    cursor: pointer;

    &:hover {
      opacity: 0.9;
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  &__delete-confirm {
    display: flex;
    align-items: center;
    gap: var(--space-sm);

    button:not(.recipe-detail-panel__danger-button) {
      padding: 0.5rem var(--space-md);
      font-family: var(--font-body);
      font-size: var(--font-size-sm);
      font-weight: 600;
      cursor: pointer;
      border-radius: var(--radius-base);
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      color: var(--color-text);
    }
  }

  &__section {
    flex-shrink: 0;
    padding: var(--space-md);

    &+& {
      border-top: 1px solid var(--color-border);
    }

    h3 {
      font-size: var(--font-size-xs);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-text-muted);
      margin-bottom: var(--space-sm);
    }
  }

  // The description gets its own, more generous section — the only "free
  // text" on the panel, it needs more room to breathe than a badge or a
  // short step.
  &__section--description {
    padding: var(--space-lg) var(--space-md);
  }

  &__description {
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: 1.7;
    margin: 0;
  }

  &__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    counter-reset: step;

    // `> li`, not a bare descendant `li` — this used to match *any* `<li>`
    // nested anywhere inside a step, not just the step's own direct one.
    // Harmless while `StepDescription`'s editable mode only ever added
    // plain text/buttons, but `TechStepCorrectionPopover` renders its own
    // `<li>`s a few levels down (each attached ingredient/utensil/
    // temperature row, `.tech-step-correction-popover__row`; the technique
    // picker's `.catalog-search-picker__list`, up to ~74 entries) —
    // every one of those was incrementing this *same* counter, throwing
    // every step's own number off as soon as any correction popover with
    // attached metadata (or its technique picker) was open.
    > li {
      counter-increment: step;

      &::before {
        content: counter(step) ". ";
        font-weight: 700;
        color: var(--color-primary);
      }

      // Same descendant-selector fix as `> li` above, for the same reason:
      // both the step's own picture and its `StepDescription`-rendered `<p>`
      // are direct children of this `<li>` — `TechStepCorrectionPopover`'s
      // own `<p>`s (the selection line, hints, `.field-error`) sit deeper
      // inside it and must not inherit "inline, no margin" meant only for
      // the step's own paragraph.
      > img {
        display: block;
        max-width: 100%;
        border-radius: var(--radius-base);
        margin-bottom: var(--space-xs);
      }

      > p {
        display: inline;
        margin: 0;
      }
    }
  }
}

// A step's detected-technique keyword (see StepDescription.tsx) — a real
// <button> (natively focusable, so the Tooltip it wraps is
// keyboard-reachable, not just hoverable — see that component), reset here
// to read as inline highlighted text rather than a button: a subtle dotted
// underline + tinted background, same "primary-tinted" language as
// `.source-select__badge.is-official`, not a loud/distracting highlight
// since it sits inline within normal reading text.
.step-tech-step {
  display: inline;
  padding: 0 0.15em;
  margin: 0;
  font: inherit;
  color: inherit;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border: none;
  border-radius: 0.2em;
  text-decoration: underline dotted var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  // A real clickable trigger (opens `TechStepCorrectionPopover`), not just
  // a hover-for-a-tooltip target — `pointer`, not `help`, same reasoning
  // now shared by `.step-temperature` below.
  cursor: pointer;

  &:hover,
  &:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 24%, transparent);
    outline: none;
  }
}

// A `"manual"`-sourced match (a viewer's correction, applied immediately —
// see `StepTechStepView.source`) — same shape as `.step-tech-step`, but in
// `--color-tag` (Turmeric) instead of `--color-primary` (Basil), so the two
// origins are distinguishable at a glance, not just via the tooltip text.
.step-tech-step--manual {
  background: color-mix(in srgb, var(--color-tag) 18%, transparent);
  text-decoration-color: var(--color-tag);

  &:hover,
  &:focus-visible {
    background: color-mix(in srgb, var(--color-tag) 28%, transparent);
  }
}

// A detected temperature mention ("180 °C", "th. 6", "feu doux") — same
// inline "highlighted reading text" language as `.step-tech-step`, but in
// `--color-accent` (Vermillion, the "heat" accent) rather than
// `--color-primary`, so a temperature reads as its own kind of metadata at
// a glance. `--low`/`--medium`/`--high` only vary the underline weight —
// the qualitative scale is a nuance, not three different colors.
//
// Renders as a `<button>` (not a `<span>`) in editable mode when it has an
// owning technique occurrence to reopen (see `StepDescription.tsx`'s
// `findTechStepForTemperature`) — same button-reset-to-inline-text
// treatment as `.step-tech-step` above (`font`/`color`/`margin`/`border`),
// so the two read identically whether they're a `<button>` or a plain
// `<span>` (read-only, or no owner to reopen).
.step-temperature {
  display: inline;
  padding: 0 0.15em;
  margin: 0;
  font: inherit;
  color: inherit;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: none;
  border-radius: 0.2em;
  text-decoration: underline dotted var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  cursor: pointer;

  &:hover,
  &:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
    outline: none;
  }

  &--high {
    text-decoration-thickness: 2px;
  }

  &--low {
    text-decoration-style: dashed;
  }
}

// `.step-tech-step-context` (the wider clause a `.step-tech-step` keyword
// was found in) used to be highlighted here too, more subtly — turned back
// off (see `StepDescription.tsx`'s doc comment): the backend still
// computes and persists `contextStart`/`contextEnd`, this file just no
// longer gives that class any styling to render with.

// Discoverability hint above the steps list (RecipeDetailPanel.tsx) —
// muted so it reads as a small aside, not competing with the steps
// themselves for attention.
.recipe-detail-panel__tech-step-hint {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

// --- Tech-step correction (StepDescription.tsx editable mode) ---------------

// Deliberately *not* `position: absolute` (unlike `.calendar-popover`) — see
// `TechStepCorrectionPopover.tsx`'s doc comment for why this renders inline
// in the document flow right below the step's own description instead of
// floating anchored at the selection.
.tech-step-correction-popover {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  &__selection {
    font-weight: 600;
    margin: 0;
  }

  // One shared shape for every section (Technique/Ingrédients/Ustensiles/
  // Température) — see `TechStepCorrectionPopover.tsx`'s own doc comment
  // for why all four render together, always, rather than one at a time.
  &__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  &__section-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);

    svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
  }

  // Same "kicker" label language as `.cooking-phase__recipe-group-title`
  // (cooking-session-page.scss) — a small bold uppercase eyebrow, not a
  // full heading, since four of these stack in one popover.
  &__section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
  }

  &__section-count {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
  }

  // One icon color per category — set on the icon itself (not the whole
  // section) so the title text next to it stays neutral/muted.
  &__technique-section &__section-header svg {
    color: var(--color-primary);
  }
  &__ingredients-section &__section-header svg,
  &__utensils-section &__section-header svg {
    color: var(--color-tag);
  }
  &__temperature-section &__section-header svg {
    color: var(--color-accent);
  }

  &__chosen-technique {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  &__technique-pill {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-surface);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-sm);
  }

  &__technique-change {
    background: none;
    border: none;
    color: var(--color-primary);
    text-decoration: underline;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    align-self: flex-start;
  }

  // "Ma technique n'est pas dans la liste" sub-form (issue #130) — a name
  // field + a small confirm, shown in place of the "not in list" link once
  // it's clicked.
  &__missing-technique {
    display: flex;
    gap: var(--space-xs);

    input {
      flex: 1;
      min-width: 0;
      padding: var(--space-xs) var(--space-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-base);
      background: var(--color-surface);
      color: var(--color-text);
      font: inherit;
    }
  }

  &__remove-match {
    padding: 0.2rem 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-error);
    background: none;
    border: 1px solid var(--color-error);
    border-radius: var(--radius-pill);
    cursor: pointer;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  &__cancel,
  &__cancel-mini {
    background: none;
    border: none;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: var(--font-size-sm);
  }

  // Shown in place of a section's own "+ Ajouter…" button while
  // `StepDescription` is waiting on a second text selection for *that*
  // section (see `TechStepCorrectionPopover.tsx`'s own doc comment) — same
  // styling intent as `.recipe-detail-panel__tech-step-hint`, a small
  // muted aside.
  &__hint {
    margin: 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
  }

  &__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  // One attached ingredient/utensil/temperature — a small card of its own
  // (not a chip pill anymore: showing the source quote alongside the name
  // needs more room than a pill comfortably gives).
  &__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm);
  }

  &__row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  &__row-name {
    font-weight: 600;
  }

  &__row-quote {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
  }

  &__row-badge {
    flex-shrink: 0;
    align-self: center;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-pill);
  }

  &__row-remove {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-base);
    cursor: pointer;

    svg {
      width: 16px;
      height: 16px;
    }

    &:hover:not(:disabled) {
      color: var(--color-error);
      background: var(--color-surface-alt);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  // "+ Ajouter…" — a dashed ghost row, not a plain text link: at-a-glance
  // an "add a new item" affordance, same weight as the rows it adds to.
  &__add-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-base);
    padding: var(--space-sm);
    color: var(--color-text-muted);
    background: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;

    svg {
      width: 16px;
      height: 16px;
    }

    &:hover:not(:disabled) {
      border-color: var(--color-accent);
      color: var(--color-accent);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  // A section's own inline "adding a new mention" sub-form — replaces just
  // that section's `__add-row` button, every other section (and the
  // technique picker) stays visible and untouched alongside it.
  &__add-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    padding: var(--space-sm);
  }

  &__add-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm);
  }

  &__quantity-line,
  &__value-line {
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    input[type="number"] {
      width: 5rem;
      padding: var(--space-xs) var(--space-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-base);
      background: var(--color-surface);
      color: var(--color-text);
      font: inherit;
    }
  }

  &__value-unit {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  // Température's 3-way mode switch (°C / Thermostat / Qualitatif) — a
  // segmented control, same connected-pill language as the qualitative
  // sub-choice below, in the accent color (Vermillion, the "heat" accent —
  // same as `.step-temperature`) so the active mode reads at a glance.
  &__mode-switch {
    display: flex;
    gap: 2px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-pill);
    padding: 2px;

    button {
      flex: 1;
      border: none;
      background: none;
      padding: var(--space-xs) var(--space-sm);
      border-radius: var(--radius-pill);
      font-size: var(--font-size-sm);
      font-weight: 700;
      color: var(--color-text-muted);
      cursor: pointer;

      &.active {
        background: var(--color-accent);
        color: var(--color-surface);
      }
    }
  }

  &__qual-switch {
    display: flex;
    gap: var(--space-xs);

    button {
      flex: 1;
      border: 1.5px solid var(--color-border);
      background: var(--color-surface);
      color: var(--color-text);
      padding: var(--space-xs) var(--space-sm);
      border-radius: var(--radius-base);
      font-size: var(--font-size-sm);
      font-weight: 600;
      cursor: pointer;

      &.active {
        border-color: var(--color-accent);
        background: var(--color-accent);
        color: var(--color-surface);
      }
    }
  }

  &__confirm-mini {
    background: var(--color-accent);
    color: var(--color-surface);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-weight: 700;
    padding: var(--space-xs) var(--space-md);
    cursor: pointer;

    &:hover {
      background: var(--color-accent-hover);
    }
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-xs);
  }

  &__confirm-button {
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-surface);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-base);
    cursor: pointer;

    &:hover:not(:disabled) {
      background: var(--color-primary-hover);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

// Reused by both the ingredient and utensil "attach to this correction"
// sub-flows (`TechStepCorrectionPopover.tsx`) — deliberately lighter than
// `.ingredient-picker` (no category/subcategory grid, no allergen/diet
// toggles), sized for a small popover rather than a full recipe form.
.catalog-search-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);

  &__input {
    width: 100%;
  }

  &__empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    // Raised from the original 8rem — this component is now also the
    // technique picker (~74 entries, see this file's own doc comment),
    // where 8rem left only a couple of rows visible before scrolling.
    max-height: 14rem;
    overflow-y: auto;

    button {
      padding: 0.3rem 0.6rem;
      font-size: var(--font-size-sm);
      color: var(--color-text);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      cursor: pointer;

      &:hover {
        background: color-mix(in srgb, var(--color-primary) 14%, transparent);
        border-color: var(--color-primary);
      }

      // The technique picker's current pick (`selectedId` prop) — stays
      // visually marked even while filtered/scrolled past, so re-opening
      // this popover's picker doesn't read as "nothing chosen yet" when
      // something already is. Unused by the ingredient/utensil sub-flows
      // (they never pass `selectedId` — each pick there just appends a
      // fresh mention, nothing to mark as "current").
      &.catalog-search-picker__item--selected {
        background: color-mix(in srgb, var(--color-primary) 20%, transparent);
        border-color: var(--color-primary);
        font-weight: 600;
      }
    }
  }
}

// --- Favorite star toggle (detail panel header) -----------------------------
.favorite-star-button {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.12s ease,
    color 0.12s ease;

  svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  &:hover:not(:disabled) {
    transform: scale(1.08);
  }

  &:disabled {
    cursor: not-allowed;
  }

  // Overrides the icon's own `fill="none"` (a presentation attribute, lower
  // CSS priority than this rule) — solid star once favorited, outline
  // otherwise.
  &.is-favorite {
    color: var(--color-tag);

    svg {
      fill: currentColor;
    }
  }
}

// --- External source link (draft preview header) ----------------------------
// Same overlay slot/sizing as `.favorite-star-button` above — a draft
// preview never has both (nothing to favorite yet), so the two never
// compete for the corner. Deliberately muted/small ("discret" per the
// product decision this button follows): a way out to the original page,
// not a call to action the way the buttons it replaced were.
.recipe-detail-panel__source-link {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
  transition:
    transform 0.12s ease,
    color 0.12s ease;

  svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  &:hover,
  &:focus-visible {
    color: var(--color-primary);
    transform: scale(1.08);
    outline: none;
  }
}

// --- Recipe form (create/edit) ----------------------------------------------
// Per-field validation and whole-form error messages — same small rules as
// auth-form.scss/profile-forms.scss, redeclared here rather than shared
// since this page only imports recipes.scss (see global.scss's doc comment
// on colocated, per-scope styles).
.field-error {
  color: var(--color-error);
  font-size: var(--font-size-xs);
  margin: 0;
}

.form-error {
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

.recipe-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);

  label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--space-sm);
  }

  input,
  textarea,
  select {
    padding: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    resize: vertical;
  }

  &__section {
    margin-top: var(--space-xl);

    h2 {
      font-size: var(--font-size-lg);
      margin-bottom: var(--space-sm);
    }
  }

  &__ingredient-list {
    list-style: none;
    margin: 0 0 var(--space-sm);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  &__actions {
    margin-top: var(--space-xl);
  }

  // Pins the Enregistrer/Annuler pair to the bottom of `.app-content` (the
  // one scroll container — AppLayout.scss) so a long recipe never needs
  // scrolling back down to save or leave. `bottom: 0` lands it a hair above
  // the true viewport edge because `.app-content` carries its own padding —
  // a small, acceptable gap, and correct on every breakpoint without a
  // per-viewport override. The opaque `background` + top border keep the
  // form content readable as it scrolls underneath.
  &__actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
  }

  button[type="submit"] {
    padding: 0.6rem var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-base);
    background: var(--color-primary);
    color: #fff;

    &:hover:not(:disabled) {
      background: var(--color-primary-hover);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  // Secondary action next to the primary Enregistrer — outline/ghost, same
  // language as `.recipe-detail-panel__delete-confirm`'s non-danger button,
  // so "Annuler" never competes visually with "Enregistrer".
  &__cancel {
    padding: 0.6rem var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-surface);
    color: var(--color-text);

    &:hover {
      background: var(--color-surface-alt);
    }
  }
}

// --- Unresolved-ingredient review (ImportRecipePage) ------------------------
// Amber-tinted callout, same "warning" language as .source-item-preview__hint
// — each line needs a person to pick the right ingredient (or drop it)
// before the form can submit at all (see ImportRecipePage.tsx's canSubmit).
.import-recipe__unresolved {
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
  border-radius: var(--radius-md);

  h3 {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-base);
  }
}

.import-recipe__unresolved-list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.import-recipe__unresolved-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;

  span {
    flex: 1 1 auto;
    font-size: var(--font-size-sm);
  }

  button {
    flex: none;
    padding: 0.3rem var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    cursor: pointer;

    &:hover {
      border-color: var(--color-primary);
    }
  }
}

// --- Diet tag multi-select (recipe form) -------------------------------------
// Checkbox-grid, same visual language as AllergySelect (profile-forms.scss)
// — global.scss's `label:has(> input[type="checkbox"])` rule already
// supplies the selected/unselected look, this only arranges the rows.
.diet-tag-select {
  border: none;
  padding: 0;
  margin: var(--space-xs) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);

  legend {
    width: 100%;
    padding: 0 0 var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
  }

  label {
    margin-top: 0;
    font-weight: 400;
  }
}

// --- Ingredient row (selected ingredient in the form) -----------------------
.ingredient-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--radius-base);

  &__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--color-text-muted);

    svg {
      width: 1.25rem;
      height: 1.25rem;
    }
  }

  &__name {
    font-weight: 600;
    margin-right: auto;
  }

  // Marks a free-text placeholder line (nothing in the catalog matched) —
  // the ingredient still needs a real catalog entry created by a
  // maintainer, but the line is usable (quantity/unit) in the meantime.
  &__placeholder-badge {
    margin-left: var(--space-xs);
    padding: 0 var(--space-xs);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-base);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
  }

  &__quantity {
    width: 5rem;
  }

  // Wide enough for the longest catalog label ("cuillère à soupe") not to
  // clip — was sized for the old free-text input's short values ("g",
  // "unité"…) before unit became a <select> over the reference catalog
  // (see IngredientRow.tsx), left too narrow for that one.
  &__unit {
    width: 11rem;
  }

  // "Selon le goût" toggle — the app's selectable-card checkbox
  // (global.scss's `label:has(> input[type="checkbox"])`), shrunk to sit
  // inline in the row without dominating it.
  &__to-taste {
    margin-top: 0;
    font-size: var(--font-size-xs);
    font-weight: 400;
    white-space: nowrap;
  }

  &__remove {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-surface);
    color: var(--color-text-muted);

    &:hover {
      color: var(--color-error);
      border-color: var(--color-error);
    }
  }

  // A resolved ingredient with no unit picked — the form's submit stays
  // disabled until this is fixed, so it needs to be obvious *which* row is
  // the reason why (see issue #53). `__error` takes the row's full width
  // (it comes after the `flex-wrap`ped controls above, so it naturally
  // drops to its own line).
  &--incomplete &__unit {
    border-color: var(--color-error);
  }

  &__error {
    width: 100%;
    margin: 0;
  }
}

// --- Ingredient picker (recipe form + disliked-ingredients field) ----------
// Always-visible category chips + search + card grid — replaces the earlier
// type-to-filter dropdown (`.ingredient-autocomplete`, now gone), which
// stopped scaling once the reference list passed a couple hundred items.
// The category row uses the same "scroll, don't crush" pattern as the app
// sidebar nav (see AppLayout.scss's mobile breakpoint): chips never shrink
// below a tappable size, the row scrolls horizontally instead.
.ingredient-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  // Every clickable chip/card below is a plain `<button>` with no text to
  // actually select — without this, a click that moves even a pixel (a
  // fast click, a trackpad) is read as a text-selection drag instead, and
  // the browser's native selection highlight paints over the intended
  // `.active` state. Reads as "the selection styling is flaky" from the
  // outside; this is the actual cause, not the `.active` rules themselves.
  user-select: none;
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);

  &__search {
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    input {
      flex: 1 1 auto;
      // Own min-width: 0 (not just relying on the flex row's) — same
      // shrink-to-fit gotcha as `.disliked-ingredients-field`, belt and
      // suspenders since a text input's natural min width is its content.
      min-width: 0;
      padding: var(--space-sm);
      font-family: var(--font-body);
      font-size: var(--font-size-base);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-base);
      background: var(--color-surface-alt);
      color: var(--color-text);
      // Undo the container's `user-select: none` — that rule exists for
      // the chip/card buttons, not this text input; a search box the user
      // can't select/copy text from would be its own bug.
      user-select: text;
    }
  }

  // Settings menu for the allergen/diet badge rows on every card below —
  // trailing the search input. A single gear button + labeled checkboxes
  // (not two bare icon-only toggles, the earlier design here) — an icon
  // alone couldn't say clearly enough which badge row it hid.
  &__display-options {
    position: relative;
    flex-shrink: 0;
  }

  &__display-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);

    svg {
      width: 1.5rem;
      height: 1.5rem;
    }

    &:hover {
      border-color: var(--color-primary);
      color: var(--color-text);
    }

    &.active {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }
  }

  // Anchored below-right of the toggle — same transient-overlay reasoning
  // as `.app-sidebar__account-menu` (AppLayout.scss).
  &__display-menu {
    position: absolute;
    z-index: 10;
    top: calc(100% + var(--space-xs));
    right: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-md);

    // Box/checkmark look comes from the app-wide "selectable card" rule in
    // global.scss (`label:has(> input[type="checkbox"])`) — this only adds
    // what's specific to sitting inside a dropdown menu.
    label {
      font-size: var(--font-size-sm);
      white-space: nowrap;

      // The global rule trails the checkmark at the far right (`margin-left:
      // auto`) — reads well as a selected chip in a grid (AllergySelect),
      // but a vertical settings-menu list reads conventionally the other
      // way: checkbox leading, label text after it. `.check-mark` already
      // sits right after the (visually hidden) `<input>` and before the
      // text in markup, so undoing the auto margin alone puts it there.
      .check-mark {
        margin-left: 0;
      }
    }
  }

  &__categories {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    padding-bottom: var(--space-xs);
  }

  &__category {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    appearance: none;
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);

    svg {
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
    }

    &:hover {
      border-color: var(--color-primary);
      color: var(--color-text);
    }

    &.active {
      border-color: var(--color-primary);
      background: var(--color-primary);
      color: #fff;
    }
  }

  // Second-tier drill-down, shown once a main category is picked — same
  // "scroll, don't crush" row as `&__categories` above, but visually
  // subordinate: smaller, and using `--color-tag` (not `--color-primary`)
  // for its active state so the two levels stay legible at a glance.
  &__subcategories {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    padding-bottom: var(--space-xs);
    margin-top: calc(var(--space-xs) * -1);
  }

  &__subcategory {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    appearance: none;
    padding: 2px var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);

    svg {
      flex-shrink: 0;
      width: 0.85rem;
      height: 0.85rem;
    }

    &:hover {
      border-color: var(--color-tag);
      color: var(--color-text);
    }

    &.active {
      border-color: var(--color-tag);
      background: var(--color-tag);
      color: var(--color-tag-ink);
    }
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: var(--space-xs);
    max-height: 18rem;
    overflow-y: auto;
    padding: 2px;
  }

  &__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-surface-alt);
    color: var(--color-text);

    &:hover {
      border-color: var(--color-primary);
      background: var(--color-surface);
    }
  }

  &__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      width: 1.75rem;
      height: 1.75rem;
    }
  }

  &__card-name {
    font-size: var(--font-size-sm);
  }

  // Now a container (not a bare `<p>`) — the "aucun ingrédient trouvé"
  // message plus, when the picker allows it, an "ajouter « … » comme
  // ingrédient à compléter" escape-hatch button stacked under it.
  &__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;

    p {
      margin: 0;
    }
  }

  &__add-placeholder {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-surface);
    color: var(--color-text);

    &:hover {
      border-color: var(--color-accent);
      color: var(--color-accent);
    }
  }
}

// --- Step list editor -----------------------------------------------------
.step-list-editor {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    counter-reset: step;
  }

  &__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-base);
    counter-increment: step;

    &::before {
      content: counter(step);
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      margin-top: var(--space-xs);
      font-size: var(--font-size-xs);
      font-weight: 600;
      color: #fff;
      background: var(--color-primary);
      border-radius: 50%;
    }
  }

  &__reorder {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;

    button {
      padding: 0.1rem 0.4rem;
      line-height: 1;
      cursor: pointer;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-base);
      background: var(--color-surface);

      &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
    }
  }

  &__fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    textarea,
    input {
      padding: var(--space-sm);
      font-family: var(--font-body);
      font-size: var(--font-size-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-base);
      background: var(--color-background);
      color: var(--color-text);
      resize: vertical;
    }
  }

  &__remove {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-surface);
    color: var(--color-text-muted);

    &:hover {
      color: var(--color-error);
      border-color: var(--color-error);
    }
  }

  &__add {
    margin-top: var(--space-sm);
    padding: 0.5rem var(--space-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-base);
    background: none;
    color: var(--color-primary);

    &:hover {
      border-color: var(--color-primary);
    }
  }
}

// --- Disliked-ingredients field (preferences page) ---------------------------
// A search-and-add + removable-chips field, same idea as the recipe form's
// ingredient picker but without quantity/unit — see
// `features/profile/DislikedIngredientsField.tsx`.
.disliked-ingredients-field {
  // `<fieldset>` carries a browser-default `min-width: min-content` that
  // ordinary block elements don't — it refuses to shrink for its content,
  // so `.ingredient-picker__grid` below (a `repeat(auto-fill, …)` grid)
  // never gets narrow enough to wrap and blows out the whole page's width
  // instead. Reset it back to the normal shrinkable behavior.
  min-width: 0;
  border: none;
  padding: 0;
  margin: var(--space-md) 0 0;

  legend {
    padding: 0 0 var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
  }

  &__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0 0 var(--space-sm);
    padding: 0;
    list-style: none;
  }

  &__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    font-size: var(--font-size-sm);
    background: var(--color-surface-alt);
    border-radius: var(--radius-pill);

    svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }

    button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.1rem;
      height: 1.1rem;
      padding: 0;
      font-size: var(--font-size-xs);
      line-height: 1;
      color: var(--color-text-muted);
      background: none;
      border: none;
      border-radius: 50%;
      cursor: pointer;

      &:hover {
        background: var(--color-border);
        color: var(--color-text);
      }
    }
  }
}