/*
 * Cookbase design tokens — Optics overrides.
 * Source of truth: cookbase_brand/cookbase_design_system.html (rendered :root).
 *
 * Optics derives full color scales (+ "on" colors) for PRIMARY and NEUTRAL
 * from their h/s/l anchors automatically. The SECONDARY scale is NOT generated
 * in Optics 2.3.1, so we define it explicitly below.
 *
 * Part of the optics_overrides bundle, loaded after the Optics CDN <link>
 * so these win the cascade.
 */
:root {
  /* ── Anchor hues ─────────────────────────────────────────── */
  --op-color-primary-h: 133; /* Garden Sage */
  --op-color-primary-s: 16%;
  --op-color-primary-l: 55%;

  --op-color-secondary-h: 25; /* Clay */
  --op-color-secondary-s: 50%;
  --op-color-secondary-l: 51%;

  --op-color-neutral-h: 25; /* Warm Stone → Oat / Cream at the top of the scale */
  --op-color-neutral-s: 28%;
  --op-color-neutral-l: 44%;

  --op-color-primary-base: var(--op-color-primary-original);

  /* ── Typography ──────────────────────────────────────────── */
  --op-font-family-body: "DM Sans", sans-serif;
  --op-font-family-display: "Playfair Display", serif;

  /*
   * Page surface (Cream) is left to Optics: in light theme it already sets
   * --op-color-background to --op-color-neutral-plus-eight, which our neutral
   * anchor resolves to hsl(25 28% 98%) — the brand Cream.
   */

  /* ── Secondary (Clay) full scale — not derived by Optics 2.3.1 ── */
  --op-color-secondary-original: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) var(--op-color-secondary-l));
  --op-color-secondary-plus-max: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%);
  --op-color-secondary-plus-eight: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 98%);
  --op-color-secondary-plus-seven: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 96%);
  --op-color-secondary-plus-six: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 94%);
  --op-color-secondary-plus-five: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 90%);
  --op-color-secondary-plus-four: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 84%);
  --op-color-secondary-plus-three: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 70%);
  --op-color-secondary-plus-two: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 64%);
  --op-color-secondary-plus-one: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 42%);
  --op-color-secondary-base: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 36%);
  --op-color-secondary-minus-one: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 34%);
  --op-color-secondary-minus-two: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 32%);
  --op-color-secondary-minus-three: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 28%);
  --op-color-secondary-minus-four: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 24%);
  --op-color-secondary-minus-five: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 20%);
  --op-color-secondary-minus-six: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 16%);
  --op-color-secondary-minus-seven: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 8%);
  --op-color-secondary-minus-eight: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 4%);
  --op-color-secondary-minus-max: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 0%);
  --op-color-secondary-on-plus-max: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 4%);
  --op-color-secondary-on-plus-eight: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 4%);
  --op-color-secondary-on-plus-seven: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 8%);
  --op-color-secondary-on-plus-six: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 16%);
  --op-color-secondary-on-plus-five: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 20%);
  --op-color-secondary-on-plus-four: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 16%);
  --op-color-secondary-on-plus-three: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 8%);
  --op-color-secondary-on-plus-two: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 4%);
  --op-color-secondary-on-plus-one: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%);
  --op-color-secondary-on-base: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%);
  --op-color-secondary-on-minus-one: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 98%);
  --op-color-secondary-on-minus-two: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 94%);
  --op-color-secondary-on-minus-three: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 90%);
  --op-color-secondary-on-minus-four: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 88%);
  --op-color-secondary-on-minus-five: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 88%);
  --op-color-secondary-on-minus-six: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 86%);
  --op-color-secondary-on-minus-seven: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 88%);
  --op-color-secondary-on-minus-eight: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 92%);
  --op-color-secondary-on-minus-max: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 100%);
}
/*
 * Global base for Optics-rendered pages (the optics.html.erb layout).
 * Component styles live in ./components; this is for app-shell + utilities.
 */

