/* Styles owned by the recipes lot. Use tokens from app.css only (no hardcoded colors/spacings). */

:root {
  --recipe-hero-ratio: 4 / 3;
  --recipe-hero-ratio-desktop: 21 / 9;
  --recipe-qty-width: 6.5rem;
  --recipe-step-num-size: 1.75rem;
  --recipe-side-width: 22rem;
  --recipe-narrow-width: 44rem;
  --recipe-thumb-size: 6rem;
}

/* ------------------------------------------------------------------------ */
/* Library                                                                  */
/* ------------------------------------------------------------------------ */
.recipes-page {
  padding-bottom: var(--spacing-xl);
}

.recipe-library__toolbar {
  position: relative;
}

.recipe-library__chips {
  padding-block: var(--spacing-2xs);
}

.recipe-library__selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.recipe-library__select {
  min-height: var(--control-height-sm);
  padding-block: var(--spacing-xs);
  font-size: var(--font-size-subhead);
}

.recipe-library__results {
  transition: opacity var(--transition-base);
}

.recipe-library__results.is-loading {
  opacity: 0.55;
}

.recipe-library__more {
  display: flex;
  justify-content: center;
  padding-top: var(--spacing-lg);
}

@media (min-width: 768px) {
  .recipe-library__toolbar {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-md);
  }

  .recipe-library__chips {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    margin: 0;
    padding: var(--spacing-2xs) 0;
  }

  .recipe-library__selects {
    grid-template-columns: repeat(2, minmax(10rem, auto));
  }
}

/* Recipe card additions */
.recipe-card__heart,
.recipe-card-row__heart {
  display: inline-grid;
  place-items: center;
  color: var(--color-red);
}

.recipe-card__heart {
  position: absolute;
  right: var(--spacing-sm);
  bottom: var(--spacing-sm);
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border-radius: 50%;
  background: var(--color-material);
  -webkit-backdrop-filter: var(--blur-material);
  backdrop-filter: var(--blur-material);
}

.recipe-card__heart svg,
.recipe-card-row__heart svg {
  width: 1rem;
  height: 1rem;
}

.recipe-card__heart svg path,
.recipe-card-row__heart svg path {
  fill: currentColor;
}

.recipe-card__rating {
  color: var(--color-orange);
  font-weight: var(--font-weight-semibold);
}

.recipe-card__rating svg path {
  fill: currentColor;
}

.recipe-card-row__placeholder {
  font-size: var(--font-size-title3);
}

/* Toggle chips built on <label class="chip"><input></label> */
.recipe-chip {
  position: relative;
  min-height: var(--control-height-sm);
  scroll-snap-align: start;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.recipe-chip:active {
  transform: scale(0.96);
}

.recipe-chip:has(input:focus-visible) {
  box-shadow: var(--shadow-focus);
}

.recipe-chip-group {
  --cluster-gap: var(--spacing-xs);
}

/* ------------------------------------------------------------------------ */
/* Recipe page                                                              */
/* ------------------------------------------------------------------------ */
.recipe-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-2xl);
}

.recipe-hero {
  position: relative;
  aspect-ratio: var(--recipe-hero-ratio);
  margin: 0 calc(var(--page-gutter) * -1);
  overflow: hidden;
  background: var(--color-surface-2);
}

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

.recipe-hero--empty {
  aspect-ratio: 16 / 7;
}

.recipe-hero__placeholder {
  font-size: var(--font-size-hero);
}

.recipe-page__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-title1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-title);
}

.recipe-page__description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-callout);
  line-height: var(--line-height-base);
}

.recipe-page__eyebrow {
  --cluster-gap: var(--spacing-sm);
}

.recipe-page__eyebrow:empty {
  display: none;
}

.recipe-page__chips {
  --cluster-gap: var(--spacing-xs);
}

.recipe-page__grid {
  display: grid;
  gap: var(--spacing-xl);
  grid-template-areas:
    "ingredients"
    "steps"
    "nutrition"
    "rating"
    "extras";
}

