/* Recipe UI ownership: Ingredients. Responsive rules stay with this owner. */

.page-builder .builder-ingredient-name-field { position: relative; }
.page-builder .builder-ingredient-name-field input { padding-inline-end: 7rem; }
.page-builder .ingredient-recognition {
  position: absolute;
  inset-inline-end: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  max-width: 6rem;
  color: var(--builder-muted);
  font-size: var(--builder-font-compact);
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: auto;
}
.page-builder .ingredient-recognition[data-state="recognized"] { color: var(--builder-success); }
.page-builder .ingredient-recognition[hidden],
.page-builder .has-sub-recipe .ingredient-recognition { display: none; }

/* Compact fields retain screen-reader labels; placeholders identify empty inputs. */
.page-builder #ingredients .ingredient-line.primary .builder-row-field,
.page-builder #ingredients:not(.expanded) .builder-preparation,
.page-builder[data-builder-view="basic"] #ingredients .builder-preparation {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
}
.page-builder #ingredients .ingredient-line.primary .builder-row-field :is(input, select),
.page-builder #ingredients .builder-preparation input {
  width: 100%;
  min-width: 0;
}
.page-builder #ingredients .ingredient-line.primary input::placeholder,
.page-builder #ingredients .builder-preparation input::placeholder { font-style: normal; color: var(--builder-muted); }
@media (max-width: 768px) {
  .page-builder #ingredients .ingredient-line.primary .builder-row-field:has([name$="-ingredient"]) { grid-column: 1 / -1; }
  .page-builder #ingredients .ingredient-line.primary .builder-row-field :is(input, select) { min-height: 44px; }
  .page-builder .builder-ingredient-name-field input { padding-inline-end: 1.5rem; }
  .page-builder .ingredient-recognition {
    position: static;
    transform: none;
    align-self: flex-end;
    max-width: 100%;
  }
}

.ingredient-row input::placeholder { color: var(--builder-ink); font-style: italic; }

.ingredient-row { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0; }

.ingredient-row .drag-handle { cursor: grab; color: var(--builder-muted); padding-right: 0.25rem; user-select: none; margin-top: 0.2rem; background: transparent; border: none; padding: 0 0.25rem 0 0; }

.ingredient-row input[name$="-order"] { display: none; }

.ingredient-row-lines { display: flex; flex-direction: column; gap: 0.35rem; }

.ingredient-line { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.ingredient-line.primary {
  display: grid;
  grid-template-columns: 80px 11rem minmax(0, 1fr) auto auto auto;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

.sub-swap-btn {
    padding: 2px 6px;
    font-size: var(--builder-font-control);
    color: var(--builder-ink); 
    border: 1px solid var(--builder-line);
    background: transparent;
    border-radius: var(--builder-radius-small);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sub-swap-btn:hover {
    background: var(--builder-line);
    color: var(--builder-surface);
}

.ingredient-line.primary input[name$="-quantity"],
.ingredient-line.primary input[name$="-measurement"],
.ingredient-line.primary input[name$="-ingredient"] {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.ingredient-line input[name$="-quantity"], .ingredient-line input[name$="-alt_quantity"] { width: 4rem; }

.ingredient-line select[name$="-measurement"], .ingredient-line input[name$="-measurement"], .ingredient-line select[name$="-alt_unit"], .ingredient-line input[name$="-alt_unit"] { width: 6rem; }

.ingredient-line input[name$="-ingredient"] { width: clamp(10rem, 30vw, 14rem); flex: 1 1 auto; min-width: 0; }

.ingredient-card { position: relative; border: 1px solid var(--builder-line); border-radius: var(--builder-radius-large); padding: 0.25rem 0.35rem; margin-bottom: 0.5rem; background: var(--builder-surface); box-shadow: var(--builder-shadow-surface); }

.ingredient-card:last-child { margin-bottom: 0.25rem; }

/* Share the visible recognition cue's lifecycle; edits clear the whole row. */
.page-builder #recipe-form .ingredient-card:not(.has-sub-recipe):not(:has([data-allergen-badge]:not([hidden]))):has([data-ingredient-recognition][data-state="recognized"]:not([hidden])) {
  background: var(--builder-success-wash);
  border-color: var(--builder-success);
}

.page-builder .ingredient-card:not(.has-sub-recipe):not(:has([data-allergen-badge]:not([hidden]))):has([data-ingredient-recognition][data-state="recognized"]:not([hidden])) .builder-row-field :is(input, select, textarea) {
  background: color-mix(in srgb, var(--builder-success-wash) 65%, var(--builder-surface));
}

.ingredient-card > .allergen-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 1;
  border: 2px solid var(--builder-surface);
  box-sizing: border-box;
  line-height: 1;
}

/* Follow the existing allergen state, including async lookups and cleared rows. */
.page-builder #recipe-form .ingredient-card:has([data-allergen-badge]:not([hidden])) {
  background: var(--builder-allergen-wash);
  border-color: var(--builder-allergen);
}

.page-builder .ingredient-card:has([data-allergen-badge]:not([hidden])) .builder-row-field :is(input, select, textarea) {
  background: var(--builder-allergen-field);
}

.ingredient-card .ingredient-row { display: flex; align-items: center; gap: 0.35rem; }

.ingredient-card .ingredient-row-lines { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }

.ingredient-row-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
}