/* Display utility — kept for compatibility with feature JS that toggles
 * `.hidden` (e.g. the scrape loading indicator). */
.hidden {
  display: none;
}

[popover] {
  margin: 0;
  border: none;
  color: inherit;
}

/* Visually hides content while keeping it available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Flash messages, stacked under the navbar. */
.flash-messages {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  padding: var(--op-space-small) var(--op-space-large) 0;
}

/* Header nav — collapses into a hamburger menu on mobile, where it also
 * picks up any page-specific actions via content_for(:page_actions). */
.navbar__menu {
  display: none;
}

.navbar__menu summary {
  list-style: none;
}

.navbar__menu summary::-webkit-details-marker {
  display: none;
}

.navbar__menu-panel {
  position: absolute;
  top: calc(100% + var(--op-space-x-small));
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-3x-small);
  width: max-content;
  max-width: calc(100vw - var(--op-space-large) * 2);
  padding: var(--op-space-x-small);
  background: var(--op-color-background);
  border-radius: var(--op-radius-medium);
  box-shadow:
    var(--op-border-all) var(--op-color-neutral-plus-five),
    var(--op-shadow-medium);
}

.navbar__menu-panel .btn {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
  background-color: var(--op-color-background);
  color: var(--op-color-on-background);
  box-shadow: none;
}

.navbar__menu-divider {
  border: none;
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  margin: var(--op-space-x-small) 0;
}

/* var(--op-breakpoint-small) */
@media (max-width: 768px) {
  .navbar .navbar__content--justify-end {
    display: none;
  }

  .navbar__menu {
    display: block;
    position: relative;
    margin-left: auto;
  }
}
.alert {
  &.alert--muted {
    &.alert--notice {
      background: var(--op-color-primary-plus-five);
      color: var(--op-color-primary-on-plus-five);
    }
  }
}
.navbar {
  --_op-navbar-brand-height: calc(var(--op-size-unit) * 16); /* 64px */

  .navbar__brand {
    padding-block-end: var(--op-space-small);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand__logo {
  --_cb-brand-height: calc(var(--op-size-unit) * 16); /* 64px */

  block-size: var(--_cb-brand-height);
  display: block;
  width: auto;
}
/*
 * Button overrides.
 *
 * Tweaks to Optics' `.btn` and its modifiers. Loaded via the
 * `require_tree ./optics/components` in ../../optics_overrides.css.
 */

/* Deemphasize no-border destructive buttons: drop the danger fill and carry
 * that danger color on the icon/label instead. */
.btn.btn--no-border {
  &.btn--primary {
    &:hover {
      color: var(--op-color-primary-base);
    }
  }

  &.btn--destructive {
    background-color: transparent;
    box-shadow: none;
    color: var(--op-color-alerts-danger-base);

    &:hover {
      background-color: var(--op-color-alerts-danger-plus-six);
      box-shadow: none;
      color: var(--op-color-alerts-danger-base);
    }
  }
}
.modal {
  padding: 0;
  border: none;
  border-radius: var(--op-radius-large);
  box-shadow: 0 8px 32px hsl(0 0% 0% / 0.2);
  max-width: min(48rem, calc(100vw - 2rem));
  width: 100%;
}

.modal::backdrop {
  background: hsl(0 0% 0% / 0.5);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--op-space-medium) var(--op-space-large);
  border-bottom: var(--op-border-all) var(--op-color-border);
}

.modal__title {
  margin: 0;
  font-family: var(--op-font-family-display);
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-x-large);
}

.modal__body {
  padding: var(--op-space-large);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}

/* ── Scrape form ──────────────────────────────────────────── */
.scrape-form {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}

