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

.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.5rem; }

.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 140px 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 { border: 1px solid var(--builder-line); border-radius: var(--builder-radius-large); padding: 0.5rem 0.6rem; margin-bottom: 0.75rem; background: var(--builder-surface); box-shadow: var(--builder-shadow-surface); }

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

.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) and (max-width: 1100px) {
.ingredient-line.primary {
    grid-template-columns: 70px 120px 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: 1fr 1fr;
    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.55rem 0.65rem;
    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.34rem 0.48rem;
    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(0, 1fr) minmax(0, 1fr);
    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.28rem 0.42rem;
    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;
  }
}