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

.direction-card { border: 1px solid var(--line); border-radius: var(--builder-radius-large); padding: 0.6rem 0.7rem; background: var(--builder-surface); box-shadow: var(--builder-shadow-surface); margin-bottom: 0.6rem; }

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

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

.direction-row .dir-drag-handle { cursor: grab; color: var(--builder-muted); padding-right: 0.25rem; user-select: none; }

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

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

.direction-actions { display: flex; flex-direction: column; gap: 0.35rem; margin-left: 0.5rem; align-items: flex-end; }

.direction-card .delete-direction { margin-left: 0; white-space: nowrap; }

.dir-onto-table { border: 1px solid var(--builder-line); border-radius: var(--builder-radius-large); padding: 0.75rem; background: var(--builder-surface); }

.dir-onto-header, .dir-onto-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 0.5rem; align-items: center; }

.dir-onto-header { padding-bottom: 0.35rem; border-bottom: 1px dashed var(--builder-information-wash); margin-bottom: 0.5rem; }

.dir-onto-rows { display: flex; flex-direction: column; gap: 0.5rem; }

.dir-onto-row input { width: 100%; padding: 0.35rem 0.5rem; border-radius: var(--builder-radius-medium); border: 1px solid var(--builder-information-wash); }

.dir-onto-row .dir-onto-remove { white-space: nowrap; }

.dir-list { padding-left: 1.1rem; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }

.dir-list li { line-height: 1.4; }

.direction-body { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }

.direction-body input,
.direction-body textarea { width: 100%; }

.direction-step-name {
  height: 2.5rem;
}

.direction-step-text {
  width: 100%;
  max-width: 100%;
  min-height: 2.5rem;
}

.direction-card .delete-direction { margin-left: 0; white-space: nowrap; }

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

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

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

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

@media (min-width: 769px) and (max-width: 1100px) {
.direction-row {
    flex-wrap: wrap;
  }

.direction-row .direction-body {
    flex: 1 1 calc(100% - 4rem);
    min-width: 0;
  }

.direction-actions {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
}

@media (max-width: 768px) {
.direction-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
  }

.direction-row .dir-drag-handle {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

.direction-row .direction-body {
    display: contents;
  }

.direction-row .direction-body > input:not([type="hidden"]) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
  }

.direction-row .direction-body > .errorlist {
    grid-column: 1 / -1;
  }

.direction-row .direction-text-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }

.direction-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: row;
    width: 100%;
    margin-left: 0;
    margin-top: 0.25rem;
    gap: 0.4rem;
    justify-content: flex-start;
  }

.direction-actions .delete-direction {
    order: 10;
    margin-left: auto;
  }

.direction-row .direction-tagging-hint {
    display: none;
  }
}

@media (max-width: 480px) {
.direction-card {
    padding: 0.4rem 0.5rem;
  }
}