/* /Components/Layout/AccountMenu.razor.rz.scp.css */
.acct[b-z4ui96hp3b] {
    position: relative;
}

.acct__trigger[b-z4ui96hp3b] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    cursor: pointer;
    list-style: none;
    transition: var(--kk-transition-colors);
}

    .acct__trigger[b-z4ui96hp3b]::-webkit-details-marker {
        display: none;
    }

    .acct__trigger:hover[b-z4ui96hp3b] {
        background: var(--kk-bg-sunken);
    }

.acct--topbar .acct__trigger[b-z4ui96hp3b] {
    min-height: 38px;
    width: 38px;
    padding: 0;
    justify-content: center;
}

.acct__avatar[b-z4ui96hp3b] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: var(--kk-radius-pill);
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-bold);
}

.acct__identity[b-z4ui96hp3b] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.acct__name[b-z4ui96hp3b] {
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct__sub[b-z4ui96hp3b] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-subtle);

    /* Now carries a household name, which can be arbitrarily long. Truncated like the
       line above it rather than allowed to widen the rail. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct__chevron[b-z4ui96hp3b] {
    flex: 0 0 auto;
    color: var(--kk-text-subtle);
    transition: transform var(--kk-duration-base) var(--kk-ease);
}

.acct[open] .acct__chevron[b-z4ui96hp3b] {
    transform: rotate(180deg);
}

.acct__panel[b-z4ui96hp3b] {
    position: absolute;
    z-index: var(--kk-z-overlay);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--kk-space-2);
    background: var(--kk-surface-raised);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
    box-shadow: var(--kk-shadow-lg);
}

.acct--rail .acct__panel[b-z4ui96hp3b] {
    bottom: calc(100% + var(--kk-space-2));
    left: 0;
    right: 0;
}

.acct--topbar .acct__panel[b-z4ui96hp3b] {
    top: calc(100% + var(--kk-space-2));
    right: 0;
    min-width: 220px;
}

.acct__panel-identity[b-z4ui96hp3b] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    padding: var(--kk-space-2) var(--kk-space-3) var(--kk-space-3);
    border-bottom: var(--kk-border-subtle-line);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    Household and role, on the mobile panel. Its own line rather than appended to the
    address — running two facts together on one line is the mistake the People screen was
    just corrected for.
*/
.acct__panel-context[b-z4ui96hp3b] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct__form[b-z4ui96hp3b] {
    margin: 0;
    display: contents;
}

.acct__action[b-z4ui96hp3b] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    width: 100%;
    min-height: 40px;
    padding: 0 var(--kk-space-3);
    border: 0;
    border-radius: var(--kk-radius-sm);
    background: none;
    color: var(--kk-text);
    font-family: inherit;
    font-size: var(--kk-text-base);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .acct__action:hover[b-z4ui96hp3b] {
        background: var(--kk-bg-sunken);
        color: var(--kk-text);
        text-decoration: none;
    }

.acct__guest[b-z4ui96hp3b] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}
/* /Components/Layout/AppShell.razor.rz.scp.css */
.shell[b-za60jfk07h] {
    display: flex;
    align-items: flex-start;
    min-height: 100dvh;
}

.shell__column[b-za60jfk07h] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.shell__main[b-za60jfk07h] {
    flex: 1 1 auto;
    min-width: 0;
    /* Clears the fixed mobile bottom navigation plus the safe area. */
    padding-bottom: calc(var(--kk-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--kk-space-6));
}

    .shell__main:focus[b-za60jfk07h] {
        outline: none;
    }

@media (min-width: 768px) {
    .shell__main[b-za60jfk07h] {
        padding-bottom: var(--kk-space-10);
    }
}
/* /Components/Layout/MobileBottomNavigation.razor.rz.scp.css */
/* The persistent mobile navigation.

   Fixed to the bottom, carrying its own safe-area inset, and gone entirely at tablet width.
   The column count comes from the destination list rather than being hard-coded, so adding
   or removing one needs no CSS change. */

.bottom[b-ttroqj0xg1] {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--kk-z-nav);
    background: var(--kk-surface);
    border-top: var(--kk-border-hairline);

    /* The inset itself. The bar's own height already covers the touch target. */
    padding-bottom: var(--kk-safe-bottom);
    padding-left: var(--kk-safe-left);
    padding-right: var(--kk-safe-right);
    box-shadow: 0 -1px 3px rgba(38, 36, 31, 0.05);
}

/* The rail takes over from here. */
@media (min-width: 768px) {
    .bottom[b-ttroqj0xg1] {
        display: none;
    }
}

.bottom__list[b-ttroqj0xg1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--bottom-count, 4), 1fr);
}

.bottom__item[b-ttroqj0xg1] {
    display: flex;
    min-width: 0;
}

.bottom__link[b-ttroqj0xg1] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    /* The whole cell is the target, and it clears 44 px at every text size. */
    min-height: var(--kk-bottom-nav-height);
    padding: var(--kk-space-2) var(--kk-space-1);
    color: var(--kk-text-muted);
    text-decoration: none;
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-medium);
    border-top: 2px solid transparent;
    transition: var(--kk-transition-colors);
}

    /* Four labels on a 320 px screen. Ellipsis rather than a wrapped second line, which
       would make the bar a different height depending on which words fit. */
    .bottom__label[b-ttroqj0xg1] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Current state carries a top rule, a weight change and a tint — three signals, so it
       never depends on hue alone. aria-current carries the same fact to a screen reader. */
    .bottom__link--on[b-ttroqj0xg1] {
        color: var(--kk-primary-text);
        border-top-color: var(--kk-primary);
        font-weight: var(--kk-weight-semibold);
        background: color-mix(in srgb, var(--kk-primary-soft) 55%, transparent);
    }

    .bottom__link:hover[b-ttroqj0xg1] {
        color: var(--kk-text);
        text-decoration: none;
    }

    .bottom__link:focus-visible[b-ttroqj0xg1] {
        outline: var(--kk-focus-ring);
        outline-offset: -3px;
    }

.bottom__icon[b-ttroqj0xg1] {
    display: grid;
    place-items: center;
}

/* On a very short viewport — a landscape phone — the bar takes too much of the screen.
   Icons and labels sit side by side instead, which halves its height. */
@media (max-height: 460px) and (max-width: 767px) {
    .bottom__link[b-ttroqj0xg1] {
        flex-direction: row;
        gap: var(--kk-space-2);
        min-height: 44px;
    }
}
/* /Components/Layout/OnboardingLayout.razor.rz.scp.css */
.onboarding-card[b-5bc1xp2vv1] {
    width: 100%;
    max-width: 580px;
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-xl);
    box-shadow: var(--kk-shadow-sm);
    padding: var(--kk-space-6);
}

@media (min-width: 480px) {
    .onboarding-card[b-5bc1xp2vv1] {
        padding: var(--kk-space-8);
    }
}
/* /Components/Layout/PrimaryNavigation.razor.rz.scp.css */
.rail[b-7vuhx5ib4k] {
    display: none;
    flex-direction: column;
    width: var(--kk-nav-rail-width);
    flex: 0 0 var(--kk-nav-rail-width);
    height: 100dvh;
    position: sticky;
    top: 0;
    padding: var(--kk-space-5) var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface);
    border-right: var(--kk-border-hairline);
}

@media (min-width: 768px) {
    .rail[b-7vuhx5ib4k] {
        display: flex;
    }
}

.rail__brand[b-7vuhx5ib4k] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    padding: 0 var(--kk-space-2) var(--kk-space-6);
}

.rail__mark[b-7vuhx5ib4k] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: var(--kk-radius-md);
    background: var(--kk-primary);
    color: #fff;
}

.rail__name[b-7vuhx5ib4k] {
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-bold);
    letter-spacing: var(--kk-tracking-tight);
    color: var(--kk-text-strong);
    line-height: 1.2;
}

.rail__list[b-7vuhx5ib4k] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Our own anchor, not NavLink's. The active class comes from
   AppNavigation.IsCurrent — see the component for why NavLink's own matching was wrong. */
.rail__link[b-7vuhx5ib4k] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    color: var(--kk-text-muted);
    text-decoration: none;
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-medium);
    transition: var(--kk-transition-colors);
}

    .rail__link:hover[b-7vuhx5ib4k] {
        background: var(--kk-bg-sunken);
        color: var(--kk-text);
        text-decoration: none;
    }

    .rail__link.active[b-7vuhx5ib4k] {
        background: var(--kk-primary-soft);
        color: var(--kk-primary-text);
        font-weight: var(--kk-weight-semibold);
    }

.rail__icon[b-7vuhx5ib4k] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.rail__spacer[b-7vuhx5ib4k] {
    flex: 1 1 auto;
    min-height: var(--kk-space-6);
}

.rail__footer[b-7vuhx5ib4k] {
    border-top: var(--kk-border-subtle-line);
    padding-top: var(--kk-space-3);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-z697m219nz],
.components-reconnect-repeated-attempt-visible[b-z697m219nz],
.components-reconnect-failed-visible[b-z697m219nz],
.components-pause-visible[b-z697m219nz],
.components-resume-failed-visible[b-z697m219nz],
.components-rejoining-animation[b-z697m219nz] {
    display: none;
}

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


#components-reconnect-modal[b-z697m219nz] {
    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-z697m219nz 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-z697m219nz {
    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/Shared/AppDialog.razor.rz.scp.css */
.dlg[b-5u1pb2bbtw] {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100dvh;
    width: 100%;
    color: var(--kk-text);
}

    .dlg[b-5u1pb2bbtw]::backdrop {
        background: var(--kk-overlay);
        backdrop-filter: blur(2px);
    }

.dlg__panel[b-5u1pb2bbtw] {
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    box-shadow: var(--kk-shadow-lg);
}

/* Phone. Two presentations, and the difference matters: a short choice keeps the page
   visible behind it, a multi-field workflow takes the screen. */
@media (max-width: 767.98px) {
    .dlg--sheet[b-5u1pb2bbtw] {
        margin: auto auto 0;
        border-radius: var(--kk-radius-xl) var(--kk-radius-xl) 0 0;
    }

    .dlg--sheet .dlg__panel[b-5u1pb2bbtw] {
        border-radius: var(--kk-radius-xl) var(--kk-radius-xl) 0 0;
        border-bottom: 0;

        /* Deliberately short of the full height, so the page behind stays visible and
           somebody can see they are on top of something rather than somewhere new. */
        max-height: 92dvh;
        padding-bottom: var(--kk-safe-bottom);
    }

    /* dvh, not vh: on a mobile browser vh is measured behind the URL bar, which puts the
       footer under it. */
    .dlg--full[b-5u1pb2bbtw] {
        margin: 0;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .dlg--full .dlg__panel[b-5u1pb2bbtw] {
        border: 0;
        border-radius: 0;
        height: 100dvh;
        max-height: 100dvh;
        padding-top: var(--kk-safe-top);
        padding-bottom: var(--kk-safe-bottom);
    }

    /* The title and close stay put while the body scrolls under them. */
    .dlg--full .dlg__header[b-5u1pb2bbtw] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--kk-surface);
        border-bottom: var(--kk-border-subtle-line);
        padding-block: var(--kk-space-4) var(--kk-space-3);
    }
}

@media (min-width: 768px) {
    .dlg[b-5u1pb2bbtw] {
        margin: auto;
        border-radius: var(--kk-radius-xl);
    }

    .dlg--sm[b-5u1pb2bbtw] { max-width: 420px; }
    .dlg--md[b-5u1pb2bbtw] { max-width: 560px; }
    .dlg--lg[b-5u1pb2bbtw] { max-width: 760px; }

    .dlg__panel[b-5u1pb2bbtw] {
        border-radius: var(--kk-radius-xl);
        max-height: 86dvh;
    }
}

.dlg__header[b-5u1pb2bbtw] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: var(--kk-space-5) var(--kk-space-5) var(--kk-space-3);
}

.dlg__title[b-5u1pb2bbtw] {
    flex: 1 1 auto;
    font-size: var(--kk-text-lg);
    margin: 0;
}

.dlg__close[b-5u1pb2bbtw] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;

    /* A dismiss control is pressed with a thumb, often in a hurry. 32 px was below the
       comfortable minimum on every phone in the test matrix. */
    width: var(--kk-touch-target);
    height: var(--kk-touch-target);
    margin: calc(var(--kk-space-2) * -1) calc(var(--kk-space-2) * -1) 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--kk-radius-pill);
    background: none;
    color: var(--kk-text-muted);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .dlg__close:hover[b-5u1pb2bbtw] {
        background: var(--kk-bg-sunken);
        color: var(--kk-text);
    }

    .dlg__close:focus-visible[b-5u1pb2bbtw] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.dlg__description[b-5u1pb2bbtw] {
    margin: 0;
    padding: 0 var(--kk-space-5) var(--kk-space-2);
    color: var(--kk-text-muted);
}

.dlg__body[b-5u1pb2bbtw] {
    flex: 1 1 auto;
    overflow-y: auto;

    /* Momentum scrolling inside the sheet rather than dragging the page behind it. */
    overscroll-behavior: contain;
    padding: var(--kk-space-3) var(--kk-space-4) var(--kk-space-5);
}

@media (min-width: 600px) {
    .dlg__body[b-5u1pb2bbtw] {
        padding-inline: var(--kk-space-5);
    }
}

/* Outside the scrolling body, so the decision is always reachable however long the form
   gets. This is the sticky-action pattern for everything that lives in a dialog. */
.dlg__footer[b-5u1pb2bbtw] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    border-top: var(--kk-border-subtle-line);
    background: var(--kk-surface-tinted);
}

@media (min-width: 600px) {
    .dlg__footer[b-5u1pb2bbtw] {
        padding-inline: var(--kk-space-5);
    }
}

/* Stacked on a narrow screen, primary on top. Two buttons side by side below about
   420 px puts both at a width where the labels start truncating. */
@media (max-width: 479.98px) {
    .dlg__footer[b-5u1pb2bbtw] {
        flex-direction: column-reverse;
    }

    [b-5u1pb2bbtw] .dlg__footer > * {
        width: 100%;
        min-height: var(--kk-touch-target);
    }
}
/* /Components/Shared/ConfirmationDialog.razor.rz.scp.css */
.confirm__message[b-othzgj3bkn] {
    margin: 0;
    color: var(--kk-text);
    line-height: var(--kk-leading-normal);
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty[b-ztrvfyw2d9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-10) var(--kk-space-5);
    background: var(--kk-surface);
    border: 1px dashed var(--kk-border-strong);
    border-radius: var(--kk-radius-lg);
}

.empty__icon[b-ztrvfyw2d9] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--kk-radius-pill);
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    margin-bottom: var(--kk-space-1);
}

.empty__title[b-ztrvfyw2d9] {
    font-size: var(--kk-text-lg);
    margin: 0;
}

.empty__message[b-ztrvfyw2d9] {
    max-width: 46ch;
    margin: 0;
    color: var(--kk-text-muted);
}

.empty__actions[b-ztrvfyw2d9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--kk-space-3);
    margin-top: var(--kk-space-2);
}

.empty__example[b-ztrvfyw2d9] {
    width: 100%;
    max-width: 460px;
    margin-top: var(--kk-space-5);
    padding-top: var(--kk-space-5);
    border-top: var(--kk-border-subtle-line);
    text-align: left;
}
/* /Components/Shared/ErrorState.razor.rz.scp.css */
.error[b-r3tkamnz90] {
    display: flex;
    gap: var(--kk-space-4);
    padding: var(--kk-space-5);
    background: var(--kk-danger-soft);
    border: 1px solid var(--kk-danger-border);
    border-radius: var(--kk-radius-lg);
}

.error__icon[b-r3tkamnz90] {
    flex: 0 0 auto;
    color: var(--kk-danger);
    margin-top: 1px;
}

.error__body[b-r3tkamnz90] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    align-items: flex-start;
}

.error__title[b-r3tkamnz90] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-danger);
}

.error__message[b-r3tkamnz90] {
    margin: 0;
    color: var(--kk-text-muted);
    font-size: var(--kk-text-base);
}

.error__retry[b-r3tkamnz90] {
    margin-top: var(--kk-space-1);
}
/* /Components/Shared/FilterChip.razor.rz.scp.css */
.chip[b-smjrqnkhl6] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: 34px;
    padding: 0 var(--kk-space-3);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    color: var(--kk-text-muted);
    font-family: inherit;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .chip:hover:not(:disabled)[b-smjrqnkhl6] {
        background: var(--kk-bg-sunken);
        color: var(--kk-text);
    }

    .chip:disabled[b-smjrqnkhl6] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.chip--on[b-smjrqnkhl6] {
    background: var(--kk-primary-soft);
    border-color: var(--kk-primary-border);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-semibold);
}

    .chip--on:hover:not(:disabled)[b-smjrqnkhl6] {
        background: var(--kk-primary-soft-hover);
        color: var(--kk-primary-active);
    }

.chip__count[b-smjrqnkhl6] {
    padding: 0 0.4em;
    border-radius: var(--kk-radius-pill);
    background: var(--kk-bg-sunken);
    color: var(--kk-text-subtle);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-semibold);
}

.chip--on .chip__count[b-smjrqnkhl6] {
    background: color-mix(in srgb, var(--kk-primary) 16%, transparent);
    color: var(--kk-primary-text);
}
/* /Components/Shared/GlobalErrorBoundary.razor.rz.scp.css */
.boundary[b-w8p8hrz5w1] {
    padding: var(--kk-space-8) var(--kk-space-5);
    max-width: var(--kk-content-max);
    margin: 0 auto;
}
/* /Components/Shared/InlineValidationSummary.razor.rz.scp.css */
[b-48avps129o] .summary__icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.summary__single[b-48avps129o] {
    margin: var(--kk-space-1) 0 0;
}
/* /Components/Shared/LoadingState.razor.rz.scp.css */
.loading[b-gl2pcrv55p] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    color: var(--kk-text-muted);
    font-size: var(--kk-text-base);
}

.loading__skeletons[b-gl2pcrv55p] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
    width: 100%;
}

.loading__spinner[b-gl2pcrv55p] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--kk-border-strong);
    border-top-color: var(--kk-primary);
    border-radius: 50%;
    animation: kk-spin-b-gl2pcrv55p 720ms linear infinite;
}

@keyframes kk-spin-b-gl2pcrv55p {
    to { transform: rotate(360deg); }
}

.skeleton-row[b-gl2pcrv55p] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-4);
    padding: var(--kk-space-4) var(--kk-space-5);
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
}

.skeleton-row__lines[b-gl2pcrv55p] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.skeleton[b-gl2pcrv55p] {
    background: linear-gradient(90deg, var(--kk-bg-sunken) 25%, #eae5db 50%, var(--kk-bg-sunken) 75%);
    background-size: 200% 100%;
    animation: kk-shimmer-b-gl2pcrv55p 1.4s ease-in-out infinite;
    border-radius: var(--kk-radius-xs);
}

.skeleton--avatar[b-gl2pcrv55p] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--kk-radius-md);
}

.skeleton--line[b-gl2pcrv55p] {
    height: 11px;
}

.skeleton--short[b-gl2pcrv55p] {
    height: 9px;
}

@keyframes kk-shimmer-b-gl2pcrv55p {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton[b-gl2pcrv55p] {
        animation: none;
        background: var(--kk-bg-sunken);
    }

    .loading__spinner[b-gl2pcrv55p] {
        animation: none;
        border-top-color: var(--kk-border-strong);
    }
}
/* /Components/Shared/LotQuantityDisplay.razor.rz.scp.css */
.lq[b-14s9zdilpi] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lq--strong[b-14s9zdilpi] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

/* An estimate is still a number, just a softer one. */
.lq--estimated[b-14s9zdilpi] {
    font-style: italic;
}

.lq--unknown[b-14s9zdilpi] {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-style: italic;
    font-weight: var(--kk-weight-normal);
    color: var(--kk-text-muted);
}

[b-14s9zdilpi] .lq__glyph {
    flex: 0 0 auto;
}
/* /Components/Shared/OverflowMenu.razor.rz.scp.css */
/* Secondary actions, folded away. Styled to read as a button so an action bar looks
   like one row of controls rather than a button plus a stray disclosure widget. */

.ovf[b-mc43st4ewc] {
    position: relative;
}

.ovf__trigger[b-mc43st4ewc] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: 34px;
    padding: 0 var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-surface);
    color: var(--kk-text);
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: var(--kk-transition-colors);
}

    .ovf__trigger[b-mc43st4ewc]::-webkit-details-marker {
        display: none;
    }

    .ovf__trigger:hover[b-mc43st4ewc] {
        background: var(--kk-surface-tinted);
        border-color: var(--kk-border-strong);
    }

    .ovf__trigger:focus-visible[b-mc43st4ewc] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.ovf[open] .ovf__trigger[b-mc43st4ewc] {
    background: var(--kk-surface-tinted);
    border-color: var(--kk-border-strong);
}

.ovf__panel[b-mc43st4ewc] {
    position: absolute;
    top: calc(100% + var(--kk-space-1));
    right: 0;
    z-index: var(--kk-z-overlay);
    min-width: 13rem;
    max-width: min(20rem, calc(100vw - var(--kk-space-4) * 2));
    padding: var(--kk-space-1);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-raised);
    box-shadow: var(--kk-shadow-lg);
}

/* Flip above the trigger when there is no room below, and stay inside the viewport.
 *
 * Anchor positioning where the browser has it — which is a measurement the browser makes and
 * we cannot, without script. Where it does not, the rules above still apply and the menu
 * simply opens downwards as before; with no clipping ancestor it is reachable by scrolling
 * rather than cut off. */
@supports (anchor-name: --a) {
    /* The anchor name itself is set inline, per instance — see the component. */
    .ovf__panel[b-mc43st4ewc] {
        position: fixed;
        position-area: block-end span-inline-start;
        position-try-fallbacks: block-start span-inline-start, block-end span-inline-end, block-start span-inline-end;
        position-try-order: most-block-size;
        margin: var(--kk-space-1) 0;
        top: auto;
        right: auto;
        max-height: calc(100vh - var(--kk-space-6));
        overflow-y: auto;
    }
}

/* Items belong to the caller, so they carry the caller's scope attribute rather than this
   component's. ::deep reaches them — anchored to .ovf__panel so the rule stays scoped to
   this menu instead of leaking out as a global .ovf__item. */
.ovf__panel[b-mc43st4ewc]  .ovf__item {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    width: 100%;
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-3);
    border: none;
    border-radius: var(--kk-radius-sm);
    background: none;
    color: var(--kk-text);
    font: inherit;
    font-size: var(--kk-text-base);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .ovf__panel[b-mc43st4ewc]  .ovf__item:hover {
        background: var(--kk-bg-sunken);
    }

    .ovf__panel[b-mc43st4ewc]  .ovf__item:focus-visible {
        outline: var(--kk-focus-ring);
        outline-offset: -2px;
    }

    .ovf__panel[b-mc43st4ewc]  .ovf__item--danger {
        color: var(--kk-danger);
    }
/* /Components/Shared/PageHeader.razor.rz.scp.css */
.head[b-nfzxfh102l] {
    position: sticky;
    top: 0;
    z-index: var(--kk-z-sticky);
    background: color-mix(in srgb, var(--kk-bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: var(--kk-border-hairline);
}

.head__bar[b-nfzxfh102l] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    flex-wrap: wrap;
    max-width: var(--kk-content-max);
    margin-inline: auto;

    /* The same token the page body uses, so header and content align at every width. */
    padding-block: var(--kk-space-3);
    padding-left: max(var(--kk-page-padding), var(--kk-safe-left));
    padding-right: max(var(--kk-page-padding), var(--kk-safe-right));
    min-height: var(--kk-topbar-height);
}

/* Matches a kk-page--wide body. */
.head--wide .head__bar[b-nfzxfh102l],
.head--wide .head__extra[b-nfzxfh102l] {
    max-width: var(--kk-content-wide);
}

/* Never the thing that gives way.

   This used to be `flex: 1 1 auto` with `min-width: 0`, which is the whole clipping bug in
   two declarations: shrink enabled, and the automatic min-content floor removed. Beside
   actions that were `flex: 0 0 auto` on a row that could not wrap, every pixel the buttons
   wanted came out of the title — so "Pantry" lost its end, the household name under it was
   squeezed, and the search box was cut off. The identity now refuses to shrink and the
   actions wrap instead. */
.head__identity[b-nfzxfh102l] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    flex: 0 1 auto;

    /* Enough for a real title and the household name under it before anything wraps, and
       expressed against the viewport rather than a pixel count tuned to one English word. */
    min-width: min(100%, 14rem);
}

.head__back[b-nfzxfh102l] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
    min-height: 36px;
    padding: 0 var(--kk-space-2) 0 var(--kk-space-1);
    border-radius: var(--kk-radius-sm);
    color: var(--kk-text-muted);
    text-decoration: none;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    flex: 0 0 auto;
}

    .head__back:hover[b-nfzxfh102l] {
        background: var(--kk-bg-sunken);
        color: var(--kk-text);
        text-decoration: none;
    }

.head__back-label[b-nfzxfh102l] {
    display: none;
}

@media (min-width: 480px) {
    .head__back-label[b-nfzxfh102l] {
        display: inline;
    }
}

.head__titles[b-nfzxfh102l] {
    min-width: 0;
}

.head__title[b-nfzxfh102l] {
    font-size: var(--kk-text-lg);
    margin: 0;

    /* Two lines before truncating. A long recipe name losing its second half in the
       header is worse than a header one line taller. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

@media (min-width: 600px) {
    .head__title[b-nfzxfh102l] {
        font-size: var(--kk-text-xl);

        /* Still two lines. It used to become a single nowrap line here, which is what
           turned a squeezed header into a clipped word rather than a taller one — and a
           title that cannot be read is worse than a header that is two lines tall. */
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* The household name. Allowed to wrap and never clipped: it is how somebody tells which
   kitchen they are looking at, which matters most to the people who have more than one. */
.head__description[b-nfzxfh102l] {
    margin: 2px 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    overflow-wrap: anywhere;
}

.head__search[b-nfzxfh102l] {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
}

/* The second row: search, then whatever utility controls the page has. Everything here is
   allowed to give way, which is the point of it being a separate row from the title. */
.head__toolbar[b-nfzxfh102l] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    flex-wrap: wrap;
    max-width: var(--kk-content-max);
    margin-inline: auto;
    padding-inline: max(var(--kk-page-padding), var(--kk-safe-left)) max(var(--kk-page-padding), var(--kk-safe-right));
    padding-bottom: var(--kk-space-3);
}

.head--wide .head__toolbar[b-nfzxfh102l] {
    max-width: var(--kk-content-wide);
}

.head__toolbar .head__search[b-nfzxfh102l] {
    order: 0;

    /* Grows into whatever the controls leave, and takes the whole row on its own when they
       wrap below it. The basis is a starting point, not a cap. */
    flex: 1 1 16rem;
    min-width: 12rem;
}

.head__tools[b-nfzxfh102l] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    flex: 0 1 auto;
    flex-wrap: wrap;
}

.head__actions[b-nfzxfh102l] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    flex: 0 0 auto;

    /* On a phone the actions wrap onto their own row rather than squeezing the title into
       an ellipsis. A recipe name is more use than a fourth button on the same line. */
    flex-wrap: wrap;
    justify-content: flex-end;
}

.head__account[b-nfzxfh102l] {
    display: block;
}

.head__extra[b-nfzxfh102l] {
    max-width: var(--kk-content-max);
    margin-inline: auto;
    padding-inline: max(var(--kk-page-padding), var(--kk-safe-left)) max(var(--kk-page-padding), var(--kk-safe-right));
    padding-bottom: var(--kk-space-3);

    /* Filter chips scroll rather than wrapping the header to three rows on a phone. */
    overflow-x: auto;
    scrollbar-width: none;
}

    .head__extra[b-nfzxfh102l]::-webkit-scrollbar {
        display: none;
    }

@media (min-width: 768px) {
    .head__bar[b-nfzxfh102l] {
        /* Still wrapping. `nowrap` here was the other half of the clipping bug: with the
           row forbidden to wrap, a header with one button too many had nowhere to put it
           except into the title's space. Actions drop to the next line now, which is a
           header one row taller and a title somebody can read. */
        gap: var(--kk-space-4);
        padding-block: var(--kk-space-4);
    }

    .head__extra[b-nfzxfh102l] {
        overflow-x: visible;
    }

    .head__search[b-nfzxfh102l] {
        order: 0;
        flex: 1 1 20rem;
        min-width: 14rem;
    }

    /* Still wrapping here too. The search keeps its minimum and the controls move under it
       rather than being squeezed beside it. */
    .head__toolbar[b-nfzxfh102l] {
        padding-bottom: var(--kk-space-4);
    }

    .head__account[b-nfzxfh102l] {
        /* The rail already exposes account actions on wide viewports. */
        display: none;
    }

    .head__extra[b-nfzxfh102l] {
        padding-bottom: var(--kk-space-4);
    }
}
/* /Components/Shared/ProductAvatar.razor.rz.scp.css */
.avatar[b-va78m4aiv3] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--kk-radius-md);
    background: var(--kk-bg-sunken);
    color: var(--kk-text-subtle);
    border: 1px solid var(--kk-border-subtle);
}

.avatar--small[b-va78m4aiv3] { width: 32px; height: 32px; border-radius: var(--kk-radius-sm); }
.avatar--medium[b-va78m4aiv3] { width: 44px; height: 44px; }
.avatar--large[b-va78m4aiv3] { width: 64px; height: 64px; border-radius: var(--kk-radius-lg); }