.ingredient-row-actions .delete-ingredient {
  margin-left: 0;
}

.ingredient-score-row {
  --ing-score-col-width: 5.5rem;
  --ing-score-control-height: 1.85rem;
}

.ingredient-score-row .ing-score-cell {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: var(--ing-score-col-width);
  flex: 0 0 var(--ing-score-col-width);
}

.ingredient-score-row .ing-logistics-cell { justify-content: flex-end; }

.ingredient-score-row .ing-logistics-cell { width: 6.5rem; flex: 0 0 6.5rem; }

.ingredient-score-row .logistics-open {
  width: 100%;
  white-space: nowrap;
  font-size: var(--builder-font-compact);
  padding: 0.2rem 0.35rem;
  height: var(--ing-score-control-height);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ingredient-score-row .ingredient-score {
  width: 100%;
  min-width: 0;
  height: var(--ing-score-control-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  line-height: 1;
}

.ingredient-cost-per-unit-override:read-only,
.ingredient-total-cost-override:read-only {
  background: var(--gray-1);
  opacity: 0.8;
  cursor: not-allowed;
}

.ingredient-score {
  display: inline-block;
  padding: 0.15rem 0.3rem;
  border: 1.5px solid var(--line);
  border-radius: var(--builder-radius-small);
  background: var(--gray-1);
  color: var(--ink);
  font-size: var(--builder-font-compact);
  min-width: 2.2rem;
  text-align: center;
  font-weight: 600;
  line-height: 1.1;
}

.ingredient-card .delete-ingredient { margin-left: 0.5rem; white-space: nowrap; }

.ing-table { width: 100%; border-collapse: collapse; font-size: var(--builder-font-working); }

.ing-table th, .ing-table td { padding: 0.45rem 0.35rem; border-bottom: 1px solid var(--builder-line); text-align: left; }

.ing-table th { font-weight: 700; background: var(--builder-surface); }

#expand-ingredients-btn {
  padding: 0.2rem 0.5rem;
  margin-left: 0.75rem;
}

.main-content > .section-heading + #ingredients {
  margin-top: -0.5rem;
}

.main-content > #ingredients + .mt-0 {
  margin-top: -0.8rem;
}

.builder-workflow-panel > .section-heading + #ingredients {
  margin-top: -0.5rem;
}

.builder-workflow-panel > #ingredients + .mt-0 {
  margin-top: -0.8rem;
}

