/* ═══════════════════════════════════════════════════════════════════════════
   ALLERGENS (aks-allergens.css) — 2026-10-08, allergen review step 1
   /Allergens (the queue), /Allergens/Review (one product) and the recipe page's
   allergen panel. Builds on aks-admin.css (tokens --adm-*).
   ═══════════════════════════════════════════════════════════════════════════ */

.aks-alg-of { color: var(--adm-muted, #64717d); font-size: 14px; font-weight: 500; }

.aks-alg-filters { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.aks-admin a.aks-fchip { color: inherit; text-decoration: none; }
.aks-admin a.aks-fchip.is-on { color: #fff; }

/* Tags: contains (red outline), may contain (amber, with "?"), free */
.aks-alg-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }

.aks-alg-tag,
.aks-alg-free {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.aks-alg-tag--has { border-color: #f1b8b2; background: var(--adm-danger-soft, #fdecea); color: var(--adm-danger, #b42318); }
.aks-alg-tag--may { border-color: #ecd49a; background: var(--adm-warn-soft, #fdf3dc); color: var(--adm-warn, #8a5a00); }
.aks-alg-free { border-color: #b8dcc6; background: var(--adm-ok-soft, #e6f4ec); color: var(--adm-ok, #1d7044); }

.aks-alg-list .aks-dt-cell[data-label="Allergens"] { display: grid; justify-items: start; gap: 2px; }
.aks-alg-uses { display: block; }
.aks-alg-recipes { display: block; }

/* ── Review page ── */
.aks-alg-vdesc { color: var(--adm-muted, #64717d); font-size: 13px; }

.aks-alg-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.aks-alg-side { display: grid; gap: 16px; }
.aks-alg-cols > .aks-card,
.aks-alg-side > .aks-card { margin: 0; }

@media (max-width: 960px) {
    .aks-alg-cols { grid-template-columns: minmax(0, 1fr); }
}

.aks-alg-grid { margin: 0; padding: 0; list-style: none; }

.aks-alg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--adm-line-soft, #edf0f3);
}

.aks-alg-row:last-child { border-bottom: 0; }


.aks-alg-name { display: grid; min-width: 140px; }
.aks-alg-name strong { font-size: 14px; }
.aks-alg-name small { color: var(--adm-muted, #64717d); font-size: 12px; }

.aks-alg-seg {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: 1px solid var(--adm-line-strong, #cbd4dc);
    border-radius: 8px;
    overflow: hidden;
    min-width: 0;
}

.aks-alg-opt { position: relative; margin: 0; cursor: pointer; }
.aks-alg-opt + .aks-alg-opt { border-left: 1px solid var(--adm-line-strong, #cbd4dc); }
.aks-alg-opt--free + .aks-alg-opt { border-left: 0; }   /* the hidden "free" radio (2026-10-08) */
.aks-alg-opt[hidden] { display: none; }

.aks-alg-opt input {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.aks-alg-opt span {
    display: block;
    padding: 6px 12px;
    color: var(--adm-text-2, #33495f);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.aks-alg-opt--free input:checked + span { background: var(--adm-ok, #1d7044); color: #fff; }
.aks-alg-opt--may input:checked + span { background: #b7791f; color: #fff; }
.aks-alg-opt--has input:checked + span { background: var(--adm-danger, #b42318); color: #fff; }
.aks-alg-opt input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--adm-navy, #173f66); }
.aks-alg-seg:disabled .aks-alg-opt { cursor: default; }
.aks-alg-seg:disabled .aks-alg-opt span { opacity: .85; }

.aks-alg-src { display: grid; gap: 12px; padding: 14px 18px; }
.aks-alg-src textarea { resize: vertical; }
.aks-alg-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; }
.aks-alg-remove { display: inline-flex; align-items: center; gap: 6px; color: var(--adm-muted, #64717d); font-size: 13px; }

.aks-alg-used { margin: 0; padding: 10px 18px 14px 36px; font-size: 13.5px; }
.aks-alg-used li + li { margin-top: 4px; }

/* ── Recipe page: Allergens (under the ingredients) and Recipe info (under the instructions)
   share one card, aks-rd-card (2026-10-08). "section." raises specificity above recipe-details.css,
   which loads later and resets .recipe-source-section to no border. ── */
.recipe-detail-container section.aks-rd-card {
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--aks-border, #e0e5e9);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
}

.aks-rd-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.aks-rd-card-head .recipe-detail-subheading { margin: 0; }
.aks-rd-card-link { margin-left: auto; font-size: 13px; }

.aks-alg-state {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.aks-alg-state--ok { background: #e6f4ec; color: #1d7044; }
.aks-alg-state--open { background: #fdecea; color: #b42318; }
.aks-alg-state--warn { background: #fdf3dc; color: #8a5a00; }

.aks-alg-panel p { margin: 6px 0 0; color: #33495f; }
.aks-alg-panel .aks-alg-tags { margin-top: 2px; }
.aks-alg-panel details { margin-top: 8px; }
.aks-alg-panel summary { cursor: pointer; color: #173f66; font-size: 13px; font-weight: 600; }
.aks-alg-panel ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.aks-alg-panel li + li { margin-top: 3px; }
.aks-alg-panel .aks-alg-why { color: #64717d; }

/* ── Recipe page footer: Back on the left; Copy to … and Edit on the right ── */
.recipe-detail-container .recipe-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 24px;
    padding: 14px 0 0;
    border-top: 1px solid var(--aks-border, #e0e5e9);
}

.recipe-footer-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; }
.recipe-footer .aks-copy-to-company { gap: 6px; }
.recipe-footer .aks-copy-to-company select {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--aks-border-strong, #cbd4dc);
    border-radius: 8px;
    background: #fff;
    color: var(--aks-primary, #173f66);
    font-size: .8125rem;
    font-weight: 600;
}
.recipe-detail-container .recipe-footer button.recipe-action-button { min-height: 38px; padding: 0 12px; font-size: .8125rem; font-family: inherit; }
.recipe-footer-label { color: #64717d; font-size: 13px; font-weight: 600; }

@media (max-width: 600px) {
    .recipe-detail-container .recipe-footer { flex-direction: column-reverse; align-items: stretch; }
    .recipe-footer-end { justify-content: stretch; }
    .recipe-footer-end > * { flex: 1 1 100%; }
    .recipe-footer .aks-copy-to-company { flex-wrap: nowrap; }
    .recipe-footer .aks-copy-to-company select { flex: 1 1 auto; min-width: 0; }
    .recipe-footer .aks-copy-to-company .recipe-action-button { width: auto; }
    .recipe-footer .recipe-action-button { width: 100%; }
}

.aks-alg-tag,
.aks-alg-free { line-height: 1.6; }

/* "Where you looked" chips above the note (2026-10-08) */
.aks-alg-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.aks-alg-quick .aks-fchip { padding: 0 11px; background: #fff; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; }

/* 2026-10-09: Prep / Cook / Yield and Author / Source / Created in one wrapping strip above the instructions */
.recipe-detail-container .recipe-execution-meta.aks-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}
.recipe-detail-container .aks-meta-strip .source-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.recipe-detail-container .aks-rd-note { margin: 6px 0 0; color: #33495f; white-space: pre-line; }