/* /Components/BagJournalPanel.razor.rz.scp.css */
/* Bag journal. Mobile first throughout: the base rules are the phone layout (the editor is a
   bottom sheet), and the one media query at the bottom adds the desktop form. Colors come from
   the editorial palette variables only. */

.bag-journal[b-nulq2bjxt3] {
    margin-top: .5rem;
}

.bag-journal-list[b-nulq2bjxt3] {
    list-style: none;
    margin: 0 0 .25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.bag-journal-entry[b-nulq2bjxt3] {
    font-size: .875rem;
    background: rgba(var(--surface-2-rgb), .6);
    border-left: 3px solid var(--accent);
    border-radius: .25rem;
    padding: .4rem .6rem;
}

/* Previous-bag entries read as background, not as today's journal: the accent bar goes quiet. */
.bag-journal-list-previous .bag-journal-entry[b-nulq2bjxt3] {
    border-left-color: var(--line);
}

.bag-journal-entry-meta[b-nulq2bjxt3] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .15rem;
}

.bag-journal-day[b-nulq2bjxt3] {
    color: var(--accent);
    font-weight: 600;
}

/* Row actions are real touch targets, not 12px links squeezed against each other. */
.bag-journal-entry-actions[b-nulq2bjxt3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .25rem;
}

.bag-journal-entry-actions .btn-link[b-nulq2bjxt3] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--muted);
}

.bag-journal-actions[b-nulq2bjxt3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.bag-journal-actions .btn-link[b-nulq2bjxt3] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.bag-journal-add[b-nulq2bjxt3] {
    color: var(--accent);
}

.bag-journal-more[b-nulq2bjxt3],
.bag-journal-previous-toggle[b-nulq2bjxt3] {
    color: var(--muted);
}

.bag-journal-previous[b-nulq2bjxt3] {
    margin-top: .25rem;
}

.bag-journal-previous-toggle[b-nulq2bjxt3] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.bag-journal-list-previous[b-nulq2bjxt3] {
    margin-top: .35rem;
}

/* ---- The editor ------------------------------------------------------------------- */

/* touch-action: none keeps a drag on the backdrop from scrolling the page behind the sheet —
   the no-JS way to hold the page still (there is no body-scroll-lock interop here). */
.bag-journal-sheet-backdrop[b-nulq2bjxt3] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    touch-action: none;
    z-index: 1050;
}

.bag-journal-sheet[b-nulq2bjxt3] {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1051;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-radius: .75rem .75rem 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bag-journal-sheet-inner[b-nulq2bjxt3] {
    /* The safe-area inset keeps Save clear of the home indicator on a notched phone. */
    padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
}

.bag-journal-sheet-head[b-nulq2bjxt3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

/* Roomy enough on a phone that a two-line note doesn't scroll inside its own field. */
.bag-journal-input[b-nulq2bjxt3] {
    min-height: 5.5rem;
    resize: vertical;
}

.bag-journal-chips[b-nulq2bjxt3] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}

.bag-journal-chip[b-nulq2bjxt3] {
    min-height: 44px;
    border-radius: 999px;
    border-color: var(--line);
    color: var(--ink);
}

.bag-journal-sheet-foot[b-nulq2bjxt3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
}

.bag-journal-sheet-foot .btn-primary[b-nulq2bjxt3],
.bag-journal-sheet-foot .btn-link[b-nulq2bjxt3] {
    min-height: 44px;
}

/* Desktop: the sheet becomes a plain card in the flow of the page. The backdrop goes away with it,
   so nothing dims and nothing is trapped. */
@media (min-width: 768px) {
    .bag-journal-sheet-backdrop[b-nulq2bjxt3] {
        display: none;
    }

    .bag-journal-sheet[b-nulq2bjxt3] {
        position: static;
        max-height: none;
        overflow: visible;
        border: 1px solid var(--line);
        border-radius: .5rem;
        box-shadow: none;
        margin-top: .5rem;
    }

    .bag-journal-sheet-inner[b-nulq2bjxt3] {
        padding: .75rem;
    }
}
/* /Components/BagMomentNote.razor.rz.scp.css */
/* Mobile first: the field takes the row and Save sits beside it, both at real touch height. */

.bag-moment-note[b-vs4dyfgwiw] {
    margin-top: .5rem;
}

.bag-moment-note-row[b-vs4dyfgwiw] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .2rem;
}

.bag-moment-note-row .form-control[b-vs4dyfgwiw] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
}

.bag-moment-note-row .btn-primary[b-vs4dyfgwiw] {
    flex: none;
    min-height: 44px;
}

.bag-moment-note-row .btn-close[b-vs4dyfgwiw] {
    flex: none;
    /* The skip is a real target too — it is the answer most members will give. */
    width: 44px;
    height: 44px;
    opacity: .5;
}
/* /Components/BrewTimeline.razor.rz.scp.css */
.bt-row[b-sefjuw3cx5] {
    flex-wrap: wrap;
    row-gap: 0.45rem; /* breathing room between wrapped timeline rows */
}

/* Phones: same wrapping behavior, just denser blocks so more of the brew fits per row. */
@media (max-width: 640.98px) {
    /* !important: padding/min-width arrive as inline styles from BlockStyle. */
    .bt-row .bt-step[b-sefjuw3cx5] {
        padding: 0.1rem 0.4rem !important;
        min-width: 2.4rem !important;
        font-size: 0.9em;
    }

    /* Long pauses don't need proportionally long connectors on a phone. */
    .bt-row .bt-gap[b-sefjuw3cx5] {
        max-width: 48px;
    }
}
/* /Components/CoffeeGapChips.razor.rz.scp.css */
/* Word-width answer chips. Deliberately not .rating-pill: that's a 5-column grid sized for digits,
   and these are variable-width words that need to wrap on a phone. Same visual language though —
   palette variables only, and the same 44px minimum touch target. */
.gap-chips[b-o3gzxfbgdh] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.gap-chip[b-o3gzxfbgdh] {
    min-height: 2.75rem; /* 44px touch target on phones */
    padding: 0 .85rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-size: .95rem;
    cursor: pointer;
}

/* Hover is paired with focus-visible so the affordance exists for taps and keyboards too. */
.gap-chip:hover[b-o3gzxfbgdh],
.gap-chip:focus-visible[b-o3gzxfbgdh] {
    border-color: var(--accent);
    color: var(--accent);
}

/* A value a web lookup proposed. Highlighted, never pre-selected: the member is the one vouching
   for it, so the tap has to stay theirs. */
.gap-chip-suggested[b-o3gzxfbgdh] {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* What they actually picked, in the all-fields form where a tap selects rather than saves. Filled,
   so "chosen" is unmistakably louder than "suggested" — the same relationship .rating-pill-active
   has to a plain pill. */
.gap-chip-active[b-o3gzxfbgdh],
.gap-chip-active:hover[b-o3gzxfbgdh],
.gap-chip-active:focus-visible[b-o3gzxfbgdh] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

/* "Not listed" reads as secondary but stays a full-size chip: it has to be as easy to tap as a
   guess, or the careful answers are the ones we lose. */
.gap-chip-quiet[b-o3gzxfbgdh] {
    color: var(--muted);
    border-style: dashed;
}

.gap-chip:disabled[b-o3gzxfbgdh] {
    opacity: .55;
    cursor: default;
}

/* The free-text answer: input and Save stay on one line, and the input takes the slack. */
.gap-entry[b-o3gzxfbgdh] {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex: 1 1 16rem;
    min-width: 0;
}

.gap-entry input[b-o3gzxfbgdh] {
    min-height: 2.75rem;
    min-width: 0;
}

.gap-entry .btn[b-o3gzxfbgdh] {
    min-height: 2.75rem;
    white-space: nowrap;
}
/* /Components/CoffeeGapStrip.razor.rz.scp.css */
/* Four stacked questions in one card need a little separation, or the chips of one field read as
   belonging to the label of the next. A hairline rule is enough; boxes would make a form of it. */
.gap-field + .gap-field[b-6p84pgeddv] {
    border-top: 1px solid var(--line);
    padding-top: .6rem;
}
/* /Components/CoffeeIntakeWorkspace.razor.rz.scp.css */
/* Scoped styles for the shared intake workspace. Theme-agnostic (used under both the
   editorial and classic looks), built from the shared palette in wwwroot/app.css. */

/* ---- Edit affordance on the generated-profile card ------------------------- */
/* Icon-only pencil; the 44px square keeps the tap target comfortable. */
.edit-profile-btn[b-p4xq6gzv5g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.edit-profile-btn:hover[b-p4xq6gzv5g],
.edit-profile-btn:focus-visible[b-p4xq6gzv5g] {
    color: var(--accent);
    border-color: var(--accent);
}

.edit-profile-btn i[b-p4xq6gzv5g] {
    font-size: .95rem;
}

/* ---- Coffee Journey nudge (under the tasting-note chips) ------------------- */
.journey-nudge[b-p4xq6gzv5g] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: .25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
}

.journey-nudge span[b-p4xq6gzv5g] {
    white-space: nowrap;
}

.journey-nudge:hover[b-p4xq6gzv5g],
.journey-nudge:focus-visible[b-p4xq6gzv5g] {
    text-decoration: underline;
}

/* ---- Full-width send action ------------------------------------------------ */
/* Stretches whatever SendButton renders. ::deep reaches its child markup: a plain
   button (single Aiden) fills the width; the multi-Aiden split group fills it with
   the main action growing and the caret staying compact. */
.send-full[b-p4xq6gzv5g]  > .btn {
    width: 100%;
}

.send-full[b-p4xq6gzv5g]  > .btn-group {
    display: flex;
    width: 100%;
}

.send-full[b-p4xq6gzv5g]  > .btn-group > .btn {
    flex: 1 1 auto;
}

.send-full[b-p4xq6gzv5g]  > .btn-group > .dropdown-toggle-split {
    flex: 0 0 auto;
    width: auto;
}

/* ---- Edit-recipe drawer ---------------------------------------------------- */
/* Mirrors the editorial drawer's pattern (bottom sheet on phones, centred modal on
   desktop) but stands on its own so it renders under the classic look too. Always
   mounted; the `open` modifier drives the slide/fade transition. */
.ci-drawer-host[b-p4xq6gzv5g] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    pointer-events: none;
}

