@import url("../variables.css");

.recipe-workspace {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(12px, 1.25vw, 24px);
    background:
        radial-gradient(circle at 10% 0%, rgba(12, 167, 243, 0.08), transparent 28rem),
        var(--bg-app);
    color: var(--slate-800);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    overscroll-behavior: contain;
}

.recipe-hero {
    width: 100%;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid rgba(12, 167, 243, 0.14);
    border-radius: 18px;
    background: linear-gradient(135deg, #fff 0%, #f5fbff 100%);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.recipe-kicker {
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.recipe-hero h1,
.recipe-editor-head h2,
.recipe-access-denied h1 {
    margin: 0;
    color: var(--slate-900);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.6px;
}

.recipe-hero p,
.recipe-editor-head p,
.recipe-access-denied p {
    max-width: 720px;
    margin: 7px 0 0;
    color: var(--slate-500);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.6;
}

.recipe-hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: 8px;
}

.recipe-hero-metrics > div,
.recipe-cost-summary > div {
    min-width: 92px;
    padding: 12px 14px;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    background: rgba(255,255,255,0.86);
}

.recipe-hero-metrics strong,
.recipe-cost-summary strong {
    display: block;
    color: var(--slate-900);
    font-size: 17px;
    font-weight: 900;
}

.recipe-hero-metrics span,
.recipe-cost-summary span {
    margin-top: 3px;
    color: var(--slate-500);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.recipe-hero-metrics .warning strong,
.recipe-cost-summary .warning strong { color: #b45309; }

.recipe-tabs {
    width: 100%;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    background: var(--white);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    box-shadow: var(--shadow-sm);
}

.recipe-tabs button {
    height: 42px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--slate-500);
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.recipe-tabs button i { margin-right: 7px; }
.recipe-tabs button:hover { background: var(--slate-50); color: var(--slate-800); }
.recipe-tabs button.active { background: var(--slate-900); color: var(--white); }

.recipe-layout {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    border: 1px solid var(--slate-200);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: clamp(320px, 20vw, 440px) minmax(0, 1fr);
    overflow: hidden;
}
.recipe-layout.is-links { grid-template-columns: clamp(360px, 23vw, 500px) minmax(0, 1fr); }

.recipe-list-panel {
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--slate-200);
    background: #fbfdff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.recipe-list-head {
    min-height: 68px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--slate-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.recipe-list-head span { display: block; font-size: 14px; font-weight: 900; }
.recipe-list-head small { color: var(--slate-500); font-size: 10px; font-weight: 700; }
.recipe-list-actions { display: flex; align-items: center; gap: 6px; }
.recipe-archive-toggle {
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid var(--slate-200);
    border-radius: 9px;
    background: var(--white);
    color: var(--slate-500);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 8px;
    font-weight: 850;
    cursor: pointer;
}
.recipe-archive-toggle.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.recipe-archive-toggle strong { min-width: 17px; padding: 2px 5px; border-radius: 999px; background: var(--slate-100); color: inherit; }

.recipe-icon-button,
.recipe-remove-button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--slate-200);
    border-radius: 9px;
    background: var(--white);
    color: var(--primary);
    cursor: pointer;
}
.recipe-create-button {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    background: var(--primary);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}
.recipe-create-button:hover { filter: brightness(.96); }

.recipe-search {
    height: 40px;
    margin: 14px;
    padding: 0 12px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--white);
    display: flex;
    align-items: center;
    gap: 8px;
}

.recipe-search i { color: var(--slate-400); font-size: 11px; }
.recipe-search input { width: 100%; border: 0; outline: 0; color: var(--slate-800); font: inherit; font-size: 11px; font-weight: 750; }

.recipe-list-filter {
    height: 36px;
    margin: -4px 14px 12px;
    padding: 0 12px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--white);
    display: flex;
    align-items: center;
    gap: 8px;
}
.recipe-list-filter i { color: var(--slate-400); font-size: 11px; }
.recipe-list-filter select { width: 100%; border: 0; outline: 0; background: transparent; color: var(--slate-800); font: inherit; font-size: 11px; font-weight: 750; }
.recipe-list-filter select:disabled { color: var(--slate-400); cursor: wait; }
.recipe-list-filter-grid {
    margin: -4px 14px 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}
.recipe-list-filter-grid .recipe-list-filter,
.recipe-list-filter-grid .recipe-shopping-list-filter { margin: 0; }
.recipe-filter-clear {
    margin: -4px 14px 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}
.recipe-filter-clear:hover { color: var(--slate-900); text-decoration: underline; }
.recipe-filter-note {
    margin: -3px 14px 12px;
    color: #92400e;
    font-size: 8px;
    font-weight: 750;
}
.recipe-shopping-list-filter {
    min-height: 36px;
    margin: -4px 14px 12px;
    padding: 5px 9px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--white);
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--slate-600);
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.recipe-shopping-list-filter:hover,
.recipe-shopping-list-filter.active { border-color: #86efac; background: #f0fdf4; color: #166534; }
.recipe-shopping-list-filter input { width: 14px; height: 14px; margin: 0; accent-color: #16a34a; cursor: pointer; }
.recipe-shopping-list-filter-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--slate-100);
    color: var(--slate-500);
    display: inline-grid;
    place-items: center;
    font-size: 10px;
}
.recipe-shopping-list-filter.active .recipe-shopping-list-filter-icon { background: #dcfce7; color: #16a34a; }
.recipe-shopping-list-filter strong { margin-left: auto; color: inherit; font-size: 9px; }

.recipe-selection-toolbar {
    min-height: 38px;
    margin: -4px 14px 12px;
    padding: 6px 9px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--white);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.recipe-selection-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--slate-700); font-size: 9px; font-weight: 850; cursor: pointer; }
