/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5uf0sr4zor],
.components-reconnect-repeated-attempt-visible[b-5uf0sr4zor],
.components-reconnect-failed-visible[b-5uf0sr4zor],
.components-pause-visible[b-5uf0sr4zor],
.components-resume-failed-visible[b-5uf0sr4zor],
.components-rejoining-animation[b-5uf0sr4zor] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Auth/AuthLayout.razor.rz.scp.css */
/* Anonymous pages (/login, /logout, /brak-dostepu).
   Tokens come from wwwroot/app.css - no new colours are invented here (SPEC 10.2). */

.auth-shell[b-sqnjnn20re] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-lg);
    min-height: 100dvh;
    padding: calc(var(--gap-xl) + var(--safe-top)) calc(var(--gap-lg) + var(--safe-right))
             calc(var(--gap-xl) + var(--safe-bottom)) calc(var(--gap-lg) + var(--safe-left));
    background: var(--color-bg);
}

.auth-brand[b-sqnjnn20re] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--gap-lg);
}

.auth-brand__mark[b-sqnjnn20re] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--color-accent);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
}

.auth-brand__name[b-sqnjnn20re] {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.auth-card[b-sqnjnn20re] {
    width: 100%;
    max-width: 26rem;
    padding: var(--gap-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-1);
}

/* ---------------------------------------------------------------------------
   Shared page content. ::deep, because the markup below belongs to the page
   component rendered into @Body, not to this component.
   --------------------------------------------------------------------------- */

.auth-card[b-sqnjnn20re]  h1 {
    margin: 0 0 var(--gap-xs);
    font-size: 1.35rem;
}

.auth-card[b-sqnjnn20re]  h2 {
    margin: var(--gap-xl) 0 var(--gap-sm);
    font-size: 1rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.auth-card[b-sqnjnn20re]  .auth-lead {
    margin: 0 0 var(--gap-lg);
    color: var(--color-text-muted);
}

.auth-card[b-sqnjnn20re]  form {
    margin: 0;
}

/* Sign in with Google - white surface, coloured logo, 56 px tall. */
.auth-card[b-sqnjnn20re]  .auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    width: 100%;
    min-height: 56px;
    padding: 10px 18px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 650;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.auth-card[b-sqnjnn20re]  .auth-google:active {
    transform: translateY(1px);
    background: var(--color-surface-2);
}

.auth-card[b-sqnjnn20re]  .auth-google__logo {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

/* Notice used for "Google not configured yet" and for the access-denied reason. */
.auth-card[b-sqnjnn20re]  .auth-notice {
    padding: var(--gap-md);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-sm);
    background: var(--color-warning-bg);
    color: var(--color-text);
}

.auth-card[b-sqnjnn20re]  .auth-notice--danger {
    border-left-color: var(--color-danger);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.auth-card[b-sqnjnn20re]  .auth-notice p:last-child,
.auth-card[b-sqnjnn20re]  .auth-notice ol:last-child,
.auth-card[b-sqnjnn20re]  .auth-notice ul:last-child {
    margin-bottom: 0;
}

.auth-card[b-sqnjnn20re]  .auth-steps {
    margin: var(--gap-sm) 0 0;
    padding-left: 1.2rem;
}

.auth-card[b-sqnjnn20re]  .auth-steps li {
    margin-bottom: var(--gap-xs);
}

.auth-card[b-sqnjnn20re]  code {
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--color-surface-2);
    font-size: .86rem;
    word-break: break-all;
}

/* Development sign-in: one row per member, 56 px, whole row is the target. */
.auth-card[b-sqnjnn20re]  .auth-members {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-card[b-sqnjnn20re]  .auth-member {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    width: 100%;
    min-height: var(--row-height);
    padding: var(--gap-sm) var(--gap-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.auth-card[b-sqnjnn20re]  .auth-member:active {
    background: var(--color-surface-2);
}

.auth-card[b-sqnjnn20re]  .auth-member__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-card[b-sqnjnn20re]  .auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-top: var(--gap-lg);
}

.auth-card[b-sqnjnn20re]  .auth-hint {
    margin: var(--gap-md) 0 0;
    color: var(--color-text-muted);
    font-size: .84rem;
}
/* /Components/Pages/Calendar/CalendarFilterBar.razor.rz.scp.css */
/* CalendarFilterBar - one horizontally scrolling row of chips (SPEC 8, 10.4.3). */

.filter[b-ysqfosexx6] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-md);
    padding-bottom: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter[b-ysqfosexx6]::-webkit-scrollbar {
    display: none;
}

.filter__all[b-ysqfosexx6] {
    flex: 0 0 auto;
    min-height: var(--touch-min);
    font-weight: 650;
}

/* ::deep is required: MemberChip renders with its OWN isolation scope. */
.filter[b-ysqfosexx6]  .chip {
    flex: 0 0 auto;
}
/* /Components/Pages/Calendar/CalendarPage.razor.rz.scp.css */
/* /kalendarz - agenda (SPEC 8). Colours and tokens come from app.css. */

.view-switch[b-2gxezy951a] {
    margin-bottom: var(--gap-md);
}

/* The switch is built from a <span> and an <a>, not from <button>s: only a button
   centres its own label, so the shared .segmented__item needs the alignment spelled
   out here or both captions land in the top-left corner of their segment. */
.segmented__item[b-2gxezy951a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--gap-sm);
    text-align: center;
    text-decoration: none;
}

.segmented__item:hover[b-2gxezy951a] {
    text-decoration: none;
}

.day[b-2gxezy951a] {
    margin-bottom: var(--gap-lg);
}

.day__head[b-2gxezy951a] {
    margin: 0 0 var(--gap-sm);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.day__rows[b-2gxezy951a] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.agenda__error[b-2gxezy951a] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding: var(--gap-lg);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.agenda__error p[b-2gxezy951a] {
    margin: 0;
}
/* /Components/Pages/Calendar/CalendarWeek.razor.rz.scp.css */
/* /kalendarz/tydzien - seven day sections as a list (SPEC 8). */

.view-switch[b-ahbti0fkee] {
    margin-bottom: var(--gap-md);
}

/* The switch is built from a <span> and an <a>, not from <button>s: only a button
   centres its own label, so the shared .segmented__item needs the alignment spelled
   out here or both captions land in the top-left corner of their segment. */
.segmented__item[b-ahbti0fkee] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--gap-sm);
    text-align: center;
    text-decoration: none;
}

.segmented__item:hover[b-ahbti0fkee] {
    text-decoration: none;
}

.week__rows[b-ahbti0fkee] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: var(--gap-sm) var(--gap-md) var(--gap-md);
}

.week__empty[b-ahbti0fkee] {
    margin: 0;
    padding: var(--gap-md);
    color: var(--color-text-muted);
    font-size: .9rem;
}

.week__add[b-ahbti0fkee] {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0 var(--gap-sm);
    color: var(--color-accent);
    font-weight: 650;
    text-decoration: none;
}

.week__error[b-ahbti0fkee] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding: var(--gap-lg);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.week__error p[b-ahbti0fkee] {
    margin: 0;
}
/* /Components/Pages/Calendar/EditScopeSheet.razor.rz.scp.css */
/* EditScopeSheet - three 56 px rows (SPEC 8, 10.4.2). Shell comes from .sheet in app.css. */

.scope__grip[b-tsoyko0w2z] {
    width: 40px;
    height: 4px;
    margin: 0 auto var(--gap-md);
    border-radius: 999px;
    background: var(--color-border-strong);
}

.scope__title[b-tsoyko0w2z] {
    margin: 0 0 var(--gap-xs);
}

.scope__lead[b-tsoyko0w2z] {
    margin: 0 0 var(--gap-md);
    color: var(--color-text-muted);
    font-size: .9rem;
}

.scope__rows[b-tsoyko0w2z] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--gap-md);
}

.scope__row[b-tsoyko0w2z] {
    gap: var(--gap-md);
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
}

.scope__row:last-child[b-tsoyko0w2z] {
    border-bottom: 0;
}

.scope__text[b-tsoyko0w2z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--gap-sm) 0;
}

.scope__name[b-tsoyko0w2z] {
    font-weight: 650;
}

.scope__hint[b-tsoyko0w2z] {
    font-size: .82rem;
    color: var(--color-text-muted);
}

.scope__icon[b-tsoyko0w2z] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
}

.scope__cancel[b-tsoyko0w2z] {
    width: 100%;
}
/* /Components/Pages/Calendar/EventDetail.razor.rz.scp.css */
/* /kalendarz/zdarzenie/{id} (SPEC 8). */

.detail__when[b-lsdm0u6zoz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--gap-sm);
}

.detail__date[b-lsdm0u6zoz] {
    font-size: 1.05rem;
    font-weight: 700;
}

.detail__time[b-lsdm0u6zoz] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-weight: 650;
}

.detail__calendar[b-lsdm0u6zoz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0 0 var(--gap-md);
}

.detail__mark[b-lsdm0u6zoz] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.detail__row[b-lsdm0u6zoz] {
    margin: 0 0 var(--gap-sm);
}

/* "Kogo dotyczy" - static MemberChips, wrapping instead of scrolling: on a 360 px
   screen a participant hidden off-canvas is a participant nobody reads. */
.detail__who[b-lsdm0u6zoz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
}

.detail__label[b-lsdm0u6zoz] {
    display: block;
    margin-bottom: 2px;
    font-size: .8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--color-text-muted);
}

.detail__notes[b-lsdm0u6zoz] {
    overflow-wrap: anywhere;
}

.detail__muted[b-lsdm0u6zoz] {
    margin: 0 0 var(--gap-sm);
    color: var(--color-text-muted);
}

.detail__dates[b-lsdm0u6zoz] {
    margin: 0 0 var(--gap-sm);
    padding-left: var(--gap-lg);
    color: var(--color-text);
}

.detail__dates li[b-lsdm0u6zoz] {
    margin-bottom: 2px;
}

/* Stacked full-width actions: one thumb, no horizontal hunting (SPEC 10.4.3) */
.detail__actions[b-lsdm0u6zoz] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-top: var(--gap-lg);
}