.ci-drawer-scrim[b-p4xq6gzv5g] {
    position: absolute;
    inset: 0;
    background: rgba(43, 33, 26, .32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.ci-drawer-host.open[b-p4xq6gzv5g] {
    pointer-events: auto;
}

.ci-drawer-host.open .ci-drawer-scrim[b-p4xq6gzv5g] {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile-first: a bottom sheet that slides up. */
.ci-drawer[b-p4xq6gzv5g] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(43, 33, 26, .18);
    transform: translateY(105%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.ci-drawer-host.open .ci-drawer[b-p4xq6gzv5g] {
    transform: translateY(0);
}

/* Grab handle affordance on the sheet. */
.ci-drawer[b-p4xq6gzv5g]::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-strong);
    margin: 8px auto 0;
}

.ci-drawer-head[b-p4xq6gzv5g] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 18px 0;
}

.ci-drawer-body[b-p4xq6gzv5g] {
    flex: 1;
    overflow: auto;
    padding: 14px 18px 18px;
}

.ci-drawer-foot[b-p4xq6gzv5g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}

.ci-drawer-close[b-p4xq6gzv5g] {
    margin-left: auto;
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

.ci-drawer-close:hover[b-p4xq6gzv5g],
.ci-drawer-close:focus-visible[b-p4xq6gzv5g] {
    color: var(--accent);
    border-color: var(--accent);
}

/* Desktop: a centred modal that scales/fades in. */
@media (min-width: 768px) {
    .ci-drawer[b-p4xq6gzv5g] {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(460px, calc(100% - 48px));
        max-height: min(88vh, 780px);
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(43, 33, 25, .22);
        transform: translate(-50%, -50%) scale(.96);
        opacity: 0;
        visibility: hidden;
        transition: transform .28s cubic-bezier(.22, .61, .36, 1),
                    opacity .28s ease,
                    visibility 0s linear .28s;
    }

    .ci-drawer-host.open .ci-drawer[b-p4xq6gzv5g] {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
        transition: transform .28s cubic-bezier(.22, .61, .36, 1),
                    opacity .28s ease;
    }

    .ci-drawer[b-p4xq6gzv5g]::before {
        display: none;
    }
}
/* /Components/GrindAdjustPanel.razor.rz.scp.css */
/* One stepper row per brew mode: Finer · setting · Coarser. Buttons stay 44px tall for thumbs;
   the setting takes the middle so a long reading (≈ 2.4.2, ≈ 27 clicks) never wraps the row. */
.grind-step-controls[b-h5vwryc6w2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grind-step-btn[b-h5vwryc6w2] {
    min-height: 44px;
    min-width: 92px;
    white-space: nowrap;
}

.grind-step-value[b-h5vwryc6w2] {
    flex: 1;
    text-align: center;
    font-family: var(--font-data);
    font-size: 20px;
    color: var(--ink);
    white-space: nowrap;
}
/* /Components/InstallAppLink.razor.rz.scp.css */
/* A link-styled button so it sits inline with the footer's anchors (which SiteFooter styles). */
.install-link[b-hr2vnl9f1a] {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
}

.install-link:hover[b-hr2vnl9f1a] {
    color: var(--accent-hover);
    text-decoration: underline;
}
/* /Components/InstallPrompt.razor.rz.scp.css */
/* Install guide modal. Mobile-first: a bottom sheet that slides up on phones; a centered card on
   wider screens. Styled entirely off the palette variables so it follows the active theme. */
.install-host[b-bqepkosx8j] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;      /* bottom sheet on phones */
    justify-content: center;
}

.install-scrim[b-bqepkosx8j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    animation: install-fade-b-bqepkosx8j 0.2s ease-out;
}

.install-sheet[b-bqepkosx8j] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    background: var(--surface, #fff);
    color: var(--ink, #211f1a);
    border-top-left-radius: var(--radius, 14px);
    border-top-right-radius: var(--radius, 14px);
    padding: 1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: install-slide-up-b-bqepkosx8j 0.28s cubic-bezier(0.05, 0.7, 0.25, 1);
}

.install-close[b-bqepkosx8j] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted, #7c7458);
    font-size: 1rem;
    border-radius: 50%;
    cursor: pointer;
}

.install-close:hover[b-bqepkosx8j],
.install-close:focus-visible[b-bqepkosx8j] {
    background: var(--surface-2, rgba(0, 0, 0, 0.05));
    color: var(--ink, #211f1a);
}

.install-app-icon[b-bqepkosx8j] {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    border: 1px solid var(--line, #e2d8bc);
    margin-bottom: 0.75rem;
}

.install-title[b-bqepkosx8j] {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0 0 0.4rem;
}

.install-sub[b-bqepkosx8j] {
    color: var(--muted, #7c7458);
    font-size: 0.95rem;
    margin: 0 auto 1.25rem;
    max-width: 24rem;
}

/* iOS steps — left-aligned inside the centered sheet, each with its glyph badge. */
.install-steps[b-bqepkosx8j] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    text-align: left;
}

.install-steps li[b-bqepkosx8j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    font-size: 0.95rem;
}

.install-steps li + li[b-bqepkosx8j] {
    border-top: 1px solid var(--line, #e2d8bc);
}

.install-step-ico[b-bqepkosx8j] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft, rgba(var(--accent-rgb, 46, 74, 62), 0.12));
    color: var(--accent, #2e4a3e);
    font-size: 1.15rem;
}

.install-later[b-bqepkosx8j] {
    margin-top: 0.5rem;
    color: var(--muted, #7c7458);
    text-decoration: none;
}

.install-later:hover[b-bqepkosx8j] {
    color: var(--ink, #211f1a);
}

@media (min-width: 768px) {
    .install-host[b-bqepkosx8j] {
        align-items: center;    /* centered card on desktop */
    }

    .install-sheet[b-bqepkosx8j] {
        max-width: 26rem;
        border-radius: var(--radius, 14px);
        padding: 2rem;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
        animation: install-pop-b-bqepkosx8j 0.22s cubic-bezier(0.05, 0.7, 0.25, 1);
    }
}

@keyframes install-fade-b-bqepkosx8j {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes install-slide-up-b-bqepkosx8j {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes install-pop-b-bqepkosx8j {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .install-scrim[b-bqepkosx8j],
    .install-sheet[b-bqepkosx8j] {
        animation: none;
    }
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* Same error-UI styling as MainLayout.razor.css — those rules are scoped to MainLayout, so
   this layout needs its own copy (without it the banner renders permanently visible). */
#blazor-error-ui[b-j49joeuw3k] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    color: #1A1D21;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-j49joeuw3k] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-cjjutrszy1] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    color: #1A1D21;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-cjjutrszy1] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vuokai2ak8],
.components-reconnect-repeated-attempt-visible[b-vuokai2ak8],
.components-reconnect-failed-visible[b-vuokai2ak8],
.components-pause-visible[b-vuokai2ak8],
.components-resume-failed-visible[b-vuokai2ak8],
.components-rejoining-animation[b-vuokai2ak8] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-vuokai2ak8 {
    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/AdminAnalytics.razor.rz.scp.css */
.activity-feed .list-group-item[b-br6j1aiam9] {
    background: var(--surface);
    border-color: var(--line);
}

.activity-icon[b-br6j1aiam9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: .8rem;
    color: var(--accent-contrast);
    background: var(--muted);
}

/* One color per activity family (see ActivityClass in the page). */
.activity-people[b-br6j1aiam9] {
    background: var(--accent);
}

.activity-content[b-br6j1aiam9] {
    background: rgb(var(--success-rgb));
}

.activity-community[b-br6j1aiam9] {
    background: var(--ink);
}

.activity-brewing[b-br6j1aiam9] {
    background: rgb(var(--info-rgb));
}

.activity-premium[b-br6j1aiam9] {
    background: rgb(var(--warning-rgb));
    color: var(--ink); /* white on the warning yellow is unreadable */
}

.activity-ai[b-br6j1aiam9] {
    background: var(--muted);
}

/* Premium charts tap through to the metric explorer; the card itself carries the look. */
.premium-trend[b-br6j1aiam9] {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.premium-trend-error[b-br6j1aiam9] {
    padding: .75rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, .5rem);
    background: var(--surface);
}
/* /Components/Pages/AdminCatalog.razor.rz.scp.css */
/* The maintenance grid needs more room than the site's reading column. .editorial-content caps
   content at 1320px (theme-editorial.css) and centres it, which left the nine columns overflowing
   into a horizontal scroll. This breaks just the grid out to the full viewport while the rest of
   the page keeps the normal measure.

   Deliberately not 100vw: that includes the vertical scrollbar's width and would itself cause a
   horizontal page scroll. The gutter keeps a little breathing room at both edges. */
.grid-bleed[b-smceetdxys] {
    --bleed-gutter: 1.25rem;
    width: calc(100vw - (2 * var(--bleed-gutter)));
    margin-inline: calc(50% - 50vw + var(--bleed-gutter));
}

/* Below the desktop breakpoint the reading column is already near full width, so bleeding adds
   nothing and the inner container's own overflow handles the width instead — that keeps the page
   itself from ever scrolling sideways. */
@media (max-width: 900px) {
    .grid-bleed[b-smceetdxys] {
        width: 100%;
        margin-inline: 0;
    }
}
/* /Components/Pages/CoffeeDetail.razor.rz.scp.css */
/* Coffee photo thumbnail; the click-to-enlarge overlay is the shared PhotoLightbox component. */

.coffee-thumb[b-1qsqqtj8ue] {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: .5rem;
    cursor: pointer;
}

.coffee-thumb:focus-visible[b-1qsqqtj8ue] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home (/ for signed-in members). Mobile first: one column in the spec's order. From 992px a
   two-column grid: current bag with the quick actions under it on the left; brewer row, your
   coffee, then the dismissible cards (attention, setup) on the right. The DOM stays in the mobile order (docs/home-page.md §3).
   Every colour reads the editorial palette; child-component markup is reached through ::deep. */

.home[b-whawe977d5] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.home[b-whawe977d5]  .home-head h1 {
    margin: 0;
}

.home[b-whawe977d5]  .home-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The left-column wrapper (bag + quick actions) only exists as a box on desktop; on phones its
   children sit straight in the one-column flow, and the quick actions show from their copy at the
   end of the grid instead (Home.razor renders them in both places). */
.home[b-whawe977d5]  .home-main {
    display: contents;
}

.home[b-whawe977d5]  .home-actions.home-actions-main {
    display: none;
}

/* Desktop: the fixed blocks lead both columns (the bag with the quick actions under it on the left;
   brewer row and your coffee on the right) and the dismissible cards (attention, setup) stack under
   them on the right, so dismissing one never moves the fixed blocks. The left block keeps its own
   height and spans the right-hand rows; a taller one pushes the slack into the empty 1fr row
   instead of spreading the right-hand cards apart. Spacing is a bottom margin on each block rather
   than a row gap: an absent block collapses its row to nothing, where a gap would still be left
   behind. */
@media (min-width: 992px) {
    .home[b-whawe977d5]  .home-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto 1fr;
        grid-template-areas:
            "main brewer"
            "main coffee"
            "main attn"
            "main strip"
            "main poll"
            "main .";
        gap: 0 28px;
        align-items: start;
    }

    .home[b-whawe977d5]  .home-grid > :not(.home-actions) {
        margin-bottom: 16px;
    }

    .home[b-whawe977d5]  .home-main {
        grid-area: main;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .home[b-whawe977d5]  .home-actions.home-actions-main { display: flex; }
    .home[b-whawe977d5]  .home-actions.home-actions-end { display: none; }

    .home[b-whawe977d5]  .home-attn,
    .home[b-whawe977d5]  .home-feedback { grid-area: attn; }
    .home[b-whawe977d5]  .home-brewer { grid-area: brewer; }
    .home[b-whawe977d5]  .home-coffee { grid-area: coffee; }
    .home[b-whawe977d5]  .home-checklist-under { grid-area: strip; }
    .home[b-whawe977d5]  .home-poll { grid-area: poll; }
}

/* ---- Shared text ------------------------------------------------------------------------ */
.home[b-whawe977d5]  .home-meta {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--muted);
}

.home[b-whawe977d5]  .home-muted { color: var(--muted); }
.home[b-whawe977d5]  .home-accent { color: var(--accent); }
.home[b-whawe977d5]  .home-strong { font-weight: 600; }

.home[b-whawe977d5]  .home-data {
    font: 500 12.5px/1.4 var(--font-data);
}

.home[b-whawe977d5]  .home-figure {
    font: 600 22px/1.1 var(--font-data);
    letter-spacing: -.02em;
    color: var(--ink);
}

.home[b-whawe977d5]  .home-chevron {
    flex-shrink: 0;
    color: var(--muted);
}

/* ---- Buttons -------------------------------------------------------------------------- */
.home[b-whawe977d5]  .home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: 600 14.5px/1.2 var(--font-body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.home[b-whawe977d5]  .home-btn:focus-visible,
.home[b-whawe977d5]  .home-row:focus-visible,
.home[b-whawe977d5]  .home-step:focus-visible,
.home[b-whawe977d5]  .home-coffee-row:focus-visible,
.home[b-whawe977d5]  .home-dismiss:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.home[b-whawe977d5]  .home-btn:disabled {
    opacity: .6;
    cursor: default;
}

.home[b-whawe977d5]  .home-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.home[b-whawe977d5]  .home-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

.home[b-whawe977d5]  .home-btn-ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--accent);
}

.home[b-whawe977d5]  .home-btn-ghost:hover { background: var(--surface); color: var(--accent); }
.home[b-whawe977d5]  .home-btn-quiet:hover { background: var(--surface-2); color: var(--ink); }

.home[b-whawe977d5]  .home-btn-lg {
    min-height: 48px;
}

.home[b-whawe977d5]  .home-btn .premium-cup {
    width: 18px;
    height: 18px;
}

.home[b-whawe977d5]  .home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.home[b-whawe977d5]  .home-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -10px -10px 0 0;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

/* ---- Cards + rows ---------------------------------------------------------------------- */
.home[b-whawe977d5]  .home-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.home[b-whawe977d5]  .home-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
}

.home[b-whawe977d5]  .home-row > .bi:first-child {
    color: var(--accent);
    font-size: 18px;
}

.home[b-whawe977d5]  .home-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* "Checking your Aiden…": the same footprint as the cup, so the row doesn't move when it resolves. */
.home[b-whawe977d5]  .home-row-spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
    color: var(--accent);
    flex-shrink: 0;
}

.home[b-whawe977d5]  .home-cup {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

/* "Brewing now": a quiet pulse, not a spinner. */
.home[b-whawe977d5]  .home-live {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.home[b-whawe977d5]  .home-live::before,
.home[b-whawe977d5]  .home-live::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.home[b-whawe977d5]  .home-live::before {
    inset: 1px;
    background: var(--zone-peak);
    opacity: .45;
    animation: home-pulse-b-whawe977d5 1.8s ease-in-out infinite;
}

.home[b-whawe977d5]  .home-live::after {
    inset: 6px;
    background: var(--accent);
}

@keyframes home-pulse-b-whawe977d5 {
    0%, 100% { transform: scale(.7); opacity: .5; }
    50% { transform: scale(1); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
    .home[b-whawe977d5]  .home-live::before { animation: none; }
}

/* ---- Attention card -------------------------------------------------------------------- */
.home[b-whawe977d5]  .home-attn {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    border: 1px solid #cddbd2;
}

.home[b-whawe977d5]  .home-attn-warn {
    background: var(--surface);
    border-color: var(--zone-rested);
}

.home[b-whawe977d5]  .home-attn-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.home[b-whawe977d5]  .home-attn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-tile);
    background: var(--surface);
    color: var(--accent);
    font-size: 18px;
}

.home[b-whawe977d5]  .home-attn-warn .home-attn-icon {
    background: var(--gold-soft);
    color: var(--gold-ink);
}

.home[b-whawe977d5]  .home-attn-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.home[b-whawe977d5]  .home-attn-title {
    font: 700 17px/1.3 var(--font-body);
    letter-spacing: -.01em;
    color: var(--ink);
}

.home[b-whawe977d5]  .home-attn-sub {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--accent-soft-ink);
}

.home[b-whawe977d5]  .home-attn-warn .home-attn-sub {
    color: var(--muted);
}

/* The embedded feedback banner IS the attention card on Home: it wears the card skin itself (no
   wrapper), so a dismissed or empty prompt leaves nothing on the page. */
.home[b-whawe977d5]  .home-feedback {
    margin: 0;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    border: 1px solid #cddbd2;
}

.home[b-whawe977d5]  .home-feedback > .card-body {
    padding: 0;
}

/* ---- Current bag ----------------------------------------------------------------------- */
.home[b-whawe977d5]  .home-bag-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.home[b-whawe977d5]  .home-bag-id {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.home[b-whawe977d5]  .home-bag-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.home[b-whawe977d5]  .home-bag-name {
    font: 700 20px/1.2 var(--font-body);
    letter-spacing: -.02em;
    color: var(--ink);
}

.home[b-whawe977d5]  .home-bag-day {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.home[b-whawe977d5]  .home-bag .bag-timeline {
    margin-top: 0;
    max-width: none;
}

.home[b-whawe977d5]  .home-bag-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.5;
}

.home[b-whawe977d5]  .home-note {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink);
}

.home[b-whawe977d5]  .home-autopilot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-soft-ink);
}

.home[b-whawe977d5]  .home-autopilot .bi {
    color: var(--accent);
}

.home[b-whawe977d5]  .home-bag-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home[b-whawe977d5]  .home-bag-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 16px;
    border-top: 1px solid var(--line);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
}

.home[b-whawe977d5]  .home-empty {
    padding: 16px;
    font-size: 14px;
    color: var(--muted);
}

@media (min-width: 768px) {
    .home[b-whawe977d5]  .home-bag-body {
        padding: 22px;
    }

    .home[b-whawe977d5]  .home-bag-name {
        font-size: 22px;
    }

    .home[b-whawe977d5]  .home-bag-actions {
        flex-direction: row;
        align-items: center;
    }

    .home[b-whawe977d5]  .home-bag-actions .home-btn {
        min-width: 200px;
    }

    .home[b-whawe977d5]  .home-bag-foot {
        padding: 0 22px;
    }
}

/* ---- Your coffee ------------------------------------------------------------------------ */
.home[b-whawe977d5]  .home-coffee {
    display: flex;
    flex-direction: column;
}

.home[b-whawe977d5]  .home-coffee > .micro-label {
    padding: 14px 16px 0;
}

.home[b-whawe977d5]  .home-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 10px 16px 16px;
}

.home[b-whawe977d5]  .home-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.home[b-whawe977d5]  .home-stats > div + div {
    padding-left: 12px;
    border-left: 1px solid var(--line);
}

.home[b-whawe977d5]  .home-stats .home-figure {
    font-size: 26px;
}

.home[b-whawe977d5]  .home-coffee-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
}

.home[b-whawe977d5]  .home-coffee > .micro-label + .home-coffee-row {
    margin-top: 10px;
}

.home[b-whawe977d5]  .home-coffee-row > .bi:first-child {
    font-size: 18px;
    flex-shrink: 0;
}

.home[b-whawe977d5]  .home-coffee-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.home[b-whawe977d5]  .home-line {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
}

.home[b-whawe977d5]  .home-premium-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: var(--radius-tag);
    background: var(--gold-soft);
    color: var(--gold-ink);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* ---- Getting started: the setup card (first run, and under the blocks) -------------------- */
.home[b-whawe977d5]  .home-checklist-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--line);
}