.avatar__image[b-va78m4aiv3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Category tints stay muted — they orient, they do not decorate. */
.avatar--produce[b-va78m4aiv3] { background: #eaf1e6; color: #4a6b3f; }
.avatar--meatandseafood[b-va78m4aiv3] { background: #f8ebe6; color: #9a5540; }
.avatar--dairy[b-va78m4aiv3] { background: #eef1f6; color: #4d5f7a; }
.avatar--bakery[b-va78m4aiv3] { background: #f6efe2; color: #7e6434; }
.avatar--frozen[b-va78m4aiv3] { background: #e8f0f4; color: #3f6274; }
.avatar--cannedandjarred[b-va78m4aiv3] { background: #f1eee8; color: #6f6551; }
.avatar--drygoods[b-va78m4aiv3] { background: #f3efe6; color: #6f6446; }
.avatar--spicesandcondiments[b-va78m4aiv3] { background: #f7ece2; color: #8a5e34; }
.avatar--beverages[b-va78m4aiv3] { background: #e9f0f1; color: #456568; }
.avatar--household[b-va78m4aiv3] { background: #f0eef2; color: #625a6d; }
/* /Components/Shared/QuantityDisplay.razor.rz.scp.css */
.qty[b-pxowhr0mrp] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qty--strong[b-pxowhr0mrp] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}
/* /Components/Shared/QuantityEditor.razor.rz.scp.css */
.qed[b-okys8dkyf1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--kk-space-3);
    align-items: start;
}

.qed__help[b-okys8dkyf1] {
    margin-top: var(--kk-space-2);
}
/* /Components/Shared/RequireHousehold.razor.rz.scp.css */
.gate[b-rcyh257rat] {
    max-width: var(--kk-content-max);
    margin: 0 auto;
    padding: var(--kk-space-8) var(--kk-space-5);
}
/* /Components/Shared/SearchField.razor.rz.scp.css */
.search[b-tfo62b7m1o] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search__icon[b-tfo62b7m1o] {
    position: absolute;
    left: var(--kk-space-3);
    display: grid;
    place-items: center;
    color: var(--kk-text-subtle);
    pointer-events: none;
}

.search__input[b-tfo62b7m1o] {
    padding-left: calc(var(--kk-space-3) * 2 + 17px);
    padding-right: var(--kk-space-8);
    background: var(--kk-surface);
}

    /* Suppress the UA's own clear affordance; we render an accessible one. */
    .search__input[b-tfo62b7m1o]::-webkit-search-cancel-button,
    .search__input[b-tfo62b7m1o]::-webkit-search-decoration {
        appearance: none;
    }

.search__clear[b-tfo62b7m1o] {
    position: absolute;
    right: var(--kk-space-2);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--kk-radius-pill);
    background: none;
    color: var(--kk-text-muted);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .search__clear:hover[b-tfo62b7m1o] {
        background: var(--kk-bg-sunken);
        color: var(--kk-text);
    }
/* /Components/Shared/StickyActions.razor.rz.scp.css */
/* A sticky primary action.

   Fixed on a phone, where the decision has to survive a long scroll. Static on a desktop,
   where the page is short enough that pinning a bar to the bottom of a 900 px window just
   takes space away from the content. */

.sticky[b-990llqy2h6] {
    position: fixed;
    inset-inline: 0;

    /* Sits directly on top of the bottom navigation rather than over it. Two fixed bars
       overlapping is the most common way a sticky action becomes unpressable. */
    bottom: var(--kk-bottom-nav-clearance);
    z-index: var(--kk-z-sticky);
    background: var(--kk-surface);
}

.sticky--bordered[b-990llqy2h6] {
    border-top: var(--kk-border-hairline);
    box-shadow: 0 -1px 3px rgba(38, 36, 31, 0.06);
}

.sticky__inner[b-990llqy2h6] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    max-width: var(--kk-content-max);
    margin-inline: auto;
    padding: var(--kk-space-3);
    padding-left: max(var(--kk-space-3), var(--kk-safe-left));
    padding-right: max(var(--kk-space-3), var(--kk-safe-right));
    min-height: var(--kk-sticky-action-height);
}

.sticky__secondary[b-990llqy2h6] {
    flex: 0 0 auto;
    display: flex;
    gap: var(--kk-space-2);
}

.sticky__primary[b-990llqy2h6] {
    flex: 1 1 auto;
    display: flex;
    gap: var(--kk-space-2);
}

    /* Full width and a real target. This is the thing somebody came to press. */
    [b-990llqy2h6] .sticky__primary > * {
        flex: 1 1 auto;
        min-height: var(--kk-touch-target);
    }

    [b-990llqy2h6] .sticky__secondary > * {
        min-height: var(--kk-touch-target);
    }

/* The rail replaces the bottom navigation here, so there is nothing to clear. */
@media (min-width: 768px) {
    .sticky[b-990llqy2h6] {
        position: static;
        bottom: auto;
        background: transparent;
        border-top: 0;
        box-shadow: none;
    }

    .sticky__inner[b-990llqy2h6] {
        padding-inline: 0;
        justify-content: flex-end;
    }

    /* On a desktop the actions size to their labels rather than stretching across a
       1180 px container. */
    [b-990llqy2h6] .sticky__primary > * {
        flex: 0 0 auto;
    }

    .sticky__primary[b-990llqy2h6] {
        flex: 0 0 auto;
    }
}
/* /Components/Shared/ToastRegion.razor.rz.scp.css */
.toasts[b-plbm6o2kxt] {
    position: fixed;
    z-index: var(--kk-z-toast);
    left: var(--kk-space-4);
    right: var(--kk-space-4);
    /* Sit above the mobile bottom navigation, never over it. */
    bottom: calc(var(--kk-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--kk-space-4));
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    pointer-events: none;
}

@media (min-width: 768px) {
    .toasts[b-plbm6o2kxt] {
        left: auto;
        right: var(--kk-space-6);
        bottom: var(--kk-space-6);
        width: min(400px, calc(100vw - var(--kk-space-12)));
    }
}

.toast[b-plbm6o2kxt] {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-3) var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface-raised);
    border: var(--kk-border-hairline);
    border-left: 3px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    box-shadow: var(--kk-shadow-md);
    animation: kk-toast-in-b-plbm6o2kxt var(--kk-duration-slow) var(--kk-ease);
}

@keyframes kk-toast-in-b-plbm6o2kxt {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .toast[b-plbm6o2kxt] {
        animation: none;
    }
}

.toast--success[b-plbm6o2kxt] { border-left-color: var(--kk-success); }
.toast--warning[b-plbm6o2kxt] { border-left-color: var(--kk-warning); }
.toast--error[b-plbm6o2kxt] { border-left-color: var(--kk-danger); }
.toast--neutral[b-plbm6o2kxt] { border-left-color: var(--kk-primary); }

.toast__icon[b-plbm6o2kxt] {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--kk-text-muted);
}

.toast--success .toast__icon[b-plbm6o2kxt] { color: var(--kk-success); }
.toast--warning .toast__icon[b-plbm6o2kxt] { color: var(--kk-warning); }
.toast--error .toast__icon[b-plbm6o2kxt] { color: var(--kk-danger); }
.toast--neutral .toast__icon[b-plbm6o2kxt] { color: var(--kk-primary); }

.toast__body[b-plbm6o2kxt] {
    flex: 1 1 auto;
    min-width: 0;
}

.toast__message[b-plbm6o2kxt] {
    margin: 0;
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text);
}

.toast__detail[b-plbm6o2kxt] {
    margin: 2px 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.toast__action[b-plbm6o2kxt] {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 var(--kk-space-3);
    border: 1px solid var(--kk-primary-border);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-family: inherit;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .toast__action:hover[b-plbm6o2kxt] {
        background: var(--kk-primary-soft-hover);
    }

.toast__close[b-plbm6o2kxt] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--kk-radius-pill);
    background: none;
    color: var(--kk-text-subtle);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .toast__close:hover[b-plbm6o2kxt] {
        background: var(--kk-bg-sunken);
        color: var(--kk-text);
    }
/* /Features/Diagnostics/Pages/DevelopmentEmailPage.razor.rz.scp.css */
.devmail__warning[b-260ks5w1pq] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0 0 var(--kk-space-4) 0;
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-warning-border, var(--kk-border));
    border-radius: var(--kk-radius-md);
    background: var(--kk-warning-soft, var(--kk-bg-sunken));
    font-size: var(--kk-text-sm);
    line-height: 1.5;
}

.devmail__list[b-260ks5w1pq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.devmail__item[b-260ks5w1pq] {
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.devmail__summary[b-260ks5w1pq] {
    padding: var(--kk-space-3);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.devmail__subject[b-260ks5w1pq] {
    font-weight: 600;
}

.devmail__meta[b-260ks5w1pq] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.devmail__body[b-260ks5w1pq] {
    padding: 0 var(--kk-space-3) var(--kk-space-3);
    border-top: 1px solid var(--kk-border);
}

.devmail__bodytitle[b-260ks5w1pq] {
    margin: var(--kk-space-3) 0 var(--kk-space-1);
    font-size: var(--kk-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kk-text-muted);
}

.devmail__pre[b-260ks5w1pq] {
    margin: 0;
    padding: var(--kk-space-3);
    background: var(--kk-bg-sunken);
    border-radius: var(--kk-radius-sm);
    font-size: var(--kk-text-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

.devmail__links[b-260ks5w1pq] {
    margin: 0;
    padding-left: 1.2rem;
    font-size: var(--kk-text-xs);
    word-break: break-all;
}
/* /Features/Diagnostics/Pages/GroceryIntakeStatusPage.razor.rz.scp.css */
/* A diagnostic page. Dense, scannable, and deliberately plain. */

.status__note[b-hvyir2i070] {
    margin: 0 0 var(--kk-space-4);
    padding: var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    background: var(--kk-info-soft);
    border: 1px solid var(--kk-info-border);
    font-size: var(--kk-text-sm);
}

.status__group[b-hvyir2i070] {
    margin-bottom: var(--kk-space-6);
}

    .status__group h2[b-hvyir2i070] {
        margin: 0 0 var(--kk-space-2);
        font-size: var(--kk-text-md);
        font-weight: var(--kk-weight-semibold);
    }

.status__list[b-hvyir2i070] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
}

.status__row[b-hvyir2i070] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kk-space-3);
    padding: var(--kk-space-2) var(--kk-space-3);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-surface-tinted);
}

.status__what[b-hvyir2i070] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.status__name[b-hvyir2i070] {
    font-weight: var(--kk-weight-medium);
}

.status__detail[b-hvyir2i070] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);

    /* Configuration keys are long and the tail is the distinguishing part. */
    overflow-wrap: anywhere;
}

/* Below this the badge and the key fight for one line and the key wins by wrapping badly. */
@media (max-width: 599.98px) {
    .status__row[b-hvyir2i070] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Features/GroceryIntake/Components/AddGroceriesSheet.razor.rz.scp.css */
/* Choosing how to tell PantryCue what came home.

   Full-screen on a phone, because it is a workflow with several steps and a scanner in it,
   not a short choice. */

.intake[b-ni3sd12n90] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

/* ---- progress ---- */

.intake__notice[b-ni3sd12n90],
.intake__looking-up[b-ni3sd12n90],
.intake__progress[b-ni3sd12n90] {
    display: flex;
    gap: var(--kk-space-2);
    padding: var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    background: var(--kk-info-soft);
    border: 1px solid var(--kk-info-border);
    font-size: var(--kk-text-sm);
    color: var(--kk-text);
}

.intake__notice[b-ni3sd12n90] {
    align-items: flex-start;
}

/* The barcode wait. Sits above the scanner so it is where the eye already is. */
.intake__looking-up[b-ni3sd12n90] {
    align-items: center;
    margin: 0 0 var(--kk-space-3);
}

.intake__progress[b-ni3sd12n90] {
    flex-direction: column;
    gap: var(--kk-space-1);
    background: var(--kk-surface-tinted);
    border-color: var(--kk-border-subtle);
}

.intake__progress-line[b-ni3sd12n90] {
    margin: 0;
}

    .intake__progress-line--detail[b-ni3sd12n90] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--kk-space-3);
        font-size: var(--kk-text-xs);
    }

.intake__ready[b-ni3sd12n90] {
    color: var(--kk-success);
    font-weight: var(--kk-weight-medium);
}

/* Not styled as an error. Items needing a decision are the ordinary state of a review
   screen, and colouring them red would make every grocery trip look like a problem. */
.intake__attention[b-ni3sd12n90] {
    color: var(--kk-warning);
    font-weight: var(--kk-weight-medium);
}

/* Quieter than both. Previously imported lines are context, not work — colouring them like
   something to act on is how the same food came to look as though it needed adding twice. */
.intake__imported[b-ni3sd12n90] {
    color: var(--kk-text-muted);
}

/* ---- states that replace the ordinary flow rather than annotating it ---- */

.intake__duplicate[b-ni3sd12n90],
.intake__repeat[b-ni3sd12n90] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-lg);
    background: var(--kk-bg-sunken);
}

.intake__duplicate-title[b-ni3sd12n90] {
    margin: 0;
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text);
}

.intake__duplicate-facts[b-ni3sd12n90] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2) var(--kk-space-4);
    margin: 0;
    font-size: var(--kk-text-sm);
}

    .intake__duplicate-facts dt[b-ni3sd12n90] {
        color: var(--kk-text-muted);
        font-size: var(--kk-text-xs);
    }

    .intake__duplicate-facts dd[b-ni3sd12n90] {
        margin: 0;
        color: var(--kk-text);
    }

/* Wraps rather than scrolls. Three actions at 360 px will not sit on one line, and an
   action nobody can see is an action nobody takes. */
.intake__duplicate-actions[b-ni3sd12n90] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.intake__override[b-ni3sd12n90] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-danger-border, var(--kk-border-strong));
    border-radius: var(--kk-radius-lg);
    background: var(--kk-surface);
}

.intake__override-text[b-ni3sd12n90],
.intake__repeat-text[b-ni3sd12n90] {
    margin: 0;
    font-size: var(--kk-text-sm);
    line-height: 1.5;
    color: var(--kk-text);
}

.intake__sep[b-ni3sd12n90] {
    color: var(--kk-text-subtle);
    margin: 0 var(--kk-space-1);
}

/* ---- what has been added so far ---- */

.intake__evidence[b-ni3sd12n90] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.intake__item[b-ni3sd12n90] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-2);
    padding: var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

    .intake__item--problem[b-ni3sd12n90] {
        border-color: var(--kk-warning-border);
        background: var(--kk-warning-soft);
    }

.intake__what[b-ni3sd12n90] {
    min-width: 0;
    flex: 1 1 12rem;
}

.intake__name[b-ni3sd12n90] {
    margin: 0;
    font-weight: var(--kk-weight-medium);

    /* A device file name can be long and a receipt has no title. Wrapping beats an
       ellipsis here: the tail is often the only distinguishing part. */
    overflow-wrap: anywhere;
}

.intake__state[b-ni3sd12n90] {
    margin: 0;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
    overflow-wrap: anywhere;
}

.intake__row-actions[b-ni3sd12n90] {
    display: flex;
    gap: var(--kk-space-2);
    flex-shrink: 0;
}

/* ---- the four methods ---- */

.intake__methods[b-ni3sd12n90] {
    display: grid;
    gap: var(--kk-space-2);
}

/* Two across once there is room for both to stay legible. Below that a single column,
   because a two-column grid at 320px gives each tile about nine characters. */
@media (min-width: 600px) {
    .intake__methods[b-ni3sd12n90] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- the scanner and manual panels ---- */

.intake__panel[b-ni3sd12n90] {
    padding: var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
}

.intake__entry[b-ni3sd12n90] {
    display: flex;
    gap: var(--kk-space-2);
}

    .intake__entry .kk-input[b-ni3sd12n90] {
        flex: 1 1 auto;
        min-width: 0;
    }

.intake__label-btn[b-ni3sd12n90] {
    margin-top: var(--kk-space-3);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
}

@media (min-width: 600px) {
    .intake__label-btn[b-ni3sd12n90] {
        width: auto;
    }
}

/* ---- unfinished trips ---- */

/* Offered before the methods, because somebody interrupted halfway through a receipt
   wants to carry on rather than start again. */
.intake__resume[b-ni3sd12n90] {
    padding: var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
}

.intake__resume-title[b-ni3sd12n90] {
    margin: 0 0 var(--kk-space-2);
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-semibold);
}

.intake__resume-list[b-ni3sd12n90] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.intake__resume-row[b-ni3sd12n90] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-2);
}

    .intake__resume-row .kk-btn[b-ni3sd12n90] {
        flex-shrink: 0;
        min-height: var(--kk-touch-target);
    }
/* /Features/GroceryIntake/Components/BarcodeScanner.razor.rz.scp.css */
/* Camera scanning, with the typed-entry field always underneath it. */

.scanner[b-fkb74x1pjm] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
}

.scanner__stage[b-fkb74x1pjm] {
    position: relative;
    border-radius: var(--kk-radius-md);
    overflow: hidden;
    background: #000;

    /* Roughly a phone camera's shape. A fixed pixel height would letterbox on some
       devices and crop on others. */
    aspect-ratio: 4 / 3;
}

.scanner__video[b-fkb74x1pjm] {
    width: 100%;
    height: 100%;

    /* Fills rather than letterboxes. A barcode held up to the camera should be as large
       as possible on screen. */
    object-fit: cover;
    display: block;
}

/* The aiming box. Tells somebody where to hold the packet, which is most of the
   difference between a scan that works first time and one that does not. */
.scanner__reticle[b-fkb74x1pjm] {
    position: absolute;
    inset: 22% 12%;
    border: 2px solid rgb(255 255 255 / 0.85);
    border-radius: var(--kk-radius-sm);
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.35);
    pointer-events: none;
}

/*
    The repeat question, over the camera rather than instead of it. Anchored to the bottom so
    the reticle and the shelf above it stay visible — somebody scanning three identical tins
    is still looking for the next one while they answer.
*/
.scanner__repeat[b-fkb74x1pjm],
.scanner__feedback[b-fkb74x1pjm] {
    position: absolute;
    inset: auto var(--kk-space-3) var(--kk-space-3);
    padding: var(--kk-space-3);
    border-radius: var(--kk-radius-lg);
    background: color-mix(in srgb, var(--kk-surface) 92%, transparent);
    backdrop-filter: blur(2px);
}

.scanner__feedback[b-fkb74x1pjm] {
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text);
    text-align: center;
}

.scanner__repeat-name[b-fkb74x1pjm] {
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text);
}

.scanner__repeat-count[b-fkb74x1pjm] {
    margin: 0 0 var(--kk-space-3);
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.scanner__repeat-actions[b-fkb74x1pjm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

/* Full touch targets. This is used one-handed, holding a packet in the other. */
.scanner__repeat-btn[b-fkb74x1pjm] {
    flex: 1 1 10ch;
    min-height: var(--kk-touch-target);
}

.scanner__hint[b-fkb74x1pjm] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--kk-space-2);
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: var(--kk-text-xs);
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
}

.scanner__stop[b-fkb74x1pjm],
.scanner__start[b-fkb74x1pjm] {
    width: 100%;
    min-height: var(--kk-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kk-space-2);
}

.scanner__idle[b-fkb74x1pjm] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
}

/* Every unavailable state lands here. Informational, not an error — a laptop with no
   camera is not a fault, and the typed field below always works. */
.scanner__problem[b-fkb74x1pjm] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    background: var(--kk-info-soft);
    border: 1px solid var(--kk-info-border);
    font-size: var(--kk-text-sm);
    line-height: var(--kk-leading-snug);
}

.scanner__manual[b-fkb74x1pjm] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
}

.scanner__entry[b-fkb74x1pjm] {
    display: flex;
    gap: var(--kk-space-2);
}

.scanner__code[b-fkb74x1pjm] {
    flex: 1 1 auto;
    min-width: 0;

    /* Digits read better spaced out, and this is the field people check against a packet
       held in the other hand. */
    font-family: var(--kk-font-numeric);
    letter-spacing: 0.04em;
}

@media (min-width: 600px) {
    .scanner__stop[b-fkb74x1pjm],
    .scanner__start[b-fkb74x1pjm] {
        width: auto;
        align-self: flex-start;
    }
}
/* /Features/GroceryIntake/Components/GroceryIntakeProcessingDialog.razor.rz.scp.css */
/* A full-screen wait. Centred, quiet, and impossible to mistake for a finished screen. */

.proc[b-0u1nms52bl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--kk-space-3);

    /* Enough height that the spinner sits near the middle of a phone rather than tucked
       under the title. */
    min-height: 40vh;
    padding: var(--kk-space-4) var(--kk-space-3);
}

.proc__working[b-0u1nms52bl],
.proc__failed[b-0u1nms52bl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kk-space-3);
    max-width: 32rem;
}

/* ---- working ---- */

.proc__spinner[b-0u1nms52bl] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 3px solid var(--kk-border);
    border-top-color: var(--kk-primary);
    animation: proc-spin-b-0u1nms52bl 900ms linear infinite;
}

@keyframes proc-spin-b-0u1nms52bl {
    to { transform: rotate(360deg); }
}

/* The spinner is decoration; the words carry the state. Somebody who has turned motion off
   still reads "Reading your receipt" and the live region still announces it. */
@media (prefers-reduced-motion: reduce) {
    .proc__spinner[b-0u1nms52bl] {
        animation: none;
        border-top-color: var(--kk-primary);
        border-right-color: var(--kk-primary);
    }
}

.proc__headline[b-0u1nms52bl] {
    margin: 0;
    font-size: var(--kk-text-lg);
    font-weight: var(--kk-weight-semibold);
}

.proc__detail[b-0u1nms52bl] {
    margin: 0;
    color: var(--kk-text-muted);
    line-height: var(--kk-leading-relaxed);
}

.proc__slow[b-0u1nms52bl] {
    margin: 0;
    padding: var(--kk-space-2) var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    background: var(--kk-info-soft);
    border: 1px solid var(--kk-info-border);
    font-size: var(--kk-text-sm);
}

.proc__warning[b-0u1nms52bl] {
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-warning);
}

/* ---- failed ---- */

.proc__icon[b-0u1nms52bl] {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
}

.proc__icon--bad[b-0u1nms52bl] {
    background: var(--kk-danger-soft);
    color: var(--kk-danger);
}
/* /Features/GroceryIntake/Components/GroceryIntakeReview.razor.rz.scp.css */
/* The review screen.

   Sectioned by what each item needs. Read top to bottom it goes from "you must deal with
   this" to "this is fine", which is the order somebody actually works in. */

.review[b-sdkcxab9rv] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

/* A partial result. Alert-shaped deliberately: somebody whose chicken did not go in has
   to see that before they leave the page. */
.review__partial[b-sdkcxab9rv] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    background: var(--kk-warning-soft);
    border: 1px solid var(--kk-warning-border);
}

.review__partial-title[b-sdkcxab9rv] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
}

.review__partial-detail[b-sdkcxab9rv] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.review__working[b-sdkcxab9rv] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.review__counts[b-sdkcxab9rv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-3);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.review__count--ready[b-sdkcxab9rv] {
    color: var(--kk-success);
}

.review__count--attention[b-sdkcxab9rv] {
    color: var(--kk-warning);
}

/* ---- the leftovers block ---- */

/* Named apart from the proposal sections on purpose. Those are rendered by
   ProposalSection and styled in its own scoped sheet; this one is rendered here, and
   sharing class names across the boundary would mean styles that appear to apply and
   do not. */
.review__leftovers[b-sdkcxab9rv] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.review__leftovers-title[b-sdkcxab9rv] {
    margin: 0;
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-muted);
}

.review__leftovers-hint[b-sdkcxab9rv] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    max-width: var(--kk-content-prose);
}

.review__undetected[b-sdkcxab9rv] {
    margin: 0;
    padding-left: var(--kk-space-5);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* Said above the confirm button, not after it. */
.review__caveat[b-sdkcxab9rv] {
    margin: var(--kk-space-2) 0 0;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
    text-align: center;
}

/* The correlation ID, in Development only.

   Quiet on purpose. It is there so a failure can be reported as a specific load rather
   than "it broke this afternoon", and it is worth nothing to anybody who is not reading
   the log next to it. */
.review__correlation[b-sdkcxab9rv] {
    margin: var(--kk-space-3) 0 0;
    font-family: var(--kk-font-mono, ui-monospace, monospace);
    font-size: var(--kk-text-xs);
    color: var(--kk-text-subtle);
    text-align: center;
}
/* /Features/GroceryIntake/Components/MethodTile.razor.rz.scp.css */
/* One capture method. Big enough to hit with a thumb while holding a bag. */

.tile[b-ifefydbcgo] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    width: 100%;
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
    color: var(--kk-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .tile:hover:not(:disabled):not(.tile--off)[b-ifefydbcgo] {
        border-color: var(--kk-primary);
        background: var(--kk-primary-soft);
    }

    .tile:focus-visible[b-ifefydbcgo] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

    .tile:disabled[b-ifefydbcgo] {
        opacity: 0.6;
        cursor: default;
    }

/* Unavailable is muted, not hidden and not struck through. It is a method that exists and
   is waiting to be configured, and it reads as one. */
.tile--off[b-ifefydbcgo] {
    cursor: default;
    background: var(--kk-bg-sunken);
    border-style: dashed;
}

.tile__icon[b-ifefydbcgo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
    color: var(--kk-text-muted);
}

.tile--off .tile__icon[b-ifefydbcgo] {
    opacity: 0.55;
}

.tile__text[b-ifefydbcgo] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.tile__title[b-ifefydbcgo] {
    font-weight: var(--kk-weight-semibold);
}

.tile--off .tile__title[b-ifefydbcgo] {
    color: var(--kk-text-muted);
}

.tile__detail[b-ifefydbcgo] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
    line-height: var(--kk-leading-snug);

    /* Wraps rather than truncates. The unavailable reason is the whole message, and half
       of it followed by an ellipsis tells nobody what to do. */
    overflow-wrap: anywhere;
}

.tile__detail--off[b-ifefydbcgo] {
    color: var(--kk-text-subtle);
}
/* /Features/GroceryIntake/Components/ProposalCard.razor.rz.scp.css */
/* One proposed item.

   A card rather than a table row. Everything about this screen is read on a phone while
   holding a bag, and a row of eleven columns is not readable at 320 pixels at any font
   size worth using. */

.prop[b-2ip4dcp7wd] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    padding: var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);

    /* A left edge carrying the state. Colour alone never carries it — every state also
       has a word in the confidence pill and usually a sentence. */
    border-left: 3px solid var(--kk-border);
}

.prop--attention[b-2ip4dcp7wd] {
    border-left-color: var(--kk-warning);
}

.prop--review[b-2ip4dcp7wd] {
    border-left-color: var(--kk-info);
}

.prop--ready[b-2ip4dcp7wd] {
    border-left-color: var(--kk-success);
}

.prop--off[b-2ip4dcp7wd],
.prop--done[b-2ip4dcp7wd] {
    border-left-color: var(--kk-border-subtle);
    background: var(--kk-bg-sunken);
}

.prop--off .prop__name[b-2ip4dcp7wd] {
    color: var(--kk-text-muted);
}

/* ---- head ---- */

.prop__head[b-2ip4dcp7wd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kk-space-2);
}

.prop__identity[b-2ip4dcp7wd] {
    min-width: 0;
}

.prop__name[b-2ip4dcp7wd] {
    margin: 0;
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-semibold);

    /* Product names run long and the distinguishing part is often at the end.
       "Riverside Organic Whole Milk 1 Gal" truncated at the brand is useless. */
    overflow-wrap: anywhere;
}

/* What the receipt actually printed. Monospaced, because it is machine text and reading
   it as prose is what makes "GV BNLS BRST" look like a mistake rather than a source. */
.prop__source[b-2ip4dcp7wd] {
    margin: 0.1rem 0 0;
    font-family: var(--kk-font-numeric);
    font-size: var(--kk-text-xs);
    color: var(--kk-text-subtle);
    overflow-wrap: anywhere;
}

/* The label is prose about machine text, so it is set as prose. Without this the whole
   line is monospaced and "Identified from receipt:" reads like part of the till output. */
.prop__source-label[b-2ip4dcp7wd] {
    font-family: var(--kk-font-body);
    font-style: italic;
}

/* A word, never a percentage. "82.47% confident" is a number nobody can act on and that
   nothing here could honestly compute. */
.prop__confidence[b-2ip4dcp7wd] {
    flex-shrink: 0;
    padding: 0.15rem var(--kk-space-2);
    border-radius: var(--kk-radius-pill);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-medium);
    white-space: nowrap;
}

.prop__confidence--high[b-2ip4dcp7wd] {
    background: var(--kk-success-soft);
    color: var(--kk-success);
}

.prop__confidence--medium[b-2ip4dcp7wd] {
    background: var(--kk-info-soft);
    color: var(--kk-info);
}

.prop__confidence--low[b-2ip4dcp7wd],
.prop__confidence--unresolved[b-2ip4dcp7wd] {
    background: var(--kk-warning-soft);
    color: var(--kk-warning);
}

/* ---- facts ---- */

.prop__facts[b-2ip4dcp7wd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-1) var(--kk-space-4);
    margin: 0;
    font-size: var(--kk-text-sm);
}

.prop__fact[b-2ip4dcp7wd] {
    display: flex;
    gap: var(--kk-space-1);
    min-width: 0;
}

    .prop__fact dt[b-2ip4dcp7wd] {
        color: var(--kk-text-muted);
    }

    .prop__fact dt[b-2ip4dcp7wd]::after {
        content: ":";
    }

    .prop__fact dd[b-2ip4dcp7wd] {
        margin: 0;
        overflow-wrap: anywhere;
    }

/* An unknown amount is stated, not hidden and not styled as a problem. It is frequently
   the correct answer. */
.prop__unknown[b-2ip4dcp7wd] {
    color: var(--kk-text-muted);
    font-style: italic;
}

.prop__substitution[b-2ip4dcp7wd] {
    display: inline-block;
    margin-left: var(--kk-space-1);
    padding: 0.05rem var(--kk-space-1);
    border-radius: var(--kk-radius-xs);
    background: var(--kk-warning-soft);
    color: var(--kk-warning);
    font-size: var(--kk-text-xs);
}

.prop__evidence[b-2ip4dcp7wd],
.prop__onhand[b-2ip4dcp7wd] {
    margin: 0;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.prop__status[b-2ip4dcp7wd] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-2);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-surface-tinted);
    font-size: var(--kk-text-sm);
    line-height: var(--kk-leading-snug);
}

.prop__done[b-2ip4dcp7wd] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-1);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-success);
    font-weight: var(--kk-weight-medium);
}

/* ---- outcomes ---- */

.prop__outcomes[b-2ip4dcp7wd] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
    padding-top: var(--kk-space-1);
    border-top: 1px solid var(--kk-border-subtle-line);
}

.prop__outcome[b-2ip4dcp7wd] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);

    /* A real target. These are the two controls the whole screen exists to set, and they
       are tapped with a thumb. */
    min-height: var(--kk-touch-target);
    font-size: var(--kk-text-sm);
    cursor: pointer;
}

    .prop__outcome input:disabled + span[b-2ip4dcp7wd] {
        color: var(--kk-text-subtle);
        cursor: default;
    }

.prop__blocked[b-2ip4dcp7wd] {
    color: var(--kk-text-subtle);
    font-size: var(--kk-text-xs);
}

.prop__actions[b-2ip4dcp7wd] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
}

    .prop__actions .kk-btn[b-2ip4dcp7wd] {
        min-height: var(--kk-touch-target);
    }

/* A package count next to a weight. Quieter than the weight, because it is the lesser of
   the two facts — it was the headline once, and 1.174 kg of grapes read "1 package". */
.prop__amount-secondary[b-2ip4dcp7wd] {
    color: var(--kk-text-muted);
}

/* Where the amount came from. On its own line: it qualifies the number above it, and
   trailing it on the same line makes the two read as one measurement. */
.prop__amount-source[b-2ip4dcp7wd] {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-subtle);
}

/* Agreeing with a match, which is a different question from where the food goes. */
.prop__confirm-ask[b-2ip4dcp7wd] {
    margin: 0;
    font-size: var(--kk-text-sm);
}

.prop__confirm[b-2ip4dcp7wd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

    .prop__confirm .kk-btn[b-2ip4dcp7wd] {
        min-height: var(--kk-touch-target);
    }
/* /Features/GroceryIntake/Components/ProposalEditSheet.razor.rz.scp.css */
/* Correcting one item. Full screen on a phone: it is a form with a search in it. */

.edit[b-hwbs2aq84w] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

/* What the person picked, with the way back to the picker beside it. */
.edit__chosen[b-hwbs2aq84w] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-2) var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    background: var(--kk-success-soft);
    border: 1px solid var(--kk-success-border);
    font-weight: var(--kk-weight-medium);
}

/* Wrapping pills, not four options crushed into one row. Every one clears the touch
   target at 320 pixels. */
.edit__modes[b-hwbs2aq84w],
.edit__levels[b-hwbs2aq84w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

.edit__mode[b-hwbs2aq84w],
.edit__level[b-hwbs2aq84w] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    font-size: var(--kk-text-sm);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .edit__mode:hover[b-hwbs2aq84w],
    .edit__level:hover[b-hwbs2aq84w] {
        border-color: var(--kk-primary);
        background: var(--kk-primary-soft);
    }

    .edit__mode:focus-within[b-hwbs2aq84w],
    .edit__level:focus-within[b-hwbs2aq84w] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Selected carries a border, a background and a weight change — not colour alone. */
.edit__mode--on[b-hwbs2aq84w],
.edit__level--on[b-hwbs2aq84w] {
    border-color: var(--kk-primary);
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-semibold);
}

.edit__packages .kk-input[b-hwbs2aq84w] {
    max-width: 8rem;
}
/* /Features/GroceryIntake/Components/ProposalSection.razor.rz.scp.css */
/* One band of the review screen.

   The section chrome lives here rather than in the review screen's stylesheet, because
   this component renders the markup and Blazor's scope attribute does not cross a
   component boundary. Styling it from the parent would silently do nothing. */

.review__section[b-u3sj0sl1al] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.review__section-title[b-u3sj0sl1al] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-md);
    font-weight: var(--kk-weight-semibold);
}

/* The size of each pile, legible without counting cards. */
.review__section-count[b-u3sj0sl1al] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface-tinted);
    color: var(--kk-text-muted);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-medium);
}

.review__section--attention .review__section-count[b-u3sj0sl1al] {
    background: var(--kk-warning-soft);
    color: var(--kk-warning);
}

.review__section--quiet .review__section-title[b-u3sj0sl1al] {
    color: var(--kk-text-muted);
    font-size: var(--kk-text-base);
}

.review__section-hint[b-u3sj0sl1al] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    max-width: var(--kk-content-prose);
}

.review__list[b-u3sj0sl1al] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kk-space-3);
}

/* Two columns once each card can still hold a full product name and its facts. Never a
   table: this is a review, and a dense grid of eleven controls per row is unusable on a
   phone and unpleasant on a desktop. */
@media (min-width: 900px) {
    .review__list[b-u3sj0sl1al] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A card that would not draw.

   Deliberately card-shaped and card-sized rather than a bare line of text: it holds the
   place of the item it stands for, so the list still reads as thirteen things with one of
   them unwell — not as twelve things and a mystery. It carries its own surface and border
   because .prop belongs to ProposalCard's scope and does not reach across. */
.prop--broken[b-u3sj0sl1al] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    padding: var(--kk-space-4);
    border: 1px solid var(--kk-warning-border);
    border-radius: var(--kk-radius-lg);
    background: var(--kk-warning-soft);
}

.prop__broken-title[b-u3sj0sl1al] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-warning);
}

.prop__broken-detail[b-u3sj0sl1al] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.prop--broken .prop__actions[b-u3sj0sl1al] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
}

    .prop--broken .prop__actions .kk-btn[b-u3sj0sl1al] {
        min-height: var(--kk-touch-target);
    }
/* /Features/Household/Components/HouseholdSettingsView.razor.rz.scp.css */
.name-row[b-mimuz8ekfx] {
    display: flex;
    align-items: flex-end;
    gap: var(--kk-space-3);
    flex-wrap: wrap;
}

.name-row__field[b-mimuz8ekfx] {
    flex: 1 1 240px;
    min-width: 0;
}

.locations[b-mimuz8ekfx] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    overflow: hidden;
}

.locations__item[b-mimuz8ekfx] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    min-height: var(--kk-touch-target);
}

.locations__item + .locations__item[b-mimuz8ekfx] {
    border-top: var(--kk-border-subtle-line);
}

.locations__item--off[b-mimuz8ekfx] {
    background: var(--kk-surface-tinted);
    color: var(--kk-text-muted);
}

.locations__icon[b-mimuz8ekfx] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--kk-radius-sm);
    background: var(--kk-bg-sunken);
    color: var(--kk-text-muted);
}

.locations__text[b-mimuz8ekfx] {
    flex: 1 1 auto;
    min-width: 0;
}

.locations__name[b-mimuz8ekfx] {
    display: block;
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text);
}

.locations__meta[b-mimuz8ekfx] {
    display: block;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.locations__note[b-mimuz8ekfx] {
    margin-top: var(--kk-space-3);
}

.add-location[b-mimuz8ekfx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--kk-space-3);
    margin-top: var(--kk-space-5);
    padding-top: var(--kk-space-5);
    border-top: var(--kk-border-subtle-line);
}

.add-location__name[b-mimuz8ekfx] {
    flex: 1 1 200px;
    min-width: 0;
}