.scrape-form__actions {
  display: flex;
  justify-content: flex-end;
}
.form-group {
  &.form-group--compact {
    padding: 0;
  }

  &:has(.form-group__action) .form-label {
    grid-column: 1;
  }

  .form-group__action {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    font-size: var(--op-font-x-small);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}
/*
 * landing — public marketing page (pages#index).
 */
.landing {
  display: flex;
  flex-direction: column;
}

/* ── Hero ─────────────────────────────────────────────── */
.landing__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--op-space-4x-large) var(--op-space-large);
  min-height: 80vh;
  gap: var(--op-space-medium);
}

.landing__hero-headline {
  font-family: var(--op-font-family-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: var(--op-font-weight-bold);
  line-height: 1.1;
  color: var(--op-color-on-background);
  margin: 0;
}

.landing__hero-accent {
  color: var(--op-color-primary-original);
}

.landing__hero-subtext {
  font-size: var(--op-font-large);
  color: var(--op-color-neutral-base);
  max-width: 46ch;
  margin: 0;
}

.landing__hero-actions {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--op-space-x-small);
}

/* ── Features ─────────────────────────────────────────── */
.landing__features {
  padding: var(--op-space-4x-large) var(--op-space-large);
  background: var(--op-color-primary-plus-eight);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-large);
}

.landing__features-header {
  text-align: center;
}

.landing__features-title {
  font-family: var(--op-font-family-display);
  font-size: var(--op-font-x-large);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-on-background);
  margin: 0;
}

.landing__features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--op-space-large);
}

.landing__feature {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  padding: var(--op-space-large);
}

.landing__feature-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--op-color-primary-plus-six);
  margin-bottom: var(--op-space-x-small);
  flex-shrink: 0;

  .material-symbols-outlined {
    font-size: 1.75rem;
    color: var(--op-color-primary-original);
    line-height: 1;
  }
}

.landing__feature-title {
  font-family: var(--op-font-family-display);
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-on-background);
  margin: 0;
}

.landing__feature-body {
  color: var(--op-color-neutral-base);
  margin: 0;
  font-size: var(--op-font-small);
  line-height: 1.6;
}

/* ── CTA ──────────────────────────────────────────────── */
.landing__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--op-space-medium);
  padding: var(--op-space-4x-large) var(--op-space-large);
  text-align: center;
}

.landing__cta-title {
  font-family: var(--op-font-family-display);
  font-size: var(--op-font-x-large);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-on-background);
  margin: 0;
}

.landing__cta-body {
  color: var(--op-color-neutral-base);
  margin: 0;
}

/* ── Footer ───────────────────────────────────────────── */
.landing__footer {
  padding: var(--op-space-large);
  text-align: center;
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-plus-three);
  border-top: 1px solid var(--op-color-border);
}

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .landing__hero {
    min-height: auto;
    padding: var(--op-space-2x-large) var(--op-space-medium);
  }

  .landing__hero-headline {
    font-size: 2.5rem;
  }

  .landing__features {
    padding: var(--op-space-2x-large) var(--op-space-medium);
  }

  .landing__features-grid {
    grid-template-columns: 1fr;
  }

  .landing__cta {
    padding: var(--op-space-2x-large) var(--op-space-medium);
  }
}
/*
 * login — centered login card layout, used by sessions#new.
 */
.app__login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  margin-inline: auto;
  padding-block: var(--op-space-large);
  padding-inline: var(--op-space-large);
  inline-size: 100%;
  max-inline-size: calc(116 * var(--op-size-unit));
}

.card__description {
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-base);
  margin: 0;
}

.card--login {
  .card__header {
    display: flex;
    justify-content: center;
    padding-block-end: var(--op-space-small);
  }

  .card__body {
    padding-block: 0;
  }

  .card__footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--op-space-x-small);
  }
}

.app__login .op-split {
  margin-block-start: var(--op-space-x-small);
}
/*
 * recipe-book-card — a recipe book tile with the gingham pattern. The stripe
 * color is set per-book via the `gingham` Stimulus controller (--gingham-rgb).
 */