.home[b-whawe977d5]  .home-checklist-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.home[b-whawe977d5]  .home-checklist-title h2 {
    margin: 0;
    font: 700 19px/1.3 var(--font-body);
    letter-spacing: -.01em;
    color: var(--ink);
    text-transform: none;
}

.home[b-whawe977d5]  .home-checklist-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.home[b-whawe977d5]  .home-checklist-count .home-dismiss {
    margin: -12px -12px -12px 0;
}

.home[b-whawe977d5]  .home-checklist-under .home-checklist-title h2 {
    font-size: 17px;
}

.home[b-whawe977d5]  .home-checklist-head p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}

.home[b-whawe977d5]  .home-progress {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
}

.home[b-whawe977d5]  .home-progress span {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
}

.home[b-whawe977d5]  .home-progress span.done {
    background: var(--accent);
}

.home[b-whawe977d5]  .home-step {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
}

.home[b-whawe977d5]  .home-step:last-child {
    border-bottom: none;
}

.home[b-whawe977d5]  .home-step-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    color: var(--accent);
    font: 600 13px/1 var(--font-data);
    box-sizing: border-box;
}

.home[b-whawe977d5]  .home-step.done .home-step-mark {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
}

.home[b-whawe977d5]  .home-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.home[b-whawe977d5]  .home-step-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.home[b-whawe977d5]  .home-step.done .home-step-title {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--line-strong);
}

/* ---- Quick actions --------------------------------------------------------------------- */
.home[b-whawe977d5]  .home-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 768px) {
    .home[b-whawe977d5]  .home-actions {
        flex-direction: row;
    }

    .home[b-whawe977d5]  .home-actions .home-btn {
        flex: 1 1 0;
    }
}

/* ---- Poll (PollCard) ------------------------------------------------------------------- */
.home[b-whawe977d5]  .home-poll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* Recreated 1:1 from design_handoff_landing_page/Landing Page.html (Toasted Sand palette).
   Values are final — don't round or "normalize" them. Differences from the reference on purpose:
   - .btn/.btn-primary/.btn-ghost are .lp-btn/.lp-btn-primary/.lp-btn-ghost (Bootstrap collision);
   - the product-shot <iframe>s are static <img> screenshots;
   - the nav bar wears the app TopNav's skin (60/52px, kettle brand, 13.5px links) instead of
     the reference's 64px "AP"-tile bar, and the footer is the shared <SiteFooter/> — the site
     and the landing must read as one product;
   - the palette variables live on .landing (not :root) so the page is always Toasted Sand,
     whatever theme the visitor's device has picked for the app. */

.landing[b-qexe2qbbxu] {
    --bg: #F8F1E2;
    --surface: #FFFDF6;
    --surface-2: #F0E8D3;
    --line: #E2D8BC;
    --line-strong: #C9BC9A;
    --ink: #211F1A;
    --muted: #7C7458;
    --accent: #2E4A3E;
    --accent-hover: #243B31;
    --hero-fg: #F2EFE4;
    --hero-muted: #C4D2C6;
    --gold: #C9922E;
    --gold-soft: #F3E7C8;
    --gold-ink: #6E5210;
    --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", Consolas, monospace;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.6 var(--font);
    text-wrap: pretty;
}