.recipe-page__ingredients { grid-area: ingredients; }
.recipe-page__steps { grid-area: steps; }
.recipe-page__nutrition { grid-area: nutrition; }
.recipe-page__rating { grid-area: rating; }
.recipe-page__extras { grid-area: extras; }

.recipe-page__section-head {
  min-height: var(--control-height);
}

.recipe-page__servings-hint {
  margin: 0;
  padding: 0 var(--spacing-2xs);
}

.recipe-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  cursor: pointer;
}

.recipe-link-button:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .recipe-hero {
    aspect-ratio: var(--recipe-hero-ratio-desktop);
    margin: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }

  .recipe-page__title {
    font-size: var(--font-size-large-title);
  }
}

@media (min-width: 1024px) {
  .recipe-page__grid {
    grid-template-columns: var(--recipe-side-width) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "ingredients steps"
      "nutrition steps"
      "rating steps"
      "extras steps";
    align-items: start;
  }
}

/* Ingredients list with check-off */
.recipe-ingredient {
  cursor: pointer;
}

.recipe-ingredient__qty {
  flex: none;
  width: var(--recipe-qty-width);
  white-space: nowrap;
  color: var(--color-text-secondary);
  font-size: var(--font-size-subhead);
  font-weight: var(--font-weight-semibold);
}

.recipe-ingredient__name {
  flex: 1 1 auto;
  min-width: 0;
  transition: color var(--transition-fast);
}

.recipe-ingredient:has(.recipe-ingredient__check:checked) .recipe-ingredient__name,
.recipe-ingredient:has(.recipe-ingredient__check:checked) .recipe-ingredient__qty {
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}

.recipe-ingredients {
  --list-inset: calc(var(--spacing-md) + 1.6rem + var(--spacing-sm));
}

/* Steps */
.recipe-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.recipe-step {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.recipe-step__num {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--recipe-step-num-size);
  height: var(--recipe-step-num-size);
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-bold);
}

.recipe-step__text {
  margin: 0;
  font-size: var(--font-size-callout);
  line-height: var(--line-height-base);
}

.recipe-express-card svg {
  color: var(--color-orange);
}

.recipe-express-card p {
  margin: 0;
}

/* Nutrition */
.recipe-nutrition__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm) var(--spacing-md);
  margin: 0;
}

.recipe-nutrition__grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-xs);
}

.recipe-nutrition__grid dt {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-text-secondary);
  font-size: var(--font-size-footnote);
}

.recipe-nutrition__grid dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.recipe-nutrition--empty svg {
  flex: none;
  color: var(--color-text-tertiary);
}

.recipe-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.recipe-dot--protein { background: var(--color-protein); }
.recipe-dot--carbs { background: var(--color-carbs); }
.recipe-dot--fat { background: var(--color-fat); }
.recipe-dot--fiber { background: var(--color-fiber); }

/* Ratings and favourite */
.recipe-rating__row {
  min-height: var(--control-height);
}

.recipe-stars .is-on svg path {
  fill: currentColor;
}

.recipe-stars > span:not(.is-on) {
  color: var(--color-text-tertiary);
}

.recipe-favorite {
  display: contents;
}

.recipe-favorite__button.is-on {
  color: var(--color-red);
}

.recipe-favorite__button.is-on svg {
  animation: recipe-pop var(--transition-spring);
}

.recipe-favorite__button.is-on svg path {
  fill: currentColor;
}

@keyframes recipe-pop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.recipe-source {
  display: block;
  color: inherit;
}

.recipe-source:hover {
  text-decoration: none;
}

/* ------------------------------------------------------------------------ */
/* Forms (express sheet, import, detailed form)                             */
/* ------------------------------------------------------------------------ */
.recipe-narrow {
  width: 100%;
  max-width: var(--recipe-narrow-width);
  margin: 0 auto;
  padding-bottom: var(--spacing-2xl);
}