.detail__actions a.btn[b-lsdm0u6zoz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
/* /Components/Pages/Calendar/EventEdit.razor.rz.scp.css */
/* /kalendarz/nowe, /kalendarz/zdarzenie/{id}/edytuj (SPEC 8, 10.4.4-10.4.5). */

/* "Wpis trafi do zatwierdzenia przez rodzica." (SPEC 10.1) */
.notice[b-eq42s5s8ra] {
    margin: 0 0 var(--gap-md);
    padding: var(--gap-md);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: .9rem;
    font-weight: 650;
}

.notice--info[b-eq42s5s8ra] {
    border-color: var(--color-info);
    background: var(--color-info-bg);
    color: var(--color-info);
}

.field--row[b-eq42s5s8ra] {
    margin-bottom: var(--gap-lg);
}

/* 44 px target: the whole label toggles the checkbox (SPEC 10.4.3) */
.switch[b-eq42s5s8ra] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    min-height: var(--touch-min);
    cursor: pointer;
}

.switch__label[b-eq42s5s8ra] {
    font-weight: 650;
}

.times[b-eq42s5s8ra] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-md);
}

.sticky-actions .grow[b-eq42s5s8ra] {
    flex: 1 1 auto;
}

/* The "Anuluj" link has to look and measure like the button next to it */
.sticky-actions a[b-eq42s5s8ra] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* RODZAJ - three shared buckets instead of the old list of eleven calendars.
   Three segments on a 360 px screen leave about 98 px each, so the longest caption
   ("Dodatkowe") still fits without shrinking the 44 px touch target. */
.kind[b-eq42s5s8ra] {
    margin-top: 6px;
}

/* KOGO DOTYCZY - "Cała rodzina" sits ABOVE the chips: it is the answer that clears
   the row below, not one more member. */
.who[b-eq42s5s8ra] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
    margin-top: 6px;
}

.who__all[b-eq42s5s8ra] {
    flex: 0 0 auto;
    font-weight: 650;
}

/* Wrapping, never a horizontal scroller: on a 360 px screen a hidden chip is a
   member nobody can pick (SPEC 10.4.3). Each chip keeps its 44 px height from
   the shared .chip rule. */
.who__chips[b-eq42s5s8ra] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    width: 100%;
}

/* ::deep is required: MemberChip renders with its OWN isolation scope. */
.who__chips[b-eq42s5s8ra]  .chip {
    max-width: 100%;
}

.who__hint[b-eq42s5s8ra] {
    margin: var(--gap-sm) 0 0;
    color: var(--color-text-muted);
}
/* /Components/Pages/Calendar/OccurrenceRow.razor.rz.scp.css */
/* OccurrenceRow - 56 px row, whole row is the target (SPEC 10.4.3). */

.occ[b-rutxhb18lu] {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
    min-height: var(--row-height);
    padding: var(--gap-sm) var(--gap-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--member-color, var(--color-family));
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.occ:hover[b-rutxhb18lu] {
    text-decoration: none;
}

.occ:active[b-rutxhb18lu] {
    background: var(--color-surface-2, var(--color-bg));
}

.occ__time[b-rutxhb18lu] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 3.4rem;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

.occ__from[b-rutxhb18lu] {
    font-weight: 700;
}

.occ__to[b-rutxhb18lu],
.occ__allday[b-rutxhb18lu] {
    font-size: .8rem;
    color: var(--color-text-muted);
}

.occ__allday[b-rutxhb18lu] {
    font-weight: 650;
}

.occ__body[b-rutxhb18lu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.occ__title[b-rutxhb18lu] {
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.occ__meta[b-rutxhb18lu] {
    font-size: .84rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.occ__marks[b-rutxhb18lu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-xs);
    margin-top: 2px;
}

/* "Seria" / "Przeniesione" - a word, never just an icon (SPEC 10.2) */
.occ__mark[b-rutxhb18lu] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

/* Participant initials - the second, non-colour carrier of "kogo to dotyczy"
   (SPEC 10.2). Three overlapping 24 px avatars cost about 56 px of a 360 px row,
   so the title keeps its width. */
.occ__who[b-rutxhb18lu] {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    padding-top: 2px;
}

.occ__avatars[b-rutxhb18lu] {
    display: flex;
    align-items: center;
}

/* The overlap is what keeps three people inside 56 px; the ring around the avatar
   (MemberAvatar) still separates two similar colours. */
.occ__avatars[b-rutxhb18lu]  .member-avatar + .member-avatar {
    margin-left: -7px;
}

.occ__more[b-rutxhb18lu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-left: 2px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-surface-2, var(--color-bg));
    color: var(--color-text-muted);
    font-size: .7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* "Rodzina" - ONE marker for an entry that names nobody, never five avatars. */
.occ__family[b-rutxhb18lu] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}
/* /Components/Pages/Calendar/WeekStrip.razor.rz.scp.css */
/* WeekStrip - seven 44 px circles (SPEC 8, 10.4.3). Colours come from app.css. */

.strip[b-8rihpa7klz] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-md);
}

.strip__head[b-8rihpa7klz] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.strip__range[b-8rihpa7klz] {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 650;
    color: var(--color-text);
}

.strip__nav[b-8rihpa7klz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.strip__icon[b-8rihpa7klz] {
    width: 20px;
    height: 20px;
}

.strip__days[b-8rihpa7klz] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--gap-xs);
}

.strip__day[b-8rihpa7klz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 4px 0 2px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.strip__name[b-8rihpa7klz] {
    font-size: .68rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.strip__number[b-8rihpa7klz] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Today keeps the orange outline of the whole application (SPEC 10.2) */
.strip__day--today[b-8rihpa7klz] {
    border-color: var(--color-warning);
}

.strip__day--on[b-8rihpa7klz] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.strip__day--on .strip__name[b-8rihpa7klz] {
    color: #fff;
}

/* The dot is the second carrier of "coś tu jest", next to the colour (SPEC 10.2) */
.strip__dot[b-8rihpa7klz] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: transparent;
}

.strip__dot--on[b-8rihpa7klz] {
    background: var(--color-accent);
}

.strip__day--on .strip__dot--on[b-8rihpa7klz] {
    background: #fff;
}

.strip__today[b-8rihpa7klz] {
    align-self: center;
    min-height: var(--touch-min);
    padding: 0 var(--gap-md);
    border: 0;
    background: transparent;
    color: var(--color-accent);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}
/* /Components/Pages/Chores/ChoreBoardPage.razor.rz.scp.css */
/* /zadania - the chores board (SPEC 8, 10.2).
   Only tokens from app.css; nothing is added to the global stylesheet. */

.chore-filter[b-8mm4quuide] {
    margin-bottom: var(--gap-md);
}

.chore-filter__chips[b-8mm4quuide] {
    /* One thumb, one row: the chips scroll sideways instead of wrapping into
       a wall that pushes the first chore off the screen. */
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--gap-xs);
    scrollbar-width: none;
}

.chore-filter__chips[b-8mm4quuide]::-webkit-scrollbar {
    display: none;
}

.chore-filter__tabs[b-8mm4quuide] {
    width: 100%;
}

.chore-section[b-8mm4quuide] {
    margin-bottom: var(--gap-lg);
}

.chore-section__heading[b-8mm4quuide] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin: 0 calc(var(--gap-lg) * -1) var(--gap-sm);
    border-radius: 0;
}