a[b-qexe2qbbxu] { color: var(--accent); text-decoration: none; }
a:hover[b-qexe2qbbxu] { color: var(--accent-hover); }

.wrap[b-qexe2qbbxu] { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.eyebrow[b-qexe2qbbxu] { font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.lp-btn[b-qexe2qbbxu] { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 10px; font: 600 15px var(--font); border: none; cursor: pointer; transition: background .15s; }
.lp-btn-primary[b-qexe2qbbxu] { background: var(--accent); color: #fff; }
.lp-btn-primary:hover[b-qexe2qbbxu] { background: var(--accent-hover); color: #fff; }
.lp-btn-ghost[b-qexe2qbbxu] { background: transparent; color: var(--accent); border: 1px solid var(--line-strong); }
.lp-btn-ghost:hover[b-qexe2qbbxu] { background: var(--surface); }

/* The bar mirrors the app TopNav's skin (60px, blur 6, 13.5px links, kettle brand) so the
   landing and the app read as one site; the links/CTAs stay marketing-specific. */
nav[b-qexe2qbbxu] { position: sticky; top: 0; z-index: 10; background: rgba(252, 248, 238, .85); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
/* Same centered 1320px column as the app TopNav (not the page's 1080px .wrap), so the brand
   and the right-hand cluster sit in exactly the same spot on every page of the site. */
.nav-in[b-qexe2qbbxu] { display: flex; align-items: center; gap: 26px; height: 60px; max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.logo[b-qexe2qbbxu] { display: flex; align-items: center; gap: 10px; font: 700 15px var(--font); letter-spacing: -.01em; color: var(--ink); }
.logo:hover[b-qexe2qbbxu] { color: var(--ink); }
.nav-links[b-qexe2qbbxu] { display: flex; gap: 26px; margin: 0 auto; font: 500 13.5px var(--font); }
.nav-links a[b-qexe2qbbxu] { color: var(--muted); transition: color .15s ease; }
.nav-links a:hover[b-qexe2qbbxu] { color: var(--accent); }
.nav-cta[b-qexe2qbbxu] { padding: 9px 18px; border-radius: 8px; background: var(--accent); color: #fff; font: 600 14px var(--font); }
.nav-cta:hover[b-qexe2qbbxu] { background: var(--accent-hover); color: #fff; }

header[b-qexe2qbbxu] { padding: 88px 0 0; text-align: center; }
h1[b-qexe2qbbxu] { font: 700 clamp(38px, 5.5vw, 58px)/1.08 var(--font); letter-spacing: -.03em; margin: 18px auto 0; max-width: 15ch; }
.sub[b-qexe2qbbxu] { font: 400 19px/1.55 var(--font); color: var(--muted); max-width: 52ch; margin: 20px auto 0; }
.hero-ctas[b-qexe2qbbxu] { display: flex; gap: 14px; justify-content: center; margin-top: 32px; }
.hero-note[b-qexe2qbbxu] { margin-top: 14px; font: 400 13px var(--font); color: var(--muted); }

.shot[b-qexe2qbbxu] { margin: 64px auto 0; max-width: 1020px; border: 1px solid var(--line-strong); border-radius: 16px 16px 0 0; border-bottom: none; overflow: hidden; background: var(--surface); box-shadow: 0 30px 80px -30px rgba(33, 31, 26, .35); }
.shot-bar[b-qexe2qbbxu] { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.shot-bar i[b-qexe2qbbxu] { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.shot-vp[b-qexe2qbbxu] { height: 560px; overflow: hidden; }
.shot-vp img[b-qexe2qbbxu] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-phone[b-qexe2qbbxu] { display: none; }

.band[b-qexe2qbbxu] { background: var(--accent); color: var(--hero-fg); }
.band .wrap[b-qexe2qbbxu] { display: flex; gap: 48px; justify-content: center; padding: 26px 32px; flex-wrap: wrap; }
.stat[b-qexe2qbbxu] { text-align: center; }
.stat b[b-qexe2qbbxu] { display: block; font: 600 22px var(--mono); letter-spacing: -.02em; }
.stat span[b-qexe2qbbxu] { font: 400 13px var(--font); color: var(--hero-muted); }

section[b-qexe2qbbxu] { padding: 96px 0; }
.sec-hd[b-qexe2qbbxu] { max-width: 56ch; margin-bottom: 52px; }
h2[b-qexe2qbbxu] { font: 700 clamp(26px, 3.4vw, 36px)/1.15 var(--font); letter-spacing: -.02em; margin: 12px 0 0; }
.sec-hd p[b-qexe2qbbxu] { color: var(--muted); font-size: 17px; margin: 14px 0 0; }

.feat-grid[b-qexe2qbbxu] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat[b-qexe2qbbxu] { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.feat .ic[b-qexe2qbbxu] { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; margin-bottom: 16px; }
.feat h3[b-qexe2qbbxu] { font: 600 17px var(--font); margin: 0 0 8px; letter-spacing: -.01em; }
.feat p[b-qexe2qbbxu] { font-size: 14.5px; color: var(--muted); margin: 0; }

/* Icon and heading share one line: the icon labels the heading rather than standing as its
   own row, and stacking them spent a whole line of height per card on phones. The paragraph
   spans both columns underneath. Scoped to #features - the catalog section's cards carry no
   icon, and a two-column grid there would squeeze their headings. */
#features .feat[b-qexe2qbbxu] { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
#features .feat .ic[b-qexe2qbbxu] { margin-bottom: 0; }
#features .feat h3[b-qexe2qbbxu] { margin: 0; }
#features .feat p[b-qexe2qbbxu] { grid-column: 1 / -1; margin-top: 12px; }

.how[b-qexe2qbbxu] { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.steps[b-qexe2qbbxu] { display: flex; flex-direction: column; gap: 0; }
.step[b-qexe2qbbxu] { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.step:last-child[b-qexe2qbbxu] { border-bottom: none; }
.step b.num[b-qexe2qbbxu] { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font: 600 13px var(--mono); color: var(--accent); }
.step h3[b-qexe2qbbxu] { font: 600 16px var(--font); margin: 4px 0 6px; }
.step p[b-qexe2qbbxu] { font-size: 14.5px; color: var(--muted); margin: 0; }

.phone[b-qexe2qbbxu] { width: 340px; height: 600px; margin: 0 auto; border-radius: 38px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 24px 60px -24px rgba(33, 31, 26, .35); overflow: hidden; position: relative; }
.phone img[b-qexe2qbbxu] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.premium[b-qexe2qbbxu] { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.premium .wrap[b-qexe2qbbxu] { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.gold-chip[b-qexe2qbbxu] { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: var(--gold-soft); color: var(--gold-ink); font: 600 12px var(--font); letter-spacing: .04em; text-transform: uppercase; }
.premium ul[b-qexe2qbbxu] { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.premium li[b-qexe2qbbxu] { display: flex; gap: 11px; font-size: 15px; align-items: baseline; }
.premium li[b-qexe2qbbxu]::before { content: "—"; color: var(--gold); font-weight: 700; }
/* The reference's testimonial card slot, reused for the AutoPilot sample. The 1em 40px margin
   reproduces the browser-default <figure> inset the prototype rendered with. */
.quote-card[b-qexe2qbbxu] { margin: 1em 40px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 30px; }
.quote-card .ap-row[b-qexe2qbbxu] { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--line-strong); }
.quote-card .ap-row:first-of-type[b-qexe2qbbxu] { margin-top: 10px; }
.quote-card .ap-row:last-of-type[b-qexe2qbbxu] { border-bottom: none; }
.quote-card .ap-row b[b-qexe2qbbxu] { flex: none; min-width: 52px; font: 600 12px var(--mono); color: var(--accent); }
.quote-card .ap-row span[b-qexe2qbbxu] { font-size: 14.5px; line-height: 1.5; }
.quote-card .ap-note[b-qexe2qbbxu] { margin: 12px 0 0; font: 400 13.5px var(--font); color: var(--muted); }

.cta-final[b-qexe2qbbxu] { text-align: center; padding: 110px 0; }
.cta-final h2[b-qexe2qbbxu] { max-width: 20ch; margin: 12px auto 0; }

@media (max-width: 900px) {
    .feat-grid[b-qexe2qbbxu] { grid-template-columns: 1fr; }
    .how[b-qexe2qbbxu], .premium .wrap[b-qexe2qbbxu] { grid-template-columns: 1fr; }
    .shot-vp[b-qexe2qbbxu] { height: 440px; }
}

@media (max-width: 640px) {
    .wrap[b-qexe2qbbxu] { padding: 0 20px; }
    .nav-links[b-qexe2qbbxu] { display: none; }
    /* With the links hidden, their auto margins are gone — push the CTAs right again. */
    .nav-in .lp-btn-ghost[b-qexe2qbbxu] { margin-left: auto; }
    /* The app TopNav compresses to a 52px header on phones — mirror it (incl. 16px padding). */
    .nav-in[b-qexe2qbbxu] { height: 52px; gap: 12px; padding: 0 16px; }
    .logo[b-qexe2qbbxu] { font-size: 16px; letter-spacing: -.02em; }
    header[b-qexe2qbbxu] { padding: 56px 0 0; }
    .sub[b-qexe2qbbxu] { font-size: 16.5px; }
    .hero-ctas[b-qexe2qbbxu] { flex-direction: column; align-items: center; }
    /* Every CTA on the page takes the hero buttons' width, not just the hero pair: a column of
       buttons that agree on one width reads as one set of choices, while content-width buttons
       further down look like leftovers. display:flex (not inline-flex) so margin-inline:auto
       centres them inside the plain divs the section CTAs sit in. */
    header .lp-btn[b-qexe2qbbxu],
    section .lp-btn[b-qexe2qbbxu] {
        display: flex;
        width: 100%;
        max-width: 320px;
        margin-inline: auto;
        justify-content: center;
    }
    section[b-qexe2qbbxu] { padding: 64px 0; }
    .sec-hd[b-qexe2qbbxu] { margin-bottom: 32px; }
    .shot[b-qexe2qbbxu] { display: none; }
    .hero-phone[b-qexe2qbbxu] { display: block; margin-top: 48px; }
    .band .wrap[b-qexe2qbbxu] { gap: 22px; padding: 22px 20px; }
    .stat b[b-qexe2qbbxu] { font-size: 18px; }
    .how[b-qexe2qbbxu] { gap: 40px; }
    .phone[b-qexe2qbbxu] { width: 300px; height: 530px; }
    .cta-final[b-qexe2qbbxu] { padding: 72px 0; }
}
/* /Components/Pages/MyBags.razor.rz.scp.css */
/* The shelf (/my-bags). Mobile first: one column; a bag's details open in the editorial bottom
   sheet. From 992px the details become a sticky side panel beside a 720px shelf column. Every
   rule reads the editorial palette (theme-editorial.css); markup rendered by child components
   (the drawer, rating pills, journal) is reached through ::deep. */

.bags[b-5q9j7cxuwf] {
    display: block;
}

.bags[b-5q9j7cxuwf]  .bags-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* ---- Heading ------------------------------------------------------------------------- */
.bags[b-5q9j7cxuwf]  .bags-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.bags[b-5q9j7cxuwf]  .bags-head h1 {
    margin: 0;
}

.bags[b-5q9j7cxuwf]  .bags-eyebrow {
    display: block;
    margin-bottom: 6px;
    font: 600 11px/1.3 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---- Shared text ------------------------------------------------------------------------ */
.bags[b-5q9j7cxuwf]  .bags-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.bags[b-5q9j7cxuwf]  .bags-meta {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.bags[b-5q9j7cxuwf]  .bags-data {
    font: 500 12px/1.4 var(--font-data);
    color: var(--ink);
}

.bags[b-5q9j7cxuwf]  .bags-count {
    font: 600 13px/1 var(--font-data);
    color: var(--muted);
    letter-spacing: 0;
}

.bags[b-5q9j7cxuwf]  .bags-warn {
    color: var(--gold-ink);
}

/* ---- Buttons ---------------------------------------------------------------------------- */
.bags[b-5q9j7cxuwf]  .bags-btn,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: 600 14px/1.2 var(--font-body);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.bags[b-5q9j7cxuwf]  .bags-btn:hover,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.bags[b-5q9j7cxuwf]  .bags-btn:focus-visible,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn:focus-visible,
.bags[b-5q9j7cxuwf]  .bags-row:focus-visible,
.bags[b-5q9j7cxuwf]  .bags-fold-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.bags[b-5q9j7cxuwf]  .bags-btn:disabled,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn:disabled {
    opacity: .6;
    cursor: default;
}

.bags[b-5q9j7cxuwf]  .bags-btn-primary,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.bags[b-5q9j7cxuwf]  .bags-btn-primary:hover,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

.bags[b-5q9j7cxuwf]  .bags-btn-ghost,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn-ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--accent);
}

.bags[b-5q9j7cxuwf]  .bags-btn-ghost:hover,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn-ghost:hover {
    background: var(--surface);
    color: var(--accent);
}

.bags[b-5q9j7cxuwf]  .bags-btn-danger,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn-danger {
    background: transparent;
    color: #b02a37;
}

.bags[b-5q9j7cxuwf]  .bags-btn-danger:hover,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn-danger:hover {
    background: #fbeaec;
    color: #b02a37;
}

.bags[b-5q9j7cxuwf]  .bags-btn-danger-solid,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn-danger-solid {
    background: #b02a37;
    border-color: #b02a37;
    color: #ffffff;
}

.bags[b-5q9j7cxuwf]  .bags-btn-danger-solid:hover,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn-danger-solid:hover {
    background: #962330;
    color: #ffffff;
}

.bags[b-5q9j7cxuwf]  .bags-btn-sm,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-btn-sm {
    min-height: 40px;
    padding: 6px 12px;
}

.bags[b-5q9j7cxuwf]  .bags-grow,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-grow {
    flex: 1 1 0;
}

.bags[b-5q9j7cxuwf]  .bags-link,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    padding: 0;
    border: none;
    background: none;
    font: 500 13px/1.3 var(--font-body);
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}

/* ---- Free-tier nudge strip ------------------------------------------------------------------ */
.bags[b-5q9j7cxuwf]  .bags-nudge {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--gold-soft);
    color: var(--gold-ink);
    font-size: 13.5px;
    line-height: 1.5;
}

.bags[b-5q9j7cxuwf]  .bags-nudge-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bags[b-5q9j7cxuwf]  .bags-nudge-actions .btn {
    flex: 1 1 auto;
}

@media (min-width: 768px) {
    .bags[b-5q9j7cxuwf]  .bags-nudge {
        flex-direction: row;
        align-items: center;
    }

    .bags[b-5q9j7cxuwf]  .bags-nudge-actions .btn {
        flex: 0 0 auto;
    }
}

/* ---- Brew this next ---------------------------------------------------------------------- */
.bags[b-5q9j7cxuwf]  .bags-next {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--zone-peak);
    border-radius: var(--radius);
}

.bags[b-5q9j7cxuwf]  .bags-next.selected {
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* The tappable top half (photo, name, days left): a real button, styled as plain card content. */
.bags[b-5q9j7cxuwf]  .bags-next-hit {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: -6px;
    padding: 6px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.bags[b-5q9j7cxuwf]  .bags-next-hit:hover .bags-next-name {
    color: var(--accent);
}

.bags[b-5q9j7cxuwf]  .bags-next-hit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.bags[b-5q9j7cxuwf]  .bags-next-id {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.bags[b-5q9j7cxuwf]  .bags-next-id > .bags-chevron {
    margin-left: auto;
    align-self: center;
}

.bags[b-5q9j7cxuwf]  .bags-next-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bags[b-5q9j7cxuwf]  .bags-next-eyebrow {
    color: var(--accent);
}

.bags[b-5q9j7cxuwf]  .bags-next-name {
    font: 700 20px/1.2 var(--font-body);
    letter-spacing: -.02em;
    color: var(--ink);
    text-decoration: none;
}

.bags[b-5q9j7cxuwf]  .bags-next-name:hover {
    color: var(--accent);
}

.bags[b-5q9j7cxuwf]  .bags-next-left {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.bags[b-5q9j7cxuwf]  .bags-next-days {
    font: 600 22px/1.1 var(--font-data);
    letter-spacing: -.02em;
    color: var(--ink);
}

.bags[b-5q9j7cxuwf]  .bags-next .bag-timeline {
    margin-top: 0;
    max-width: none;
}

.bags[b-5q9j7cxuwf]  .bags-next-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 768px) {
    .bags[b-5q9j7cxuwf]  .bags-next {
        padding: 22px;
    }

    .bags[b-5q9j7cxuwf]  .bags-next-name {
        font-size: 24px;
    }

    .bags[b-5q9j7cxuwf]  .bags-next-days {
        font-size: 24px;
    }

    .bags[b-5q9j7cxuwf]  .bags-next-actions {
        flex-direction: row;
    }
}

/* ---- Notes (tinted one-liners) -------------------------------------------------------------- */
.bags[b-5q9j7cxuwf]  .bags-note,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.5;
}

.bags[b-5q9j7cxuwf]  .bags-note .bi,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-note .bi {
    color: var(--accent);
    margin-top: 1px;
}

.bags[b-5q9j7cxuwf]  .bags-note-accent,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-note-accent {
    background: var(--accent-soft);
    color: var(--accent-soft-ink);
}

/* ---- Groups + rows ----------------------------------------------------------------------- */
.bags[b-5q9j7cxuwf]  .bags-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bags[b-5q9j7cxuwf]  .bags-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
}

.bags[b-5q9j7cxuwf]  .bags-group-head h2 {
    margin: 0;
    font: 700 17px/1.3 var(--font-body);
    letter-spacing: -.01em;
    color: var(--ink);
    text-transform: none;
}

.bags[b-5q9j7cxuwf]  .bags-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.bags[b-5q9j7cxuwf]  .bags-row-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--line);
}

.bags[b-5q9j7cxuwf]  .bags-card > .bags-row-wrap:last-child {
    border-bottom: none;
}

.bags[b-5q9j7cxuwf]  .bags-row-wrap > .bags-btn {
    margin-right: 16px;
    flex-shrink: 0;
}

.bags[b-5q9j7cxuwf]  .bags-row-wrap.selected {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}

.bags[b-5q9j7cxuwf]  .bags-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 72px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}

.bags[b-5q9j7cxuwf]  .bags-row:hover .bags-name {
    color: var(--accent);
}

.bags[b-5q9j7cxuwf]  .bags-row-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.bags[b-5q9j7cxuwf]  .bags-row-body > .bags-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bags[b-5q9j7cxuwf]  .bags-row-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.bags[b-5q9j7cxuwf]  .bags-row-facts {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bags[b-5q9j7cxuwf]  .bags-chevron {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 16px;
}

.bags[b-5q9j7cxuwf]  .bags-badge-frozen,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-badge-frozen {
    background: #e3eef8;
    color: #2f5673;
}

.bags[b-5q9j7cxuwf]  .bags-score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font: 600 12.5px/1 var(--font-data);
    color: var(--gold-ink);
}

.bags[b-5q9j7cxuwf]  .bags-rate-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 12px;
    font-weight: 600;
}

/* The row's mini freshness bar (premium). Zone widths arrive inline as invariant percentages. */
.bags[b-5q9j7cxuwf]  .bags-mini {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 72px;
    height: 6px;
    border-radius: 999px;
}

.bags[b-5q9j7cxuwf]  .bags-mini .z-rest {
    background: var(--zone-fresh);
    border-radius: 999px 0 0 999px;
}

.bags[b-5q9j7cxuwf]  .bags-mini .z-ready {
    background: var(--zone-peak);
}

.bags[b-5q9j7cxuwf]  .bags-mini .z-tired {
    flex: 1;
    background: var(--zone-rested);
    border-radius: 0 999px 999px 0;
}

.bags[b-5q9j7cxuwf]  .bags-mini-dot {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(33, 31, 26, .35);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .bags[b-5q9j7cxuwf]  .bags-mini {
        width: 96px;
    }

    .bags[b-5q9j7cxuwf]  .bags-row {
        padding: 14px 20px;
    }
}

/* ---- Collapsed groups (freezer, finished) ------------------------------------------------ */
.bags[b-5q9j7cxuwf]  .bags-fold-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--muted);
}

.bags[b-5q9j7cxuwf]  .bags-fold-head[aria-expanded="true"] {
    border-bottom: 1px solid var(--line);
}

.bags[b-5q9j7cxuwf]  .bags-fold-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.bags[b-5q9j7cxuwf]  .bags-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-tile);
    background: var(--surface-2);
    color: var(--accent);
    font-size: 16px;
}

.bags[b-5q9j7cxuwf]  .bags-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border: none;
    border-top: 1px solid var(--line);
    background: transparent;
    font: 600 13.5px/1.2 var(--font-body);
    color: var(--accent);
    cursor: pointer;
}

/* ---- Details: shared by the sheet and the panel -------------------------------------------- */
.bags[b-5q9j7cxuwf]  .bags-detail-head,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-detail-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.bags[b-5q9j7cxuwf]  .bags-thumb-btn,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-thumb-btn {
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    flex-shrink: 0;
}

.bags[b-5q9j7cxuwf]  .bags-detail-id,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-detail-id {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bags[b-5q9j7cxuwf]  .bags-detail-title,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-detail-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font: 700 18px/1.25 var(--font-body);
    letter-spacing: -.01em;
    color: var(--ink);
}

.bags[b-5q9j7cxuwf]  .bags-detail,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bags[b-5q9j7cxuwf]  .bags-detail .bag-timeline,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-detail .bag-timeline {
    margin-top: 0;
    max-width: none;
}

.bags[b-5q9j7cxuwf]  .bags-section,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Dashed key/value rows for the dates (and the AutoPilot switch). */
.bags[b-5q9j7cxuwf]  .bags-kv,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--line);
}

.bags[b-5q9j7cxuwf]  .bags-kv > label,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-kv > label {
    margin: 0;
    font: 600 11px/1.3 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.bags[b-5q9j7cxuwf]  .bags-kv-plain,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-kv-plain {
    border-bottom: none;
    min-height: 44px;
    padding: 0;
}

.bags[b-5q9j7cxuwf]  .bags-kv-plain > label,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-kv-plain > label {
    font: 600 15px/1.3 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.bags[b-5q9j7cxuwf]  .bags-kv-plain > label.bags-busy,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-kv-plain > label.bags-busy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--muted);
}

.bags[b-5q9j7cxuwf]  .bags-busy .spinner-border,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-busy .spinner-border {
    width: 14px;
    height: 14px;
    border-width: 2px;
    color: var(--accent);
}

.bags[b-5q9j7cxuwf]  .bags-kv .form-control,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-kv .form-control {
    width: auto;
    min-height: 40px;
    font: 500 14px/1 var(--font-data);
}

.bags[b-5q9j7cxuwf]  .bags-kv-controls,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-kv-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Switch: a real checkbox over a drawn track. */
.bags[b-5q9j7cxuwf]  .bags-switch,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 48px;
    height: 28px;
}

.bags[b-5q9j7cxuwf]  .bags-switch input,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.bags[b-5q9j7cxuwf]  .bags-switch-track,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-switch-track {
    position: relative;
    display: block;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: background .15s ease;
}

.bags[b-5q9j7cxuwf]  .bags-switch-track::after,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(33, 31, 26, .3);
    transition: left .15s ease;
}