.recipe-book-card {
  --gingham-base: var(--op-color-neutral-plus-eight);
  --gingham-rgb: 122 158 130; /* default; overridden per book */

  position: relative;
  display: flex;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--op-radius-medium);
  box-shadow: var(--op-border-all) var(--op-color-border);
  background-color: var(--gingham-base);
  background-image:
    repeating-linear-gradient(
      45deg,
      rgb(var(--gingham-rgb) / 0.2) 0 12px,
      transparent 12px 24px
    ),
    repeating-linear-gradient(
      -45deg,
      rgb(var(--gingham-rgb) / 0.2) 0 12px,
      transparent 12px 24px
    );
  transition: transform 0.15s ease;
}

.recipe-book-card:hover {
  transform: scale(1.02);
}

.recipe-book-card__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--op-space-medium);
  padding: var(--op-space-large) var(--op-space-small) var(--op-space-small);
  text-decoration: none;
  color: var(--op-color-on-background);
}

.recipe-book-card__title {
  margin-top: var(--op-space-medium);
  padding: var(--op-space-2x-small) var(--op-space-small);
  border-radius: var(--op-radius-medium);
  background: var(--op-color-neutral-plus-max);
  box-shadow: var(--op-shadow-2x-small);
  font-family: var(--op-font-family-display);
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-normal);
  text-align: center;
}

.recipe-book-card__count {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-3x-small);
  padding: var(--op-space-3x-small) var(--op-space-x-small);
  border-radius: var(--op-radius-pill);
  background: rgb(255 255 255 / 0.72);
  color: var(--op-color-neutral-plus-one);
  font-size: var(--op-font-x-small);
}

.recipe-book-card__count-number {
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-on-background);
}

.recipe-book-card__edit {
  position: absolute;
  top: var(--op-space-x-small);
  right: var(--op-space-x-small);
  z-index: 1;
  background: rgb(255 255 255 / 0.8);
}

@media (hover: hover) {
  .recipe-book-card__edit {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .recipe-book-card:hover .recipe-book-card__edit,
  .recipe-book-card:focus-within .recipe-book-card__edit {
    opacity: 1;
  }
}
.recipe-book-form-page {
  padding-block: var(--op-space-large);
  max-width: 36rem;
}

.recipe-book-form-page__title {
  font-family: var(--op-font-family-display);
  font-weight: var(--op-font-weight-normal);
  text-align: center;
  margin-block: 0 var(--op-space-large);
}

.recipe-book-form {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-large);
}

.recipe-book-form__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--op-space-small);
}

/* ── Color picker ─────────────────────────────────────────── */
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-small);
}

.color-picker__option {
  cursor: pointer;
}

.color-picker__swatch {
  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: var(--op-radius-medium);
  border: 1px solid hsl(0 0% 0% / 0.12);
  background-color: white;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgb(var(--swatch-rgb) / 0.2) 0 10px,
      transparent 10px 20px
    ),
    repeating-linear-gradient(
      -45deg,
      rgb(var(--swatch-rgb) / 0.2) 0 10px,
      transparent 10px 20px
    );
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s ease;
}

.color-picker__radio:checked + .color-picker__swatch {
  outline-color: rgb(var(--swatch-rgb));
}
/*
 * recipe-card — a recipe tile (square image + title) in the index grid.
 */
.recipe-card {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  text-decoration: none;
  color: var(--op-color-on-background);
  transition: transform 0.15s ease;
}

.recipe-card:hover {
  transform: scale(1.02);
}

.recipe-card__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--op-radius-medium);
  overflow: hidden;
  background: linear-gradient(
    150deg,
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 96%) 0%,
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 92%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--op-border-all) var(--op-color-border);
}

.recipe-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recipe-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.72);
  box-shadow: var(--op-border-all) var(--op-color-border);
}

.recipe-card__placeholder .material-symbols-outlined {
  font-size: 2rem;
  color: var(--op-color-primary-base);
}

