/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Legacy .page/.sidebar/.top-row scaffold rules removed: MainLayout renders
   <Sidebar /> + .main-content only, so those selectors matched nothing. */

#blazor-error-ui[b-ac1gsue7j2] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ac1gsue7j2] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-8nyhudom8p] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-8nyhudom8p] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-8nyhudom8p] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-8nyhudom8p] {
    font-size: 1.1rem;
}

.bi[b-8nyhudom8p] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-8nyhudom8p] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-8nyhudom8p] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-8nyhudom8p] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-8nyhudom8p] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-8nyhudom8p] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-8nyhudom8p] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-8nyhudom8p] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-8nyhudom8p] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-8nyhudom8p] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-8nyhudom8p] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-8nyhudom8p] {
        padding-bottom: 1rem;
    }

    .nav-item[b-8nyhudom8p]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-8nyhudom8p]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-8nyhudom8p]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-8nyhudom8p] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-8nyhudom8p] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-8nyhudom8p] {
        display: none;
    }

    .nav-scrollable[b-8nyhudom8p] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-kgjep72rr3],
.components-reconnect-repeated-attempt-visible[b-kgjep72rr3],
.components-reconnect-failed-visible[b-kgjep72rr3],
.components-pause-visible[b-kgjep72rr3],
.components-resume-failed-visible[b-kgjep72rr3],
.components-rejoining-animation[b-kgjep72rr3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-retrying[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-failed[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-kgjep72rr3] {
    display: block;
}


#components-reconnect-modal[b-kgjep72rr3] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-kgjep72rr3 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-kgjep72rr3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-kgjep72rr3 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-kgjep72rr3]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-kgjep72rr3 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-kgjep72rr3 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-kgjep72rr3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-kgjep72rr3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-kgjep72rr3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-kgjep72rr3] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-kgjep72rr3] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-kgjep72rr3] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-kgjep72rr3] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-kgjep72rr3] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-kgjep72rr3] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-kgjep72rr3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-kgjep72rr3] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-kgjep72rr3 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AuditReviewQueue.razor.rz.scp.css */
/* ── Page header (Pencil frame dT9ya) ──
   Title row: H1 "Ingredient Audit Review" Poppins 30/700 + subtitle Inter 14/normal.
   Right side: Export As pill (white/border) + Refresh Queue pill (#25507C / white).
   24px padding, 1px bottom divider. */

.audit-page-header[b-16ogc1145n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #E0DBE7;
    margin: -24px -24px 24px -24px; /* extend to page edges, like the wireframe */
}

.audit-page-header-left[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audit-page-title[b-16ogc1145n] {
    font-family: var(--font-family-serif);
    font-size: 30px;
    font-weight: 700;
    color: #1A102C;
    margin: 0;
    line-height: 1.2;
}

.audit-page-subtitle[b-16ogc1145n] {
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 400;
    color: #5D566A;
    margin: 0;
}

.audit-page-header-right[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.audit-header-btn[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 9999px;
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.audit-header-btn-icon.material-icons[b-16ogc1145n] {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
}

.audit-header-btn-secondary[b-16ogc1145n] {
    padding: 10px 20px;
    background: #FFFFFF;
    border: 1px solid #E0DBE7;
    color: #413A4D;
}

.audit-header-btn-secondary:hover:not(:disabled)[b-16ogc1145n] {
    background: #FAFAFE;
}

.audit-header-btn-secondary:disabled[b-16ogc1145n] {
    opacity: 0.6;
    cursor: not-allowed;
}

.audit-header-btn-primary[b-16ogc1145n] {
    padding: 10px 24px;
    background: #25507C;
    border: 0;
    color: #FFFFFF;
}

.audit-header-btn-primary:hover[b-16ogc1145n] {
    background: #1E4368;
}

/* ── Filter card (Pencil frame EpA9e) ──
   White card with 4px green left accent (#34D399), shadow, 8 radius, 24 padding,
   16 gap between header + rows. Inputs are 42 high, 8 radius, #E0DBE7 border. */

.audit-filters-wrap[b-16ogc1145n] {
    padding: 0 0 24px 0;
}

.audit-filters-card[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 8px;
    border-left: 4px solid #34D399;
    box-shadow: 0 1px 3px rgba(26, 16, 44, 0.10);
    font-family: var(--font-family-primary);
}

.audit-filters-header[b-16ogc1145n] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.audit-filters-header-icon.material-icons[b-16ogc1145n] {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #25507C;
    margin-top: 1px;
}

.audit-filters-header-title[b-16ogc1145n] {
    font-size: 14px;
    font-weight: 600;
    color: #1A102C;
    line-height: 1.3;
}

.audit-filters-header-sub[b-16ogc1145n] {
    font-size: 11px;
    font-weight: 400;
    color: #5D566A;
    line-height: 1.4;
}

.audit-filters-row[b-16ogc1145n] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
}

.audit-filter[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}

.audit-filter-spacer[b-16ogc1145n] {
    visibility: hidden;
}

.audit-filter-label[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: #1E4368;
}

.audit-filter-input[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 10px;
    background: #FFFFFF;
    border: 1px solid #E0DBE7;
    border-radius: 8px;
    font-size: 13px;
    color: #1A102C;
}

.audit-filter-input:focus-within[b-16ogc1145n] {
    border-color: #25507C;
    box-shadow: 0 0 0 1px #25507C;
}

.audit-filter-input-icon.material-icons[b-16ogc1145n] {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    color: #A8A2B3;
    flex-shrink: 0;
}

.audit-filter-input input[b-16ogc1145n],
.audit-filter-input select[b-16ogc1145n] {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: #1A102C;
    min-width: 0;
}

.audit-filter-input input[b-16ogc1145n]::placeholder {
    color: #A8A2B3;
}

.audit-filter-input select[b-16ogc1145n] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    color: #1A102C;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23A8A2B3'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 18px;
}

@media (max-width: 768px) {
    .audit-page-header[b-16ogc1145n] {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 20px 16px;
        margin: -16px -16px 20px -16px;
    }

    .audit-page-header-left[b-16ogc1145n],
    .audit-page-header-right[b-16ogc1145n] {
        min-width: 0;
        width: 100%;
    }

    .audit-page-title[b-16ogc1145n] {
        font-size: 28px;
        line-height: 1.1;
    }

    .audit-header-btn[b-16ogc1145n] {
        justify-content: center;
        width: 100%;
        min-height: 44px;
    }

    .audit-filters-wrap[b-16ogc1145n] {
        padding-bottom: 20px;
    }

    .audit-filters-card[b-16ogc1145n] {
        gap: 18px;
        padding: 20px 16px;
        overflow: hidden;
    }

    .audit-filters-row[b-16ogc1145n] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 16px;
    }

    .audit-filter[b-16ogc1145n],
    .audit-filter-input[b-16ogc1145n],
    .audit-filter-input input[b-16ogc1145n],
    .audit-filter-input select[b-16ogc1145n] {
        min-width: 0;
        width: 100%;
    }

    .audit-filter-spacer[b-16ogc1145n] {
        display: none;
    }

    .audit-queue-status-tabs[b-16ogc1145n] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .audit-tab[b-16ogc1145n],
    .audit-tab.audit-tab-first[b-16ogc1145n],
    .audit-tab.audit-tab-last[b-16ogc1145n],
    .audit-tab.audit-tab-active[b-16ogc1145n] {
        border-radius: 10px;
        box-shadow: none;
        padding: 14px 10px;
    }

    .audit-tab.audit-tab-active[b-16ogc1145n] {
        padding: 12px 8px;
    }

    .audit-tab-num[b-16ogc1145n] {
        font-size: 24px;
    }
}

@media (max-width: 360px) {
    .audit-queue-status-tabs[b-16ogc1145n] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Status Tabs strip — matches Pencil wireframe (frame ed1Mv et al.).
   Pencil: parent gap:0, padding:[0,24]. Each card: vertical layout, alignItems:center,
   gap:10, padding:20. Inactive cards have a 1px right divider; first/last get
   left/right rounded corners. Active card pops with a 2px accent border, full
   border-radius, and a tinted fill. Number 30/700 in accent; pill 9999 radius +
   4×10 padding + 6 gap with 14px icon + 12/600 label; description 10/normal in
   #5D566A; sub-line 10/600 in accent. */

.audit-queue-status-tabs[b-16ogc1145n] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    width: 100%;
}

.audit-tab[b-16ogc1145n] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 20px;
    background: #FFFFFF;
    border: 0;
    border-radius: 0;
    text-align: center;
    cursor: pointer;
    transition: background-color 120ms ease;
    box-shadow: inset -1px 0 0 #E5E7EB;
    font-family: var(--font-family-primary);
}

.audit-tab.audit-tab-first[b-16ogc1145n] {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.audit-tab.audit-tab-last[b-16ogc1145n] {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: none;
}

.audit-tab:hover:not(.audit-tab-active)[b-16ogc1145n] {
    background: #FAFAFB;
}

.audit-tab-num[b-16ogc1145n] {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    padding: 0;
}

.audit-tab-pill[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
}

.audit-tab-icon.material-icons[b-16ogc1145n] {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.audit-tab-label[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.audit-tab-desc[b-16ogc1145n] {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    color: #5D566A;
}

.audit-tab-sub[b-16ogc1145n] {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
}

/* ── Accent palette (Pencil hex codes) ── */

.audit-tab.accent-all .audit-tab-num[b-16ogc1145n] { color: #6B7280; }
.audit-tab.accent-all .audit-tab-pill[b-16ogc1145n] { background: #F3F4F6; }
.audit-tab.accent-all .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-all .audit-tab-label[b-16ogc1145n] { color: #6B7280; }
.audit-tab.accent-all.audit-tab-active[b-16ogc1145n] {
    background: #F3F4F6;
    border: 2px solid #6B7280;
    border-radius: 10px;
    padding: 18px;
    box-shadow: none;
}

.audit-tab.accent-open .audit-tab-num[b-16ogc1145n] { color: #25507C; }
.audit-tab.accent-open .audit-tab-pill[b-16ogc1145n] { background: #ECF1F6; }
.audit-tab.accent-open .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-open .audit-tab-label[b-16ogc1145n],
.audit-tab.accent-open .audit-tab-sub[b-16ogc1145n] { color: #25507C; }
.audit-tab.accent-open.audit-tab-active[b-16ogc1145n] {
    background: #ECF1F6;
    border: 2px solid #25507C;
    border-radius: 10px;
    padding: 18px;
    box-shadow: none;
}

.audit-tab.accent-accepted .audit-tab-num[b-16ogc1145n] { color: #10B981; }
.audit-tab.accent-accepted .audit-tab-pill[b-16ogc1145n] { background: #ECFDF5; }
.audit-tab.accent-accepted .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-accepted .audit-tab-label[b-16ogc1145n],
.audit-tab.accent-accepted .audit-tab-sub[b-16ogc1145n] { color: #10B981; }
.audit-tab.accent-accepted.audit-tab-active[b-16ogc1145n] {
    background: #ECFDF5;
    border: 2px solid #10B981;
    border-radius: 10px;
    padding: 18px;
    box-shadow: none;
}

.audit-tab.accent-newcanon .audit-tab-num[b-16ogc1145n] { color: #4F46E5; }
.audit-tab.accent-newcanon .audit-tab-pill[b-16ogc1145n] { background: #EEF2FF; }
.audit-tab.accent-newcanon .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-newcanon .audit-tab-label[b-16ogc1145n],
.audit-tab.accent-newcanon .audit-tab-sub[b-16ogc1145n] { color: #4F46E5; }
.audit-tab.accent-newcanon.audit-tab-active[b-16ogc1145n] {
    background: #EEF2FF;
    border: 2px solid #4F46E5;
    border-radius: 10px;
    padding: 18px;
}

.audit-tab.accent-rejected .audit-tab-num[b-16ogc1145n] { color: #EF4444; }
.audit-tab.accent-rejected .audit-tab-pill[b-16ogc1145n] { background: #FEE2E2; }
.audit-tab.accent-rejected .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-rejected .audit-tab-label[b-16ogc1145n] { color: #EF4444; }
.audit-tab.accent-rejected.audit-tab-active[b-16ogc1145n] {
    background: #FEF2F2;
    border: 2px solid #EF4444;
    border-radius: 10px;
    padding: 18px;
    box-shadow: none;
}

.audit-tab.accent-canceled .audit-tab-num[b-16ogc1145n] { color: #64748B; }
.audit-tab.accent-canceled .audit-tab-pill[b-16ogc1145n] { background: #F1F5F9; }
.audit-tab.accent-canceled .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-canceled .audit-tab-label[b-16ogc1145n] { color: #64748B; }
.audit-tab.accent-canceled.audit-tab-active[b-16ogc1145n] {
    background: #F8FAFC;
    border: 2px solid #64748B;
    border-radius: 10px;
    padding: 18px;
    box-shadow: none;
}

/* ── Bulk action bar (Pencil frames R1zsp "Bulk Action Bar" + nzkkn) ──
   Indigo bar between the Status Tabs and the table while flags are check-selected.
   Left: 24px check badge + "N flags selected" + composition line. Right: only the
   actions that apply to every selected flag, plus Clear. The mixed (open +
   superseded) state swaps to the amber guard with narrow-the-selection pills. */

.audit-bulk-bar[b-16ogc1145n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: #EEF2FF;
    border: 1.5px solid #4F46E5;
    border-radius: 8px;
    font-family: var(--font-family-primary);
}

.audit-bulk-bar-mixed[b-16ogc1145n] {
    background: #FFFBEB;
    border-color: #FDE68A;
}

.audit-bulk-left[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.audit-bulk-badge[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #4F46E5;
    flex-shrink: 0;
}

.audit-bulk-bar-mixed .audit-bulk-badge[b-16ogc1145n] {
    background: #92400E;
}

.audit-bulk-badge .material-icons[b-16ogc1145n] {
    font-size: 15px;
    color: #FFFFFF;
}

.audit-bulk-text[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.audit-bulk-count[b-16ogc1145n] {
    font-size: 14px;
    font-weight: 700;
    color: #3730A3;
    line-height: 1.2;
}

.audit-bulk-bar-mixed .audit-bulk-count[b-16ogc1145n] {
    color: #92400E;
}

.audit-bulk-scope[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: #5D566A;
    line-height: 1.2;
}

.audit-bulk-actions[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.audit-bulk-guard[b-16ogc1145n] {
    font-size: 12.5px;
    font-weight: 500;
    color: #92400E;
}

.audit-bulk-btn[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: 9999px;
    font-family: var(--font-family-primary);
    font-size: 12.5px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}

.audit-bulk-btn .material-icons[b-16ogc1145n] {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 15px;
}

.audit-bulk-btn:disabled[b-16ogc1145n] {
    opacity: 0.5;
    cursor: not-allowed;
}

.audit-bulk-btn-map[b-16ogc1145n] { background: #25507C; }
.audit-bulk-btn-map:hover:not(:disabled)[b-16ogc1145n] { background: #1E4368; }

.audit-bulk-btn-create[b-16ogc1145n] { background: #4F46E5; }
.audit-bulk-btn-create:hover:not(:disabled)[b-16ogc1145n] { background: #4338CA; }

.audit-bulk-btn-keep[b-16ogc1145n] {
    background: #FFFFFF;
    border: 1.5px solid #10B981;
    color: #10B981;
    padding: 7px 13px;
}
.audit-bulk-btn-keep:hover:not(:disabled)[b-16ogc1145n] { background: #ECFDF5; }

.audit-bulk-btn-close[b-16ogc1145n] { background: #64748B; }
.audit-bulk-btn-close:hover:not(:disabled)[b-16ogc1145n] { background: #526073; }

.audit-bulk-btn-outline[b-16ogc1145n] {
    background: #FFFFFF;
    border: 1px solid #E0DBE7;
    color: #413A4D;
    font-size: 12px;
    padding: 7px 12px;
}
.audit-bulk-btn-outline:hover:not(:disabled)[b-16ogc1145n] { background: #FAFAFE; }

.audit-bulk-clear[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: none;
    border: 0;
    font-family: var(--font-family-primary);
    font-size: 12.5px;
    font-weight: 500;
    color: #5D566A;
    cursor: pointer;
    white-space: nowrap;
}

.audit-bulk-clear:hover[b-16ogc1145n] { color: #1A102C; }

.audit-bulk-clear .material-icons[b-16ogc1145n] {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

/* ── Bulk-selection checkboxes (Pencil frames CnXmf "Checkbox Cell" + R1zsp header) ── */

.audit-cell-check[b-16ogc1145n] {
    width: 44px;
    flex: 0 0 44px;
}

.audit-bulk-checkbox[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 4px;
    border: 1.5px solid #B7B2C4;
    background: #FFFFFF;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    flex-shrink: 0;
}

.audit-bulk-checkbox:hover[b-16ogc1145n] {
    border-color: #4F46E5;
}

.audit-bulk-checkbox.audit-bulk-checkbox-checked[b-16ogc1145n] {
    background: #4F46E5;
    border-color: #4F46E5;
}

.audit-bulk-checkbox .material-icons[b-16ogc1145n] {
    font-size: 12px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    color: #FFFFFF;
}

/* Check-selected row tint (Pencil frame R1zsp rows 1-4). Distinct from
   .audit-row-selected (the single "working on this" click marker, which adds the
   inset indigo stripe); the extra :not() hover rule keeps the tint under the
   generic row-hover rule's higher specificity. */
.audit-row.audit-row-bulk-selected[b-16ogc1145n] {
    background: #EEF2FF;
}

.audit-row.audit-row-bulk-selected:not(.audit-row-header):not(.audit-row-footer):hover[b-16ogc1145n] {
    background: #E4E9FD;
}

/* ── Audit table (Pencil frame Tq8PF) ── */

.audit-table-wrap[b-16ogc1145n] {
    padding: 8px 0 24px 0;
}

/* Reconcile progress pill — sits above the audit-table-card while the audit-resolve
   pipeline runs. Uses the same indigo style as IngredientsVerification's autosave label so the
   visual language matches between the two pages. */
.audit-reconcile-pill-wrap[b-16ogc1145n] {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px 0;
}

.audit-table-card[b-16ogc1145n] {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(26, 16, 44, 0.10);
    overflow-x: auto;
    overflow-y: hidden;
    font-family: var(--font-family-primary);
}

.audit-row[b-16ogc1145n] {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 64px;
    min-width: 1080px;
    background: #FFFFFF;
    border-bottom: 1px solid #E0DBE7;
    transition: background-color 120ms ease;
    position: relative; /* anchors the All-tab status stripe (::before) */
}

/* All-tab row status stripe — 4px colored bar on the left edge that matches the
   Status Tabs palette. Only applied when the auditor is on the All tab; on
   single-status tabs the active tab pill already telegraphs the color, so the
   per-row stripe is pure noise. Color comes from the status modifier below. */
.audit-row-stripe[b-16ogc1145n]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--stripe-color, transparent);
}

.audit-row-stripe-open[b-16ogc1145n]      { --stripe-color: #25507C; }
.audit-row-stripe-accepted[b-16ogc1145n]  { --stripe-color: #10B981; }
.audit-row-stripe-newcanon[b-16ogc1145n]  { --stripe-color: #4F46E5; }
.audit-row-stripe-rejected[b-16ogc1145n]  { --stripe-color: #EF4444; }
.audit-row-stripe-canceled[b-16ogc1145n]  { --stripe-color: #64748B; }

/* Cream tint for any Canceled row (brand-withdrawn or superseded by a newer parse).
   Combines with the lifecycle stripe on the All / Canceled tabs. */
.audit-row.audit-row-canceled[b-16ogc1145n] {
    background: #FFFCF7;
}
.audit-row.audit-row-canceled:not(.audit-row-header):not(.audit-row-footer):hover[b-16ogc1145n] {
    background: #FCF7EE;
}

.audit-row:last-child[b-16ogc1145n] {
    border-bottom: 0;
}

/* Match the admin-table row hover used on Organizations / User Management
   (Tailwind hover:bg-oyster-50). Header + footer rows are excluded — they
   are non-interactive chrome with their own background. */
.audit-row:not(.audit-row-header):not(.audit-row-footer):hover[b-16ogc1145n] {
    background: #FDFCFF;
}

.audit-row-header[b-16ogc1145n] {
    height: 44px;
    background: #FAFAFE;
}

.audit-row-footer[b-16ogc1145n] {
    height: 48px;
    background: #FAFAFE;
    color: #5D566A;
    font-size: 12px;
    font-weight: 400;
    justify-content: flex-start;
}

.audit-cell[b-16ogc1145n] {
    display: flex;
    align-items: center;
    height: 100%;
    color: #1A102C;
    overflow: hidden;
    padding-right: 8px;
}

.audit-row-header .audit-cell[b-16ogc1145n] {
    color: #5D566A;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.audit-cell-brand[b-16ogc1145n]   { width: 170px; flex: 0 0 170px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.audit-cell-raw[b-16ogc1145n]     { width: 200px; flex: 0 0 200px; padding-right: 20px; }
.audit-cell-mapped[b-16ogc1145n]  { width: 170px; flex: 0 0 170px; }
.audit-row:not(.audit-row-header) .audit-cell-mapped[b-16ogc1145n] { align-items: stretch; }

.audit-mapped-stack[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    overflow: hidden;
}

.audit-mapped-strike[b-16ogc1145n] {
    text-decoration: line-through;
    color: #A8A2B3;
}

.audit-mapped-arrow[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 600;
    color: #10B981;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-mapped-kept[b-16ogc1145n] {
    font-size: 10px;
    font-weight: 600;
    color: #10B981;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Click-selected row: the auditor's "I'm working on this one" marker. One row
   at a time; clicking the selected row again clears it. */
.audit-row.audit-row-selected[b-16ogc1145n] {
    background: #EEF2FF;
    box-shadow: inset 3px 0 0 #4F46E5;
}

/* Indigo NEW pill next to the arrow on CreateNewCanon resolutions — the canon
   the auditor remapped to was created by that resolve (wireframe 3). */
.audit-newcanon-pill[b-16ogc1145n] {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #4F46E5;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.audit-cell-action[b-16ogc1145n]  { width: 160px; flex: 0 0 160px; }
.audit-cell-notes[b-16ogc1145n]   { flex: 1 1 auto; min-width: 120px; padding-right: 12px; }
.audit-cell-flagged[b-16ogc1145n] { width: 100px; flex: 0 0 100px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.audit-cell-actions[b-16ogc1145n] { width: 240px; flex: 0 0 240px; justify-content: flex-end; gap: 6px; padding-right: 0; flex-wrap: wrap; }

.audit-row-header .audit-cell-brand[b-16ogc1145n],
.audit-row-header .audit-cell-flagged[b-16ogc1145n] {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

.audit-brand-name[b-16ogc1145n] {
    font-size: 13px;
    font-weight: 600;
    color: #1A102C;
    line-height: 1.2;
}

.audit-food-name[b-16ogc1145n] {
    font-size: 11px;
    font-weight: 400;
    color: #5D566A;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.audit-food-name-link[b-16ogc1145n] {
    color: #4F45A8;
    text-decoration: none;
    cursor: pointer;
}

.audit-food-name-link:hover[b-16ogc1145n],
.audit-food-name-link:focus[b-16ogc1145n] {
    color: #1A102C;
    text-decoration: underline;
}

.audit-cell-text-primary[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: #1A102C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-cell-text-secondary[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: #5D566A;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-cell-unmatched[b-16ogc1145n] {
    font-size: 12px;
    font-style: italic;
    color: #A8A2B3;
}

.audit-cell-notes-text[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: #413A4D;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.audit-flagged-when[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 600;
    color: #1A102C;
}

.audit-flagged-who[b-16ogc1145n] {
    font-size: 10px;
    font-weight: 400;
    color: #5D566A;
}

/* ── Action chips (one per AuditAction, exact Pencil colors) ── */

.audit-chip[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 9999px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.audit-chip-icon.material-icons[b-16ogc1145n] {
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 13px;
}

.audit-chip-flag[b-16ogc1145n]     { background: #FEE2E2; border-color: #B91C1C; color: #B91C1C; }
.audit-chip-lookup[b-16ogc1145n]   { background: #F5F3FF; border-color: #7C3AED; color: #7C3AED; }
.audit-chip-newcanon[b-16ogc1145n] { background: #CFFAFE; border-color: #0891B2; color: #0891B2; }
.audit-chip-notsure[b-16ogc1145n]  { background: #FEF3C7; border-color: #92400E; color: #92400E; }

/* ── Resolve / View buttons ── */

.audit-resolve-btn[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 0;
    border-radius: 9999px;
    background: #1E3A8A;
    color: #FFFFFF;
    font-family: var(--font-family-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.audit-resolve-btn:hover[b-16ogc1145n] {
    background: #1E40AF;
}

.audit-resolve-icon.material-icons[b-16ogc1145n] {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

/* All-tab status pill — replaces the Resolve button on rows that are no longer
   actionable (Accepted / Rejected / Canceled). Mirrors the row stripe palette
   so the left-edge color and the tail badge tell the same story. */

.audit-status-pill[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border-radius: 9999px;
    border: 1px solid;
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.audit-status-pill-icon.material-icons[b-16ogc1145n] {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.audit-status-pill-accepted[b-16ogc1145n] { background: #ECFDF5; border-color: #10B981; color: #10B981; }
.audit-status-pill-newcanon[b-16ogc1145n] { background: #EEF2FF; border-color: #4F46E5; color: #4F46E5; }
.audit-status-pill-rejected[b-16ogc1145n] { background: #FEF2F2; border-color: #EF4444; color: #EF4444; }
.audit-status-pill-canceled[b-16ogc1145n] { background: #F8FAFC; border-color: #64748B; color: #64748B; }

/* ── Internal-supersession marker ── shown above the Resolve button when an
   internal auditor re-analyzed the food after the audit was filed. Two-line
   stack: chip on top, "FirstName L. re-analyzed" subtext below. */

.audit-superseded-stack[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-bottom: 4px;
}

.audit-superseded-chip[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 9999px;
    border: 1px solid #C4B5FD;
    background: #F5F3FF;
    color: #5B21B6;
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.audit-superseded-chip-icon.material-icons[b-16ogc1145n] {
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 13px;
}

.audit-superseded-byline[b-16ogc1145n] {
    font-size: 10.5px;
    color: #6D28D9;
    line-height: 1.2;
    white-space: nowrap;
}


/* ── Empty / loading / error ── */

.audit-empty[b-16ogc1145n] {
    padding: 48px 24px;
    text-align: center;
    color: #5D566A;
    font-size: 13px;
}

.audit-empty-icon.material-icons[b-16ogc1145n] {
    font-size: 48px;
    color: #D6D2DE;
    display: block;
    margin: 0 auto 12px;
}

.audit-error[b-16ogc1145n] {
    padding: 24px;
    color: #B91C1C;
    font-size: 13px;
}

/* Row-open error banner — dismissible, sits between the reconcile pill and
   the table card. Distinct from .audit-error (which is queue-load-fatal). */
.audit-row-open-error[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: #991B1B;
    font-size: 13px;
}

.audit-row-open-error-icon[b-16ogc1145n] {
    font-size: 18px;
    color: #B91C1C;
    flex-shrink: 0;
}

.audit-row-open-error-text[b-16ogc1145n] {
    flex: 1;
    line-height: 1.4;
}

.audit-row-open-error-close[b-16ogc1145n] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: #991B1B;
    display: flex;
    align-items: center;
    border-radius: 4px;
    flex-shrink: 0;
}

.audit-row-open-error-close:hover[b-16ogc1145n] {
    background: #FEE2E2;
}

.audit-row-open-error-close .material-icons[b-16ogc1145n] {
    font-size: 18px;
}

/* Pagination markup moved into Components/Shared/Pager.razor (+ .razor.css). */

@media (max-width: 768px) {
    .audit-queue-status-tabs[b-16ogc1145n] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        overflow: visible;
    }

    .audit-tab[b-16ogc1145n],
    .audit-tab.audit-tab-first[b-16ogc1145n],
    .audit-tab.audit-tab-last[b-16ogc1145n],
    .audit-tab.audit-tab-active[b-16ogc1145n] {
        min-width: 0;
        width: 100%;
        border-radius: 10px;
        box-shadow: none;
        padding: 14px 10px;
    }

    .audit-tab.audit-tab-active[b-16ogc1145n] {
        padding: 12px 8px;
    }

    .audit-tab.audit-tab-last[b-16ogc1145n] {
        grid-column: 1 / -1;
    }

    .audit-tab-num[b-16ogc1145n] {
        font-size: 24px;
    }

    .audit-tab-desc[b-16ogc1145n],
    .audit-tab-sub[b-16ogc1145n] {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 360px) {
    .audit-queue-status-tabs[b-16ogc1145n] {
        grid-template-columns: minmax(0, 1fr);
    }

    .audit-tab.audit-tab-last[b-16ogc1145n] {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .audit-table-wrap[b-16ogc1145n] {
        padding-top: 4px;
    }

    .audit-bulk-bar[b-16ogc1145n] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .audit-bulk-actions[b-16ogc1145n] {
        justify-content: flex-start;
    }

    .audit-table-card[b-16ogc1145n] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    .audit-row-header[b-16ogc1145n] {
        display: none;
    }

    .audit-row[b-16ogc1145n] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        min-width: 0;
        height: auto;
        padding: 16px;
        border: 1px solid #E0DBE7;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(26, 16, 44, 0.10);
    }

    .audit-row:last-child[b-16ogc1145n] {
        border-bottom: 1px solid #E0DBE7;
    }

    .audit-row-stripe[b-16ogc1145n]::before {
        width: 5px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }

    .audit-cell[b-16ogc1145n],
    .audit-cell-brand[b-16ogc1145n],
    .audit-cell-raw[b-16ogc1145n],
    .audit-cell-mapped[b-16ogc1145n],
    .audit-cell-action[b-16ogc1145n],
    .audit-cell-notes[b-16ogc1145n],
    .audit-cell-flagged[b-16ogc1145n],
    .audit-cell-actions[b-16ogc1145n] {
        width: auto;
        min-width: 0;
        height: auto;
        flex: 1 1 auto;
        overflow: visible;
        padding: 0;
    }

    .audit-cell:not(.audit-cell-actions)[b-16ogc1145n] {
        display: grid;
        grid-template-columns: minmax(92px, 0.38fr) minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }

    .audit-cell:not(.audit-cell-actions)[b-16ogc1145n]::before {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.05em;
        line-height: 1.35;
        text-transform: uppercase;
        color: #827C90;
    }

    .audit-cell-check[b-16ogc1145n]::before { content: "Select"; }
    .audit-cell-brand[b-16ogc1145n]::before { content: "Brand / Food"; }
    .audit-cell-raw[b-16ogc1145n]::before { content: "Raw"; }
    .audit-cell-mapped[b-16ogc1145n]::before { content: "Mapping"; }
    .audit-cell-action[b-16ogc1145n]::before { content: "Action"; }
    .audit-cell-notes[b-16ogc1145n]::before { content: "Notes"; }
    .audit-cell-flagged[b-16ogc1145n]::before { content: "Flagged"; }

    .audit-cell-brand[b-16ogc1145n] {
        flex-direction: initial;
        align-items: start;
        justify-content: initial;
    }

    .audit-cell-actions[b-16ogc1145n] {
        justify-content: flex-start;
        gap: 8px;
        padding-top: 4px;
    }

    .audit-brand-name[b-16ogc1145n],
    .audit-food-name[b-16ogc1145n],
    .audit-cell-text-primary[b-16ogc1145n],
    .audit-cell-text-secondary[b-16ogc1145n],
    .audit-mapped-arrow[b-16ogc1145n],
    .audit-mapped-kept[b-16ogc1145n],
    .audit-superseded-byline[b-16ogc1145n] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .audit-cell-notes-text[b-16ogc1145n] {
        display: block;
        overflow: visible;
        -webkit-line-clamp: initial;
        -webkit-box-orient: initial;
    }

    .audit-resolve-btn[b-16ogc1145n] {
        min-height: 40px;
        padding-inline: 16px;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-x41sexjml5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem 1.5rem;
}

.error-card[b-x41sexjml5] {
    max-width: 32rem;
    width: 100%;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e7e2d9; /* oyster-200 */
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.error-icon[b-x41sexjml5] {
    font-size: 3rem;
    color: #d97706; /* amber-600 */
    margin-bottom: 0.75rem;
}

.error-title[b-x41sexjml5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1c1917; /* oyster-900 */
    margin: 0 0 0.75rem;
}

.error-message[b-x41sexjml5] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #57534e; /* oyster-600 */
    margin: 0 auto 1.5rem;
    max-width: 28rem;
}

.error-actions[b-x41sexjml5] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.error-btn-primary[b-x41sexjml5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    background: #4f46e5; /* indigo-600 */
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.error-btn-primary:hover[b-x41sexjml5] {
    background: #4338ca; /* indigo-700 */
}

.error-reference[b-x41sexjml5] {
    margin: 1.5rem 0 0;
    font-size: 0.8rem;
    color: #a8a29e; /* oyster-400 */
}

.error-reference code[b-x41sexjml5] {
    font-size: 0.78rem;
    color: #78716c; /* oyster-500 */
    word-break: break-all;
}
/* /Components/Pages/IsFoodUpf.razor.rz.scp.css */
/* ── Page layout ── */
.ftt-page[b-gv37puy7l3] {
    background: #FBF6ED;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
}

.ftt-main[b-gv37puy7l3] {
    display: flex;
    flex-direction: column;
}

.ftt-header[b-gv37puy7l3] {
    padding: 0 32px 8px;
}

.ftt-body[b-gv37puy7l3] {
    padding: 0 32px 0;
}

/* ── Page title — Noto Serif ── */
.ftt-title[b-gv37puy7l3] {
    font-family: 'Noto Serif', Georgia, serif;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.15;
    color: #1A2339;
    margin: 0 0 16px;
}

.ftt-subtitle[b-gv37puy7l3] {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.6;
    margin: 0 0 28px;
}

.ftt-subtitle-accent[b-gv37puy7l3] {
    color: #25507C;
}

.ftt-subtitle-muted[b-gv37puy7l3] {
    color: #6b7280;
}

/* ── Step panel fade-in ── */
.step-panel[b-gv37puy7l3] {
    animation: stepFadeIn-b-gv37puy7l3 0.28s ease-out;
}

@keyframes stepFadeIn-b-gv37puy7l3 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Body text ── */
.ftt-body p[b-gv37puy7l3] {
    font-size: 18px;
    line-height: 1.6;
}

/* ── Field instruction (bold label above textarea) ── */
.ftt-field-instruction[b-gv37puy7l3] {
    font-size: 14px !important;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px;
}

/* ── Static field label ── */
.ftt-field-label[b-gv37puy7l3] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    letter-spacing: 0;
}

/* ── Underline inputs ── */
.ftt-input[b-gv37puy7l3] {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #d1d5db;
    border-radius: 0;
    padding: 10px 0 8px;
    font-size: 0.95rem;
    color: #111827;
    background: transparent;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    box-sizing: border-box;
}

.ftt-input[b-gv37puy7l3]::placeholder {
    color: #9ca3af;
}

.ftt-input:focus[b-gv37puy7l3] {
    border-bottom-width: 1px;
    border-bottom-color: #2b2830;
    outline: none;
}

/* ── Category dropdown (custom, supports icons) ── */
.ftt-dropdown-wrapper[b-gv37puy7l3] {
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #d1d5db;
    transition: border-color 0.15s;
}

.ftt-dropdown-wrapper:hover[b-gv37puy7l3] {
    border-bottom-color: #9ca3af;
}

.ftt-dropdown-wrapper:focus[b-gv37puy7l3] {
    outline: none;
    border-bottom-color: #2b2830;
}

.ftt-dropdown-wrapper:focus-visible[b-gv37puy7l3] {
    outline: none;
    border-bottom-color: #1E4368;
    box-shadow: 0 1px 0 0 #1E4368;
}

.ftt-dropdown-display[b-gv37puy7l3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0 8px;
    font-size: 0.95rem;
    color: #111827;
    font-family: 'DM Sans', sans-serif;
    min-height: 1.4em;
}

.ftt-dropdown-placeholder[b-gv37puy7l3] {
    color: #9ca3af;
}

.ftt-dropdown-icon[b-gv37puy7l3] {
    font-size: 16px;
    color: #9ca3af;
    vertical-align: middle;
    flex-shrink: 0;
}

.ftt-dropdown-backdrop[b-gv37puy7l3] {
    position: fixed;
    inset: 0;
    z-index: 59;
}

.ftt-dropdown-menu[b-gv37puy7l3] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 60;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
    padding: 4px;
    animation: stepFadeIn-b-gv37puy7l3 0.15s ease-out;
}

.ftt-dropdown-option[b-gv37puy7l3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.12s;
}

.ftt-dropdown-option:hover[b-gv37puy7l3],
.ftt-dropdown-option.highlighted[b-gv37puy7l3] {
    background-color: #f3f4f6;
}

.ftt-dropdown-option.selected[b-gv37puy7l3] {
    background-color: #f0f0ff;
    color: #1E4368;
    font-weight: 500;
}

.ftt-dropdown-option.selected .ftt-dropdown-icon[b-gv37puy7l3] {
    color: #1E4368;
}

/* ── Textarea ── */
.ftt-textarea[b-gv37puy7l3] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.95rem;
    font-family: 'DM Sans', sans-serif;
    color: #111827;
    background: white;
    outline: none;
    resize: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
    line-height: 1.6;
    height: 174px;
}

.ftt-textarea:focus[b-gv37puy7l3] {
    border-color: #9ca3af;
}

/* ── Error banner ── */
.ftt-err-banner[b-gv37puy7l3] {
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    font-size: 13px;
    color: #b91c1c;
    margin-bottom: 16px;
}

/* ── Sticky CTA bar ── */
.ftt-cta-bar[b-gv37puy7l3] {
    position: sticky;
    bottom: 0;
    background: #FBF6ED;
    padding: 16px 32px max(20px, env(safe-area-inset-bottom));
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Primary button ── */
.ftt-btn-primary[b-gv37puy7l3] {
    background-color: #25507C;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    padding: 0 16px;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 6px;
    box-shadow: none;
    transition: background-color 0.2s ease;
    color: #FBF6ED;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.ftt-btn-primary:hover:not(:disabled)[b-gv37puy7l3] {
    background-color: #1E4368;
}

.ftt-btn-primary:active:not(:disabled)[b-gv37puy7l3] {
    background-color: #163450;
}

.ftt-btn-primary.disabled[b-gv37puy7l3],
.ftt-btn-primary:disabled[b-gv37puy7l3] {
    background-color: #2b2830;
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Secondary button ── */
.ftt-btn-secondary[b-gv37puy7l3] {
    background-color: transparent;
    border: none;
    color: #9ca3af;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    padding: 10px 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 6px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: color 0.2s ease;
}

.ftt-btn-secondary:hover[b-gv37puy7l3] {
    color: #374151;
}

/* ── Loading / processing state ── */
.ftt-loading[b-gv37puy7l3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 0;
    gap: 16px;
}

.ftt-loading p[b-gv37puy7l3] {
    font-size: 0.95rem !important;
    font-weight: 500;
    color: #374151;
    margin: 0;
}

.ftt-spin[b-gv37puy7l3] {
    font-size: 44px;
    color: #2b2830;
    animation: fttSpin-b-gv37puy7l3 0.9s linear infinite;
    display: inline-block;
}

@keyframes fttSpin-b-gv37puy7l3 {
    to { transform: rotate(360deg); }
}

/* ── Service error state ── */
.ftt-service-error[b-gv37puy7l3] {
    text-align: center;
    padding: 2rem 0;
}

.ftt-service-error .material-icons[b-gv37puy7l3] {
    font-size: 3.5rem;
    color: #9ca3af;
    display: block;
    margin-bottom: 1rem;
}

.ftt-service-error h2[b-gv37puy7l3] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 0.75rem;
}

.ftt-service-error p[b-gv37puy7l3] {
    color: #6b7280;
    margin: 0 0 1.5rem;
}

.ftt-dismiss-btn[b-gv37puy7l3] {
    background: #1e4368;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
}

.ftt-dismiss-btn:hover[b-gv37puy7l3] {
    background: #163450;
}

/* ── Result badges ── */
.ftt-result-badge[b-gv37puy7l3] {
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 28px;
    text-align: center;
}

.ftt-result-badge-title[b-gv37puy7l3] {
    font-size: 0.95rem !important;
    font-weight: 600;
    margin: 0 0 5px;
}

.ftt-result-badge-desc[b-gv37puy7l3] {
    font-size: 0.82rem !important;
    margin: 0;
    line-height: 1.55;
}

/* green-100 bg / green-200 border / green-300 (Iron Wood) text */
.ftt-result-green[b-gv37puy7l3] {
    border: 1.5px solid #83A992;
    background: #E2F3E9;
}
.ftt-result-green .ftt-result-badge-title[b-gv37puy7l3] { color: #245E3B; }
.ftt-result-green .ftt-result-badge-desc[b-gv37puy7l3]  { color: #245E3B; }

/* poor-100 bg / poor-200 border / poor-300 text */
.ftt-result-red[b-gv37puy7l3] {
    border: 1.5px solid #DC3038;
    background: #FFE1DC;
}
.ftt-result-red .ftt-result-badge-title[b-gv37puy7l3] { color: #831F23; }
.ftt-result-red .ftt-result-badge-desc[b-gv37puy7l3]  { color: #831F23; }

.ftt-result-amber[b-gv37puy7l3] {
    border: 1.5px solid #fcd34d;
    background: #fffbeb;
}
.ftt-result-amber .ftt-result-badge-title[b-gv37puy7l3] { color: #b45309; }
.ftt-result-amber .ftt-result-badge-desc[b-gv37puy7l3]  { color: #92400e; }

.ftt-result-body[b-gv37puy7l3] {
    color: #374151;
    line-height: 1.7;
    margin: 0;
}

/* ── Mobile responsive ── */
@media (max-width: 600px) {
    .ftt-header[b-gv37puy7l3] {
        padding: 0 20px 8px;
    }
    .ftt-body[b-gv37puy7l3] {
        padding: 0 20px 0 !important;
    }
    .ftt-cta-bar[b-gv37puy7l3] {
        padding: 16px 20px max(20px, env(safe-area-inset-bottom));
    }
}
/* /Components/Pages/QuickInvite.razor.rz.scp.css */
/* Shared hover-tooltip pattern (tooltip-wrap / tooltip-text), matching the ingredients panels.
   Used on the invite-history "resent" indicator to reveal the original send date on hover.
   Anchored to the right edge of the trigger (rather than centered) because the indicator sits at
   the right of the row, so the bubble opens leftward and stays on screen. */
.tooltip-wrap[b-d7neuv1ot5] { position: relative; display: inline-flex; }
.tooltip-wrap .tooltip-text[b-d7neuv1ot5] {
    display: none; position: absolute; top: 100%; right: 0;
    margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: #1e1b2e; color: white;
    font-size: 0.75rem; font-style: normal; line-height: 1.4; border-radius: 0.375rem;
    white-space: normal; width: max-content; max-width: 18rem; z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    text-align: left;
}
.tooltip-wrap:hover .tooltip-text[b-d7neuv1ot5] { display: block; }
/* /Components/Pages/Waitlist.razor.rz.scp.css */
/* Waitlist page — layout, buttons, and keyframes only.
   Colors, fonts, radii and shadows all come from the global design tokens
   (wwwroot/css/tokens.css, loaded app-wide via App.razor). This page declares
   NO palette or type tokens of its own — it inherits the brand-blue primary,
   teal secondary, linen surfaces, and DM Sans / Noto Serif faces like the
   rest of the app. */
.wl[b-h7t3yt39u6] {
    color: var(--color-oyster-900);
    background: var(--color-oyster-100);
}

/* Two product cards side by side; stack on narrow screens.
   align-items:stretch (the grid default) makes both cards take the height of
   the taller one so their bottom edges line up. */
.wl-products[b-h7t3yt39u6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .wl-products[b-h7t3yt39u6] { grid-template-columns: 1fr; }
}

/* The "Join the waitlist" CTA now uses the canonical .wise-btn--primary
   (components.css) so it matches every other primary button in the app. */

/* "Leave the waitlist" text button. */
.wl-leave[b-h7t3yt39u6] {
    background: none;
    border: 0;
    color: var(--color-oyster-500);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.wl-leave:hover[b-h7t3yt39u6] { color: var(--color-oyster-700); }

@keyframes wlRise-b-h7t3yt39u6 { 0% { transform: translateY(10px); } 100% { transform: translateY(0); } }
@keyframes wlPop-b-h7t3yt39u6  { 0% { transform: scale(.97); } 100% { transform: scale(1); } }
/* /Components/Shared/AddFoodChat/AddFoodChatModal.razor.rz.scp.css */
.add-food-chat-overlay[b-6dt2w3cjcr] {
    background: var(--color-oyster-200);
    z-index: 90 !important;
}

.add-food-chat-shell[b-6dt2w3cjcr] {
    background: var(--color-oyster-100);
    color: var(--color-oyster-900);
    box-shadow: 0 4px 48px rgba(0, 0, 0, 0.06);
    min-height: 100dvh;
}

.add-food-chat-topbar[b-6dt2w3cjcr] {
    min-height: 68px;
    padding: 1rem 2rem;
    background: #ffffff;
    border-bottom: 1px solid var(--color-oyster-300);
}

.add-food-chat-logo[b-6dt2w3cjcr] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 999px;
    background: var(--color-indigo-600);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    box-shadow: 0 0 24px rgba(37, 80, 124, 0.28);
}

.add-food-chat-logo img[b-6dt2w3cjcr] {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

.add-food-chat-title[b-6dt2w3cjcr] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-oyster-900);
    line-height: 1.1;
}

.add-food-chat-subtitle[b-6dt2w3cjcr] {
    margin: 2px 0 0;
    color: var(--color-oyster-500);
    font-size: 0.75rem;
    font-weight: 500;
}

.add-food-chat-icon-button[b-6dt2w3cjcr] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: var(--color-oyster-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.add-food-chat-icon-button:hover[b-6dt2w3cjcr] {
    background: var(--color-oyster-200);
    color: var(--color-oyster-800);
}

.add-food-chat-main[b-6dt2w3cjcr] {
    padding: 1.25rem;
    gap: 1rem;
    overflow: hidden;
}

.add-food-chat-conversation[b-6dt2w3cjcr] {
    background: var(--color-oyster-100);
    border: 1px solid var(--color-oyster-300);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}

.add-food-chat-product-panel[b-6dt2w3cjcr] {
    width: 360px;
    min-width: 360px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}

/* Claim card for Discovered edit sessions: sits above the spec sheet so the
   review-then-claim step is visible next to the data being reviewed. Indigo
   tint (invitation, not warning) to contrast with the amber unsaved bar. */
.add-food-claim-card[b-6dt2w3cjcr] {
    flex-shrink: 0;
    margin: 12px 12px 0;
    padding: 12px;
    border: 1px solid var(--color-indigo-200, #c7d2fe);
    border-radius: 12px;
    background: var(--color-indigo-50, #eef2ff);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-food-claim-lead[b-6dt2w3cjcr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.add-food-claim-lead > .material-icons[b-6dt2w3cjcr] {
    color: var(--color-primary, #4f46e5);
    font-size: 20px;
    margin-top: 1px;
}

.add-food-claim-title[b-6dt2w3cjcr] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-oyster-900, #1a102c);
}

.add-food-claim-sub[b-6dt2w3cjcr],
.add-food-claim-attest[b-6dt2w3cjcr] {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-oyster-600, #5d566a);
}

.add-food-claim-attest[b-6dt2w3cjcr] {
    font-weight: 500;
    color: var(--color-oyster-900, #1a102c);
}

.add-food-claim-actions[b-6dt2w3cjcr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.add-food-claim-btn[b-6dt2w3cjcr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: none;
    border-radius: 9999px;
    background: var(--color-primary, #4f46e5);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.add-food-claim-btn:hover:not(:disabled)[b-6dt2w3cjcr] {
    background: var(--color-primary-bright, #4338ca);
}

.add-food-claim-btn:disabled[b-6dt2w3cjcr] {
    opacity: 0.5;
    cursor: default;
}

.add-food-claim-cancel[b-6dt2w3cjcr] {
    padding: 7px 12px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--color-oyster-600, #5d566a);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.add-food-claim-cancel:hover:not(:disabled)[b-6dt2w3cjcr] {
    background: rgba(26, 16, 44, 0.06);
}

.add-food-claim-error[b-6dt2w3cjcr] {
    font-size: 0.75rem;
    color: #b91c1c;
}

@media (max-width: 1180px) {
    .add-food-chat-main[b-6dt2w3cjcr] {
        padding: 0;
        gap: 0;
    }

    .add-food-chat-conversation[b-6dt2w3cjcr] {
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
    }

    .add-food-chat-product-panel[b-6dt2w3cjcr] {
        width: 320px;
        min-width: 320px;
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
    }
}

@media (max-width: 900px) {
    .add-food-chat-main[b-6dt2w3cjcr] {
        flex-direction: column;
    }

    .add-food-chat-product-panel[b-6dt2w3cjcr] {
        width: 100%;
        min-width: 0;
        height: 42vh;
        border-left: 0;
        border-right: 0;
    }
}

@media (max-width: 640px) {
    .add-food-chat-shell[b-6dt2w3cjcr] {
        height: 100dvh;
    }

    .add-food-chat-topbar[b-6dt2w3cjcr] {
        padding: 0.75rem 1rem;
    }
}
/* /Components/Shared/AddFoodChat/BatchTaskList.razor.rz.scp.css */
.add-food-history[b-3amchbhvmk] {
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}

.add-food-history-collapsed[b-3amchbhvmk] {
    align-self: stretch;
}

.add-food-history-header[b-3amchbhvmk] {
    border-bottom: 1px solid var(--color-oyster-300);
    background: #ffffff;
}

.add-food-history-icon[b-3amchbhvmk] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: var(--color-oyster-500);
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-food-history-icon:hover[b-3amchbhvmk] {
    background: var(--color-oyster-200);
    color: var(--color-indigo-600);
}

.add-food-history-title[b-3amchbhvmk] {
    color: var(--color-oyster-500);
}

.add-food-history-item-meta[b-3amchbhvmk] {
    color: var(--color-oyster-500);
}

.add-food-history-item[b-3amchbhvmk] {
    border: 1px solid transparent;
    color: var(--color-oyster-800);
}

.add-food-history-item:hover[b-3amchbhvmk] {
    background: var(--color-oyster-100);
}

.add-food-history-item-active[b-3amchbhvmk] {
    background: var(--color-primary-soft);
    border-color: var(--color-indigo-200);
}

.add-food-history-item-title[b-3amchbhvmk] {
    color: var(--color-oyster-900);
}

@media (max-width: 1180px) {
    .add-food-history[b-3amchbhvmk] {
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
    }
}

@media (max-width: 900px) {
    .add-food-history[b-3amchbhvmk] {
        display: none;
    }
}
/* /Components/Shared/AddFoodChat/ChatComposer.razor.rz.scp.css */
.add-food-composer[b-ajjuu756yk] {
    position: relative;
    z-index: 2;
    padding: 1.25rem 2.5rem max(1.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
    background: #ffffff;
    border-top: 1px solid var(--color-oyster-300);
}

.add-food-composer-stack[b-ajjuu756yk] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.add-food-suggestion-row[b-ajjuu756yk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.add-food-composer-suggestion-chip[b-ajjuu756yk] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--color-indigo-200);
    background: var(--color-primary-soft);
    color: var(--color-indigo-600);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.add-food-composer-suggestion-chip:hover:not(:disabled)[b-ajjuu756yk] {
    background: var(--color-indigo-100);
    border-color: var(--color-indigo-300);
}

.add-food-composer-suggestion-chip:active:not(:disabled)[b-ajjuu756yk] {
    transform: translateY(1px);
}

.add-food-composer-suggestion-chip:disabled[b-ajjuu756yk] {
    opacity: 0.55;
    cursor: not-allowed;
}

.add-food-attachments-row[b-ajjuu756yk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.add-food-attachment-chip[b-ajjuu756yk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 38px;
    padding: 0 0.5rem 0 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--color-oyster-300);
    background: var(--color-oyster-100);
    color: var(--color-oyster-900);
    font-size: 12px;
    font-weight: 600;
    max-width: 240px;
}

.add-food-attachment-chip-thumb[b-ajjuu756yk] {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--color-oyster-200);
    color: var(--color-indigo-600);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.add-food-attachment-chip-thumb img[b-ajjuu756yk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.add-food-attachment-chip-thumb .material-icons[b-ajjuu756yk] {
    font-size: 18px;
}

.add-food-attachment-chip-spinner[b-ajjuu756yk] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 248, 243, 0.78);
    color: var(--color-indigo-600);
}

.add-food-attachment-chip-spinner .material-icons[b-ajjuu756yk] {
    font-size: 16px;
}

.add-food-attachment-chip-name[b-ajjuu756yk] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.add-food-attachment-chip-remove[b-ajjuu756yk] {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--color-oyster-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease;
}

.add-food-attachment-chip-remove:hover:not(:disabled)[b-ajjuu756yk] {
    background: var(--color-oyster-200);
    color: var(--color-oyster-900);
}

.add-food-attachment-chip-remove:disabled[b-ajjuu756yk] {
    opacity: 0.4;
    cursor: not-allowed;
}

.add-food-attachment-chip-remove .material-icons[b-ajjuu756yk] {
    font-size: 16px;
}

.add-food-input-row[b-ajjuu756yk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.add-food-input-wrap[b-ajjuu756yk] {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    min-height: 52px;
    padding: 22px 12px 10px 14px;
    background: var(--color-oyster-100);
    border: 1.5px solid var(--color-oyster-300);
    border-radius: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.add-food-input-wrap:focus-within[b-ajjuu756yk] {
    border-color: var(--color-indigo-400);
    box-shadow: 0 0 0 3px rgba(37, 80, 124, 0.15);
}

.add-food-input-label[b-ajjuu756yk] {
    position: absolute;
    top: 6px;
    left: 14px;
    color: var(--color-oyster-500);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
}

.add-food-input-wrap:focus-within .add-food-input-label[b-ajjuu756yk] {
    color: var(--color-indigo-600);
}

.add-food-input[b-ajjuu756yk] {
    flex: 1;
    min-width: 0;
    /* `field-sizing: content` auto-grows the textarea as the user types, up to
       max-height — replaces a JS resize handler that previously ran on every
       keystroke. Supported in Chrome/Edge 123+, Safari 17.4+, Firefox 137+. */
    field-sizing: content;
    min-height: 1.35em;
    max-height: 300px;
    resize: none;
    overflow-y: auto;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-oyster-900);
    font-size: 14px;
    line-height: 1.35;
    padding: 0;
    box-sizing: border-box;
}

/* Hide the first-turn suggestion chip once the user starts typing. Pure CSS
   replaces the per-keystroke server round-trip that used to drive this. */
.add-food-composer-stack:not(:has(.add-food-input:placeholder-shown)) .add-food-suggestion-row[b-ajjuu756yk] {
    display: none;
}

.add-food-input[b-ajjuu756yk]::placeholder {
    color: var(--color-oyster-400);
}

.add-food-input-divider[b-ajjuu756yk] {
    width: 1px;
    height: 18px;
    background: var(--color-oyster-300);
    flex-shrink: 0;
}

.add-food-input-icon[b-ajjuu756yk] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: var(--color-oyster-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}

.add-food-input-icon:hover[b-ajjuu756yk] {
    background: var(--color-oyster-200);
    color: var(--color-indigo-600);
}

.add-food-input-icon .material-icons[b-ajjuu756yk] {
    font-size: 19px;
}

.add-food-send-button[b-ajjuu756yk] {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--color-indigo-600);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.add-food-send-button:hover[b-ajjuu756yk] {
    background: var(--color-indigo-700);
}

.add-food-send-button:disabled[b-ajjuu756yk],
.add-food-input-icon:disabled[b-ajjuu756yk] {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .add-food-composer[b-ajjuu756yk] {
        padding: 0.75rem 0.875rem max(1rem, calc(env(safe-area-inset-bottom) + 1rem));
    }
}
/* /Components/Shared/AddFoodChat/ChatHistoryPanel.razor.rz.scp.css */
.add-food-history[b-uko8puykau] {
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}

.add-food-history-collapsed[b-uko8puykau] {
    align-self: stretch;
}

.add-food-history-header[b-uko8puykau] {
    border-bottom: 1px solid var(--color-oyster-300);
    background: #ffffff;
}

.add-food-history-icon[b-uko8puykau] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: var(--color-oyster-500);
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-food-history-icon:hover[b-uko8puykau] {
    background: var(--color-oyster-200);
    color: var(--color-indigo-600);
}

.add-food-history-title[b-uko8puykau] {
    color: var(--color-oyster-500);
}

.add-food-history-new[b-uko8puykau] {
    background: var(--color-indigo-600);
    color: #ffffff;
}

.add-food-history-new:hover[b-uko8puykau] {
    background: var(--color-indigo-700);
}

.add-food-history-empty[b-uko8puykau],
.add-food-history-item-meta[b-uko8puykau] {
    color: var(--color-oyster-500);
}

.add-food-history-item[b-uko8puykau] {
    border: 1px solid transparent;
    color: var(--color-oyster-800);
}

.add-food-history-item:hover[b-uko8puykau] {
    background: var(--color-oyster-100);
}

.add-food-history-item-active[b-uko8puykau] {
    background: var(--color-primary-soft);
    border-color: var(--color-indigo-200);
}

.add-food-history-item-title[b-uko8puykau] {
    color: var(--color-oyster-900);
}

@media (max-width: 1180px) {
    .add-food-history[b-uko8puykau] {
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
    }
}

@media (max-width: 900px) {
    .add-food-history[b-uko8puykau] {
        display: none;
    }
}
/* /Components/Shared/AddFoodChat/ChatTranscript.razor.rz.scp.css */
.add-food-transcript[b-nnx55b2dbr] {
    position: relative;
    padding: 2rem 2.5rem;
    background: var(--color-oyster-100);
}

.add-food-welcome[b-nnx55b2dbr] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.add-food-welcome-logo-wrap[b-nnx55b2dbr] {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-food-welcome-ring[b-nnx55b2dbr] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    margin-left: -36px;
    margin-top: -36px;
    border-radius: 999px;
    border: 1px solid rgba(37, 80, 124, 0.4);
    box-shadow: 0 0 16px rgba(37, 80, 124, 0.25), 0 0 32px rgba(37, 80, 124, 0.15);
    animation: addFoodRingBloom-b-nnx55b2dbr 5s cubic-bezier(0.2, 0.85, 0.25, 1) infinite;
}

.add-food-welcome-ring:nth-child(2)[b-nnx55b2dbr] {
    animation-delay: -1.66s;
}

.add-food-welcome-ring:nth-child(3)[b-nnx55b2dbr] {
    animation-delay: -3.33s;
}

.add-food-welcome-logo[b-nnx55b2dbr] {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--color-indigo-600);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(37, 80, 124, 0.35), 0 0 48px rgba(37, 80, 124, 0.2);
}

.add-food-welcome-logo img[b-nnx55b2dbr] {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

.add-food-welcome p[b-nnx55b2dbr] {
    color: var(--color-oyster-500);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

.add-food-msg-row[b-nnx55b2dbr] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 2px 0;
    border-radius: 8px;
    margin-top: 14px;
}

.add-food-msg-row:hover[b-nnx55b2dbr] {
    background: rgba(0, 0, 0, 0.025);
}

.add-food-msg-avatar-col[b-nnx55b2dbr] {
    width: 36px;
    min-width: 36px;
    padding-top: 2px;
}

.add-food-assistant-avatar[b-nnx55b2dbr],
.add-food-user-avatar[b-nnx55b2dbr] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.add-food-assistant-avatar[b-nnx55b2dbr] {
    background: var(--color-indigo-600);
    padding: 7px;
    box-shadow: 0 0 0 1px rgba(37, 80, 124, 0.18);
}

.add-food-assistant-avatar img[b-nnx55b2dbr] {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

.add-food-user-avatar[b-nnx55b2dbr] {
    background: var(--color-oyster-200);
    border: 1px solid var(--color-oyster-300);
    color: var(--color-indigo-600);
    font-size: 11px;
    font-weight: 800;
}

.add-food-msg-content[b-nnx55b2dbr] {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
}

.add-food-msg-meta[b-nnx55b2dbr] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
    line-height: 1;
}

.add-food-msg-name[b-nnx55b2dbr] {
    font-size: 14px;
    font-weight: 800;
}

.add-food-msg-name-assistant[b-nnx55b2dbr] {
    color: var(--color-indigo-600);
}

.add-food-msg-name-user[b-nnx55b2dbr] {
    color: var(--color-oyster-800);
}

.add-food-msg-time[b-nnx55b2dbr] {
    font-size: 11px;
    color: var(--color-oyster-500);
}

.add-food-msg-text[b-nnx55b2dbr] {
    max-width: 760px;
    color: var(--color-oyster-800);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.add-food-rich-text[b-nnx55b2dbr] {
    white-space: normal;
}

/* ::deep is required because the child elements below are generated by Markdig
   inside a MarkupString and don't carry Blazor's scoped-CSS attribute. Without
   ::deep, none of these rules match. */

.add-food-rich-text[b-nnx55b2dbr]  :is(p, ul, ol, blockquote, pre) {
    margin: 0 0 1rem;
}

.add-food-rich-text[b-nnx55b2dbr]  :is(p, ul, ol, blockquote, pre):last-child {
    margin-bottom: 0;
}

.add-food-rich-text[b-nnx55b2dbr]  strong {
    color: var(--color-oyster-900);
    font-weight: 800;
}

.add-food-rich-text[b-nnx55b2dbr]  em {
    color: var(--color-oyster-600);
}

.add-food-rich-text[b-nnx55b2dbr]  :is(ul, ol) {
    padding-left: 1.2rem;
}

.add-food-rich-text[b-nnx55b2dbr]  li {
    margin: 0.15rem 0;
}

.add-food-rich-text[b-nnx55b2dbr]  code {
    background: var(--color-oyster-200);
    color: var(--color-indigo-600);
    border-radius: 0.25rem;
    padding: 0.1rem 0.3rem;
    font-size: 0.9em;
}

.add-food-rich-text[b-nnx55b2dbr]  a {
    color: var(--color-indigo-600);
    text-decoration: underline;
}

.add-food-rich-text[b-nnx55b2dbr]  table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-oyster-300);
    margin: 0 0 1rem;
    font-size: 13px;
}

.add-food-rich-text[b-nnx55b2dbr]  table:last-child {
    margin-bottom: 0;
}

.add-food-rich-text[b-nnx55b2dbr]  thead th {
    background: var(--color-oyster-200);
    color: var(--color-oyster-800);
    font-weight: 800;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-oyster-300);
}

.add-food-rich-text[b-nnx55b2dbr]  tbody td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-oyster-200);
    color: var(--color-oyster-800);
}

.add-food-rich-text[b-nnx55b2dbr]  tbody tr:last-child td {
    border-bottom: none;
}

.add-food-rich-text[b-nnx55b2dbr]  tbody tr:nth-child(even) {
    background: rgba(37, 80, 124, 0.03);
}

.add-food-attachments[b-nnx55b2dbr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.add-food-tool-chips[b-nnx55b2dbr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.65rem;
}

.add-food-attachment-preview[b-nnx55b2dbr] {
    width: 144px;
    height: 144px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--color-oyster-300);
    background: #ffffff;
}

.add-food-file-pill[b-nnx55b2dbr],
.add-food-tool-chip[b-nnx55b2dbr] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    border-radius: 999px;
    border: 1px solid var(--color-oyster-300);
    background: var(--color-oyster-200);
    color: var(--color-oyster-600);
    font-size: 12px;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
}

.add-food-file-pill span:last-child[b-nnx55b2dbr] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-food-tool-chip-active[b-nnx55b2dbr] {
    background: var(--color-primary-soft);
    border-color: var(--color-indigo-200);
    color: var(--color-indigo-600);
}

.add-food-suggestions[b-nnx55b2dbr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.add-food-suggestion-chip[b-nnx55b2dbr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--color-indigo-200);
    background: var(--color-primary-soft);
    color: var(--color-indigo-600);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.add-food-suggestion-chip:hover:not(:disabled)[b-nnx55b2dbr] {
    background: var(--color-indigo-100);
    border-color: var(--color-indigo-300);
}

.add-food-suggestion-chip:active:not(:disabled)[b-nnx55b2dbr] {
    transform: translateY(1px);
}

.add-food-suggestion-chip:disabled[b-nnx55b2dbr] {
    opacity: 0.55;
    cursor: not-allowed;
}

.add-food-suggestion-chip-edit[b-nnx55b2dbr] {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

.add-food-suggestion-chip-edit:hover:not(:disabled)[b-nnx55b2dbr] {
    background: #fde68a;
    border-color: #fbbf24;
}

.add-food-review-parse-chip[b-nnx55b2dbr],
.add-food-suggestion-chip-attest[b-nnx55b2dbr] {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}

.add-food-review-parse-chip:hover:not(:disabled)[b-nnx55b2dbr],
.add-food-suggestion-chip-attest:hover:not(:disabled)[b-nnx55b2dbr] {
    background: #d1fae5;
    border-color: #34d399;
}

.add-food-narration-row[b-nnx55b2dbr] {
    display: flex;
    margin-top: 12px;
    padding-left: 46px;
}

.add-food-system-note[b-nnx55b2dbr] {
    color: var(--color-oyster-500);
    font-size: 12px;
    font-style: italic;
}

/* Positioning wrapper only; the dots themselves come from the shared
   <ThinkingDots /> component. */
.add-food-typing[b-nnx55b2dbr] {
    display: inline-flex;
    align-items: center;
    padding-top: 6px;
}

/* Trailing indicator rendered at the tail of the live assistant bubble (after any
   streamed text or tool chips). A little top breathing room separates it from the
   content above when the bubble already has text. */
.add-food-typing-inline[b-nnx55b2dbr] {
    margin-top: 2px;
}

@keyframes addFoodRingBloom-b-nnx55b2dbr {
    0% { transform: scale(1); opacity: 0.48; }
    55% { opacity: 0.16; }
    100% { transform: scale(3.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .add-food-welcome-ring[b-nnx55b2dbr] {
        animation: none;
    }
}

@media (max-width: 640px) {
    .add-food-transcript[b-nnx55b2dbr] {
        padding: 1rem 0.875rem;
    }

    .add-food-msg-avatar-col[b-nnx55b2dbr] {
        width: 30px;
        min-width: 30px;
    }

    .add-food-assistant-avatar[b-nnx55b2dbr],
    .add-food-user-avatar[b-nnx55b2dbr] {
        width: 30px;
        height: 30px;
    }
}
/* /Components/Shared/AddFoodChat/EndOfSessionSummary.razor.rz.scp.css */
.add-food-session-summary[b-z2isqwr33x] {
    background: #ffffff;
}

.add-food-session-summary h2[b-z2isqwr33x],
.add-food-session-name[b-z2isqwr33x] {
    color: var(--color-oyster-900);
}

.add-food-session-summary p[b-z2isqwr33x],
.add-food-session-meta[b-z2isqwr33x] {
    color: var(--color-oyster-500);
}

.add-food-session-card[b-z2isqwr33x] {
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
}

.add-food-session-avatar[b-z2isqwr33x] {
    background: var(--color-oyster-200);
    color: var(--color-indigo-600);
}

.add-food-session-link[b-z2isqwr33x] {
    color: var(--color-indigo-600);
}

.add-food-session-link:hover[b-z2isqwr33x] {
    color: var(--color-indigo-700);
}

.add-food-session-button[b-z2isqwr33x] {
    background: var(--color-indigo-600);
    color: #ffffff;
}

.add-food-session-button:hover[b-z2isqwr33x] {
    background: var(--color-indigo-700);
}
/* /Components/Shared/AddFoodChat/FoodChatStepTracker.razor.rz.scp.css */
.step-tracker[b-ifvqiy6n6z] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    gap: 0;
    border-bottom: 1px solid var(--color-oyster-300);
    background: #ffffff;
    min-height: 52px;
}

.step-item[b-ifvqiy6n6z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.step-circle[b-ifvqiy6n6z] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.step-label[b-ifvqiy6n6z] {
    font-size: 0.625rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

.step-connector[b-ifvqiy6n6z] {
    width: 24px;
    height: 2px;
    flex-shrink: 0;
    margin-bottom: 16px;
    border-radius: 1px;
    transition: background 0.2s ease;
}

@media (min-width: 900px) {
    .step-connector[b-ifvqiy6n6z] {
        width: 36px;
    }
}

@media (min-width: 1180px) {
    .step-connector[b-ifvqiy6n6z] {
        width: 48px;
    }
}

@media (max-width: 640px) {
    .step-tracker[b-ifvqiy6n6z] {
        padding: 8px 12px;
    }

    .step-label[b-ifvqiy6n6z] {
        display: none;
    }

    .step-connector[b-ifvqiy6n6z] {
        width: 16px;
        margin-bottom: 0;
    }
}
/* /Components/Shared/AddFoodChat/ParseAttestationModal.razor.rz.scp.css */
/* Scoped CSS for ParseAttestationModal. Mirrors the FoodDetails parsed-tree presentation
   for a chat-side read-only viewer. We can't reach FoodDetails.razor.css ::deep selectors
   from this scope, so the relevant base + tree styles are restated here. Action affordances
   (flag, confirm, lookup) live in FoodDetails-only state, so their styles are intentionally
   omitted — the IsReadOnly path on ParsedIngredientRow doesn't render any of them. */

.readonly-parsed-tree-scroll[b-exivwlb6f4] {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: clip;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

[b-exivwlb6f4] .readonly-parsed-tree { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
[b-exivwlb6f4] .readonly-parsed-tree thead th {
    background: #f9fafb; padding: 8px 14px; text-align: left;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    position: sticky; top: 0; z-index: 10;
}
[b-exivwlb6f4] .readonly-parsed-tree tbody td {
    padding: 7px 14px; color: #374151;
    border-bottom: 1px solid #f3f4f6; vertical-align: middle;
}
[b-exivwlb6f4] .readonly-parsed-tree tbody tr:last-child td { border-bottom: none; }
[b-exivwlb6f4] .readonly-parsed-tree td:nth-child(3) { white-space: nowrap; }

/* ── Tree indent rails ── mirrors IngredientsVerification.razor.css */
[b-exivwlb6f4] .readonly-parsed-tree .tree-cell { padding-left: 4px; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-cell-inner { display: flex; align-items: center; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-cell-railed .tree-cell-inner { height: 100%; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    align-self: stretch;
    position: relative;
}
/* Pipes extend past the rail box to bridge cell padding + border — see
   IngredientsVerification.razor.css comment for the math. */
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-continue::before,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-branch::before,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-lastbranch::before {
    content: ''; position: absolute; left: 10px;
    width: 1.5px; background: #94a3b8;
}
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-continue::before,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-branch::before { top: -8px; bottom: -9px; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-lastbranch::before { top: -8px; height: calc(50% + 8px); }
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-branch::after,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-lastbranch::after {
    content: ''; position: absolute; top: 50%; left: 10px;
    width: 11px; height: 1.5px; background: #94a3b8;
    transform: translateY(-0.5px);
}

/* ── Tree name styles ── */
[b-exivwlb6f4] .readonly-parsed-tree .tree-name-root { font-weight: 600; color: #111827; text-transform: capitalize; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-name-child { color: #374151; text-transform: capitalize; }

/* ── Depth-based row tinting ── */
[b-exivwlb6f4] .readonly-parsed-tree tr[data-depth] {
    background: hsl(220 14% calc(99% - min(var(--tree-depth, 0), 10) * 0.55%));
}

[b-exivwlb6f4] .readonly-parsed-tree .parser-norm-static { font-size: 0.78rem; }

/* ── Match badges ── */
[b-exivwlb6f4] .readonly-parsed-tree .match-cell { display: inline-flex; align-items: center; gap: 5px; }
[b-exivwlb6f4] .readonly-parsed-tree .code-interp-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-green { background: #dcfce7; color: #166534; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-yellow { background: #fef3c7; color: #92400e; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-red { background: #fee2e2; color: #991b1b; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-gray { background: #f3f4f6; color: #374151; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-audited { background: var(--color-primary-soft); color: var(--color-primary); }
[b-exivwlb6f4] .readonly-parsed-tree .audited-badge {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 0.6rem; font-weight: 700;
    background: #dbeafe; color: #1e3a8a;
    border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}

/* The audit-note tooltip stays informational even in read-only mode. */
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-hover {
    position: relative; display: inline-flex; align-items: center;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-popup {
    position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 50;
    width: 280px; padding: 10px 12px;
    background: #fff; border: 1.5px solid var(--color-indigo-600); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    text-align: left; white-space: normal;
    font-weight: 400; font-size: 0.78rem; line-height: 1.45; color: #1f2937;
    visibility: hidden; opacity: 0;
    transition: visibility 0s linear 0s, opacity 0.15s ease 0s;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-hover:hover .ingred-flag-popup,
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-hover:focus-within .ingred-flag-popup {
    visibility: visible; opacity: 1;
    transition: visibility 0s linear 0.5s, opacity 0.15s ease 0.5s;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-popup-header {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--color-primary); margin-bottom: 4px;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-popup-body { white-space: pre-wrap; }
/* /Components/Shared/AddFoodChat/ProductChipStrip.razor.rz.scp.css */
.add-food-product-chips[b-0qs0btxcd0] {
    background: #ffffff;
    border-bottom: 1px solid var(--color-oyster-300);
}

.add-food-product-chip[b-0qs0btxcd0] {
    background: var(--color-oyster-200);
    border: 1px solid transparent;
    color: var(--color-oyster-800);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.add-food-product-chip:hover[b-0qs0btxcd0] {
    background: var(--color-oyster-300);
    border-color: var(--color-oyster-300);
}

.add-food-product-chip-active[b-0qs0btxcd0] {
    background: var(--color-indigo-600);
    border-color: var(--color-indigo-600);
    color: #ffffff;
}

.add-food-product-chip-remove:hover[b-0qs0btxcd0] {
    background: rgba(255, 255, 255, 0.2);
}
/* /Components/Shared/AddFoodChat/SpecSheetPane.razor.rz.scp.css */
.add-food-spec-pane[b-7rbzlvfkox] {
    background: #ffffff;
    color: var(--color-oyster-900);
}

.add-food-spec-header[b-7rbzlvfkox] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid var(--color-oyster-300);
}

/* Let the title block shrink so its subtitle ellipsizes instead of shoving the
   fixed-width edit-hint pill off the right edge of the header. */
.add-food-spec-header-main[b-7rbzlvfkox] {
    min-width: 0;
}

.add-food-spec-header h2[b-7rbzlvfkox] {
    margin: 0;
    color: var(--color-oyster-900);
    font-size: 0.875rem;
    font-weight: 800;
}

.add-food-spec-header p[b-7rbzlvfkox] {
    margin: 0.15rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-oyster-500);
    font-size: 0.75rem;
}

/* Editing is on hold while the AI runs a turn (edits would be dropped mid-turn). */
.add-food-spec-header p.paused[b-7rbzlvfkox] {
    color: var(--color-oyster-400);
    font-style: italic;
}

.add-food-spec-count[b-7rbzlvfkox],
.add-food-saved-pill[b-7rbzlvfkox] {
    border: 1px solid var(--color-indigo-200);
    background: var(--color-primary-soft);
    color: var(--color-indigo-600);
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    white-space: nowrap;
}

.add-food-empty-product .material-icons[b-7rbzlvfkox],
.add-food-empty-product p[b-7rbzlvfkox] {
    color: var(--color-oyster-500);
}

.add-food-empty-product[b-7rbzlvfkox] {
    position: relative;
    overflow: hidden;
}

.add-food-empty-product > .max-w-sm[b-7rbzlvfkox] {
    position: relative;
    z-index: 2;
}

.add-food-empty-product.scanning[b-7rbzlvfkox] {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-oyster-100) 100%);
}

.add-food-empty-product.scanning .material-icons[b-7rbzlvfkox] {
    color: var(--color-primary);
}

.add-food-empty-product h2[b-7rbzlvfkox] {
    color: var(--color-oyster-900);
}

.add-food-spec-body[b-7rbzlvfkox] {
    padding: 1rem;
}

/* ── Product card ─────────────────────────────────────── */

.product-card[b-7rbzlvfkox] {
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(26, 16, 44, 0.04);
}

.product-image[b-7rbzlvfkox] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--color-oyster-100);
    overflow: hidden;
}

.product-image.has-image[b-7rbzlvfkox] {
    background: var(--color-oyster-100);
}

.product-image img.product-photo[b-7rbzlvfkox] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pv-brand-chip[b-7rbzlvfkox] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.pv-brand-chip img[b-7rbzlvfkox] {
    width: auto;
    height: 28px;
    max-width: 80px;
    object-fit: contain;
    background: transparent;
    border: none;
    border-radius: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
    display: block;
}

.pv-brand-chip span[b-7rbzlvfkox] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-oyster-900);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.product-image .placeholder[b-7rbzlvfkox] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-indigo-100) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-oyster-600);
}

.product-image .placeholder .material-icons[b-7rbzlvfkox] {
    font-size: 28px;
    color: var(--color-primary);
}

.product-image .placeholder-label[b-7rbzlvfkox] {
    font-weight: 600;
}

/* UPC block sits below the nutrition facts panel, full-width with a quiet card frame. */
.upc-block[b-7rbzlvfkox] {
    margin-top: 14px;
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 8px;
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.upc-block img[b-7rbzlvfkox] {
    width: 100%;
    height: 72px;
    display: block;
    object-fit: contain;
}

.upc-num[b-7rbzlvfkox] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--color-oyster-600);
    text-align: center;
}

/* Missing-UPC variant of the UPC block — same red tint as missing nutrient rows so
   the user notices it as a required field. The barcode itself is rendered with a
   placeholder UPC ("000000000000") and grayed out to read as a stand-in, not data. */
.upc-block.missing[b-7rbzlvfkox] {
    background-color: rgba(254, 202, 202, 0.32);
    transition: background-color 240ms ease-out;
}

.upc-block.missing.scanning[b-7rbzlvfkox] {
    position: relative;
    overflow: hidden;
    border-color: var(--color-indigo-200);
    background-color: var(--color-primary-soft);
}

.upc-block.missing img[b-7rbzlvfkox] {
    opacity: 0.45;
    filter: grayscale(1);
}

.upc-block.missing.scanning img[b-7rbzlvfkox] {
    opacity: 0.62;
    filter: grayscale(1) sepia(0.18) hue-rotate(190deg) saturate(1.2);
}

.upc-num-missing[b-7rbzlvfkox] {
    color: #b3261e;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.upc-block.missing.scanning .upc-num-missing[b-7rbzlvfkox] {
    color: var(--color-indigo-700);
}

/* ── Ingredients block ────────────────────────────────────
   Sits between the Nutrition Facts panel and the UPC block. Quiet card frame
   matching .upc-block; shows the raw ingredient string verbatim. When empty,
   takes the same red tint as a missing UPC so the user can see at a glance
   that the field still needs to be captured. */
.ingredients-block[b-7rbzlvfkox] {
    margin-top: 14px;
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 8px;
    padding: 12px 16px 14px;
}

.ingredients-hdr[b-7rbzlvfkox] {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-oyster-600);
    margin-bottom: 6px;
}

.ingredients-text[b-7rbzlvfkox] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-oyster-900);
    white-space: pre-wrap;
    word-break: break-word;
}

.ingredients-block.missing[b-7rbzlvfkox] {
    background-color: rgba(254, 202, 202, 0.32);
    transition: background-color 240ms ease-out;
}

.ingredients-block.missing.scanning[b-7rbzlvfkox] {
    position: relative;
    overflow: hidden;
    border-color: var(--color-indigo-200);
    background-color: var(--color-primary-soft);
}

.ingredients-text-missing[b-7rbzlvfkox] {
    margin: 0;
    font-size: 0.78rem;
    color: #b3261e;
    font-weight: 600;
    font-style: italic;
}

.ingredients-block.missing.scanning .ingredients-text-missing[b-7rbzlvfkox] {
    color: var(--color-indigo-700);
}

.ingredients-block.missing.scanning[b-7rbzlvfkox]::after,
.upc-block.missing.scanning[b-7rbzlvfkox]::after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 7px;
    width: 62%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(37, 80, 124, 0.15) 10%,
        rgba(37, 80, 124, 0.9) 45%,
        rgba(56, 189, 248, 0.95) 55%,
        rgba(37, 80, 124, 0.15) 90%,
        transparent 100%);
    box-shadow:
        0 0 8px rgba(37, 80, 124, 0.65),
        0 0 18px rgba(56, 189, 248, 0.35);
    animation: row-scan-h-b-7rbzlvfkox 1.8s ease-in-out infinite;
    pointer-events: none;
}

/* ── Product body (name, brand, description, badges) ──── */

.product-body[b-7rbzlvfkox] {
    padding: 14px 16px;
}

.product-name[b-7rbzlvfkox] {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-oyster-900);
    line-height: 1.3;
    min-height: 20px;
}

.product-name.empty[b-7rbzlvfkox] {
    color: var(--color-oyster-500);
    font-weight: 400;
    font-style: italic;
}

.product-brand[b-7rbzlvfkox] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-oyster-600);
    margin-top: 2px;
}

.product-description[b-7rbzlvfkox] {
    font-size: 12px;
    color: var(--color-oyster-600);
    margin-top: 6px;
    line-height: 1.45;
}

.product-price[b-7rbzlvfkox] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-oyster-900);
    margin-top: 6px;
}

.product-meta[b-7rbzlvfkox] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.meta-pill[b-7rbzlvfkox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-oyster-100);
    color: var(--color-oyster-600);
}

.meta-pill .material-icons[b-7rbzlvfkox] {
    font-size: 13px;
    line-height: 1;
}

.meta-pill.success[b-7rbzlvfkox] {
    background: #dcfce7;
    color: #166534;
}

.meta-pill.warning[b-7rbzlvfkox] {
    background: #fef3c7;
    color: #854d0e;
}

.meta-pill.info[b-7rbzlvfkox] {
    background: var(--color-primary-soft);
    color: var(--color-indigo-700);
}

/* The shared <NutritionFactsLabel> component owns its own scoped styling, including
   the flash + missing tints. Wrapper div spaces the panel beneath the product card. */
.nf-label-wrap[b-7rbzlvfkox] {
    margin-top: 14px;
}

/* ── AI scan sweep ─────────────────────────────────────── */

.scan-sweep[b-7rbzlvfkox] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(37, 80, 124, 0.08) 100%),
        rgba(37, 80, 124, 0.06);
}

.scan-bar[b-7rbzlvfkox] {
    position: absolute;
    left: -5%;
    right: -5%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(37, 80, 124, 0.85) 20%,
        rgba(56, 189, 248, 1) 50%,
        rgba(37, 80, 124, 0.85) 80%,
        transparent 100%);
    box-shadow:
        0 0 10px rgba(37, 80, 124, 0.72),
        0 0 24px rgba(56, 189, 248, 0.44);
    animation: scan-sweep-b-7rbzlvfkox 2.2s ease-in-out infinite;
}

@keyframes scan-sweep-b-7rbzlvfkox {
    0% {
        top: 0%;
        opacity: 0.9;
    }
    50% {
        top: calc(100% - 3px);
        opacity: 1;
    }
    100% {
        top: 0%;
        opacity: 0.9;
    }
}

@keyframes row-scan-h-b-7rbzlvfkox {
    0% {
        transform: translateX(-45%);
        opacity: 0.55;
    }
    50% {
        transform: translateX(75%);
        opacity: 1;
    }
    100% {
        transform: translateX(-45%);
        opacity: 0.55;
    }
}

/* Field-change flash for chat-side product header (product name / brand / description /
   price). The NFP's own flash + missing rules live in NutritionFactsLabel.razor.css. */
@keyframes spec-field-flash-b-7rbzlvfkox {
    0% {
        background-color: rgba(37, 80, 124, 0.28);
        box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.32);
    }
    40% {
        background-color: rgba(37, 80, 124, 0.18);
        box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.18);
    }
    100% {
        background-color: transparent;
        box-shadow: inset 0 0 0 1px transparent;
    }
}

.product-name.flash-a[b-7rbzlvfkox],
.product-name.flash-b[b-7rbzlvfkox],
.product-brand.flash-a[b-7rbzlvfkox],
.product-brand.flash-b[b-7rbzlvfkox],
.product-description.flash-a[b-7rbzlvfkox],
.product-description.flash-b[b-7rbzlvfkox],
.product-price.flash-a[b-7rbzlvfkox],
.product-price.flash-b[b-7rbzlvfkox] {
    animation: spec-field-flash-b-7rbzlvfkox 2.4s ease-out;
    border-radius: 6px;
    padding: 2px 4px;
    margin-left: -4px;
    margin-right: -4px;
}

@media (prefers-reduced-motion: reduce) {
    .scan-bar[b-7rbzlvfkox] {
        top: 50%;
        animation: scan-pulse-b-7rbzlvfkox 1.6s ease-in-out infinite;
    }

    .ingredients-block.missing.scanning[b-7rbzlvfkox]::after,
    .upc-block.missing.scanning[b-7rbzlvfkox]::after {
        animation: row-scan-pulse-b-7rbzlvfkox 1.6s ease-in-out infinite;
        transform: none;
    }

    @keyframes scan-pulse-b-7rbzlvfkox {
        0%, 100% {
            opacity: 0.35;
        }
        50% {
            opacity: 1;
        }
    }

    @keyframes row-scan-pulse-b-7rbzlvfkox {
        0%, 100% {
            opacity: 0.28;
        }
        50% {
            opacity: 0.95;
        }
    }

    .product-name.flash-a[b-7rbzlvfkox],
    .product-name.flash-b[b-7rbzlvfkox],
    .product-brand.flash-a[b-7rbzlvfkox],
    .product-brand.flash-b[b-7rbzlvfkox],
    .product-description.flash-a[b-7rbzlvfkox],
    .product-description.flash-b[b-7rbzlvfkox],
    .product-price.flash-a[b-7rbzlvfkox],
    .product-price.flash-b[b-7rbzlvfkox] {
        animation: none;
    }
}

/* ── Click-to-edit affordances ─────────────────────────────
   Product-card fields (name, description, price, allergen text) swap to an inline input
   on click. Hover shows a quiet tint + pencil; the pencil reserves its space so rows
   don't shift. The NFP's own editing styles live in NutritionFactsLabel.razor.css. */

.editable-field[b-7rbzlvfkox] {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 4px;
    margin-left: -4px;
    margin-right: -4px;
    transition: background-color 120ms ease-out;
}

.editable-field:hover[b-7rbzlvfkox] {
    background-color: var(--color-primary-soft);
}

.edit-pencil[b-7rbzlvfkox] {
    display: inline-block;
    vertical-align: baseline;
    margin-left: 4px;
    font-size: 12px;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity 120ms ease-out;
    pointer-events: none;
}

.editable-field:hover .edit-pencil[b-7rbzlvfkox] {
    opacity: 1;
}

.spec-edit-input[b-7rbzlvfkox] {
    display: block;
    width: 100%;
    font: inherit;
    color: var(--color-oyster-900);
    background: #ffffff;
    border: 1px solid var(--color-indigo-200);
    border-radius: 6px;
    padding: 4px 6px;
    outline: none;
    resize: vertical;
}

.spec-edit-input:focus[b-7rbzlvfkox] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(37, 80, 124, 0.15);
}

.spec-edit-input.invalid[b-7rbzlvfkox] {
    border-color: #b3261e;
    background-color: rgba(254, 202, 202, 0.32);
}

.spec-edit-name[b-7rbzlvfkox] {
    font-size: 15px;
    font-weight: 700;
}

.spec-edit-description[b-7rbzlvfkox] {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
}

.spec-edit-price[b-7rbzlvfkox] {
    margin-top: 6px;
    max-width: 180px;
    font-size: 13px;
    font-weight: 600;
}

.spec-edit-allergen[b-7rbzlvfkox],
.spec-edit-ingredients[b-7rbzlvfkox] {
    font-size: 0.78rem;
    line-height: 1.5;
}

/* Quiet "add this optional field" line shown in place of an empty description/price/allergen. */
.spec-add-field[b-7rbzlvfkox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-oyster-500);
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 4px;
    margin-left: -4px;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.spec-add-field:hover[b-7rbzlvfkox] {
    background-color: var(--color-primary-soft);
    color: var(--color-indigo-700);
}

.spec-add-field .material-icons[b-7rbzlvfkox] {
    font-size: 14px;
    line-height: 1;
}

/* ── Hero image chooser ────────────────────────────────────
   The hero becomes clickable only when candidate images exist in session state. */

.product-image.hero-clickable[b-7rbzlvfkox] {
    cursor: pointer;
}

.hero-edit-hint[b-7rbzlvfkox] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 120ms ease-out;
    pointer-events: none;
}

.hero-edit-hint .material-icons[b-7rbzlvfkox] {
    font-size: 17px;
    line-height: 1;
}

.product-image.hero-clickable:hover .hero-edit-hint[b-7rbzlvfkox] {
    opacity: 1;
}

.hero-chooser[b-7rbzlvfkox] {
    border-bottom: 1px solid var(--color-oyster-300);
    background: var(--color-oyster-100);
    padding: 10px 12px 12px;
}

.hero-chooser-hdr[b-7rbzlvfkox] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-oyster-600);
    margin-bottom: 8px;
}

.hero-chooser-close[b-7rbzlvfkox] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--color-oyster-500);
}

.hero-chooser-close:hover[b-7rbzlvfkox] {
    background: var(--color-oyster-300);
    color: var(--color-oyster-900);
}

.hero-chooser-grid[b-7rbzlvfkox] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}

.hero-chooser-item[b-7rbzlvfkox] {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--color-oyster-300);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
    padding: 0;
    transition: border-color 120ms ease-out;
}

.hero-chooser-item:hover[b-7rbzlvfkox] {
    border-color: var(--color-primary);
}

.hero-chooser-item.current[b-7rbzlvfkox] {
    border-color: var(--color-primary);
}

.hero-chooser-item img[b-7rbzlvfkox] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-chooser-check[b-7rbzlvfkox] {
    position: absolute;
    right: 3px;
    bottom: 3px;
    font-size: 16px;
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
}

/* ── Ingredients header row (review affordance / science-team lock) ── */

.ingredients-hdr-row[b-7rbzlvfkox] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ingredients-hdr-row .ingredients-hdr[b-7rbzlvfkox] {
    margin-bottom: 0;
}

.ingredients-review-btn[b-7rbzlvfkox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-indigo-600);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-indigo-200);
    border-radius: 999px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background-color 120ms ease-out;
}

.ingredients-review-btn:hover:not(:disabled)[b-7rbzlvfkox] {
    background: var(--color-indigo-100);
}

.ingredients-review-btn:disabled[b-7rbzlvfkox] {
    opacity: 0.5;
    cursor: default;
}

.ingredients-review-btn .material-icons[b-7rbzlvfkox] {
    font-size: 13px;
    line-height: 1;
}

.ingredients-lock[b-7rbzlvfkox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-oyster-500);
    cursor: help;
}

.ingredients-lock .material-icons[b-7rbzlvfkox] {
    font-size: 13px;
    line-height: 1;
}

/* ── UPC lock (edit mode: UPC is the food's identity) ── */

.upc-lock[b-7rbzlvfkox] {
    font-size: 13px;
    line-height: 1;
    vertical-align: text-bottom;
    margin-left: 6px;
    color: var(--color-oyster-500);
    cursor: help;
}

@media (max-width: 900px) {
    .add-food-spec-header[b-7rbzlvfkox] {
        position: static;
    }
}
/* /Components/Shared/AuditResolveModal.razor.rz.scp.css */
.audit-resolve-header[b-pmilnyeteo] {
    display: block;
}

.audit-resolve-title-block[b-pmilnyeteo] {
    min-width: 0;
}

.audit-resolve-subtitle[b-pmilnyeteo] {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .audit-resolve-actions[b-pmilnyeteo] {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch !important;
        gap: 0.75rem;
        width: 100%;
    }

    .audit-resolve-actions > *[b-pmilnyeteo] {
        min-width: 0;
        width: 100%;
    }

    .audit-resolve-actions .explain-pill-btn[b-pmilnyeteo],
    .audit-resolve-actions .wise-btn[b-pmilnyeteo],
    .audit-resolve-actions button[b-pmilnyeteo] {
        justify-content: center;
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 520px) {
    .audit-resolve-header[b-pmilnyeteo] {
        padding-right: 2rem;
    }

    .audit-resolve-title-block[b-pmilnyeteo] {
        order: 1;
        text-align: left !important;
    }

    .audit-resolve-title-block h2[b-pmilnyeteo] {
        font-size: 1.5rem;
        line-height: 1.15;
    }

    .audit-resolve-subtitle[b-pmilnyeteo] {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .audit-resolve-actions[b-pmilnyeteo] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Breadcrumbs.razor.rz.scp.css */
/* Quiet single-line trail that sits above the page header without competing
   with it. Uses the design tokens (tokens.css) for the oyster ink ramp. */

.breadcrumbs[b-8xmdtvckjl] {
    margin-bottom: 10px;
    /* Scroll, never wrap: on mobile the trail pans horizontally. */
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}

.breadcrumbs[b-8xmdtvckjl]::-webkit-scrollbar {
    display: none; /* WebKit */
}

.breadcrumbs-list[b-8xmdtvckjl] {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    min-width: max-content;
}

.breadcrumbs-item[b-8xmdtvckjl] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    line-height: 1.2;
}

.breadcrumbs-link[b-8xmdtvckjl],
.breadcrumbs-text[b-8xmdtvckjl],
.breadcrumbs-current[b-8xmdtvckjl] {
    display: inline-block;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.breadcrumbs-link[b-8xmdtvckjl] {
    color: var(--color-oyster-500);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumbs-link:hover[b-8xmdtvckjl] {
    color: var(--color-oyster-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumbs-text[b-8xmdtvckjl] {
    color: var(--color-oyster-500);
}

/* Current page: slightly emphasized, still subordinate to the H1 below. */
.breadcrumbs-current[b-8xmdtvckjl] {
    color: var(--color-oyster-700);
    font-weight: 600;
}

.breadcrumbs-sep[b-8xmdtvckjl] {
    font-size: 1rem;
    color: var(--color-oyster-400);
    margin: 0 2px;
    flex-shrink: 0;
    user-select: none;
}

@media (max-width: 640px) {
    .breadcrumbs-link[b-8xmdtvckjl],
    .breadcrumbs-text[b-8xmdtvckjl],
    .breadcrumbs-current[b-8xmdtvckjl] {
        max-width: 11rem;
    }
}
/* /Components/Shared/FoodAttestationModal.razor.rz.scp.css */
/* Modal-rendered descendants — selectors apply directly without ::deep because the
   .confirm-diff and .confirm-attest-note elements live in FoodAttestationModal's own
   render tree (IngredientsVerification.razor.css can't reach across this component boundary). */

.confirm-diff[b-qn80toffqj] {
    background: #f9fafb;
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.confirm-diff-row[b-qn80toffqj] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.8rem;
}

.confirm-diff-label[b-qn80toffqj] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    width: 40px;
    flex-shrink: 0;
}

.confirm-diff-val[b-qn80toffqj] {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.confirm-diff-from[b-qn80toffqj] {
    background: #fee2e2;
    color: #991b1b;
    text-decoration: line-through;
}

.confirm-diff-to[b-qn80toffqj] {
    background: #dcfce7;
    color: #166534;
}

.confirm-attest-note[b-qn80toffqj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    padding: 16px;
    font-size: 0.8rem;
    color: #78350f;
    line-height: 1.5;
}

.confirm-attest-note .material-icons[b-qn80toffqj] {
    font-size: 1rem;
    color: #d97706;
    flex-shrink: 0;
    margin-top: 1px;
}
/* /Components/Shared/FoodScoutIngredientsPanel.razor.rz.scp.css */
/* Tree rails — mirrors IngredientsVerification.razor.css ::deep rules.
   Needed here because this component renders outside any HTML element owned
   by IngredientsVerification, so ::deep from that file cannot reach us. */

.tree-cell[b-4bcszr0mv7] { padding-left: 4px; }
.tree-cell-inner[b-4bcszr0mv7] { display: flex; align-items: center; }
.tree-cell-railed .tree-cell-inner[b-4bcszr0mv7] { height: 100%; }

.tree-rail[b-4bcszr0mv7] {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    align-self: stretch;
    position: relative;
}

.tree-rail-continue[b-4bcszr0mv7]::before,
.tree-rail-branch[b-4bcszr0mv7]::before,
.tree-rail-lastbranch[b-4bcszr0mv7]::before {
    content: ''; position: absolute; left: 10px;
    width: 1.5px; background: #94a3b8;
}

.tree-rail-continue[b-4bcszr0mv7]::before,
.tree-rail-branch[b-4bcszr0mv7]::before { top: -8px; bottom: -9px; }
.tree-rail-lastbranch[b-4bcszr0mv7]::before { top: -8px; height: calc(50% + 8px); }

.tree-rail-branch[b-4bcszr0mv7]::after,
.tree-rail-lastbranch[b-4bcszr0mv7]::after {
    content: ''; position: absolute; top: 50%; left: 10px;
    width: 11px; height: 1.5px; background: #94a3b8;
    transform: translateY(-0.5px);
}

/* Tooltip */
.tooltip-wrap[b-4bcszr0mv7] { position: relative; display: inline-flex; }
.tooltip-wrap .tooltip-text[b-4bcszr0mv7] {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: #1e1b2e; color: white;
    font-size: 0.75rem; font-style: normal; line-height: 1.4; border-radius: 0.375rem;
    white-space: normal; width: max-content; max-width: 20rem; z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.tooltip-wrap:hover .tooltip-text[b-4bcszr0mv7] { display: block; }
/* /Components/Shared/IngredientLookupPanel.razor.rz.scp.css */
/* Panel-rendered descendants — selectors apply directly without ::deep because the
   panel renders these elements in its own scope (IngredientsVerification.razor.css can't
   reach across this component boundary since the panel is position:fixed and lives
   outside IngredientsVerification's DOM subtree). */

.ai-lookup-result-card[b-djna5i84qm] {
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 13px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
    background: #fff;
}

.ai-lookup-result-card:hover[b-djna5i84qm] {
    border-color: #25507c;
    background: #f5f3ff;
    box-shadow: 0 3px 10px rgba(37, 80, 124, 0.13);
    transform: translateY(-1px);
}

.ai-lookup-result-card.ai-lookup-current[b-djna5i84qm] {
    border-color: #059669;
    background: #f0fdf4;
    box-shadow: 0 0 0 1px #059669;
}

.ai-lookup-score-bar[b-djna5i84qm] {
    height: 3px;
    border-radius: 999px;
    background: #f3f4f6;
    overflow: hidden;
    margin-top: 8px;
}

.ai-lookup-score-fill[b-djna5i84qm] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.55s cubic-bezier(.4, 0, .2, 1);
}

/* "Thinking" animation orb. */
.ai-lookup-orb[b-djna5i84qm] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25507c 0%, #5c7fa5 50%, #93aec9 100%);
    animation: aiOrbPulse-b-djna5i84qm 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.ai-lookup-orb[b-djna5i84qm]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
    animation: aiScanLine-b-djna5i84qm 1.8s linear infinite;
}

@keyframes aiOrbPulse-b-djna5i84qm {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 80, 124, 0.3); }
    50% { transform: scale(1.06); box-shadow: 0 0 20px 6px rgba(37, 80, 124, 0.15); }
}

@keyframes aiScanLine-b-djna5i84qm {
    0% { transform: translateY(-6px); }
    100% { transform: translateY(60px); }
}

/* Bouncing-dots indicator now lives in ThinkingDots.razor — kept the orb +
   scan-line animation here because it's specific to this panel's layout. */
/* /Components/Shared/IngredientsVerificationPanel.razor.rz.scp.css */
/* Scoped CSS for IngredientsVerificationPanel.razor (extracted from the
   IngredientsVerification page so the panel can also be hosted in ProductDetail's
   fullscreen modal). Selectors are prefixed with ::deep so styles reach descendant
   elements that may be rendered by extracted sub-components (ParsedIngredientRow,
   AuditResolveModal, IngredientFlagModal, etc.); the panel wraps its markup in a
   single scoped root div so the ::deep rules always have a scoped ancestor. */

/* ── Ingredient table base ── */
[b-g07oeh80ji] .ingredient-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
[b-g07oeh80ji] .ingredient-table thead th {
    background: var(--color-oyster-100); padding: 8px 14px; text-align: left;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--color-oyster-500);
    border-bottom: 1px solid var(--color-oyster-300);
    position: sticky; top: 0; z-index: 10;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.08);
}
[b-g07oeh80ji] .ingredient-table tbody td {
    padding: 7px 14px; color: var(--color-oyster-700);
    border-bottom: 1px solid var(--color-oyster-200); vertical-align: middle;
}
[b-g07oeh80ji] .ingredient-table tbody tr:last-child td { border-bottom: none; }
[b-g07oeh80ji] .ingredient-table tbody tr { transition: background 0.12s; cursor: pointer; }
[b-g07oeh80ji] .ingredient-table tbody tr:hover { background: var(--color-oyster-100); }

/* ── Parsed ingredients collapsible panel ── */
[b-g07oeh80ji] .parsed-panel {
    max-height: 0; overflow: clip; opacity: 0;
    transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1),
                opacity 0.22s ease;
}
[b-g07oeh80ji] .parsed-panel.open {
    max-height: 9000px; opacity: 1;
    transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1),
                opacity 0.22s ease 0.04s;
}
/* `.fully-open` is added by attachPanelOverflowToggle (IngredientsVerification.razor.js) on
   transitionend so the .ingred-flag-popup tooltip can escape the panel. The class
   is stripped on transitionrun (and thus on close) so overflow:clip is back in
   effect during the shrink animation — otherwise table rows leak below the
   panel as max-height animates to 0. */
[b-g07oeh80ji] .parsed-panel.open.fully-open { overflow: visible; }

[b-g07oeh80ji] .parser-table-scroll { overflow-x: clip; }
[b-g07oeh80ji] #parser-table td:nth-child(3) { white-space: nowrap; }

/* ── Tree indent rails ──
   Directory-tree-style guide lines drawn in the tree-cell before the name. The cell
   stays a normal table-cell so it fills the full row height even when a sibling cell
   wraps; an inner flex wrapper (.tree-cell-inner) takes `height: 100%` of that cell so
   each rail span can `align-self: stretch` to the full row height. (Making the td
   itself inline-flex shrank it to its own content, so the vertical lines broke between
   rows whenever a sibling cell pushed the row taller.) One rail span per depth level is
   emitted by ParsedIngredientRow; the kind (continue / branch / last) is computed by
   IngredientDisplayHelpers.ComputeRailSlots.

   Replaces the previous depth-based `padding-left: calc(4px + depth * 8px)` indent
   plus the 8×1 gray tick on `.tree-name-child::before`. */
[b-g07oeh80ji] .tree-cell { padding-left: 4px; }
[b-g07oeh80ji] #parser-table .tree-cell { padding-left: 4px !important; }
[b-g07oeh80ji] .tree-cell-inner { display: flex; align-items: center; }
[b-g07oeh80ji] .tree-cell-railed .tree-cell-inner { height: 100%; }
[b-g07oeh80ji] .tree-rail {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    align-self: stretch;
    position: relative;
}
/* The vertical pipe extends 7px above and 8px below the rail box so it bridges
   the cell's 7px top/bottom padding AND the 1px border-bottom — without this,
   consecutive rows' pipes leave a visible 15px gap. The horizontal connector
   sits at the rail's vertical center, which is the row's visual center because
   the cell content is vertically centered. */
[b-g07oeh80ji] .tree-rail-continue::before,
[b-g07oeh80ji] .tree-rail-branch::before,
[b-g07oeh80ji] .tree-rail-lastbranch::before {
    content: ''; position: absolute; left: 10px;
    width: 1.5px; background: var(--color-oyster-400);
}
/* Overlap +1px past each cell edge so the line bridges the row-divider border
   even under subpixel rendering — the alternative ends at the boundary and the
   browser rounds down on one side, leaving a hairline gap. */
[b-g07oeh80ji] .tree-rail-continue::before,
[b-g07oeh80ji] .tree-rail-branch::before { top: -8px; bottom: -9px; }
[b-g07oeh80ji] .tree-rail-lastbranch::before { top: -8px; height: calc(50% + 8px); }
[b-g07oeh80ji] .tree-rail-branch::after,
[b-g07oeh80ji] .tree-rail-lastbranch::after {
    content: ''; position: absolute; top: 50%; left: 10px;
    width: 11px; height: 1.5px; background: var(--color-oyster-400);
    transform: translateY(-0.5px);
}

/* ── Tree name styles ── */
[b-g07oeh80ji] .tree-name-root { font-weight: 600; color: var(--color-oyster-900); text-transform: capitalize; }
[b-g07oeh80ji] .tree-name-child { color: var(--color-oyster-700); text-transform: capitalize; }
[b-g07oeh80ji] #parser-table .tree-name-child { color: var(--color-oyster-700); }
[b-g07oeh80ji] #parser-table tr[data-depth="25"] .tree-name-child { color: var(--color-primary); font-weight: 600; }

/* ── Depth-based row tinting ──
   Background lightness steps down with depth, capped so deep nodes don't go pitch.
   Depth 25 is the special "leaf overflow" indigo accent. */
[b-g07oeh80ji] #parser-table tr[data-depth] {
    background: hsl(220 14% calc(99% - min(var(--tree-depth, 0), 10) * 0.55%));
}
[b-g07oeh80ji] #parser-table tr[data-depth="25"] {
    background: #ecf1f6; /* one step lighter than --color-indigo-100, which is the hover tint */
    border-left: 3px solid var(--color-primary);
}
[b-g07oeh80ji] #parser-table tr[data-depth]:hover { background: #e8eaf2 !important; }
[b-g07oeh80ji] #parser-table tr[data-depth="25"]:hover { background: var(--color-indigo-100) !important; }

/* Selection highlight wins over the depth-tinted base. The base rule above
   (`#parser-table tr[data-depth]`) has higher specificity than a bare
   `.bg-indigo-50` Tailwind utility, so the indigo class on a selected row gets
   overridden to a near-white tint and looks unselected. Re-asserting the indigo
   here, scoped + with the same attribute selector, takes precedence. */
[b-g07oeh80ji] #parser-table tr[data-depth].bg-indigo-50,
[b-g07oeh80ji] #parser-table tr[data-depth].bg-indigo-50:hover { background: #ecf1f6 !important; }

/* ── Match badges ── */
[b-g07oeh80ji] .match-cell { display: inline-flex; align-items: center; gap: 5px; }
[b-g07oeh80ji] .code-interp-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
[b-g07oeh80ji] .code-badge-green { background: var(--color-success-100); color: var(--color-success-text); }
[b-g07oeh80ji] .code-badge-yellow { background: var(--color-warning-100); color: var(--color-warning-text); }
[b-g07oeh80ji] .code-badge-red { background: var(--color-danger-100); color: var(--color-danger-text); }
[b-g07oeh80ji] .code-badge-gray { background: var(--color-oyster-200); color: var(--color-oyster-700); }
[b-g07oeh80ji] .code-badge-audited { background: var(--color-indigo-100); color: var(--color-indigo-600); }
[b-g07oeh80ji] .audited-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 0.6rem; font-weight: 700; background: var(--color-indigo-200); color: var(--color-indigo-700); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
[b-g07oeh80ji] .audit-resolve-btn { background: var(--color-indigo-700) !important; color: #fff !important; border-color: var(--color-indigo-700) !important; }
[b-g07oeh80ji] .audit-resolve-btn:hover { background: var(--color-indigo-600) !important; }
[b-g07oeh80ji] .audit-banner { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem 0; padding: 0.5rem 0.75rem; background: var(--color-indigo-100); color: var(--color-indigo-700); border: 1px solid var(--color-indigo-200); border-radius: 0.5rem; font-size: 0.75rem; }

/* Persistent "Matched still needs confirming" call to action (see .razor). */
[b-g07oeh80ji] .confirm-prompt-banner { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.75rem 1rem 1rem; padding: 0.75rem 0.9rem; background: var(--color-success-100); color: var(--color-success-text); border: 1.5px solid var(--color-success-300); border-radius: 0.5rem; }
[b-g07oeh80ji] .confirm-prompt-text { flex: 1; font-size: 0.82rem; line-height: 1.45; }
[b-g07oeh80ji] .confirm-prompt-text strong { display: block; font-weight: 700; margin-bottom: 2px; }
[b-g07oeh80ji] .confirm-prompt-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--color-success-600); color: #fff; border: 1.5px solid var(--color-success-600); cursor: pointer; white-space: nowrap; transition: background 0.12s, border-color 0.12s; }
[b-g07oeh80ji] .confirm-prompt-cta:hover:not(:disabled) { background: var(--color-success-700); border-color: var(--color-success-700); }
[b-g07oeh80ji] .confirm-prompt-cta:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Row action buttons (shown on hover) ── */
[b-g07oeh80ji] .row-confirm-btn { border: 1.5px solid; border-radius: 999px; padding: 2px 9px; font-size: 0.68rem; font-weight: 700; cursor: pointer; background: none; transition: background 0.12s, border-color 0.12s; line-height: 1.4; margin-left: 5px; display: inline-flex; align-items: center; gap: 3px; }
[b-g07oeh80ji] .row-confirm-fuzzy { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
[b-g07oeh80ji] .row-confirm-fuzzy:hover { background: var(--color-indigo-600); border-color: var(--color-indigo-600); }
[b-g07oeh80ji] .row-confirm-nomatch { border-color: var(--color-primary); color: var(--color-indigo-700); background: #ecf1f6; }
[b-g07oeh80ji] .row-confirm-nomatch:hover { background: var(--color-indigo-100); }
[b-g07oeh80ji] .row-submit-review { background: var(--color-warning-500); color: var(--color-oyster-800); border-color: var(--color-warning-500); }
[b-g07oeh80ji] .row-submit-review:hover { background: var(--color-warning-600); border-color: var(--color-warning-600); color: #fff; }

[b-g07oeh80ji] .ingred-flag-btn {
    background: none; border: none; padding: 2px 3px; cursor: pointer;
    font-size: 0.8rem !important; color: var(--color-oyster-300); line-height: 1;
    transition: color 0.12s; vertical-align: middle; margin-left: 4px;
}
[b-g07oeh80ji] .ingred-flag-btn:hover { color: var(--color-danger-500); }
[b-g07oeh80ji] .ingred-flag-btn.flagged { color: var(--color-danger-500); }
[b-g07oeh80ji] .ingred-flag-btn .material-icons { font-size: 0.8rem !important; }

/* HTML popup for flag notes (replaces native title=) */
[b-g07oeh80ji] .ingred-flag-hover {
    position: relative;
    display: inline-flex;
    align-items: center;
}
[b-g07oeh80ji] .ingred-flag-readonly {
    display: inline-flex;
    align-items: center;
    color: var(--color-danger-500);
    margin-left: 4px;
    padding: 2px 3px;
}
[b-g07oeh80ji] .ingred-flag-readonly .material-icons { font-size: 0.8rem !important; }
[b-g07oeh80ji] .ingred-flag-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 280px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px solid var(--color-indigo-600);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    text-align: left;
    white-space: normal;
    font-weight: 400;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-oyster-800);
    visibility: hidden;
    opacity: 0;
    /* Hide is instant; show is delayed 1s and then fades in over 0.15s. */
    transition: visibility 0s linear 0s, opacity 0.15s ease 0s;
}
[b-g07oeh80ji] .ingred-flag-hover:hover .ingred-flag-popup,
[b-g07oeh80ji] .ingred-flag-hover:focus-within .ingred-flag-popup {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 1s, opacity 0.15s ease 1s;
}
[b-g07oeh80ji] .ingred-flag-hover.popup-suppressed .ingred-flag-popup {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: none !important;
}
[b-g07oeh80ji] .ingred-flag-popup-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    margin-bottom: 4px;
}
[b-g07oeh80ji] .ingred-flag-popup-body { white-space: pre-wrap; }

/* Owl icon next to ingredient names */
[b-g07oeh80ji] .owl-icon-inline { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; opacity: 0.6; }
[b-g07oeh80ji] .owl-icon-inline:hover { opacity: 1; }

/* ── Review stepper active row ── */
[b-g07oeh80ji] #parser-table tbody tr.review-active { background: #ecf1f6 !important; outline: 2px solid var(--color-primary); outline-offset: -1px; }

/* (.confirm-diff* + .confirm-attest-note moved to FoodAttestationModal.razor.css —
   modal contents render in their own scope, unreachable from this file via ::deep.) */

/* (.conv-* moved to ResolveConversationPanel.razor.css; .ai-lookup-* moved to
   IngredientLookupPanel.razor.css — those panels render in their own scopes,
   unreachable from this file via ::deep.) */

/* Tooltip */
[b-g07oeh80ji] .tooltip-wrap { position: relative; display: inline-flex; }
[b-g07oeh80ji] .tooltip-wrap .tooltip-text {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: var(--color-oyster-900); color: white;
    font-size: 0.75rem; font-style: normal; line-height: 1.4; border-radius: 0.375rem;
    white-space: normal; width: max-content; max-width: 20rem; z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
[b-g07oeh80ji] .tooltip-wrap:hover .tooltip-text { display: block; }

/* ── Header pill hover effects ── */
[b-g07oeh80ji] .review-fuzzy-pill:hover { background: var(--color-warning-200) !important; }
[b-g07oeh80ji] .review-unmatched-pill:hover { background: var(--color-danger-200) !important; }
[b-g07oeh80ji] .confirm-all-pill:hover { background: var(--color-success-200) !important; border-color: var(--color-success-400) !important; }

/* ── Hero Banner ── */
[b-g07oeh80ji] .food-hero-outer {
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem; position: relative; z-index: 0;
}
[b-g07oeh80ji] .food-card-image {
    width: 100%; aspect-ratio: 3 / 1; min-height: 220px;
    background: var(--color-oyster-900); overflow: hidden; position: relative;
}
@media (min-width: 1024px) { [b-g07oeh80ji] .food-card-image { aspect-ratio: 4 / 1; min-height: 240px; } }
[b-g07oeh80ji] #food-product-img { width: 100%; height: 100%; object-fit: cover; display: block; }
[b-g07oeh80ji] .food-card-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 56px calc(220px + 32px) 20px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
}
@media (min-width: 1024px) { [b-g07oeh80ji] .food-card-overlay { padding-right: calc(300px + 32px); } }
[b-g07oeh80ji] .food-card-name {
    font-size: 1.6rem; font-weight: 900; color: #fff;
    letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.2;
    margin-bottom: 6px; text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
[b-g07oeh80ji] .food-card-brand {
    font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 6px rgba(0,0,0,0.5); letter-spacing: 0.02em;
}
[b-g07oeh80ji] .hero-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
[b-g07oeh80ji] .hero-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px 3px 7px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 600; line-height: 1.3;
    letter-spacing: 0.01em; backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); white-space: nowrap;
}
[b-g07oeh80ji] .hero-pill .material-icons { font-size: 0.82rem; }
[b-g07oeh80ji] .hero-pill-indigo-dark { background: rgba(37,80,124,0.88); color: #fff; }

/* ── UPC chip inside hero ── */
[b-g07oeh80ji] .food-card-upc {
    position: absolute; bottom: 14px; right: 16px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1px solid var(--color-oyster-300); border-radius: 10px;
    padding: 8px 14px 12px; z-index: 2;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18); min-width: 220px;
}
@media (min-width: 1024px) { [b-g07oeh80ji] .food-card-upc { width: 300px; } }

/* ── Mobile hero adjustments ── */
@media (max-width: 639px) {
    [b-g07oeh80ji] .food-card-overlay { padding: 40px 20px 16px 20px; }
    [b-g07oeh80ji] .food-card-name { font-size: 1.1rem; }
    [b-g07oeh80ji] .food-card-brand { font-size: 0.88rem; }
    [b-g07oeh80ji] .food-card-upc { position: relative; bottom: auto; right: auto; width: 100%; margin-top: -1px; border-radius: 0 0 10px 10px; min-width: auto; }
}
/* /Components/Shared/InviteHistoryRow.razor.rz.scp.css */
/* Shared hover-tooltip pattern (tooltip-wrap / tooltip-text) used on the invitation-row "resent"
   indicator to reveal the original send date on hover. Anchored to the right edge of the trigger
   (rather than centered) because the indicator sits at the right of the row, so the bubble opens
   leftward and stays on screen. Scoped to this component so both host surfaces get it identically. */
.tooltip-wrap[b-nwzjeccac9] { position: relative; display: inline-flex; }
.tooltip-wrap .tooltip-text[b-nwzjeccac9] {
    display: none; position: absolute; top: 100%; right: 0;
    margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: #1e1b2e; color: white;
    font-size: 0.75rem; font-style: normal; line-height: 1.4; border-radius: 0.375rem;
    white-space: normal; width: max-content; max-width: 18rem; z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    text-align: left;
}
.tooltip-wrap:hover .tooltip-text[b-nwzjeccac9] { display: block; }
/* /Components/Shared/NutritionFactsLabel.razor.rz.scp.css */
/* FDA-style Nutrition Facts label — shared between SpecSheetPane (chat) and SpecSheetView
   (read-only spec sheet). Visual rules deliberately stay self-contained: no Tailwind, no app
   theme tokens; this surface mimics a printed FDA label across all consumers. */

.nf-label[b-0a7upoh76i] {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 8px;
    overflow: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.nf-label .nf-hdr[b-0a7upoh76i] {
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.05;
    padding: 6px 10px 4px;
    border-bottom: 1px solid #000000;
    letter-spacing: -0.01em;
}

.nf-label .nf-serv[b-0a7upoh76i] {
    padding: 2px 10px 4px;
    border-bottom: 8px solid #000000;
}

.nf-label .nf-serv-top[b-0a7upoh76i] {
    font-size: 0.72rem;
    padding: 2px 0;
    border-bottom: 1px solid #000000;
}

.nf-label .nf-serv-bot[b-0a7upoh76i] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.78rem;
    padding: 3px 0 2px;
}

.nf-label .nf-serv-bot strong[b-0a7upoh76i] {
    font-weight: 800;
}

.nf-label .nf-cal[b-0a7upoh76i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 3px 10px 3px;
    border-bottom: 4px solid #000000;
}

.nf-label .nf-cal-l[b-0a7upoh76i] {
    display: flex;
    flex-direction: column;
}

.nf-label .nf-cal-lbl[b-0a7upoh76i] {
    font-size: 0.62rem;
    line-height: 1.2;
}

.nf-label .nf-cal-kw[b-0a7upoh76i] {
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
}

.nf-label .nf-cal-n[b-0a7upoh76i] {
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1;
}

.nf-label .nf-dv-hdr[b-0a7upoh76i] {
    text-align: right;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 10px 2px;
    border-bottom: 1px solid #000000;
}

.nf-label .nf-r[b-0a7upoh76i] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 10px;
    border-bottom: 1px solid #000000;
    font-size: 0.72rem;
    min-height: 20px;
}

.nf-label .nf-r:last-child[b-0a7upoh76i] {
    border-bottom: none;
}

.nf-label .nf-r .k[b-0a7upoh76i] {
    flex: 1;
}

.nf-label .nf-r .dv[b-0a7upoh76i] {
    flex-shrink: 0;
    font-weight: 700;
}

.nf-label .nf-r strong[b-0a7upoh76i] {
    font-weight: 800;
}

.nf-label .nf-r em[b-0a7upoh76i] {
    font-style: italic;
}

.nf-label .nf-ind1[b-0a7upoh76i] {
    padding-left: 24px;
}

.nf-label .nf-ind2[b-0a7upoh76i] {
    padding-left: 38px;
}

.nf-label .nf-sep-thick[b-0a7upoh76i] {
    height: 8px;
    background: #000000;
}

.nf-label .nf-sep-med[b-0a7upoh76i] {
    height: 4px;
    background: #000000;
}

.nf-label .nf-foot[b-0a7upoh76i] {
    padding: 6px 10px 8px;
    font-size: 0.6rem;
    line-height: 1.35;
    color: #000000;
}

.nf-label .nf-dash[b-0a7upoh76i] {
    color: #9ca3af;
    font-weight: 400;
}

/* ── Click-to-edit affordances (chat spec-sheet pane only, via the Editable parameter) ──
   Read-only consumers never get the nf-editable class, so nothing below applies to them. */

.nf-label .nf-editable[b-0a7upoh76i] {
    cursor: pointer;
}

.nf-label .nf-r.nf-editable:hover[b-0a7upoh76i],
.nf-label .nf-cal.nf-editable:hover[b-0a7upoh76i],
.nf-label .nf-serv-top.nf-editable:hover[b-0a7upoh76i],
.nf-label .nf-serv-bot.nf-editable:hover[b-0a7upoh76i] {
    background-color: rgba(37, 80, 124, 0.07);
}

.nf-label .nf-edit-pencil[b-0a7upoh76i] {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
    color: rgba(37, 80, 124, 0.75);
    opacity: 0;
    transition: opacity 120ms ease-out;
    pointer-events: none;
}

.nf-label .nf-editable:hover .nf-edit-pencil[b-0a7upoh76i] {
    opacity: 1;
}

/* Serving lines are not flex rows; keep the pencil inline. */
.nf-label .nf-serv-top .nf-edit-pencil[b-0a7upoh76i],
.nf-label .nf-cal-n .nf-edit-pencil[b-0a7upoh76i] {
    display: inline-block;
    vertical-align: baseline;
    margin-left: 4px;
}

.nf-label .nf-edit-input[b-0a7upoh76i] {
    font: inherit;
    font-weight: 600;
    color: inherit;
    background: #ffffff;
    border: 1px solid rgba(37, 80, 124, 0.55);
    border-radius: 4px;
    padding: 0 4px;
    width: 64px;
    line-height: 1.3;
    outline: none;
}

.nf-label .nf-edit-input:focus[b-0a7upoh76i] {
    border-color: rgba(37, 80, 124, 0.9);
    box-shadow: 0 0 0 2px rgba(37, 80, 124, 0.15);
}

.nf-label .nf-edit-input.invalid[b-0a7upoh76i] {
    border-color: #b3261e;
    background-color: rgba(254, 202, 202, 0.32);
}

.nf-label .nf-edit-unit[b-0a7upoh76i] {
    margin-left: 2px;
    color: #4b5563;
}

.nf-label .nf-edit-cal[b-0a7upoh76i] {
    width: 84px;
    font-size: 1rem;
    font-weight: 800;
}

.nf-label .nf-serv-editor[b-0a7upoh76i] {
    align-items: center;
}

.nf-label .nf-serv-editor-inputs[b-0a7upoh76i] {
    display: flex;
    gap: 4px;
}

.nf-label .nf-serv-editor-inputs .nf-edit-input[b-0a7upoh76i] {
    width: 82px;
    font-size: 0.72rem;
}

/* ── Field-change flash + missing-required tints (chat-side only via decorator) ─────
   Rules live alongside the rest of the NFP styling so the panel is self-contained. */

@keyframes spec-field-flash-b-0a7upoh76i {
    0% {
        background-color: rgba(37, 80, 124, 0.28);
        box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.32);
    }
    40% {
        background-color: rgba(37, 80, 124, 0.18);
        box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.18);
    }
    100% {
        background-color: transparent;
        box-shadow: inset 0 0 0 1px transparent;
    }
}

.nf-label .nf-r.flash-a[b-0a7upoh76i],
.nf-label .nf-r.flash-b[b-0a7upoh76i],
.nf-label .nf-cal.flash-a[b-0a7upoh76i],
.nf-label .nf-cal.flash-b[b-0a7upoh76i],
.nf-label .nf-serv.flash-a[b-0a7upoh76i],
.nf-label .nf-serv.flash-b[b-0a7upoh76i] {
    animation: spec-field-flash-b-0a7upoh76i 2.4s ease-out;
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    .nf-label .nf-r.flash-a[b-0a7upoh76i],
    .nf-label .nf-r.flash-b[b-0a7upoh76i],
    .nf-label .nf-cal.flash-a[b-0a7upoh76i],
    .nf-label .nf-cal.flash-b[b-0a7upoh76i],
    .nf-label .nf-serv.flash-a[b-0a7upoh76i],
    .nf-label .nf-serv.flash-b[b-0a7upoh76i] {
        animation: none;
    }
}

.nf-label .nf-r.missing[b-0a7upoh76i],
.nf-label .nf-cal.missing[b-0a7upoh76i],
.nf-label .nf-serv.missing[b-0a7upoh76i] {
    background-color: rgba(254, 202, 202, 0.32);
    transition: background-color 240ms ease-out;
}

.nf-label .nf-r.missing.scanning[b-0a7upoh76i],
.nf-label .nf-cal.missing.scanning[b-0a7upoh76i],
.nf-label .nf-serv.missing.scanning[b-0a7upoh76i] {
    position: relative;
    overflow: hidden;
    background-color: rgba(238, 242, 255, 0.9);
}

.nf-label .nf-r.missing.scanning .nf-dash[b-0a7upoh76i],
.nf-label .nf-cal.missing.scanning .nf-dash[b-0a7upoh76i],
.nf-label .nf-serv.missing.scanning .nf-dash[b-0a7upoh76i] {
    color: #163450;
}

.nf-label .nf-r.missing.scanning[b-0a7upoh76i]::after,
.nf-label .nf-cal.missing.scanning[b-0a7upoh76i]::after,
.nf-label .nf-serv.missing.scanning[b-0a7upoh76i]::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 2px;
    width: 60%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(37, 80, 124, 0.15) 10%,
        rgba(37, 80, 124, 0.9) 45%,
        rgba(56, 189, 248, 0.95) 55%,
        rgba(37, 80, 124, 0.15) 90%,
        transparent 100%);
    box-shadow:
        0 0 8px rgba(37, 80, 124, 0.65),
        0 0 18px rgba(56, 189, 248, 0.35);
    animation: nf-row-scan-h-b-0a7upoh76i 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nf-row-scan-h-b-0a7upoh76i {
    0% {
        transform: translateX(-45%);
        opacity: 0.55;
    }
    50% {
        transform: translateX(75%);
        opacity: 1;
    }
    100% {
        transform: translateX(-45%);
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nf-label .nf-r.missing.scanning[b-0a7upoh76i]::after,
    .nf-label .nf-cal.missing.scanning[b-0a7upoh76i]::after,
    .nf-label .nf-serv.missing.scanning[b-0a7upoh76i]::after {
        animation: nf-row-scan-pulse-b-0a7upoh76i 1.6s ease-in-out infinite;
        transform: none;
    }

    @keyframes nf-row-scan-pulse-b-0a7upoh76i {
        0%, 100% {
            opacity: 0.28;
        }
        50% {
            opacity: 0.95;
        }
    }
}
/* /Components/Shared/Pager.razor.rz.scp.css */
.pager[b-2ci600y7iq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-top: 1px solid #E0DBE7;
    background: #FFFFFF;
}

.pager-summary[b-2ci600y7iq] {
    font-size: 13px;
    color: #5D566A;
}

.pager-buttons[b-2ci600y7iq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pager-btn[b-2ci600y7iq] {
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #D6D2DE;
    border-radius: 9999px;
    font-family: var(--font-family-primary);
    font-size: 13px;
    color: #1A102C;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.pager-btn:hover:not(:disabled)[b-2ci600y7iq] {
    background: #FAFAFE;
}

.pager-btn:disabled[b-2ci600y7iq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pager-current[b-2ci600y7iq] {
    padding: 8px 16px;
    background: #25507C;
    color: #FFFFFF;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
}
/* /Components/Shared/PageShell.razor.rz.scp.css */
/* THE canonical page content width: 1220px, centered.
   Decision: the reports family already renders at ~1220px and is the app's
   most-designed surface, so the rest of the app converges on it (rather than
   Tailwind's max-w-7xl = 1280px, which only MyFoods/verification used, or the
   assorted max-w-5xl/6xl one-offs). Padding matches the px-6/py-8 the pages
   previously hand-rolled inside MainLayout's .p-8. */
.wise-page[b-4izy7p3mpm] {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding: 32px 24px;
}
/* /Components/Shared/Reports/ReportSquareCard.razor.rz.scp.css */
/* Report-hub card chrome — a more "designed" treatment for the (now permanent)
   card view on the Portfolio / Studio report landing pages:
     • a faint brand-tinted radial wash in the top-right corner
     • a soft glow that fades in on hover, plus a lift + deeper shadow
     • the icon tile lifts/tilts slightly on hover
     • a gentle fade-up entrance when the page loads
   All motion is disabled under prefers-reduced-motion. */

.report-hub-card[b-8ru3kuowwm] {
    /* Brand blue (#25507C) — the same family the report headers use — drives the
       card wash, glow and hover border. */
    --rhc-accent: 37, 80, 124;
    position: relative;
    overflow: hidden;
    /* A real-light, uniform blue surface (a few % of the header blue over white)
       so cards read as a soft tinted panel rather than plain white. */
    background:
        linear-gradient(180deg, rgba(var(--rhc-accent), .08) 0%, rgba(var(--rhc-accent), .045) 100%),
        #fff;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1),
                box-shadow .22s ease,
                border-color .22s ease;
    animation: rhc-card-in-b-8ru3kuowwm .45s cubic-bezier(.22, 1, .36, 1) both;
    will-change: transform;
}

/* Hover glow (kept behind the content via z-index below). */
.report-hub-card[b-8ru3kuowwm]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(150% 150% at 100% 0%, rgba(var(--rhc-accent), .12), transparent 55%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.report-hub-card > *[b-8ru3kuowwm] { position: relative; z-index: 1; }

/* Navy header band — the same brand-navy field the report hero uses — spanning
   the full card width and ending just above the report name. Carries the embossed
   WISEcode bug watermark (darker navy emboss, like the hero) behind the icon + pill,
   which sit on top. The band's overflow clips the tall owl to a strip. */
.report-hub-bug[b-8ru3kuowwm] {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 0;
    height: 72px;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    /* Match the report hero exactly: same navy field + embossed-bug colour. */
    background: color-mix(in srgb, #25507C 78%, #1A2339);
    color: color-mix(in srgb, #0B1426 38%, #25507C);
}
.report-hub-bug[b-8ru3kuowwm]  .upf-hero-bug {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, .14));
}

.report-hub-card:hover[b-8ru3kuowwm] {
    transform: translateY(-4px);
    border-color: rgba(var(--rhc-accent), .35);
    box-shadow: 0 18px 40px -16px rgba(17, 24, 39, .28), 0 4px 12px -6px rgba(var(--rhc-accent), .18);
}
.report-hub-card:hover[b-8ru3kuowwm]::after { opacity: 1; }

/* Icon tile micro-interaction. */
.report-hub-tile[b-8ru3kuowwm] { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.report-hub-card:hover .report-hub-tile[b-8ru3kuowwm] { transform: scale(1.06) rotate(-3deg); }

/* Locked (premium, beta-only) card — same layout, muted chrome: a neutral slate accent
   instead of brand blue, and a desaturated header band so the lock reads at a glance. */
.report-hub-card--locked[b-8ru3kuowwm] {
    --rhc-accent: 107, 114, 128; /* slate instead of brand blue */
}
.report-hub-card--locked .report-hub-bug[b-8ru3kuowwm] {
    background: color-mix(in srgb, #6B7280 55%, #4B5563);
    color: color-mix(in srgb, #374151 45%, #6B7280);
}

@keyframes rhc-card-in-b-8ru3kuowwm {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .report-hub-card[b-8ru3kuowwm] { animation: none; transition: border-color .2s ease; }
    .report-hub-card:hover[b-8ru3kuowwm] { transform: none; }
    .report-hub-tile[b-8ru3kuowwm] { transition: none; }
    .report-hub-card:hover .report-hub-tile[b-8ru3kuowwm] { transform: none; }
}
/* /Components/Shared/ResolveConversationPanel.razor.rz.scp.css */
/* Conversation-flow styles for the No-Match Resolve panel. Same scoping rationale as
   the other extracted modals/panels: this component is position:fixed and lives outside
   IngredientsVerification's DOM subtree, so its scope is unreachable from IngredientsVerification.razor.css. */

.conv-choices[b-4j7mbjatxj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.conv-choice-btn[b-4j7mbjatxj] {
    border: 1.5px solid #cbd9e8;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.73rem;
    font-weight: 600;
    color: #163450;
    background: #fff;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.conv-choice-btn:hover[b-4j7mbjatxj] {
    background: #ecf1f6;
    border-color: #25507c;
}

/* Chat thinking-dots indicator now lives in ThinkingDots.razor. */
/* /Components/Shared/SpecSheetModal.razor.rz.scp.css */
/* Modal-only pending-review banner. Sits outside SpecSheetView so the theme custom properties
   set on the spec-sheet root aren't visible here — colors are passed via inline style at the
   call site instead. */
.ss-pending-banner[b-bx73b27y4w] {
    margin: 12px 32px 0;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 9pt;
    font-weight: 600;
}

.ss-pending-banner .material-icons[b-bx73b27y4w] {
    font-size: 18px;
}

.spec-sheet-modal-backdrop[b-bx73b27y4w] {
    z-index: 90 !important;
}

@media (max-width: 768px) {
    .spec-sheet-modal-dialog[b-bx73b27y4w] {
        min-height: 100dvh;
    }

    .spec-sheet-modal-chrome[b-bx73b27y4w] {
        top: 0;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .spec-sheet-modal-title[b-bx73b27y4w] {
        flex: 1 1 100%;
        min-width: 0;
        padding-right: 0;
    }

    .spec-sheet-modal-actions[b-bx73b27y4w] {
        width: 100%;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .spec-sheet-modal-actions button[b-bx73b27y4w] {
        min-height: 2.5rem;
    }

    .spec-sheet-modal-actions button[title="Close"][b-bx73b27y4w] {
        width: 2.5rem;
        flex: 0 0 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ss-pending-banner[b-bx73b27y4w] {
        margin: 10px 16px 0;
    }
}
/* /Components/Shared/SpecSheetView.razor.rz.scp.css */
/* SpecSheetView — scoped stylesheet, mirrors food-details-export/project/spec-sheet.html.
   All design tokens come from the parent's CSS custom properties (set via SpecSheetTheme.CssVars).
   No Tailwind, no oyster/indigo tokens, no Material Icons, no app-card / btn-primary styles.
   This surface is intentionally a printable artifact, not a regular WISE page. */

.spec-sheet-root[b-2yrlwh3xgx] {
    font-family: var(--font-sans);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 10.5pt;
    line-height: 1.4;
}

.spec-sheet-root *[b-2yrlwh3xgx] { box-sizing: border-box; }

.ss-page[b-2yrlwh3xgx] {
    /* Locked to the shared report page token (--rs-page) so the product details page
       background matches the GRAS / UPF / Insights reports. The .ss-page wrapper carries
       the rpt-skin class to bring that token into scope. */
    background: var(--rs-page);
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ───────── Header ───────── */
.ss-hdr[b-2yrlwh3xgx] {
    background: var(--header-navy);
    color: #fff;
    padding: 18px 32px 14px;
    position: relative;
}
.ss-hdr-row[b-2yrlwh3xgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.ss-hdr-brand[b-2yrlwh3xgx] {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ss-hdr-logoblock[b-2yrlwh3xgx] {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ss-hdr-logo[b-2yrlwh3xgx] {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}
.ss-hdr-intelligence[b-2yrlwh3xgx] {
    font-size: 7pt;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
    margin-left: 36px;
}
.ss-hdr-divider[b-2yrlwh3xgx] {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.22);
}
.ss-hdr-doctype[b-2yrlwh3xgx] {
    font-size: 9.5pt;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ss-hdr-doctype span[b-2yrlwh3xgx] {
    display: block;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.14em;
    font-size: 8pt;
    margin-top: 2px;
}
.ss-hdr-meta[b-2yrlwh3xgx] {
    display: flex;
    gap: 24px;
    align-items: center;
}
.ss-hdr-meta-item[b-2yrlwh3xgx] {
    text-align: right;
}
.ss-hdr-meta-item .k[b-2yrlwh3xgx] {
    font-size: 7.5pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    line-height: 1;
}
.ss-hdr-meta-item .v[b-2yrlwh3xgx] {
    font-size: 10pt;
    color: #fff;
    font-weight: 700;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.ss-hdr-stripe[b-2yrlwh3xgx] {
    height: 3px;
    background: var(--brand-indigo);
}

/* ───────── Product identity ───────── */
.ss-product[b-2yrlwh3xgx] {
    padding: 22px 32px 18px;
    border-bottom: 1px solid var(--card-border);
}
.ss-product-top[b-2yrlwh3xgx] {
    display: grid;
    grid-template-columns: 116px 1fr auto;
    align-items: flex-start;
    gap: 22px;
}
.ss-product-pkg[b-2yrlwh3xgx] {
    position: relative;
    width: 116px;
    aspect-ratio: 360 / 440;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
}
.ss-product-pkg img[b-2yrlwh3xgx] { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-product-pkg-pending[b-2yrlwh3xgx] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: #fbbf24cc;
    color: #78350f;
    font-size: 7pt;
    font-weight: 600;
    text-align: center;
    padding: 2px 4px;
    display: flex; align-items: center; justify-content: center; gap: 2px;
}
.ss-product-pkg-placeholder[b-2yrlwh3xgx] {
    color: var(--ink-faint);
    font-size: 8pt;
    text-align: center;
    padding: 8px;
}
.ss-product-info[b-2yrlwh3xgx] { min-width: 0; }
.ss-product-brandmark[b-2yrlwh3xgx] {
    height: 64px; width: auto; max-width: 240px; object-fit: contain; display: block;
    margin-bottom: 12px;
}
.ss-product-brand[b-2yrlwh3xgx] {
    font-size: 9pt;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rule-blue);
    font-weight: 700;
    margin-bottom: 6px;
}
.ss-product-title[b-2yrlwh3xgx] {
    font-size: 22pt;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.1;
    color: var(--ink);
    max-width: 28ch;
}
/* Status badge + shield */
.ss-product-badges[b-2yrlwh3xgx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.ss-upf-badge[b-2yrlwh3xgx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.ss-upf-badge svg[b-2yrlwh3xgx] { flex-shrink: 0; }
.ss-upf-non-verified[b-2yrlwh3xgx] { background: var(--upf-non-verified-bg); color: var(--upf-non-verified-ink); }
.ss-upf-non-prequal[b-2yrlwh3xgx]  { background: var(--upf-non-prequal-bg);  color: var(--upf-non-prequal-ink); }
.ss-upf-non[b-2yrlwh3xgx]          { background: var(--upf-non-bg);          color: var(--upf-non-ink); }
.ss-upf-ultra[b-2yrlwh3xgx]        { background: var(--upf-ultra-bg);        color: var(--upf-ultra-ink); }

/* Description */
.ss-description[b-2yrlwh3xgx] {
    margin-top: 12px;
    font-size: 9.5pt;
    line-height: 1.5;
    color: var(--description-ink, var(--ink-soft));
}

.ss-product-id[b-2yrlwh3xgx] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ss-product-id .lbl[b-2yrlwh3xgx] {
    font-size: 7.5pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
}
.ss-product-id .val[b-2yrlwh3xgx] {
    font-size: 12pt;
    font-weight: 700;
    color: var(--ink);
    margin-top: 2px;
}
.ss-product-barcode[b-2yrlwh3xgx] {
    margin-top: 6px;
    height: 56px;
    width: auto;
    max-width: 200px;
    display: inline-block;
}
.ss-product-barcode:not([src])[b-2yrlwh3xgx], .ss-product-barcode[src=""][b-2yrlwh3xgx] { display: none; }
/* Serving facts — slim inline band: a small Material Symbol + small-caps label
   beside a moderate serif value, segments split by a dot, sitting on a single
   bottom hairline (no card chrome). Reads as a refined caption line and stays
   balanced with either one or two facts. Uses .rpt-skin tokens. */
.ss-facts[b-2yrlwh3xgx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--rs-border);
}
/* Each fact is icon + label + value, evenly spaced by the inner gap. */
.ss-fact[b-2yrlwh3xgx] { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
/* Dot separator before every fact except the first. It is a flex child of the
   band, so it spaces itself naturally and never dangles when a value wraps. */
.ss-fact:not(:first-child)[b-2yrlwh3xgx]::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rs-text) 22%, transparent);
}
.ss-fact-icon[b-2yrlwh3xgx] {
    font-size: 17px;
    line-height: 1;
    color: color-mix(in srgb, var(--rs-muted) 60%, var(--rs-surface));
    font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 20;
}
.ss-fact-label[b-2yrlwh3xgx] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rs-muted);
    white-space: nowrap;
}
.ss-fact-value[b-2yrlwh3xgx] {
    font-family: var(--rs-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--rs-text);
    font-variant-numeric: tabular-nums;
}

/* ───────── Report-style body shell ───────── */
/* The body reuses the shared .rpt-skin/.rpt-page/.rpt-card system; cards float
   on the existing page background, the same as the analytics reports. */
.ss-rpt-body[b-2yrlwh3xgx] { width: 100%; }

/* Product description lead line above the serving strip. */
.ss-lead[b-2yrlwh3xgx] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--rs-muted);
}

/* Source note on the right of the Package Nutrition & Ingredients card head. */
.ss-card-source[b-2yrlwh3xgx] {
    margin-left: auto;
    align-self: baseline;
    font-size: 12px;
    color: var(--rs-subtle);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ───────── NFP + Ingredients grid ───────── */
.ss-grid[b-2yrlwh3xgx] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 768px) {
    .ss-grid[b-2yrlwh3xgx] { grid-template-columns: 1fr; }
}

/* The actual Nutrition Facts panel is rendered by the shared <NutritionFactsLabel>
   component (Components/Shared/NutritionFactsLabel.razor) — keep this host slot
   constrained to the design's left-column width. */
.ss-nfp-host[b-2yrlwh3xgx] {
    width: 100%;
    max-width: 340px;
}

/* ───────── Ingredients column ───────── */
.ss-ing[b-2yrlwh3xgx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Ingredients/allergen card — styled to match the shared report cards
   (.rpt-skin tokens: linen surface, hairline border, rounded corners). */
.ss-ing-card[b-2yrlwh3xgx] {
    background: var(--rs-surface-2);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-r);
    padding: 18px 20px;
}
.ss-ing-heading[b-2yrlwh3xgx] {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rs-subtle);
    font-weight: 800;
    margin-bottom: 8px;
}
.ss-ing-statement[b-2yrlwh3xgx] {
    font-family: var(--rs-sans);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--rs-text);
    margin: 0;
    white-space: pre-wrap;
}

/* ───────── Footer ───────── */
.ss-spacer[b-2yrlwh3xgx] { flex: 1; min-height: 24px; }
.ss-footer[b-2yrlwh3xgx] {
    margin-top: auto;
    padding: 14px 32px 18px;
    border-top: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8pt;
    color: var(--ink-muted);
    flex-wrap: wrap;
    gap: 8px;
}
.ss-footer-left[b-2yrlwh3xgx] { display: flex; align-items: center; gap: 10px; }
.ss-footer-logo[b-2yrlwh3xgx] {
    height: 16px;
    width: auto;
}
.ss-footer strong[b-2yrlwh3xgx] { color: var(--ink); font-weight: 700; }
.ss-footer-right[b-2yrlwh3xgx] { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ss-footer-right a[b-2yrlwh3xgx] { color: var(--rule-blue); font-weight: 700; text-decoration: none; }
/* /Components/Shared/SwitchOrganization.razor.rz.scp.css */
.switch-organization-modal[b-6776ea0gd5] {
    padding: 60px;
}

.switch-organization-close[b-6776ea0gd5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    z-index: 2;
}

.switch-organization-close:hover[b-6776ea0gd5] {
    background: rgba(17, 24, 39, 0.04);
}

@media (max-width: 768px) {
    .switch-organization-overlay[b-6776ea0gd5] {
        z-index: 90;
        align-items: flex-start;
        padding: 76px 14px 14px;
        overflow-y: auto;
    }

    .switch-organization-modal[b-6776ea0gd5] {
        width: min(100%, 640px);
        max-height: calc(100dvh - 92px);
        margin: 0;
        overflow-y: auto;
        padding: 28px 20px 24px;
        border-radius: 16px;
    }

    .switch-organization-close[b-6776ea0gd5] {
        position: sticky;
        top: 0;
        float: right;
        margin: -12px -8px 8px 12px;
        color: #827c90;
        background: #fff;
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
    }

    .switch-organization-close .material-icons[b-6776ea0gd5] {
        font-size: 24px !important;
    }
}
/* /Components/Shared/ThinkingDots.razor.rz.scp.css */
/* Three-dot "thinking" indicator for chat-styled drawers. */
.thinking-dots[b-t2tx7t5k4d] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.thinking-dots span[b-t2tx7t5k4d] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-indigo-300);
    animation: thinkingDotsBounce-b-t2tx7t5k4d 1.2s infinite;
}

.thinking-dots span:nth-child(2)[b-t2tx7t5k4d] { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3)[b-t2tx7t5k4d] { animation-delay: 0.4s; }

@keyframes thinkingDotsBounce-b-t2tx7t5k4d {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .thinking-dots span[b-t2tx7t5k4d] { animation: none; }
}
/* /Components/Shared/VerificationStepHeader.razor.rz.scp.css */
/* Inner column matches PageShell's canonical .wise-page frame (1220px centered,
   24px side padding) so the header content aligns with the page content below. */
.verification-step-header-inner[b-8am7sh19j9] {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
}
/* /Components/Shared/WiseToast.razor.rz.scp.css */
/* Keyframes are bundled globally by Blazor CSS isolation (selector-less rules
   don't get scoped), so the inline animation: declarations in WiseToast.razor
   can still reference them by name. */
@keyframes wi-toast-in-b-mafshysot2 {
    from { opacity: 0; transform: translateX(1rem); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes wi-toast-out-b-mafshysot2 {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(1rem); }
}