.chore-section__count[b-8mm4quuide] {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.chore-section__items[b-8mm4quuide] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.chore-section__more[b-8mm4quuide] {
    margin-top: var(--gap-sm);
}

/* "Po terminie" - the section itself is red, exactly as in SPEC 8.
   The heading still carries the word, so the colour is never alone. */
.chore-section--overdue .chore-section__heading[b-8mm4quuide] {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.chore-section--waiting .chore-section__heading[b-8mm4quuide] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.chore-section--done .chore-section__heading[b-8mm4quuide] {
    background: var(--color-success-bg);
    color: var(--color-success);
}
/* /Components/Pages/Chores/ChoreCard.razor.rz.scp.css */
/* ChoreCard - one occurrence on the /zadania board (SPEC 8, 10.2, 10.4).
   Tokens only; nothing is added to app.css. */

.chore-card[b-9efz92e02e] {
    overflow: hidden;
}

.chore-card__main[b-9efz92e02e] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: var(--gap-md) var(--gap-lg);
    color: inherit;
    text-decoration: none;
    /* The whole upper part is the touch target, not just the title (SPEC 10.4.3). */
    min-height: var(--row-height);
}

.chore-card__main:hover[b-9efz92e02e] {
    text-decoration: none;
}

.chore-card__main:active[b-9efz92e02e] {
    background: var(--color-surface-2);
}

.chore-card__head[b-9efz92e02e] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

.chore-card__title[b-9efz92e02e] {
    margin: 0;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.chore-card__meta[b-9efz92e02e] {
    margin: 2px 0 0;
    color: var(--color-text-muted);
}

.chore-card__note[b-9efz92e02e] {
    margin: 0;
    padding: var(--gap-sm) var(--gap-md);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
}

.chore-card__actions[b-9efz92e02e] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: 0 var(--gap-lg) var(--gap-md);
}

.chore-card__secondary[b-9efz92e02e] {
    justify-content: center;
    width: 100%;
    text-decoration: none;
}

.chore-card__secondary:hover[b-9efz92e02e] {
    text-decoration: none;
}

/* Overdue: red background comes from .is-overdue in app.css - here we only make sure
   the muted meta line stays readable on it. */
.chore-card--overdue .chore-card__meta[b-9efz92e02e],
.chore-card--overdue .chore-card__title[b-9efz92e02e] {
    color: var(--color-danger-fg);
}

.chore-card--overdue .chore-card__note[b-9efz92e02e] {
    background: var(--color-surface);
}

/* Done: greyed out and struck through, still readable (SPEC 10.2). */
.chore-card--done[b-9efz92e02e] {
    opacity: .78;
}

.chore-card--done .chore-card__title[b-9efz92e02e] {
    color: var(--color-done);
    text-decoration: line-through;
}
/* /Components/Pages/Chores/ChoreDetail.razor.rz.scp.css */
/* /zadania/{id} - one chore in detail (SPEC 8, 10.2).
   Tokens only; app.css stays untouched. */

.chore-detail[b-lo1qmei688] {
    padding-bottom: var(--gap-lg);
}

.chore-detail__archived[b-lo1qmei688] {
    padding: var(--gap-md) var(--gap-lg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}

.chore-detail__facts[b-lo1qmei688] {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: var(--gap-sm) var(--gap-md);
    margin: 0;
    align-items: center;
}

.chore-detail__facts dt[b-lo1qmei688] {
    color: var(--color-text-muted);
    font-size: .86rem;
    font-weight: 650;
}

.chore-detail__facts dd[b-lo1qmei688] {
    margin: 0;
    min-width: 0;
}

.chore-detail__note[b-lo1qmei688] {
    margin: var(--gap-sm) 0 0;
    padding: var(--gap-sm) var(--gap-md);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}

.chore-detail__report[b-lo1qmei688] {
    margin-top: var(--gap-md);
    margin-bottom: var(--gap-sm);
}

/* SPEC 10.1: the sentence every child sees under a form that needs approval. */
.chore-detail__hint[b-lo1qmei688] {
    margin: 0 0 var(--gap-sm);
    padding: var(--gap-sm) var(--gap-md);
    border-radius: var(--radius-sm);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: .88rem;
    font-weight: 600;
}

.chore-detail__occurrence[b-lo1qmei688] {
    gap: var(--gap-md);
}

.chore-detail__occurrence--on[b-lo1qmei688] {
    background: var(--color-accent-soft);
}

.chore-detail__occurrence-date[b-lo1qmei688] {
    display: block;
    font-weight: 650;
}

.chore-detail__history[b-lo1qmei688] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    padding: var(--gap-md) var(--gap-lg);
    border-bottom: 1px solid var(--color-border);
}

.chore-detail__history:last-child[b-lo1qmei688] {
    border-bottom: 0;
}

.chore-detail__history-date[b-lo1qmei688] {
    font-weight: 650;
}

.chore-detail__history-note[b-lo1qmei688] {
    margin: 0;
}

.chore-detail__parent[b-lo1qmei688] {
    display: flex;
    gap: var(--gap-sm);
    margin-top: var(--gap-lg);
}

.chore-detail__parent-button[b-lo1qmei688] {
    flex: 1 1 0;
    justify-content: center;
    text-decoration: none;
}

.chore-detail__parent-button:hover[b-lo1qmei688] {
    text-decoration: none;
}
/* /Components/Pages/Chores/ChoreEdit.razor.rz.scp.css */
/* /zadania/nowe and /zadania/{id}/edytuj (SPEC 8, 10.4).
   Only tokens from app.css - the form invents no colours and no sizes. */

.chore-edit[b-758jw862vz] {
    padding-bottom: var(--gap-lg);
}

/* Four shortcuts instead of opening a picker (SPEC 10.4.9). */
.chore-edit__shortcuts[b-758jw862vz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

.chore-edit__shortcut[b-758jw862vz] {
    /* Every shortcut stays a full touch target even when the label is short. */
    min-width: 88px;
    justify-content: center;
}

.chore-edit__date[b-758jw862vz] {
    margin-top: var(--gap-sm);
}

.chore-edit__hint[b-758jw862vz] {
    margin: var(--gap-xs) 0 0;
}

.chore-edit__time[b-758jw862vz] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.chore-edit__clear[b-758jw862vz] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.chore-edit__switch[b-758jw862vz] {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
    min-height: var(--touch-min);
    padding: var(--gap-sm) 0;
    cursor: pointer;
}

.chore-edit__switch-text[b-758jw862vz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chore-edit__switch-label[b-758jw862vz] {
    font-weight: 650;
}

.chore-edit__cancel[b-758jw862vz] {
    flex: 0 0 auto;
    text-decoration: none;
}

.chore-edit__cancel:hover[b-758jw862vz] {
    text-decoration: none;
}
/* /Components/Pages/Chores/ChoreStatusBadge.razor.rz.scp.css */
/* ChoreStatusBadge - status carriers of one chore occurrence (SPEC 10.2).
   Colours come from the tokens in app.css; nothing is invented here. */

.chore-status[b-ho32r428k6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    align-items: center;
}

.chore-status__icon[b-ho32r428k6] {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.chore-status__icon svg[b-ho32r428k6] {
    width: 100%;
    height: 100%;
}

/* "Do poprawki" - the same red as "po terminie", because the occurrence is open again. */
.chore-status__rework[b-ho32r428k6] {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

/* "Ważne" - orange, never red: red is reserved for the deadline. */
.chore-status__important[b-ho32r428k6] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}
/* /Components/Pages/Home/Home.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   "/" - Dziś. Isolated styles; the shared primitives (.tile, .card, .list,
   .badge, .is-overdue) live in app.css and are only extended here.
   --------------------------------------------------------------------------- */

.home-banner[b-bfti4ed2kn] {
    margin-bottom: var(--gap-lg);
    padding: var(--gap-lg);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
    color: var(--color-text);
}

.home-banner__title[b-bfti4ed2kn] {
    margin: 0 0 var(--gap-xs);
    font-weight: 700;
}

.home-banner__text[b-bfti4ed2kn] {
    margin: 0 0 var(--gap-md);
}

.home-banner__actions[b-bfti4ed2kn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

/* --- po terminie -------------------------------------------------------- */

.home-overdue[b-bfti4ed2kn] {
    margin-bottom: var(--gap-lg);
    padding: var(--gap-md) var(--gap-lg);
    border: 2px solid var(--color-danger);
    border-radius: var(--radius-md);
}

.home-overdue__title[b-bfti4ed2kn] {
    margin: 0 0 var(--gap-xs);
    font-size: 1rem;
    font-weight: 700;
}

.home-overdue__list[b-bfti4ed2kn] {
    margin: 0;
}

.home-overdue__row[b-bfti4ed2kn] {
    padding: 0;
    border-bottom-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
}

.home-overdue__link[b-bfti4ed2kn] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    min-height: var(--touch-min);
    padding: var(--gap-sm) 0;
    color: inherit;
    text-decoration: none;
}

.home-overdue__link:hover[b-bfti4ed2kn] {
    text-decoration: none;
}

.home-overdue__name[b-bfti4ed2kn] {
    display: block;
    font-weight: 600;
}

.home-overdue__meta[b-bfti4ed2kn] {
    display: block;
    opacity: .85;
}

/* --- kafle -------------------------------------------------------------- */

.home-tiles[b-bfti4ed2kn] {
    margin-bottom: var(--gap-lg);
}

.home-tile[b-bfti4ed2kn] {
    align-items: center;
}

.home-tile__icon[b-bfti4ed2kn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.home-tile__icon svg[b-bfti4ed2kn] {
    width: 26px;
    height: 26px;
}

.home-tile__name[b-bfti4ed2kn] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
}

.home-tile__hint[b-bfti4ed2kn] {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Two columns as soon as the screen can take them - phones stay single file. */
@media (min-width: 560px) {
    .home-tiles[b-bfti4ed2kn] {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- karty -------------------------------------------------------------- */

.home-link[b-bfti4ed2kn] {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--gap-sm);
    font-weight: 600;
}

.home-empty-line[b-bfti4ed2kn] {
    margin: 0;
}

.home-next[b-bfti4ed2kn] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    min-height: var(--touch-min);
    color: inherit;
    text-decoration: none;
}

.home-next:hover[b-bfti4ed2kn] {
    text-decoration: none;
}

.home-next__name[b-bfti4ed2kn] {
    display: block;
    font-weight: 650;
}

.home-next__meta[b-bfti4ed2kn] {
    display: block;
}

.home-events[b-bfti4ed2kn] {
    margin: 0;
}

.home-event[b-bfti4ed2kn] {
    padding: 0;
}

.home-event__link[b-bfti4ed2kn] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--gap-sm) 0;
    color: inherit;
    text-decoration: none;
}

.home-event__link:hover[b-bfti4ed2kn] {
    text-decoration: none;
}

.home-event__time[b-bfti4ed2kn] {
    flex: 0 0 auto;
    min-width: 4.2em;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.home-event__name[b-bfti4ed2kn] {
    display: block;
    font-weight: 600;
}

/* "Kogo dotyczy" - jedna linijka, ucinana: kafel ma cztery wiersze, nie akapity. */
.home-event__who[b-bfti4ed2kn] {
    display: block;
}

.home-more[b-bfti4ed2kn] {
    margin-top: var(--gap-md);
    min-height: var(--touch-min);
}

.home-tomorrow[b-bfti4ed2kn] {
    margin: var(--gap-md) 0 0;
}

.home-dinner[b-bfti4ed2kn] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
}

.home-dinner__note[b-bfti4ed2kn] {
    margin: var(--gap-xs) 0 0;
}

.home-shopping[b-bfti4ed2kn] {
    margin: 0;
    font-size: 1.05rem;
}

/* --- pasek rodzica ------------------------------------------------------ */

.home-approvals[b-bfti4ed2kn] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    min-height: 56px;
    margin-top: var(--gap-md);
    padding: 0 var(--gap-lg);
    border: 2px dashed var(--color-proposed);
    border-radius: var(--radius-md);
    background: var(--color-proposed-bg);
    color: var(--color-proposed);
    font-weight: 700;
    text-decoration: none;
}

.home-approvals:hover[b-bfti4ed2kn] {
    text-decoration: none;
}

.home-approvals__chevron[b-bfti4ed2kn] {
    font-size: 1.4rem;
    line-height: 1;
}

/* --- liczba w nagłówku -------------------------------------------------- */

.home-header-badge[b-bfti4ed2kn] {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    min-height: 36px;
    padding: 0 var(--gap-sm) 0 var(--gap-md);
    border-radius: 999px;
    /* Wcześniej: półprzezroczysta biel + tekst inwersyjny. To działa wyłącznie na
       kolorowym pasku nagłówka, a nagłówek strony głównej leży na zwykłym tle -
       efektem był biały napis na białym tle (kontrast ~1:1), a w trybie ciemnym
       ciemny na ciemnym. Plakietka niesie własne tło, więc jest czytelna
       niezależnie od tego, co pod nią leży. */
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}

.home-header-badge:hover[b-bfti4ed2kn] {
    text-decoration: none;
}

.home-header-badge__count[b-bfti4ed2kn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

/* The label is noise on a 390 px screen - the number and the icon carry it. */
@media (max-width: 400px) {
    .home-header-badge__label[b-bfti4ed2kn] {
        display: none;
    }
}

/* --- stopka: wejście do stron powłoki ----------------------------------- */

.home-footer[b-bfti4ed2kn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: var(--gap-xl) 0 var(--gap-lg);
    justify-content: center;
}

.home-footer__link[b-bfti4ed2kn] {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0 var(--gap-md);
    color: var(--color-text-muted);
    font-size: .9rem;
    font-weight: 600;
}
/* /Components/Pages/Meals/MealPlan.razor.rz.scp.css */
/* /obiady/plan - 14 rows, the whole slot is the tap target (SPEC 8, 10.4.3). */

.meal-plan__error[b-q9jt7mgozt],
.meal-plan__message[b-q9jt7mgozt] {
    margin-bottom: var(--gap-md);
    padding: var(--gap-sm) var(--gap-md);
    border-radius: var(--radius-sm);
    font-size: .92rem;
}

.meal-plan__error[b-q9jt7mgozt] {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.meal-plan__message[b-q9jt7mgozt] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.meal-plan[b-q9jt7mgozt] {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.meal-plan__row[b-q9jt7mgozt] {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    align-items: stretch;
    gap: var(--gap-sm);
    min-height: var(--row-height);
    padding: 0 var(--gap-md);
    border-bottom: 1px solid var(--color-border);
}

.meal-plan__row:last-child[b-q9jt7mgozt] {
    border-bottom: 0;
}

/* "Dziś": orange outline PLUS the word in the date column (SPEC 10.2). */
.meal-plan__row--today[b-q9jt7mgozt] {
    box-shadow: inset 3px 0 0 var(--color-warning);
    background: var(--color-warning-bg);
}

.meal-plan__date[b-q9jt7mgozt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--gap-sm) 0;
}

.meal-plan__day[b-q9jt7mgozt] {
    font-weight: 650;
    text-transform: capitalize;
}

.meal-plan__number[b-q9jt7mgozt] {
    color: var(--color-text-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.meal-plan__slot[b-q9jt7mgozt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: var(--row-height);
    padding: var(--gap-sm) 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.meal-plan__slot:disabled[b-q9jt7mgozt] {
    opacity: .6;
    cursor: not-allowed;
}

.meal-plan__slot--readonly[b-q9jt7mgozt] {
    cursor: default;
}

.meal-plan__slot:not(.meal-plan__slot--readonly):active[b-q9jt7mgozt] {
    background: var(--color-surface-2);
}

.meal-plan__name[b-q9jt7mgozt] {
    font-weight: 600;
    line-height: 1.25;
}

.meal-plan__note[b-q9jt7mgozt] {
    color: var(--color-text-muted);
    font-size: .8rem;
}

.meal-plan__add[b-q9jt7mgozt] {
    color: var(--color-accent);
    font-weight: 600;
}

.meal-plan__add--muted[b-q9jt7mgozt] {
    color: var(--color-text-muted);
    font-weight: 400;
}

.meal-plan__modes[b-q9jt7mgozt] {
    margin-bottom: var(--gap-md);
}

.meal-plan__hint[b-q9jt7mgozt] {
    margin-top: var(--gap-md);
    text-align: center;
}
/* /Components/Pages/Meals/RecipeDetail.razor.rz.scp.css */
/* /obiady/{id} - reading on a phone, two sticky actions at the bottom (SPEC 8). */

.recipe-detail__status[b-kwx2204x3i] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-md);
}

.recipe-detail__note[b-kwx2204x3i],
.recipe-detail__message[b-kwx2204x3i],
.recipe-detail__error[b-kwx2204x3i] {
    margin-bottom: var(--gap-md);
    padding: var(--gap-sm) var(--gap-md);
    border-radius: var(--radius-sm);
    font-size: .92rem;
}

/* "Do poprawki" - the parent's remark, red border plus the word, never colour alone. */
.recipe-detail__note[b-kwx2204x3i] {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
    border: 1px solid var(--color-danger);
}

.recipe-detail__message[b-kwx2204x3i] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.recipe-detail__error[b-kwx2204x3i] {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.recipe-detail__tags[b-kwx2204x3i] {
    margin-bottom: var(--gap-md);
}

.recipe-detail__planned[b-kwx2204x3i] {
    margin: 0 0 var(--gap-md);
}

.recipe-detail__secondary[b-kwx2204x3i] {
    display: flex;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-md);
}

.recipe-detail__secondary .btn[b-kwx2204x3i] {
    flex: 1 1 0;
    justify-content: center;
    min-height: var(--touch-min);
}

/* Servings multiplier - a stepper, not a dropdown: one thumb, two big targets. */
.portions[b-kwx2204x3i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--color-border);
}

.portions__label[b-kwx2204x3i] {
    font-weight: 600;
}

.portions__stepper[b-kwx2204x3i] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.portions__button[b-kwx2204x3i] {
    width: var(--touch-min);
    height: var(--touch-min);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.portions__button:disabled[b-kwx2204x3i] {
    opacity: .5;
    cursor: not-allowed;
}

.portions__value[b-kwx2204x3i] {
    min-width: 3ch;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ingredients[b-kwx2204x3i] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ingredients__row[b-kwx2204x3i] {
    border-bottom: 1px solid var(--color-border);
}

.ingredients__row:last-child[b-kwx2204x3i] {
    border-bottom: 0;
}

/* The whole label is the tap target, so the 20 px checkbox never has to be hit. */
.ingredients__label[b-kwx2204x3i] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    min-height: var(--row-height);
    cursor: pointer;
}

.ingredients__name[b-kwx2204x3i] {
    flex: 1 1 auto;
    min-width: 0;
}

.ingredients__quantity[b-kwx2204x3i] {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.ingredients__section[b-kwx2204x3i] {
    display: block;
    padding: 0 0 var(--gap-sm) calc(20px + var(--gap-md));
    color: var(--color-text-muted);
    font-size: .78rem;
}

.voters[b-kwx2204x3i] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    margin: 0 0 var(--gap-md);
    padding: 0;
}

.voters__item[b-kwx2204x3i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs);
    min-width: 56px;
}

.voters__name[b-kwx2204x3i] {
    font-size: .78rem;
    color: var(--color-text-muted);
}

.voters__vote[b-kwx2204x3i] {
    font-size: 1.1rem;
    line-height: 1;
}

.my-vote[b-kwx2204x3i] {
    display: flex;
    gap: var(--gap-sm);
}

.my-vote__button[b-kwx2204x3i] {
    flex: 1 1 0;
    justify-content: center;
}

.my-vote__button--on[b-kwx2204x3i] {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
    font-weight: 700;
}

.sticky-actions .btn[b-kwx2204x3i] {
    flex: 1 1 0;
    justify-content: center;
}
/* /Components/Pages/Meals/RecipeEdit.razor.rz.scp.css */
/* /obiady/nowy - a form built for a thumb: 44 px targets, sticky save (SPEC 10.4). */

.recipe-form__notice[b-x3yi8miena],
.recipe-form__proposal[b-x3yi8miena],
.recipe-form__rejected[b-x3yi8miena],
.recipe-form__error[b-x3yi8miena] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-md);
    padding: var(--gap-sm) var(--gap-md);
    border-radius: var(--radius-sm);
    font-size: .92rem;
}

.recipe-form__notice[b-x3yi8miena] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

/* The yellow "goes to a parent" bar required by SPEC 8 / 10.1. */
.recipe-form__proposal[b-x3yi8miena] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-weight: 600;
}

/* "Do poprawki": red border AND the parent's words - colour is never alone. */
.recipe-form__rejected[b-x3yi8miena] {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
    border: 1px solid var(--color-danger);
}

.recipe-form__error[b-x3yi8miena] {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.recipe-form__pair[b-x3yi8miena] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-md);
}