.recipe-card__title {
  margin: 0;
  font-family: var(--op-font-family-display);
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-normal);
  line-height: var(--op-line-height-dense);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 * recipe-form — new/edit recipe form. BEM, Optics tokens only.
 */

/* ── Page wrapper ─────────────────────────────────────────── */
.recipe-form-page {
  padding-block: var(--op-space-large);
  animation: recipe-form-page-in 0.3s ease-out;
}

@keyframes recipe-form-page-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.recipe-form-page__back {
  margin-bottom: var(--op-space-small);
}

.recipe-form-page__title {
  font-family: var(--op-font-family-display);
  font-weight: var(--op-font-weight-normal);
  text-align: center;
  margin-block: 0 var(--op-space-large);
}

/* ── Form layout ──────────────────────────────────────────── */
.recipe-form {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-large);
}

/* ── Image upload ─────────────────────────────────────────── */
.recipe-form__image-upload {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-large);
}

.recipe-form__image-preview {
  flex: 0 0 16rem;
  width: 16rem;
  height: 16rem;
  object-fit: cover;
  border-radius: var(--op-radius-medium);
  border: var(--op-border-all) var(--op-color-border);
  display: block;
}

.recipe-form__image-placeholder {
  flex: 0 0 16rem;
  width: 16rem;
  height: 16rem;
  border-radius: var(--op-radius-medium);
  background: linear-gradient(
    150deg,
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 96%) 0%,
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 92%) 100%
  );
  box-shadow: var(--op-border-all) var(--op-color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-form__image-placeholder .material-symbols-outlined {
  font-size: 4rem;
  color: var(--op-color-primary-base);
}

.recipe-form__image-controls {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}

.recipe-form__image-types {
  margin: 0;
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-base);
}

/* ── Ingredients section ──────────────────────────────────── */
.recipe-form__section {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}

.recipe-form__section-title {
  margin: 0;
}

.recipe-form__ingredients {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}

.recipe-form__ingredient-add {
  padding-block-start: var(--op-space-2x-small);
}

/* ── Ingredient row ───────────────────────────────────────── */
.ingredient-fields {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}

.ingredient-fields__input {
  flex: 1;
}

/* ── Form actions (submit) ────────────────────────────────── */
.recipe-form__actions {
  display: flex;
  justify-content: flex-end;
}
/*
 * recipe-index — the recipes index page layout: a sticky search/tags sidebar
 * beside the recipe grid. BEM, Optics tokens only.
 */
.recipe-index {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  padding: var(--op-space-large);
}

/* Toolbar: search (capped width), Filters toggle, action buttons */
.recipe-index__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--op-space-small);
}

.recipe-index__search-form {
  flex: 0 1 22rem;
  min-width: 0;
}

.recipe-index__search-form .form-group {
  margin: 0;
}

.recipe-index__search-form .search-input {
  width: 100%;
}

.recipe-index__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-small);
  margin-left: auto;
}

/* Filters toggle button — anchors the popover panel beneath it */
.recipe-index__filters-toggle {
  anchor-name: --recipe-filters-anchor;
  flex-shrink: 0;
}

.recipe-index__filters-count {
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--op-space-large);
  min-width: var(--op-space-large);
  padding-inline: var(--op-space-x-small);
  border-radius: var(--op-radius-pill);
  background: var(--op-color-secondary-plus-one);
  color: var(--op-color-secondary-on-plus-one);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
}

.recipe-index__filters-count--active {
  visibility: visible;
}

.recipe-index__filters-chevron {
  transition: var(--op-transition-accordion);
}