.bags[b-5q9j7cxuwf]  .bags-switch input:checked + .bags-switch-track,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-switch input:checked + .bags-switch-track {
    background: var(--accent);
}

.bags[b-5q9j7cxuwf]  .bags-switch input:checked + .bags-switch-track::after,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-switch input:checked + .bags-switch-track::after {
    left: 23px;
}

.bags[b-5q9j7cxuwf]  .bags-switch input:focus-visible + .bags-switch-track,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-switch input:focus-visible + .bags-switch-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.bags[b-5q9j7cxuwf]  .bags-switch input:disabled + .bags-switch-track,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-switch input:disabled + .bags-switch-track {
    opacity: .6;
}

/* AutoPilot push history + morning schedule. */
.bags[b-5q9j7cxuwf]  .bags-push,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-push {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
}

.bags[b-5q9j7cxuwf]  .bags-push:last-child,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-push:last-child {
    border-bottom: none;
}

.bags[b-5q9j7cxuwf]  .bags-push-when,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-push-when {
    flex-shrink: 0;
    font: 600 11px/1.4 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.bags[b-5q9j7cxuwf]  .bags-push-what,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-push-what {
    font: 500 12.5px/1.4 var(--font-data);
    text-align: right;
}

.bags[b-5q9j7cxuwf]  .bags-schedule,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-schedule {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card-sm, 12px);
    background: #fdfcf9;
}