.recipe-form__tags[b-x3yi8miena] {
    margin-top: var(--gap-xs);
}

.ingredient[b-x3yi8miena] {
    padding: var(--gap-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.ingredient:last-of-type[b-x3yi8miena] {
    border-bottom: 0;
}

.ingredient__top[b-x3yi8miena] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.ingredient__name[b-x3yi8miena] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--touch-min);
    font-size: 1rem;
}

.ingredient__remove[b-x3yi8miena] {
    flex: 0 0 auto;
    width: var(--touch-min);
    height: var(--touch-min);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.ingredient__remove:active[b-x3yi8miena] {
    background: var(--color-surface-2);
}

.ingredient__bottom[b-x3yi8miena] {
    display: grid;
    /* Quantity is narrow, the unit medium, the aisle takes the rest - on 360 px this
       still leaves every control above the 44 px touch minimum. */
    grid-template-columns: 4.5rem 1fr 1.2fr;
    gap: var(--gap-sm);
    margin-top: var(--gap-sm);
}

.ingredient__quantity[b-x3yi8miena],
.ingredient__unit[b-x3yi8miena],
.ingredient__section[b-x3yi8miena] {
    min-height: var(--touch-min);
    min-width: 0;
    font-size: 1rem;
}

.ingredient__quantity[b-x3yi8miena] {
    text-align: center;
}

.ingredient__add[b-x3yi8miena] {
    min-height: var(--touch-min);
    margin-top: var(--gap-md);
    border-style: dashed;
    font-weight: 600;
}

/* The bar itself is positioned by app.css; here only the split between the two
   buttons, so "Zapisz" stays the wide one under the thumb. */
.sticky-actions .btn[b-x3yi8miena] {
    flex: 1 1 0;
    justify-content: center;
}

.sticky-actions .btn--primary[b-x3yi8miena] {
    flex: 2 1 0;
}
/* /Components/Pages/Meals/RecipeList.razor.rz.scp.css */
/* /obiady - two cards per row on a 360 px phone, thumbs on the card (SPEC 8, 10.4). */

.recipe-list__error[b-mi6sgqvo1s] {
    margin: 0 0 var(--gap-md);
    padding: var(--gap-sm) var(--gap-md);
    border-radius: var(--radius-sm);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
    font-size: .92rem;
}

.recipe-filters[b-mi6sgqvo1s] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-lg);
}