.recipe-index__filters-toggle:has(~ #recipe-filters-panel:popover-open)
  .recipe-index__filters-chevron {
  rotate: 180deg;
}

/* Filters panel — native popover, anchored below the Filters toggle.
 * Layout is gated on :popover-open: an unconditional `display` here would
 * override the UA stylesheet's `[popover]:not(:popover-open) { display: none }`,
 * since author rules always beat UA rules regardless of specificity. */
.recipe-index__filters-panel {
  position-anchor: --recipe-filters-anchor;
  position-area: bottom;
  position-try-fallbacks: flip-block;
  inset: auto;
  margin: var(--op-space-x-small) 0 0;
  max-width: min(28rem, calc(100vw - var(--op-space-large) * 2));
  padding: var(--op-space-medium);
  border-radius: var(--op-radius-medium);
  background: var(--op-color-background);
  box-shadow:
    var(--op-border-all) var(--op-color-neutral-plus-five),
    var(--op-shadow-medium);
}

.recipe-index__filters-panel:popover-open {
  display: block;
}

.recipe-index__filters-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--op-space-x-small);
}

.recipe-index__filters-panel::backdrop {
  background: rgb(0 0 0 / var(--op-opacity-overlay));
}

.recipe-index__tags-title {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-bold);
  margin: 0 var(--op-space-2x-small) 0 0;
}

.recipe-index__back {
  margin-bottom: var(--op-space-small);
}

/* Recipe + book card grid */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--op-space-large);
}

/* Empty state — shown when the recipe grid has nothing to display */
.recipe-index__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--op-space-x-large);
  text-align: center;
  gap: var(--op-space-small);
  inline-size: fit-content;
  margin-inline: auto;
}

.recipe-index__empty-icon {
  font-size: 4rem;
  color: var(--op-color-neutral-plus-three);
  line-height: 1;
}

.recipe-index__empty-title {
  font-family: var(--op-font-family-display);
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-on-background);
  margin: 0;
}

.recipe-index__empty-body {
  color: var(--op-color-neutral-base);
  font-size: var(--op-font-small);
  max-width: 30ch;
}

.recipe-index__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--op-space-small);
  margin-top: var(--op-space-x-small);
}

/* var(--op-breakpoint-small) */
@media (max-width: 768px) {
  .recipe-index {
    padding: var(--op-space-medium);
    overflow-x: hidden;
  }

  .recipe-index__search-form {
    flex: 1 1 auto;
  }

  /* Actions move into the header's hamburger menu on mobile (see
   * content_for(:page_actions) in this view and app/views/layouts/optics.html.erb). */
  .recipe-index__actions {
    display: none;
  }

  .recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--op-space-small);
  }
}
.recipe-show {
  /* max-inline-size: var(--op-breakpoint-x-large); */
  padding-block: var(--op-space-large);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-large);
}

.recipe-show__back {
  margin-bottom: calc(-1 * var(--op-space-x-small));
}

/* ── Hero ──────────────────────────────────────────────────── */
.recipe-show__hero {
  display: flex;
  gap: var(--op-space-large);
  align-items: center;
}

.recipe-show__hero-media {
  flex: 0 0 16rem;
}

.recipe-show__hero-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--op-radius-medium);
  display: block;
}

.recipe-show__hero-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--op-radius-medium);
  background: linear-gradient(
    150deg,
    hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 96%) 0%,
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 92%) 100%
  );
  box-shadow: var(--op-border-all) var(--op-color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-show__hero-placeholder__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.72);
  box-shadow: var(--op-border-all) var(--op-color-border);
}

.recipe-show__hero-placeholder__disc .material-symbols-outlined {
  font-size: 3rem;
  color: hsl(var(--op-color-secondary-h) var(--op-color-secondary-s) 58%);
}

.recipe-show__hero-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}

.recipe-show__eyebrow {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-medium);
  letter-spacing: var(--op-letter-spacing-label);
  text-transform: uppercase;
  color: var(--op-color-secondary-base);
  text-decoration: none;
}

a.recipe-show__eyebrow:hover {
  text-decoration: underline;
}

.recipe-show__title {
  margin: 0;
  font-family: var(--op-font-family-display);
  font-weight: var(--op-font-weight-normal);
  line-height: var(--op-line-height-dense);
}

.recipe-show__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-x-small);
}

.recipe-show__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-x-small);
  margin-top: var(--op-space-x-small);
}