.add-location__type[b-mimuz8ekfx] {
    flex: 1 1 200px;
    min-width: 0;
}

.invite-note[b-mimuz8ekfx] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: var(--kk-space-3) 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}
/* /Features/Insights/Components/InsightsView.razor.rz.scp.css */
/*
    Insights.

    A reading surface rather than a dashboard: a stack of plain cards, one idea each, that
    happens to be a single column on a phone and a wider single column on a desktop. There
    are deliberately no charts — every figure here needs its caveat beside it, and a caveat
    is a sentence.
*/

.insights[b-slh5tvhow4] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.insights__card[b-slh5tvhow4] {
    padding: var(--kk-space-4);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-lg);
    background: var(--kk-surface);
}

.insights__title[b-slh5tvhow4] {
    margin: 0 0 var(--kk-space-3);
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text);
}

.insights__lede[b-slh5tvhow4] {
    margin: var(--kk-space-3) 0 var(--kk-space-2);
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text);
}

    .insights__lede:first-of-type[b-slh5tvhow4] {
        margin-top: 0;
    }

/*
    Every hedge, disclaimer and "we only know part of this" line. Quieter than the figure it
    qualifies and never hidden behind a control — a total whose coverage is a click away is a
    total people will read as complete.
*/
.insights__aside[b-slh5tvhow4] {
    margin: var(--kk-space-2) 0 0;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
    line-height: 1.5;
}

.insights__empty[b-slh5tvhow4] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    line-height: 1.5;
}

.insights__list[b-slh5tvhow4],
.insights__reasons[b-slh5tvhow4] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.insights__item[b-slh5tvhow4],
.insights__reason[b-slh5tvhow4] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kk-space-2);
    font-size: var(--kk-text-sm);
    color: var(--kk-text);
}

.insights__name[b-slh5tvhow4] {
    /* The food's name wins the space; the figure beside it shrinks to fit. */
    flex: 1 1 12ch;
    min-width: 0;
}

/*
    The second line under a name — what is left, what to do, which ingredients a recipe would
    use. Quieter than the name and allowed to wrap, because these are sentences rather than
    labels and truncating one loses the caveat at the end of it.
*/
.insights__detail[b-slh5tvhow4] {
    display: block;
    margin-top: 0.15em;
    color: var(--kk-text-muted);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-regular);
    line-height: 1.45;
}

.insights__when[b-slh5tvhow4] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35em;
    color: var(--kk-text-muted);
    font-size: var(--kk-text-xs);
    text-align: right;
}

.insights__item--past .insights__when[b-slh5tvhow4] {
    color: var(--kk-danger-text, var(--kk-text));
}

/*
    "Estimated" and "due again" are the two words that must never be mistaken for a fact the
    package stated, so they are marked rather than merely worded.
*/
.insights__estimated[b-slh5tvhow4],
.insights__due[b-slh5tvhow4] {
    padding: 0 0.45em;
    border-radius: var(--kk-radius-pill);
    background: var(--kk-bg-sunken);
    color: var(--kk-text-subtle);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-medium);
    white-space: nowrap;
}

/* ---- the period filter ---- */

.insights__card--filter[b-slh5tvhow4] {
    padding: var(--kk-space-3) var(--kk-space-4);
}

.insights__ranges[b-slh5tvhow4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.insights__range[b-slh5tvhow4] {
    min-height: 34px;
    padding: 0 var(--kk-space-3);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    color: var(--kk-text-muted);
    font-family: inherit;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .insights__range:hover[b-slh5tvhow4] {
        background: var(--kk-bg-sunken);
        color: var(--kk-text);
    }

.insights__range--on[b-slh5tvhow4] {
    background: var(--kk-primary-soft);
    border-color: var(--kk-primary-border);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-semibold);
}
/* /Features/Onboarding/Pages/JoinPage.razor.rz.scp.css */
.steps[b-ghkzsw6hfc] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    list-style: none;
    margin: 0 0 var(--kk-space-6);
    padding: 0;
}

.steps__item[b-ghkzsw6hfc] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.steps__marker[b-ghkzsw6hfc] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: var(--kk-radius-pill);
    border: 1px solid var(--kk-border-strong);
    background: var(--kk-surface);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-bold);
}

.steps__label[b-ghkzsw6hfc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.steps__item--current[b-ghkzsw6hfc] {
    color: var(--kk-text-strong);
    font-weight: var(--kk-weight-semibold);
}

    .steps__item--current .steps__marker[b-ghkzsw6hfc] {
        background: var(--kk-primary);
        border-color: var(--kk-primary);
        color: #fff;
    }

.steps__item--done[b-ghkzsw6hfc] {
    color: var(--kk-primary-text);
}

    .steps__item--done .steps__marker[b-ghkzsw6hfc] {
        background: var(--kk-primary-soft);
        border-color: var(--kk-primary-border);
        color: var(--kk-primary-text);
    }

.pane[b-ghkzsw6hfc] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.pane__title[b-ghkzsw6hfc] {
    font-size: var(--kk-text-2xl);
    margin: 0;
}

.pane__lead[b-ghkzsw6hfc] {
    margin: 0;
    color: var(--kk-text-muted);
    max-width: 52ch;
}

/* The middle steps embed real settings views, which need more room than a prompt. */
.pane--wide[b-ghkzsw6hfc] {
    max-width: 60rem;
}

.pane__actions[b-ghkzsw6hfc] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--kk-space-3);
    margin-top: var(--kk-space-2);
}

.pane__actions--split[b-ghkzsw6hfc] {
    justify-content: space-between;
    padding-top: var(--kk-space-4);
    border-top: var(--kk-border-hairline);
}

.pane__actionsright[b-ghkzsw6hfc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-3);
}

.pane__note[b-ghkzsw6hfc] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    max-width: 52ch;
}

/* Three plain counts. No bar, no ring, nothing implying a completion percentage. */
.payoff[b-ghkzsw6hfc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-5);
}

.payoff li[b-ghkzsw6hfc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.payoff__value[b-ghkzsw6hfc] {
    font-size: var(--kk-text-2xl);
    font-weight: 700;
    line-height: 1;
}

.payoff__label[b-ghkzsw6hfc] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.locations[b-ghkzsw6hfc] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    overflow: hidden;
}

.locations__item + .locations__item[b-ghkzsw6hfc] {
    border-top: var(--kk-border-subtle-line);
}

[b-ghkzsw6hfc] .locations .kk-check-row {
    padding: var(--kk-space-2) var(--kk-space-4);
    margin: 0;
    align-items: center;
}

.locations__name[b-ghkzsw6hfc] {
    display: block;
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text);
}

.locations__type[b-ghkzsw6hfc] {
    display: block;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.add-location__row[b-ghkzsw6hfc] {
    display: flex;
    gap: var(--kk-space-2);
}

    .add-location__row .kk-input[b-ghkzsw6hfc] {
        flex: 1 1 auto;
    }

@media (max-width: 479.98px) {
    .steps__label[b-ghkzsw6hfc] {
        display: none;
    }

    .steps__item[b-ghkzsw6hfc] {
        flex: 0 0 auto;
    }

    .pane__actions[b-ghkzsw6hfc] {
        flex-direction: column-reverse;
    }

    [b-ghkzsw6hfc] .pane__actions > .kk-btn {
        width: 100%;
    }
}
/* /Features/Onboarding/Pages/OnboardingPage.razor.rz.scp.css */
.steps[b-ejmolbk0p0] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    list-style: none;
    margin: 0 0 var(--kk-space-6);
    padding: 0;
}

.steps__item[b-ejmolbk0p0] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.steps__marker[b-ejmolbk0p0] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: var(--kk-radius-pill);
    border: 1px solid var(--kk-border-strong);
    background: var(--kk-surface);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-bold);
}

.steps__label[b-ejmolbk0p0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.steps__item--current[b-ejmolbk0p0] {
    color: var(--kk-text-strong);
    font-weight: var(--kk-weight-semibold);
}

    .steps__item--current .steps__marker[b-ejmolbk0p0] {
        background: var(--kk-primary);
        border-color: var(--kk-primary);
        color: #fff;
    }

.steps__item--done[b-ejmolbk0p0] {
    color: var(--kk-primary-text);
}

    .steps__item--done .steps__marker[b-ejmolbk0p0] {
        background: var(--kk-primary-soft);
        border-color: var(--kk-primary-border);
        color: var(--kk-primary-text);
    }

.pane[b-ejmolbk0p0] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.pane__title[b-ejmolbk0p0] {
    font-size: var(--kk-text-2xl);
    margin: 0;
}

.pane__lead[b-ejmolbk0p0] {
    margin: 0;
    color: var(--kk-text-muted);
    max-width: 52ch;
}

/* The middle steps embed real settings views, which need more room than a prompt. */
.pane--wide[b-ejmolbk0p0] {
    max-width: 60rem;
}

.pane__actions[b-ejmolbk0p0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--kk-space-3);
    margin-top: var(--kk-space-2);
}

.pane__actions--split[b-ejmolbk0p0] {
    justify-content: space-between;
    padding-top: var(--kk-space-4);
    border-top: var(--kk-border-hairline);
}

.pane__actionsright[b-ejmolbk0p0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-3);
}

.pane__note[b-ejmolbk0p0] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    max-width: 52ch;
}

/* Three plain counts. No bar, no ring, nothing implying a completion percentage. */
.payoff[b-ejmolbk0p0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-5);
}

.payoff li[b-ejmolbk0p0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.payoff__value[b-ejmolbk0p0] {
    font-size: var(--kk-text-2xl);
    font-weight: 700;
    line-height: 1;
}

.payoff__label[b-ejmolbk0p0] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.locations[b-ejmolbk0p0] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    overflow: hidden;
}

.locations__item + .locations__item[b-ejmolbk0p0] {
    border-top: var(--kk-border-subtle-line);
}

[b-ejmolbk0p0] .locations .kk-check-row {
    padding: var(--kk-space-2) var(--kk-space-4);
    margin: 0;
    align-items: center;
}

.locations__name[b-ejmolbk0p0] {
    display: block;
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text);
}

.locations__type[b-ejmolbk0p0] {
    display: block;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.add-location__row[b-ejmolbk0p0] {
    display: flex;
    gap: var(--kk-space-2);
}

    .add-location__row .kk-input[b-ejmolbk0p0] {
        flex: 1 1 auto;
    }

@media (max-width: 479.98px) {
    .steps__label[b-ejmolbk0p0] {
        display: none;
    }

    .steps__item[b-ejmolbk0p0] {
        flex: 0 0 auto;
    }

    .pane__actions[b-ejmolbk0p0] {
        flex-direction: column-reverse;
    }

    [b-ejmolbk0p0] .pane__actions > .kk-btn {
        width: 100%;
    }
}
/* /Features/Pantry/Components/AddPantryItemDialog.razor.rz.scp.css */
.details[b-5heuyp9max] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

.details__chosen[b-5heuyp9max] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
}

.details__chosentext[b-5heuyp9max] {
    flex: 1 1 auto;
    min-width: 0;
}

.details__chosenname[b-5heuyp9max] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
}

.details__chosenmeta[b-5heuyp9max] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 2px 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.details__sep[b-5heuyp9max] {
    color: var(--kk-text-subtle);
}

.details__scanner[b-5heuyp9max] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
}

[b-5heuyp9max] .details .kk-check-row__label strong {
    display: block;
    font-weight: var(--kk-weight-semibold);
}

/* The "we filled this in for you" note. Quiet, but never absent when it applies. */
.details__memory[b-5heuyp9max] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0;
}

/* ---- quantity mode ----

   Three answers side by side, wrapping rather than compressing. "Don't know" is a real
   answer and it gets equal weight with the other two. */

.qmode[b-5heuyp9max] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

.qmode__pick[b-5heuyp9max],
.qlevels__pick[b-5heuyp9max] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    font-size: var(--kk-text-base);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .qmode__pick:focus-within[b-5heuyp9max],
    .qlevels__pick:focus-within[b-5heuyp9max] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Border weight and a tint, so the selection survives greyscale and a bright kitchen. */
.qmode__pick--on[b-5heuyp9max],
.qlevels__pick--on[b-5heuyp9max] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-medium);
}

/* Five levels and six threshold presets. Wrapping, never a single cramped row. */
.qlevels[b-5heuyp9max] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-2);
}

/* ---- approximate amounts ---- */

/* Which kind of approximate answer. Two wide targets rather than a segmented control:
   the labels are sentences, and sentences do not fit in a segment. */
.qshape[b-5heuyp9max] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

.qshape__pick[b-5heuyp9max] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    cursor: pointer;
}

    .qshape__pick:focus-within[b-5heuyp9max] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.qshape__pick--on[b-5heuyp9max] {
    border-width: 2px;
    border-color: var(--kk-primary);
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-medium);
}

/* The package size, asked for as its own question. Boxed so it reads as a prerequisite
   rather than as another amount field competing with the one above it. */
.pkg[b-5heuyp9max] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
    padding: var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
}

.pkg__ask[b-5heuyp9max] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.pkg__known[b-5heuyp9max] {
    margin-bottom: var(--kk-space-3);
}

/* ---- typical freshness ---- */

/* The clock beside a stack of lines, not a paragraph the icon sits inside. */
.est[b-5heuyp9max] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0 0 var(--kk-space-2);
    color: var(--kk-text);
}

    /* The clock comes from AppIcon, so it carries that component's scope rather than
       this one's — ::deep reaches it, anchored to .est so the rule stays local. */
    .est[b-5heuyp9max]  svg {
        flex: none;
        margin-top: 3px;
        color: var(--kk-text-muted);
    }

.est__body[b-5heuyp9max] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Kind of date and the range together, because that is one sentence. */
.est__line[b-5heuyp9max] {
    display: block;
}

/* Says what kind of date this is before it says anything else, and never in
   manufacturer wording. */
.est__tag[b-5heuyp9max] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.est__tips[b-5heuyp9max] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* The attribution travels with every curated figure, and stays quiet about it. */
.est__source[b-5heuyp9max] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* ---- restocking ---- */

.restock__title[b-5heuyp9max] {
    display: block;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.restock__hint[b-5heuyp9max] {
    display: block;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.restock__effective[b-5heuyp9max] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: var(--kk-space-3) 0;
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-info-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-info-soft);
    color: var(--kk-info);
}

/* ---- common package sizes ---- */

/* Shortcuts, and they look like shortcuts: a labelled group above the ordinary amount
   fields rather than a second way of entering a quantity. */
.sizes[b-5heuyp9max] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

.sizes__title[b-5heuyp9max] {
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-muted);
}

.sizes__row[b-5heuyp9max] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.sizes__pick[b-5heuyp9max] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    font-size: var(--kk-text-base);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .sizes__pick:focus-visible[b-5heuyp9max] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Border weight and a tint as well as colour, so the choice survives greyscale. */
.sizes__pick--on[b-5heuyp9max] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-medium);
}

.sizes__label[b-5heuyp9max] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}
/* /Features/Pantry/Components/AmountEditorSheet.razor.rz.scp.css */
/* The one amount editor.

   Full screen on a phone because it carries two modes, a six-way choice and a number
   field; a bottom sheet with its own scrollbar inside a scrolling page is worse than a
   screen. AppDialog keeps it a compact centred dialog on desktop. */

.amt[b-9vsjxumnm8] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

/* ---- where things stand ---- */

.amt__current[b-9vsjxumnm8] {
    padding: var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
}

.amt__current-main[b-9vsjxumnm8] {
    margin: 0;
    font-size: var(--kk-text-md);
    font-weight: var(--kk-weight-semibold);
}

.amt__current-sub[b-9vsjxumnm8] {
    margin: 0.15rem 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.amt__current-note[b-9vsjxumnm8] {
    margin: var(--kk-space-2) 0 0;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
    line-height: var(--kk-leading-snug);
}

/* ---- set / adjust ---- */

.amt__modes[b-9vsjxumnm8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kk-space-1);
    padding: var(--kk-space-1);
    border-radius: var(--kk-radius-md);
    background: var(--kk-bg-sunken);
}

.amt__mode[b-9vsjxumnm8] {
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2);
    border: 1px solid transparent;
    border-radius: var(--kk-radius-sm);
    background: transparent;
    color: var(--kk-text-muted);
    font: inherit;
    font-size: var(--kk-text-sm);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .amt__mode:hover[b-9vsjxumnm8] {
        color: var(--kk-text);
    }

    .amt__mode:focus-visible[b-9vsjxumnm8] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Selected carries a surface, a border and a weight change, not colour alone. */
.amt__mode--on[b-9vsjxumnm8] {
    background: var(--kk-surface);
    border-color: var(--kk-border);
    color: var(--kk-text);
    font-weight: var(--kk-weight-semibold);
}

.amt__panel[b-9vsjxumnm8] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

/* ---- the choices ---- */

/* Wrapping, never a six-across row. At 320px each pill still clears the touch target
   and still shows its whole label. */
.amt__levels[b-9vsjxumnm8],
.amt__direction[b-9vsjxumnm8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.amt__pick[b-9vsjxumnm8] {
    flex: 1 1 auto;

    /* Two per row on the narrowest phone, three once there is room. Below this a long
       label such as "Nearly empty" wraps mid-word. */
    min-width: 8.5rem;
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    color: var(--kk-text);
    font: inherit;
    font-size: var(--kk-text-sm);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .amt__pick:hover[b-9vsjxumnm8] {
        border-color: var(--kk-primary);
        background: var(--kk-primary-soft);
    }

    .amt__pick:focus-visible[b-9vsjxumnm8] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Three signals, not one: border, fill and weight. Somebody who cannot distinguish the
   accent still sees which choice is current — the whole complaint that started this. */
.amt__pick--on[b-9vsjxumnm8] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-semibold);
}

.amt__direction .amt__pick[b-9vsjxumnm8] {
    flex: 1 1 0;
    min-width: 6rem;
}

/* ---- what Save will do ---- */

.amt__outcome[b-9vsjxumnm8] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    background: var(--kk-info-soft);
    border: 1px solid var(--kk-info-border);
    font-size: var(--kk-text-sm);
    line-height: var(--kk-leading-snug);
}

/* ---- the size of a full package ---- */

/* Asked only when a chosen level has nothing to be a fraction of. Set apart from the
   level buttons above it, because it answers a different question: not "how much is
   left" but "how much is a full one". */
.amt__reference[b-9vsjxumnm8] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin-top: var(--kk-space-3);
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
}
/* /Features/Pantry/Components/BarcodeEntrySheet.razor.rz.scp.css */
.scan[b-lequjp6sau] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.scan__entry[b-lequjp6sau] {
    display: flex;
    gap: var(--kk-space-2);
}

.scan__code[b-lequjp6sau] {
    flex: 1 1 auto;
    font-family: var(--kk-font-mono, ui-monospace, monospace);
    letter-spacing: 0.04em;
}

.scan__empty[b-lequjp6sau] {
    margin: 0;
    padding: var(--kk-space-5);
    text-align: center;
    color: var(--kk-text-muted);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
}

.scan__summary[b-lequjp6sau] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2) var(--kk-space-4);
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    font-size: var(--kk-text-sm);
}

.scan__attention[b-lequjp6sau] {
    color: var(--kk-warning);
    font-weight: var(--kk-weight-medium);
}

.scan__list[b-lequjp6sau] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.scan__row[b-lequjp6sau] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.scan__row--problem[b-lequjp6sau] {
    border-color: var(--kk-warning-border);
    background: var(--kk-warning-soft);
}

.scan__row--skipped[b-lequjp6sau] {
    opacity: 0.6;
}

.scan__what[b-lequjp6sau] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.scan__name[b-lequjp6sau] {
    margin: 0;
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.scan__meta[b-lequjp6sau] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.scan__gtin[b-lequjp6sau] {
    font-family: var(--kk-font-mono, ui-monospace, monospace);
}

.scan__sep[b-lequjp6sau] {
    color: var(--kk-border-strong);
}

.scan__problem[b-lequjp6sau] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-warning);
}

.scan__fields[b-lequjp6sau] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-3);
}

.scan__qty[b-lequjp6sau] {
    flex: 0 0 6rem;
}

.scan__where[b-lequjp6sau] {
    flex: 1 1 10rem;
}

.scan__actions[b-lequjp6sau] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 34rem) {
    .scan__entry[b-lequjp6sau] {
        flex-direction: column;
    }

    .scan__qty[b-lequjp6sau],
    .scan__where[b-lequjp6sau] {
        flex: 1 1 100%;
    }
}
/* /Features/Pantry/Components/CreateProductForm.razor.rz.scp.css */
.create[b-92m6fwkz7v] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.create__chosen[b-92m6fwkz7v] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-2) var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
    min-height: var(--kk-touch-target);
}

.create__chosenname[b-92m6fwkz7v] {
    flex: 1 1 auto;
    font-weight: var(--kk-weight-medium);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.create__matches[b-92m6fwkz7v] {
    list-style: none;
    margin: var(--kk-space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    padding: var(--kk-space-1);
}

.create__match[b-92m6fwkz7v] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    width: 100%;
    min-height: 40px;
    padding: 0 var(--kk-space-2);
    border: 0;
    border-radius: var(--kk-radius-sm);
    background: none;
    font-family: inherit;
    font-size: var(--kk-text-base);
    text-align: left;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .create__match:hover[b-92m6fwkz7v] {
        background: var(--kk-bg-sunken);
    }

.create__dupes[b-92m6fwkz7v] {
    display: flex;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    background: var(--kk-warning-soft);
    border: 1px solid var(--kk-warning-border);
    border-radius: var(--kk-radius-md);
    color: var(--kk-warning);
}

    .create__dupes ul[b-92m6fwkz7v] {
        margin: var(--kk-space-2) 0;
        padding-left: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--kk-space-1);
    }

[b-92m6fwkz7v] .create__dupes > svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

.create__dupetitle[b-92m6fwkz7v] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
}

.create__dupe[b-92m6fwkz7v] {
    border: 0;
    background: none;
    padding: var(--kk-space-1) 0;
    font-family: inherit;
    font-size: var(--kk-text-sm);
    color: var(--kk-warning);
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.create__actions[b-92m6fwkz7v] {
    display: flex;
    justify-content: flex-end;
    gap: var(--kk-space-3);
    padding-top: var(--kk-space-2);
}

@media (max-width: 479.98px) {
    .create__actions[b-92m6fwkz7v] {
        flex-direction: column-reverse;
    }

    [b-92m6fwkz7v] .create__actions > .kk-btn {
        width: 100%;
    }
}

/* ---- what is still missing ---- */

/* Named requirements, not a disabled button and silence. */
.create__problems[b-92m6fwkz7v] {
    margin: 0;
    padding: var(--kk-space-3) var(--kk-space-3) var(--kk-space-3) var(--kk-space-5);
    border: 1px solid var(--kk-warning-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-warning-soft);
    color: var(--kk-text);
    font-size: var(--kk-text-sm);
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
}

/* ---- creating the generic food ---- */

.create__nofood[b-92m6fwkz7v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin-top: var(--kk-space-2);
    padding: var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
}

.create__nofoodtitle[b-92m6fwkz7v] {
    margin: 0;
    font-weight: var(--kk-weight-medium);
}

.create__matchtext[b-92m6fwkz7v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

/* The brand that explains the suggestion, under the food it resolved to. */
.create__matchnote[b-92m6fwkz7v] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* ---- common package sizes ---- */

/* Shortcuts, and they look like shortcuts: a labelled group above the ordinary amount
   fields rather than a second way of entering a quantity. */
.sizes[b-92m6fwkz7v] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

.sizes__title[b-92m6fwkz7v] {
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-muted);
}

.sizes__row[b-92m6fwkz7v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.sizes__pick[b-92m6fwkz7v] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    font-size: var(--kk-text-base);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .sizes__pick:focus-visible[b-92m6fwkz7v] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Border weight and a tint as well as colour, so the choice survives greyscale. */
.sizes__pick--on[b-92m6fwkz7v] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-medium);
}

.sizes__label[b-92m6fwkz7v] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}
/* /Features/Pantry/Components/DiscardConfirmationDialog.razor.rz.scp.css */
/* The last screen before food records go. Dense enough to read every name at once. */

.discard[b-wogfo1gdqw] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
}

.discard__lead[b-wogfo1gdqw] {
    margin: 0;
}

.discard__names[b-wogfo1gdqw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
    max-height: 40vh;

    /* A very long selection scrolls inside the dialog rather than pushing the destructive
       button off the bottom of a phone. */
    overflow-y: auto;
}

.discard__names li[b-wogfo1gdqw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kk-space-2);
    padding: var(--kk-space-2);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-surface-tinted);
}

.discard__name[b-wogfo1gdqw] {
    font-weight: var(--kk-weight-medium);
    overflow-wrap: anywhere;
}

.discard__detail[b-wogfo1gdqw] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.discard__more[b-wogfo1gdqw] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-2);
    border: none;
    background: none;
    color: var(--kk-primary-text);
    font: inherit;
    font-size: var(--kk-text-sm);
    cursor: pointer;
}

    .discard__more:focus-visible[b-wogfo1gdqw] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.discard__keeps[b-wogfo1gdqw] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.discard__warning[b-wogfo1gdqw] {
    margin: 0;
    padding: var(--kk-space-2) var(--kk-space-3);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-danger-soft);
    border: 1px solid var(--kk-danger-border);
    font-size: var(--kk-text-sm);
}
/* /Features/Pantry/Components/EditLotDialog.razor.rz.scp.css */
.edit[b-4a3lb3e6iu] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}
/* /Features/Pantry/Components/IngredientProductPicker.razor.rz.scp.css */
.picker[b-1havk6pu8v] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

.picker__loading[b-1havk6pu8v] {
    padding: var(--kk-space-4) 0;
}

.picker__group[b-1havk6pu8v] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.picker__grouphint[b-1havk6pu8v] {
    margin: -2px 0 0;
}

.picker__list[b-1havk6pu8v] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
}

.picker__option[b-1havk6pu8v] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    width: 100%;
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-3);
    border: 1px solid transparent;
    border-radius: var(--kk-radius-md);
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .picker__option:hover[b-1havk6pu8v] {
        background: var(--kk-bg-sunken);
        border-color: var(--kk-border);
    }

.picker__text[b-1havk6pu8v] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.picker__name[b-1havk6pu8v] {
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker__meta[b-1havk6pu8v] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    overflow: hidden;
    white-space: nowrap;
}

.picker__sep[b-1havk6pu8v] {
    color: var(--kk-text-subtle);
}

[b-1havk6pu8v] .picker__chevron {
    flex: 0 0 auto;
    color: var(--kk-text-subtle);
}

.picker__empty[b-1havk6pu8v] {
    padding: var(--kk-space-5) var(--kk-space-3);
    text-align: center;
}

.picker__emptytitle[b-1havk6pu8v] {
    margin: 0 0 var(--kk-space-1);
    font-weight: var(--kk-weight-semibold);
}

.picker__create[b-1havk6pu8v] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    width: 100%;
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px dashed var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
    color: var(--kk-primary-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .picker__create:hover[b-1havk6pu8v] {
        background: var(--kk-primary-soft);
        border-color: var(--kk-primary-border);
    }

.picker__createtitle[b-1havk6pu8v] {
    display: block;
    font-weight: var(--kk-weight-semibold);
}

.picker__createhint[b-1havk6pu8v] {
    display: block;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* Why a food is being suggested when nobody typed its name. Emphasised a little, because
   it is the sentence that makes "Nutella → Chocolate hazelnut spread" make sense. */
.picker__note[b-1havk6pu8v] {
    color: var(--kk-text);
    font-weight: var(--kk-weight-medium);
}
/* /Features/Pantry/Components/LeftoversPanel.razor.rz.scp.css */
/* Deliberately not styled like a pantry row. Cooked food is portions and estimates. */
.leftovers[b-q2b7pj3yi6] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    margin-bottom: var(--kk-space-5);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-left: 3px solid var(--kk-accent, var(--kk-primary));
    border-radius: var(--kk-radius-md);
}

.leftovers__head p[b-q2b7pj3yi6] {
    margin: 0;
}

.leftovers__list[b-q2b7pj3yi6] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.leftover[b-q2b7pj3yi6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
}

.leftover--old[b-q2b7pj3yi6] {
    border-color: var(--kk-danger-border, var(--kk-warning-border));
}

.leftover__identity[b-q2b7pj3yi6] {
    flex: 1 1 12rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.leftover__name[b-q2b7pj3yi6] {
    margin: 0;
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.leftover__meta[b-q2b7pj3yi6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.leftover__sep[b-q2b7pj3yi6] {
    color: var(--kk-border-strong);
}

.leftover__facts[b-q2b7pj3yi6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
}

.leftover__servings[b-q2b7pj3yi6] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
    font-variant-numeric: tabular-nums;
}

.leftover__estimated[b-q2b7pj3yi6] {
    font-size: var(--kk-text-sm);
    font-style: italic;
    color: var(--kk-text-subtle);
}

.leftover__actions[b-q2b7pj3yi6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

@media (max-width: 40rem) {
    .leftover__actions[b-q2b7pj3yi6] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Features/Pantry/Components/PantryItemDetailView.razor.rz.scp.css */
.totals[b-76kros1lq3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kk-space-5);
    padding: var(--kk-space-5);
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
}

@media (min-width: 768px) {
    .totals[b-76kros1lq3] {
        grid-template-columns: 1.4fr 1fr;
        align-items: start;
    }
}

.totals__value[b-76kros1lq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-4);
    margin: var(--kk-space-2) 0 var(--kk-space-3);
    font-size: var(--kk-text-3xl);
    font-weight: var(--kk-weight-bold);
    letter-spacing: var(--kk-tracking-tight);
    color: var(--kk-text-strong);
}

.totals__badges[b-76kros1lq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.totals__preferred[b-76kros1lq3] {
    padding-top: var(--kk-space-4);
    border-top: var(--kk-border-subtle-line);
}

@media (min-width: 768px) {
    .totals__preferred[b-76kros1lq3] {
        padding-top: 0;
        padding-left: var(--kk-space-5);
        border-top: 0;
        border-left: var(--kk-border-subtle-line);
    }
}

.totals__preferredrow[b-76kros1lq3] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    margin-top: var(--kk-space-2);
}

.totals__preferredname[b-76kros1lq3] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
}

.totals__preferredmeta[b-76kros1lq3] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.lots[b-76kros1lq3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
}

.lot[b-76kros1lq3] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
}

.lot--expired[b-76kros1lq3] {
    border-color: var(--kk-danger-border);
    background: color-mix(in srgb, var(--kk-danger-soft) 40%, var(--kk-surface));
}

.lot__head[b-76kros1lq3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kk-space-4);
}

.lot__identity[b-76kros1lq3] {
    min-width: 0;
}

.lot__name[b-76kros1lq3] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.lot__meta[b-76kros1lq3] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 2px 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.lot__sep[b-76kros1lq3] {
    color: var(--kk-text-subtle);
}

.lot__quantity[b-76kros1lq3] {
    margin: 0;
    text-align: right;
    flex: 0 0 auto;
    font-size: var(--kk-text-lg);
}

.lot__of[b-76kros1lq3] {
    display: block;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-normal);
    color: var(--kk-text-subtle);
}

.lot__facts[b-76kros1lq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2) var(--kk-space-3);
}

.lot__fact[b-76kros1lq3] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.lot__notes[b-76kros1lq3] {
    margin: 0;
    padding: var(--kk-space-2) var(--kk-space-3);
    background: var(--kk-surface-tinted);
    border-radius: var(--kk-radius-sm);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.lot__actions[b-76kros1lq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    padding-top: var(--kk-space-1);
}

.history[b-76kros1lq3] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
    background: var(--kk-surface);
    overflow: hidden;
}

.history__entry[b-76kros1lq3] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
}

.history__entry + .history__entry[b-76kros1lq3] {
    border-top: var(--kk-border-subtle-line);
}

.history__icon[b-76kros1lq3] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: var(--kk-radius-pill);
    background: var(--kk-bg-sunken);
    color: var(--kk-text-muted);
}

.history__text[b-76kros1lq3] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.history__what[b-76kros1lq3] {
    font-size: var(--kk-text-base);
}

.history__when[b-76kros1lq3] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.history__after[b-76kros1lq3] {
    flex: 0 0 auto;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

@media (max-width: 479.98px) {
    .lot__head[b-76kros1lq3] {
        flex-direction: column;
        gap: var(--kk-space-2);
    }

    .lot__quantity[b-76kros1lq3] {
        text-align: left;
    }

    [b-76kros1lq3] .lot__actions > .kk-btn {
        flex: 1 1 calc(50% - var(--kk-space-2));
    }
}

/* An estimated date must never look like a printed one. */
.lot__fact--estimated[b-76kros1lq3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-style: italic;
    color: var(--kk-text-subtle);
}

/* Removal outcomes: three genuinely different events, presented as such. */
.removal[b-76kros1lq3] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.removal__choice[b-76kros1lq3] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    min-height: var(--kk-touch-target);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .removal__choice:hover[b-76kros1lq3] {
        background: var(--kk-bg-sunken);
    }

.removal__choice--on[b-76kros1lq3] {
    border-color: var(--kk-primary);
    background: var(--kk-primary-soft);
}

.removal__text[b-76kros1lq3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.removal__title[b-76kros1lq3] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.removal__hint[b-76kros1lq3] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* A compound action's parts, shown under the one line that names it. */
.history__detail[b-76kros1lq3] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* ---- how much is left ----

   Six one-tap answers on a row. Correcting a jar should not mean opening a form —
   that is the difference between a pantry that stays roughly right and one nobody
   bothers to keep up. */

.levels[b-76kros1lq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
    margin: var(--kk-space-3) 0;
}

.levels__label[b-76kros1lq3] {
    flex: 0 0 100%;
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-semibold);
    letter-spacing: var(--kk-tracking-wide);
    text-transform: uppercase;
    color: var(--kk-text-muted);
}

.levels__pick[b-76kros1lq3] {
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    color: var(--kk-text);
    font: inherit;
    font-size: var(--kk-text-sm);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .levels__pick:hover:not(:disabled)[b-76kros1lq3] {
        border-color: var(--kk-border-strong);
        background: var(--kk-surface-tinted);
    }

    .levels__pick:focus-visible[b-76kros1lq3] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

    .levels__pick:disabled[b-76kros1lq3] {
        opacity: 0.6;
        cursor: default;
    }

/* Border weight as well as colour, so the current answer is visible without relying
   on hue. */
.levels__pick--on[b-76kros1lq3] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-semibold);
}