.recipe-filters__search[b-mi6sgqvo1s] {
    width: 100%;
    min-height: var(--touch-min);
    /* >= 16 px, otherwise Safari zooms the page on focus (SPEC 10.4.4). */
    font-size: 1rem;
}

/* The chip row scrolls sideways instead of wrapping into three lines. */
.recipe-filters__tags[b-mi6sgqvo1s] {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--gap-xs);
    scrollbar-width: thin;
}

.recipe-filters__tags > .chip[b-mi6sgqvo1s] {
    flex: 0 0 auto;
}

.recipe-grid[b-mi6sgqvo1s] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-md);
}

@media (min-width: 768px) {
    .recipe-grid[b-mi6sgqvo1s] {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

.recipe-card[b-mi6sgqvo1s] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

/* Proposal: dashed outline, never colour alone (SPEC 10.2). */
.recipe-card--proposal[b-mi6sgqvo1s] {
    border: 2px dashed var(--color-proposed);
}

.recipe-card__body[b-mi6sgqvo1s] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xs);
    flex: 1 1 auto;
    padding: var(--gap-md);
    color: var(--color-text);
    text-decoration: none;
}

.recipe-card__body:hover[b-mi6sgqvo1s] {
    text-decoration: none;
}

.recipe-card__body:active[b-mi6sgqvo1s] {
    background: var(--color-surface-2);
}

/* The image placeholder of SPEC 3.6: a coloured circle with the first letter. */
.recipe-card__avatar[b-mi6sgqvo1s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    /* The member colour is an accent, never the background of a whole card (SPEC 10.2). */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.recipe-card__name[b-mi6sgqvo1s] {
    font-weight: 600;
    line-height: 1.25;
    /* Long names stay inside the card instead of pushing the grid apart. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-card__meta[b-mi6sgqvo1s] {
    color: var(--color-text-muted);
    font-size: .82rem;
}

.recipe-card__badge[b-mi6sgqvo1s] {
    margin-top: var(--gap-xs);
}

.recipe-card__votes[b-mi6sgqvo1s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-border);
    border-top: 1px solid var(--color-border);
}

/* Two 56 px targets, one tap - never a row of five small stars (SPEC 3.8). */
.vote[b-mi6sgqvo1s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    min-height: 56px;
    padding: 0;
    border: 0;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.vote:disabled[b-mi6sgqvo1s] {
    opacity: .5;
    cursor: not-allowed;
}

.vote:active:not(:disabled)[b-mi6sgqvo1s] {
    background: var(--color-surface-2);
}

.vote--on[b-mi6sgqvo1s] {
    background: var(--color-success-bg);
    color: var(--color-success);
    font-weight: 700;
}

.vote--down.vote--on[b-mi6sgqvo1s] {
    /* Red means "po terminie" everywhere in this app, so a dislike is neutral grey. */
    background: var(--color-surface-2);
    color: var(--color-text);
}

.vote__icon[b-mi6sgqvo1s] {
    font-size: 1.15rem;
    line-height: 1;
}

.vote__count[b-mi6sgqvo1s] {
    font-variant-numeric: tabular-nums;
}

.recipe-card__score[b-mi6sgqvo1s] {
    margin: 0;
    padding: var(--gap-xs) var(--gap-md) var(--gap-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: .8rem;
    text-align: center;
}
/* /Components/Pages/Shell/ApprovalInbox.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   /do-zatwierdzenia. The row is a card, not a table line: on a 390 px screen the
   two decision buttons need the full width, and they must be at least 48 px tall
   (SPEC 8, 10.4.3).
   --------------------------------------------------------------------------- */

.inbox[b-8tr85phdfj] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.inbox__row[b-8tr85phdfj] {
    display: block;
    padding: var(--gap-md) var(--gap-lg);
    border: 2px dashed var(--color-proposed);
    border-bottom: 2px dashed var(--color-proposed);
    border-radius: var(--radius-md);
    background: var(--color-proposed-bg);
}

.inbox__row:active[b-8tr85phdfj] {
    background: var(--color-proposed-bg);
}

.inbox__head[b-8tr85phdfj] {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
}

.inbox__title[b-8tr85phdfj] {
    margin: 0;
    font-weight: 650;
}

.inbox__subtitle[b-8tr85phdfj] {
    margin: 2px 0 0;
}

.inbox__meta[b-8tr85phdfj] {
    margin: 2px 0 0;
}

.inbox__actions[b-8tr85phdfj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
}

.inbox__button[b-8tr85phdfj] {
    flex: 1 1 40%;
    min-height: 48px;
}

.inbox__button--open[b-8tr85phdfj] {
    flex: 1 1 100%;
    min-height: var(--touch-min);
}

.inbox__note[b-8tr85phdfj] {
    margin-bottom: 0;
    text-align: left;
}

.inbox-error[b-8tr85phdfj] {
    margin-bottom: var(--gap-md);
}

.inbox-notice[b-8tr85phdfj] {
    margin-bottom: var(--gap-md);
    padding: var(--gap-sm) var(--gap-md);
    border-radius: var(--radius-sm);
    background: var(--color-success-bg);
    color: var(--color-success);
    font-weight: 600;
}

.inbox-retry[b-8tr85phdfj] {
    min-height: var(--touch-min);
    margin-bottom: var(--gap-lg);
}
/* /Components/Pages/Shell/Diagnostics.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   /diagnostyka - a definition list that stays readable on a 390 px screen:
   label above value, never a two-column table that forces a sideways scroll.
   --------------------------------------------------------------------------- */

.diag[b-qr3jxuqxje] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.diag__item[b-qr3jxuqxje] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.diag dt[b-qr3jxuqxje] {
    color: var(--color-text-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.diag dd[b-qr3jxuqxje] {
    margin: 0;
    overflow-wrap: anywhere;
}

.diag__error[b-qr3jxuqxje] {
    color: var(--color-danger-fg);
}

.diag__hint[b-qr3jxuqxje] {
    display: block;
    margin-top: 2px;
}

.diag code[b-qr3jxuqxje] {
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    font-size: .95em;
    overflow-wrap: anywhere;
}

.diag__actions[b-qr3jxuqxje] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-lg);
}

.diag__actions .btn[b-qr3jxuqxje] {
    min-height: var(--touch-min);
}

.diag__retry[b-qr3jxuqxje] {
    margin-top: var(--gap-md);
    min-height: var(--touch-min);
}
/* /Components/Pages/Shell/FamilyPage.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   /rodzina - five read-only rows. The member colour paints the 4 px left rail
   only; a whole card in somebody's colour would compete with red, and red means
   exactly one thing here: po terminie (SPEC 10.2).
   --------------------------------------------------------------------------- */

.family[b-mcqcnk1wnk] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.family__row[b-mcqcnk1wnk] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    min-height: 64px;
    padding: var(--gap-md) var(--gap-lg);
    border-bottom: 1px solid var(--color-border);
    border-left: 4px solid var(--member-color, var(--color-family));
}

.family__name[b-mcqcnk1wnk] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
}

.family__meta[b-mcqcnk1wnk] {
    margin: 2px 0 0;
}

.family__note[b-mcqcnk1wnk] {
    margin-top: var(--gap-lg);
}

.family__note code[b-mcqcnk1wnk] {
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    font-size: .95em;
}
/* /Components/Pages/Shopping/BulkPastePage.razor.rz.scp.css */
/* /zakupy/wklej - reviewing a pasted shopping list (SPEC 7.5).

   The only screen of the application whose primary device is a COMPUTER: the list
   comes from a chat window on a desktop and gets checked with a mouse and a
   keyboard. It still has to work in a hand, so the four columns collapse into one
   card per line below 700 px - nothing is hidden, nothing scrolls sideways.

   Every colour, radius and gap is a token from app.css. */

.paste[b-5sh25pgkaz] {
    /* Room under the sticky "Dodaj" bar so the last row is never trapped behind it. */
    padding-bottom: var(--gap-xl);
}

/* -----------------------------------------------------------------------------
   Stage 1 - the textarea
   -------------------------------------------------------------------------- */
.paste__field[b-5sh25pgkaz] {
    margin-bottom: var(--gap-lg);
}

/* Monospace, because the indentation of the pasted list is what the parser reads:
   a sub-item lines up under its parent and the user can see it before parsing. */
.paste__textarea[b-5sh25pgkaz] {
    min-height: 19rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 15px;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

.paste__hint[b-5sh25pgkaz] {
    margin: var(--gap-xs) 0 0;
}

.paste__actions[b-5sh25pgkaz] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

.paste__recognize[b-5sh25pgkaz] {
    min-width: 11rem;
}

.paste__shortcut[b-5sh25pgkaz] {
    white-space: nowrap;
}

/* The keyboard hint is a keyboard hint - it means nothing on a phone. */
@media (hover: none) and (pointer: coarse) {
    .paste__shortcut[b-5sh25pgkaz] {
        display: none;
    }
}

/* -----------------------------------------------------------------------------
   Stage 2 - the counter bar, pinned under the app header
   -------------------------------------------------------------------------- */
.paste__summary[b-5sh25pgkaz] {
    position: sticky;
    top: calc(var(--header-height) + var(--safe-top));
    z-index: 12;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-sm) var(--gap-md);
    padding: var(--gap-sm) var(--gap-md);
    margin-bottom: var(--gap-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.paste__count[b-5sh25pgkaz] {
    flex: 1 1 auto;
    margin: 0;
    font-weight: 650;
}

.paste__summary-actions[b-5sh25pgkaz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs) var(--gap-md);
}

.paste__link[b-5sh25pgkaz] {
    min-height: var(--touch-min);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-accent);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.paste__link:hover[b-5sh25pgkaz] {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Stage 2 - the table
   -------------------------------------------------------------------------- */

/* ONE grid template for the head and every row, so the columns line up across
   groups. .app-main caps the page at 720 px - these widths are cut to fit it. */
.paste__columns[b-5sh25pgkaz],
.paste__fields[b-5sh25pgkaz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12.5rem 9.5rem;
    gap: var(--gap-sm);
    align-items: center;
}

.paste__columns[b-5sh25pgkaz] {
    padding: 0 var(--gap-md) var(--gap-xs);
    padding-left: calc(var(--touch-min) + var(--gap-sm) + var(--gap-md));
    color: var(--color-text-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.paste__column--check[b-5sh25pgkaz] {
    display: none;
}

.paste__group-title[b-5sh25pgkaz] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin: var(--gap-lg) 0 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.paste__group-count[b-5sh25pgkaz] {
    color: var(--color-text-muted);
    font-weight: 700;
}

.paste__rows[b-5sh25pgkaz] {
    overflow: hidden;
}

.paste__row[b-5sh25pgkaz] {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding: var(--gap-sm) var(--gap-md);
    border-bottom: 1px solid var(--color-border);
}

.paste__row:last-child[b-5sh25pgkaz] {
    border-bottom: 0;
}

/* Unticked lines stay readable - they are the ones most likely to need a decision. */
.paste__row--off .paste__fields[b-5sh25pgkaz] {
    opacity: .6;
}

/* 44 px target around a 22 px box (SPEC 10.4.3). */
.paste__check[b-5sh25pgkaz] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--touch-min);
    min-height: var(--touch-min);
    cursor: pointer;
}

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

.paste__amount[b-5sh25pgkaz] {
    display: flex;
    gap: var(--gap-xs);
    min-width: 0;
}

.paste__quantity[b-5sh25pgkaz] {
    flex: 0 1 5rem;
    min-width: 0;
    text-align: right;
}

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

/* Note and original line run the full width, under the three columns. */
.paste__note[b-5sh25pgkaz],
.paste__source[b-5sh25pgkaz] {
    grid-column: 1 / -1;
}

.paste__note[b-5sh25pgkaz] {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.paste__source[b-5sh25pgkaz] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-xs) var(--gap-sm);
    margin: 0;
    color: var(--color-text-muted);
    font-size: .78rem;
}

.paste__source-text[b-5sh25pgkaz] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    overflow-wrap: anywhere;
}

/* Says why the parser left this line unticked - the answer is never "a bug". */
.paste__badge[b-5sh25pgkaz] {
    padding: 1px 6px;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Stage 2 - the sticky "Dodaj" bar
   -------------------------------------------------------------------------- */
.paste__submit[b-5sh25pgkaz] {
    position: sticky;
    bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--gap-sm));
    z-index: 15;
    margin-top: var(--gap-lg);
    padding: var(--gap-sm) 0;
    background: var(--color-bg);
}

/* -----------------------------------------------------------------------------
   Phone: the table becomes one card per line, one field under the other.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .paste__columns[b-5sh25pgkaz] {
        display: none;
    }

    .paste__fields[b-5sh25pgkaz] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gap-xs);
    }

    .paste__row[b-5sh25pgkaz] {
        padding: var(--gap-md) var(--gap-sm) var(--gap-md) 0;
    }

    /* The quantity keeps its own line next to the unit - two fields, one row. */
    .paste__quantity[b-5sh25pgkaz] {
        flex: 0 0 6rem;
    }
}