/* ── Two-column body ───────────────────────────────────────── */
.recipe-show__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--op-space-large);
  align-items: start;
}

/* Stretch the sidebar cell to the row height so the sticky card below has
 * room to travel as the (taller) directions column scrolls. */
.recipe-show__sidebar {
  align-self: stretch;
}

/* The ingredients card pins to the viewport and scrolls internally when the
 * list is long, so the heading + scale scroll past inside it. */
.recipe-show__ingredients {
  position: sticky;
  top: var(--op-space-large);
  max-height: calc(100vh - 2 * var(--op-space-large));
  overflow-y: auto;
}

.recipe-show__main {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-large);
  min-width: 0;
}

.recipe-show__panel-title {
  margin: 0 0 var(--op-space-medium);
  font-family: var(--op-font-family-display);
  font-weight: var(--op-font-weight-normal);
}

.recipe-show__prose {
  line-height: var(--op-line-height-base, 1.6);
}

.recipe-show__source-link {
  word-break: break-all;
}

/* ── Scale slider ──────────────────────────────────────────── */
.recipe-scale {
  margin-bottom: var(--op-space-medium);
  padding-bottom: var(--op-space-medium);
  border-bottom: var(--op-border-all) var(--op-color-border);
}

.recipe-scale__label {
  display: block;
  margin-bottom: var(--op-space-x-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-medium);
}

.recipe-scale__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--op-color-primary-plus-five);
  cursor: pointer;
}

.recipe-scale__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--op-color-primary-base);
  border: 2px solid var(--op-color-primary-on-base);
  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.25);
}

.recipe-scale__input::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--op-color-primary-base);
  border: 2px solid var(--op-color-primary-on-base);
  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.25);
}

.recipe-scale__input:focus-visible {
  outline: 2px solid var(--op-color-primary-base);
  outline-offset: 4px;
}

.recipe-scale__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--op-space-2x-small);
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-base);
}

/* ── Ingredient list ───────────────────────────────────────── */
.ingredient-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--op-radius-medium);
  overflow: hidden;
}

.ingredient-list__item {
  display: flex;
  gap: var(--op-space-x-small);
  padding: var(--op-space-x-small) var(--op-space-small);
  font-size: var(--op-font-small);
}

.ingredient-list__item:nth-child(odd) {
  background: var(--op-color-primary-plus-seven);
}

.ingredient-list__qty {
  font-weight: var(--op-font-weight-medium);
  color: var(--op-color-secondary-base);
  white-space: nowrap;
}

.ingredient-list__name s {
  color: var(--op-color-neutral-plus-three);
  margin-right: var(--op-space-2x-small);
}

/* ── Directions ────────────────────────────────────────────── */
.recipe-directions {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}

.recipe-directions__step {
  counter-increment: step;
  display: flex;
  align-items: baseline;
  gap: var(--op-space-small);
  line-height: var(--op-line-height-base, 1.6);
}

.recipe-directions__step::before {
  content: counter(step);
  flex: 0 0 1.75rem;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  color: var(--op-color-secondary-base);
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-medium);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: 1;
}