/* Said out loud, because it changes what every recipe check downstream can claim. */
.levels__note[b-76kros1lq3] {
    margin: 0 0 var(--kk-space-3);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

@media (max-width: 480px) {
    .levels__pick[b-76kros1lq3] {
        flex: 1 1 45%;
    }
}

/* ---- restocking ----

   Keep on hand, the effective level, and where that level came from. Stacked at every
   width: these are three related facts read in order, not three columns to compare. */

.restock[b-76kros1lq3] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.restock__keep[b-76kros1lq3] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    min-height: var(--kk-touch-target);
    cursor: pointer;
}

    .restock__keep .kk-checkbox[b-76kros1lq3] {
        flex: none;
        width: 1.35rem;
        height: 1.35rem;
        margin-top: 2px;
    }

.restock__keeptitle[b-76kros1lq3] {
    display: block;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.restock__keephint[b-76kros1lq3] {
    display: block;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* Which number is in force and where it came from. Two screens can set this and they
   never appear together, so it is stated rather than left to be worked out. */
.restock__effective[b-76kros1lq3] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-info-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-info-soft);
    color: var(--kk-info);
}

.restock__levels[b-76kros1lq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.restock__level[b-76kros1lq3] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    font-size: var(--kk-text-base);
    cursor: pointer;
}

    .restock__level:focus-within[b-76kros1lq3] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

    .restock__level:has(input:checked)[b-76kros1lq3] {
        border-color: var(--kk-primary);
        border-width: 2px;
        background: var(--kk-primary-soft);
        color: var(--kk-primary-text);
        font-weight: var(--kk-weight-medium);
    }

/* ---- one amount section per package ---- */

/* Replaces eight chips and a link to a second screen. The state on the left, one way to
   change it on the right. */
.amount[b-76kros1lq3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
}

.amount__state[b-76kros1lq3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.amount__label[b-76kros1lq3] {
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--kk-tracking-wide);
}

.amount__value[b-76kros1lq3] {
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-medium);
    overflow-wrap: anywhere;
}

.amount .kk-btn[b-76kros1lq3] {
    flex-shrink: 0;
    min-height: var(--kk-touch-target);
}

/* Below this the button and the state fight for the same row and both end up cramped. */
@media (max-width: 479.98px) {
    .amount[b-76kros1lq3] {
        flex-direction: column;
        align-items: stretch;
    }

    .amount .kk-btn[b-76kros1lq3] {
        width: 100%;
    }
}

/* ---- what happens to the estimate when a package moves shelf ---- */

/* Its own class rather than the stock-level chips': these ask a different question, and the
   item page deliberately carries no level chips at all. */
.movepick[b-76kros1lq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-top: var(--kk-space-2);
}

.movepick__opt[b-76kros1lq3] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    font-size: var(--kk-text-base);
    cursor: pointer;
}

    .movepick__opt:focus-within[b-76kros1lq3] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Border weight and a tint as well as colour, so the choice survives greyscale. */
.movepick__opt--on[b-76kros1lq3] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-medium);
}

/* ---- how much is going in the bin ---- */

/* Its own classes rather than the amount editor's level chips. Those chips are for saying
   how full something is; these are a different question with a different answer.

   Wraps rather than scrolls. Four options at 360 px will not sit on one line, and a row that
   scrolls sideways hides the option nobody knew was there — which here is the difference
   between recording a measurement and recording a guess. */
.discardpick[b-76kros1lq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

label.discardpick[b-76kros1lq3] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);

    /* Tighter than before now there are four of them, so two still fit across a phone. */
    padding: var(--kk-space-2) var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    cursor: pointer;
}

/* More than the package holds. A blocking notice rather than a hint, because the button is
   disabled behind it and the way forward — take all of it — is right there. */
.discardover[b-76kros1lq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
    margin-top: var(--kk-space-3);
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-danger-border, var(--kk-border-strong));
    border-radius: var(--kk-radius-lg);
    background: var(--kk-danger-soft, var(--kk-bg-sunken));
}

.discardover__text[b-76kros1lq3] {
    flex: 1 1 14ch;
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-danger-text, var(--kk-text));
}

label.discardpick--on[b-76kros1lq3] {
    border-width: 2px;
    border-color: var(--kk-primary);
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-medium);
}
/* /Features/Pantry/Components/PantryItemRow.razor.rz.scp.css */
.row[b-4wh6qg1ec2] {
    display: flex;
    align-items: stretch;
    gap: var(--kk-space-2);
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
    transition: var(--kk-transition-colors), box-shadow var(--kk-duration-fast) var(--kk-ease);
}

    .row:hover[b-4wh6qg1ec2] {
        border-color: var(--kk-border-strong);
        background: var(--kk-surface-tinted);
    }

/* The primary target: everything identifying the item. Stacks on a phone so a long name
   gets the full width instead of competing with the amount for a third of it. */
.row__open[b-4wh6qg1ec2] {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "avatar main" "avatar quantity" "status status";
    align-items: center;
    column-gap: var(--kk-space-3);
    row-gap: var(--kk-space-2);
    padding: var(--kk-space-4);
    border-radius: var(--kk-radius-lg);
    color: inherit;
    text-decoration: none;
}

    .row__open:hover[b-4wh6qg1ec2] {
        text-decoration: none;
        color: inherit;
    }

    .row__open:focus-visible[b-4wh6qg1ec2] {
        outline: var(--kk-focus-ring);
        outline-offset: -3px;
    }

/* From tablet width the original four-column comparison layout returns — a denser list
   is genuinely better when several rows are visible side by side. */
@media (min-width: 768px) {
    .row__open[b-4wh6qg1ec2] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "avatar main quantity" "avatar status status";
        column-gap: var(--kk-space-4);
    }
}

/* ---- actions, beside the link rather than inside it ---- */

.row__actions[b-4wh6qg1ec2] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--kk-space-1);
    padding-right: var(--kk-space-2);
}

.row__quick[b-4wh6qg1ec2] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: var(--kk-touch-target);
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-2);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-surface);
    color: var(--kk-text-muted);
    font: inherit;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .row__quick:hover[b-4wh6qg1ec2] {
        background: var(--kk-surface-tinted);
        border-color: var(--kk-border-strong);
        color: var(--kk-text);
    }

    .row__quick:focus-visible[b-4wh6qg1ec2] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.row__quicklabel[b-4wh6qg1ec2] {
    font-size: 10px;
    letter-spacing: var(--kk-tracking-wide);
    text-transform: uppercase;
}

/* Below 380 px the word does not fit beside the menu. The icon plus the aria-label
   carries it; the label is decoration at that size. */
@media (max-width: 379.98px) {
    .row__quicklabel[b-4wh6qg1ec2] {
        display: none;
    }
}

.row--expired[b-4wh6qg1ec2] {
    border-color: var(--kk-danger-border);
    background: color-mix(in srgb, var(--kk-danger-soft) 45%, var(--kk-surface));
}

/* One layout, tightened by the viewport rather than by a preference. The toggle this
   replaces changed the padding and the avatar size and nothing else, which is not a
   decision worth putting in front of somebody — and a saved density is a second row
   layout to keep working at every width. */
@media (min-width: 1024px) {
    .row__open[b-4wh6qg1ec2] {
        padding: var(--kk-space-3) var(--kk-space-4);
        column-gap: var(--kk-space-3);
    }
}

[b-4wh6qg1ec2] .row > .avatar {
    grid-area: avatar;
}

.row__main[b-4wh6qg1ec2] {
    grid-area: main;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.row__title[b-4wh6qg1ec2] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-width: 0;
}

.row__name[b-4wh6qg1ec2] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: anywhere;
}

.row__meta[b-4wh6qg1ec2] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.row__sep[b-4wh6qg1ec2] {
    color: var(--kk-text-subtle);
}

.row__quantity[b-4wh6qg1ec2] {
    grid-area: quantity;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.row__amount[b-4wh6qg1ec2] {
    font-size: var(--kk-text-base);
}

.row__status[b-4wh6qg1ec2] {
    grid-area: status;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
}



/* Wide viewports: everything on one line, which scans much faster. */
@media (min-width: 900px) {
    .row[b-4wh6qg1ec2] {
        grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
        grid-template-areas: "avatar main status quantity chevron";
        row-gap: 0;
    }

    .row__status[b-4wh6qg1ec2] {
        justify-content: flex-end;
    }
}

/* The remaining bar sits under the amount, not beside the name. Secondary information
   that must not make every card taller than it was. */
.row__quantity .rem[b-4wh6qg1ec2] {
    margin-top: 0.2rem;
    max-width: 12rem;
}

/* On a narrow phone the amount text and the bar stack in the space they already had. */
@media (max-width: 479.98px) {
    .row__quantity .rem[b-4wh6qg1ec2] {
        max-width: none;
    }
}

/* ---- selection mode ---- */

/* The whole row is the tick target. A small checkbox as the only way to select is what
   turns a fridge clear-out into a game of darts. */
.row__open--select[b-4wh6qg1ec2] {
    cursor: pointer;
    user-select: none;
}

.row__check[b-4wh6qg1ec2] {
    flex-shrink: 0;
    margin-right: var(--kk-space-2);

    /* Comfortably past the minimum. This is the control the entire workflow rests on. */
    width: 1.35rem;
    height: 1.35rem;
}

.row--selecting[b-4wh6qg1ec2] {
    /* No hover-to-navigate affordance while selecting: the row does not navigate. */
    cursor: pointer;
}

/* Selected carries a fill, a border and the checkbox itself — never colour alone. */
.row--selected[b-4wh6qg1ec2] {
    background: var(--kk-primary-soft);
    border-color: var(--kk-primary);
}

.row__open--select:focus-within[b-4wh6qg1ec2] {
    outline: var(--kk-focus-ring);
    outline-offset: var(--kk-focus-ring-offset);
}
/* /Features/Pantry/Components/PantryReviewSheet.razor.rz.scp.css */
.review[b-ox316q57yt] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

.review__progress[b-ox316q57yt] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.review__bar[b-ox316q57yt] {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: var(--kk-bg-sunken);
    overflow: hidden;
}

.review__barfill[b-ox316q57yt] {
    display: block;
    height: 100%;
    background: var(--kk-primary);
    transition: width 160ms ease-out;
}

.review__item[b-ox316q57yt] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
}

.review__head[b-ox316q57yt] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
}

.review__identity[b-ox316q57yt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.review__name[b-ox316q57yt] {
    margin: 0;
    font-size: var(--kk-text-lg);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.review__meta[b-ox316q57yt] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.review__sep[b-ox316q57yt] {
    color: var(--kk-border-strong);
}

.review__facts[b-ox316q57yt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.review__attention[b-ox316q57yt] {
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-warning);
}

.review__choices[b-ox316q57yt] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.review__choice[b-ox316q57yt] {
    justify-content: flex-start;
    min-height: var(--kk-touch-target);
}

.choice[b-ox316q57yt] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    min-height: var(--kk-touch-target);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .choice:hover[b-ox316q57yt] {
        background: var(--kk-bg-sunken);
    }

.choice--on[b-ox316q57yt] {
    border-color: var(--kk-primary);
    background: var(--kk-primary-soft);
}

.choice__text[b-ox316q57yt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.choice__title[b-ox316q57yt] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.choice__hint[b-ox316q57yt] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.review__done[b-ox316q57yt] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.review__donetitle[b-ox316q57yt] {
    margin: 0;
    font-size: var(--kk-text-lg);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.review__totals[b-ox316q57yt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-3) var(--kk-space-5);
    margin: 0;
}

    .review__totals > div[b-ox316q57yt] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .review__totals dt[b-ox316q57yt] {
        font-size: var(--kk-text-sm);
        color: var(--kk-text-muted);
    }

    .review__totals dd[b-ox316q57yt] {
        margin: 0;
        font-size: var(--kk-text-lg);
        font-weight: var(--kk-weight-semibold);
        font-variant-numeric: tabular-nums;
        color: var(--kk-text-strong);
    }
/* /Features/Pantry/Components/PantrySummary.razor.rz.scp.css */
.summary[b-n0bbsqednk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kk-space-3);
}

.summary__stat[b-n0bbsqednk] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kk-space-1);
    padding: var(--kk-space-4);
    min-height: 82px;
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
    background: var(--kk-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--kk-transition-colors), box-shadow var(--kk-duration-fast) var(--kk-ease);
}

    .summary__stat:hover[b-n0bbsqednk] {
        border-color: var(--kk-border-strong);
        background: var(--kk-surface-tinted);
    }

.summary__stat--on[b-n0bbsqednk] {
    border-color: var(--kk-primary);
    box-shadow: 0 0 0 1px var(--kk-primary);
    background: var(--kk-primary-soft);
}

.summary__value[b-n0bbsqednk] {
    font-size: var(--kk-text-2xl);
    font-weight: var(--kk-weight-bold);
    line-height: 1.1;
    color: var(--kk-text-strong);
    letter-spacing: var(--kk-tracking-tight);
}

.summary__label[b-n0bbsqednk] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.summary__stat--warn .summary__value[b-n0bbsqednk] { color: var(--kk-warning); }
.summary__stat--warn .summary__label[b-n0bbsqednk] { color: var(--kk-warning); }
.summary__stat--accent .summary__value[b-n0bbsqednk] { color: var(--kk-accent-text); }
.summary__stat--accent .summary__label[b-n0bbsqednk] { color: var(--kk-accent-text); }

.summary__expired[b-n0bbsqednk] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: var(--kk-space-3) 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-danger);
}

@media (max-width: 479.98px) {
    .summary[b-n0bbsqednk] {
        grid-template-columns: 1fr;
        gap: var(--kk-space-2);
    }

    .summary__stat[b-n0bbsqednk] {
        flex-direction: row;
        align-items: baseline;
        gap: var(--kk-space-3);
        min-height: var(--kk-touch-target);
        padding: var(--kk-space-3) var(--kk-space-4);
    }

    .summary__value[b-n0bbsqednk] {
        font-size: var(--kk-text-xl);
    }
}
/* /Features/Pantry/Components/PantryView.razor.rz.scp.css */
.controls[b-67np7if17b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
}

.controls__filters[b-67np7if17b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    min-width: 0;
}

/* Sort moved into the header toolbar with the other everyday controls; the density toggle
   went altogether. What is left on this row is the location filters, which now have it to
   themselves and wrap into as many lines as they need. */
.toolbar__sort[b-67np7if17b] {
    min-width: 11rem;
    flex: 0 1 auto;
}

.resultcount[b-67np7if17b] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.items[b-67np7if17b] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.items__more[b-67np7if17b] {
    display: flex;
    justify-content: center;
    padding-top: var(--kk-space-2);
}

.example[b-67np7if17b] {
    list-style: none;
    margin: var(--kk-space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
}

.example li[b-67np7if17b] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

[b-67np7if17b] .example li svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--kk-primary);
}

@media (max-width: 639.98px) {
    .controls[b-67np7if17b] {
        flex-direction: column;
        align-items: stretch;
    }

    /* Wrapping rather than scrolling sideways. A hidden horizontal scroller keeps the
       filters on one line at the cost of hiding some of them off-screen edge, with no
       affordance saying so — and there are only ever a handful of locations. */
    .controls__filters[b-67np7if17b] {
        flex-wrap: wrap;
    }

    /* The sort control takes the width it needs beside Select and the menu, and drops to
       its own line when it cannot. */
    .toolbar__sort[b-67np7if17b] {
        flex: 1 1 9rem;
    }
}

/* ---- bulk discard ---- */

/* A banner above the list rather than a separate screen: the search and filters people
   already know sit right above it, and rebuilding them elsewhere would be a second pantry
   list to keep in step. */
.discardbar[b-67np7if17b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3);
    margin-bottom: var(--kk-space-3);
    border: 1px solid var(--kk-danger-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-danger-soft);
}

.discardbar__text[b-67np7if17b] {
    min-width: 0;
}

.discardbar__title[b-67np7if17b] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
}

.discardbar__count[b-67np7if17b] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.discardbar__actions[b-67np7if17b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

    .discardbar__actions .kk-btn[b-67np7if17b] {
        min-height: var(--kk-touch-target);
    }

/* Below this the count and the buttons fight for one row and both end up cramped. */
@media (max-width: 599.98px) {
    .discardbar[b-67np7if17b] {
        flex-direction: column;
        align-items: stretch;
    }

    .discardbar__actions .kk-btn[b-67np7if17b] {
        flex: 1 1 0;
    }
}
/* /Features/Pantry/Components/PasteItemsSheet.razor.rz.scp.css */
.paste__box[b-042fooav3w] {
    min-height: 12rem;
    font-family: var(--kk-font-mono, ui-monospace, monospace);
    font-size: var(--kk-text-md);
    line-height: 1.6;
}

.paste[b-042fooav3w] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.paste__summary[b-042fooav3w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2) var(--kk-space-4);
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    font-size: var(--kk-text-sm);
}

.paste__attention[b-042fooav3w] {
    color: var(--kk-warning);
    font-weight: var(--kk-weight-medium);
}

.paste__list[b-042fooav3w] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.paste__row[b-042fooav3w] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.paste__row--problem[b-042fooav3w] {
    border-color: var(--kk-warning-border);
    background: var(--kk-warning-soft);
}

.paste__row--skipped[b-042fooav3w] {
    opacity: 0.6;
}

.paste__what[b-042fooav3w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.paste__name[b-042fooav3w] {
    margin: 0;
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.paste__raw[b-042fooav3w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.paste__rawtext[b-042fooav3w] {
    font-family: var(--kk-font-mono, ui-monospace, monospace);
}

.paste__sep[b-042fooav3w] {
    color: var(--kk-border-strong);
}

.paste__problem[b-042fooav3w] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-warning);
}

.paste__fields[b-042fooav3w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-3);
}

.paste__qty[b-042fooav3w] {
    flex: 0 0 6rem;
}

.paste__unit[b-042fooav3w] {
    flex: 0 0 9rem;
}

.paste__where[b-042fooav3w] {
    flex: 1 1 10rem;
}

.paste__alts[b-042fooav3w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

.paste__actions[b-042fooav3w] {
    display: flex;
    justify-content: flex-end;
    gap: var(--kk-space-2);
}

@media (max-width: 34rem) {
    .paste__qty[b-042fooav3w],
    .paste__unit[b-042fooav3w],
    .paste__where[b-042fooav3w] {
        flex: 1 1 100%;
    }
}
/* /Features/Pantry/Components/QuickAddStrip.razor.rz.scp.css */
.quickadd[b-d643jofdl0] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.quickadd__list[b-d643jofdl0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.quickadd__chip[b-d643jofdl0] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-3);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-pill, var(--kk-radius-md));
    background: var(--kk-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .quickadd__chip:hover[b-d643jofdl0] {
        background: var(--kk-bg-sunken);
        border-color: var(--kk-primary);
    }

.quickadd__chip--low[b-d643jofdl0] {
    border-color: var(--kk-warning-border);
    background: var(--kk-warning-soft);
}

.quickadd__text[b-d643jofdl0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.quickadd__name[b-d643jofdl0] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.quickadd__why[b-d643jofdl0] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

@media (max-width: 30rem) {
    .quickadd__chip[b-d643jofdl0] {
        flex: 1 1 100%;
    }
}
/* /Features/Pantry/Components/QuickKitchenSetup.razor.rz.scp.css */
.qks[b-2mqp4gj1yl] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

.qks__search[b-2mqp4gj1yl] {
    margin: 0;
}

.qks__group[b-2mqp4gj1yl] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.qks__grouptitle[b-2mqp4gj1yl] {
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--kk-text-muted);
    display: flex;
    align-items: baseline;
    gap: var(--kk-space-2);
}

.qks__groupnote[b-2mqp4gj1yl] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: var(--kk-text-xs);
}

.qks__list[b-2mqp4gj1yl] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kk-space-1);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.qks__item[b-2mqp4gj1yl] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
    padding: var(--kk-space-2);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.qks__item--have[b-2mqp4gj1yl] {
    opacity: 0.62;
}

.qks__pick[b-2mqp4gj1yl] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    cursor: pointer;
    min-height: 2.25rem;
}

.qks__item--have .qks__pick[b-2mqp4gj1yl] {
    cursor: default;
}

.qks__name[b-2mqp4gj1yl] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.3;
}

.qks__where[b-2mqp4gj1yl],
.qks__have[b-2mqp4gj1yl] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.qks__amount[b-2mqp4gj1yl] {
    padding-left: 1.75rem;
}

.kk-input--sm[b-2mqp4gj1yl] {
    max-width: 9rem;
    padding-block: var(--kk-space-1);
}

.qks__missing[b-2mqp4gj1yl] {
    margin: 0;
}

/* Sticks to the bottom so the count and the button stay reachable in a long list. */
.qks__bar[b-2mqp4gj1yl] {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--kk-space-3) 0 var(--kk-space-1);
    background: var(--kk-surface);
    border-top: 1px solid var(--kk-border);
}

.qks__count[b-2mqp4gj1yl] {
    margin: 0;
    font-size: var(--kk-text-sm);
}

.qks__actions[b-2mqp4gj1yl] {
    display: flex;
    gap: var(--kk-space-2);
}

/* ---- amount ---- */

.qks__unknown[b-2mqp4gj1yl] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.qks__amount[b-2mqp4gj1yl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
    padding-left: 1.75rem;
}

/* Quantity and unit sit together and wrap together, so a number never appears alone. */
.qks__amountrow[b-2mqp4gj1yl] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--kk-space-2);
}

.qks__amountrow .kk-field[b-2mqp4gj1yl] {
    margin: 0;
}

.qks__amountrow .kk-input--sm[b-2mqp4gj1yl] {
    inline-size: 5.5rem;
}

.kk-select--sm[b-2mqp4gj1yl] {
    inline-size: auto;
    min-inline-size: 6rem;
    padding-block: var(--kk-space-1);
}

.qks__amounterror[b-2mqp4gj1yl] {
    margin: 0;
    flex-basis: 100%;
    font-size: var(--kk-text-xs);
    color: var(--kk-danger);
}

@media (max-width: 30rem) {
    .qks__amount[b-2mqp4gj1yl] {
        padding-left: 0;
    }

    /* Nothing scrolls sideways: the row wraps instead. */
    .qks__amountrow[b-2mqp4gj1yl] {
        inline-size: 100%;
    }
}
/* /Features/Pantry/Components/RemainingBar.razor.rz.scp.css */
/* Secondary information. Compact enough that adding it to every row does not make the
   pantry list twice as tall. */

.rem[b-i1v42gd6za] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.rem__track[b-i1v42gd6za] {
    height: 4px;
    border-radius: var(--kk-radius-pill);
    background: var(--kk-bg-sunken);
    overflow: hidden;
}

.rem__fill[b-i1v42gd6za] {
    height: 100%;
    border-radius: inherit;
    background: var(--kk-primary);
    transition: width var(--kk-duration-base) var(--kk-ease);
}

/* Low stock changes the fill, but the row also says "Below your 25% restock level" in
   words — the colour is a second signal, never the only one. */
.rem__track--low .rem__fill[b-i1v42gd6za] {
    background: var(--kk-warning);
}

.rem__text[b-i1v42gd6za] {
    margin: 0;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
    line-height: var(--kk-leading-snug);
}

.rem__text--plain[b-i1v42gd6za] {
    font-style: italic;
}

.rem__percent[b-i1v42gd6za] {
    font-variant-numeric: tabular-nums;
}

.rem__low[b-i1v42gd6za] {
    color: var(--kk-warning);
}

@media (prefers-reduced-motion: reduce) {
    .rem__fill[b-i1v42gd6za] {
        transition: none;
    }
}
/* /Features/Pantry/Components/UseSomeSheet.razor.rz.scp.css */
.use[b-p6lc9iojzp] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

.use__none[b-p6lc9iojzp] {
    margin: 0;
    color: var(--kk-text-muted);
}

/* Where it comes from. One quiet line by default — this is not an allocation screen. */
.source[b-p6lc9iojzp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
}

.source__text[b-p6lc9iojzp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.source__label[b-p6lc9iojzp] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.source__value[b-p6lc9iojzp] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.source__meta[b-p6lc9iojzp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kk-space-2);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.source__sep[b-p6lc9iojzp] {
    color: var(--kk-border-strong);
}

.source__change[b-p6lc9iojzp] {
    flex-shrink: 0;
}

.picker[b-p6lc9iojzp] {
    margin: 0;
}

/* Quick fractions: the common case should be one tap. */
.quick[b-p6lc9iojzp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

.quick__btn[b-p6lc9iojzp] {
    min-width: 56px;
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-3);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
    color: var(--kk-text);
    font-family: inherit;
    font-size: var(--kk-text-md);
    font-weight: var(--kk-weight-medium);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .quick__btn:hover[b-p6lc9iojzp] {
        background: var(--kk-bg-sunken);
    }

.quick__btn--on[b-p6lc9iojzp] {
    background: var(--kk-primary);
    border-color: var(--kk-primary);
    color: #fff;
}

.preview[b-p6lc9iojzp] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    padding: var(--kk-space-4);
    background: var(--kk-primary-soft);
    border: 1px solid var(--kk-primary-border);
    border-radius: var(--kk-radius-md);
}

.preview__heading[b-p6lc9iojzp] {
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-primary-text);
}

.preview__row[b-p6lc9iojzp] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kk-space-3);
    font-size: var(--kk-text-sm);
    color: var(--kk-primary-text);
}

.preview__row--strong[b-p6lc9iojzp] {
    font-size: var(--kk-text-md);
    font-weight: var(--kk-weight-semibold);
}

.preview__value[b-p6lc9iojzp] {
    font-variant-numeric: tabular-nums;
}

.preview__lines[b-p6lc9iojzp] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.preview__line[b-p6lc9iojzp] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kk-space-3);
    flex-wrap: wrap;
}

.preview__lineamount[b-p6lc9iojzp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.preview__linewhere[b-p6lc9iojzp] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.preview__approx[b-p6lc9iojzp] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* The chosen package cannot cover it. Say so, and offer the ways out. */
.short[b-p6lc9iojzp] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
}

.short__title[b-p6lc9iojzp] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-primary-text);
}

.short__facts[b-p6lc9iojzp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2) var(--kk-space-5);
    margin: 0;
}

    .short__facts > div[b-p6lc9iojzp] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .short__facts dt[b-p6lc9iojzp] {
        font-size: var(--kk-text-sm);
        color: var(--kk-text-muted);
    }

    .short__facts dd[b-p6lc9iojzp] {
        margin: 0;
        font-weight: var(--kk-weight-semibold);
        font-variant-numeric: tabular-nums;
        color: var(--kk-primary-text);
    }

.short__actions[b-p6lc9iojzp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.use__warning[b-p6lc9iojzp] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    margin: 0;
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-warning-soft);
    border: 1px solid var(--kk-warning-border);
    border-radius: var(--kk-radius-md);
    color: var(--kk-warning);
    font-size: var(--kk-text-sm);
}

.choices[b-p6lc9iojzp] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.choice[b-p6lc9iojzp] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    min-height: var(--kk-touch-target);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .choice:hover[b-p6lc9iojzp] {
        background: var(--kk-bg-sunken);
    }

.choice--on[b-p6lc9iojzp] {
    border-color: var(--kk-primary);
    background: var(--kk-primary-soft);
}

.choice--muted[b-p6lc9iojzp] {
    opacity: 0.72;
}

.choice__text[b-p6lc9iojzp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.choice__title[b-p6lc9iojzp] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.choice__hint[b-p6lc9iojzp] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* Narrow viewports: the action row must stay reachable with a thumb. */
@media (max-width: 30rem) {
    .source[b-p6lc9iojzp] {
        flex-direction: column;
    }

    .source__change[b-p6lc9iojzp] {
        align-self: stretch;
    }

    .short__actions .kk-btn[b-p6lc9iojzp] {
        flex: 1 1 auto;
    }
}
/* /Features/Recipes/Components/AllergenWarning.razor.rz.scp.css */
/*
    Allergen warnings.

    Colour reinforces; it never carries the meaning. Every state has an icon and words, and
    the print variant is deliberately monochrome because a warning that only exists in
    colour disappears on a black-and-white printer.
*/

/* ------------------------------------------------------------------ badge */

.alrg-badge[b-342212r5x2] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
    padding: 0.15rem 0.5rem;

    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-pill);

    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
}

.alrg-badge--confirmed[b-342212r5x2] {
    background: var(--kk-danger-soft);
    border-color: var(--kk-danger-border);
    color: var(--kk-danger);
}

.alrg-badge--possible[b-342212r5x2] {
    background: var(--kk-warning-soft);
    border-color: var(--kk-warning-border);
    color: var(--kk-warning);
}

/* ------------------------------------------------------------------ panel */

.alrg[b-342212r5x2] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    padding: var(--kk-space-4);

    border: 1px solid var(--kk-warning-border);
    border-inline-start-width: 4px;
    border-radius: var(--kk-radius-md);
    background: var(--kk-warning-soft);
}

/* A confirmed conflict is a different statement from a maybe, and looks like one. */
.alrg:has(.alrg__item--confirmed)[b-342212r5x2] {
    border-color: var(--kk-danger-border);
    background: var(--kk-danger-soft);
}

.alrg__head[b-342212r5x2] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-base);
    color: var(--kk-text-strong);
}

.alrg__list[b-342212r5x2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.alrg__item[b-342212r5x2] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kk-space-2);
    font-size: var(--kk-text-sm);
    line-height: 1.5;
}

/* A left rule rather than coloured text, so the distinction survives greyscale. */
.alrg__item--confirmed[b-342212r5x2] {
    padding-inline-start: var(--kk-space-3);
    border-inline-start: 3px solid var(--kk-danger-border);
}

.alrg__item--possible[b-342212r5x2],
.alrg__item--unknown[b-342212r5x2] {
    padding-inline-start: var(--kk-space-3);
    border-inline-start: 3px dashed var(--kk-warning-border);
}

.alrg__what[b-342212r5x2] {
    color: var(--kk-text-strong);
}

.alrg__who[b-342212r5x2],
.alrg__why[b-342212r5x2] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.alrg__caveat[b-342212r5x2] {
    margin: 0;
    padding-top: var(--kk-space-2);
    border-top: 1px solid var(--kk-border);
    font-size: var(--kk-text-xs);
    line-height: 1.5;
    color: var(--kk-text-muted);
}

/* ------------------------------------------------------------------ clear */

.alrg-clear[b-342212r5x2] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-3);

    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);

    font-size: var(--kk-text-sm);
    line-height: 1.5;
    color: var(--kk-text-muted);
}

.alrg-clear svg[b-342212r5x2] {
    flex: 0 0 auto;
    margin-block-start: 0.15rem;
}

/* ------------------------------------------------------------------ print */

.alrg--print[b-342212r5x2] {
    border: 2px solid #000;
    border-radius: 0;
    background: transparent;
    padding: 0.4cm;
}

@media print {
    /*
        Monochrome and unmissable. Background colours are routinely dropped by print
        settings, so the warning is carried by a heavy border and bold text instead.
    */
    .alrg[b-342212r5x2],
    .alrg--print[b-342212r5x2] {
        border: 2px solid #000 !important;
        background: transparent !important;
        border-radius: 0;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .alrg__head[b-342212r5x2] {
        font-size: 11pt;
    }

    .alrg__item[b-342212r5x2] {
        font-size: 9.5pt;
    }

    .alrg__item--confirmed[b-342212r5x2] {
        border-inline-start-color: #000;
    }

    .alrg__item--possible[b-342212r5x2],
    .alrg__item--unknown[b-342212r5x2] {
        border-inline-start-color: #666;
    }

    .alrg__caveat[b-342212r5x2] {
        font-size: 8pt;
        color: #000;
    }

    /* Nothing to say means nothing printed. A "no conflict" note on paper would be read
       as a clearance, which it is not. */
    .alrg-clear[b-342212r5x2] {
        display: none;
    }
}
/* /Features/Recipes/Components/CookRecipeDialog.razor.rz.scp.css */
.cook[b-3ea7gef2df] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

.cook__servings[b-3ea7gef2df] {
    max-width: 260px;
}

.cook__warning[b-3ea7gef2df],
.cook__note[b-3ea7gef2df] {
    display: flex;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    border-radius: var(--kk-radius-md);
    font-size: var(--kk-text-sm);
}

.cook__warning[b-3ea7gef2df] {
    background: var(--kk-warning-soft);
    border: 1px solid var(--kk-warning-border);
    color: var(--kk-warning);
}

.cook__note[b-3ea7gef2df] {
    background: var(--kk-info-soft);
    border: 1px solid var(--kk-info-border);
    color: var(--kk-info);
}

[b-3ea7gef2df] .cook__warning > svg,
[b-3ea7gef2df] .cook__note > svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

.cook__warning p[b-3ea7gef2df],
.cook__note p[b-3ea7gef2df] {
    margin: 0;
}

.cook__warningtitle[b-3ea7gef2df] {
    font-weight: var(--kk-weight-semibold);
    margin-bottom: var(--kk-space-1) !important;
}

.cook__lines[b-3ea7gef2df] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.line[b-3ea7gef2df] {
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface);
}