/* -----------------------------------------------------------------------------
   Stage 2 - the one marker switch for the whole paste (decision A5).

   It sits between the counter bar and the table, where it reads as a property of
   everything below it. There is deliberately no per-row picker: a pasted list is
   one shopping trip, and a sixth control on every row would push the original
   pasted line - the only way to check the parser - off a phone screen.
   -------------------------------------------------------------------------- */
.paste__trip[b-5sh25pgkaz] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-xs) var(--gap-md);
    margin-bottom: var(--gap-md);
}

.paste__trip-label[b-5sh25pgkaz] {
    font-size: .86rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

/* Two positions do not need the whole width of a desktop window - stretched that far
   the switch stops reading as a choice between two things. It still fills a phone. */
.paste__trip-switch[b-5sh25pgkaz] {
    min-width: 0;
    max-width: 22rem;
}

.paste__trip-hint[b-5sh25pgkaz] {
    grid-column: 1 / -1;
    margin: 0;
    line-height: 1.3;
}

/* On a phone the label goes above the switch - two full-width lines beat two
   cramped columns. */
@media (max-width: 480px) {
    .paste__trip[b-5sh25pgkaz] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Shopping/QuickAddBar.razor.rz.scp.css */
/* QuickAddBar - pinned above the bottom navigation (SPEC 10.4.6).
   The .quick-add rule in app.css already does the pinning and the safe-area padding;
   everything below is only about the two controls inside it. */

.quick-add-bar[b-6l0q0c7251] {
    align-items: center;
    /* The hint takes a full row of its own above the field - see .quick-add-bar__hint. */
    flex-wrap: wrap;
}

/* "Trafi do: Od ręki" - a full-width line above the field, read before typing rather
   than discovered afterwards on the wrong trip. */
.quick-add-bar__hint[b-6l0q0c7251] {
    flex: 1 0 100%;
    margin: 0 0 var(--gap-xs);
    line-height: 1.2;
}

.quick-add-bar__input[b-6l0q0c7251] {
    /* basis 0, not auto: app.css gives every input width:100%, and with a wrapping bar
       that basis would push the "+" button onto a line of its own. */
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--touch-min);
    padding: 10px var(--gap-md);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    /* 16 px or Safari zooms the whole layout on focus (SPEC 10.4.4) */
    font-size: 1rem;
}

.quick-add-bar__input:focus-visible[b-6l0q0c7251] {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
}

.quick-add-bar__input[b-6l0q0c7251]::placeholder {
    color: var(--color-text-muted);
}

.quick-add-bar__button[b-6l0q0c7251] {
    flex: 0 0 auto;
    width: var(--touch-min);
    min-width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border-radius: var(--radius-md);
}

.quick-add-bar__icon[b-6l0q0c7251] {
    width: 22px;
    height: 22px;
}

/* Busy marker: a ring, not a moving spinner - it sits 8 px from the thumb */
.quick-add-bar__spinner[b-6l0q0c7251] {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: quick-add-spin-b-6l0q0c7251 700ms linear infinite;
}

@keyframes quick-add-spin-b-6l0q0c7251 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .quick-add-bar__spinner[b-6l0q0c7251] {
        animation: none;
        opacity: .6;
    }
}
/* /Components/Pages/Shopping/ShoppingLists.razor.rz.scp.css */
/* /zakupy/listy - second-level screen (SPEC 8). Tokens come from app.css. */

.lists__heading[b-m0l5cnbz49] {
    margin: var(--gap-lg) 0 var(--gap-sm);
    color: var(--color-text-muted);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lists__hint[b-m0l5cnbz49] {
    margin-bottom: var(--gap-md);
}

.lists__meta[b-m0l5cnbz49] {
    margin-bottom: var(--gap-md);
}

.lists__actions[b-m0l5cnbz49] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

.lists__action[b-m0l5cnbz49] {
    flex: 1 1 140px;
    min-height: var(--touch-min);
}

.lists__form[b-m0l5cnbz49] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

.lists__input[b-m0l5cnbz49] {
    flex: 1 1 180px;
    min-width: 0;
    min-height: var(--touch-min);
    padding: 10px var(--gap-md);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    /* 16 px minimum, or Safari zooms on focus (SPEC 10.4.4) */
    font-size: 1rem;
}

.lists__input:focus-visible[b-m0l5cnbz49] {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
}

.lists__archive[b-m0l5cnbz49] {
    overflow: hidden;
}

.lists__row[b-m0l5cnbz49] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-border);
}

.lists__row:last-child[b-m0l5cnbz49] {
    border-bottom: 0;
}

/* The whole row opens the list (SPEC 10.4.3); "Skopiuj" is the second target. */
.lists__open[b-m0l5cnbz49] {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
    text-decoration: none;
}

.lists__open:hover[b-m0l5cnbz49] {
    text-decoration: none;
}

.lists__text[b-m0l5cnbz49] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lists__name[b-m0l5cnbz49] {
    font-weight: 600;
}

.lists__copy[b-m0l5cnbz49] {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: var(--row-height);
    padding: 0 var(--gap-sm);
    border: 0;
    border-left: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-accent);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lists__copy:active[b-m0l5cnbz49] {
    background: var(--color-surface-2);
}

.lists__copy:disabled[b-m0l5cnbz49] {
    opacity: .55;
    cursor: not-allowed;
}
/* /Components/Pages/Shopping/ShoppingPage.razor.rz.scp.css */
/* /zakupy - one hand, in a shop (SPEC 8, 10.4).
   Colours, radii and the 56 px row all come from the tokens in app.css. */

.shopping[b-qhjyh576dg] {
    /* Room for the quick-add bar pinned above the bottom navigation, so the last
       row can always be reached and ticked off. */
    padding-bottom: calc(var(--touch-min) + var(--gap-lg));
}

/* Under a marker filter the bar carries one more line ("Nowe pozycje trafią do…"),
   so the last row needs that line of room too - or it hides behind the bar. */
.shopping--hinted[b-qhjyh576dg] {
    padding-bottom: calc(var(--touch-min) + var(--gap-lg) + 1.5rem);
}

/* app.css pins the toast just above the bottom navigation - which is exactly where
   the quick-add bar lives on THIS screen, so it moves one bar higher here. */
.shopping .toast[b-qhjyh576dg] {
    bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--touch-min) + var(--gap-lg) * 2);
}

.shopping--hinted .toast[b-qhjyh576dg] {
    bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--touch-min) + var(--gap-lg) * 2 + 1.5rem);
}

.shopping__lists-link[b-qhjyh576dg],
.shopping__paste-link[b-qhjyh576dg] {
    min-height: var(--touch-min);
    padding: 0 var(--gap-md);
}

/* Two header actions do not fit next to a title on a 360 px phone; "Wklej listę"
   is a desktop errand anyway, so there it keeps its words and here its icon-sized
   padding. Nothing is hidden - the link stays reachable with one thumb. */
.shopping__paste-link[b-qhjyh576dg] {
    white-space: nowrap;
}

@media (max-width: 400px) {
    .shopping__lists-link[b-qhjyh576dg],
    .shopping__paste-link[b-qhjyh576dg] {
        padding: 0 var(--gap-sm);
        font-size: .86rem;
    }
}

/* Aisle heading. .section-heading in app.css does the sticky part. */
.shopping__heading[b-qhjyh576dg] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin: var(--gap-lg) 0 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.shopping__heading-count[b-qhjyh576dg] {
    color: var(--color-text-muted);
    font-weight: 700;
}