.bags[b-5q9j7cxuwf]  .bags-schedule-fields,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-schedule-fields {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.bags[b-5q9j7cxuwf]  .bags-schedule-fields > div,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-schedule-fields > div {
    flex: 1 1 0;
}

.bags[b-5q9j7cxuwf]  .bags-schedule .form-control,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-schedule .form-control {
    min-height: 44px;
    font-size: 16px;
}

.bags[b-5q9j7cxuwf]  .bags-days,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bags[b-5q9j7cxuwf]  .bags-day,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-day {
    min-width: 44px;
    min-height: 40px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.bags[b-5q9j7cxuwf]  .bags-day.on,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-day.on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

/* Photo + actions + inline confirms. */
.bags[b-5q9j7cxuwf]  .bags-photo-drop,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-photo-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 64px;
    margin: 0;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-card-sm, 12px);
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
}

.bags[b-5q9j7cxuwf]  .bags-photo-drop:hover,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-photo-drop:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Phones: camera + library side by side in the same drop footprint. */
.bags[b-5q9j7cxuwf]  .bags-photo-drops,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-photo-drops {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bags[b-5q9j7cxuwf]  .bags-photo-actions,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.bags[b-5q9j7cxuwf]  .bags-actions,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bags[b-5q9j7cxuwf]  .bags-confirm,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: -8px;
}

.bags[b-5q9j7cxuwf]  .bags-confirm > .bags-meta,
.bags-sheet-host[b-5q9j7cxuwf]  .bags-confirm > .bags-meta {
    flex: 1 1 100%;
}

/* ---- Side panel (desktop) / bottom sheet (phones) ----------------------------------------- */
.bags[b-5q9j7cxuwf]  .bags-panel {
    display: none;
}

.bags-sheet-host[b-5q9j7cxuwf]  .drawer-foot .bags-btn {
    flex: 1 1 auto;
}

@media (min-width: 992px) {
    .bags[b-5q9j7cxuwf] {
        display: grid;
        grid-template-columns: minmax(0, 720px) minmax(340px, 1fr);
        gap: 32px;
        align-items: start;
    }

    .bags-sheet-host[b-5q9j7cxuwf] {
        display: none;
    }

    .bags[b-5q9j7cxuwf]  .bags-panel {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 76px;
        margin-top: 76px;
        max-height: calc(100vh - 92px);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-drawer, 16px);
        overflow: hidden;
    }

    .bags[b-5q9j7cxuwf]  .bags-panel-head {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 20px 22px 0;
    }

    .bags[b-5q9j7cxuwf]  .bags-panel-head > .bags-detail-head {
        flex: 1 1 auto;
        min-width: 0;
    }

    .bags[b-5q9j7cxuwf]  .bags-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: var(--surface);
        color: var(--muted);
        cursor: pointer;
    }

    .bags[b-5q9j7cxuwf]  .bags-panel-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 20px 22px 22px;
    }

    .bags[b-5q9j7cxuwf]  .bags-panel-foot {
        display: flex;
        padding: 14px 22px;
        border-top: 1px solid var(--line);
        background: var(--drawer-foot, #fdfcf9);
    }

    .bags[b-5q9j7cxuwf]  .bags-panel-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 48px 28px;
        text-align: center;
        font-size: 14px;
        color: var(--muted);
    }

    .bags[b-5q9j7cxuwf]  .bags-panel-empty .bi {
        font-size: 24px;
        color: var(--accent);
    }
}

/* The current bag's opened line and newest journal note (the headline card). */
.bags[b-5q9j7cxuwf]  .bags-next-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.bags[b-5q9j7cxuwf]  .bags-next-note {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13.5px;
    color: var(--ink);
}
/* /Components/Pages/Premium.razor.rz.scp.css */
/* The plan cards grow slightly on hover so the pricing reads as clickable. */
.plan-card[b-oooafkyi7c] {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.plan-card:hover[b-oooafkyi7c] {
    transform: scale(1.03);
    box-shadow: var(--bs-box-shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
    .plan-card[b-oooafkyi7c],
    .plan-card:hover[b-oooafkyi7c] {
        transition: none;
        transform: none;
    }
}
/* /Components/Pages/RegisterMachine.razor.rz.scp.css */
/* The account page (/account). Mobile first: one column, jump chips under the heading. From 992px
   an "On this page" index sits beside a 780px content column. Every rule reads the editorial palette
   (theme-editorial.css); rows rendered by child components (RecapEmailSetting, GapAskSetting) are
   reached through ::deep. */

.acct[b-p8doko8h9i] {
    display: block;
}

.acct[b-p8doko8h9i]  .acct-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

/* ---- Heading ------------------------------------------------------------------------ */
.acct[b-p8doko8h9i]  .acct-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acct[b-p8doko8h9i]  .acct-eyebrow {
    font: 600 11px/1.3 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.acct[b-p8doko8h9i]  .acct-head h1 {
    margin: 0;
}

.acct[b-p8doko8h9i]  .acct-lead {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 52ch;
}

/* ---- Section index: phone jump chips, desktop side list ------------------------------ */
.acct[b-p8doko8h9i]  .acct-jump {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 2px;
    scrollbar-width: none;
}

.acct[b-p8doko8h9i]  .acct-jump a {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.acct[b-p8doko8h9i]  .acct-jump a:hover,
.acct[b-p8doko8h9i]  .acct-jump a:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.acct[b-p8doko8h9i]  .acct-index {
    display: none;
}

/* Section anchors stop clear of the sticky top nav. */
.acct[b-p8doko8h9i]  .acct-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-margin-top: 66px;
}

@media (min-width: 992px) {
    .acct[b-p8doko8h9i] {
        display: grid;
        grid-template-columns: 220px minmax(0, 780px);
        gap: 48px;
        align-items: start;
    }

    .acct[b-p8doko8h9i]  .acct-jump {
        display: none;
    }

    .acct[b-p8doko8h9i]  .acct-index {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: sticky;
        top: 90px;
        padding-top: 96px;
    }

    .acct[b-p8doko8h9i]  .acct-index nav {
        display: flex;
        flex-direction: column;
    }

    .acct[b-p8doko8h9i]  .acct-index a {
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 0 12px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-weight: 500;
        color: var(--muted);
        text-decoration: none;
    }

    .acct[b-p8doko8h9i]  .acct-index a:hover,
    .acct[b-p8doko8h9i]  .acct-index a:focus-visible {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .acct[b-p8doko8h9i]  .acct-main {
        gap: 36px;
    }

    .acct[b-p8doko8h9i]  .acct-section {
        scroll-margin-top: 76px;
    }
}

/* ---- Section heading ---------------------------------------------------------------- */
.acct[b-p8doko8h9i]  .acct-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.acct[b-p8doko8h9i]  .acct-section-head h2 {
    margin: 0;
    font: 700 19px/1.3 var(--font-body);
    letter-spacing: -.01em;
    color: var(--ink);
    text-transform: none;
}

.acct[b-p8doko8h9i]  .acct-section-head p {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
}

/* Phones: section subtitles would crowd the heading's button; the heading alone carries it. */
@media (max-width: 767.98px) {
    .acct[b-p8doko8h9i]  .acct-section-head p {
        display: none;
    }
}

/* ---- Card + rows -------------------------------------------------------------------- */
.acct[b-p8doko8h9i]  .acct-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: visible;
}

.acct[b-p8doko8h9i]  .acct-card-gold {
    border-color: #e8d9ae;
}

.acct[b-p8doko8h9i]  .acct-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.acct[b-p8doko8h9i]  .acct-card > .acct-row:last-child {
    border-bottom: none;
}

.acct[b-p8doko8h9i]  .acct-row-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
    min-width: 0;
}

.acct[b-p8doko8h9i]  .acct-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.acct[b-p8doko8h9i]  .acct-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
}

.acct[b-p8doko8h9i]  .acct-meta {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.acct[b-p8doko8h9i]  .acct-row-note {
    font-size: 13px;
    color: var(--muted);
    display: block;
}

/* A section's own loader: holds the section's place while only its data is still on the way. */
.acct[b-p8doko8h9i]  .acct-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
}

.acct[b-p8doko8h9i]  .acct-row-block {
    display: block;
}

.acct[b-p8doko8h9i]  .acct-row-quiet {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13.5px;
    color: var(--muted);
}

.acct[b-p8doko8h9i]  .acct-row-locked .acct-row-body > :first-child {
    opacity: .75;
}

.acct[b-p8doko8h9i]  .acct-row-split {
    flex-direction: column;
    align-items: stretch;
}

.acct[b-p8doko8h9i]  .acct-login {
    font: 500 14px/1.4 var(--font-data);
    color: var(--ink);
}

.acct[b-p8doko8h9i]  .acct-error {
    font-size: 13px;
    color: #b02a37;
}

@media (min-width: 768px) {
    .acct[b-p8doko8h9i]  .acct-row {
        padding: 16px 22px;
    }

    .acct[b-p8doko8h9i]  .acct-row-split {
        flex-direction: row;
        align-items: center;
    }
}

/* Icon tile at the start of a row. */
.acct[b-p8doko8h9i]  .acct-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-tile);
    background: var(--surface-2);
    color: var(--accent);
    font-size: 18px;
}