.line--off[b-3ea7gef2df] {
    background: var(--kk-surface-tinted);
    color: var(--kk-text-muted);
}

.line__head[b-3ea7gef2df] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
}

.line__check[b-3ea7gef2df] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    margin-left: calc(var(--kk-space-2) * -1);
    border-radius: var(--kk-radius-sm);
    cursor: pointer;
}

.line__identity[b-3ea7gef2df] {
    flex: 1 1 auto;
    min-width: 0;
}

.line__name[b-3ea7gef2df] {
    margin: 0;
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.line--off .line__name[b-3ea7gef2df] {
    color: var(--kk-text-muted);
}

.line__flag[b-3ea7gef2df] {
    margin-left: var(--kk-space-2);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kk-text-subtle);
}

.line__unavailable[b-3ea7gef2df] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.line__amount[b-3ea7gef2df] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    flex: 0 0 auto;
}

.line__input[b-3ea7gef2df] {
    width: 92px;
    min-height: 36px;
}

.line__unit[b-3ea7gef2df] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    min-width: 3ch;
}

.line__lots[b-3ea7gef2df] {
    list-style: none;
    margin: var(--kk-space-3) 0 0;
    padding: var(--kk-space-3) 0 0;
    border-top: var(--kk-border-subtle-line);
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.lot[b-3ea7gef2df] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    font-size: var(--kk-text-sm);
}

.lot__amount[b-3ea7gef2df] {
    flex: 0 0 auto;
    min-width: 6ch;
}

.lot__where[b-3ea7gef2df] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--kk-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lot__after[b-3ea7gef2df] {
    flex: 0 0 auto;
    color: var(--kk-text-subtle);
}

.line__short[b-3ea7gef2df] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: var(--kk-space-2) 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-warning);
}

.done[b-3ea7gef2df] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.done__headline[b-3ea7gef2df] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    margin: 0;
    font-size: var(--kk-text-md);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-success);
}

.done__facts[b-3ea7gef2df] {
    list-style: none;
    margin: 0;
    padding: var(--kk-space-4);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2) var(--kk-space-6);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.done__facts strong[b-3ea7gef2df] {
    color: var(--kk-text-strong);
}

.done__low[b-3ea7gef2df] {
    padding: var(--kk-space-4);
    background: var(--kk-accent-soft);
    border: 1px solid var(--kk-accent-border);
    border-radius: var(--kk-radius-md);
    color: var(--kk-accent-text);
    font-size: var(--kk-text-sm);
}

.done__lowtitle[b-3ea7gef2df] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0 0 var(--kk-space-2);
    font-weight: var(--kk-weight-semibold);
}

.done__low ul[b-3ea7gef2df] {
    margin: 0 0 var(--kk-space-3);
    padding-left: 1.25rem;
}

@media (max-width: 479.98px) {
    .line__head[b-3ea7gef2df] {
        flex-wrap: wrap;
    }

    .line__amount[b-3ea7gef2df] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Substitution offers. Present, explained, and never pre-selected. */
.subs[b-3ea7gef2df] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin-top: var(--kk-space-3);
}

.subs__item[b-3ea7gef2df] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.subs__item--on[b-3ea7gef2df] {
    border-color: var(--kk-primary);
    background: var(--kk-primary-soft);
}

.subs__item--warn[b-3ea7gef2df] {
    border-color: var(--kk-warning-border);
    background: var(--kk-warning-soft);
}

.subs__text[b-3ea7gef2df] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 14rem;
}

.subs__title[b-3ea7gef2df] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0;
}

.subs__name[b-3ea7gef2df] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.subs__guidance[b-3ea7gef2df] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text);
}

.subs__caveat[b-3ea7gef2df] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    font-style: italic;
}

.subs__facts[b-3ea7gef2df] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.subs__sep[b-3ea7gef2df] {
    color: var(--kk-border-strong);
}

.subs__action[b-3ea7gef2df] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    flex-shrink: 0;
}

.subs__amount[b-3ea7gef2df] {
    width: 6rem;
}

@media (max-width: 34rem) {
    .subs__action[b-3ea7gef2df] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Storing leftovers, offered at the one moment someone knows how much is left. */
.done__leftovers[b-3ea7gef2df] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    padding: var(--kk-space-4);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
}

.done__leftoverstitle[b-3ea7gef2df] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.done__leftoverrow[b-3ea7gef2df] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--kk-space-3);
}

.done__leftoverqty[b-3ea7gef2df] { flex: 0 0 7rem; }
.done__leftoverwhere[b-3ea7gef2df] { flex: 1 1 10rem; }

.done__stored[b-3ea7gef2df] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0;
    color: var(--kk-primary-text);
}

@media (max-width: 34rem) {
    .done__leftoverqty[b-3ea7gef2df],
    .done__leftoverwhere[b-3ea7gef2df] {
        flex: 1 1 100%;
    }
}

/* ---- worth restocking ----

   Distinct from the "running low" block above it: that one is about absolute minimums,
   this one is about the keep-on-hand items the household asked to be told about. Accent
   rather than warning — the meal was made, and this is a suggestion, not a problem. */

.done__restock[b-3ea7gef2df] {
    margin-top: var(--kk-space-4);
    padding: var(--kk-space-4);
    border: 1px solid var(--kk-accent-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-accent-soft);
}

.done__restocktitle[b-3ea7gef2df] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0 0 var(--kk-space-3);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-accent-text);
}

.done__restocklist[b-3ea7gef2df] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    margin: 0 0 var(--kk-space-3);
    padding: 0;
    list-style: none;
}

    .done__restocklist li[b-3ea7gef2df] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--kk-space-2);
    }

@media (max-width: 480px) {
    /* Full-width action rather than a button squeezed against the sentence. */
    .done__restocklist li > .kk-btn[b-3ea7gef2df] {
        width: 100%;
    }
}
/* /Features/Recipes/Components/CustomScaleSheet.razor.rz.scp.css */
/* Entering an amount and seeing what it does. The preview is the point of the sheet —
   the input is two fields and everything below it is the answer. */

.anchor[b-e6bs9fq76e] {
    margin: 0 0 var(--kk-space-1);
}

.anchor__context[b-e6bs9fq76e] {
    margin: 0 0 var(--kk-space-4);
    font-size: var(--kk-text-sm);
}

.amount[b-e6bs9fq76e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--kk-space-3);
    margin-bottom: var(--kk-space-4);
}

/* ---- what it cannot do, said plainly ---- */

.preview__problem[b-e6bs9fq76e] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-warning-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-warning-soft);
    color: var(--kk-warning);
}

/* ---- what it would do ---- */

.preview__headline[b-e6bs9fq76e] {
    margin: 0 0 var(--kk-space-4);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px solid var(--kk-primary-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-size: var(--kk-text-md);
}

.preview__list[b-e6bs9fq76e],
.preview__effects[b-e6bs9fq76e] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
    margin: var(--kk-space-2) 0 var(--kk-space-4);
    padding: 0;
    list-style: none;
}

    .preview__list li[b-e6bs9fq76e] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--kk-space-2);
        padding: var(--kk-space-2) 0;
        border-bottom: var(--kk-border-subtle-line);
    }

        .preview__list li:last-child[b-e6bs9fq76e] {
            border-bottom: none;
        }

.preview__name[b-e6bs9fq76e] {
    display: flex;
    align-items: baseline;
    gap: var(--kk-space-2);
    color: var(--kk-text-strong);
}

.preview__amount[b-e6bs9fq76e] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kk-space-2);
    font-variant-numeric: tabular-nums;
}

/* Three and a half eggs. Flagged in words, never rounded away — the arithmetic is right
   and only the cook can decide what to do about it. */
.preview__awkward[b-e6bs9fq76e] {
    padding: 1px var(--kk-space-2);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-warning-soft);
    color: var(--kk-warning);
    font-size: var(--kk-text-xs);
}

.preview__effects li[b-e6bs9fq76e] {
    padding: var(--kk-space-2) var(--kk-space-3);
    border-left: 3px solid var(--kk-warning-border);
    background: var(--kk-bg-sunken);
    font-size: var(--kk-text-sm);
    color: var(--kk-text);
}

@media (max-width: 480px) {
    .amount[b-e6bs9fq76e] {
        grid-template-columns: 1fr;
        gap: var(--kk-space-2);
    }

    /* Amount under name rather than squeezed beside it. */
    .preview__list li[b-e6bs9fq76e] {
        flex-direction: column;
        gap: var(--kk-space-1);
    }
}

/* Said out loud when a whole serving count cannot express the amount exactly. Informational
   rather than a warning — nothing is wrong, the number is simply not the one they typed. */
.preview__rounded[b-e6bs9fq76e] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: calc(var(--kk-space-4) * -1 + var(--kk-space-2)) 0 var(--kk-space-4);
    padding: var(--kk-space-2) var(--kk-space-3);
    border: 1px solid var(--kk-info-border);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-info-soft);
    color: var(--kk-info);
    font-size: var(--kk-text-sm);
}
/* /Features/Recipes/Components/GuidedCookingView.razor.rz.scp.css */
/* Read at arm's length, with wet hands. Everything is larger than elsewhere. */
.guided[b-baxowp8cf1] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
    max-width: 44rem;
    margin: 0 auto;
}

.guided__bar[b-baxowp8cf1] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.guided__progress[b-baxowp8cf1] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-muted);
}

.guided__track[b-baxowp8cf1] {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--kk-bg-sunken);
    overflow: hidden;
}

.guided__fill[b-baxowp8cf1] {
    display: block;
    height: 100%;
    background: var(--kk-primary);
    transition: width 200ms ease-out;
}

.guided__meta[b-baxowp8cf1] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

/* Timers stay pinned in view whatever step you are on. */
.timers[b-baxowp8cf1] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.timer[b-baxowp8cf1] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px solid var(--kk-primary-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-primary-soft);
}

.timer--done[b-baxowp8cf1] {
    border-color: var(--kk-warning-border);
    background: var(--kk-warning-soft);
}

.timer__label[b-baxowp8cf1] {
    flex: 1 1 auto;
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.timer__time[b-baxowp8cf1] {
    font-size: var(--kk-text-lg);
    font-weight: var(--kk-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--kk-primary-text);
}

.timer--done .timer__time[b-baxowp8cf1] {
    color: var(--kk-warning);
}

.step[b-baxowp8cf1] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-5);
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg, var(--kk-radius-md));
}

.step__number[b-baxowp8cf1] {
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kk-text-subtle);
}

.step__text[b-baxowp8cf1] {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.55;
    color: var(--kk-text-strong);
}

.step__timers[b-baxowp8cf1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.guided__subs[b-baxowp8cf1] {
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
}

    .guided__subs ul[b-baxowp8cf1] {
        margin: var(--kk-space-2) 0 0;
        padding-left: var(--kk-space-5);
    }

.guided__nav[b-baxowp8cf1] {
    display: flex;
    gap: var(--kk-space-3);
}

    .guided__nav .kk-btn--lg[b-baxowp8cf1] {
        flex: 1 1 auto;
        min-height: 3.25rem;
        font-size: var(--kk-text-lg);
    }

.guided__foot[b-baxowp8cf1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
    flex-wrap: wrap;
}

    .guided__foot p[b-baxowp8cf1] {
        display: flex;
        align-items: center;
        gap: var(--kk-space-2);
        margin: 0;
    }

@media (max-width: 30rem) {
    .step__text[b-baxowp8cf1] {
        font-size: 1.2rem;
    }

    .guided__nav[b-baxowp8cf1] {
        flex-direction: column-reverse;
    }
}

/* ---- landscape tablets and smart displays ----

   A 1280 × 800 screen showing one 44 rem column has most of its width doing nothing, and
   this is the surface most likely to be read from two metres away. Above 1024 px the step
   takes the main area and everything supporting it moves to a side column, so neither has
   to be scrolled past to reach the other.

   Deliberately width-based, not orientation-based: a large landscape phone should stay a
   single column, and it does. */

@media (min-width: 1024px) {
    .guided[b-baxowp8cf1] {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr);
        grid-template-areas:
            "bar     side"
            "step    side"
            "nav     side"
            "foot    side";
        align-content: start;
        column-gap: var(--kk-space-8);

        /* The single-column measure no longer applies once there are two columns. */
        max-width: var(--kk-content-wide);
    }

    .guided__bar[b-baxowp8cf1] { grid-area: bar; }
    .step[b-baxowp8cf1] { grid-area: step; }
    .guided__nav[b-baxowp8cf1] { grid-area: nav; }
    .guided__foot[b-baxowp8cf1] { grid-area: foot; }

    /* Timers and substitutions are reference material, not the instruction. */
    .timers[b-baxowp8cf1],
    .guided__subs[b-baxowp8cf1] {
        grid-area: side;
        align-self: start;
    }

    /* Read from a distance. The step is the one thing that has to carry across a room. */
    .step__text[b-baxowp8cf1] {
        font-size: var(--kk-text-2xl);
        line-height: var(--kk-leading-snug);

        /* A readable measure even inside a wide column. */
        max-width: 34ch;
    }

    /* A bigger screen is not a reason for smaller controls. */
    .guided__nav .kk-btn[b-baxowp8cf1] {
        min-height: 56px;
        font-size: var(--kk-text-lg);
    }
}
/* /Features/Recipes/Components/IngredientAvailabilityRow.razor.rz.scp.css */
/* Status colour is paired with a distinct glyph and explicit text in every state. */
.ing[b-rbbqf0c0in] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "marker body" ". status";
    align-items: start;
    column-gap: var(--kk-space-3);
    row-gap: var(--kk-space-1);
    padding: var(--kk-space-3) var(--kk-space-4);
}

.ing + .ing[b-rbbqf0c0in] {
    border-top: var(--kk-border-subtle-line);
}

.ing__marker[b-rbbqf0c0in] {
    grid-area: marker;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--kk-radius-pill);
    background: var(--kk-bg-sunken);
    color: var(--kk-text-muted);
    margin-top: 1px;
}

/* Six visually distinct states. Colour is never the only carrier — every one of them
   also has its own icon and its own sentence in the markup. */
.ing--enough .ing__marker[b-rbbqf0c0in] { background: var(--kk-success-soft); color: var(--kk-success); }
.ing--notenough .ing__marker[b-rbbqf0c0in] { background: var(--kk-warning-soft); color: var(--kk-warning); }
.ing--notstocked .ing__marker[b-rbbqf0c0in] { background: var(--kk-danger-soft); color: var(--kk-danger); }
.ing--optionalabsent .ing__marker[b-rbbqf0c0in] { background: var(--kk-bg-sunken); color: var(--kk-text-muted); }
.ing--amountunknown .ing__marker[b-rbbqf0c0in] { background: var(--kk-info-soft); color: var(--kk-info); }
.ing--unconvertible .ing__marker[b-rbbqf0c0in] { background: var(--kk-info-soft); color: var(--kk-info); }

/* Enough, but worth saying something about what is left. Accent rather than warning:
   this is information, not a problem with the recipe. */
.ing--enoughbutlowafter .ing__marker[b-rbbqf0c0in],
.ing--useslastknownamount .ing__marker[b-rbbqf0c0in] { background: var(--kk-accent-soft); color: var(--kk-accent-text); }

.ing__body[b-rbbqf0c0in] {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ing__name[b-rbbqf0c0in] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.ing__note[b-rbbqf0c0in] {
    font-weight: var(--kk-weight-normal);
    color: var(--kk-text-muted);
}

.ing__flag[b-rbbqf0c0in] {
    display: inline-block;
    margin-left: var(--kk-space-2);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kk-text-subtle);
}

.ing__numbers[b-rbbqf0c0in] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-4);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.ing__status[b-rbbqf0c0in] {
    grid-area: status;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
    font-size: var(--kk-text-sm);
}

.ing__statustext[b-rbbqf0c0in] {
    font-weight: var(--kk-weight-medium);
}

.ing--enough .ing__statustext[b-rbbqf0c0in] { color: var(--kk-success); }
.ing--notenough .ing__statustext[b-rbbqf0c0in] { color: var(--kk-warning); }
.ing--notstocked .ing__statustext[b-rbbqf0c0in] { color: var(--kk-danger); }
.ing--amountunknown .ing__statustext[b-rbbqf0c0in],
.ing--unconvertible .ing__statustext[b-rbbqf0c0in] { color: var(--kk-info); }
.ing--enoughbutlowafter .ing__statustext[b-rbbqf0c0in],
.ing--useslastknownamount .ing__statustext[b-rbbqf0c0in] { color: var(--kk-accent-text); }

@media (min-width: 720px) {
    .ing[b-rbbqf0c0in] {
        grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr);
        grid-template-areas: "marker body status";
        align-items: center;
    }

    .ing__status[b-rbbqf0c0in] {
        justify-content: flex-end;
        text-align: right;
    }
}

/* ---- what is left afterwards, and what to do about it ---- */

.ing__projection[b-rbbqf0c0in] {
    display: block;
    font-size: var(--kk-text-sm);
    color: var(--kk-accent-text);
}

/* Offered, not done. A restock is a decision somebody makes, not one the page makes
   for them by quietly editing a list. */
.ing__restock[b-rbbqf0c0in] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
    min-height: var(--kk-touch-target);
    margin-top: var(--kk-space-1);
    padding: 0 var(--kk-space-2);
    border: 1px solid var(--kk-accent-border);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-accent-soft);
    color: var(--kk-accent-text);
    font: inherit;
    font-size: var(--kk-text-sm);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .ing__restock:hover[b-rbbqf0c0in] {
        background: var(--kk-surface-tinted);
    }

    .ing__restock:focus-visible[b-rbbqf0c0in] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }
/* /Features/Recipes/Components/MealDetailView.razor.rz.scp.css */
/* ---- one meal, on one page ----

   The facts about the meal, then one ingredient list, then the methods still separated by
   dish. Reuses the shared panel language so a meal and a recipe read as the same product. */

.mealhead[b-yidb4s750t] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-5);
}

.mealhead__facts[b-yidb4s750t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--kk-space-2);
    margin: 0;
    color: var(--kk-text-muted);
}

.mealhead__sep[b-yidb4s750t] {
    color: var(--kk-text-subtle);
}

/* The dishes, as links to their own sections. On a long page this is how somebody gets to
   the potatoes without scrolling past the salmon. */
.mealhead__dishes[b-yidb4s750t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin: 0;
}

.mealhead__dish[b-yidb4s750t] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    color: var(--kk-text-strong);
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    text-decoration: none;
}

    .mealhead__dish:hover[b-yidb4s750t] {
        border-color: var(--kk-primary-border);
        background: var(--kk-primary-soft);
    }

    .mealhead__dish:focus-visible[b-yidb4s750t] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.mealhead__role[b-yidb4s750t] {
    color: var(--kk-text-muted);
    font-weight: var(--kk-weight-regular);
}

.mealhead__status[b-yidb4s750t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

/* ---- the consolidated list ----

   One line per ingredient per unit. Two dishes wanting olive oil in tablespoons are one
   line; butter in grams beside butter in tablespoons stays two, because inventing that
   conversion is the lie this application refuses to tell anywhere else. */

.mealings[b-yidb4s750t] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mealing + .mealing[b-yidb4s750t] {
    border-top: var(--kk-border-hairline);
}

.mealing__row[b-yidb4s750t] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kk-space-3);
    padding: var(--kk-space-2) 0;
}

.mealing__name[b-yidb4s750t] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
    overflow-wrap: anywhere;
}

.mealing__note[b-yidb4s750t] {
    margin-left: var(--kk-space-1);
    color: var(--kk-text-muted);
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-regular);
}

.mealing__amount[b-yidb4s750t] {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: var(--kk-text);
}

/* Where a consolidated amount came from. Secondary on purpose: the number is what somebody
   shops with, the breakdown is what they check when it looks wrong. */
.mealing__sources[b-yidb4s750t] {
    margin: 0 0 var(--kk-space-2);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

    .mealing__sources summary[b-yidb4s750t] {
        cursor: pointer;
        min-height: 1.75rem;
    }

    .mealing__sources ul[b-yidb4s750t] {
        margin: var(--kk-space-1) 0 0;
        padding-left: var(--kk-space-4);
    }

/* ---- one dish's section ---- */

.dish__facts[b-yidb4s750t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0 0 var(--kk-space-3);
    color: var(--kk-text-muted);
    font-size: var(--kk-text-sm);
}

.dish__role[b-yidb4s750t] {
    padding: 0 var(--kk-space-2);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-bg-sunken);
    color: var(--kk-text-muted);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-medium);
}

.dish__subhead[b-yidb4s750t] {
    margin: var(--kk-space-4) 0 var(--kk-space-2);
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--kk-tracking-wide);
    color: var(--kk-text-muted);
}

.dish__ings[b-yidb4s750t],
.dish__steps[b-yidb4s750t] {
    margin: 0;
    padding-left: var(--kk-space-5);
}

.dish__ings[b-yidb4s750t] {
    list-style: disc;
}

    .dish__ings li[b-yidb4s750t],
    .dish__steps li[b-yidb4s750t] {
        margin-bottom: var(--kk-space-2);
    }

/* The one action the page exists for, beside the meal's status. */
.mealhead__actions[b-yidb4s750t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

    .mealhead__actions .kk-btn[b-yidb4s750t] {
        min-height: var(--kk-touch-target);
    }

/* Already made. A status rather than a disabled button — there is nothing left to press. */
.mealhead__done[b-yidb4s750t] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-1);
    margin: 0;
    color: var(--kk-success, var(--kk-primary-text));
    font-weight: var(--kk-weight-medium);
}
/* /Features/Recipes/Components/MealPlanWeekView.razor.rz.scp.css */
.plan[b-jktqbxbypg] { display: flex; flex-direction: column; gap: var(--kk-space-5); }

/* ---- which week ----

   Centred, with one control either side. The week you are looking at is the fact the whole
   page hangs off, so it sits in the middle of its own row rather than at one end of a
   toolbar that also carried the primary command. */

.plan__bar[b-jktqbxbypg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--kk-space-3);
    flex-wrap: wrap;
    position: relative;
}

.plan__step[b-jktqbxbypg] {
    min-height: var(--kk-touch-target);
    flex: none;
}

.plan__range[b-jktqbxbypg] {
    flex: 0 1 12rem;
    min-width: 0;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: var(--kk-leading-snug);
}

.plan__thisweek[b-jktqbxbypg] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.plan__dates[b-jktqbxbypg] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Out of the balanced trio, so returning from a wander does not shift the week label off
   centre every time it appears. */
.plan__today[b-jktqbxbypg] {
    flex: none;
}

@media (min-width: 768px) {
    .plan__today[b-jktqbxbypg] {
        position: absolute;
        right: 0;
    }
}

/* On the narrowest phones the chevrons carry the meaning and the words would push the
   week range off centre. The aria-label on the button says it either way. */
@media (max-width: 479.98px) {
    .plan__navlabel[b-jktqbxbypg] {
        display: none;
    }

    .plan__today[b-jktqbxbypg] {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ---- the week in one line ----

   What is planned, what it needs, and what can honestly be said about the cost. The
   estimate used to arrive as three stacked sentences of methodology above a calendar
   somebody had come to look at; all of it is still here, one sentence on the surface. */

.summary[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.summary__mark[b-jktqbxbypg] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
}

.summary__body[b-jktqbxbypg] {
    flex: 1 1 18rem;
    min-width: 0;
}

.summary__counts[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kk-space-2);
    margin: 0;
    color: var(--kk-text);
}

    .summary__counts strong[b-jktqbxbypg] {
        color: var(--kk-text-strong);
    }

.summary__dot[b-jktqbxbypg] {
    color: var(--kk-text-subtle);
}

.summary__cost[b-jktqbxbypg] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-1);
    margin: 2px 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* The methodology, one press away, without a second full-width control competing with
   View summary for the same sentence. */
.summary__why[b-jktqbxbypg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--kk-text-subtle);
    cursor: pointer;
}

    .summary__why:hover[b-jktqbxbypg] {
        color: var(--kk-text);
        background: var(--kk-bg-sunken);
    }

    .summary__why:focus-visible[b-jktqbxbypg] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.summary__more[b-jktqbxbypg] {
    flex: none;
    min-height: var(--kk-touch-target);
}

.summary__detail[b-jktqbxbypg] {
    margin-top: calc(var(--kk-space-4) * -1 + var(--kk-space-1));
    padding: var(--kk-space-3) var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-top: 0;
    border-radius: 0 0 var(--kk-radius-md) var(--kk-radius-md);
    background: var(--kk-surface);
}

@media (max-width: 599.98px) {
    .summary__more[b-jktqbxbypg] {
        flex: 1 1 100%;
        justify-content: center;
    }
}

.plan__grid[b-jktqbxbypg] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kk-space-2);
}

/* Below tablet width only the selected day is on screen. Rendered, not re-rendered:
   one component tree, adapted. */
@media (max-width: 599.98px) {
    .day[b-jktqbxbypg] {
        display: none;
    }

    .day--selected[b-jktqbxbypg] {
        display: flex;
    }
}

/* Two days side by side on a large phone in landscape and on a small tablet. */
@media (min-width: 600px) {
    .plan__grid[b-jktqbxbypg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .plan__grid[b-jktqbxbypg] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Seven columns only once each one can hold a readable meal card. minmax with a floor
   rather than 1fr, so the grid wraps instead of shrinking past legibility. */
@media (min-width: 1024px) {
    .plan__grid[b-jktqbxbypg] {
        grid-template-columns: repeat(7, minmax(150px, 1fr));
        column-gap: var(--kk-space-3);
        row-gap: var(--kk-space-5);

        /* The single biggest source of the calendar's height.

           Grid items stretch by default, so one busy Wednesday made all seven columns as
           tall as it was — six of them filled with nothing. A day is now as tall as the
           meals in it, and the week reads as a calendar rather than seven panels. */
        align-items: start;
    }
}

/* ---- the phone day strip ---- */

.strip[b-jktqbxbypg] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--kk-space-1);
    margin-bottom: var(--kk-space-3);
}

/* Every day is visible at once from here, so choosing one means nothing. */
@media (min-width: 600px) {
    .strip[b-jktqbxbypg] {
        display: none;
    }
}

.strip__day[b-jktqbxbypg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;

    /* Seven targets across 320 px is about 42 px each; the height carries the rest of
       the 44 px minimum. */
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) 0;
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
    color: var(--kk-text-muted);
    font: inherit;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .strip__day:focus-visible[b-jktqbxbypg] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.strip__name[b-jktqbxbypg] {
    font-size: var(--kk-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--kk-tracking-wide);
}

.strip__num[b-jktqbxbypg] {
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--kk-text-strong);
}

/* A dot rather than a number: on a 42 px target the count would not be legible, and
   "something is planned" is the fact that matters at this size. */
.strip__dot[b-jktqbxbypg] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--kk-primary);
}

/* Today is outlined; the selection is filled. Two different facts, two different
   treatments, and both survive without colour because one has a border and the other
   has a background and a weight change. */
.strip__day--today[b-jktqbxbypg] {
    border-color: var(--kk-primary-border);
}

.strip__day--on[b-jktqbxbypg] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
}

    .strip__day--on .strip__num[b-jktqbxbypg] {
        color: var(--kk-primary-text);
    }

.day[b-jktqbxbypg] {
    display: flex; flex-direction: column; gap: var(--kk-space-2);
    padding: var(--kk-space-2);
    background: var(--kk-surface); border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
}

/* Today carries a tinted header and a word. Colour alone would say nothing to somebody
   who cannot see it, and a ring around the whole column made one day look like a
   different kind of object rather than the same day, today. */
.day--today[b-jktqbxbypg] { border-color: var(--kk-primary-border); }

.day__name[b-jktqbxbypg] {
    margin: 0; font-size: var(--kk-text-sm); font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong); display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-1) var(--kk-space-2);
}

.day__when[b-jktqbxbypg] {
    display: flex;
    flex-direction: column;
    line-height: var(--kk-leading-snug);
}

.day__weekday[b-jktqbxbypg] { text-transform: uppercase; letter-spacing: var(--kk-tracking-wide); }

.day__date[b-jktqbxbypg] {
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-regular);
    color: var(--kk-text-subtle);
    font-variant-numeric: tabular-nums;
}

.day__today[b-jktqbxbypg] {
    padding: 1px var(--kk-space-2);
    border: 1px solid var(--kk-primary-border);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    color: var(--kk-primary-text);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-semibold);
}

.slot[b-jktqbxbypg] { display: flex; flex-direction: column; gap: var(--kk-space-1); }

.slot__name[b-jktqbxbypg] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-1);
    margin: 0;
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-muted);
}

/* Decoration on top of the word, never instead of it. */
.slot__icon[b-jktqbxbypg] {
    flex: none;
    color: var(--kk-text-subtle);
}

/* ---- an empty slot ----

   A quiet "+ Add" target under the meal's name. The dashed boxes this replaced were the
   loudest thing in the calendar, which meant twenty-one nothings outweighed the four
   meals somebody had actually planned. Still obviously pressable — quieter, not hidden,
   and never the height of the meal that is not there. */

.slot__empty[b-jktqbxbypg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--kk-space-1);
    width: 100%;
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-1) var(--kk-space-2);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-bg-sunken);
    color: var(--kk-text-muted);
    font: inherit;
    font-size: var(--kk-text-sm);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .slot__empty:hover:not(:disabled)[b-jktqbxbypg] {
        border-color: var(--kk-primary-border);
        background: var(--kk-primary-soft);
        color: var(--kk-primary-text);
    }

    .slot__empty:focus-visible[b-jktqbxbypg] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Adding a second thing to a slot that already has something. Smaller still — the meal
   above it is the object of interest. */
.slot__more[b-jktqbxbypg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    align-self: flex-start;
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-2);
    border: 0;
    background: none;
    color: var(--kk-text-subtle);
    font: inherit;
    font-size: var(--kk-text-xs);
    cursor: pointer;
}

    .slot__more:hover[b-jktqbxbypg] { color: var(--kk-text); }

    /* One dish that is not already a meal on its own. The offer reads a shade more
       clearly, which is the whole of it: same button, same words, still optional, and
       no warning anywhere near it. Colour is not carrying meaning here — nothing is
       lost by not seeing the difference. */
    .slot__more--suggested[b-jktqbxbypg] {
        color: var(--kk-text-muted);
        font-weight: var(--kk-weight-medium);
    }

    .slot__more:focus-visible[b-jktqbxbypg] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.meal[b-jktqbxbypg] {
    display: flex; flex-direction: column; gap: var(--kk-space-1);
    padding: var(--kk-space-2);
    border: var(--kk-border-hairline);
    border-left: 3px solid var(--kk-primary);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-surface);
    font-size: var(--kk-text-sm);

    /* A calendar card never scrolls sideways. A long recipe name wraps. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.meal--eatingout[b-jktqbxbypg] { border-left-color: var(--kk-text-subtle); }
.meal--leftovers[b-jktqbxbypg] { border-left-color: var(--kk-accent, var(--kk-warning)); }
.meal--cooked[b-jktqbxbypg] { opacity: 0.65; }

/* Photograph and name side by side. A full-width crop in a 200 px column was taller than
   everything it sat above, and a picture of a tray bake is an aid to recognising the dish
   rather than the thing a weekly card is mostly made of. */
.meal__head[b-jktqbxbypg] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    min-width: 0;
}

.meal__photo[b-jktqbxbypg] {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--kk-bg-sunken);
    border-radius: var(--kk-radius-sm);
}

    /* Cover, so a portrait photograph is cropped rather than squashed. */
    .meal__photo img[b-jktqbxbypg] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.meal__photo--none[b-jktqbxbypg] {
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
}

.meal__naming[b-jktqbxbypg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.meal__title[b-jktqbxbypg] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
    line-height: var(--kk-leading-snug);

    /* Three lines, then an ellipsis. A recipe called "Slow-Roast Shoulder of Lamb with
       Anchovy, Rosemary and White Beans" is six lines in a weekly column, and the first
       three of them are the ones anybody reads. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Time and coverage share one wrapping line. Each was a block of its own, which is how a
   two-fact card came to be four rows tall. */
.meal__facts[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--kk-space-2);
    min-width: 0;
}

.meal__meta[b-jktqbxbypg] { font-size: 0.72rem; color: var(--kk-text-muted); }
.meal__mins[b-jktqbxbypg] { font-variant-numeric: tabular-nums; }

/* Its own separator travels with it, so hiding the servings in a narrow column cannot
   leave a dangling dot behind. */
.meal__sep[b-jktqbxbypg] { margin: 0 2px; color: var(--kk-text-subtle); }

.meal__cover[b-jktqbxbypg] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--kk-space-1);
    margin: 0;
    min-width: 0;
}

.meal__missing[b-jktqbxbypg] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.meal__actions[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-1);
    margin-top: var(--kk-space-1);
}

    /* The menu sits at the end of the row whether or not there is a primary beside it. */
    .meal__actions[b-jktqbxbypg]  .ovf {
        margin-left: auto;
    }