.shopping__heading--bought[b-qhjyh576dg] {
    margin-top: var(--gap-xl);
}

/* "Wyczyść kupione" - a parent action, pushed to the far end of the heading */
.shopping__clear[b-qhjyh576dg] {
    margin-left: auto;
    min-height: var(--touch-min);
    padding: 0 var(--gap-sm);
    border: 0;
    background: transparent;
    color: var(--color-accent);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
}

.shopping__clear:disabled[b-qhjyh576dg] {
    opacity: .55;
    cursor: not-allowed;
}

.shopping__list[b-qhjyh576dg] {
    overflow: hidden;
    margin-bottom: 0;
}

.shopping__list--bought[b-qhjyh576dg] {
    opacity: .85;
}

/* Archived list - read only, with the one way out */
.shopping__archived[b-qhjyh576dg] {
    padding: var(--gap-md) var(--gap-lg);
    margin-bottom: var(--gap-md);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
}

.shopping__archived-text[b-qhjyh576dg] {
    margin: 0 0 var(--gap-md);
    color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   The row. 56 px, and the WHOLE row ticks the item off (SPEC 10.4.3) - the
   remove button is the only other target, and only when the actor may use it.
   -------------------------------------------------------------------------- */
.shopping-row[b-qhjyh576dg] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-border);
}

.shopping-row:last-child[b-qhjyh576dg] {
    border-bottom: 0;
}

.shopping-row__toggle[b-qhjyh576dg] {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
}

.shopping-row__toggle:disabled[b-qhjyh576dg] {
    cursor: default;
    opacity: 1;
}

/* Checkbox drawn as a 28 px circle - big enough to read at arm's length,
   but the target is the whole row, not this. */
.shopping-row__box[b-qhjyh576dg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    color: #fff;
}

.shopping-row__box--on[b-qhjyh576dg] {
    border-color: var(--color-success);
    background: var(--color-success);
}

.shopping-row__box svg[b-qhjyh576dg] {
    width: 16px;
    height: 16px;
}

.shopping-row__text[b-qhjyh576dg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--gap-sm);
}