.ingredient-secondary-line {
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#lib-list > [hx-swap-oob] { display: none; }

@media (min-width: 769px) {
  :is(.page-builder[data-builder-view="basic"] #ingredients, .page-builder #ingredients:not(.expanded)) .ingredient-row { flex-wrap: nowrap; align-items: center; }
  :is(.page-builder[data-builder-view="basic"] #ingredients, .page-builder #ingredients:not(.expanded)) .ingredient-row-lines {
    display: grid;
    grid-template-columns: minmax(16rem, 2.6fr) minmax(8rem, 1fr);
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 0%;
  }
  :is(.page-builder[data-builder-view="basic"] #ingredients, .page-builder #ingredients:not(.expanded)) .ingredient-line.primary {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 4rem 11rem minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    min-width: 0;
    gap: 0.35rem;
  }
  :is(.page-builder[data-builder-view="basic"] #ingredients, .page-builder #ingredients:not(.expanded)) .ingredient-line.primary :is(input, select, .sub-swap-btn) { grid-column: auto; grid-row: auto; }
  :is(.page-builder[data-builder-view="basic"] #ingredients, .page-builder #ingredients:not(.expanded)) .builder-preparation input { grid-column: 2; grid-row: 1; min-width: 0; }
  :is(.page-builder[data-builder-view="basic"] #ingredients, .page-builder #ingredients:not(.expanded)) .builder-ingredient-links { grid-column: 1 / -1; grid-row: 2; }
  :is(.page-builder[data-builder-view="basic"] #ingredients, .page-builder #ingredients:not(.expanded)) .ingredient-row-lines > .errorlist { grid-column: 1 / -1; }
}

/* Give full unit labels room without squeezing the ingredient name. */
@media (min-width: 769px) and (max-width: 900px),
       (min-width: 1101px) and (max-width: 1400px) {
  :is(.page-builder[data-builder-view="basic"] #ingredients, .page-builder #ingredients:not(.expanded)) .ingredient-row-lines {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.page-builder[data-builder-view="basic"] #ingredients, .page-builder #ingredients:not(.expanded)) .builder-preparation {
    grid-column: 1;
    grid-row: 2;
  }
  :is(.page-builder[data-builder-view="basic"] #ingredients, .page-builder #ingredients:not(.expanded)) .builder-ingredient-links {
    grid-row: 3;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
.ingredient-line.primary {
    grid-template-columns: 70px 11rem minmax(0, 1fr) auto auto auto;
    gap: 0.4rem;
  }

.ingredient-card .ingredient-row .drag-handle,
  .direction-row .dir-drag-handle {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.delete-ingredient,
  .delete-direction {
    min-height: 40px;
    min-width: 40px;
    padding: 0.35rem 0.65rem;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
.ingredient-card .ingredient-row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

.ingredient-card .ingredient-row-lines {
    flex: 1 1 calc(100% - 3rem);
    min-width: 0;
  }

.ingredient-line.primary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.35rem;
  }

  .ingredient-line.primary input[name$="-quantity"] {
    grid-column: 1;
    grid-row: 1;
  }

  .ingredient-line.primary input[name$="-measurement"],
  .ingredient-line.primary select[name$="-measurement"] {
    grid-column: 2;
    grid-row: 1;
  }

  .ingredient-line.primary input[name$="-ingredient"] {
    grid-column: 1 / -1;
    grid-row: 2;
  }

.ingredient-card .delete-ingredient {
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: 0.2rem;
  }

.ingredient-line input[name$="-ingredient"] {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
.ingredient-line.primary {
    grid-template-columns: minmax(3.5rem, 0.6fr) minmax(0, 1.8fr);
    grid-template-rows: auto auto;
    gap: 0.3rem;
  }

  .ingredient-line.primary input[name$="-quantity"] {
    grid-column: 1;
    grid-row: 1;
  }

  .ingredient-line.primary input[name$="-measurement"],
  .ingredient-line.primary select[name$="-measurement"] {
    grid-column: 2;
    grid-row: 1;
  }

  .ingredient-line.primary input[name$="-ingredient"] {
    grid-column: 1 / -1;
    grid-row: 2;
  }

.ingredient-card .ingredient-row {
    flex-wrap: wrap;
    gap: 0.3rem;
  }

.ingredient-card .delete-ingredient {
    margin-left: auto;
    margin-top: 0.25rem;
  }

.ingredient-line input[name$="-ingredient"] {
    width: 100%;
    min-width: 0;
  }

.ingredient-score-row .ing-score-cell {
    width: 100%;
    flex: none;
  }

.builder-workflow-panel > .section-heading + #ingredients,
  .builder-workflow-panel > .section-heading + #directions {
    margin-top: 0.5rem;
  }

.builder-workflow-panel > #ingredients + .mt-0,
  .builder-workflow-panel > #directions + .mt-0 {
    margin-top: 0.5rem;
  }

.builder-workflow-panel .ingredient-card {
    padding: 0.25rem 0.35rem;
    margin-bottom: 0.55rem;
  }

.builder-workflow-panel .ingredient-card .ingredient-row-lines {
    gap: 0.22rem;
  }

.builder-workflow-panel .ingredient-line.primary {
    gap: 0.24rem;
  }

.builder-workflow-panel .ingredient-line.primary input,
  .builder-workflow-panel .ingredient-line.primary select {
    min-height: 2.35rem;
    padding-top: 0.38rem;
    padding-bottom: 0.38rem;
  }

.ingredient-card .ingredient-row .drag-handle,
  .direction-row .dir-drag-handle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--builder-font-heading);
  }

.delete-ingredient,
  .delete-direction {
    min-height: 44px;
    min-width: 44px;
    padding: 0.4rem 0.75rem;
    font-size: var(--builder-font-compact);
  }

.page-builder .builder-workflow-panel > .section-heading + #ingredients,
  .page-builder .builder-workflow-panel > .section-heading + #directions {
    margin-top: 0.35rem;
  }

.page-builder .builder-workflow-panel > #ingredients + .mt-0,
  .page-builder .builder-workflow-panel > #directions + .mt-0 {
    margin-top: 0.35rem;
  }

.page-builder #expand-ingredients-btn {
    display: none;
  }

.page-builder .builder-workflow-panel .ingredient-card {
    padding: 0.25rem 0.35rem;
    margin-bottom: 0.32rem;
  }

.page-builder .builder-workflow-panel .ingredient-card .ingredient-row-lines {
    gap: 0.12rem;
  }

.page-builder .builder-workflow-panel .ingredient-line.primary {
    gap: 0.16rem;
  }

.page-builder .builder-workflow-panel .ingredient-line.primary input,
  .page-builder .builder-workflow-panel .ingredient-line.primary select {
    min-height: 2rem;
    padding-top: 0.22rem;
    padding-bottom: 0.22rem;
  }

.page-builder .ingredient-card .ingredient-row .drag-handle,
  .page-builder .direction-row .dir-drag-handle {
    min-width: 36px;
    min-height: 36px;
  }

.page-builder .ingredient-row-actions {
    flex: 0 0 auto;
    flex-direction: column;
    align-self: stretch;
    justify-content: center;
    gap: 0.16rem;
    margin-left: 0.14rem;
  }

.page-builder .ingredient-card.ingredient-card--details-open .ingredient-score-row .ing-score-cell:nth-child(6),
  .page-builder .ingredient-card.ingredient-card--details-open .ingredient-score-row .ing-score-cell:nth-child(7),
  .page-builder .ingredient-card.ingredient-card--details-open .ingredient-score-row .ing-score-cell:nth-child(8) {
    grid-column: 1 / -1;
  }

.page-builder .ingredient-card.ingredient-card--details-open .ingredient-score-row .ing-score-cell:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

.page-builder .ingredient-card.ingredient-card--details-open .ingredient-score-row .ing-score-cell:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
  }

.page-builder .ingredient-card.ingredient-card--details-open .ingredient-score-row .ing-score-cell:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

.page-builder .ingredient-card.ingredient-card--details-open .ingredient-score-row .ing-score-cell:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }

.page-builder .ingredient-card.ingredient-card--details-open .ingredient-score-row .ing-score-cell:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
  }