/* ---- a suggestion in a slot ----

   Distinct from a planned meal without being a different kind of object: it is in the same
   place, at the same size, because it is a proposal for that slot. The dashed edge and the
   tint are the fast signal; the "Suggested" badge above the title is the one that survives
   greyscale, a screen reader and a photocopier. */

.meal--suggested[b-jktqbxbypg] {
    background: var(--kk-info-soft);
    border-left-color: var(--kk-info);
    border: 1px dashed var(--kk-info-border);
    border-left: 3px solid var(--kk-info);
}

.meal__draft[b-jktqbxbypg] {
    margin: 0 0 var(--kk-space-1);
}

.meal__why[b-jktqbxbypg] {
    margin: var(--kk-space-1) 0 0;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
    line-height: var(--kk-leading-snug);
}

/* ---- reviewing a suggested week ----

   One bar above the calendar, referring to slots that are all on screen below it. The
   Suggested Dinners list this replaced was a second Monday-to-Sunday underneath the first,
   and reading two of them meant checking one against the other. */

.drafts[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px solid var(--kk-info-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-info-soft);
}

.drafts__count[b-jktqbxbypg] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    flex: 1 1 18rem;
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text);
}

.drafts__actions[b-jktqbxbypg] {
    display: flex;
    gap: var(--kk-space-2);
}

    .drafts__actions .kk-btn[b-jktqbxbypg] {
        min-height: var(--kk-touch-target);
    }

@media (max-width: 599.98px) {
    .drafts__actions[b-jktqbxbypg] {
        flex: 1 1 100%;
    }

        .drafts__actions .kk-btn[b-jktqbxbypg] {
            flex: 1 1 0;
            justify-content: center;
        }
}

/* ---- build my week ---- */

.picks[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.pickbox[b-jktqbxbypg] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-3);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .pickbox:focus-within[b-jktqbxbypg] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Border weight as well as colour, so the selection survives greyscale. */
.pickbox--on[b-jktqbxbypg] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-medium);
}

.pref[b-jktqbxbypg] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    min-height: var(--kk-touch-target);
    cursor: pointer;
}

    .pref:focus-within[b-jktqbxbypg] {
        outline: var(--kk-focus-ring);
        outline-offset: 2px;
    }

.shortages ul[b-jktqbxbypg] {
    display: flex; flex-direction: column; gap: var(--kk-space-2);
    margin: var(--kk-space-3) 0; padding: 0; list-style: none;
}

.shortages li[b-jktqbxbypg] {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface); border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
}

.shortages__name[b-jktqbxbypg] { flex: 0 0 10rem; font-weight: var(--kk-weight-medium); color: var(--kk-text-strong); }
.shortages__amount[b-jktqbxbypg] { flex: 1 1 auto; font-size: var(--kk-text-sm); }

/* ---- groceries left behind by a withdrawn meal ----

   One question per line, each with its own pair of answers, because keeping the chicken and
   dropping the lemons is a perfectly ordinary thing to want. */

.keeps[b-jktqbxbypg] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.keep[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-2) var(--kk-space-3);
    padding: var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.keep__question[b-jktqbxbypg] {
    flex: 1 1 16rem;
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text);
}

.keep__actions[b-jktqbxbypg] {
    display: flex;
    gap: var(--kk-space-2);
}

    .keep__actions .kk-btn[b-jktqbxbypg] {
        min-height: var(--kk-touch-target);
    }

@media (max-width: 479.98px) {
    .keep__actions[b-jktqbxbypg] {
        flex: 1 1 100%;
    }

        .keep__actions .kk-btn[b-jktqbxbypg] {
            flex: 1 1 0;
            justify-content: center;
        }
}

/* ---- something other than a recipe ----

   Four choices as full rows rather than a row of pills: each one carries a line saying
   what it means, because "Manual" and "Simple meal" are the application's words and not
   anybody else's. */

.kinds[b-jktqbxbypg] {
    display: grid;
    gap: var(--kk-space-2);
}

@media (min-width: 600px) {
    .kinds[b-jktqbxbypg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.kind[b-jktqbxbypg] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--kk-space-3);
    padding: var(--kk-space-3);
    min-height: var(--kk-touch-target);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .kind:focus-within[b-jktqbxbypg] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

    .kind .kk-radio[b-jktqbxbypg] {
        grid-row: span 2;
    }

.kind__label[b-jktqbxbypg] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.kind__hint[b-jktqbxbypg] {
    grid-column: 2;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* Border weight as well as colour, so the selection survives greyscale. */
.kind--on[b-jktqbxbypg] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
}

/* Seven columns is a desktop idea. On a phone the week stacks. */
@media (max-width: 60rem) {
    .day[b-jktqbxbypg] { padding: var(--kk-space-3); }
}

/* ---- seven columns, at the density a calendar needs ----

   Everything above is the layout at phone and tablet width, where a day has the screen to
   itself and 44 px is the right size for anything you press. From 1024 px the same markup
   holds seven days side by side, and the sizes that make a comfortable phone row make a
   column whose bottom nobody can see.

   Nothing below removes a control or a fact. It changes what each one costs in height. */

@media (min-width: 1024px) {

    /* A day is a contained column: a fine border, a quiet fill, and a header rule under
       the date. Enough containment that seven of them read as one planner, and not so
       much that an empty Tuesday looks like a card somebody forgot to fill in. */
    .day[b-jktqbxbypg] {
        gap: var(--kk-space-2);
        padding: 0 0 var(--kk-space-2);
        background: var(--kk-surface);
        border: var(--kk-border-hairline);
        border-radius: var(--kk-radius-md);
        overflow: hidden;
    }

    .day__name[b-jktqbxbypg] {
        margin: 0;
        padding: var(--kk-space-2) var(--kk-space-2) var(--kk-space-2);
        border-bottom: var(--kk-border-hairline);
    }

    /* Today is a tinted header and a pill, not a bigger column. The word is on the header
       for anybody the colour does not reach. */
    .day--today .day__name[b-jktqbxbypg] {
        background: var(--kk-primary-soft);
        border-bottom-color: var(--kk-primary-border);
    }

    /* The slots sit inside the column's padding; the header spans it. */
    .day > .slot[b-jktqbxbypg],
    .day > .prep[b-jktqbxbypg] {
        margin-inline: var(--kk-space-2);
    }

    /* An empty slot is one quiet target and nothing else. Three of them at a phone's touch
       target was 132 px of nothing in every column before a meal was planned. The whole
       control is still the target and still says "Add Monday breakfast". */
    .slot__empty[b-jktqbxbypg] {
        min-height: 2rem;
    }

    .slot__more[b-jktqbxbypg] {
        min-height: 1.5rem;
        padding: 0 var(--kk-space-1);
    }

    /* ---- the card ----

       A thumbnail, a name, one line of facts, one row of controls. */

    .meal[b-jktqbxbypg] {
        gap: var(--kk-space-1);
    }

    .meal__photo[b-jktqbxbypg] {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Not a fact anybody scans a week for, and seven columns have no room for it. Every
       narrower layout still shows it, and the meal itself always did. */
    .meal__servings[b-jktqbxbypg] {
        display: none;
    }

    .meal__facts[b-jktqbxbypg] {
        gap: 0 var(--kk-space-1);
    }

    .meal__actions[b-jktqbxbypg] {
        margin-top: 2px;
    }

        .meal__actions .kk-btn[b-jktqbxbypg] {
            min-height: 26px;
            padding: 0 var(--kk-space-2);
        }

        /* One more control on the row rather than a bordered button beside a smaller one.
           The border comes back on hover and on focus, where it is the affordance. */
        .meal__actions[b-jktqbxbypg]  .ovf__trigger {
            min-height: 26px;
            padding: 0 var(--kk-space-1);
            border-color: transparent;
            background: none;
            color: var(--kk-text-muted);
        }

    .meal__why[b-jktqbxbypg] {
        margin-top: 2px;
    }

    /* Prep is a note in a column here, not a panel. */
    .prep[b-jktqbxbypg] {
        margin-bottom: var(--kk-space-2);
        padding: var(--kk-space-1) var(--kk-space-2);
    }

        .day .prep__check[b-jktqbxbypg] {
            min-height: 1.75rem;
            gap: var(--kk-space-2);
        }
}

/* The serving time on a planned meal. Present only when the meal has one. */
.meal__time[b-jktqbxbypg] {
    font-variant-numeric: tabular-nums;
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text);
}

/* ---- advance preparation ----

   A day column can hold prep for a meal several days later, so the prep block is visually
   distinct from a meal: it is work with a deadline, not something being eaten today. */

.prep[b-jktqbxbypg] {
    margin-bottom: var(--kk-space-3);
    padding: var(--kk-space-2);
    border: 1px dashed var(--kk-info-border);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-info-soft);
}

.prep__name[b-jktqbxbypg] {
    margin: 0 0 var(--kk-space-1);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-semibold);
    letter-spacing: var(--kk-tracking-wide);
    text-transform: uppercase;
    color: var(--kk-info);
}

.prep__task + .prep__task[b-jktqbxbypg] {
    margin-top: var(--kk-space-2);
    padding-top: var(--kk-space-2);
    border-top: 1px solid var(--kk-info-border);
}

.prep__check[b-jktqbxbypg] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    min-height: var(--kk-touch-target);
    cursor: pointer;
}

    /* Marking prep done is a one-handed action at a counter. */
    .prep__check .kk-checkbox[b-jktqbxbypg] {
        flex: none;
        width: 1.35rem;
        height: 1.35rem;
        margin-top: 1px;
    }

    .prep__check:focus-within[b-jktqbxbypg] {
        outline: var(--kk-focus-ring);
        outline-offset: 2px;
    }

/* On a phone the day column shows one day, so prep sits directly above the meals. Quieter
   than a meal card by design — it is a reminder, not the thing being eaten. */
@media (max-width: 599.98px) {
    .prep[b-jktqbxbypg] {
        order: -1;
    }
}

.prep__title[b-jktqbxbypg] {
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
    line-height: var(--kk-leading-snug);
}

/* Struck through rather than hidden: a done task is still a record of what today held. */
.prep__task--done .prep__title[b-jktqbxbypg] {
    text-decoration: line-through;
    color: var(--kk-text-muted);
}

.prep__for[b-jktqbxbypg] {
    margin: 0 0 0 1.6rem;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.prep__late[b-jktqbxbypg],
.prep__soon[b-jktqbxbypg] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-1);
    margin: var(--kk-space-1) 0 0 1.6rem;
    font-size: var(--kk-text-xs);
    line-height: var(--kk-leading-snug);
}

.prep__late[b-jktqbxbypg] {
    color: var(--kk-danger);
}

.prep__soon[b-jktqbxbypg] {
    color: var(--kk-warning);
}

.prep__task--late[b-jktqbxbypg] {
    /* A left edge as well as colour, so the state is not carried by hue alone. */
    border-left: 3px solid var(--kk-danger);
    padding-left: var(--kk-space-2);
    margin-left: calc(var(--kk-space-2) * -1);
}

/* ---- prep that cannot be given a day ---- */

.undated[b-jktqbxbypg] {
    margin-top: var(--kk-space-6);
}

.undated__list[b-jktqbxbypg] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin: var(--kk-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.undated__item[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kk-space-2) var(--kk-space-4);
    padding: var(--kk-space-2) var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.undated__item--done .prep__title[b-jktqbxbypg] {
    text-decoration: line-through;
    color: var(--kk-text-muted);
}

.undated__meta[b-jktqbxbypg] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* ---- what the week does to the pantry ----

   Two states, and the difference matters: falling low is a nudge, running out is a
   problem. Both carry an icon and a full sentence, so neither depends on colour. */

.running[b-jktqbxbypg] {
    margin-top: var(--kk-space-6);
}

.running__list[b-jktqbxbypg] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin: var(--kk-space-3) 0;
    padding: 0;
    list-style: none;
}

.running__item[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2) var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px solid var(--kk-warning-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-warning-soft);
    color: var(--kk-warning);
}

    .running__item > span[b-jktqbxbypg] {
        flex: 1 1 18rem;
    }

/* Running out entirely gets the stronger treatment, and a left edge as well as a hue. */
.running__item--out[b-jktqbxbypg] {
    border-color: var(--kk-danger-border);
    border-left: 3px solid var(--kk-danger);
    background: var(--kk-danger-soft);
    color: var(--kk-danger);
}

@media (max-width: 600px) {
    .running__item > .kk-btn[b-jktqbxbypg] {
        width: 100%;
    }
}

/* ---- the week in one line ----

   Replaces a permanent "What do I still need?" button, which asked a question the
   application could already answer. The number is on screen before anybody presses
   anything; the button only expands the detail. */

.needs[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.needs__mark[b-jktqbxbypg] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
}

.needs__body[b-jktqbxbypg] {
    flex: 1 1 16rem;
    min-width: 0;
}

.needs__line[b-jktqbxbypg] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

/* What pressing it leads to. The top card reports the state of the week; this one is a
   way into a shopping list, and a count with no instruction is a number, not a door. */
.needs__hint[b-jktqbxbypg] {
    margin: 2px 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.needs__go[b-jktqbxbypg] {
    flex: none;
    min-height: var(--kk-touch-target);
}

@media (max-width: 479.98px) {
    .needs__go[b-jktqbxbypg] {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ---- what is still needed ----

   Stacked cards with a tick each, not a table. Every state is named in words as well as
   coloured, because "short by 200 g" and "we cannot tell how much you have" are different
   problems with different answers. */

/* Rows, not cards. Sixteen groceries as three-block cards was four screens of shopping
   list inside a meal planner; as rows it is a list somebody scans in one look and ticks. */

.shortages__list[b-jktqbxbypg] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: var(--kk-space-3) 0;
    padding: 0;
    list-style: none;
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
    overflow: hidden;
}

.shortage[b-jktqbxbypg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--kk-space-3);
    padding: var(--kk-space-1) var(--kk-space-3);
    border-top: var(--kk-border-hairline);
}

    /* One separator between two rows, never above the first. */
    .shortage:first-child[b-jktqbxbypg] {
        border-top: 0;
    }

.shortage__pick[b-jktqbxbypg] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    min-height: var(--kk-touch-target);
    min-width: 0;
    cursor: pointer;
}

    .shortage__pick .kk-checkbox[b-jktqbxbypg] {
        flex: none;
        width: 1.35rem;
        height: 1.35rem;
    }

    .shortage__pick:focus-within[b-jktqbxbypg] {
        outline: var(--kk-focus-ring);
        outline-offset: 2px;
    }

.shortage__name[b-jktqbxbypg] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
    overflow-wrap: anywhere;
}

/* What the week wants, in tabular figures so a column of amounts lines up. */
.shortage__need[b-jktqbxbypg] {
    justify-self: end;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The pantry's answer. On a phone it drops to its own line under the name rather than
   squeezing three columns into 320 px. */
.shortage__state[b-jktqbxbypg] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-1) var(--kk-space-2);
    margin: 0 0 var(--kk-space-1) calc(1.35rem + var(--kk-space-3));
    font-size: var(--kk-text-sm);
}

.shortage__have[b-jktqbxbypg] {
    color: var(--kk-text-muted);
    font-variant-numeric: tabular-nums;
}

.shortages__pickall[b-jktqbxbypg] {
    display: flex;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

/* Three columns once there is room for them: name, need, state on one line. */
@media (min-width: 600px) {
    .shortage[b-jktqbxbypg] {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 14rem);
    }

    .shortage__state[b-jktqbxbypg] {
        grid-column: auto;
        justify-content: flex-end;
        margin: 0;
    }
}

/* Two comfortable columns of rows once there is room; never so many that this becomes a
   table somebody has to read across. */
@media (min-width: 900px) {
    .shortages__list[b-jktqbxbypg] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* In a two-column grid the first row of each column needs its own top edge back. */
    .shortage:nth-child(2)[b-jktqbxbypg] {
        border-top: 0;
    }
}

/* The Suggested Dinners list that used to be styled here is gone. Its rules went with it
   rather than being left behind: a suggestion now renders in the slot it is for, and the
   only week that exists on this screen is the calendar. */

/* ---- a meal, and the dishes in it ----

   Salmon, broccoli and potatoes on a Saturday is one dinner. The card is the meal; the rows
   inside it are what it is made of. Separating them with a hairline rather than three
   bordered cards is what stops the slot reading as three dinners. */

.dish + .dish[b-jktqbxbypg] {
    margin-top: var(--kk-space-1);
    padding-top: var(--kk-space-1);
    border-top: var(--kk-border-hairline);
}

/* Description, never permission. Quiet enough that a side does not look like a warning. */
.dish__role[b-jktqbxbypg] {
    align-self: flex-start;
    padding: 0 var(--kk-space-1);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-bg-sunken);
    color: var(--kk-text-muted);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-medium);
}

/* Already a meal. Legible rather than loud — it is a helpful fact on a busy calendar,
   not an award, and the dishes without it are not failing at anything. */
.dish__role--meal[b-jktqbxbypg] {
    background: var(--kk-accent-soft);
    color: var(--kk-accent-strong);
}

/* "3 dishes · About 40 min". The longest dish, never the sum. */
.meal__summary[b-jktqbxbypg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--kk-space-1);
    margin: var(--kk-space-1) 0 0;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.meal__actions--meal[b-jktqbxbypg] {
    border-top: var(--kk-border-hairline);
    padding-top: var(--kk-space-1);
}
/* /Features/Recipes/Components/PlanMealPanel.razor.rz.scp.css */
/* The plan-a-meal panel: the details of a meal whose recipe is already settled.

   Choosing the recipe used to happen here too, behind a search box and three scope tabs.
   That moved to RecipeChooserDialog, which is a chooser rather than a form with a list
   bolted to the top of it — so the rules for it are gone from this file rather than left
   behind to rot. */

/* ---- the details form ---- */

.plan-for[b-3v1uhmwubu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0 0 var(--kk-space-4);
    color: var(--kk-text-muted);
}

    .plan-for strong[b-3v1uhmwubu] {
        color: var(--kk-text-strong);
    }

.grid2[b-3v1uhmwubu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kk-space-4);
}

.timerow[b-3v1uhmwubu] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
}

    .timerow .kk-input[b-3v1uhmwubu] {
        flex: 1 1 auto;
        min-width: 0;
    }

.people[b-3v1uhmwubu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2) var(--kk-space-4);
}

.person[b-3v1uhmwubu] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    cursor: pointer;
}

/* A short-of warning inside the form. Amber, and it says the meal can still be
   planned — this is information, not a block. */
.kk-hint--warn[b-3v1uhmwubu] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin-top: var(--kk-space-4);
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-warning-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-warning-soft);
    color: var(--kk-warning);
}

/* ---- the confirmation step ---- */

.planned[b-3v1uhmwubu] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0 0 var(--kk-space-4);
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-success-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-success-soft);
    color: var(--kk-success);
}

    .planned strong[b-3v1uhmwubu] {
        color: var(--kk-success);
    }

.missing[b-3v1uhmwubu] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
    margin: var(--kk-space-2) 0 0;
    padding: 0;
    /* No bullets: this is a short scannable list, not prose. */
    list-style: none;
}

    .missing li[b-3v1uhmwubu] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--kk-space-2);
        padding: var(--kk-space-2) 0;
        border-bottom: var(--kk-border-subtle-line);
    }

        .missing li:last-child[b-3v1uhmwubu] {
            border-bottom: none;
        }

.missing__name[b-3v1uhmwubu] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.missing__amount[b-3v1uhmwubu] {
    font-size: var(--kk-text-sm);
}

@media (max-width: 480px) {
    .grid2[b-3v1uhmwubu] {
        grid-template-columns: 1fr;
        gap: var(--kk-space-3);
    }

    .people[b-3v1uhmwubu] {
        flex-direction: column;
        gap: 0;
    }
}

/* Advance-preparation notes in the form. Two states, and neither one blocks saving:
   blue for "here is what this needs", amber for "that time has already gone". */

.kk-hint--ahead[b-3v1uhmwubu],
.kk-hint--late[b-3v1uhmwubu] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin-top: var(--kk-space-4);
    padding: var(--kk-space-3);
    border-radius: var(--kk-radius-md);
}

.kk-hint--ahead[b-3v1uhmwubu] {
    border: 1px solid var(--kk-info-border);
    background: var(--kk-info-soft);
    color: var(--kk-info);
}

.kk-hint--late[b-3v1uhmwubu] {
    border: 1px solid var(--kk-warning-border);
    background: var(--kk-warning-soft);
    color: var(--kk-warning);
}

/* /Features/Recipes/Components/RecipeCard.razor.rz.scp.css */
.card[b-l0bwf1wd1j] {
    position: relative;
    display: flex;
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
    overflow: hidden;
    transition: var(--kk-transition-colors), box-shadow var(--kk-duration-base) var(--kk-ease);
}

    .card:hover[b-l0bwf1wd1j] {
        border-color: var(--kk-border-strong);
        box-shadow: var(--kk-shadow-sm);
    }

.card__link[b-l0bwf1wd1j] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

    .card__link:hover[b-l0bwf1wd1j] {
        color: inherit;
        text-decoration: none;
    }

.card__media[b-l0bwf1wd1j] {
    aspect-ratio: 16 / 10;
    background: var(--kk-bg-sunken);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .card__media img[b-l0bwf1wd1j] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.card__media--placeholder[b-l0bwf1wd1j] {
    background: linear-gradient(180deg, var(--kk-primary-soft) 0%, var(--kk-bg-sunken) 100%);
    color: var(--kk-primary-text);
}

.card__body[b-l0bwf1wd1j] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    padding: var(--kk-space-4);
    flex: 1 1 auto;
}

.card__title[b-l0bwf1wd1j] {
    font-size: var(--kk-text-md);
    margin: 0;
    padding-right: var(--kk-space-8);
}

.card__facts[b-l0bwf1wd1j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.card__fact[b-l0bwf1wd1j] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
}

/* What part of a meal this is.
 *
 * Set apart from the plain facts beside it, and deliberately unlike the tag pills further
 * down: "Quick" and "Budget friendly" are things somebody said about a recipe, and this is
 * what the recipe is. A quiet outline carries that without becoming a banner. */
.card__role[b-l0bwf1wd1j] {
    padding: 0 var(--kk-space-2);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-pill);
    color: var(--kk-text);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-medium);
    letter-spacing: var(--kk-tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

/* A meal, rather than part of one. Filled instead of outlined so the difference between
   "this is dinner" and "this goes with dinner" survives a glance down a page of cards —
   and still the same shape and place, because it is the same fact answered differently. */
.card__role--meal[b-l0bwf1wd1j] {
    border-color: transparent;
    background: var(--kk-accent-soft);
    color: var(--kk-accent-strong);
    font-weight: var(--kk-weight-semibold);
}

.card__reason[b-l0bwf1wd1j] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text);
}

[b-l0bwf1wd1j] .card__reason svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--kk-text-muted);
}

.card__reason--ready[b-l0bwf1wd1j] {
    color: var(--kk-success);
}

[b-l0bwf1wd1j] .card__reason--ready svg {
    color: var(--kk-success);
}

.card__badges[b-l0bwf1wd1j] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-top: auto;
    padding-top: var(--kk-space-2);
}

.card__favorite[b-l0bwf1wd1j] {
    position: absolute;
    top: var(--kk-space-2);
    right: var(--kk-space-2);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: color-mix(in srgb, var(--kk-surface) 88%, transparent);
    backdrop-filter: blur(4px);
    color: var(--kk-text-muted);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .card__favorite:hover[b-l0bwf1wd1j] {
        color: var(--kk-accent);
        border-color: var(--kk-accent-border);
    }

.card__favorite--on[b-l0bwf1wd1j] {
    color: var(--kk-accent);
    border-color: var(--kk-accent-border);
    background: var(--kk-accent-soft);
}

[b-l0bwf1wd1j] .card__favorite--on svg {
    fill: currentColor;
}

/* The allergen badge sits between the title and the pantry reason, so it is read first. */
.card__allergen[b-l0bwf1wd1j] {
    margin: 0;
}

/* "Start 1 day ahead". Informational, never a warning — needing a marinade is a fact
   about the recipe, not a problem with it. */
.card__fact--ahead[b-l0bwf1wd1j] {
    color: var(--kk-info);
    font-weight: var(--kk-weight-medium);
}
/* /Features/Recipes/Components/RecipeChooserDialog.razor.rz.scp.css */
/* The recipe chooser.

   A large dialog on a desktop, the whole screen on a phone — the presentation comes from
   AppDialog; everything here is about the list inside it. */

.chooser[b-9lgjf2m2z1] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
}

.chooser__search[b-9lgjf2m2z1] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-bottom: var(--kk-space-2);
    background: var(--kk-surface);
}

.chooser__quick[b-9lgjf2m2z1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.chooser__controls[b-9lgjf2m2z1] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--kk-space-3);
}

.chooser__filters[b-9lgjf2m2z1] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-3);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    color: var(--kk-text);
    font: inherit;
    font-size: var(--kk-text-sm);
    cursor: pointer;
}

    .chooser__filters:focus-visible[b-9lgjf2m2z1] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.chooser__filters--on[b-9lgjf2m2z1] {
    border-color: var(--kk-primary);
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
}

.chooser__sort[b-9lgjf2m2z1] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
}

    .chooser__sort .kk-label[b-9lgjf2m2z1] {
        margin: 0;
        white-space: nowrap;
    }

.chooser__filterpanel[b-9lgjf2m2z1] {
    display: grid;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-bg-sunken);
}

@media (min-width: 600px) {
    .chooser__filterpanel[b-9lgjf2m2z1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.chooser__tags[b-9lgjf2m2z1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

/* Said once, plainly, and never presented as something to switch off. */
.chooser__rules[b-9lgjf2m2z1] {
    margin: 0;
}

.chooser__count[b-9lgjf2m2z1] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.chooser__list[b-9lgjf2m2z1] {
    display: grid;
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Two columns once there is room for a photo and a sentence side by side. */
@media (min-width: 768px) {
    .chooser__list[b-9lgjf2m2z1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .chooser__list[b-9lgjf2m2z1] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- one recipe ----

   The whole card is the choose button, with the heart lifted out of it: a favourite toggle
   nested inside a choose button would be a button inside a button, which no browser agrees
   about and no screen reader can describe. */

.pick[b-9lgjf2m2z1] {
    position: relative;
    height: 100%;
}

.pick__choose[b-9lgjf2m2z1] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
    background: var(--kk-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: var(--kk-transition-colors), box-shadow var(--kk-duration-base) var(--kk-ease);
}

    .pick__choose:hover[b-9lgjf2m2z1] {
        border-color: var(--kk-primary);
        box-shadow: var(--kk-shadow-sm);
    }

    .pick__choose:focus-visible[b-9lgjf2m2z1] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.pick__photo[b-9lgjf2m2z1] {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--kk-bg-sunken);
}

    .pick__photo img[b-9lgjf2m2z1] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.pick__photo--none[b-9lgjf2m2z1] {
    background: linear-gradient(180deg, var(--kk-primary-soft) 0%, var(--kk-bg-sunken) 100%);
    color: var(--kk-primary-text);
}

.pick__body[b-9lgjf2m2z1] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    flex: 1 1 auto;
    padding: var(--kk-space-3) var(--kk-space-4) var(--kk-space-4);
    min-width: 0;
}

.pick__name[b-9lgjf2m2z1] {
    font-size: var(--kk-text-md);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
    padding-right: var(--kk-space-8);
    overflow-wrap: anywhere;
}

.pick__allergen[b-9lgjf2m2z1] {
    display: block;
}

.pick__facts[b-9lgjf2m2z1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-1) var(--kk-space-3);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.pick__fact[b-9lgjf2m2z1] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
}

.pick__fact--ahead[b-9lgjf2m2z1] {
    color: var(--kk-info);
    font-weight: var(--kk-weight-medium);
}

.pick__cover[b-9lgjf2m2z1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kk-space-1);
    margin-top: auto;
    padding-top: var(--kk-space-2);
}

.pick__missing[b-9lgjf2m2z1] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    overflow-wrap: anywhere;
}

/* "1 partially on hand" — the state most easily misread as covered, so it is said in
   words beside the count rather than folded into it. */
.pick__partial[b-9lgjf2m2z1] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.pick__fav[b-9lgjf2m2z1] {
    position: absolute;
    top: var(--kk-space-2);
    right: var(--kk-space-2);
    display: grid;
    place-items: center;
    width: var(--kk-touch-target);
    height: var(--kk-touch-target);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: color-mix(in srgb, var(--kk-surface) 88%, transparent);
    backdrop-filter: blur(4px);
    color: var(--kk-text-muted);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .pick__fav:hover[b-9lgjf2m2z1] {
        color: var(--kk-accent);
        border-color: var(--kk-accent-border);
    }

    .pick__fav:focus-visible[b-9lgjf2m2z1] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.pick__fav--on[b-9lgjf2m2z1] {
    color: var(--kk-accent);
    border-color: var(--kk-accent-border);
    background: var(--kk-accent-soft);
}

[b-9lgjf2m2z1] .pick__fav--on svg {
    fill: currentColor;
}

/* ---- one recipe, inside the chooser ----

   Not a second dialog. The surface is the same one the list was on, so the dialog keeps its
   size on a desktop and its full-screen presentation on a phone, and "back" is unmistakably
   different from "cancel" because only one of them is in the footer. */

.preview[b-9lgjf2m2z1] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

    /* The shared body is written for a page, where panels sit on the page background. In a
       dialog they sit on the dialog's own surface, so the outer padding comes off and the
       panels keep their own. */
    .preview[b-9lgjf2m2z1]  .kk-panel {
        margin-inline: 0;
    }
/* /Features/Recipes/Components/RecipeDetailContent.razor.rz.scp.css */
.hero[b-1qu77q0gyg] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kk-space-5);
}

@media (min-width: 860px) {
    .hero[b-1qu77q0gyg] {
        grid-template-columns: 1.4fr 1fr;
        align-items: start;
    }
}

.hero__description[b-1qu77q0gyg] {
    margin: 0 0 var(--kk-space-4);
    font-size: var(--kk-text-md);
    color: var(--kk-text-muted);
    line-height: var(--kk-leading-relaxed);
    max-width: 62ch;
}

.hero__facts[b-1qu77q0gyg] {
    list-style: none;
    margin: 0 0 var(--kk-space-3);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2) var(--kk-space-5);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.hero__facts li[b-1qu77q0gyg] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
}

.hero__tags[b-1qu77q0gyg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.hero__status[b-1qu77q0gyg] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
}

.hero__statusline[b-1qu77q0gyg] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.hero__statusline--ready[b-1qu77q0gyg] {
    color: var(--kk-success);
}

[b-1qu77q0gyg] .hero__statusline svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

.hero__badges[b-1qu77q0gyg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.hero__expiring[b-1qu77q0gyg] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-3);
    background: var(--kk-warning-soft);
    border: 1px solid var(--kk-warning-border);
    border-radius: var(--kk-radius-sm);
    font-size: var(--kk-text-sm);
    color: var(--kk-warning);
}

[b-1qu77q0gyg] .hero__expiring svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

.servings[b-1qu77q0gyg] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
}

.servings__label[b-1qu77q0gyg] {
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-muted);
}

.servings__control[b-1qu77q0gyg] {
    display: flex;
    align-items: center;
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    overflow: hidden;
    background: var(--kk-surface);
}

.servings__step[b-1qu77q0gyg] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    background: none;
    color: var(--kk-text);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .servings__step:hover:not(:disabled)[b-1qu77q0gyg] {
        background: var(--kk-bg-sunken);
    }

    .servings__step:disabled[b-1qu77q0gyg] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.servings__value[b-1qu77q0gyg] {
    min-width: 2.5rem;
    text-align: center;
    font-size: var(--kk-text-md);
    font-weight: var(--kk-weight-semibold);
    border-left: var(--kk-border-hairline);
    border-right: var(--kk-border-hairline);
    padding: 0 var(--kk-space-2);
    line-height: 38px;
}

.ingredients[b-1qu77q0gyg] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.staples[b-1qu77q0gyg] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-3) var(--kk-space-4);
    border-top: var(--kk-border-subtle-line);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

[b-1qu77q0gyg] .staples svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

.steps[b-1qu77q0gyg] {
    list-style: none;
    margin: 0;
    padding: var(--kk-space-2) var(--kk-space-5) var(--kk-space-5);
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.steps__step[b-1qu77q0gyg] {
    display: flex;
    gap: var(--kk-space-4);
    align-items: flex-start;
}

.steps__number[b-1qu77q0gyg] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: var(--kk-radius-pill);
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-bold);
}

.steps__text[b-1qu77q0gyg] {
    line-height: var(--kk-leading-relaxed);
    padding-top: 2px;
}

.source[b-1qu77q0gyg] {
    margin: 0;
    font-size: var(--kk-text-sm);
}

.source a[b-1qu77q0gyg] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
}

@media (max-width: 639.98px) {
    [b-1qu77q0gyg] .kk-panel__header {
        flex-wrap: wrap;
    }

    .servings[b-1qu77q0gyg] {
        width: 100%;
        justify-content: space-between;
    }
}

/* ---- start ahead of time ----

   Distinct from the allergen panel above it and from the planned strip: informational
   blue, never the amber or red of a warning. Needing a marinade is not a problem. */

.hero__facts-ahead[b-1qu77q0gyg] {
    color: var(--kk-info);
    font-weight: var(--kk-weight-medium);
}

.ahead__lede[b-1qu77q0gyg] {
    margin: 0 0 var(--kk-space-4);
    color: var(--kk-text-muted);
    max-width: 62ch;
}

.ahead__list[b-1qu77q0gyg] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ahead__item[b-1qu77q0gyg] {
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px solid var(--kk-info-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-info-soft);
}