.shopping-row__name[b-qhjyh576dg] {
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.shopping-row__amount[b-qhjyh576dg] {
    color: var(--color-text-muted);
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
}

.shopping-row__note[b-qhjyh576dg] {
    flex: 1 0 100%;
}

/* Bought: greyed out and struck through (SPEC 10.2). .is-done from app.css
   carries the line-through; the whole row is dimmed here. */
.shopping-row__toggle[aria-pressed="true"] .shopping-row__name[b-qhjyh576dg],
.shopping-row__toggle[aria-pressed="true"] .shopping-row__amount[b-qhjyh576dg] {
    color: var(--color-done);
}

.shopping-row__remove[b-qhjyh576dg] {
    flex: 0 0 auto;
    width: var(--touch-min);
    min-height: var(--row-height);
    border: 0;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.shopping-row__remove:active[b-qhjyh576dg] {
    background: var(--color-surface-2);
}

.shopping-row__remove:disabled[b-qhjyh576dg] {
    opacity: .45;
    cursor: not-allowed;
}

.shopping-row__remove svg[b-qhjyh576dg] {
    width: 18px;
    height: 18px;
}

/* -----------------------------------------------------------------------------
   The "kiedy kupujemy" switch. .segmented in app.css does the pill; here it only
   gets its place - full width, right under the header, above the first aisle.
   -------------------------------------------------------------------------- */
.shopping__filter[b-qhjyh576dg] {
    margin-bottom: var(--gap-md);
}

/* Three Polish captions have to fit on a 360 px phone without wrapping. */
.shopping__filter .segmented__item[b-qhjyh576dg] {
    padding: 0 var(--gap-xs);
    font-size: .9rem;
    white-space: nowrap;
}

@media (max-width: 360px) {
    .shopping__filter .segmented__item[b-qhjyh576dg] {
        font-size: .82rem;
    }
}

/* -----------------------------------------------------------------------------
   The marker on a row. Shown ONLY under the "Wszystko" filter - with one marker
   selected every row would say the same thing.

   Never colour alone (SPEC 10.2): the WORD is the label, the dot only helps the
   eye find it in a long list. The weekly shop is the quiet, ordinary case, so it
   stays grey; "Od ręki" is the exception and gets the accent.
   -------------------------------------------------------------------------- */
.shopping-row__trip[b-qhjyh576dg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}

.shopping-row__trip-dot[b-qhjyh576dg] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* The exception gets the pill and the accent - it is the line somebody has to fetch
   TODAY, and it has to be findable in a list of forty. */
.shopping-row__trip--everyday[b-qhjyh576dg] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 700;
}

/* The weekly shop is what almost every line is, so it says its name and nothing more:
   no pill, no border, no fill. A badge repeated forty times is not information. */
.shopping-row__trip--big[b-qhjyh576dg] {
    opacity: .85;
}

/* A bought row is a record, not a plan - its marker fades with the rest of it. */
.shopping-row__toggle[aria-pressed="true"] .shopping-row__trip[b-qhjyh576dg] {
    opacity: .6;
}

/* -----------------------------------------------------------------------------
   The name is the way into the edit sheet (decision B4). It must READ as tappable
   without turning into a button - the row underneath it still ticks the item off,
   and two competing buttons on one row would be a coin toss under a thumb.
   -------------------------------------------------------------------------- */
.shopping-row__name--editable[b-qhjyh576dg] {
    /* A dotted underline: visible enough to invite a tap, quiet enough not to look
       like a link on every single row of a forty-line list. */
    text-decoration: underline dotted var(--color-border-strong);
    text-underline-offset: 3px;
    /* The tap target is the text plus a little air, inside the 56 px row. */
    padding: 2px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.shopping-row__name--editable:active[b-qhjyh576dg] {
    color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   The edit sheet - the content of a ConfirmSheet (SPEC 10.4.2), so the sheet, the
   backdrop, Escape, the swipe and the two 56 px buttons are already handled.
   -------------------------------------------------------------------------- */
.shopping-edit[b-qhjyh576dg] {
    display: flex;
    flex-direction: column;
    /* Six fields on a small phone in landscape: the sheet scrolls, the buttons stay. */
    max-height: 58vh;
    overflow-y: auto;
    margin-top: var(--gap-sm);
    /* Room for the focus ring of the last field, which would otherwise be clipped. */
    padding: 2px;
}

.shopping-edit__field[b-qhjyh576dg] {
    margin-bottom: var(--gap-md);
}

.shopping-edit__field:last-child[b-qhjyh576dg] {
    margin-bottom: 0;
}

.shopping-edit__error[b-qhjyh576dg] {
    margin: 0 0 var(--gap-md);
}

/* Amount and unit share one line - they are one answer. */
.shopping-edit__amount[b-qhjyh576dg] {
    display: flex;
    gap: var(--gap-sm);
    min-width: 0;
}

.shopping-edit__quantity[b-qhjyh576dg] {
    flex: 0 0 7rem;
    min-width: 0;
    text-align: right;
}

.shopping-edit__unit[b-qhjyh576dg] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Says which of the two owners the aisle answers to - the guesser, or a person. */
.shopping-edit__hint[b-qhjyh576dg] {
    margin: var(--gap-xs) 0 0;
    line-height: 1.3;
}
/* /Components/Shared/ApprovalActions.razor.rz.scp.css */
/* ApprovalActions - two big decision buttons, note above them. */

.approval-actions[b-ciyqynmlug] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.approval-actions__note[b-ciyqynmlug] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

/* >= 16 px or Safari zooms the page on focus (SPEC 10.4.4). */
.approval-actions__input[b-ciyqynmlug] {
    min-height: 72px;
    font-size: 16px;
}

.approval-actions__counter[b-ciyqynmlug] {
    align-self: flex-end;
    margin: 0;
}

/* One thumb: full-width buttons stacked, decision first, on wide screens side by side. */
.approval-actions__buttons[b-ciyqynmlug] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.approval-actions__button[b-ciyqynmlug] {
    width: 100%;
}

/* Red is reserved for "po terminie" (SPEC 10.2), so the rejection is an outline. */
.approval-actions__button--reject[b-ciyqynmlug] {
    border-width: 2px;
    border-color: var(--color-border-strong);
}

@media (min-width: 480px) {
    .approval-actions__buttons[b-ciyqynmlug] {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    .approval-actions__button[b-ciyqynmlug] {
        width: auto;
        min-width: 160px;
    }
}
/* /Components/Shared/ApprovalBadge.razor.rz.scp.css */
/* ApprovalBadge - the .badge pill lives in app.css; the outlines belong here. */

.approval-badge[b-epyfuwvc27] {
    padding: 3px 10px;
    line-height: 1.2;
}

.approval-badge__icon[b-epyfuwvc27] {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.approval-badge__icon svg[b-epyfuwvc27] {
    width: 100%;
    height: 100%;
}

/* SPEC 10.2: "Propozycja" is the dashed outline of the whole application. */
.approval-badge--proposed[b-epyfuwvc27] {
    border: 1px dashed var(--color-proposed);
}

/* "Do poprawki" - solid outline; the parent's note is shown by the calling view. */
.approval-badge--rejected[b-epyfuwvc27] {
    border: 1px solid var(--color-danger);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.approval-badge--approved[b-epyfuwvc27] {
    border: 1px solid transparent;
}
/* /Components/Shared/ConfirmSheet.razor.rz.scp.css */
/* ConfirmSheet - the .sheet / .sheet-backdrop bases live in app.css. */

.confirm-sheet[b-45islcjpsi] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    max-width: 720px;
    margin: 0 auto;
    touch-action: pan-y;
    animation: confirm-sheet-in-b-45islcjpsi .18s ease-out;
}

.confirm-sheet:focus[b-45islcjpsi] {
    outline: none;
}

.confirm-sheet:focus-visible[b-45islcjpsi] {
    outline: 3px solid var(--color-focus);
    outline-offset: -3px;
}

/* The grip says "you can drag me down" without a word of instruction. */
.confirm-sheet__grip[b-45islcjpsi] {
    width: 44px;
    height: 4px;
    margin: 0 auto var(--gap-sm);
    border-radius: 999px;
    background: var(--color-border-strong);
}

.confirm-sheet__title[b-45islcjpsi] {
    margin: 0;
    font-size: 1.12rem;
}

.confirm-sheet__message[b-45islcjpsi] {
    margin: 0;
    color: var(--color-text-muted);
}

/* Two big buttons; the safe one sits lowest, closest to the thumb. */
.confirm-sheet__actions[b-45islcjpsi] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
}

.confirm-sheet__button[b-45islcjpsi] {
    width: 100%;
}

@keyframes confirm-sheet-in-b-45islcjpsi {
    from {
        transform: translateY(16px);
        opacity: .6;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* EmptyState - the .empty-state padding lives in app.css. */

.empty[b-so5rvjfd7v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
}

.empty__icon[b-so5rvjfd7v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--gap-xs);
    border-radius: 50%;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}

/* ::deep so a caller-supplied Icon fragment is sized too. */
.empty__icon[b-so5rvjfd7v]  svg {
    width: 28px;
    height: 28px;
}

.empty__title[b-so5rvjfd7v] {
    margin: 0;
    color: var(--color-text);
    font-weight: 650;
}

.empty__description[b-so5rvjfd7v] {
    margin: 0;
    max-width: 34ch;
}

.empty__action[b-so5rvjfd7v] {
    margin-top: var(--gap-sm);
    text-decoration: none;
}
/* /Components/Shared/Fab.razor.rz.scp.css */
/* Fab - position, size and safe-area offset come from .fab in app.css. */

.fab--surface[b-ib6ny3syqh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.fab--surface:hover[b-ib6ny3syqh] {
    text-decoration: none;
}

.fab--surface:active[b-ib6ny3syqh] {
    transform: scale(.96);
}

.fab--surface:disabled[b-ib6ny3syqh] {
    opacity: .55;
    cursor: not-allowed;
}

/* ::deep so a caller-supplied Icon fragment is sized too. */
.fab--surface[b-ib6ny3syqh]  svg {
    width: 26px;
    height: 26px;
}
/* /Components/Shared/MemberAvatar.razor.rz.scp.css */
/* MemberAvatar - the .avatar base lives in app.css; here we only override the ink
   (computed per member colour) and add the sizes. */

.member-avatar[b-gxb05fdx9t] {
    /* --member-color / --member-fg come from the inline style attribute. */
    color: var(--member-fg, #fff);
    /* A hairline ring keeps a very pale member colour visible on a white card
       and a very dark one visible on the dark surface (SPEC 10.4.13). */
    box-shadow: inset 0 0 0 1px rgba(20, 24, 31, .18);
    user-select: none;
}

@media (prefers-color-scheme: dark) {
    .member-avatar[b-gxb05fdx9t] {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    }
}

.member-avatar--sm[b-gxb05fdx9t] {
    width: 24px;
    height: 24px;
    font-size: .68rem;
}

.member-avatar--md[b-gxb05fdx9t] {
    width: 32px;
    height: 32px;
}

.member-avatar--lg[b-gxb05fdx9t] {
    width: var(--touch-min);
    height: var(--touch-min);
}
/* /Components/Shared/MemberChip.razor.rz.scp.css */
/* MemberChip - the .chip base (44 px, pill) lives in app.css. */

.member-chip[b-j4l6hee2lp] {
    max-width: 100%;
    padding-left: 6px;
    gap: var(--gap-sm);
}

/* A label is not a touch target, so it does not have to be 44 px tall. */
.member-chip--static[b-j4l6hee2lp] {
    min-height: 32px;
    padding: 3px 12px 3px 3px;
    cursor: default;
    font-weight: 600;
}

.member-chip__name[b-j4l6hee2lp] {
    min-width: 0;
    font-size: .9rem;
}

.member-chip:disabled[b-j4l6hee2lp] {
    opacity: .55;
    cursor: not-allowed;
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
/* PageHeader - title row at the top of a page body. */

.page-header[b-90id30kjvf] {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-lg);
}

/* 44 px touch target, pulled left so the glyph lines up with the text below it. */
.page-header__back[b-90id30kjvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--touch-min);
    height: var(--touch-min);
    margin-left: -10px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.page-header__back:hover[b-90id30kjvf] {
    text-decoration: none;
}

.page-header__back:active[b-90id30kjvf] {
    background: var(--color-surface-2);
}

.page-header__icon[b-90id30kjvf] {
    width: 24px;
    height: 24px;
}

.page-header__text[b-90id30kjvf] {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 6px;
}

.page-header__title[b-90id30kjvf] {
    margin: 0;
    overflow-wrap: anywhere;
}

.page-header__subtitle[b-90id30kjvf] {
    margin: 2px 0 0;
    color: var(--color-text-muted);
    font-size: .88rem;
}

.page-header__actions[b-90id30kjvf] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    flex: 0 0 auto;
    padding-top: 2px;
}
/* /Components/Shared/RecurrenceEditor.razor.rz.scp.css */
/* RecurrenceEditor - designed for a 390 px screen and one thumb (SPEC 10.4). */

.rec[b-g1k23t55aj] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

.rec__block[b-g1k23t55aj] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.rec__label[b-g1k23t55aj] {
    font-size: .86rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

/* Segmented switch. Five long Polish labels never fit one row on a phone, so the
   control wraps instead of shrinking the targets below 44 px. */
.rec__segments[b-g1k23t55aj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 3px;
    padding: 3px;
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
}

.rec__segments--two[b-g1k23t55aj] {
    grid-template-columns: repeat(2, 1fr);
}

.rec__segments--three[b-g1k23t55aj] {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}

.rec__segment[b-g1k23t55aj] {
    min-height: var(--touch-min);
    padding: 4px 6px;
    border: 0;
    border-radius: calc(var(--radius-md) - 3px);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.15;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rec__segment--on[b-g1k23t55aj] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-1);
}

.rec__segment:disabled[b-g1k23t55aj] {
    opacity: .55;
    cursor: not-allowed;
}

/* Seven circles, Monday first: 44 px tall and never narrower than 40 px, because a day
   nobody can hit is a day nobody can pick.

   Inside a card a 360 px screen (Galaxy S8 and every older Android) leaves about 294 px:
   32 px of page padding, 32 px of card padding and 2 px of border. Seven 40 px circles plus
   six 4 px gaps need 304 px, so Sunday used to slide under the card's `overflow: hidden`
   and became unreachable. Shrinking the circles is not an option (40 px is the floor), so
   below 384 px the row breaks into 4 + 3 instead. From 384 px up - a 390 px phone is the
   design target - the single row of up to 56 px circles is exactly what it was. */
.rec__days[b-g1k23t55aj] {
    display: grid;
    grid-template-columns: repeat(7, minmax(40px, 56px));
    justify-content: start;
    gap: var(--gap-xs);
}

@media (max-width: 383px) {
    .rec__days[b-g1k23t55aj] {
        grid-template-columns: repeat(4, minmax(40px, 1fr));
    }
}

.rec__day[b-g1k23t55aj] {
    min-width: 0;
    height: var(--touch-min);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rec__day--on[b-g1k23t55aj] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.rec__day:disabled[b-g1k23t55aj] {
    opacity: .55;
    cursor: not-allowed;
}

/* "Co N" stepper - the buttons are the primary way in, the field is the escape hatch. */
.rec__stepper[b-g1k23t55aj] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.rec__step[b-g1k23t55aj] {
    flex: 0 0 auto;
    width: var(--touch-min);
    height: var(--touch-min);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rec__step:disabled[b-g1k23t55aj] {
    opacity: .45;
    cursor: not-allowed;
}

.rec__number[b-g1k23t55aj] {
    width: 82px;
    flex: 0 0 auto;
    text-align: center;
    font-size: 16px;
}

.rec__unit[b-g1k23t55aj] {
    color: var(--color-text-muted);
    font-weight: 600;
}

.rec__select[b-g1k23t55aj],
.rec__date[b-g1k23t55aj] {
    width: 100%;
    max-width: 320px;
    font-size: 16px;
}

.rec__hint[b-g1k23t55aj] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: .82rem;
}

/* The rule, always spelled out: sentence + the next five dates (SPEC 10.4.8). */
.rec__summary[b-g1k23t55aj] {
    padding: var(--gap-md) var(--gap-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
}

.rec__describe[b-g1k23t55aj] {
    margin: 0;
    font-weight: 650;
}

.rec__preview-title[b-g1k23t55aj] {
    margin: var(--gap-md) 0 var(--gap-xs);
    color: var(--color-text-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

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

.rec__preview li[b-g1k23t55aj] {
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}

.rec__errors[b-g1k23t55aj] {
    list-style: none;
    margin: var(--gap-sm) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.rec__errors li[b-g1k23t55aj] {
    color: var(--color-danger);
    font-size: .86rem;
    font-weight: 600;
}
/* /Components/Shared/SectionCard.razor.rz.scp.css */
/* SectionCard - .card / .card--flush / .card--member live in app.css. */

.section-card[b-orxa24h2ar] {
    overflow: hidden;
}

.section-card__head[b-orxa24h2ar] {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
    padding: var(--gap-lg) var(--gap-lg) var(--gap-md);
}

.section-card__text[b-orxa24h2ar] {
    flex: 1 1 auto;
    min-width: 0;
}

.section-card__title[b-orxa24h2ar] {
    margin: 0;
    font-size: 1.02rem;
}

.section-card__subtitle[b-orxa24h2ar] {
    margin: 2px 0 0;
    color: var(--color-text-muted);
    font-size: .86rem;
}

.section-card__actions[b-orxa24h2ar] {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    flex: 0 0 auto;
}

.section-card__body[b-orxa24h2ar] {
    padding: var(--gap-lg);
}

.section-card__head + .section-card__body[b-orxa24h2ar] {
    padding-top: 0;
}

/* Full-bleed body: list rows draw their own 56 px padding (SPEC 10.4.3). */
.section-card__body--flush[b-orxa24h2ar] {
    padding: 0;
}

.section-card__body:empty[b-orxa24h2ar] {
    display: none;
}

.section-card__footer[b-orxa24h2ar] {
    padding: 0 var(--gap-lg) var(--gap-lg);
}