.recipe-selection-toggle input,
.recipe-record-select { accent-color: var(--primary); }
.recipe-selection-toggle input:disabled { cursor: not-allowed; }
.recipe-selection-count { color: var(--slate-500); font-size: 9px; font-weight: 750; }
.recipe-selection-actions { margin-left: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.recipe-bulk-action,
.recipe-selection-clear {
    min-height: 25px;
    padding: 0 7px;
    border: 1px solid var(--slate-200);
    border-radius: 7px;
    background: var(--white);
    color: var(--slate-600);
    font: inherit;
    font-size: 8px;
    font-weight: 850;
    cursor: pointer;
}
.recipe-bulk-action:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.recipe-selection-clear { border-color: transparent; color: var(--slate-500); }
.recipe-bulk-action:disabled,
.recipe-selection-clear:disabled { cursor: wait; opacity: .55; }

.recipe-record-list {
    min-height: 0;
    flex: 1;
    padding: 0 10px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.recipe-record {
    width: 100%;
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
}
.recipe-record.is-selectable { grid-template-columns: 20px minmax(0, 1fr); gap: 9px; }
.recipe-record-open {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.recipe-record.is-selectable .recipe-record-open { grid-column: 2; }
.recipe-record-select { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.recipe-record-select:disabled { cursor: wait; }

.recipe-record:hover,
.recipe-record.active { border-color: var(--slate-200); background: var(--white); }
.recipe-record.active { box-shadow: inset 3px 0 0 var(--primary), var(--shadow-sm); }
.recipe-record.selected { border-color: color-mix(in srgb, var(--primary) 35%, var(--slate-200)); background: var(--primary-light); }
.recipe-record-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-light); color: var(--primary); display: grid; place-items: center; }
.recipe-record-copy { min-width: 0; }
.recipe-record-copy strong,
.recipe-record-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-record-copy strong { color: var(--slate-800); font-size: 11px; font-weight: 850; }
.recipe-record-copy small { margin-top: 3px; color: var(--slate-500); font-size: 9px; font-weight: 650; }
.recipe-record-trailing { min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.recipe-record-sheet-indicator {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--primary-light);
    color: var(--primary);
    display: inline-grid;
    place-items: center;
    font-size: 9px;
}
.recipe-record-connection-count {
    min-width: 24px;
    height: 22px;
    padding: 0 5px;
    border-radius: 7px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 9px;
}
.recipe-record-connection-count strong { font-size: 9px; font-weight: 900; }
.recipe-record-connection-count.loading { color: var(--slate-400); background: var(--slate-100); }
.recipe-record-connection-count.unavailable { color: #b45309; background: #fffbeb; }
.recipe-record-shopping-list-indicator {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--slate-100);
    color: var(--slate-400);
    display: inline-grid;
    place-items: center;
    font-size: 9px;
}
.recipe-record-shopping-list-indicator.assigned { background: #fef3c7; color: #b45309; }
.recipe-record-shopping-list-indicator.active { background: #dcfce7; color: #16a34a; }
.recipe-record-status { padding: 3px 6px; border-radius: 999px; background: var(--slate-100); color: var(--slate-500); font-size: 8px; font-weight: 900; text-transform: uppercase; }

.recipe-editor-panel {
    min-width: 0;
    min-height: 0;
    padding: 22px 24px 60px;
    background: var(--slate-50);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.recipe-editor-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.recipe-editor-head h2 { font-size: 23px; }
.recipe-editor-actions { display: flex; gap: 8px; }
.recipe-form { display: grid; gap: 14px; }
.recipe-card { padding: 18px; border: 1px solid var(--slate-200); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); }
.recipe-card-title { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--slate-900); font-size: 12px; font-weight: 900; }
.recipe-card-title small { color: var(--slate-400); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.recipe-text-button { border: 0; background: transparent; color: var(--primary); font-size: 10px; font-weight: 900; cursor: pointer; }
.recipe-connected-recipes-head > div { min-width: 0; display: grid; gap: 3px; }
.recipe-connected-recipes-head > div > small { color: var(--slate-500); font-size: 9px; font-weight: 750; letter-spacing: 0; text-transform: none; }
.recipe-connected-recipes-list {
    border: 1px solid var(--slate-200);
    border-radius: 11px;
    background: var(--white);
    overflow: hidden;
}
.recipe-connected-recipe-row {
    min-height: 58px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--slate-100);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}
.recipe-connected-recipe-row:last-child { border-bottom: 0; }
.recipe-connected-recipe-row:hover { background: var(--primary-light); }
.recipe-connected-recipe-row > i { color: var(--primary); font-size: 9px; }
.recipe-connected-recipe-copy { min-width: 0; display: grid; gap: 3px; }
.recipe-connected-recipe-copy strong,
.recipe-connected-recipe-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-connected-recipe-copy strong { color: var(--slate-900); font-size: 10px; font-weight: 900; }
.recipe-connected-recipe-copy small { color: var(--slate-500); font-size: 8px; font-weight: 700; }
.recipe-connected-recipes-empty {
    min-height: 72px;
    border: 1px dashed var(--slate-200);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--slate-400);
    font-size: 9px;
    font-weight: 800;
    text-align: center;
}
.recipe-connected-recipes-empty.warning { border-color: #fde68a; background: #fffbeb; color: #a16207; }

.recipe-field-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.recipe-field { min-width: 0; display: grid; gap: 6px; }
.recipe-field > span { color: var(--slate-500); font-size: 9px; font-weight: 900; letter-spacing: .45px; text-transform: uppercase; }
.recipe-inline-check { display: flex; align-items: center; gap: 7px; color: var(--slate-700); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.recipe-inline-check input { accent-color: var(--primary); }
.recipe-field > small { color: var(--slate-500); font-size: 11px; line-height: 1.4; }
.recipe-field-wide { grid-column: span 2; }
.recipe-field-full { grid-column: 1 / -1; }
.recipe-input {
    width: 100%;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid var(--slate-200);
    border-radius: 9px;
    background: var(--white);
    color: var(--slate-800);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    outline: none;
}
textarea.recipe-input { padding: 10px 11px; resize: vertical; line-height: 1.5; }
.recipe-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

.recipe-sheet-card { overflow: hidden; }
.recipe-sheet-title > div { display: grid; gap: 3px; }
.recipe-sheet-title > div small { display: block; }
.recipe-sheet-lazy-note {
    padding: 6px 9px;
    border-radius: 999px;
    background: #f0f9ff;
    color: #0369a1;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}
.recipe-sheet-lazy-note i { margin-right: 4px; }
.recipe-sheet-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
    align-items: start;
    gap: 20px;
}
.recipe-sheet-instruction textarea { min-height: 132px; }
.recipe-sheet-instruction > small {
    color: var(--slate-400);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.45;
}
.recipe-sheet-media { min-width: 0; display: grid; gap: 9px; }
.recipe-sheet-media-label {
    color: var(--slate-500);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .45px;
    text-transform: uppercase;
}
.recipe-sheet-preview,
.recipe-sheet-empty {
    width: 100%;
    min-height: 180px;
    padding: 0;
    border: 1px dashed var(--slate-300);
    border-radius: 12px;
    background: var(--slate-50);
    overflow: hidden;
    cursor: pointer;
}
.recipe-sheet-preview { position: relative; display: grid; place-items: center; }
.recipe-sheet-preview img { width: 100%; height: clamp(140px, 24dvh, 220px); max-height: calc(100dvh - 240px); object-fit: contain; background: var(--white); }
.recipe-sheet-preview > span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(15, 23, 42, .84);
    color: var(--white);
    font-size: 8px;
    font-weight: 850;
}
.recipe-sheet-empty { color: var(--slate-500); display: grid; place-content: center; gap: 6px; text-align: center; }
.recipe-sheet-empty:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.recipe-sheet-empty:disabled { cursor: not-allowed; opacity: .65; }
.recipe-sheet-empty i { font-size: 24px; }
.recipe-sheet-empty strong { font-size: 10px; }
.recipe-sheet-empty small { font-size: 8px; }
.recipe-sheet-file-input { display: none; }
.recipe-sheet-actions { display: flex; align-items: center; gap: 10px; }
.recipe-sheet-actions .btn { flex: 1; justify-content: center; }
.recipe-sheet-remove { border: 0; background: transparent; color: var(--danger); font-size: 9px; font-weight: 850; cursor: pointer; }
.recipe-sheet-remove:disabled { cursor: wait; opacity: .5; }
.recipe-sheet-save-hint { margin: 0; color: var(--slate-500); font-size: 8px; line-height: 1.4; }
.recipe-sheet-save-hint i { margin-right: 3px; color: var(--primary); }

.ingredient-artwork-card { overflow: hidden; }
.ingredient-artwork-title > div { display: grid; gap: 3px; }
.ingredient-artwork-title > div small { display: block; }
.ingredient-artwork-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff7ed;
    color: #b45309;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}
.ingredient-artwork-status.ready { background: #ecfdf5; color: #047857; }
.ingredient-artwork-layout {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}
.ingredient-artwork-preview,
.ingredient-artwork-empty {
    width: 100%;
    min-height: 180px;
    padding: 0;
    border: 1px dashed var(--slate-300);
    border-radius: 12px;
    background: var(--slate-50);
    overflow: hidden;
    cursor: pointer;
}
.ingredient-artwork-preview { position: relative; display: grid; place-items: center; }
.ingredient-artwork-preview img { width: 100%; height: 180px; object-fit: contain; background: var(--white); }
.ingredient-artwork-preview > span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(15, 23, 42, .84);
    color: var(--white);
    font-size: 8px;
    font-weight: 850;
}
.ingredient-artwork-empty { color: var(--slate-500); display: grid; place-content: center; gap: 6px; text-align: center; }
.ingredient-artwork-empty:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.ingredient-artwork-empty:disabled { cursor: not-allowed; opacity: .65; }
.ingredient-artwork-empty i { font-size: 24px; }
.ingredient-artwork-empty strong { font-size: 10px; }
.ingredient-artwork-empty small { font-size: 8px; }
.ingredient-artwork-actions { min-width: 0; display: grid; gap: 10px; }
.ingredient-artwork-actions > p { margin: 0; color: var(--slate-500); font-size: 10px; line-height: 1.5; }
.ingredient-artwork-actions .recipe-sheet-actions { justify-content: flex-start; }

.recipe-component-table { overflow-x: auto; }
.recipe-component-add-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.recipe-composition-guide {
    margin: -4px 0 12px;
    padding: 10px 12px;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    background: #f0f9ff;
    color: var(--slate-600);
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
}
.recipe-composition-guide > i { margin-top: 2px; color: var(--primary); }
.recipe-composition-guide strong { color: var(--slate-800); }
.recipe-composition-guide em { color: var(--primary); font-style: normal; font-weight: 900; }
.recipe-component-row {
    min-width: 1090px;
    padding: 7px 0;
    border-bottom: 1px solid var(--slate-100);
    display: grid;
    grid-template-columns: minmax(190px, 1.75fr) minmax(150px, 1fr) 100px 90px 100px 106px 66px 34px;
    align-items: center;
    gap: 8px;
}
.recipe-component-row.is-dragging { opacity: .52; }
.recipe-component-row.is-drop-target { border-bottom: 2px solid var(--primary); }
.recipe-component-row strong { color: var(--slate-800); font-size: 11px; }
.recipe-component-target-actions {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 6px;
}
.recipe-component-drag-handle {
    width: 28px;
    height: 32px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: var(--slate-50);
    color: var(--slate-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
}
.recipe-component-drag-handle:hover,
.recipe-component-drag-handle:focus-visible { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.recipe-component-drag-handle:active { cursor: grabbing; }
.recipe-ingredient-select {
    width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid var(--slate-200);
    border-radius: 9px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    color: var(--slate-700);
    text-align: left;
    cursor: pointer;
}
.recipe-ingredient-select:hover { border-color: var(--primary); background: var(--primary-light); }
.recipe-ingredient-select > span { min-width: 0; display: grid; gap: 2px; }
.recipe-ingredient-select strong,
.recipe-ingredient-select small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-ingredient-select strong { font-size: 10px; font-weight: 850; }
.recipe-ingredient-select small { color: var(--slate-500); font-size: 8px; font-weight: 700; }
.recipe-ingredient-select > i { flex: 0 0 auto; color: var(--primary); }
.recipe-component-artwork {
    min-width: 0;
    min-height: 40px;
    padding: 4px 6px;
    border: 1px solid var(--slate-200);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.recipe-component-artwork.ready { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.recipe-component-artwork.missing { border-color: #fed7aa; background: #fff7ed; color: #b45309; }
.recipe-component-artwork-thumb {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 7px;
    background: var(--white);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.recipe-component-artwork-thumb img { width: 100%; height: 100%; object-fit: contain; }
.recipe-component-artwork-thumb i { font-size: 13px; }
.recipe-component-artwork-copy { min-width: 0; display: grid; gap: 2px; }
.recipe-component-artwork-copy strong,
.recipe-component-artwork-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-component-artwork-copy strong { color: currentColor; font-size: 9px; font-weight: 900; }
.recipe-component-artwork-copy small { color: currentColor; opacity: .78; font-size: 8px; font-weight: 700; }
.recipe-component-open-button {
    width: 32px;
    height: 32px;
    border: 1px solid #bae6fd;
    border-radius: 9px;
    background: #f0f9ff;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.recipe-component-open-button:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    transform: translateY(-1px);
}
.recipe-component-header { color: var(--slate-500); font-size: 8px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.recipe-component-visibility { display: inline-flex; align-items: center; gap: 5px; color: var(--slate-600); font-size: 9px; font-weight: 800; cursor: pointer; }
.recipe-component-visibility input { accent-color: var(--primary); }
.recipe-component-order-controls { display: inline-flex; align-items: center; gap: 3px; }
.recipe-component-order-button { width: 28px; height: 28px; border: 1px solid var(--slate-200); border-radius: 7px; background: var(--white); color: var(--slate-500); cursor: pointer; }
.recipe-component-order-button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.recipe-component-order-button:disabled { cursor: not-allowed; opacity: .4; }
.recipe-remove-button { color: var(--slate-400); }
.recipe-remove-button:hover { color: var(--danger); border-color: var(--danger); }
.recipe-component-empty { width: 100%; min-height: 100px; border: 1px dashed var(--slate-300); border-radius: 10px; background: var(--slate-50); color: var(--slate-500); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 800; cursor: pointer; }
.recipe-linked-menu-items-title > div { min-width: 0; display: grid; gap: 3px; }
.recipe-linked-menu-item-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.recipe-linked-menu-item {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--white);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
}
.recipe-linked-menu-item:hover { border-color: #7dd3fc; background: #f0f9ff; box-shadow: var(--shadow-sm); }
.recipe-linked-menu-item-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-light); color: var(--primary); display: grid; place-items: center; }
.recipe-linked-menu-item-copy { min-width: 0; display: grid; gap: 3px; }
.recipe-linked-menu-item-copy strong,
.recipe-linked-menu-item-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-linked-menu-item-copy strong { color: var(--slate-900); font-size: 10px; font-weight: 900; }
.recipe-linked-menu-item-copy small { color: var(--slate-500); font-size: 8px; font-weight: 700; }
.recipe-linked-menu-item > i { color: var(--primary); font-size: 9px; }
.recipe-linked-menu-items-empty { min-height: 72px; border: 1px dashed var(--slate-300); border-radius: 10px; color: var(--slate-500); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10px; font-weight: 800; }

.recipe-cost-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; }
.recipe-cost-summary > div { min-width: 0; background: var(--white); }
.recipe-cost-summary strong { margin-top: 4px; font-size: 20px; }
.recipe-cost-summary small { margin-top: 3px; color: #047857; font-size: 9px; font-weight: 850; }

.recipe-link-step {
    width: 25px;
    height: 25px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 950;
}
.recipe-link-recipe-head { gap: 14px; }
.recipe-link-recipe-head .recipe-link-step { flex: 0 0 auto; }
.recipe-link-recipe-list { padding-bottom: 22px; }
.recipe-link-recipe { min-height: 62px; }
.recipe-link-usage {
    min-width: 26px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--slate-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
}
.recipe-link-recipe.active .recipe-link-usage { background: var(--primary); color: var(--white); }
.recipe-link-workspace-head {
    margin: -2px 0 18px;
    padding: 16px 18px;
    border: 1px solid rgba(12, 167, 243, 0.2);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--white), #f0f9ff);
    box-shadow: var(--shadow-sm);
}
.recipe-link-selected {
    min-width: 0;
    display: grid;
    grid-template-columns: 25px 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}
.recipe-link-selected > div { min-width: 0; }
.recipe-link-selected small {
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .55px;
    text-transform: uppercase;
}
.recipe-link-selected h2 {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--slate-900);
    font-size: 17px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recipe-link-selected p {
    margin: 4px 0 0;
    color: var(--slate-500);
    font-size: 9px;
    font-weight: 700;
}
.recipe-link-subtabs {
    width: fit-content;
    margin: -4px 0 14px;
    padding: 4px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--white);
    display: flex;
    gap: 4px;
}
.recipe-link-subtabs button {
    min-height: 34px;
    padding: 0 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--slate-500);
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}
.recipe-link-subtabs button.active { background: var(--slate-900); color: var(--white); }
.recipe-link-subtabs strong { margin-left: 5px; }
.recipe-link-page-controls {
    margin: -2px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--slate-500);
    font-size: 9px;
    font-weight: 800;
}
.recipe-link-page-controls label { display: flex; align-items: center; gap: 8px; }
.recipe-link-page-controls select { width: 78px; height: 34px; }
.recipe-link-entity-search {
    min-height: 44px;
    margin-bottom: 12px;
    padding: 0 13px;
    border: 1px solid var(--slate-200);
    border-radius: 11px;
    background: var(--white);
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: var(--shadow-sm);
}
.recipe-link-entity-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.recipe-link-entity-search i { flex: 0 0 auto; color: var(--slate-400); font-size: 11px; }
.recipe-link-entity-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--slate-800);
    font: inherit;
    font-size: 11px;
    font-weight: 750;
}
.recipe-link-results { display: grid; gap: 8px; }
.recipe-link-card {
    min-width: 0;
    min-height: 72px;
    padding: 11px 12px;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    background: var(--white);
    display: grid;
    grid-template-columns: minmax(210px, 1.2fr) minmax(150px, .8fr) auto;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.recipe-link-card:hover { border-color: #bae6fd; box-shadow: var(--shadow-sm); }
.recipe-link-card.is-selected-recipe { border-color: #86efac; background: #f0fdf4; }
.recipe-link-card.has-other-recipe { border-left: 3px solid #fbbf24; }
.recipe-link-card-copy {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}
.recipe-link-card-copy > div,
.recipe-link-current { min-width: 0; display: grid; gap: 3px; }
.recipe-link-card-copy strong,
.recipe-link-card-copy small,
.recipe-link-current strong,
.recipe-link-current span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recipe-link-card-copy strong { color: var(--slate-900); font-size: 11px; font-weight: 900; }
.recipe-link-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.recipe-link-title strong { min-width: 0; }
.recipe-link-title em {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 7px;
    font-style: normal;
    font-weight: 950;
    letter-spacing: .35px;
    text-transform: uppercase;
}
.recipe-link-card-copy small { color: var(--slate-500); font-size: 8px; font-weight: 700; }
.recipe-link-current small { color: var(--slate-400); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.recipe-link-current strong { color: var(--slate-800); font-size: 10px; font-weight: 850; }
.recipe-link-current span { color: var(--slate-400); font-size: 10px; font-weight: 750; }
.recipe-link-current em { color: #047857; font-size: 8px; font-style: normal; font-weight: 850; }
.recipe-link-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.recipe-link-connect { min-width: 94px; justify-content: center; }
.recipe-link-unlink {
    min-height: 34px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--slate-400);
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}
.recipe-link-unlink:hover { color: var(--danger); }
.recipe-link-unlink:disabled { opacity: .45; cursor: default; }

.recipe-alert, .recipe-loading {
    max-width: 1680px;
    min-height: 48px;
    margin: 0 auto 12px;
    padding: 10px 14px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 800;
}
.recipe-alert button { margin-left: auto; border: 0; background: transparent; color: inherit; font-weight: 900; cursor: pointer; }
.recipe-loading { border-color: var(--slate-200); background: var(--white); color: var(--slate-600); }
.recipe-access-denied { max-width: 560px; margin: 12vh auto 0; padding: 44px; border: 1px solid var(--slate-200); border-radius: 18px; background: var(--white); text-align: center; box-shadow: var(--shadow-md); }
.recipe-access-icon { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 16px; background: var(--primary-light); color: var(--primary); display: grid; place-items: center; font-size: 20px; }
.recipe-empty-list { min-height: 150px; color: var(--slate-400); display: grid; place-items: center; align-content: center; gap: 8px; font-size: 10px; font-weight: 800; }
.recipe-pagination {
    min-height: 48px;
    padding: 8px 12px;
    border-top: 1px solid var(--slate-200);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.recipe-pagination button {
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: var(--white);
    color: var(--slate-700);
    cursor: pointer;
}
.recipe-pagination button:disabled { opacity: .35; cursor: default; }
.recipe-pagination span { color: var(--slate-500); font-size: 9px; font-weight: 850; }
.recipe-link-pagination { margin-top: 12px; border: 1px solid var(--slate-200); border-radius: 10px; }
.recipe-link-pagination { justify-content: space-between; }
.recipe-link-load-more { width: 100%; margin-top: 10px; justify-content: center; }
.recipe-mobile-browser { display: none; }

.recipe-link-search-modal,
.recipe-ingredient-picker-modal { width: min(760px, calc(100vw - 28px)); max-width: 760px; }
.recipe-link-search-modal .modal-header > div,
.recipe-ingredient-picker-modal .modal-header > div { min-width: 0; display: grid; gap: 3px; }
.recipe-link-search-modal .modal-header small,
.recipe-ingredient-picker-modal .modal-header small {
    overflow: hidden;
    color: var(--slate-500);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recipe-link-search-input { margin-bottom: 12px; }
.recipe-link-search-results {
    max-height: min(56vh, 520px);
    border: 1px solid var(--slate-200);
    border-radius: 11px;
    overflow-y: auto;
}
.recipe-link-search-row {
    min-height: 62px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--slate-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.recipe-link-search-row:last-child { border-bottom: 0; }
.recipe-link-search-row > div { min-width: 0; display: grid; gap: 3px; }
.recipe-link-search-row strong,
.recipe-link-search-row small,
.recipe-link-search-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recipe-link-search-row strong { color: var(--slate-900); font-size: 11px; font-weight: 900; }
.recipe-link-search-row small { color: var(--slate-500); font-size: 9px; font-weight: 700; }
.recipe-link-search-row span { color: var(--primary); font-size: 9px; font-weight: 800; }
.recipe-link-search-row button { flex: 0 0 auto; min-width: 68px; }
.recipe-link-search-empty { min-height: 120px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--slate-400); font-size: 10px; font-weight: 800; }
.recipe-link-search-limit { margin: 9px 2px 0; color: var(--slate-500); font-size: 9px; font-weight: 700; }
.recipe-link-search-modal .modal-footer { justify-content: space-between; }
.recipe-link-search-modal .modal-footer > span,
.recipe-ingredient-picker-modal .modal-footer > span { color: var(--slate-500); font-size: 9px; font-weight: 750; }
.recipe-component-picker-tabs {
    margin-bottom: 10px;
    padding: 3px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--slate-50);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
}
.recipe-component-picker-tabs button {
    min-height: 34px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--slate-500);
    font: inherit;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}
.recipe-component-picker-tabs button.active {
    background: var(--white);
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.recipe-ingredient-picker-toolbar {
    min-height: 42px;
    margin: 0 0 10px;
    padding: 5px 8px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--slate-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.recipe-ingredient-picker-filter { min-width: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--slate-600); cursor: pointer; }
.recipe-ingredient-picker-filter input { width: 14px; height: 14px; margin: 0; accent-color: #16a34a; cursor: pointer; }
.recipe-ingredient-picker-filter.active { color: #166534; }
.recipe-ingredient-picker-filter-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background: var(--white);
    color: var(--slate-400);
    display: inline-grid;
    place-items: center;
    font-size: 11px;
}
.recipe-ingredient-picker-filter.active .recipe-ingredient-picker-filter-icon { background: #dcfce7; color: #16a34a; }
.recipe-ingredient-picker-filter-copy { min-width: 0; display: grid; gap: 2px; }
.recipe-ingredient-picker-filter-copy strong,
.recipe-ingredient-picker-filter-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-ingredient-picker-filter-copy strong { font-size: 10px; font-weight: 900; }
.recipe-ingredient-picker-filter-copy small { color: var(--slate-500); font-size: 8px; font-weight: 700; }
.recipe-ingredient-picker-filter-count { flex: 0 0 auto; color: var(--slate-500); font-size: 8px; font-weight: 850; }

.recipe-ingredient-picker-results {
    max-height: min(58vh, 560px);
    border: 1px solid var(--slate-200);
    border-radius: 11px;
    background: var(--white);
    overflow-y: auto;
}
.recipe-ingredient-picker-results > button {
    width: 100%;
    min-height: 60px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--slate-100);
    background: var(--white);
    display: grid;
    grid-template-columns: minmax(0,1fr) 24px auto 18px;
    align-items: center;
    gap: 14px;
    color: var(--slate-700);
    text-align: left;
    cursor: pointer;
}
.recipe-ingredient-picker-results > button:last-of-type { border-bottom: 0; }
.recipe-ingredient-picker-results > button:hover { background: var(--primary-light); }
.recipe-ingredient-picker-copy,
.recipe-ingredient-picker-cost { min-width: 0; display: grid; gap: 3px; }
.recipe-ingredient-picker-copy strong,
.recipe-ingredient-picker-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-ingredient-picker-copy strong { color: var(--slate-900); font-size: 11px; font-weight: 900; }
.recipe-ingredient-picker-copy small,
.recipe-ingredient-picker-cost small { color: var(--slate-500); font-size: 8px; font-weight: 700; }
.recipe-ingredient-picker-cost { justify-items: end; }
.recipe-ingredient-picker-cost strong { color: #047857; font-size: 11px; font-weight: 900; }
.recipe-ingredient-picker-shopping-list-status {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--slate-100);
    color: var(--slate-400);
    display: inline-grid;
    place-items: center;
    font-size: 10px;
}
.recipe-ingredient-picker-shopping-list-status.assigned { background: #fef3c7; color: #b45309; }
.recipe-ingredient-picker-shopping-list-status.active { background: #dcfce7; color: #16a34a; }
.recipe-ingredient-picker-results > button > i { color: var(--primary); font-size: 10px; }

.recipe-supplier-ingredients-head > div { min-width: 0; display: grid; gap: 3px; }
.recipe-supplier-ingredients-head > div > small { color: var(--slate-500); font-size: 9px; font-weight: 750; text-transform: none; }
.recipe-supplier-ingredient-search { width: 100%; margin: 0 0 10px; }
.recipe-supplier-ingredient-list {
    max-height: 420px;
    border: 1px solid var(--slate-200);
    border-radius: 11px;
    background: var(--white);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.recipe-supplier-ingredient-row {
    width: 100%;
    min-height: 58px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--slate-100);
    background: var(--white);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(90px, auto) auto auto;
    align-items: center;
    gap: 10px;
    color: var(--slate-700);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.recipe-supplier-ingredient-row:last-child { border-bottom: 0; }
.recipe-supplier-ingredient-row:hover { background: var(--primary-light); }
.recipe-supplier-ingredient-row.archived { opacity: .7; }
.recipe-supplier-ingredient-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #ecfdf5;
    color: #059669;
    display: grid;
    place-items: center;
}
.recipe-supplier-ingredient-copy,
.recipe-supplier-ingredient-cost { min-width: 0; display: grid; gap: 3px; }
.recipe-supplier-ingredient-copy strong,
.recipe-supplier-ingredient-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-supplier-ingredient-copy strong { color: var(--slate-900); font-size: 10px; font-weight: 900; }
.recipe-supplier-ingredient-copy small,
.recipe-supplier-ingredient-cost small { color: var(--slate-500); font-size: 8px; font-weight: 700; }
.recipe-supplier-ingredient-cost { justify-items: end; }
.recipe-supplier-ingredient-cost strong { color: #047857; font-size: 10px; font-weight: 900; }
.recipe-supplier-ingredient-row > i { color: var(--primary); font-size: 9px; }
.recipe-supplier-ingredient-empty {
    min-height: 90px;
    border: 1px dashed var(--slate-200);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--slate-400);
    font-size: 9px;
    font-weight: 800;
}
.recipe-supplier-ingredient-footer {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--slate-500);
    font-size: 8px;
    font-weight: 750;
}

.ingredient-procurement-card { gap: 14px; }
.ingredient-procurement-title > div,
.ingredient-offer-heading > div { min-width: 0; display: grid; gap: 3px; }
.ingredient-procurement-title small,
.ingredient-offer-heading small { color: var(--slate-500); font-size: 9px; font-weight: 700; text-transform: none; }
.ingredient-procurement-state {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    background: #f0f9ff;
    color: #075985;
    font-size: 10px;
    font-weight: 750;
}
.ingredient-procurement-state button { margin-left: auto; border: 0; background: transparent; color: inherit; font-weight: 850; cursor: pointer; }
.ingredient-procurement-state.is-neutral { border-color: var(--slate-200); background: var(--slate-50); color: var(--slate-600); }
.ingredient-procurement-state.is-error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.ingredient-procurement-state.is-success { border-color: #bbf7d0; background: #f0fdf4; color: #047857; }
.ingredient-group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
}
.ingredient-group-summary > div:first-child { min-width: 0; display: grid; gap: 2px; }
.ingredient-group-summary small,
.ingredient-group-summary label > span { color: #1d4ed8; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.ingredient-group-summary strong { color: var(--slate-900); font-size: 12px; font-weight: 900; }
.ingredient-group-summary span { color: var(--slate-600); font-size: 9px; font-weight: 700; }
.ingredient-group-summary label { flex: 1; display: grid; gap: 5px; }
.ingredient-group-summary-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ingredient-group-summary-actions button { border: 0; background: transparent; color: var(--primary); font-size: 9px; font-weight: 850; cursor: pointer; white-space: nowrap; }
.ingredient-equivalent-members { display: grid; border: 1px solid var(--slate-200); border-radius: 12px; overflow: hidden; }
.ingredient-equivalent-member {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--slate-100);
}
.ingredient-equivalent-member:last-child { border-bottom: 0; }
.ingredient-equivalent-member.archived { background: var(--slate-50); opacity: .72; }
.ingredient-equivalent-member > div { min-width: 0; display: grid; gap: 3px; }
.ingredient-equivalent-member strong,
.ingredient-equivalent-member small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ingredient-equivalent-member strong { color: var(--slate-900); font-size: 10px; font-weight: 900; }
.ingredient-equivalent-member small { color: var(--slate-500); font-size: 8px; font-weight: 700; }
.ingredient-equivalent-member .ingredient-package-supplier { color: var(--slate-600); }
.ingredient-package-supplier i { margin-right: 3px; color: var(--primary); }
.ingredient-equivalent-member .ingredient-package-offer { color: #047857; }
.ingredient-package-missing { color: #b45309 !important; }
.ingredient-equivalent-member em { padding: 4px 7px; border-radius: 999px; background: #dcfce7; color: #047857; font-size: 8px; font-style: normal; font-weight: 850; white-space: nowrap; }
.ingredient-equivalent-member em.is-archived { background: var(--slate-200); color: var(--slate-600); }
.ingredient-equivalent-member > button { border: 0; background: transparent; color: var(--primary); font-size: 9px; font-weight: 850; cursor: pointer; white-space: nowrap; }
.ingredient-equivalent-member > button:disabled { opacity: .5; cursor: wait; }
.ingredient-primary-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); font-size: 8px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.ingredient-primary-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.ingredient-primary-toggle input:disabled { cursor: wait; }
.ingredient-primary-toggle.selected { color: #047857; }
.ingredient-equivalent-member .ingredient-package-add { color: #0369a1; }
.ingredient-equivalent-member .ingredient-member-remove { color: #b91c1c; }
.ingredient-offer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.ingredient-offer-heading strong { color: var(--slate-900); font-size: 11px; font-weight: 900; }
.ingredient-offer-table { display: grid; border: 1px solid var(--slate-200); border-radius: 12px; overflow: hidden; }
.ingredient-offer-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.4fr) minmax(125px, 1fr) minmax(90px, .7fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--slate-100);
}
.ingredient-offer-row:last-child { border-bottom: 0; }
.ingredient-offer-row > div { min-width: 0; display: grid; gap: 3px; }
.ingredient-offer-row strong,
.ingredient-offer-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ingredient-offer-row strong { color: var(--slate-900); font-size: 10px; font-weight: 900; }
.ingredient-offer-row small { color: var(--slate-500); font-size: 8px; font-weight: 700; }
.ingredient-offer-supplier { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--slate-700); font-size: 8px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ingredient-offer-supplier i { color: var(--primary); font-size: 8px; }
.ingredient-offer-row .ingredient-offer-cost strong { color: #047857; }
.ingredient-offer-row .ingredient-offer-cost .ingredient-offer-cost-pending { color: #b45309; font-size: 9px; }
.ingredient-offer-actions { display: flex !important; align-items: center; justify-content: flex-end; gap: 6px; }
.ingredient-offer-preferred { display: inline-flex; align-items: center; gap: 4px; color: var(--slate-600); font-size: 8px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.ingredient-offer-preferred input { width: 14px; height: 14px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.ingredient-offer-preferred.selected { color: #047857; }
.ingredient-offer-preferred.disabled { color: var(--slate-400); cursor: not-allowed; }
.ingredient-offer-preferred input:disabled { cursor: not-allowed; }
.ingredient-offer-actions > a { padding: 6px 9px; border-radius: 8px; background: var(--primary-light); color: var(--primary); font-size: 9px; font-weight: 900; text-decoration: none; }
.ingredient-offer-actions > button { border: 0; background: transparent; color: var(--primary); font-size: 9px; font-weight: 850; cursor: pointer; }
.ingredient-offer-no-link { color: var(--slate-400); font-size: 8px; font-weight: 750; }
.ingredient-procurement-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 12px; color: var(--slate-500); font-size: 9px; font-weight: 750; text-align: center; }
.ingredient-equivalent-picker { width: min(780px, calc(100vw - 28px)); }
.ingredient-link-review { display: grid; gap: 14px; padding: 16px; }
.ingredient-link-review-primary { min-width: 0; margin: 0; padding: 0; border: 0; }
.ingredient-link-review-primary legend { margin-bottom: 7px; color: var(--slate-700); font-size: 9px; font-weight: 850; }
.ingredient-link-review-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ingredient-link-review-member {
    position: relative;
    display: grid;
    grid-template-columns: 18px 34px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
}
.ingredient-link-review-member.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,.1); }
.ingredient-link-review-member > span:nth-of-type(2) { min-width: 0; display: grid; gap: 3px; }
.ingredient-link-review-member strong,
.ingredient-link-review-member small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ingredient-link-review-member strong { color: var(--slate-900); font-size: 10px; font-weight: 900; }
.ingredient-link-review-member small { color: var(--slate-500); font-size: 8px; font-weight: 700; }
.ingredient-link-review-member em { grid-column: 2 / -1; color: var(--primary); font-size: 8px; font-style: normal; font-weight: 850; }
.ingredient-offer-editor { width: min(720px, calc(100vw - 28px)); }
.ingredient-offer-editor .recipe-field-grid { padding: 16px; }
.ingredient-offer-editor .modal-footer { justify-content: flex-end; gap: 8px; }
.ingredient-offer-archive { margin-right: auto; border: 0; background: transparent; color: #b91c1c; font-size: 9px; font-weight: 850; cursor: pointer; }
.recipe-shopping-list-scope { display: grid; gap: 8px; min-inline-size: 0; padding: 12px; border: 1px solid var(--slate-200); border-radius: 10px; background: var(--slate-50); }
.recipe-shopping-list-scope legend { padding: 0 4px; color: var(--slate-700); font-size: 10px; font-weight: 900; }
.recipe-shopping-list-scope > small { color: var(--slate-500); font-size: 9px; line-height: 1.45; }
.recipe-shopping-list-brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 7px; }
.recipe-shopping-list-brand { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 7px; align-items: start; padding: 8px; border: 1px solid var(--slate-200); border-radius: 8px; background: var(--white); cursor: pointer; }
.recipe-shopping-list-brand:has(input:checked) { border-color: var(--primary); background: #eff6ff; box-shadow: 0 0 0 1px rgba(37,99,235,.08); }
.recipe-shopping-list-brand span { display: grid; gap: 2px; min-width: 0; }
.recipe-shopping-list-brand strong { overflow: hidden; color: var(--slate-800); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.recipe-shopping-list-brand small { overflow: hidden; color: var(--slate-500); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.recipe-muted { color: var(--slate-500); font-size: 9px; }

@media (max-width: 1050px) {
    .recipe-hero { align-items: flex-start; flex-direction: column; }
    .recipe-hero-metrics { width: 100%; }
    .recipe-field-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .recipe-layout { grid-template-columns: 280px minmax(0,1fr); }
    .recipe-layout.is-links { grid-template-columns: 310px minmax(0,1fr); }
    .recipe-link-card { grid-template-columns: minmax(180px, 1fr) minmax(130px, .7fr); }
    .recipe-link-card-actions { grid-column: 1 / -1; }
    .recipe-sheet-layout { grid-template-columns: minmax(0, 1fr) 220px; }
}

@media (max-width: 760px) {
    .recipe-list-filter-grid { grid-template-columns: 1fr; }
    .recipe-workspace { padding: 12px; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .recipe-hero { padding: 18px; }
    .recipe-hero h1 { font-size: 23px; }
    .recipe-hero-metrics { grid-template-columns: repeat(2,1fr); }
    .recipe-tabs { grid-template-columns: repeat(2,1fr); border-radius: 10px; }
    .recipe-tabs button { height: 38px; }
    .recipe-layout { position: relative; display: block; height: max(620px, calc(100dvh - 220px)); min-height: 620px; margin-top: 12px; }
    .recipe-list-panel { position: absolute; z-index: 5; inset: 0 12% 0 0; border-radius: 0 14px 14px 0; box-shadow: var(--shadow-lg); transform: translateX(-110%); transition: transform .18s ease; }
    .recipe-list-panel.mobile-open { transform: translateX(0); }
    .recipe-editor-panel { padding: 16px 14px 50px; }
    .recipe-mobile-browser { display: inline-flex; margin-bottom: 14px; min-height: 36px; padding: 0 11px; border: 1px solid var(--slate-200); border-radius: 9px; background: var(--white); align-items: center; gap: 7px; color: var(--slate-700); font-size: 10px; font-weight: 850; }
    .recipe-editor-head { flex-direction: column; }
    .recipe-editor-actions { width: 100%; }
    .recipe-editor-actions button { flex: 1; }
    .recipe-field-grid { grid-template-columns: 1fr; }
    .recipe-field-wide, .recipe-field-full { grid-column: auto; }
    .recipe-sheet-title { align-items: flex-start; flex-direction: column; }
    .recipe-sheet-layout { grid-template-columns: 1fr; }
    .recipe-sheet-preview img { height: min(42dvh, 420px); max-height: calc(100dvh - 220px); }
    .ingredient-artwork-title { align-items: flex-start; flex-direction: column; }
    .ingredient-artwork-layout { grid-template-columns: 1fr; }
    .ingredient-artwork-preview,
    .ingredient-artwork-empty { max-width: 280px; }
    .recipe-cost-summary { grid-template-columns: 1fr; }
    .recipe-layout.is-links { display: block; }
    .recipe-link-page-controls { align-items: flex-start; flex-direction: column; }
    .recipe-link-card { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .recipe-link-card-actions { grid-column: auto; justify-content: flex-start; }
    .recipe-link-current { padding-left: 44px; }
    .recipe-link-selected { grid-template-columns: 25px 34px minmax(0,1fr); }
    .recipe-archive-toggle span { display: none; }
    .recipe-link-search-modal .modal-footer > span,
    .recipe-ingredient-picker-modal .modal-footer > span { display: none; }
    .recipe-supplier-ingredient-row { grid-template-columns: 34px minmax(0,1fr) auto; }
    .recipe-supplier-ingredient-cost { display: none; }
    .recipe-supplier-ingredient-row .recipe-record-status { display: none; }
    .ingredient-group-summary { align-items: flex-start; flex-direction: column; }
    .ingredient-group-summary-actions { width: 100%; justify-content: flex-start; }
    .ingredient-equivalent-member { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .ingredient-equivalent-member > button:not(.ingredient-member-remove) { grid-column: 2; justify-self: start; }
    .ingredient-equivalent-member > .ingredient-primary-toggle { grid-column: 2; justify-self: start; }
    .ingredient-equivalent-member em { grid-column: 3; grid-row: 1; }
    .ingredient-equivalent-member .ingredient-member-remove { grid-column: 3; justify-self: end; }
    .ingredient-link-review-members { grid-template-columns: 1fr; }
    .ingredient-offer-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
    .ingredient-offer-row > div:nth-child(2) { grid-column: 1; }
    .ingredient-offer-row .ingredient-offer-cost { grid-column: 2; grid-row: 1 / span 2; justify-items: end; }
    .ingredient-offer-actions { grid-column: 2; justify-self: end; }
}