.ahead__head[b-1qu77q0gyg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
}

.ahead__title[b-1qu77q0gyg] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.ahead__instructions[b-1qu77q0gyg] {
    margin: var(--kk-space-2) 0 0;
    color: var(--kk-text);
    line-height: var(--kk-leading-normal);
}

.ahead__active[b-1qu77q0gyg] {
    margin: var(--kk-space-1) 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* ---- what to check before cooking ----

   One line, above the ingredients. Informational blue, never the amber of a warning:
   "check two quantities" is a useful nudge, not a problem with the recipe. */

.sufficiency[b-1qu77q0gyg] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0 0 var(--kk-space-4);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px solid var(--kk-info-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-info-soft);
    color: var(--kk-info);
}

/* ---- how much to make ----

   Pills rather than a select, because these are four or five choices somebody scans
   rather than a long list they search. Every one carries its own words. */

.scales[b-1qu77q0gyg] {
    margin-top: var(--kk-space-4);
    padding-top: var(--kk-space-4);
    border-top: var(--kk-border-subtle-line);
}

.scales__lede[b-1qu77q0gyg] {
    margin: 0 0 var(--kk-space-3);
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.scales__row[b-1qu77q0gyg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-2);
}

.scale[b-1qu77q0gyg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
    color: var(--kk-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .scale:hover:not(:disabled)[b-1qu77q0gyg] {
        border-color: var(--kk-border-strong);
        background: var(--kk-surface-tinted);
    }

    .scale:focus-visible[b-1qu77q0gyg] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

    .scale:disabled[b-1qu77q0gyg] {
        opacity: 0.6;
        cursor: default;
    }

/* Border weight as well as colour, so the selection survives a bright kitchen and
   anybody who does not distinguish the hue. */
.scale--on[b-1qu77q0gyg] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
}

.scale__label[b-1qu77q0gyg] {
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
}

.scale__detail[b-1qu77q0gyg] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.scale--on .scale__detail[b-1qu77q0gyg] {
    color: var(--kk-primary-text);
}

@media (max-width: 600px) {
    /* Two per row rather than five squeezed together. */
    .scale[b-1qu77q0gyg] {
        flex: 1 1 45%;
    }
}
/* /Features/Recipes/Components/RecipeDetailView.razor.rz.scp.css */
/* The recipe body — hero, ingredients, scaling, method — is RecipeDetailContent's, and so
   are its styles. What is left here is what this page adds around it, which is the strip
   saying the recipe is already on the meal plan. Splitting the markup and leaving the rules
   behind is how a retired selector quietly comes back. */

/* ---- what is already planned ----

   A quiet strip, not a warning. It answers "have I already arranged this?" before the
   page asks the reader to decide anything, and it never uses the same colour as the
   allergen panel directly above it. */

.planned[b-0ia6i4v0ay] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-5);
}

.planned__row[b-0ia6i4v0ay] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2) var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px solid var(--kk-primary-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-primary-soft);
}

.planned__icon[b-0ia6i4v0ay] {
    flex: none;
    color: var(--kk-primary-text);
}

.planned__when[b-0ia6i4v0ay] {
    flex: 1 1 16rem;
    margin: 0;
    color: var(--kk-primary-text);
}

    .planned__when strong[b-0ia6i4v0ay] {
        color: var(--kk-text-strong);
    }

.planned__actions[b-0ia6i4v0ay] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

@media (max-width: 600px) {
    .planned__actions[b-0ia6i4v0ay] {
        width: 100%;
    }

        /* Full-width targets rather than three cramped ones side by side. */
        .planned__actions > *[b-0ia6i4v0ay] {
            flex: 1 1 8rem;
            justify-content: center;
        }
}

/* /Features/Recipes/Components/RecipeEditorSheet.razor.rz.scp.css */
.editor[b-snl8jk3b5b] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

/* The system-recipe explanation. It has to read as a reason, not a refusal. */
.editor__copy[b-snl8jk3b5b] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    align-items: flex-start;
    padding: var(--kk-space-4);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
}

.editor__copytitle[b-snl8jk3b5b] {
    margin: 0;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.editor__copy p[b-snl8jk3b5b] {
    margin: 0;
    color: var(--kk-text-muted);
}

.editor__list[b-snl8jk3b5b],
.editor__steps[b-snl8jk3b5b] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    margin: 0 0 var(--kk-space-3);
    padding: 0;
}

.editor__list[b-snl8jk3b5b] {
    list-style: none;
}

.editor__steps[b-snl8jk3b5b] {
    padding-left: var(--kk-space-5);
}

.editor__row[b-snl8jk3b5b] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.editor__rowname[b-snl8jk3b5b] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.editor__rowfields[b-snl8jk3b5b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.editor__qty[b-snl8jk3b5b] { flex: 0 0 5.5rem; }
.editor__unit[b-snl8jk3b5b] { flex: 0 0 8rem; }
.editor__note[b-snl8jk3b5b] { flex: 1 1 10rem; }

.editor__rowactions[b-snl8jk3b5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
}

.editor__optional[b-snl8jk3b5b] {
    min-height: auto;
    padding: 0;
    border: 0;
    background: none;
}

.editor__step[b-snl8jk3b5b] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
}

    .editor__step textarea[b-snl8jk3b5b] {
        flex: 1 1 auto;
    }

.editor__source[b-snl8jk3b5b] {
    font-weight: var(--kk-weight-medium);
}

@media (max-width: 34rem) {
    .editor__qty[b-snl8jk3b5b],
    .editor__unit[b-snl8jk3b5b],
    .editor__note[b-snl8jk3b5b] {
        flex: 1 1 100%;
    }
}

/* ---- advance preparation ----

   Each step is a small card rather than a row: it holds four fields plus a checkbox, and
   laid out as a flat list they would run together. */

.editor__advance[b-snl8jk3b5b] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    margin: var(--kk-space-3) 0;
    padding: 0;
    list-style: none;
}

.editor__advance-row[b-snl8jk3b5b] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
}

.editor__advance-foot[b-snl8jk3b5b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
}

.editor__advance-required[b-snl8jk3b5b] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    font-size: var(--kk-text-sm);
    cursor: pointer;
}

/* ---- meal type ----

   Three checkboxes as chips. Each is a full touch target, and the selected state carries a
   border weight as well as a colour so it survives greyscale. */

.meals[b-snl8jk3b5b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.meal[b-snl8jk3b5b] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-3);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .meal:focus-within[b-snl8jk3b5b] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

.meal--on[b-snl8jk3b5b] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-medium);
}
/* /Features/Recipes/Components/RecipeFilterSheet.razor.rz.scp.css */
/* Wrapping chips, not a select. A household with forty tags gets something scannable
   rather than a dropdown nobody can survey. */

.rf__options[b-ax9xyhkou8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.rf__option[b-ax9xyhkou8] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    font-size: var(--kk-text-base);
    cursor: pointer;
    transition: var(--kk-transition-colors);
    overflow-wrap: anywhere;
}

    .rf__option:hover[b-ax9xyhkou8] {
        border-color: var(--kk-border-strong);
        background: var(--kk-surface-tinted);
    }

    .rf__option:focus-within[b-ax9xyhkou8] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Border weight and a tint as well as colour, so the selection survives greyscale. */
.rf__option--on[b-ax9xyhkou8] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-medium);
}
/* /Features/Recipes/Components/RecipeImportSheet.razor.rz.scp.css */
.import[b-mfwtuksjgj] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.import__row[b-mfwtuksjgj] {
    display: flex;
    gap: var(--kk-space-2);
}

    .import__row input[b-mfwtuksjgj] {
        flex: 1 1 auto;
    }

.import__text[b-mfwtuksjgj] {
    min-height: 10rem;
    font-family: var(--kk-font-mono, ui-monospace, monospace);
}

.import__or[b-mfwtuksjgj] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    color: var(--kk-text-subtle);
    font-size: var(--kk-text-sm);
}

    .import__or[b-mfwtuksjgj]::before,
    .import__or[b-mfwtuksjgj]::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: var(--kk-border-strong);
    }

.import__failure[b-mfwtuksjgj],
.import__dupe[b-mfwtuksjgj] {
    display: flex;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    border-radius: var(--kk-radius-md);
    background: var(--kk-warning-soft);
    border: 1px solid var(--kk-warning-border);
    color: var(--kk-warning);
}

.import__dupe[b-mfwtuksjgj] {
    flex-direction: column;
    gap: var(--kk-space-2);
}

.import__failure p[b-mfwtuksjgj],
.import__dupe p[b-mfwtuksjgj] {
    margin: 0;
}

.import__dupetitle[b-mfwtuksjgj] {
    font-weight: var(--kk-weight-semibold);
}

.import__dupelist[b-mfwtuksjgj] {
    margin: 0;
    padding-left: var(--kk-space-5);
}

.import__warning[b-mfwtuksjgj] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.import__summary[b-mfwtuksjgj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2) var(--kk-space-4);
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    font-size: var(--kk-text-sm);
}

.import__attention[b-mfwtuksjgj] {
    color: var(--kk-warning);
    font-weight: var(--kk-weight-medium);
}

.import__list[b-mfwtuksjgj] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.import__item[b-mfwtuksjgj] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.import__item--problem[b-mfwtuksjgj] {
    border-color: var(--kk-warning-border);
    background: var(--kk-warning-soft);
}

.import__item--skipped[b-mfwtuksjgj] {
    opacity: 0.6;
}

.import__what[b-mfwtuksjgj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.import__name[b-mfwtuksjgj] {
    margin: 0;
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
}

.import__raw[b-mfwtuksjgj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.import__rawtext[b-mfwtuksjgj] {
    font-family: var(--kk-font-mono, ui-monospace, monospace);
}

.import__sep[b-mfwtuksjgj] {
    color: var(--kk-border-strong);
}

.import__problem[b-mfwtuksjgj] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-warning);
}

.import__fields[b-mfwtuksjgj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
}

.import__qty[b-mfwtuksjgj] { flex: 0 0 5.5rem; }
.import__unit[b-mfwtuksjgj] { flex: 0 0 9rem; }

.import__optional[b-mfwtuksjgj] {
    min-height: auto;
    padding: 0;
    border: 0;
    background: none;
}

.import__alts[b-mfwtuksjgj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

.import__actions[b-mfwtuksjgj] {
    display: flex;
    justify-content: flex-end;
}

.import__steps[b-mfwtuksjgj] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin: 0;
    padding-left: var(--kk-space-5);
}

.import__source[b-mfwtuksjgj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
}

@media (max-width: 34rem) {
    .import__row[b-mfwtuksjgj] {
        flex-direction: column;
    }

    .import__qty[b-mfwtuksjgj],
    .import__unit[b-mfwtuksjgj] {
        flex: 1 1 100%;
    }
}
/* /Features/Recipes/Components/RecipePrintView.razor.rz.scp.css */
/*
    The printed recipe card.

    Two audiences, one stylesheet. On screen this is a preview that should already look
    like the paper. In print it is the whole page — the application's chrome is gone by
    then, because the print route renders no navigation at all rather than hiding it.

    Ink is treated as a cost throughout: white background, charcoal text, deep green used
    only for rules and headings, no filled blocks, no shadows, no gradients.

    Fonts are the system stack. A remote font that fails to load during printing produces a
    page set in something arbitrary, and print is exactly when a network is least likely to
    be waited for.
*/

.sheet[b-va2qqds5eh] {
    --ink: #23241f;
    --ink-soft: #55574f;
    --rule: #c9cdc2;
    --accent: #2f5d45;

    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    color: var(--ink);
    background: #fff;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    font-size: 11.5pt;
    line-height: 1.5;
}

/* ------------------------------------------------------------------ header */

.sheet__brand[b-va2qqds5eh] {
    margin: 0 0 0.35rem;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 7.5pt;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.sheet__title[b-va2qqds5eh] {
    margin: 0;
    font-size: 24pt;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.sheet__lede[b-va2qqds5eh] {
    margin: 0.5rem 0 0;
    font-size: 11pt;
    font-style: italic;
    color: var(--ink-soft);
    max-width: 34rem;
}

/*
    A modest band across the top, never a hero. Capped in vh as well as rem so it cannot
    push the title and metadata onto a second page on a short screen.
*/
.sheet__photo[b-va2qqds5eh] {
    display: block;
    width: 100%;
    max-height: 2.6in;
    margin: 0.9rem 0 0;
    object-fit: cover;
    border-radius: 2px;
}

.sheet__meta[b-va2qqds5eh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem;
    margin: 0.9rem 0 0;
    padding: 0.6rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 9.5pt;
}

.sheet__metaitem[b-va2qqds5eh] {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
}

.sheet__metaitem dt[b-va2qqds5eh] {
    font-weight: 600;
    color: var(--ink-soft);
}

.sheet__metaitem dd[b-va2qqds5eh] {
    margin: 0;
}

.sheet__tags[b-va2qqds5eh] {
    margin: 0.55rem 0 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 8.5pt;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------------- body */

.sheet__section[b-va2qqds5eh] {
    margin-top: 1.6rem;
}

.sheet__heading[b-va2qqds5eh] {
    margin: 0 0 0.6rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--accent);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 10pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ------------------------------------------------------------ ingredients */

.ingredients[b-va2qqds5eh] {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 2rem;
}

.ingredients__row[b-va2qqds5eh] {
    display: flex;
    gap: 0.55rem;
    align-items: baseline;
    margin: 0 0 0.4rem;

    /* A row split down the middle by a column or page break is unreadable. */
    break-inside: avoid;
    page-break-inside: avoid;
}

/*
    Drawn, not an <input>. Browsers render real checkboxes differently from one another and
    some omit them from print entirely; a bordered square always prints.
*/
.ingredients__box[b-va2qqds5eh] {
    flex: 0 0 auto;
    width: 0.72em;
    height: 0.72em;
    margin-top: 0.15em;
    border: 1px solid var(--ink-soft);
    border-radius: 1px;
}

.ingredients__text[b-va2qqds5eh] {
    flex: 1 1 auto;
}

.ingredients__amount[b-va2qqds5eh] {
    font-weight: 600;
    white-space: nowrap;
}

.ingredients__note[b-va2qqds5eh] {
    color: var(--ink-soft);
}

/* Words, not colour: it has to survive a monochrome printer. */
.ingredients__optional[b-va2qqds5eh] {
    font-style: italic;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------------ steps */

.steps[b-va2qqds5eh] {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps__item[b-va2qqds5eh] {
    display: flex;
    gap: 0.75rem;
    margin: 0 0 0.75rem;

    /* Keeps a step's number with its text. A long step may still break across pages
       rather than leaving most of one blank. */
    break-inside: avoid;
    page-break-inside: avoid;
}

.steps__number[b-va2qqds5eh] {
    flex: 0 0 1.5rem;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 10pt;
    font-weight: 700;
    line-height: 1.6;
    text-align: right;
    color: var(--accent);
}

.steps__text[b-va2qqds5eh] {
    flex: 1 1 auto;

    /* Intentional line breaks in an instruction are preserved. */
    white-space: pre-line;
}

/* ------------------------------------------------------------------ notes */

.sheet__notes .notes__list[b-va2qqds5eh] {
    margin: 0;
    padding-left: 1.1rem;
}

.sheet__notes li[b-va2qqds5eh] {
    margin-bottom: 0.3rem;
    break-inside: avoid;
}

/* ----------------------------------------------------------------- footer */

.sheet__foot[b-va2qqds5eh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    margin-top: 2rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 8pt;
    color: var(--ink-soft);
}

.sheet__footbrand[b-va2qqds5eh] {
    font-weight: 600;
    color: var(--accent);
}

.sheet__printed[b-va2qqds5eh] {
    margin-left: auto;
}

/* -------------------------------------------------- screen-only toolbar */

.printbar[b-va2qqds5eh] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    max-width: 46rem;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    background: var(--kk-surface, #fff);
    border-bottom: 1px solid var(--kk-border, #dcdcdc);
}

.printbar__servings[b-va2qqds5eh] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.printbar__label[b-va2qqds5eh] {
    font-size: 0.85rem;
    color: var(--kk-text-muted, #55574f);
}

.printbar__value[b-va2qqds5eh] {
    min-width: 1.5rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.printbar__toggle[b-va2qqds5eh] {
    font-size: 0.9rem;
}

/* Focus must stay obvious on screen; it is irrelevant on paper. */
.printbar :focus-visible[b-va2qqds5eh] {
    outline: 2px solid var(--kk-accent, #2f5d45);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .ingredients[b-va2qqds5eh] {
        columns: 1;
    }

    .sheet[b-va2qqds5eh] {
        padding: 1rem 0.9rem 2rem;
    }
}

/* ==================================================================== PRINT */

@media print {
    /*
        Letter and A4 both. `auto` lets the driver use whichever is loaded rather than
        forcing one and scaling the other; the margin is what actually matters, and 0.6in
        keeps content off the edge on either size.
    */
    @page {
        size: auto;
        margin: 0.6in;
    }

    .print-hide[b-va2qqds5eh] {
        display: none !important;
    }

    .sheet[b-va2qqds5eh] {
        max-width: none;
        margin: 0;
        padding: 0;
        font-size: 11pt;
    }

    /*
        The green rules are structural, not decorative, so they are asked for explicitly.
        Everything else is happy to print as plain black on white, which is why there are
        no filled blocks to force.
    */
    .sheet__heading[b-va2qqds5eh],
    .sheet__brand[b-va2qqds5eh],
    .sheet__footbrand[b-va2qqds5eh],
    .steps__number[b-va2qqds5eh] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* A heading alone at the foot of a page is the commonest print-layout failure. */
    .sheet__heading[b-va2qqds5eh] {
        break-after: avoid;
        page-break-after: avoid;
    }

    .sheet__head[b-va2qqds5eh],
    .sheet__meta[b-va2qqds5eh],
    .sheet__foot[b-va2qqds5eh] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Ingredients should start on page one wherever possible; a forced break would be
       worse than a slightly full first page, so nothing is forced. */
    .sheet__section--ingredients[b-va2qqds5eh] {
        break-inside: auto;
    }

    .sheet__photo[b-va2qqds5eh] {
        max-height: 2.2in;
    }

    /*
        Links print as their text. A URL in brackets after every link is a common print
        stylesheet flourish and it makes a recipe card look like a bibliography.
    */
    a[b-va2qqds5eh] {
        color: inherit;
        text-decoration: none;
    }
}

/* ---- start ahead of time ----

   A tick box like the ingredients, because these are things to do rather than things to
   read. Everything is stated in words: a printed sheet may be black and white, and it may
   be a photocopy of a photocopy. */

.sheet__section--ahead[b-va2qqds5eh] {
    /* Kept whole. Half an overnight-marinade instruction on the previous page is worse
       than a slightly short page. */
    break-inside: avoid;
    page-break-inside: avoid;
}

.ahead[b-va2qqds5eh] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ahead__row[b-va2qqds5eh] {
    display: flex;
    gap: 0.55rem;
    align-items: baseline;
    margin: 0 0 0.5rem;
    break-inside: avoid;
    page-break-inside: avoid;
}

.ahead__box[b-va2qqds5eh] {
    flex: 0 0 auto;
    width: 0.72em;
    height: 0.72em;
    margin-top: 0.15em;
    border: 1px solid var(--ink-soft);
    border-radius: 1px;
}

.ahead__text[b-va2qqds5eh] {
    flex: 1 1 auto;
}

.ahead__when[b-va2qqds5eh] {
    font-weight: 600;
}

.ahead__when[b-va2qqds5eh]::after {
    content: " — ";
}

.ahead__optional[b-va2qqds5eh] {
    color: var(--ink-soft);
}

.ahead__instructions[b-va2qqds5eh] {
    display: block;
    color: var(--ink-soft);
}
/* /Features/Recipes/Components/RecipesView.razor.rz.scp.css */
.groups[b-772rc0r66l],
.tags[b-772rc0r66l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.resultcount[b-772rc0r66l] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.grid[b-772rc0r66l] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kk-space-4);
}

@media (min-width: 600px) {
    .grid[b-772rc0r66l] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid[b-772rc0r66l] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* A fourth column once each card still holds its name, time and pantry fit. Beyond this
   the cards would be narrower than the text they carry, so it stops here rather than
   filling the width for its own sake. */
@media (min-width: 1440px) {
    .recipes__grid[b-772rc0r66l] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.grid > li[b-772rc0r66l] {
    display: flex;
}

[b-772rc0r66l] .grid > li > article {
    flex: 1 1 auto;
}

.more[b-772rc0r66l] {
    display: flex;
    justify-content: center;
    padding-top: var(--kk-space-2);
}

@media (max-width: 639.98px) {
    .groups[b-772rc0r66l] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--kk-space-1);
        scrollbar-width: none;
    }

        .groups[b-772rc0r66l]::-webkit-scrollbar {
            display: none;
        }
}

/* The way into the advanced filters. Styled as a chip so it sits with the group chips it
   belongs beside, but marked when filters are on — with a border and a count, never with
   colour alone. */

.groups__filters[b-772rc0r66l] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    color: var(--kk-text);
    font: inherit;
    font-size: var(--kk-text-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .groups__filters:hover[b-772rc0r66l] {
        border-color: var(--kk-border-strong);
        background: var(--kk-surface-tinted);
    }

    .groups__filters:focus-visible[b-772rc0r66l] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* The count in the label carries this too, so it does not depend on the tint. */
.groups__filters--on[b-772rc0r66l] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-semibold);
}
/* /Features/Settings/Components/AllergenPicker.razor.rz.scp.css */
.picker[b-jxfaq4v6z3] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

/* Permanent and quiet, not an alarm. It is always true, so it must not shout. */
.picker__caveat[b-jxfaq4v6z3] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-3);

    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);

    font-size: var(--kk-text-sm);
    line-height: 1.5;
    color: var(--kk-text-muted);
}

.picker__caveat svg[b-jxfaq4v6z3] {
    flex: 0 0 auto;
    margin-block-start: 0.15rem;
}

.picker__grid[b-jxfaq4v6z3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--kk-space-2);
    align-items: start;
}

.cat[b-jxfaq4v6z3] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    padding: var(--kk-space-3);

    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.cat--on[b-jxfaq4v6z3] {
    border-color: var(--kk-accent-border);
    background: var(--kk-accent-soft);
}

.cat__main[b-jxfaq4v6z3] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    cursor: pointer;
}

.cat__text[b-jxfaq4v6z3] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cat__name[b-jxfaq4v6z3] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.cat__hint[b-jxfaq4v6z3] {
    font-size: var(--kk-text-xs);
    line-height: 1.45;
    color: var(--kk-text-muted);
}

.cat__more > summary[b-jxfaq4v6z3] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
    cursor: pointer;
    padding: var(--kk-space-1) 0;
}

.cat__children[b-jxfaq4v6z3] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
    padding-block-start: var(--kk-space-2);
}

.child[b-jxfaq4v6z3] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    font-size: var(--kk-text-sm);
    cursor: pointer;
}

.child:has(input:disabled)[b-jxfaq4v6z3] {
    cursor: default;
    opacity: 0.7;
}

/* Says why the box is disabled rather than leaving it a mystery. */
.child__covered[b-jxfaq4v6z3] {
    display: block;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-subtle);
}

.picker__combo[b-jxfaq4v6z3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
}

.picker__combonote[b-jxfaq4v6z3],
.picker__hint[b-jxfaq4v6z3] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    line-height: 1.5;
}

/* Gluten is behind its own disclosure — it is not a food allergy. */
.picker__gluten[b-jxfaq4v6z3] {
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
}

.picker__gluten > summary[b-jxfaq4v6z3] {
    padding: var(--kk-space-3);
    cursor: pointer;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-muted);
}

.picker__glutenbody[b-jxfaq4v6z3] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    padding: 0 var(--kk-space-3) var(--kk-space-3);
}
/* /Features/Settings/Components/BetaDiagnosticsView.razor.rz.scp.css */
.window[b-sj8cx9ivw8] {
    margin: 0;
    color: var(--kk-text-muted);
    font-size: var(--kk-text-sm);
}

/* Wide tables scroll inside their own container; the page never scrolls sideways. */
.table-scroll[b-sj8cx9ivw8] {
    overflow-x: auto;
    padding: 0 var(--kk-space-2) var(--kk-space-2);
}

.cell-name[b-sj8cx9ivw8] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
    white-space: nowrap;
}

.cell-note[b-sj8cx9ivw8] {
    display: block;
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-normal);
    color: var(--kk-text-subtle);
}

.cell-warn[b-sj8cx9ivw8] {
    display: block;
    font-size: var(--kk-text-xs);
    color: var(--kk-warning);
}

.cell-none[b-sj8cx9ivw8] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.failures[b-sj8cx9ivw8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.failure[b-sj8cx9ivw8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-5);
}

.failure + .failure[b-sj8cx9ivw8] {
    border-top: var(--kk-border-subtle-line);
}

.failure__what[b-sj8cx9ivw8] {
    flex: 1 1 auto;
    min-width: 0;
}

.failure__when[b-sj8cx9ivw8] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}
/* /Features/Settings/Components/BetaFeaturesView.razor.rz.scp.css */
.intro[b-5oe3bufc2v] {
    margin: 0;
    max-width: 68ch;
    color: var(--kk-text-muted);
}

.area__count[b-5oe3bufc2v] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.features[b-5oe3bufc2v] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature[b-5oe3bufc2v] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-4);
    padding: var(--kk-space-4) var(--kk-space-5);
}

.feature + .feature[b-5oe3bufc2v] {
    border-top: var(--kk-border-subtle-line);
}

.feature--locked[b-5oe3bufc2v] {
    background: var(--kk-surface-tinted);
}

.feature__control[b-5oe3bufc2v] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    min-height: 40px;
    margin-left: calc(var(--kk-space-2) * -1);
}

.feature__switch[b-5oe3bufc2v] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--kk-radius-sm);
    cursor: pointer;
}

    .feature__switch:hover[b-5oe3bufc2v] {
        background: var(--kk-bg-sunken);
    }

.feature__lock[b-5oe3bufc2v] {
    color: var(--kk-text-subtle);
}

.feature__body[b-5oe3bufc2v] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.feature__title[b-5oe3bufc2v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
    margin: 0;
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.feature--locked .feature__title[b-5oe3bufc2v] {
    color: var(--kk-text-muted);
}

.feature__description[b-5oe3bufc2v] {
    margin: 0;
    max-width: 72ch;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.feature__requires[b-5oe3bufc2v] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

[b-5oe3bufc2v] .feature__requires svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

.footer-note[b-5oe3bufc2v] {
    max-width: 72ch;
}

.footer-note a[b-5oe3bufc2v] {
    margin-left: var(--kk-space-1);
}
/* /Features/Settings/Components/CookingPreferencesView.razor.rz.scp.css */
/*
    Cooking preferences. Card and option treatment matched to the settings hub and
    My food profile, so the three read as one system.
*/

.prefs[b-hhrfg53c88] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

.prefs__card[b-hhrfg53c88] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-5);

    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
}

/*
    Household exclusions affect what everyone is served, so the card carries a heavier
    left edge — the same treatment the personal safety card uses, and for the same reason.
    Never colour on its own.
*/
.prefs__card--safety[b-hhrfg53c88] {
    border-inline-start: 3px solid var(--kk-warning-border, var(--kk-border-strong));
}

.prefs__title[b-hhrfg53c88] {
    margin: 0;
    font-size: var(--kk-text-lg);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.prefs__lede[b-hhrfg53c88] {
    margin: 0;
    max-width: 62ch;
    font-size: var(--kk-text-sm);
    line-height: 1.55;
    color: var(--kk-text-muted);
}

.prefs__empty[b-hhrfg53c88] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

/* A member sees every value and can change none of them. Said once, plainly. */
.prefs__readonly[b-hhrfg53c88] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-4);

    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);

    font-size: var(--kk-text-sm);
    line-height: 1.5;
    color: var(--kk-text-muted);
}

.prefs__readonly svg[b-hhrfg53c88] {
    flex: 0 0 auto;
    margin-block-start: 0.1rem;
}

/* ---- servings stepper ---- */

.prefs__stepper[b-hhrfg53c88] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
}

.prefs__value[b-hhrfg53c88] {
    min-inline-size: 2.5rem;
    text-align: center;
    font-size: var(--kk-text-xl);
    font-weight: var(--kk-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.prefs__patterns[b-hhrfg53c88] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

/* ---- option groups ---- */

.options[b-hhrfg53c88] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.option[b-hhrfg53c88] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);

    /* A real target. These wrap rather than compressing, so five presets on a 320 px
       screen become two rows of comfortable pills instead of one row of cramped ones. */
    min-height: var(--kk-touch-target);
    padding: var(--kk-space-2) var(--kk-space-4);

    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);

    font-size: var(--kk-text-base);
    cursor: pointer;
}

    .option:focus-within[b-hhrfg53c88] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* No breakpoint needed. A pill too wide to share a row takes its own; short numeric
   presets keep sitting side by side. Flex wrap already does exactly the right thing once
   the targets are big enough, and a media query here would only be guessing at label
   lengths that change with translation. */

.option:hover[b-hhrfg53c88] {
    background: var(--kk-surface-tinted);
}

.option:has(input:checked)[b-hhrfg53c88] {
    background: var(--kk-accent-soft);
    border-color: var(--kk-accent-border);
    color: var(--kk-accent-text);
}

.option:has(input:focus-visible)[b-hhrfg53c88] {
    outline: var(--kk-focus-ring);
    outline-offset: var(--kk-focus-ring-offset);
}

.option:has(input:disabled)[b-hhrfg53c88] {
    cursor: default;
    opacity: 0.65;
}

/* ---- exclusions ---- */

.chips[b-hhrfg53c88] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.chip[b-hhrfg53c88] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    padding: var(--kk-space-2) var(--kk-space-3);

    background: var(--kk-bg-sunken);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);

    font-size: var(--kk-text-sm);
}

.chip--safety[b-hhrfg53c88] {
    background: var(--kk-warning-soft, var(--kk-bg-sunken));
    border-color: var(--kk-warning-border, var(--kk-border));
}

.chip__label[b-hhrfg53c88] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--kk-space-1);
}

.chip__warn[b-hhrfg53c88] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.chip__remove[b-hhrfg53c88] {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;

    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--kk-text-subtle);
    cursor: pointer;
}

.chip__remove:hover[b-hhrfg53c88] {
    background: var(--kk-surface);
    color: var(--kk-text);
}

.prefs__add[b-hhrfg53c88] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--kk-space-3);
}

.prefs__add .kk-field[b-hhrfg53c88] {
    flex: 1 1 14rem;
    margin: 0;
}

/* ---- usual meal times ---- */

.times[b-hhrfg53c88] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--kk-space-4);
    margin-bottom: var(--kk-space-3);
}

.times__field[b-hhrfg53c88] {
    margin: 0;
}

.times__row[b-hhrfg53c88] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
}

    .times__row .kk-input[b-hhrfg53c88] {
        flex: 1 1 auto;
        min-width: 0;
    }

/* ---- how the three stock settings relate ----

   Keep on hand, the household level, and an item override are three different things
   and somebody has to be able to tell them apart. Spelled out here rather than left to
   be inferred from two screens that never appear together. */

.prefs__notes[b-hhrfg53c88] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin: var(--kk-space-4) 0 0;
    padding: 0;
    /* No bullets: three short statements read better as lines than as a list. */
    list-style: none;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.prefs__saved[b-hhrfg53c88] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    margin: var(--kk-space-3) 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-success);
}
/* /Features/Settings/Components/DependentEditorSheet.razor.rz.scp.css */
/*
    The dependent editor, inside a dialog. Spacing only — the dialog supplies the surface.
*/

.depform[b-58xr1uyu3k] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

.depform__add[b-58xr1uyu3k] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--kk-space-3);
}

.depform__add .kk-field[b-58xr1uyu3k] {
    flex: 1 1 12rem;
    margin: 0;
}

.options[b-58xr1uyu3k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.option[b-58xr1uyu3k] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    padding: var(--kk-space-2) var(--kk-space-3);

    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);

    font-size: var(--kk-text-sm);
    cursor: pointer;
}

.option:hover[b-58xr1uyu3k] {
    background: var(--kk-surface-tinted);
}

.option:has(input:checked)[b-58xr1uyu3k] {
    background: var(--kk-accent-soft);
    border-color: var(--kk-accent-border);
    color: var(--kk-accent-text);
}

.option:has(input:focus-visible)[b-58xr1uyu3k] {
    outline: var(--kk-focus-ring);
    outline-offset: var(--kk-focus-ring-offset);
}

.chips[b-58xr1uyu3k] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.chip[b-58xr1uyu3k] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    padding: var(--kk-space-2) var(--kk-space-3);

    background: var(--kk-bg-sunken);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);

    font-size: var(--kk-text-sm);
}

.chip--safety[b-58xr1uyu3k] {
    background: var(--kk-warning-soft, var(--kk-bg-sunken));
    border-color: var(--kk-warning-border, var(--kk-border));
}

.chip__label[b-58xr1uyu3k] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--kk-space-1);
}

.chip__kind[b-58xr1uyu3k] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-subtle);
}

.chip__remove[b-58xr1uyu3k] {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;

    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--kk-text-subtle);
    cursor: pointer;
}

.chip__remove:hover[b-58xr1uyu3k] {
    background: var(--kk-surface);
    color: var(--kk-text);
}
/* /Features/Settings/Components/KitchenAndStaplesView.razor.rz.scp.css */
.kitchen[b-4aakacptkb] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