/* ── Mobile Tabs ───────────────────────────────────────────── */
.recipe-show__mobile-tabs {
  display: none;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 48rem) {
  .recipe-show {
    padding-block: var(--op-space-medium);
  }

  .recipe-show__hero {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .recipe-show__hero-media {
    flex-basis: auto;
    max-width: 18rem;
    margin: 0 auto;
  }

  .recipe-show__tags,
  .recipe-show__actions {
    justify-content: center;
  }

  .recipe-show__layout {
    grid-template-columns: 1fr;
  }

  .recipe-show__sidebar {
    position: static;
  }

  .recipe-show__ingredients {
    position: static;
    max-height: none;
  }

  .recipe-show__mobile-tabs {
    display: flex;
    justify-content: center;
  }

  /* Default: Ingredients tab active — show sidebar, hide main */
  [data-controller="recipe-tabs"] .recipe-show__main {
    display: none;
  }

  /* Directions tab active */
  [data-controller="recipe-tabs"][data-active-panel="main"] .recipe-show__main {
    display: flex;
  }
  [data-controller="recipe-tabs"][data-active-panel="main"]
    .recipe-show__sidebar {
    display: none;
  }
}

/* ── Print ─────────────────────────────────────────────────── */
@page {
  margin: 1.5cm;
  size: auto;

  @top-left {
    content: "";
  }
  @top-center {
    content: "";
  }
  @top-right {
    content: "";
  }
  @bottom-left {
    content: "";
  }
  @bottom-center {
    content: "";
  }
  @bottom-right {
    content: "";
  }
}

.recipe-print {
  display: none;
}

@media print {
  html,
  body,
  .app__main {
    block-size: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .app__header,
  .flash-messages,
  .recipe-show {
    display: none !important;
  }

  .recipe-print {
    display: block;
    max-width: 50rem;
    margin: 0 auto;
    padding: var(--op-space-large);
  }

  .recipe-print__title {
    margin: 0 0 var(--op-space-medium);
  }

  .recipe-print__section {
    margin-bottom: var(--op-space-large);
  }

  .recipe-print__heading {
    margin: 0 0 var(--op-space-small);
  }

  .recipe-print__ingredients,
  .recipe-print__directions {
    padding-left: var(--op-space-large);
    display: block;
  }

  .recipe-print__ingredients li,
  .recipe-print__directions li {
    break-inside: avoid;
  }

  .recipe-print__ingredients li + li,
  .recipe-print__directions li + li {
    margin-top: var(--op-space-2x-small);
  }
}
/*
 * Tag overrides + project color families.
 *
 * Tags are rendered as links on the recipe index, so reset the underline.
 * Soft tonal variants come from the brand palette (sage / clay / slate) for
 * cohesive variety instead of a rainbow. Selected filters use Optics'
 * built-in `tag--primary`.
 *
 * The Optics-derived `plus-*` steps are too close to the cream page
 * background to read as distinct colors, so the tint/text pairs below are
 * hand-tuned instead of reused from the generated scale. `slate` uses its
 * own hue (rather than a desaturated clay) so it doesn't read as a muddy,
 * washed-out version of the peach variant next to it.
 */
.tag {
  text-decoration: none;
}

.tag--sage {
  background: hsl(var(--op-color-primary-h) 32% 86%);
  color: hsl(var(--op-color-primary-h) 38% 22%);
}

.tag--clay {
  background: hsl(var(--op-color-secondary-h) 55% 87%);
  color: hsl(var(--op-color-secondary-h) 55% 24%);
}

.tag--slate {
  background: hsl(205 38% 87%);
  color: hsl(205 45% 26%);
}

/* Subtle hover for interactive (link) tags */
.recipe-index__tags .tag {
  transition: filter 0.15s ease;
}

.recipe-index__tags .tag:hover {
  filter: brightness(0.96);
}

.recipe-index__filters-tags .tag {
  --tag-icon-reserve: 1.125rem;
  position: relative;
  padding-inline: calc(var(--op-space-2x-small) + var(--tag-icon-reserve));
}

.recipe-index__filters-tags .tag__remove {
  position: absolute;
  inset-inline-end: var(--op-space-2x-small);
  top: 50%;
  translate: 0 -50%;
  visibility: hidden;
}

.recipe-index__filters-tags .tag--primary .tag__remove {
  visibility: visible;
}

.recipe-index__filters-tags .tag--primary .tag__label {
  position: relative;
  inset-inline-start: calc(-1 * var(--tag-icon-reserve));
}
/*
 * Cookbase Optics bundle (project-level).
 *
 * Loaded via stylesheet_link_tag "optics_overrides" AFTER the Optics CDN
 * <link>, so everything here overrides Optics defaults.
 *



 */