.acct[b-p8doko8h9i]  .acct-tile-accent {
    background: var(--accent-soft);
}

.acct[b-p8doko8h9i]  .acct-tile-gold {
    background: var(--gold-soft);
    color: var(--gold-ink);
}

.acct[b-p8doko8h9i]  .acct-cup {
    width: 24px;
    height: 24px;
}

.acct[b-p8doko8h9i]  .acct-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ---- Buttons ------------------------------------------------------------------------- */
.acct[b-p8doko8h9i]  .acct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: 600 14px/1.2 var(--font-body);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.acct[b-p8doko8h9i]  .acct-btn:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.acct[b-p8doko8h9i]  .acct-btn:focus-visible,
.acct[b-p8doko8h9i]  .acct-icon-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.acct[b-p8doko8h9i]  .acct-btn:disabled,
.acct[b-p8doko8h9i]  .acct-icon-btn:disabled {
    opacity: .6;
    cursor: default;
}

.acct[b-p8doko8h9i]  .acct-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.acct[b-p8doko8h9i]  .acct-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

.acct[b-p8doko8h9i]  .acct-btn-ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--accent);
}

.acct[b-p8doko8h9i]  .acct-btn-ghost:hover {
    background: var(--surface);
    color: var(--accent);
}

.acct[b-p8doko8h9i]  .acct-btn-danger {
    background: transparent;
    color: #b02a37;
}

.acct[b-p8doko8h9i]  .acct-btn-danger:hover {
    background: #fbeaec;
    color: #b02a37;
}

.acct[b-p8doko8h9i]  .acct-btn-danger-solid {
    background: #b02a37;
    border-color: #b02a37;
    color: #ffffff;
}

.acct[b-p8doko8h9i]  .acct-btn-danger-solid:hover {
    background: #962330;
    color: #ffffff;
}

.acct[b-p8doko8h9i]  .acct-btn-lg {
    min-height: 48px;
    padding: 12px 20px;
    border-radius: var(--radius-tile);
    font-size: 15px;
}

.acct[b-p8doko8h9i]  .acct-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

.acct[b-p8doko8h9i]  .acct-icon-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.acct[b-p8doko8h9i]  .acct-icon-btn-danger {
    color: #b02a37;
}

.acct[b-p8doko8h9i]  .acct-icon-btn-danger:hover {
    border-color: #b02a37;
    color: #b02a37;
}

/* Phones: the login row's two buttons share the width. */
@media (max-width: 767.98px) {
    .acct[b-p8doko8h9i]  .acct-row-split .acct-actions > .acct-btn {
        flex: 1 1 0;
    }
}

/* ---- Plan card ----------------------------------------------------------------------- */
.acct[b-p8doko8h9i]  .acct-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.acct[b-p8doko8h9i]  .acct-plan .acct-row-body {
    flex: 1 1 240px;
}

.acct[b-p8doko8h9i]  .acct-plan-name {
    font: 700 17px/1.3 var(--font-body);
    letter-spacing: -.01em;
    color: var(--ink);
}

.acct[b-p8doko8h9i]  .acct-plan-cta,
.acct[b-p8doko8h9i]  .acct-plan > .acct-btn {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .acct[b-p8doko8h9i]  .acct-plan-cta,
    .acct[b-p8doko8h9i]  .acct-plan > .acct-btn {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .acct[b-p8doko8h9i]  .acct-plan {
        padding: 18px 22px;
        gap: 18px;
    }
}

/* ---- Trial welcome + connect-page trial note ----------------------------------------- */
.acct[b-p8doko8h9i]  .acct-welcome {
    padding: 16px;
    background: var(--surface);
}

.acct[b-p8doko8h9i]  .acct-welcome-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.acct[b-p8doko8h9i]  .acct-welcome h2 {
    margin: 0 0 6px;
    font: 700 17px/1.3 var(--font-body);
    color: var(--ink);
    text-transform: none;
    letter-spacing: -.01em;
}

.acct[b-p8doko8h9i]  .acct-welcome h2 .premium-cup {
    color: var(--gold-ink);
}

.acct[b-p8doko8h9i]  .acct-welcome p {
    margin: 0 0 4px;
    font-size: 13.5px;
    color: var(--muted);
}

.acct[b-p8doko8h9i]  .acct-welcome ul {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}

.acct[b-p8doko8h9i]  .acct-welcome li a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    text-decoration: none;
}

.acct[b-p8doko8h9i]  .acct-small-link {
    font-size: 13px;
}

.acct[b-p8doko8h9i]  .acct-trial-note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--gold-soft);
    color: var(--gold-ink);
    font-size: 13.5px;
    line-height: 1.5;
}

.acct[b-p8doko8h9i]  .acct-trial-note strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---- Connect form -------------------------------------------------------------------- */
.acct[b-p8doko8h9i]  .acct-connect {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px;
}

.acct[b-p8doko8h9i]  .acct-connect .ed-step-label {
    margin-bottom: 0;
}

.acct[b-p8doko8h9i]  .acct-connect .form-control {
    min-height: 44px;
    font-size: 16px; /* no iOS zoom on focus */
}

@media (min-width: 768px) {
    .acct[b-p8doko8h9i]  .acct-connect {
        padding: 22px;
        max-width: 480px;
    }

    .acct[b-p8doko8h9i]  .acct-connect .acct-btn-lg {
        align-self: flex-start;
    }
}

/* ---- Profiles on the brewer ----------------------------------------------------------- */
.acct[b-p8doko8h9i]  .acct-storage {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.acct[b-p8doko8h9i]  .acct-storage-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.acct[b-p8doko8h9i]  .acct-storage-count {
    font: 600 13px/1.2 var(--font-data);
    color: var(--ink);
}

.acct[b-p8doko8h9i]  .acct-storage-bar {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 3px;
}

.acct[b-p8doko8h9i]  .acct-storage-bar span {
    height: 8px;
    border-radius: 2px;
    background: var(--surface-2);
}

.acct[b-p8doko8h9i]  .acct-storage-bar span.used {
    background: var(--accent);
}

.acct[b-p8doko8h9i]  .acct-batch {
    flex-wrap: wrap;
    gap: 8px;
    background: var(--drawer-foot, #fdfcf9);
}

.acct[b-p8doko8h9i]  .acct-check {
    width: 22px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
}

.acct[b-p8doko8h9i]  .acct-rename {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.acct[b-p8doko8h9i]  .acct-rename .form-control {
    flex: 1 1 12rem;
    min-height: 44px;
    font-size: 16px;
}

.acct[b-p8doko8h9i]  .acct-disclosure {
    width: 100%;
    min-height: 48px;
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
    justify-content: space-between;
}

.acct[b-p8doko8h9i]  .acct-disclosure:hover {
    color: var(--accent);
}

.acct[b-p8doko8h9i]  .acct-card > .acct-disclosure:last-child {
    border-bottom: none;
}

/* ---- Grinder picker ------------------------------------------------------------------ */
.acct[b-p8doko8h9i]  .acct-grinder-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.acct[b-p8doko8h9i]  .acct-grinder-pick .form-control {
    min-height: 44px;
    font-size: 16px;
}

.acct[b-p8doko8h9i]  .acct-grinder-pick > .position-relative {
    flex: 1 1 14rem;
}

/* ---- Preference switch rows ----------------------------------------------------------- */
.acct[b-p8doko8h9i]  .acct-pref {
    align-items: flex-start;
}

.acct[b-p8doko8h9i]  .acct-pref .acct-name {
    cursor: pointer;
}

.acct[b-p8doko8h9i]  .acct-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 48px;
    height: 28px;
    margin-top: 8px;
}

.acct[b-p8doko8h9i]  .acct-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.acct[b-p8doko8h9i]  .acct-switch input:disabled {
    cursor: default;
}

.acct[b-p8doko8h9i]  .acct-switch-track {
    position: relative;
    display: block;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: background .15s ease;
}

.acct[b-p8doko8h9i]  .acct-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(33, 31, 26, .3);
    transition: left .15s ease;
}

.acct[b-p8doko8h9i]  .acct-switch input:checked + .acct-switch-track {
    background: var(--accent);
}

.acct[b-p8doko8h9i]  .acct-switch input:checked + .acct-switch-track::after {
    left: 23px;
}

.acct[b-p8doko8h9i]  .acct-switch input:focus-visible + .acct-switch-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.acct[b-p8doko8h9i]  .acct-switch input:disabled + .acct-switch-track {
    opacity: .6;
}

/* ---- Footer --------------------------------------------------------------------------- */
.acct[b-p8doko8h9i]  .acct-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
    .acct[b-p8doko8h9i]  .acct-foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
/* /Components/PhotoLightbox.razor.rz.scp.css */
.photo-lightbox[b-o39af3gnkq] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, .8);
    cursor: zoom-out;
}

    .photo-lightbox:focus[b-o39af3gnkq] {
        outline: none;
    }

.photo-lightbox-img[b-o39af3gnkq] {
    max-width: min(92vw, 900px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: .5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5);
    cursor: default;
}

.photo-lightbox-close[b-o39af3gnkq] {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    line-height: 1;
    font-size: 1.75rem;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

    .photo-lightbox-close:hover[b-o39af3gnkq],
    .photo-lightbox-close:focus-visible[b-o39af3gnkq] {
        background: rgba(0, 0, 0, .6);
        outline: none;
    }
/* /Components/PollBody.razor.rz.scp.css */
/* The poll's inner content; the dialog and the Home card supply the frame. Mobile first. */
.poll[b-sc3ppqi2bq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.poll-q[b-sc3ppqi2bq] {
    margin: 0;
    padding-right: 32px;        /* clear of the dialog's close button */
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--ink);
}

.poll-sub[b-sc3ppqi2bq] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted);
}

.poll-choices[b-sc3ppqi2bq],
.poll-results[b-sc3ppqi2bq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poll-choice[b-sc3ppqi2bq] {
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--accent);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.poll-choice:hover:not(:disabled)[b-sc3ppqi2bq] {
    background: var(--accent);
    color: var(--surface);
}

.poll-choice:disabled[b-sc3ppqi2bq] {
    opacity: 0.6;
    cursor: default;
}

.poll-label[b-sc3ppqi2bq] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--ink);
}