.kitchen__readonly[b-4aakacptkb],
.kitchen__refused[b-4aakacptkb] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-3);
    border-radius: var(--kk-radius-md);
    font-size: var(--kk-text-sm);
    line-height: 1.45;
}

.kitchen__readonly[b-4aakacptkb] {
    background: var(--kk-bg-sunken);
    color: var(--kk-text-muted);
}

.kitchen__refused[b-4aakacptkb] {
    background: var(--kk-warning-soft, var(--kk-bg-sunken));
    color: var(--kk-text);
    border: 1px solid var(--kk-warning-border, var(--kk-border));
}

.kitchen__grid[b-4aakacptkb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kk-space-1);
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.kitchen__options[b-4aakacptkb] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.kitchen__option[b-4aakacptkb] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-md);
    cursor: pointer;
}

.kitchen__optiontext[b-4aakacptkb] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kitchen__optiontitle[b-4aakacptkb] {
    font-weight: 600;
}

.kitchen__optionhint[b-4aakacptkb] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    line-height: 1.4;
}

.kitchen__staples[b-4aakacptkb] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    margin-top: var(--kk-space-4);
    padding-top: var(--kk-space-4);
    border-top: 1px solid var(--kk-border);
}

.kitchen__add[b-4aakacptkb] {
    display: flex;
    align-items: flex-end;
    gap: var(--kk-space-2);
}

.kitchen__add .kk-field[b-4aakacptkb] {
    flex: 1 1 auto;
    margin: 0;
}

fieldset[disabled][b-4aakacptkb] {
    opacity: 0.6;
}
/* /Features/Settings/Components/MyFoodProfileView.razor.rz.scp.css */
/*
    My food profile.

    This file was missing, which left the profile screen as unstyled semantic markup in the
    same way the hub was. Card treatment matches the settings rows so the two read as one
    system.
*/

.profile[b-k4pei5m6t7] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

.profile__card[b-k4pei5m6t7] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-5);

    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
}

/*
    The safety card is distinguished by a heavier left edge, not by colour alone — the
    distinction between "could hurt you" and "you'd rather not" has to survive a
    monochrome screen and a colour-blind reader.
*/
.profile__card--safety[b-k4pei5m6t7] {
    border-inline-start: 3px solid var(--kk-warning-border, var(--kk-border-strong));
}

.profile__card--quiet[b-k4pei5m6t7] {
    background: var(--kk-surface-tinted);
}

.profile__title[b-k4pei5m6t7] {
    margin: 0;
    font-size: var(--kk-text-lg);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.profile__lede[b-k4pei5m6t7] {
    margin: 0;
    max-width: 62ch;
    font-size: var(--kk-text-sm);
    line-height: 1.55;
    color: var(--kk-text-muted);
}

.profile__caution[b-k4pei5m6t7] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-3);

    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);

    font-size: var(--kk-text-sm);
    line-height: 1.5;
}

.profile__caution svg[b-k4pei5m6t7] {
    flex: 0 0 auto;
    margin-block-start: 0.1rem;
}

.profile__empty[b-k4pei5m6t7] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.profile__add[b-k4pei5m6t7] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--kk-space-3);
}

.profile__add .kk-field[b-k4pei5m6t7] {
    flex: 1 1 14rem;
    margin: 0;
}

/* ---- chips ---- */

.chips[b-k4pei5m6t7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.chip[b-k4pei5m6t7] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    padding: var(--kk-space-2) var(--kk-space-3);

    background: var(--kk-bg-sunken);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);

    font-size: var(--kk-text-sm);
}

.chip--safety[b-k4pei5m6t7] {
    background: var(--kk-warning-soft, var(--kk-bg-sunken));
    border-color: var(--kk-warning-border, var(--kk-border));
}

.chip__label[b-k4pei5m6t7] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--kk-space-1);
}

.chip__kind[b-k4pei5m6t7] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-subtle);
}

.chip__warn[b-k4pei5m6t7] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
}

.chip__remove[b-k4pei5m6t7] {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;

    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--kk-text-subtle);
    cursor: pointer;
}

.chip__remove:hover[b-k4pei5m6t7] {
    background: var(--kk-surface);
    color: var(--kk-text);
}

/* ---- option groups ---- */

.options[b-k4pei5m6t7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.option[b-k4pei5m6t7] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    padding: var(--kk-space-2) var(--kk-space-3);

    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);

    font-size: var(--kk-text-sm);
    cursor: pointer;
}

.option:hover[b-k4pei5m6t7] {
    background: var(--kk-surface-tinted);
}

.option:has(input:checked)[b-k4pei5m6t7] {
    background: var(--kk-accent-soft);
    border-color: var(--kk-accent-border);
    color: var(--kk-accent-text);
}

.option:has(input:focus-visible)[b-k4pei5m6t7] {
    outline: var(--kk-focus-ring);
    outline-offset: var(--kk-focus-ring-offset);
}

.profile__actions[b-k4pei5m6t7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

/* The reset confirmation. Quiet, because it is a question and not an alarm. */
.profile__confirm[b-k4pei5m6t7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3);

    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);

    font-size: var(--kk-text-sm);
}
/* /Features/Settings/Components/PeopleView.razor.rz.scp.css */
/*
    People.

    Four cards, one concept each, with real space between them so nothing reads as a
    continuation of the section above. Rows share one three-column shape — avatar, body,
    trail — matching the settings hub, so a row here is recognisably the same object.
*/

.people[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;

    /* 32px. Enough that the four concepts are obviously four things. */
    gap: var(--kk-space-8);
}

/* ------------------------------------------------------------------ cards */

.card[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
    padding: var(--kk-space-5);

    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
}

.card__head[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
}

.card__title[b-6x2zxmxvpf] {
    margin: 0;
    font-size: var(--kk-text-lg);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.card__lede[b-6x2zxmxvpf] {
    margin: 0;
    max-width: 60ch;
    font-size: var(--kk-text-sm);
    line-height: 1.5;
    color: var(--kk-text-muted);
}

.card__note[b-6x2zxmxvpf] {
    margin: 0;
    max-width: 68ch;
    font-size: var(--kk-text-sm);
    line-height: 1.5;
    color: var(--kk-text-subtle);
}

.card__empty[b-6x2zxmxvpf] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-subtle);
}

.card__actions[b-6x2zxmxvpf] {
    display: flex;
    gap: var(--kk-space-2);
}

/* ------------------------------------------------------------------- rows */

/*
    A bordered group with separators rather than free-floating cards: members and
    invitations are homogeneous lists, and a border per row would be a lot of boxes.
*/
.rows[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;

    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    overflow: hidden;
}

.rows > * + *[b-6x2zxmxvpf] {
    border-top: var(--kk-border-subtle-line);
}

/* Avatar | identity | badges and actions. The trail never wraps under the body. */
.prow[b-6x2zxmxvpf] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    min-height: 3.5rem;
}

.avatar[b-6x2zxmxvpf] {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;

    border-radius: 50%;
    background: var(--kk-accent-soft);
    color: var(--kk-accent-text);

    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-semibold);
    letter-spacing: 0.02em;
}

/* An invitation is not a person, so its marker is not a coloured initial. */
.avatar--quiet[b-6x2zxmxvpf] {
    background: var(--kk-bg-sunken);
    color: var(--kk-text-subtle);
}

.prow__body[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-inline-size: 0;
}

.prow__name[b-6x2zxmxvpf] {
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
    line-height: 1.35;

    /* An email address wraps rather than pushing the badges off the row. */
    overflow-wrap: anywhere;
}

.prow__meta[b-6x2zxmxvpf] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* The token suffix. Quiet, and only rendered when there is more than one to tell apart. */
.prow__hint[b-6x2zxmxvpf] {
    font-size: var(--kk-text-xs);
    color: var(--kk-text-subtle);
    font-variant-numeric: tabular-nums;
}

.prow__trail[b-6x2zxmxvpf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--kk-space-2);
}

/* ---------------------------------------------------- created invitation */

/*
    Visually a notice, not a list item. Tinted and accent-edged so it cannot be mistaken
    for one of the pending rows below it.
*/
.created[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-5);

    background: var(--kk-accent-soft);
    border: 1px solid var(--kk-accent-border);
    border-radius: var(--kk-radius-lg);
}

.created__head[b-6x2zxmxvpf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kk-space-3);
}

.created__title[b-6x2zxmxvpf] {
    margin: 0;
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.created__dismiss[b-6x2zxmxvpf] {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;

    border: 0;
    border-radius: var(--kk-radius-sm);
    background: transparent;
    color: var(--kk-text-muted);
    cursor: pointer;
}

.created__dismiss:hover[b-6x2zxmxvpf] {
    background: var(--kk-surface);
    color: var(--kk-text);
}

.created__line[b-6x2zxmxvpf] {
    margin: 0;
    max-width: 68ch;
    font-size: var(--kk-text-sm);
    line-height: 1.5;
    color: var(--kk-text);
}

.created__line--warn[b-6x2zxmxvpf] {
    color: var(--kk-text-muted);
}

.created__linkrow[b-6x2zxmxvpf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.created__link[b-6x2zxmxvpf] {
    flex: 1 1 18rem;
    min-inline-size: 0;
    font-size: var(--kk-text-sm);
    background: var(--kk-surface);
}

/* ------------------------------------------------------------ invite form */

.form[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);

    /* Controls stay a comfortable width instead of stretching the full card. */
    max-width: 34rem;
}

.form .kk-field[b-6x2zxmxvpf] {
    margin: 0;
}

.form__roles[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    margin: 0;
    border: 0;
    padding: 0;
}

.rolepick[b-6x2zxmxvpf] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3);

    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    cursor: pointer;
}

.rolepick:hover[b-6x2zxmxvpf] {
    background: var(--kk-surface-tinted);
}

.rolepick:has(input:checked)[b-6x2zxmxvpf] {
    background: var(--kk-accent-soft);
    border-color: var(--kk-accent-border);
}

.rolepick:has(input:focus-visible)[b-6x2zxmxvpf] {
    outline: var(--kk-focus-ring);
    outline-offset: var(--kk-focus-ring-offset);
}

.rolepick__text[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.rolepick__name[b-6x2zxmxvpf] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.rolepick__hint[b-6x2zxmxvpf] {
    font-size: var(--kk-text-sm);
    line-height: 1.45;
    color: var(--kk-text-muted);
}

.form__actions[b-6x2zxmxvpf] {
    display: flex;
}

/* ------------------------------------------------------------ empty state */

.empty[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kk-space-2);
    padding: var(--kk-space-8) var(--kk-space-4);

    border: 1px dashed var(--kk-border);
    border-radius: var(--kk-radius-md);
    text-align: center;
}

.empty__icon[b-6x2zxmxvpf] {
    color: var(--kk-text-subtle);
}

.empty__title[b-6x2zxmxvpf] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/* ---------------------------------------------------------------- history */

/* Folded away and visually quiet. It is a record, not a task. */
.history[b-6x2zxmxvpf] {
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface-tinted);
}

.history__summary[b-6x2zxmxvpf] {
    padding: var(--kk-space-3) var(--kk-space-4);
    cursor: pointer;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-muted);
    list-style-position: inside;
}

.history__summary:focus-visible[b-6x2zxmxvpf] {
    outline: var(--kk-focus-ring);
    outline-offset: calc(var(--kk-focus-ring-offset) * -1);
}

.history__body[b-6x2zxmxvpf] {
    display: flex;
    flex-direction: column;
    border-top: var(--kk-border-subtle-line);
}

.hrow[b-6x2zxmxvpf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--kk-space-1) var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    font-size: var(--kk-text-sm);
}

.hrow + .hrow[b-6x2zxmxvpf] {
    border-top: var(--kk-border-subtle-line);
}

.hrow__what[b-6x2zxmxvpf] {
    grid-column: 1;
    color: var(--kk-text-muted);
}

.hrow__meta[b-6x2zxmxvpf] {
    grid-column: 1;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-subtle);
}

.hrow > .kk-badge[b-6x2zxmxvpf] {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 599.98px) {
    .people[b-6x2zxmxvpf] {
        gap: var(--kk-space-6);
    }

    .card[b-6x2zxmxvpf] {
        padding: var(--kk-space-4);
        gap: var(--kk-space-3);
    }

    /*
        The trail moves under the identity rather than competing with it for width. The
        avatar keeps its own column, so a wrapped email still reads as belonging to that
        person, and badges cannot collide with the name.
    */
    .prow[b-6x2zxmxvpf] {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: var(--kk-space-2);
    }

    .prow__trail[b-6x2zxmxvpf] {
        grid-column: 2;
        justify-content: flex-start;
    }

    .created[b-6x2zxmxvpf],
    .empty[b-6x2zxmxvpf] {
        padding: var(--kk-space-4);
    }

    .created__link[b-6x2zxmxvpf] {
        flex: 1 1 100%;
    }
}


/* ---- touch and wrapping ----

   Row actions are pressed rarely but they still have to be pressable, and an email
   address is the longest unbreakable string on this screen. */

.card .kk-btn[b-6x2zxmxvpf],
.prow .kk-btn[b-6x2zxmxvpf] {
    min-height: var(--kk-touch-target);
}

.prow__email[b-6x2zxmxvpf],
.prow__name[b-6x2zxmxvpf],
.prow__secondary[b-6x2zxmxvpf] {
    overflow-wrap: anywhere;
}

@media (max-width: 599.98px) {
    /* Full-width actions rather than two half-width buttons with truncated labels. */
    .prow__trail .kk-btn[b-6x2zxmxvpf] {
        flex: 1 1 10rem;
        justify-content: center;
    }
}
/* /Features/Settings/Components/SettingsHubView.razor.rz.scp.css */
/*
    The settings hub.

    This file did not exist until now, which is why the hub rendered as raw semantic markup:
    list bullets, underlined links, icons on their own line, chevrons below the text. The
    markup was fine; nothing was styling it.

    Everything below uses the --kk-* tokens from app.css. Any other prefix silently resolves
    to nothing, which is the second half of how the hub ended up looking unfinished.
*/

.hub[b-qse2hbmcee] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-8);
}

/* ---------------------------------------------------------------- groups */

.hub__group[b-qse2hbmcee] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
}

.hub__grouptitle[b-qse2hbmcee] {
    /* Sizing comes from .kk-section-heading in app.css; only spacing is set here. */
    margin: 0;
}

.hub__groupnote[b-qse2hbmcee] {
    margin: calc(var(--kk-space-2) * -1) 0 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

/*
    Two columns once there is genuinely room for two readable ones.

    The floor is 22rem rather than a breakpoint, so the decision is made by available width
    rather than by guessing at device sizes — a narrow window on a wide screen gets one
    column, correctly.
*/
.hub__grid[b-qse2hbmcee] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: var(--kk-space-3);
    align-items: start; /* Rows size to their own content rather than to the tallest. */
}

.hub__grid--single[b-qse2hbmcee] {
    grid-template-columns: 1fr;
}

/* Setup progress carries a badge and reads better with the full width. */
.row--wide[b-qse2hbmcee] {
    grid-column: 1 / -1;
}

@media (max-width: 47.99rem) {
    .hub[b-qse2hbmcee] {
        gap: var(--kk-space-6);
    }

    .hub__grid[b-qse2hbmcee] {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ rows */

/*
    Three stable regions: icon, body, trail. Grid rather than flex so the icon and the
    chevron stay in their own columns no matter how far the description wraps — the failure
    the old markup had was exactly this, a chevron dropping onto its own line.
*/
.row[b-qse2hbmcee] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--kk-space-4);

    padding: var(--kk-space-4) var(--kk-space-5);
    min-height: 4.25rem;

    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);

    /* Not a body-text hyperlink. The row is the affordance. */
    text-decoration: none;
    color: inherit;

    transition: background-color 120ms ease, border-color 120ms ease;
}

.row:hover[b-qse2hbmcee] {
    background: var(--kk-surface-tinted);
    border-color: var(--kk-border-strong, var(--kk-border));
    text-decoration: none;
}

/* The ring surrounds the whole row, because the whole row is the target. */
.row:focus-visible[b-qse2hbmcee] {
    outline: var(--kk-focus-ring);
    outline-offset: var(--kk-focus-ring-offset);
}

.row:active[b-qse2hbmcee] {
    background: var(--kk-bg-sunken);
}

.row--quiet[b-qse2hbmcee] {
    background: var(--kk-surface-tinted);
}

.row--quiet:hover[b-qse2hbmcee] {
    background: var(--kk-bg-sunken);
}

/* ---- icon ---- */

.row__icon[b-qse2hbmcee] {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: 0 0 auto;

    border-radius: var(--kk-radius-md);
    background: var(--kk-bg-sunken);
    color: var(--kk-text-muted);
}

.row:hover .row__icon[b-qse2hbmcee] {
    color: var(--kk-text);
}

.row--quiet .row__icon[b-qse2hbmcee] {
    background: var(--kk-surface);
}

/* ---- title and description ---- */

.row__body[b-qse2hbmcee] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-inline-size: 0; /* Lets long words wrap instead of widening the column. */
}

.row__title[b-qse2hbmcee] {
    font-size: var(--kk-text-base);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
    line-height: 1.35;
}

.row__description[b-qse2hbmcee] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    line-height: 1.45;

    /* Descriptions stay readable rather than stretching across a wide column. */
    max-inline-size: 46ch;
    text-decoration: none;
}

/* ---- badge and chevron ---- */

.row__trail[b-qse2hbmcee] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    flex: 0 0 auto;
}

.row__chevron[b-qse2hbmcee] {
    color: var(--kk-text-subtle);
    flex: 0 0 auto;
}

.row:hover .row__chevron[b-qse2hbmcee] {
    color: var(--kk-text-muted);
}

/*
    On a narrow screen a badge and a chevron side by side can crowd the text. The badge
    wraps under the title instead, which keeps the chevron where the thumb expects it and
    stops long status text colliding with it.
*/
@media (max-width: 30rem) {
    .row[b-qse2hbmcee] {
        gap: var(--kk-space-3);
        padding: var(--kk-space-3) var(--kk-space-4);
    }

    .row__icon[b-qse2hbmcee] {
        inline-size: 2.25rem;
        block-size: 2.25rem;
    }

    .row__trail[b-qse2hbmcee] {
        flex-direction: column;
        align-items: flex-end;
        gap: var(--kk-space-1);
    }
}

/* ------------------------------------------------------------------ note */

.hub__note[b-qse2hbmcee] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-4);

    background: var(--kk-surface-tinted);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);

    font-size: var(--kk-text-sm);
    line-height: 1.5;
    color: var(--kk-text-muted);
}

.hub__note svg[b-qse2hbmcee] {
    flex: 0 0 auto;
    margin-block-start: 0.1rem;
}
/* /Features/Settings/Components/SetupProgressView.razor.rz.scp.css */
.setup[b-9ihephu9b2] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.setup__lead[b-9ihephu9b2],
.setup__done[b-9ihephu9b2] {
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    line-height: 1.5;
}

.setup__done[b-9ihephu9b2] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    color: var(--kk-success, var(--kk-text));
}

.setup__list[b-9ihephu9b2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.setup__item[b-9ihephu9b2] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

.setup__marker[b-9ihephu9b2] {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--kk-border);
    color: var(--kk-surface);
}

.setup__item--done .setup__marker[b-9ihephu9b2] {
    background: var(--kk-success, var(--kk-accent));
    border-color: transparent;
}

.setup__item--skipped .setup__marker[b-9ihephu9b2] {
    color: var(--kk-text-muted);
    background: var(--kk-bg-sunken);
    border-color: transparent;
}

.setup__text[b-9ihephu9b2] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-inline-size: 0;
}

.setup__title[b-9ihephu9b2] {
    font-weight: 600;
}

.setup__hint[b-9ihephu9b2],
.setup__state[b-9ihephu9b2] {
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    line-height: 1.4;
}

.setup__state[b-9ihephu9b2] {
    font-size: var(--kk-text-xs);
}

.setup__go[b-9ihephu9b2] {
    white-space: nowrap;
}

.setup__actions[b-9ihephu9b2] {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 30rem) {
    .setup__item[b-9ihephu9b2] {
        grid-template-columns: auto 1fr;
    }

    .setup__go[b-9ihephu9b2] {
        grid-column: 2;
        justify-self: start;
    }
}
/* /Features/Shopping/Components/EstimatedCostLine.razor.rz.scp.css */
.estimate[b-d2zk1wnl4b] {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-lg);
    background: var(--kk-surface);
}

.estimate__figure[b-d2zk1wnl4b] {
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text);
}

/* Always visible, never behind a control. A range read as a quote is the failure here. */
.estimate__coverage[b-d2zk1wnl4b] {
    margin: 0;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
    line-height: 1.45;
}
/* /Features/Shopping/Components/PurchaseToPantryDialog.razor.rz.scp.css */
.buy[b-7l299ee9ow] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}

.buy__total[b-7l299ee9ow] {
    margin: 0;
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-primary-soft);
    border: 1px solid var(--kk-primary-border);
    border-radius: var(--kk-radius-md);
    color: var(--kk-primary-text);
    font-size: var(--kk-text-sm);
}
/* /Features/Shopping/Components/PutAwaySheet.razor.rz.scp.css */
/* Putting the shopping away. Built for a phone held in one hand at a kitchen counter,
   with the other hand in a bag — so every target is large and nothing needs precision. */

.away[b-m7gvtm9g7e] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.away__item[b-m7gvtm9g7e] {
    padding: var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
    background: var(--kk-surface);
}

/* Excluded, not deleted. Dimmed enough to read as "not this time" and still legible. */
.away__item--out[b-m7gvtm9g7e] {
    background: var(--kk-bg-sunken);
    opacity: 0.72;
}

.away__head[b-m7gvtm9g7e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2) var(--kk-space-3);
}

.away__include[b-m7gvtm9g7e] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    min-height: var(--kk-touch-target);
    cursor: pointer;
    flex: 1 1 auto;
}

    /* A grocery tick is pressed with a thumb, often in a hurry. */
    .away__include .kk-checkbox[b-m7gvtm9g7e] {
        width: 1.35rem;
        height: 1.35rem;
        flex: none;
    }

.away__name[b-m7gvtm9g7e] {
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text-strong);
}

.away__context[b-m7gvtm9g7e] {
    margin: var(--kk-space-1) 0 var(--kk-space-3);
    font-size: var(--kk-text-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.away__unmatched[b-m7gvtm9g7e] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: var(--kk-space-2) 0 0;
    padding: var(--kk-space-3);
    border: 1px solid var(--kk-info-border);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-info-soft);
    color: var(--kk-info);
    font-size: var(--kk-text-sm);
}

/* ---- how much, and how sure ---- */

.away__kinds[b-m7gvtm9g7e],
.away__levels[b-m7gvtm9g7e] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: var(--kk-space-3);
}

.kind[b-m7gvtm9g7e] {
    min-height: var(--kk-touch-target);
    padding: 0 var(--kk-space-4);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-surface);
    color: var(--kk-text);
    font: inherit;
    font-size: var(--kk-text-sm);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .kind:hover[b-m7gvtm9g7e] {
        border-color: var(--kk-border-strong);
        background: var(--kk-surface-tinted);
    }

    .kind:focus-visible[b-m7gvtm9g7e] {
        outline: var(--kk-focus-ring);
        outline-offset: var(--kk-focus-ring-offset);
    }

/* Selected state carries a border weight as well as colour, so it survives being
   looked at on a phone in a bright kitchen and by anybody who does not see the hue. */
.kind--on[b-m7gvtm9g7e] {
    border-color: var(--kk-primary);
    border-width: 2px;
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-weight: var(--kk-weight-semibold);
}

.away__amount[b-m7gvtm9g7e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--kk-space-3);
    margin-bottom: var(--kk-space-3);
}

.away__where[b-m7gvtm9g7e] {
    margin-bottom: var(--kk-space-3);
}

/* What will actually happen, in words, before anything is written. */
.away__result[b-m7gvtm9g7e] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    margin: 0;
    padding: var(--kk-space-2) var(--kk-space-3);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-primary-soft);
    color: var(--kk-primary-text);
    font-size: var(--kk-text-sm);
}

@media (max-width: 480px) {
    .away__item[b-m7gvtm9g7e] {
        padding: var(--kk-space-3);
    }

    .away__amount[b-m7gvtm9g7e] {
        grid-template-columns: 1fr;
        gap: var(--kk-space-2);
    }

    /* Full-width pills rather than four cramped ones per row. */
    .away__kinds .kind[b-m7gvtm9g7e],
    .away__levels .kind[b-m7gvtm9g7e] {
        flex: 1 1 45%;
    }
}

/* How much of the trolley is accounted for. A long list with no progress is a list
   somebody abandons halfway through. */
.away__progress[b-m7gvtm9g7e] {
    margin: 0 0 var(--kk-space-3);
    padding: var(--kk-space-2) var(--kk-space-3);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-bg-sunken);
    font-size: var(--kk-text-sm);
}

/* Two review cards side by side once there is room for both to stay readable. Never on a
   phone, and never so many that this becomes a spreadsheet. */
@media (min-width: 900px) {
    .away[b-m7gvtm9g7e] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}
/* /Features/Shopping/Components/RecipeCostPanel.razor.rz.scp.css */
.recipe-cost[b-9xboztrymy] {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    margin: var(--kk-space-3) 0 0;
}

.recipe-cost__total[b-9xboztrymy] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kk-space-2);
    margin: 0;
    font-size: var(--kk-text-sm);
    font-weight: var(--kk-weight-semibold);
    color: var(--kk-text);
}

.recipe-cost__each[b-9xboztrymy] {
    font-weight: var(--kk-weight-regular);
    color: var(--kk-text-muted);
}

/*
    The caveat, always present and never hidden behind a control. A total that reads as
    complete when it covers eight ingredients out of ten is the failure this line prevents.
*/
.recipe-cost__coverage[b-9xboztrymy] {
    margin: 0;
    font-size: var(--kk-text-xs);
    color: var(--kk-text-muted);
    line-height: 1.45;
}
/* /Features/Shopping/Components/ShoppingItemDialog.razor.rz.scp.css */
.form[b-q2j6cwg9jl] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
}
/* /Features/Shopping/Components/ShoppingListGroup.razor.rz.scp.css */
.group[b-n3waqr3tqt] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
}

.group__heading[b-n3waqr3tqt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0 var(--kk-space-1);
    font-size: var(--kk-text-xs);
    font-weight: var(--kk-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kk-text-subtle);
}

.group__count[b-n3waqr3tqt] {
    font-weight: var(--kk-weight-normal);
    letter-spacing: 0;
    text-transform: none;
}

/* No overflow:hidden here, deliberately.
 *
 * It was only ever rounding the corners of the first and last row, and it was clipping the
 * row's own three-dot menu: an absolutely positioned panel is cut off by any ancestor that
 * hides its overflow, so the lower half of the menu vanished — worst on the last row, which
 * is exactly where somebody reaches for it. The corners are rounded on the rows themselves
 * instead, which needs no clipping context at all. */
.group__items[b-n3waqr3tqt] {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
}

    .group__items > .item:first-child[b-n3waqr3tqt] {
        border-top-left-radius: var(--kk-radius-lg);
        border-top-right-radius: var(--kk-radius-lg);
    }

    .group__items > .item:last-child[b-n3waqr3tqt] {
        border-bottom-left-radius: var(--kk-radius-lg);
        border-bottom-right-radius: var(--kk-radius-lg);
    }

.item[b-n3waqr3tqt] {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
}

.item + .item[b-n3waqr3tqt] {
    border-top: var(--kk-border-subtle-line);
}

.item--done[b-n3waqr3tqt] {
    background: var(--kk-surface-tinted);
}

/* The thing somebody presses repeatedly, one-handed, walking round a shop. It gets the
   full target and it is deliberately separate from opening the item — a row that toggles
   purchased when you meant to read it is worse than one extra tap. */
.item__check[b-n3waqr3tqt] {
    display: grid;
    place-items: center;
    width: var(--kk-touch-target);
    height: var(--kk-touch-target);
    margin: -2px 0 0 calc(var(--kk-space-2) * -1);
    flex: 0 0 var(--kk-touch-target);
    cursor: pointer;
    border-radius: var(--kk-radius-sm);
}

    /* A bigger box inside a bigger target. The default 1rem checkbox is hard to hit
       accurately with a thumb. */
    .item__check .kk-checkbox[b-n3waqr3tqt] {
        width: 1.35rem;
        height: 1.35rem;
    }

    .item__check:focus-within[b-n3waqr3tqt] {
        outline: var(--kk-focus-ring);
        outline-offset: -2px;
    }

    .item__check:hover[b-n3waqr3tqt] {
        background: var(--kk-bg-sunken);
    }

.item__body[b-n3waqr3tqt] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--kk-space-2);
}

.item__title[b-n3waqr3tqt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kk-space-3);
    margin: 0;
}

.item__name[b-n3waqr3tqt] {
    font-weight: var(--kk-weight-medium);
    color: var(--kk-text-strong);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item--done .item__name[b-n3waqr3tqt] {
    text-decoration: line-through;
    color: var(--kk-text-muted);
}

.item__qty[b-n3waqr3tqt] {
    flex: 0 0 auto;
    font-size: var(--kk-text-sm);
}

.item__meta[b-n3waqr3tqt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-1) var(--kk-space-4);
    margin: 0;
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
}

.item__product[b-n3waqr3tqt],
.item__source[b-n3waqr3tqt] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
}

.item__note[b-n3waqr3tqt] {
    font-style: italic;
}

.item__done[b-n3waqr3tqt] {
    margin-top: var(--kk-space-2);
}

.item__actions[b-n3waqr3tqt] {
    display: flex;
    gap: var(--kk-space-1);
    flex: 0 0 auto;
    padding-top: var(--kk-space-1);
}

.item__action[b-n3waqr3tqt] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--kk-radius-sm);
    background: none;
    color: var(--kk-text-subtle);
    cursor: pointer;
    transition: var(--kk-transition-colors);
}

    .item__action:hover[b-n3waqr3tqt] {
        background: var(--kk-bg-sunken);
        color: var(--kk-text);
    }

.item__action--danger:hover[b-n3waqr3tqt] {
    background: var(--kk-danger-soft);
    color: var(--kk-danger);
}
/* /Features/Shopping/Components/ShoppingListView.razor.rz.scp.css */
.bar[b-cvee9h3awm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface);
    border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-lg);
}

.bar__count[b-cvee9h3awm] {
    margin: 0;
    color: var(--kk-text);
}

.bar__count strong[b-cvee9h3awm] {
    font-size: var(--kk-text-lg);
    margin-right: var(--kk-space-1);
}

.bar__done[b-cvee9h3awm] {
    color: var(--kk-text-muted);
}

.bar__actions[b-cvee9h3awm] {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
}

.bar__toggle[b-cvee9h3awm] {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-touch-target);
    font-size: var(--kk-text-sm);
    color: var(--kk-text-muted);
    cursor: pointer;
}

.aisles[b-cvee9h3awm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
}

.groups[b-cvee9h3awm] {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-5);
}

@media (max-width: 639.98px) {
    .bar[b-cvee9h3awm] {
        flex-direction: column;
        align-items: stretch;
    }

    .bar__actions[b-cvee9h3awm] {
        justify-content: space-between;
    }

    .aisles[b-cvee9h3awm] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--kk-space-1);
        scrollbar-width: none;
    }

        .aisles[b-cvee9h3awm]::-webkit-scrollbar {
            display: none;
        }
}
/* /Features/Shopping/Components/VoiceQuickAdd.razor.rz.scp.css */
.voice[b-h28kbe8wbs] { display: flex; flex-direction: column; gap: var(--kk-space-4); }

.voice__unsupported[b-h28kbe8wbs] {
    display: flex; gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface-tinted); border: var(--kk-border-hairline);
    border-radius: var(--kk-radius-md);
}

.voice__unsupported p[b-h28kbe8wbs] { margin: 0; }
.voice__unsupportedtitle[b-h28kbe8wbs] { font-weight: var(--kk-weight-semibold); color: var(--kk-text-strong); }

.voice__control[b-h28kbe8wbs] { display: flex; flex-direction: column; align-items: center; gap: var(--kk-space-2); }
.voice__control .kk-btn--lg[b-h28kbe8wbs] { min-height: 3.25rem; min-width: 14rem; }
.voice__status[b-h28kbe8wbs] { margin: 0; font-size: var(--kk-text-sm); color: var(--kk-text-muted); text-align: center; }

.voice__text[b-h28kbe8wbs] { min-height: 7rem; }

.voice__list[b-h28kbe8wbs] {
    display: flex; flex-direction: column; gap: var(--kk-space-2);
    margin: 0; padding: 0; list-style: none;
}

.voice__item[b-h28kbe8wbs] {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    background: var(--kk-surface); border: 1px solid var(--kk-border-strong);
    border-radius: var(--kk-radius-md);
}

.voice__item--skipped[b-h28kbe8wbs] { opacity: 0.6; }
.voice__what[b-h28kbe8wbs] { flex: 1 1 10rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.voice__name[b-h28kbe8wbs] { margin: 0; font-weight: var(--kk-weight-medium); color: var(--kk-text-strong); }

.voice__heard[b-h28kbe8wbs] {
    display: flex; flex-wrap: wrap; gap: var(--kk-space-2); margin: 0;
    font-size: var(--kk-text-sm); color: var(--kk-text-muted);
}

.voice__heardtext[b-h28kbe8wbs] { font-style: italic; }
.voice__manual[b-h28kbe8wbs] { color: var(--kk-text-subtle); }
.voice__amount[b-h28kbe8wbs] { font-variant-numeric: tabular-nums; color: var(--kk-text-muted); }