.page-builder .ingredient-card.ingredient-card--details-open .ingredient-secondary-line {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (max-width: 480px) {
.ingredient-line.primary {
    grid-template-columns: minmax(3.5rem, 0.6fr) minmax(0, 1.8fr);
    grid-template-rows: auto auto;
    gap: 0.3rem;
  }

  .ingredient-line.primary input[name$="-quantity"] {
    grid-column: 1;
    grid-row: 1;
  }

  .ingredient-line.primary input[name$="-measurement"],
  .ingredient-line.primary select[name$="-measurement"] {
    grid-column: 2;
    grid-row: 1;
  }

  .ingredient-line.primary input[name$="-ingredient"] {
    grid-column: 1 / -1;
    grid-row: 2;
  }

.page-builder .builder-workflow-panel .ingredient-card {
    padding: 0.2rem 0.3rem;
    margin-bottom: 0.28rem;
  }

.page-builder .builder-workflow-panel .ingredient-card .ingredient-row {
    gap: 0.2rem;
  }

.page-builder .builder-workflow-panel .ingredient-card .ingredient-row-lines {
    gap: 0.1rem;
  }

.page-builder .builder-workflow-panel .ingredient-line.primary {
    gap: 0.12rem;
  }

.page-builder .builder-workflow-panel .ingredient-line.primary input,
  .page-builder .builder-workflow-panel .ingredient-line.primary select {
    min-height: 1.95rem;
    padding-top: 0.18rem;
    padding-bottom: 0.18rem;
  }

.page-builder .ingredient-row-actions {
    gap: 0.12rem;
  }
}

@media (max-width: 360px) {
  .page-builder #ingredients .ingredient-line.primary { grid-template-columns: minmax(0, 1fr); }
  .page-builder #ingredients .ingredient-line.primary > .builder-row-field { grid-column: 1 / -1; }
}