.poll-pct[b-sc3ppqi2bq] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.poll-bar[b-sc3ppqi2bq] {
    height: 10px;
    margin-top: 4px;
    border-radius: 5px;
    background: var(--surface-2);
    overflow: hidden;
}

.poll-bar > span[b-sc3ppqi2bq] {
    display: block;
    height: 100%;
    background: var(--accent);
}

/* The inline "add it to your home screen" link: a button (it opens the install guide), styled as
   text so it reads as part of the sentence. */
.poll-link[b-sc3ppqi2bq] {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
/* /Components/PollDialog.razor.rz.scp.css */
/* Poll dialog (PollDialog). Same modal skeleton as the install guide and the recap ask; CSS
   isolation means their sheet rules cannot reach this markup, so they are mirrored here (change
   one, change the others). Class names stay identical on purpose; isolation keeps the copies
   from colliding. */
.install-host[b-uu3yjg4ct4] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;      /* bottom sheet on phones */
    justify-content: center;
}

.install-scrim[b-uu3yjg4ct4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    animation: install-fade-b-uu3yjg4ct4 0.2s ease-out;
}

.install-sheet[b-uu3yjg4ct4] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    background: var(--surface, #fff);
    color: var(--ink, #211f1a);
    border-top-left-radius: var(--radius, 14px);
    border-top-right-radius: var(--radius, 14px);
    padding: 1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: install-slide-up-b-uu3yjg4ct4 0.28s cubic-bezier(0.05, 0.7, 0.25, 1);
}

.install-close[b-uu3yjg4ct4] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted, #7c7458);
    font-size: 1rem;
    border-radius: 50%;
    cursor: pointer;
}

.install-close:hover[b-uu3yjg4ct4],
.install-close:focus-visible[b-uu3yjg4ct4] {
    background: var(--surface-2, rgba(0, 0, 0, 0.05));
    color: var(--ink, #211f1a);
}

.install-title[b-uu3yjg4ct4] {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0 0 0.4rem;
}

.install-sub[b-uu3yjg4ct4] {
    color: var(--muted, #7c7458);
    font-size: 0.95rem;
    margin: 0 auto 1.25rem;
    max-width: 24rem;
}

.install-later[b-uu3yjg4ct4] {
    margin-top: 0.5rem;
    color: var(--muted, #7c7458);
    text-decoration: none;
}

.install-later:hover[b-uu3yjg4ct4] {
    color: var(--ink, #211f1a);
}

@media (min-width: 768px) {
    .install-host[b-uu3yjg4ct4] {
        align-items: center;    /* centered card on desktop */
    }

    .install-sheet[b-uu3yjg4ct4] {
        max-width: 26rem;
        border-radius: var(--radius, 14px);
        padding: 2rem;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
        animation: install-pop-b-uu3yjg4ct4 0.22s cubic-bezier(0.05, 0.7, 0.25, 1);
    }
}

@keyframes install-fade-b-uu3yjg4ct4 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes install-slide-up-b-uu3yjg4ct4 {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes install-pop-b-uu3yjg4ct4 {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .install-scrim[b-uu3yjg4ct4],
    .install-sheet[b-uu3yjg4ct4] {
        animation: none;
    }
}

.install-sheet[b-uu3yjg4ct4] {
    text-align: left;
}

.poll-eyebrow[b-uu3yjg4ct4] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.install-later[b-uu3yjg4ct4] {
    display: block;
    width: 100%;
    min-height: 44px;
}
/* /Components/RecapOptInPrompt.razor.rz.scp.css */
/* Recap opt-in dialog. Same modal skeleton as the install guide — mobile-first bottom sheet,
   centered card on wider screens — but Blazor CSS isolation means InstallPrompt.razor.css cannot
   style this component's markup, so the sheet rules are mirrored here (the same deal as the wire
   DTOs and GlossaryCatalog/LooksLikeNoteList: change one, change the other). Class names are kept
   identical on purpose; isolation keeps the two copies from ever colliding. */
.install-host[b-12av5pjt8p] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;      /* bottom sheet on phones */
    justify-content: center;
}

.install-scrim[b-12av5pjt8p] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    animation: install-fade-b-12av5pjt8p 0.2s ease-out;
}

.install-sheet[b-12av5pjt8p] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    background: var(--surface, #fff);
    color: var(--ink, #211f1a);
    border-top-left-radius: var(--radius, 14px);
    border-top-right-radius: var(--radius, 14px);
    padding: 1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: install-slide-up-b-12av5pjt8p 0.28s cubic-bezier(0.05, 0.7, 0.25, 1);
}

.install-close[b-12av5pjt8p] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted, #7c7458);
    font-size: 1rem;
    border-radius: 50%;
    cursor: pointer;
}

.install-close:hover[b-12av5pjt8p],
.install-close:focus-visible[b-12av5pjt8p] {
    background: var(--surface-2, rgba(0, 0, 0, 0.05));
    color: var(--ink, #211f1a);
}

.install-title[b-12av5pjt8p] {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0 0 0.4rem;
}

.install-sub[b-12av5pjt8p] {
    color: var(--muted, #7c7458);
    font-size: 0.95rem;
    margin: 0 auto 1.25rem;
    max-width: 24rem;
}

.install-later[b-12av5pjt8p] {
    margin-top: 0.5rem;
    color: var(--muted, #7c7458);
    text-decoration: none;
}

.install-later:hover[b-12av5pjt8p] {
    color: var(--ink, #211f1a);
}

@media (min-width: 768px) {
    .install-host[b-12av5pjt8p] {
        align-items: center;    /* centered card on desktop */
    }

    .install-sheet[b-12av5pjt8p] {
        max-width: 26rem;
        border-radius: var(--radius, 14px);
        padding: 2rem;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
        animation: install-pop-b-12av5pjt8p 0.22s cubic-bezier(0.05, 0.7, 0.25, 1);
    }
}

@keyframes install-fade-b-12av5pjt8p {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes install-slide-up-b-12av5pjt8p {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes install-pop-b-12av5pjt8p {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .install-scrim[b-12av5pjt8p],
    .install-sheet[b-12av5pjt8p] {
        animation: none;
    }
}
/* /Components/SendButton.razor.rz.scp.css */
/* The "sent" checkmark draws itself in and pops slightly — the element is inserted the
   moment a send succeeds, so the animations run exactly once per success. */
.send-check[b-uihwk6ie7w] {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    animation: send-check-pop-b-uihwk6ie7w 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.send-check path[b-uihwk6ie7w] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* 15 ≈ the path's length; drawing = sliding the dash offset back to 0. */
    stroke-dasharray: 15;
    stroke-dashoffset: 15;
    animation: send-check-draw-b-uihwk6ie7w 0.4s ease-out 0.1s forwards;
}

@keyframes send-check-pop-b-uihwk6ie7w {
    0% { transform: scale(0.4); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes send-check-draw-b-uihwk6ie7w {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .send-check[b-uihwk6ie7w] { animation: none; }
    .send-check path[b-uihwk6ie7w] { animation: none; stroke-dashoffset: 0; }
}
/* /Components/SiteFooter.razor.rz.scp.css */
/* Metrics from the landing-page design's footer (design_handoff_landing_page/README.md §9),
   colors from the surrounding theme's palette variables. */
.site-footer[b-v88kwcac19] {
    border-top: 1px solid var(--line);
    padding: 28px 0;
    color: var(--muted);
    font-size: 13px;
}

.site-footer .wrap[b-v88kwcac19] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.site-footer a[b-v88kwcac19] {
    color: var(--accent);
    text-decoration: none;
}

.site-footer a:hover[b-v88kwcac19] {
    color: var(--accent-hover);
}

@media (max-width: 640px) {
    .site-footer .wrap[b-v88kwcac19] {
        padding: 0 20px;
        justify-content: center;
        text-align: center;
    }
}
/* /Components/StatCard.razor.rz.scp.css */
.stat-card-wrap[b-0fpj2ucy36] {
    position: relative;
    height: 100%;
}

.stat-card[b-0fpj2ucy36] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, .5rem);
    padding: .75rem .9rem;
    height: 100%;
}

.stat-card-head[b-0fpj2ucy36] {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--muted);
    /* Keep long labels clear of the corner "?" button. */
    padding-right: 1.2rem;
}

.stat-card-head .bi[b-0fpj2ucy36] {
    color: var(--accent);
}

.stat-label[b-0fpj2ucy36] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.stat-value[b-0fpj2ucy36] {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
    margin-top: .15rem;
}

.stat-sub[b-0fpj2ucy36] {
    margin-top: .1rem;
}

/* The corner "?": tap-friendly explanation toggle (hover tooltips don't exist on touch). */
.stat-help-btn[b-0fpj2ucy36] {
    position: absolute;
    top: .4rem;
    right: .45rem;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: .7rem;
    line-height: 1;
}

.stat-help-btn:hover[b-0fpj2ucy36],
.stat-help-btn[aria-expanded="true"][b-0fpj2ucy36] {
    color: var(--accent);
    border-color: var(--line-strong);
}

/* Catches clicks outside the open bubble and dismisses it. */
.stat-help-backdrop[b-0fpj2ucy36] {
    position: fixed;
    inset: 0;
    z-index: 9;
    background: transparent;
}

/* The explanation bubble, laid over the tile; clicking it dismisses. */
.stat-help-pop[b-0fpj2ucy36] {
    position: absolute;
    z-index: 10;
    top: 1.8rem;
    right: .4rem;
    left: .4rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm, .5rem);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    font-size: .8rem;
    line-height: 1.35;
    box-shadow: var(--card-shadow-hover);
    cursor: pointer;
}

/* Locked (Premium teaser) tiles: same silhouette, blurred number, subtle invite on hover. */
a.stat-card-locked[b-0fpj2ucy36] {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.stat-card-locked:hover[b-0fpj2ucy36] {
    border-color: var(--bs-warning, #d9a406);
}

.stat-card-locked .stat-value[b-0fpj2ucy36] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.stat-blur[b-0fpj2ucy36] {
    filter: blur(7px);
    user-select: none;
    opacity: .7;
}

.stat-lock[b-0fpj2ucy36] {
    font-size: 1rem;
}
/* /Components/TopList.razor.rz.scp.css */
.top-list[b-837mekgr0i] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.top-head[b-837mekgr0i] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.top-label[b-837mekgr0i] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
}

.top-count[b-837mekgr0i] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--accent);
}

.top-bar[b-837mekgr0i] {
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: .15rem;
}

.top-bar > span[b-837mekgr0i] {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
}

.top-sub[b-837mekgr0i] {
    display: block;
    max-width: 100%;
}
/* /Components/TrendChart.razor.rz.scp.css */
.trend-chart[b-akuzhhptkt] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, .5rem);
    padding: .75rem .9rem;
    height: 100%;
}

/* Sized to the ApexCharts height so the card doesn't jump when the chart mounts client-side. */
.trend-plot[b-akuzhhptkt] {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The chart div itself should span the card, not be centered as a shrunk flex item. */
.trend-plot[b-akuzhhptkt] >  div {
    width: 100%;
}

.trend-empty[b-akuzhhptkt] {
    margin: 0 auto;
}