.recipe-switch-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: var(--control-height);
  font-size: var(--font-size-callout);
  cursor: pointer;
}

.recipe-express__toggles {
  --cluster-gap: var(--spacing-xs);
}

.recipe-express__more,
.recipe-form__bulk {
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.recipe-express__summary,
.recipe-form__bulk summary {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 var(--spacing-md);
  color: var(--color-primary);
  font-size: var(--font-size-subhead);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.recipe-express__more-body,
.recipe-form__bulk > .field {
  padding: 0 var(--spacing-md) var(--spacing-md);
}

/* Import */
.recipe-import__busy {
  display: none;
  align-items: center;
  gap: var(--spacing-sm);
}

.recipe-import.is-busy .recipe-import__label {
  display: none;
}

.recipe-import.is-busy .recipe-import__busy {
  display: inline-flex;
}

.recipe-import-frame {
  display: block;
}

.recipe-import-frame[aria-busy="true"] {
  opacity: 0.7;
  transition: opacity var(--transition-base);
}

.recipe-preview__head {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.recipe-preview__media {
  flex: none;
  width: var(--recipe-thumb-size);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}

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

.recipe-preview__title {
  margin: 0;
}

.recipe-preview__cols {
  display: grid;
  gap: var(--spacing-lg);
}

.recipe-preview__list {
  max-height: 18rem;
  overflow-y: auto;
}

.recipe-preview__qty {
  flex: none;
  width: var(--recipe-qty-width);
  color: var(--color-text-secondary);
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
}

.recipe-preview__steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: 0;
  padding-left: var(--spacing-lg);
  font-size: var(--font-size-subhead);
}

.recipe-preview__steps-more {
  list-style: none;
}

@media (min-width: 768px) {
  .recipe-preview__media {
    width: calc(var(--recipe-thumb-size) * 1.6);
  }

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

/* Detailed form */
.recipe-form__times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-sm);
}

.recipe-form__photo {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.recipe-form__photo-preview {
  flex: none;
  width: var(--recipe-thumb-size);
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.recipe-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.recipe-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.recipe-row--step {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.recipe-row__num {
  margin-top: var(--spacing-xs);
}

.recipe-row__fields {
  display: grid;
  flex: 1 1 100%;
  grid-template-columns: minmax(3.5rem, 1fr) minmax(5.5rem, 1.4fr) minmax(0, 3fr);
  gap: var(--spacing-xs);
  min-width: 0;
}

.recipe-row--step .recipe-row__fields {
  display: block;
  flex: 1 1 auto;
}

.recipe-row__fields .input {
  min-height: var(--control-height-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-fill);
  box-shadow: none;
  font-size: var(--font-size-subhead);
}

.recipe-row__fields select.input {
  padding-right: var(--spacing-lg);
  background-position: right var(--spacing-xs) center;
}

.recipe-row__note {
  grid-column: 1 / -1;
}

.recipe-row__tools {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-2xs);
}

.recipe-row--step .recipe-row__tools {
  flex: none;
  flex-direction: column;
}

.recipe-row__optional {
  margin-right: auto;
}

.recipe-row__remove {
  color: var(--color-danger);
}

.recipe-row .field__error {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .recipe-row {
    flex-wrap: nowrap;
    align-items: center;
  }

  .recipe-row__fields {
    grid-template-columns: 4.5rem 7rem minmax(0, 2fr) minmax(0, 1.5fr);
  }

  .recipe-row__note {
    grid-column: auto;
  }

  .recipe-row__tools {
    flex: none;
  }

  .recipe-row__optional {
    margin-right: 0;
  }
}

.recipe-form__bar {
  position: sticky;
  bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--spacing-sm));
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-pill);
  background: var(--color-material);
  -webkit-backdrop-filter: var(--blur-material);
  backdrop-filter: var(--blur-material);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .recipe-form__bar {
    bottom: var(--spacing-md);
  }
}