/* /Components/Account/Shared/ExternalLoginPicker.razor.rz.scp.css */
.external-divider[b-eniggf1pzo] {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--ink-faint);
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: var(--space-4) 0;
}

.external-divider[b-eniggf1pzo]::before,
.external-divider[b-eniggf1pzo]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.external-divider span[b-eniggf1pzo] {
    padding: 0 var(--space-2);
}

.external-logins form[b-eniggf1pzo] {
    margin: 0;
}

.external-logins form + form[b-eniggf1pzo] {
    margin-top: var(--space-2);
}

.btn-social[b-eniggf1pzo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 13px 28px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn-social:hover[b-eniggf1pzo] {
    background: var(--ink);
    color: var(--white);
}

.btn-social-icon[b-eniggf1pzo] {
    width: 18px;
    height: 18px;
    /* Keep the brand mark full-colour even when the button inverts on hover. */
    background: var(--white);
    border-radius: 2px;
    padding: 1px;
    box-sizing: border-box;
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-rdtfoq8mg2] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--cream);
}

.auth-figure[b-rdtfoq8mg2] {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.auth-figure img[b-rdtfoq8mg2] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-figure[b-rdtfoq8mg2]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.55), transparent 40%);
}

.auth-figure figcaption[b-rdtfoq8mg2] {
    position: absolute;
    left: var(--space-5);
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 1;
}

    .auth-figure .auth-figure-quote[b-rdtfoq8mg2] {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 2.2vw, 2rem);
        line-height: 1.25;
        color: var(--white);
        margin: 0;
    }

.auth-figure .auth-figure-quote em[b-rdtfoq8mg2] {
    font-style: italic;
}

.auth-panel[b-rdtfoq8mg2] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
}

.auth-card[b-rdtfoq8mg2] {
    width: 100%;
    max-width: 500px;
    animation: fade-up-b-rdtfoq8mg2 240ms ease-out;
}

.auth-wordmark[b-rdtfoq8mg2] {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-4);
    letter-spacing: 0.02em;
    display: flex;
}

.auth-wordmark img[b-rdtfoq8mg2] {
    width: 220px;
}

.auth-card[b-rdtfoq8mg2]  .auth-title {
    font-size: var(--text-title);
    margin-bottom: var(--space-1);
}

.auth-card[b-rdtfoq8mg2]  .auth-lead {
    color: var(--ink-soft);
    margin-bottom: var(--space-3);
}

.auth-card[b-rdtfoq8mg2]  .auth-switch {
    color: var(--ink-soft);
    font-size: var(--text-meta);
    margin: var(--space-3) 0 0;
}

@media (max-width: 900px) {
    .auth-shell[b-rdtfoq8mg2] {
        grid-template-columns: 1fr;
    }

    .auth-figure[b-rdtfoq8mg2] {
        display: none;
    }

    .auth-panel[b-rdtfoq8mg2] {
        padding: var(--space-5) var(--space-3);
    }
}

@keyframes fade-up-b-rdtfoq8mg2 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card[b-rdtfoq8mg2] {
        animation: none;
    }
}

#blazor-error-ui[b-rdtfoq8mg2] {
    color-scheme: light only;
    background: var(--clay-mist);
    color: var(--clay-deep);
    border-top: 1px solid var(--clay);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: var(--text-meta);
}

#blazor-error-ui .dismiss[b-rdtfoq8mg2] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
.landing-shell[b-sk4o81f0kf] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.landing-header[b-sk4o81f0kf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--ink);
}

.wordmark[b-sk4o81f0kf] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
    text-decoration: none;
}

    .wordmark img[b-sk4o81f0kf] {
        width: 240px;
    }


.wordmark:hover[b-sk4o81f0kf] {
    color: var(--rose-deep);
}

.landing-nav[b-sk4o81f0kf] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.landing-nav[b-sk4o81f0kf]  .btn-primary,
.landing-nav .btn-primary[b-sk4o81f0kf] {
    padding: 10px 20px;
}

/* The start-planning CTA posts a form; let the button sit as a flex child. */
.landing-nav form[b-sk4o81f0kf] {
    display: contents;
}

main[b-sk4o81f0kf] {
    flex: 1;
}

#blazor-error-ui[b-sk4o81f0kf] {
    display: none;
}

@media (max-width: 719px) {
    .landing-header[b-sk4o81f0kf] {
        padding: var(--space-2);
    }

    .landing-nav[b-sk4o81f0kf] {
        gap: var(--space-2);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-69kv8jec37] {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 100vh;
}

/* ---------- Sidebar ---------- */

.sidebar[b-69kv8jec37] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-2);
    border-right: 1px solid var(--line);
    background: var(--cream);
    position: sticky;
    top: 0;
    height: 100vh;
}

.wordmark[b-69kv8jec37] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0 var(--space-2);
    letter-spacing: 0.02em;
}

.wordmark:hover[b-69kv8jec37] {
    color: var(--rose-deep);
}

.nav[b-69kv8jec37] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* NavLink renders its own <a>, so target it via ::deep from the scoped .nav */
.nav[b-69kv8jec37]  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px var(--space-2);
    border-radius: 999px;
    color: var(--ink-soft);
    font-weight: 400;
    transition: background var(--transition), color var(--transition);
}

.nav[b-69kv8jec37]  .nav-item:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.7);
}

.nav[b-69kv8jec37]  .nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav[b-69kv8jec37]  .nav-item.active {
    background: var(--rose-mist);
    color: var(--rose-deep);
    font-weight: 500;
}

/* ---------- Account ---------- */

.sidebar-account[b-69kv8jec37] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-2);
    border-top: 1px solid var(--line);
}

.account-email[b-69kv8jec37] {
    font-size: var(--text-meta);
    color: var(--ink-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signout[b-69kv8jec37] {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    cursor: pointer;
    text-align: left;
    transition: color var(--transition);
}

.signout:hover[b-69kv8jec37] {
    color: var(--rose-deep);
}

.signout.confirm[b-69kv8jec37] {
    color: var(--clay-deep);
    font-weight: 500;
}

.signout.confirm:hover[b-69kv8jec37] {
    color: var(--clay-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.confirm-text[b-69kv8jec37] {
    font-size: var(--text-meta);
    color: var(--ink-soft);
    margin: 4px 0 2px;
    line-height: 1.35;
}

.save-plan[b-69kv8jec37] {
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--rose-deep);
    transition: color var(--transition);
}

.save-plan:hover[b-69kv8jec37] {
    color: var(--ink);
}

/* ---------- Ghost banner ---------- */

.ghost-banner[b-69kv8jec37] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--space-1);
    background: var(--rose-mist);
    color: var(--rose-deep);
    border-radius: var(--radius-input);
    padding: 10px 16px;
    font-size: var(--text-meta);
    margin-bottom: var(--space-3);
}

.ghost-banner a[b-69kv8jec37] {
    color: var(--rose-deep);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition);
}

.ghost-banner a:hover[b-69kv8jec37] {
    color: var(--ink);
}

/* ---------- Content ---------- */

.content[b-69kv8jec37] {
    padding: var(--space-5) var(--space-4);
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}

/* ---------- Mobile: bottom tab bar ---------- */

@media (max-width: 719px) {
    .app-shell[b-69kv8jec37] {
        grid-template-columns: 1fr;
    }

    .sidebar[b-69kv8jec37] {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        flex-direction: row;
        align-items: center;
        padding: 6px var(--space-1);
        border-right: none;
        border-top: 1px solid var(--line);
        background: var(--white);
        z-index: 100;
    }

    .wordmark[b-69kv8jec37],
    .sidebar-account[b-69kv8jec37] {
        display: none;
    }

    .nav[b-69kv8jec37] {
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        gap: 0;
    }

    .nav[b-69kv8jec37]  .nav-item {
        flex-direction: column;
        gap: 2px;
        padding: 6px 10px;
        font-size: 0.7rem;
        border-radius: 12px;
    }

    .content[b-69kv8jec37] {
        padding: var(--space-3) var(--space-2) calc(var(--space-7));
    }
}

/* ---------- Framework error bar (calm restyle) ---------- */

#blazor-error-ui[b-69kv8jec37] {
    color-scheme: light only;
    background: var(--clay-mist);
    color: var(--clay-deep);
    border-top: 1px solid var(--clay);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: var(--text-meta);
}

#blazor-error-ui .dismiss[b-69kv8jec37] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#blazor-error-ui .reload[b-69kv8jec37] {
    color: var(--clay-deep);
    text-decoration: underline;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ix6639iivk],
.components-reconnect-repeated-attempt-visible[b-ix6639iivk],
.components-reconnect-failed-visible[b-ix6639iivk],
.components-pause-visible[b-ix6639iivk],
.components-resume-failed-visible[b-ix6639iivk],
.components-rejoining-animation[b-ix6639iivk] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-ix6639iivk {
    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/Layout/SiteFooter.razor.rz.scp.css */
.site-footer[b-pirf6bfsut] {
    border-top: 1px solid var(--line);
    background: var(--white);
}

.site-footer-inner[b-pirf6bfsut] {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-5) var(--space-3) var(--space-3);
}

.site-footer-top[b-pirf6bfsut] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    justify-content: space-between;
    align-items: flex-start;
}

.site-footer-brand[b-pirf6bfsut] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 200px;
}

.wordmark-small[b-pirf6bfsut] {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
}

.site-footer-brand .meta[b-pirf6bfsut] {
    margin: 0;
}

.site-footer-nav[b-pirf6bfsut] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.site-footer-newsletter[b-pirf6bfsut] {
    flex: 1 1 360px;
    max-width: 460px;
}

.site-footer-bottom[b-pirf6bfsut] {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

@media (max-width: 719px) {
    .site-footer-inner[b-pirf6bfsut] {
        padding: var(--space-4) var(--space-2) var(--space-2);
    }

    .site-footer-top[b-pirf6bfsut] {
        gap: var(--space-4);
    }
}
/* /Components/Pages/Blog/BlogArticle.razor.rz.scp.css */
/* ================================================
   Blog article — calm, readable, one column.
   Body prose lives in a child component, so its
   elements are reached with ::deep.
   ================================================ */

.post[b-nld9vc3qms] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) var(--space-7);
    animation: fade-up-b-nld9vc3qms 240ms ease-out;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb[b-nld9vc3qms] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-meta);
    color: var(--ink-faint);
    margin-bottom: var(--space-4);
}

.breadcrumb a[b-nld9vc3qms] {
    color: var(--ink-soft);
}

.breadcrumb a:hover[b-nld9vc3qms] {
    color: var(--rose-deep);
}

.breadcrumb span[aria-hidden][b-nld9vc3qms] {
    color: var(--ink-faint);
}

/* ---------- Header ---------- */

.post-header[b-nld9vc3qms] {
    text-align: center;
    margin-bottom: var(--space-4);
}

.post-category[b-nld9vc3qms] {
    margin-bottom: var(--space-2);
}

.post-header h1[b-nld9vc3qms] {
    font-size: var(--text-hero);
    margin-bottom: var(--space-3);
}

.post-standfirst[b-nld9vc3qms] {
    font-size: var(--text-lead);
    color: var(--ink-soft);
    max-width: 40ch;
    margin: 0 auto var(--space-3);
}

.byline[b-nld9vc3qms] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-size: var(--text-meta);
    color: var(--ink-soft);
}

.byline-author[b-nld9vc3qms] {
    font-weight: 500;
    color: var(--ink);
}

.byline-sep[b-nld9vc3qms] {
    color: var(--ink-faint);
}

/* ---------- Hero ---------- */

.post-hero[b-nld9vc3qms] {
    margin: 0 0 var(--space-5);
}

.post-hero img[b-nld9vc3qms] {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 35%;
}

/* ---------- Body prose (child component, hence ::deep) ---------- */

.post-body[b-nld9vc3qms] {
    font-size: 1.075rem;
    line-height: 1.75;
}

.post-body[b-nld9vc3qms]  .lead {
    font-size: var(--text-lead);
    color: var(--ink);
}

.post-body[b-nld9vc3qms]  h2 {
    font-size: 1.65rem;
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}

.post-body[b-nld9vc3qms]  h3 {
    font-size: 1.25rem;
    margin-top: var(--space-4);
    margin-bottom: var(--space-1);
}

.post-body[b-nld9vc3qms]  p {
    margin-bottom: var(--space-3);
    color: var(--ink);
}

.post-body[b-nld9vc3qms]  a {
    color: var(--rose-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--rose-mist);
}

.post-body[b-nld9vc3qms]  a:hover {
    color: var(--ink);
    text-decoration-color: var(--rose);
}

/* Figures */

.post-body[b-nld9vc3qms]  figure {
    margin: var(--space-5) 0;
}

.post-body[b-nld9vc3qms]  figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.post-body[b-nld9vc3qms]  figcaption {
    font-size: var(--text-meta);
    color: var(--ink-faint);
    text-align: center;
    margin-top: var(--space-1);
    font-style: italic;
}

/* Ordered "steps" list */

.post-body[b-nld9vc3qms]  ol.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 var(--space-4);
    display: grid;
    gap: var(--space-2);
}

.post-body[b-nld9vc3qms]  ol.steps li {
    position: relative;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}

.post-body[b-nld9vc3qms]  ol.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: var(--space-2);
    top: var(--space-2);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--rose-deep);
    background: var(--rose-mist);
    border-radius: 50%;
}

/* Checklist */

.post-body[b-nld9vc3qms]  ul.checklist {
    list-style: none;
    padding: var(--space-3);
    margin: var(--space-3) 0 var(--space-4);
    background: var(--sage-mist);
    border-radius: var(--radius-card);
    display: grid;
    gap: var(--space-1);
}

.post-body[b-nld9vc3qms]  ul.checklist li {
    position: relative;
    padding-left: var(--space-4);
    color: var(--ink);
}

.post-body[b-nld9vc3qms]  ul.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--sage-deep);
    font-weight: 600;
}

/* FAQ (details/summary) */

.post-body[b-nld9vc3qms]  .faq {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.post-body[b-nld9vc3qms]  .faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius-input);
    background: var(--white);
    overflow: hidden;
}

.post-body[b-nld9vc3qms]  .faq summary {
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    font-weight: 500;
    font-family: var(--font-body);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

.post-body[b-nld9vc3qms]  .faq summary::-webkit-details-marker {
    display: none;
}

.post-body[b-nld9vc3qms]  .faq summary::after {
    content: "+";
    color: var(--rose-deep);
    font-size: 1.2rem;
    line-height: 1;
}

.post-body[b-nld9vc3qms]  .faq details[open] summary::after {
    content: "−";
}

.post-body[b-nld9vc3qms]  .faq details[open] summary {
    border-bottom: 1px solid var(--line);
}

.post-body[b-nld9vc3qms]  .faq p {
    padding: var(--space-2) var(--space-3) 0;
    color: var(--ink-soft);
    margin-bottom: var(--space-2);
}

/* ---------- Author card ---------- */

.author-card[b-nld9vc3qms] {
    margin: var(--space-6) 0 var(--space-5);
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}

.author-name[b-nld9vc3qms] {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink);
    margin: var(--space-1) 0 0;
}

.author-role[b-nld9vc3qms] {
    font-size: var(--text-meta);
    color: var(--rose-deep);
    margin: 0 0 var(--space-1);
}

.author-bio[b-nld9vc3qms] {
    color: var(--ink-soft);
    margin: 0;
}

/* ---------- CTA ---------- */

.post-cta[b-nld9vc3qms] {
    text-align: center;
    padding: var(--space-5) var(--space-3);
    background: var(--rose-mist);
    border-radius: var(--radius-card);
    margin-bottom: var(--space-4);
}

.post-cta h2[b-nld9vc3qms] {
    font-size: var(--text-title);
    margin-bottom: var(--space-1);
}

.post-cta p[b-nld9vc3qms] {
    color: var(--ink-soft);
    max-width: 42ch;
    margin: 0 auto var(--space-3);
}

/* ---------- Credits + back ---------- */

.post-credits[b-nld9vc3qms] {
    font-size: var(--text-meta);
    color: var(--ink-faint);
    text-align: center;
    margin-bottom: var(--space-4);
}

.back-link[b-nld9vc3qms] {
    display: inline-block;
}

/* ---------- Not found ---------- */

.blog-missing[b-nld9vc3qms] {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-7) var(--space-3);
}

.blog-missing h1[b-nld9vc3qms] {
    font-size: var(--text-title);
    margin-bottom: var(--space-2);
}

.blog-missing p[b-nld9vc3qms] {
    color: var(--ink-soft);
    margin-bottom: var(--space-3);
}

@keyframes fade-up-b-nld9vc3qms {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Newsletter ---------- */

.post-follow[b-nld9vc3qms] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-3);
    text-align: center;
}

.post-follow[b-nld9vc3qms]  .newsletter {
    align-items: center;
}

.post-follow[b-nld9vc3qms]  .newsletter-heading {
    font-size: var(--text-title);
}

.post-follow[b-nld9vc3qms]  .newsletter-copy p,
.post-follow[b-nld9vc3qms]  .newsletter-done p {
    margin: 0 auto;
}

.post-follow[b-nld9vc3qms]  .newsletter-row {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

/* ---------- More from the blog ---------- */

.more-from[b-nld9vc3qms] {
    max-width: 1060px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-3) var(--space-7);
}

.more-from h2[b-nld9vc3qms] {
    text-align: center;
    font-size: var(--text-title);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--ink);
    margin-bottom: var(--space-4);
}

.more-grid[b-nld9vc3qms] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.more-card[b-nld9vc3qms] {
    display: block;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition);
}

.more-card:hover[b-nld9vc3qms] {
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.more-card img[b-nld9vc3qms] {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.more-card-body[b-nld9vc3qms] {
    display: block;
    padding: var(--space-2);
}

.more-card-body .meta[b-nld9vc3qms] {
    display: block;
    margin-bottom: 6px;
}

.more-card-title[b-nld9vc3qms] {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.more-card:hover .more-card-title[b-nld9vc3qms] {
    color: var(--rose-deep);
}

@media (max-width: 899px) {
    .more-grid[b-nld9vc3qms] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 519px) {
    .more-grid[b-nld9vc3qms] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 719px) {
    .post[b-nld9vc3qms] {
        padding: var(--space-3) var(--space-2) var(--space-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .post[b-nld9vc3qms] {
        animation: none;
    }
}
/* /Components/Pages/Blog/BlogIndex.razor.rz.scp.css */
/* ================================================
   Blog index — a quiet, readable list of articles.
   ================================================ */

.blog-index[b-04smm3boxu] {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-3) var(--space-7);
    animation: fade-up-b-04smm3boxu 240ms ease-out;
}

.blog-intro[b-04smm3boxu] {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-6);
}

.blog-intro h1[b-04smm3boxu] {
    font-size: var(--text-hero);
    margin: var(--space-1) 0 var(--space-2);
}

.blog-intro-lead[b-04smm3boxu] {
    font-size: var(--text-lead);
    color: var(--ink-soft);
    margin: 0;
}

.post-list[b-04smm3boxu] {
    display: grid;
    gap: var(--space-4);
}

/* Article cards. First card spans full width as a feature row on wide screens. */

.post-card[b-04smm3boxu] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-3);
    align-items: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

.post-card:hover[b-04smm3boxu] {
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.post-card-media[b-04smm3boxu] {
    display: block;
    align-self: stretch;
}

.post-card-media img[b-04smm3boxu] {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    object-position: center 35%;
}

.post-card-body[b-04smm3boxu] {
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
}

.post-card-body h2[b-04smm3boxu] {
    font-size: 1.5rem;
    margin: var(--space-1) 0 var(--space-2);
}

.post-card-body h2 a[b-04smm3boxu] {
    color: var(--ink);
}

.post-card-body h2 a:hover[b-04smm3boxu] {
    color: var(--rose-deep);
}

.post-card-excerpt[b-04smm3boxu] {
    color: var(--ink-soft);
    margin-bottom: var(--space-2);
}

.post-card-foot[b-04smm3boxu] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-meta);
    color: var(--ink-faint);
}

.byline-sep[b-04smm3boxu] {
    color: var(--ink-faint);
}

@keyframes fade-up-b-04smm3boxu {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 719px) {
    .blog-index[b-04smm3boxu] {
        padding: var(--space-5) var(--space-2) var(--space-6);
    }

    .post-card[b-04smm3boxu] {
        grid-template-columns: 1fr;
    }

    .post-card-media img[b-04smm3boxu] {
        height: 200px;
        min-height: 0;
    }

    .post-card-body[b-04smm3boxu] {
        padding: 0 var(--space-3) var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-index[b-04smm3boxu] {
        animation: none;
    }
}
/* /Components/Pages/Budget/Budget.razor.rz.scp.css */
/* The masthead lives in Shared/PageMasthead; this styles its slot content. */
.head-meta[b-1hu07c6twq] {
    margin: 0;
}

/* ---------- Summary ---------- */

.summary[b-1hu07c6twq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

/* Panels carry a light wash so they lift off the white page. The top row (the
   reference totals) stays neutral paper; the bottom row is tinted by meaning:
   what's left, what's settled, what still needs paying. */
.sum[b-1hu07c6twq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--wash);
}

/* Remaining is the health signal: green while there's budget left, red once
   there isn't. Red means "in the red" on this page and nothing else, which is
   why no other panel or total borrows it. */
.sum-remaining[b-1hu07c6twq] {
    background: var(--sage-mist);
}

.sum-paid[b-1hu07c6twq] {
    background: var(--sage-mist);
}

.sum-unpaid[b-1hu07c6twq] {
    background: var(--clay-mist);
}

.sum-figure[b-1hu07c6twq] {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
}

.sum-detail[b-1hu07c6twq] {
    font-size: var(--text-meta);
    color: var(--ink-soft);
}

/* Over budget: light red, the one place on this page that earns it. Listed
   after the tints above so it overrides .sum-remaining's green. */
.sum.over[b-1hu07c6twq] {
    background: var(--rose-mist);
}

.sum.over .sum-figure[b-1hu07c6twq],
.sum.over .sum-detail[b-1hu07c6twq] {
    color: var(--rose-deep);
}

.edit-budget[b-1hu07c6twq] {
    align-self: flex-start;
    margin-top: 6px;
    padding: 5px 14px;
    font-size: var(--text-meta);
}

.budget-edit[b-1hu07c6twq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.budget-edit .btn-primary[b-1hu07c6twq],
.budget-edit .btn-secondary[b-1hu07c6twq] {
    padding: 8px 18px;
    font-size: var(--text-meta);
}

/* ---------- Add new line ---------- */

.add-line-btn[b-1hu07c6twq] {
    margin-bottom: var(--space-3);
}

.dialog-backdrop[b-1hu07c6twq] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(45, 42, 38, 0.4);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-2);
    overflow-y: auto;
}

.dialog[b-1hu07c6twq] {
    width: 100%;
    max-width: 480px;
    margin-top: 8vh;
    box-shadow: var(--shadow-lift);
}

.dialog h2[b-1hu07c6twq] {
    margin: 0 0 var(--space-2);
}

.dialog-form[b-1hu07c6twq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dialog-field[b-1hu07c6twq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label[b-1hu07c6twq] {
    font-size: var(--text-meta);
    color: var(--ink-soft);
}

.field-hint[b-1hu07c6twq] {
    color: var(--ink-faint);
}

.dialog-row[b-1hu07c6twq] {
    display: flex;
    gap: var(--space-2);
}

.dialog-row .dialog-field[b-1hu07c6twq] {
    flex: 1;
}

.dialog-actions[b-1hu07c6twq] {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

/* Inline button spinner (the button's flex gap spaces it from the label). */
.spinner[b-1hu07c6twq] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate-b-1hu07c6twq 0.6s linear infinite;
}

@keyframes spinner-rotate-b-1hu07c6twq {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Filters ---------- */

.filters[b-1hu07c6twq] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    margin-bottom: var(--space-2);
}

.filters .search[b-1hu07c6twq] {
    flex: 1;
}

.filters select[b-1hu07c6twq] {
    width: auto;
}

.clear-filters[b-1hu07c6twq] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Group footer: a deeper wash than the rows so it reads as their summary.
   Deliberately neutral, not red — a subtotal is a total, not a debt.
   Keeps a 1px (transparent) border so its columns align with the rows. */
.subtotal[b-1hu07c6twq] {
    margin-top: 2px;
    background: var(--wash-deep);
    border: 1px solid transparent;
    border-radius: var(--radius-card);
}

.subtotal-label[b-1hu07c6twq] {
    font-size: var(--text-meta);
    color: var(--ink-soft);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.subtotal .amount[b-1hu07c6twq] {
    color: var(--ink);
}



/* Placeholders that reserve the pill + actions columns without being seen. */
.subtotal-ghost[b-1hu07c6twq] {
    visibility: hidden;
}

.subtotal .action.icon[b-1hu07c6twq] {
    width: 28px;
    height: 28px;
    padding: 0;
}

/* ---------- Category groups ---------- */

.group + .group[b-1hu07c6twq] {
    margin-top: var(--space-3);
}

/* Header row: category name left, shared est./actual column labels right.
   Transparent 1px border + right padding match the item cards so the labels
   line up exactly above the figures below. */
.group-head[b-1hu07c6twq] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    border: 1px solid transparent;
    padding: 0 var(--space-2) 8px var(--space-1);
    margin-bottom: 2px;
}

.group-title[b-1hu07c6twq] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.group-name[b-1hu07c6twq] {
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink);
    margin: 0;
}

.group-add[b-1hu07c6twq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-soft);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.group-add:hover[b-1hu07c6twq] {
    color: var(--rose-deep);
    border-color: var(--rose);
}

.group-add svg[b-1hu07c6twq] {
    width: 15px;
    height: 15px;
    display: block;
}

.group-head .action.icon[b-1hu07c6twq] {
    width: 28px;
    height: 28px;
    padding: 0;
}


/* The est./actual labels live in the group header now — hide every other copy
   (items, subtotals, grand total) since they all align under the header labels. */
.item-amounts .meta[b-1hu07c6twq] {
    display: none;
}

.group-head .item-amounts .meta[b-1hu07c6twq] {
    display: block;
}

/* ---------- Items ---------- */

.item-list[b-1hu07c6twq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
}

/* Rows sit on the paper wash so the ledger reads as a block against the white
   page; hairlines separate them (no gaps, or the wash breaks into bars). */
.item[b-1hu07c6twq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--wash);
    padding: 12px var(--space-2);
    transition: background var(--transition);
}

.item-list .item + .item[b-1hu07c6twq] {
    border-top: 1px solid var(--line);
}

.item-list .item:hover[b-1hu07c6twq] {
    background: var(--wash-deep);
}

    /* Re-states the tint from .subtotal above: .item's wash is declared later
       at equal specificity, so this needs the extra class to win. */
    .item.subtotal[b-1hu07c6twq] {
        background: var(--wash-deep);
        border-radius: 0;
        margin: 0;
        border: 1px solid var(--line);
        border-top: 0;
    }


/* Grand total: spans the full width (not indented under a category) and carries
   a solid ink edge + heavier figures so it reads as the overall total. Ink, not
   rose: red is reserved for the over-budget panel. */
        .item.subtotal.grand[b-1hu07c6twq] {
            margin-top: 10px;
            border: 1px solid var(--ink);
            background-color: #f5fffa;
        }

            .item.subtotal.grand .amount[b-1hu07c6twq] {
                font-weight: 600;
            }



.item-body[b-1hu07c6twq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-meta[b-1hu07c6twq] {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-meta);
    color: var(--ink-faint);
    min-width: 0;
}

.item-notes[b-1hu07c6twq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-amounts[b-1hu07c6twq] {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}

.amount[b-1hu07c6twq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: 500;
    min-width: 72px;
}

/* ---------- Paid pill ---------- */

/* Transparent border on the base so paid/unpaid pills stay the same height:
   only .pill-unpaid paints one, and a border would otherwise add 2px. */
.pill[b-1hu07c6twq] {
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    padding: 6px 14px;
    min-width: 92px;
    text-align: center;
    border-radius: 999px;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}

/* Sage border, not gray: the chip's edge and text both say "settled" so it
   holds its own against the lilac row wash. */
.pill-paid[b-1hu07c6twq] {
    background: var(--sage-mist);
    color: var(--sage-deep);
    border-color: var(--sage);
    font-weight: 500;
}

/* Reads as a white chip against the row wash. Was --cream + --ink-faint, which
   went invisible (cream is white now) and failed contrast at 3.45:1. */
.pill-unpaid[b-1hu07c6twq] {
    background: var(--white);
    color: var(--ink-soft);
    border: solid 1px #ccc;
}

.pill-unpaid:hover[b-1hu07c6twq] {
    color: var(--ink);
    border-color: var(--ink-faint);
}

/* ---------- Actions (match checklist) ---------- */

.item-actions[b-1hu07c6twq] {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}

.item:hover .item-actions[b-1hu07c6twq],
.item:focus-within .item-actions[b-1hu07c6twq] {
    opacity: 1;
}

.action[b-1hu07c6twq] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    padding: 6px;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
}

.action:hover[b-1hu07c6twq] {
    color: var(--ink);
    background: var(--cream);
}

.action.icon svg[b-1hu07c6twq] {
    width: 16px;
    height: 16px;
    display: block;
}

.action.confirm[b-1hu07c6twq] {
    color: var(--clay-deep);
    font-weight: 500;
}

.confirm-text[b-1hu07c6twq] {
    font-size: var(--text-meta);
    color: var(--clay-deep);
}

/* ---------- Inline edit ---------- */

.item-edit[b-1hu07c6twq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-1) 0;
}

.item-edit-row[b-1hu07c6twq] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.item-edit-row input[b-1hu07c6twq],
.item-edit-row[b-1hu07c6twq]  .cat-picker {
    flex: 1;
    width: auto;
}

.item-edit-row .checkbox-label[b-1hu07c6twq] {
    flex-shrink: 0;
}

.item-edit-actions[b-1hu07c6twq] {
    display: flex;
    gap: var(--space-1);
}

.item-edit-actions .btn-primary[b-1hu07c6twq],
.item-edit-actions .btn-secondary[b-1hu07c6twq] {
    padding: 8px 18px;
    font-size: var(--text-meta);
}

.empty[b-1hu07c6twq] {
    text-align: center;
    color: var(--ink-soft);
}

/* ---------- Mobile ---------- */

@media (max-width: 719px) {
    .summary[b-1hu07c6twq] {
        grid-template-columns: 1fr 1fr;
    }

    .dialog-row[b-1hu07c6twq] {
        flex-direction: column;
    }

    .filters[b-1hu07c6twq] {
        flex-wrap: wrap;
    }

    .filters .search[b-1hu07c6twq] {
        flex: 1 1 100%;
    }

    .filters select[b-1hu07c6twq] {
        flex: 1;
    }

    .item[b-1hu07c6twq] {
        flex-wrap: wrap;
    }

    .item-body[b-1hu07c6twq] {
        flex: 1 1 100%;
    }

    /* Cards wrap on mobile, so the column-alignment spacers just waste space. */
    .subtotal-ghost[b-1hu07c6twq] {
        display: none;
    }

    /* Cards wrap, so column headers can't line up — put the labels back on each
       row and drop them from the group header. */
    .item-amounts .meta[b-1hu07c6twq] {
        display: block;
    }

    .group-head .item-amounts[b-1hu07c6twq] {
        display: none;
    }

    .item-actions[b-1hu07c6twq] {
        opacity: 1;
    }

    .item-edit-row[b-1hu07c6twq] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Budget/CategoryPicker.razor.rz.scp.css */
.cat-picker[b-aaum9lv65j] {
    position: relative;
}

.cat-picker input[b-aaum9lv65j] {
    width: 100%;
    padding-right: 36px;
}

.cat-toggle[b-aaum9lv65j] {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--ink-soft);
    display: flex;
    transition: color var(--transition);
}

.cat-toggle:hover[b-aaum9lv65j] {
    color: var(--ink);
}

.cat-toggle svg[b-aaum9lv65j] {
    width: 14px;
    height: 14px;
}

.cat-menu[b-aaum9lv65j] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-height: 280px;
    overflow-y: auto;
}

.cat-menu button[b-aaum9lv65j] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink);
    transition: background var(--transition);
}

.cat-menu button:hover[b-aaum9lv65j] {
    background: var(--cream);
}

.cat-menu button.current[b-aaum9lv65j] {
    background: var(--rose-mist);
    color: var(--rose-deep);
}

/* /Components/Pages/Checklist/Checklist.razor.rz.scp.css */
/* The masthead lives in Shared/PageMasthead; this styles its slot content. */
.head-meta[b-0q3tner8cn] {
    margin: 0;
}

/* Thin sage progress line, matching the seating page. */
.head-progress[b-0q3tner8cn] {
    width: 220px;
    max-width: 100%;
    height: 2px;
    background: var(--line);
    margin-top: var(--space-1);
}

.head-progress-fill[b-0q3tner8cn] {
    height: 100%;
    background: var(--sage);
    transition: width 240ms ease-out;
}

/* ---------- Add row ---------- */

.add-row[b-0q3tner8cn] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-2);
    margin-bottom: var(--space-4);
}

.add-input[b-0q3tner8cn] {
    flex: 1;
}

.add-phase[b-0q3tner8cn] {
    width: auto;
    max-width: 200px;
}

/* ---------- Phase groups ---------- */

.phase-group[b-0q3tner8cn] {
    margin-bottom: var(--space-4);
}

.phase-label[b-0q3tner8cn] {
    margin-bottom: var(--space-1);
    padding-left: var(--space-1);
}

.task-list[b-0q3tner8cn] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------- Task rows ---------- */

.task[b-0q3tner8cn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 12px var(--space-2);
    transition: background 300ms ease-out, border-color 300ms ease-out;
}

.task.done[b-0q3tner8cn] {
    background: var(--sage-mist);
    border-color: transparent;
}

/* ---------- Check button (the one delight moment) ---------- */

.check[b-0q3tner8cn] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--ink-faint);
    background: var(--white);
    cursor: pointer;
    padding: 4px;
    color: var(--white);
    transition: border-color var(--transition), background 300ms ease-out;
}

.check:hover[b-0q3tner8cn] {
    border-color: var(--sage);
}

.check svg[b-0q3tner8cn] {
    width: 100%;
    height: 100%;
    display: block;
}

.check .tick[b-0q3tner8cn] {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 300ms ease-out 80ms;
}

.task.done .check[b-0q3tner8cn] {
    background: var(--sage);
    border-color: var(--sage);
}

.task.done .check .tick[b-0q3tner8cn] {
    stroke-dashoffset: 0;
}

/* ---------- Task body ---------- */

.task-body[b-0q3tner8cn] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-title[b-0q3tner8cn] {
    transition: color 300ms ease-out;
}

.task.done .task-title[b-0q3tner8cn] {
    color: var(--ink-soft);
    text-decoration: line-through;
    text-decoration-color: var(--sage);
    text-decoration-thickness: 1px;
}

.task-meta[b-0q3tner8cn] {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-meta);
    color: var(--ink-faint);
    min-width: 0;
}

.has-notes[b-0q3tner8cn] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.due[b-0q3tner8cn] {
    color: var(--gold);
    flex-shrink: 0;
}

/* ---------- Row actions ---------- */

.task-actions[b-0q3tner8cn] {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 1;
    transition: opacity var(--transition);
}

.task:hover .task-actions[b-0q3tner8cn],
.task:focus-within .task-actions[b-0q3tner8cn] {
    opacity: 1;
}

.action[b-0q3tner8cn] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    padding: 6px;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
    border: solid 1px #ccc;
}

.action:hover[b-0q3tner8cn] {
    color: var(--ink);
    background: var(--cream);
}

.action.icon svg[b-0q3tner8cn] {
    width: 16px;
    height: 16px;
    display: block;
}

.action.confirm[b-0q3tner8cn] {
    color: var(--clay-deep);
    font-weight: 500;
}

.confirm-text[b-0q3tner8cn] {
    font-size: var(--text-meta);
    color: var(--clay-deep);
}

/* ---------- Inline edit ---------- */

.task-edit[b-0q3tner8cn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-1) 0;
}

.task-edit-row[b-0q3tner8cn] {
    display: flex;
    gap: var(--space-1);
}

.task-edit-row select[b-0q3tner8cn],
.task-edit-row input[b-0q3tner8cn] {
    width: auto;
    flex: 1;
}

.task-edit-actions[b-0q3tner8cn] {
    display: flex;
    gap: var(--space-1);
}

.task-edit-actions .btn-primary[b-0q3tner8cn],
.task-edit-actions .btn-secondary[b-0q3tner8cn] {
    padding: 8px 18px;
    font-size: var(--text-meta);
}

.empty[b-0q3tner8cn] {
    text-align: center;
    color: var(--ink-soft);
}

/* ---------- Mobile ---------- */

@media (max-width: 719px) {
    .add-row[b-0q3tner8cn] {
        flex-wrap: wrap;
    }

    .add-input[b-0q3tner8cn] {
        flex: 1 1 100%;
    }

    /* Touch screens have no hover — keep actions visible. */
    .task-actions[b-0q3tner8cn] {
        opacity: 1;
    }

    .task-edit-row[b-0q3tner8cn] {
        flex-direction: column;
    }
}
/* /Components/Pages/Countdown/Countdown.razor.rz.scp.css */
/* ---------- Hero ---------- */

.count-hero[b-p3y3t8wo55] {
    text-align: center;
    padding: var(--space-5) 0 var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: fade-up-b-p3y3t8wo55 240ms ease-out;
}

.count-number[b-p3y3t8wo55] {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 6.5rem);
    font-weight: 500;
    color: var(--gold);
    line-height: 1;
}

.count-weeks[b-p3y3t8wo55] {
    font-size: var(--text-meta);
    color: var(--ink-faint);
}

.count-today[b-p3y3t8wo55],
.count-invite[b-p3y3t8wo55] {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: 600;
    margin: 0;
}

.count-date[b-p3y3t8wo55] {
    margin: var(--space-2) 0 0;
}

.count-hero .soft-link[b-p3y3t8wo55] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.no-date[b-p3y3t8wo55] {
    color: var(--ink-soft);
    max-width: 380px;
    margin: 0 0 var(--space-2);
}

.date-edit[b-p3y3t8wo55] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    margin-top: var(--space-2);
}

.date-edit input[b-p3y3t8wo55] {
    width: auto;
}

.date-edit .btn-primary[b-p3y3t8wo55],
.date-edit .btn-secondary[b-p3y3t8wo55] {
    padding: 10px 20px;
}

/* ---------- Milestones ---------- */

.milestones h2[b-p3y3t8wo55] {
    font-size: var(--text-title);
    margin-bottom: 2px;
}

.section-lead[b-p3y3t8wo55] {
    margin-bottom: var(--space-2);
}

.add-row[b-p3y3t8wo55] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-2);
    margin-bottom: var(--space-2);
}

.add-title[b-p3y3t8wo55] {
    flex: 1;
}

.add-date[b-p3y3t8wo55] {
    width: auto;
}

.milestone-list[b-p3y3t8wo55] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.milestone[b-p3y3t8wo55] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 12px var(--space-2);
}

.ms-date[b-p3y3t8wo55] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--rose-mist);
    color: var(--rose-deep);
}

.ms-day[b-p3y3t8wo55] {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
}

.ms-month[b-p3y3t8wo55] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ms-body[b-p3y3t8wo55] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ms-title[b-p3y3t8wo55] {
    font-weight: 500;
}

.ms-meta[b-p3y3t8wo55] {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-meta);
    color: var(--ink-faint);
    min-width: 0;
}

.ms-away[b-p3y3t8wo55] {
    color: var(--gold);
    flex-shrink: 0;
}

.ms-notes[b-p3y3t8wo55] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Actions ---------- */

.ms-actions[b-p3y3t8wo55] {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}

.milestone:hover .ms-actions[b-p3y3t8wo55],
.milestone:focus-within .ms-actions[b-p3y3t8wo55] {
    opacity: 1;
}

.action[b-p3y3t8wo55] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    padding: 6px;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
}

.action:hover[b-p3y3t8wo55] {
    color: var(--ink);
    background: var(--cream);
}

.action.icon svg[b-p3y3t8wo55] {
    width: 16px;
    height: 16px;
    display: block;
}

.action.confirm[b-p3y3t8wo55] {
    color: var(--clay-deep);
    font-weight: 500;
}

.confirm-text[b-p3y3t8wo55] {
    font-size: var(--text-meta);
    color: var(--clay-deep);
}

/* ---------- Inline edit ---------- */

.ms-edit[b-p3y3t8wo55] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-1) 0;
}

.ms-edit-row[b-p3y3t8wo55] {
    display: flex;
    gap: var(--space-1);
}

.ms-edit-row input[b-p3y3t8wo55] {
    flex: 1;
    width: auto;
}

.ms-edit-actions[b-p3y3t8wo55] {
    display: flex;
    gap: var(--space-1);
}

.ms-edit-actions .btn-primary[b-p3y3t8wo55],
.ms-edit-actions .btn-secondary[b-p3y3t8wo55] {
    padding: 8px 18px;
    font-size: var(--text-meta);
}

/* ---------- Journey so far ---------- */

.journey[b-p3y3t8wo55] {
    margin-top: var(--space-5);
    padding-left: var(--space-2);
    border-left: 2px solid var(--sage-mist);
}

.journey-label[b-p3y3t8wo55] {
    margin-bottom: var(--space-2);
}

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

.journey-list li[b-p3y3t8wo55] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--ink-soft);
}

.journey-date[b-p3y3t8wo55] {
    font-size: var(--text-meta);
    color: var(--ink-faint);
    min-width: 100px;
}

.journey-remove[b-p3y3t8wo55] {
    opacity: 0;
    line-height: 1;
}

.journey-list li:hover .journey-remove[b-p3y3t8wo55] {
    opacity: 1;
}

.empty[b-p3y3t8wo55] {
    text-align: center;
    color: var(--ink-soft);
}

@keyframes fade-up-b-p3y3t8wo55 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 719px) {
    .add-row[b-p3y3t8wo55] {
        flex-wrap: wrap;
    }

    .add-title[b-p3y3t8wo55] {
        flex: 1 1 100%;
    }

    .ms-actions[b-p3y3t8wo55] {
        opacity: 1;
    }

    .journey-remove[b-p3y3t8wo55] {
        opacity: 1;
    }

    .date-edit[b-p3y3t8wo55] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .count-hero[b-p3y3t8wo55] {
        animation: none;
    }
}
/* /Components/Pages/Guests/Guests.razor.rz.scp.css */
/* The masthead lives in Shared/PageMasthead; this styles its slot content. */
.head-meta[b-i6xmewfhp2] {
    margin: 0;
}

/* ---------- Add row ---------- */

.add-row[b-i6xmewfhp2] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-2);
    margin-bottom: var(--space-2);
}

.add-name[b-i6xmewfhp2] {
    flex: 1;
}

.add-side[b-i6xmewfhp2] {
    width: auto;
    max-width: 200px;
}

/* ---------- RSVP note in the masthead (controls live in Settings) ---------- */

/* One-line explainer so whoever didn't create the link still knows what it is. */
.share-label[b-i6xmewfhp2] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-meta);
    color: var(--ink-faint);
}

.share-note[b-i6xmewfhp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-1) 0 0;
    font-size: var(--text-meta);
    color: var(--ink-faint);
}

.share-label + .share-note[b-i6xmewfhp2] {
    margin-top: 2px;
}

.share-note a[b-i6xmewfhp2] {
    color: var(--ink-soft);
}

.share-link[b-i6xmewfhp2] {
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-copy[b-i6xmewfhp2] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    padding: 4px;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
}

.share-copy:hover[b-i6xmewfhp2] {
    color: var(--ink);
    background: var(--cream);
}

.share-copy svg[b-i6xmewfhp2] {
    width: 14px;
    height: 14px;
    display: block;
}

.share-status[b-i6xmewfhp2] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.share-status[b-i6xmewfhp2]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    align-self: center;
}

.share-status.live[b-i6xmewfhp2] {
    color: var(--sage-deep);
}

.share-status.live[b-i6xmewfhp2]::before {
    background: var(--sage);
}

.share-status.off[b-i6xmewfhp2] {
    color: var(--clay-deep);
}

.share-status.off[b-i6xmewfhp2]::before {
    background: var(--clay);
}

/* ---------- Filters ---------- */

.filters[b-i6xmewfhp2] {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.search[b-i6xmewfhp2] {
    flex: 1;
}

.filters select[b-i6xmewfhp2] {
    width: auto;
}

.group-toggle[b-i6xmewfhp2] {
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 0;
    padding: 0 18px;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.group-toggle:hover[b-i6xmewfhp2] {
    border-color: var(--ink);
    color: var(--ink);
}

.group-toggle.on[b-i6xmewfhp2] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}

/* ---------- Household groups ---------- */

.party-group + .party-group[b-i6xmewfhp2] {
    margin-top: var(--space-3);
}

.party-header[b-i6xmewfhp2] {
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--space-1);
}

.party-count[b-i6xmewfhp2] {
    color: var(--ink-faint);
    letter-spacing: normal;
}

/* ---------- Guest rows ---------- */

.guest-list[b-i6xmewfhp2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.guest[b-i6xmewfhp2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 12px var(--space-2);
}

/* Row tint follows the reply, so the list reads at a glance. */
.guest-accepted[b-i6xmewfhp2] {
    background: var(--sage-mist);
}

.guest-declined[b-i6xmewfhp2] {
    background: var(--rose-mist);
}

/* Pills sit on white by default; on tinted rows they flip to white for contrast. */
.guest-accepted .rsvp-accepted[b-i6xmewfhp2],
.guest-declined .rsvp-declined[b-i6xmewfhp2] {
    background: var(--white);
}

.guest-declined .rsvp-declined[b-i6xmewfhp2] {
    color: var(--rose-deep);
}

.guest-accepted .action:hover[b-i6xmewfhp2],
.guest-declined .action:hover[b-i6xmewfhp2] {
    background: var(--white);
}

.guest-body[b-i6xmewfhp2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guest-name[b-i6xmewfhp2] {
    font-weight: 500;
}

.guest-meta[b-i6xmewfhp2] {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-meta);
    color: var(--ink-faint);
    min-width: 0;
}

.guest-table[b-i6xmewfhp2] {
    color: var(--gold);
    flex-shrink: 0;
}

.guest-party[b-i6xmewfhp2] {
    font-style: italic;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.guest-notes[b-i6xmewfhp2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Marks replies that arrived through the public link. */
.guest-replied[b-i6xmewfhp2] {
    color: var(--sage-deep);
    flex-shrink: 0;
}

/* Courses the guest picked from the couple's menu. */
.guest-courses[b-i6xmewfhp2] {
    color: var(--gold-deep);
    flex-shrink: 0;
}

/* ---------- RSVP select, styled as a pill ---------- */

.rsvp[b-i6xmewfhp2] {
    width: auto;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: var(--text-meta);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
}

.rsvp-pending[b-i6xmewfhp2] {
    background: var(--cream);
    color: var(--ink-soft);
}

.rsvp-accepted[b-i6xmewfhp2] {
    background: var(--sage-mist);
    color: var(--sage-deep);
}

.rsvp-declined[b-i6xmewfhp2] {
    background: var(--clay-mist);
    color: var(--clay-deep);
}

/* ---------- Actions (match checklist/budget) ---------- */

.guest-actions[b-i6xmewfhp2] {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}

.guest:hover .guest-actions[b-i6xmewfhp2],
.guest:focus-within .guest-actions[b-i6xmewfhp2] {
    opacity: 1;
}

.action[b-i6xmewfhp2] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    padding: 6px;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
}

.action:hover[b-i6xmewfhp2] {
    color: var(--ink);
    background: var(--cream);
}

.action.icon svg[b-i6xmewfhp2] {
    width: 16px;
    height: 16px;
    display: block;
}

.action.confirm[b-i6xmewfhp2] {
    color: var(--clay-deep);
    font-weight: 500;
}

.confirm-text[b-i6xmewfhp2] {
    font-size: var(--text-meta);
    color: var(--clay-deep);
}

/* ---------- Inline edit ---------- */

.guest-edit[b-i6xmewfhp2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-1) 0;
}

.guest-edit-row[b-i6xmewfhp2] {
    display: flex;
    gap: var(--space-1);
}

.guest-edit-row input[b-i6xmewfhp2],
.guest-edit-row select[b-i6xmewfhp2] {
    flex: 1;
    width: auto;
}

.guest-edit-actions[b-i6xmewfhp2] {
    display: flex;
    gap: var(--space-1);
}

.guest-edit-actions .btn-primary[b-i6xmewfhp2],
.guest-edit-actions .btn-secondary[b-i6xmewfhp2] {
    padding: 8px 18px;
    font-size: var(--text-meta);
}

.empty[b-i6xmewfhp2] {
    text-align: center;
    color: var(--ink-soft);
}

/* ---------- Mobile ---------- */

@media (max-width: 719px) {
    .add-row[b-i6xmewfhp2],
    .filters[b-i6xmewfhp2] {
        flex-wrap: wrap;
    }

    .add-name[b-i6xmewfhp2],
    .search[b-i6xmewfhp2] {
        flex: 1 1 100%;
    }

    .guest[b-i6xmewfhp2] {
        flex-wrap: wrap;
    }

    .guest-body[b-i6xmewfhp2] {
        flex: 1 1 100%;
    }

    .guest-actions[b-i6xmewfhp2] {
        opacity: 1;
    }

    .guest-edit-row[b-i6xmewfhp2] {
        flex-direction: column;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.hero[b-7bovlrbfrw] {
    text-align: center;
    padding: var(--space-4) 0 var(--space-5);
    animation: fade-up-b-7bovlrbfrw 240ms ease-out;
}

.cover-logo[b-7bovlrbfrw] {
    display: none;
}

/* Masthead line, set like a cover date between hairline rules. */
.cover-kicker[b-7bovlrbfrw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--ink-soft);
    margin: 0 0 var(--space-4);
}

.cover-kicker[b-7bovlrbfrw]::before,
.cover-kicker[b-7bovlrbfrw]::after {
    content: "";
    width: 56px;
    height: 1px;
    background: var(--line);
}

.portraits[b-7bovlrbfrw] {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.names[b-7bovlrbfrw] {
    font-size: var(--text-hero);
    margin-bottom: var(--space-2);
}

/* The ampersand gets the italic-serif cover treatment. */
.names .amp[b-7bovlrbfrw] {
    font-style: italic;
    font-weight: 500;
    color: var(--gold);
    margin: 0 0.22em;
}

.countdown[b-7bovlrbfrw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.countdown-number[b-7bovlrbfrw] {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: 500;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 10px;
}

.countdown-today[b-7bovlrbfrw] {
    font-family: var(--font-display);
    font-size: var(--text-lead);
    color: var(--gold);
}

.no-date[b-7bovlrbfrw] {
    color: var(--ink-soft);
    max-width: 380px;
    margin: 0 auto;
}

.venue[b-7bovlrbfrw] {
    margin-top: var(--space-2);
}

/* ---------- Stats ---------- */

.stats[b-7bovlrbfrw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    animation: fade-up-b-7bovlrbfrw 240ms ease-out;
}

.stat[b-7bovlrbfrw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ink);
    text-decoration: none;
}

.stat-figure[b-7bovlrbfrw] {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
}

.stat-detail[b-7bovlrbfrw] {
    font-size: var(--text-meta);
    color: var(--ink-soft);
}

.stat-progress[b-7bovlrbfrw] {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
}

.stat-progress-text[b-7bovlrbfrw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------- Milestone strip ---------- */

.milestone-strip[b-7bovlrbfrw] {
    margin-top: var(--space-2);
    animation: fade-up-b-7bovlrbfrw 240ms ease-out;
}

.strip-list[b-7bovlrbfrw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
}

.strip-list li[b-7bovlrbfrw] {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.strip-date[b-7bovlrbfrw] {
    font-size: var(--text-meta);
    color: var(--gold);
    font-weight: 500;
    white-space: nowrap;
}

/* ---------- Panels ---------- */

.panels[b-7bovlrbfrw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-2);
    animation: fade-up-b-7bovlrbfrw 240ms ease-out;
}

.panel h2[b-7bovlrbfrw] {
    font-size: 1.3rem;
    margin-bottom: var(--space-2);
}

.panel-list[b-7bovlrbfrw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-list li[b-7bovlrbfrw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
}

.panel-item-title[b-7bovlrbfrw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-item-meta[b-7bovlrbfrw] {
    font-size: var(--text-meta);
    color: var(--ink-faint);
    flex-shrink: 0;
}

.panel-empty[b-7bovlrbfrw] {
    color: var(--ink-soft);
    margin: 0;
}

.panel-link[b-7bovlrbfrw] {
    display: inline-block;
    margin-top: var(--space-2);
}

@keyframes fade-up-b-7bovlrbfrw {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 719px) {
    .cover-logo[b-7bovlrbfrw] {
        display: block;
        width: 200px;
        margin: 0 auto var(--space-3);
    }

    .stats[b-7bovlrbfrw] {
        grid-template-columns: 1fr;
    }

    .panels[b-7bovlrbfrw] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero[b-7bovlrbfrw],
    .stats[b-7bovlrbfrw],
    .panels[b-7bovlrbfrw] {
        animation: none;
    }
}
/* /Components/Pages/Landing/Landing.razor.rz.scp.css */
/* Editorial landing — black on white, hairline rules, photography-led. */

section[b-mpr7oiq7k8] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-3);
}

/* ---------- Hero ---------- */

.hero[b-mpr7oiq7k8] {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-6);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    animation: fade-up-b-mpr7oiq7k8 240ms ease-out;
}

.hero-kicker[b-mpr7oiq7k8] {
    border-top: 2px solid var(--ink);
    display: inline-block;
    padding-top: var(--space-1);
    margin-bottom: var(--space-3);
}

.hero h1[b-mpr7oiq7k8] {
    font-size: clamp(3rem, 6.5vw, 5.25rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-3);
    text-wrap: balance;
}

    .hero h1 em[b-mpr7oiq7k8] {
        font-style: italic;
        font-weight: 500;
        color: #c8102e;
    }

.hero-lead[b-mpr7oiq7k8] {
    font-size: var(--text-lead);
    color: var(--ink-soft);
    max-width: 480px;
    margin: 0 0 var(--space-4);
}

.hero-actions[b-mpr7oiq7k8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.hero-figure[b-mpr7oiq7k8] {
    margin: 0;
}

.hero-figure img[b-mpr7oiq7k8] {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* ---------- Pull quote ---------- */

.pull-quote[b-mpr7oiq7k8] {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    text-align: center;
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.pull-quote p[b-mpr7oiq7k8] {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    line-height: 1.25;
    margin: 0 auto;
    max-width: 800px;
}

.pull-quote em[b-mpr7oiq7k8] {
    font-style: italic;
    color: var(--rose);
}

/* ---------- Features (magazine spreads) ---------- */

.features[b-mpr7oiq7k8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

.feature[b-mpr7oiq7k8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
}

.feature:nth-child(even) figure[b-mpr7oiq7k8] {
    order: 2;
}

.feature figure[b-mpr7oiq7k8] {
    margin: 0;
}

.feature img[b-mpr7oiq7k8] {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.feature-no[b-mpr7oiq7k8] {
    color: var(--rose);
    margin-bottom: var(--space-2);
}

.feature h2[b-mpr7oiq7k8] {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.feature-copy p:last-child[b-mpr7oiq7k8] {
    color: var(--ink-soft);
    font-size: var(--text-lead);
    max-width: 440px;
    margin: 0;
}

/* ---------- FAQ ---------- */

.faq[b-mpr7oiq7k8] {
    max-width: 800px;
    border-top: 1px solid var(--ink);
    padding-top: var(--space-6);
}

.faq > h2[b-mpr7oiq7k8] {
    font-size: var(--text-title);
    text-align: center;
    margin-bottom: var(--space-5);
}

.faq-item[b-mpr7oiq7k8] {
    border-top: 1px solid var(--line);
    padding: var(--space-3) 0;
    margin: 0;
}

.faq-item h3[b-mpr7oiq7k8] {
    font-size: 1.25rem;
    margin-bottom: var(--space-1);
}

.faq-item p[b-mpr7oiq7k8] {
    color: var(--ink-soft);
    margin: 0;
    font-size: var(--text-base);
}

/* ---------- Closing ---------- */

.closing[b-mpr7oiq7k8] {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-6);
    align-items: center;
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

.closing-figure[b-mpr7oiq7k8] {
    margin: 0;
}

.closing-figure img[b-mpr7oiq7k8] {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.closing-copy .meta[b-mpr7oiq7k8] {
    color: var(--rose);
    margin-bottom: var(--space-2);
}

.closing-copy h2[b-mpr7oiq7k8] {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
}

.closing-copy h2 em[b-mpr7oiq7k8] {
    font-style: italic;
    font-weight: 500;
}

.closing-copy p:not(.meta)[b-mpr7oiq7k8] {
    color: var(--ink-soft);
    font-size: var(--text-lead);
    max-width: 440px;
    margin-bottom: var(--space-4);
}

@keyframes fade-up-b-mpr7oiq7k8 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 899px) {
    .hero[b-mpr7oiq7k8],
    .feature[b-mpr7oiq7k8],
    .closing[b-mpr7oiq7k8] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .hero[b-mpr7oiq7k8] {
        padding-top: var(--space-4);
        padding-bottom: var(--space-5);
    }

    .hero-figure[b-mpr7oiq7k8] {
        order: 2;
    }

    .feature:nth-child(even) figure[b-mpr7oiq7k8] {
        order: 0;
    }

    .features[b-mpr7oiq7k8] {
        gap: var(--space-6);
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }

    .hero-actions[b-mpr7oiq7k8] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero[b-mpr7oiq7k8] {
        animation: none;
    }
}
/* /Components/Pages/Notes/Notes.razor.rz.scp.css */
/* The masthead lives in Shared/PageMasthead; this styles its slot content. */
.head-meta[b-y8v7roqwww] {
    margin: 0;
}

/* ---------- Add note ---------- */

.add-note[b-y8v7roqwww] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    margin-bottom: var(--space-3);
}

.add-note-actions[b-y8v7roqwww] {
    display: flex;
    justify-content: flex-end;
}

/* ---------- Image controls ---------- */

.note-media[b-y8v7roqwww] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

/* The real file input is hidden; the label is the button. InputFile is a child
   component, so its <input> carries its own scope id — reach it with ::deep. */
.note-media[b-y8v7roqwww]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.media-btn[b-y8v7roqwww] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.media-btn:hover[b-y8v7roqwww] {
    color: var(--ink);
    background: var(--cream);
}

.media-btn svg[b-y8v7roqwww] {
    width: 15px;
    height: 15px;
    display: block;
}

.media-url[b-y8v7roqwww] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 0;
}

.media-url input[b-y8v7roqwww] {
    flex: 1 1 auto;
    min-width: 0;
}

.media-url .btn-secondary[b-y8v7roqwww] {
    padding: 8px 14px;
    font-size: var(--text-meta);
    flex-shrink: 0;
}

.media-error[b-y8v7roqwww] {
    margin: 0;
    color: var(--clay-deep);
    font-size: var(--text-meta);
}

/* Staged / editable thumbnails */
.image-strip[b-y8v7roqwww] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.thumb[b-y8v7roqwww] {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cream);
}

.thumb img[b-y8v7roqwww] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb-remove[b-y8v7roqwww] {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.thumb-remove:hover[b-y8v7roqwww] {
    background: rgba(0, 0, 0, 0.75);
}

/* ---------- Note cards ---------- */

.note-grid[b-y8v7roqwww] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    align-items: start;
}

.note[b-y8v7roqwww] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.note-head[b-y8v7roqwww] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-1);
}

.note-title[b-y8v7roqwww] {
    font-size: 1.3rem;
    margin: 0;
}

.note-body[b-y8v7roqwww] {
    margin: 0;
    color: var(--ink-soft);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.note-body a[b-y8v7roqwww] {
    color: var(--clay-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

/* ---------- Note images ---------- */

.note-images[b-y8v7roqwww] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
}

.note-image[b-y8v7roqwww] {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--cream);
}

.note-image img[b-y8v7roqwww] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition);
}

.note-image:hover img[b-y8v7roqwww] {
    transform: scale(1.03);
}

.note-when[b-y8v7roqwww] {
    margin-top: auto;
}

/* ---------- Actions ---------- */

.note-actions[b-y8v7roqwww] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition);
}

.note:hover .note-actions[b-y8v7roqwww],
.note:focus-within .note-actions[b-y8v7roqwww] {
    opacity: 1;
}

.action[b-y8v7roqwww] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    padding: 6px;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
}

.action:hover[b-y8v7roqwww] {
    color: var(--ink);
    background: var(--cream);
}

.action.icon svg[b-y8v7roqwww] {
    width: 16px;
    height: 16px;
    display: block;
}

.action.confirm[b-y8v7roqwww] {
    color: var(--clay-deep);
    font-weight: 500;
}

.confirm-text[b-y8v7roqwww] {
    font-size: var(--text-meta);
    color: var(--clay-deep);
}

/* ---------- Inline edit ---------- */

.note-edit[b-y8v7roqwww] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.note-edit-actions[b-y8v7roqwww] {
    display: flex;
    gap: var(--space-1);
}

.note-edit-actions .btn-primary[b-y8v7roqwww],
.note-edit-actions .btn-secondary[b-y8v7roqwww] {
    padding: 8px 18px;
    font-size: var(--text-meta);
}

.empty[b-y8v7roqwww] {
    text-align: center;
    color: var(--ink-soft);
}

/* ---------- Mobile ---------- */

@media (max-width: 719px) {
    .note-grid[b-y8v7roqwww] {
        grid-template-columns: 1fr;
    }

    .note-actions[b-y8v7roqwww] {
        opacity: 1;
    }
}
/* /Components/Pages/Rsvp/Rsvp.razor.rz.scp.css */
/* Public RSVP page — editorial: ink on white, one scarlet accent. */

.rsvp-shell[b-5eq7n2itso] {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-3) var(--space-7);
}

.rsvp-card h1[b-5eq7n2itso] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 500;
    margin: 0 0 var(--space-2);
    color: var(--ink);
}

.rsvp-card h2[b-5eq7n2itso] {
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: 500;
    margin: 0 0 var(--space-2);
}

.rsvp-kicker[b-5eq7n2itso] {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--text-meta);
    color: var(--rose);
    margin: 0 0 var(--space-1);
}

.rsvp-lead[b-5eq7n2itso] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-lead);
    color: var(--ink-soft);
    margin: 0 0 var(--space-2);
}

.rsvp-venue[b-5eq7n2itso]::before {
    content: "·";
    margin-right: var(--space-2);
    color: var(--ink-faint);
}

.rsvp-message[b-5eq7n2itso] {
    font-style: italic;
    color: var(--ink-soft);
    border-left: 2px solid var(--rose);
    padding-left: var(--space-2);
    margin: 0 0 var(--space-3);
}

.rsvp-find[b-5eq7n2itso],
.rsvp-respond[b-5eq7n2itso],
.rsvp-thanks[b-5eq7n2itso],
.rsvp-closed[b-5eq7n2itso] {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

/* ---------- Find your name ---------- */

.rsvp-search[b-5eq7n2itso] {
    display: flex;
    gap: var(--space-1);
}

.rsvp-search input[b-5eq7n2itso] {
    flex: 1;
}

.rsvp-no-match[b-5eq7n2itso] {
    color: var(--ink-soft);
    margin: var(--space-2) 0 0;
}

.rsvp-matches[b-5eq7n2itso] {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rsvp-matches a[b-5eq7n2itso] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    padding: 12px var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: var(--ink);
    transition: border-color var(--transition), background var(--transition);
}

.rsvp-matches a:hover[b-5eq7n2itso] {
    border-color: var(--ink);
    background: var(--cream);
}

.rsvp-match-name[b-5eq7n2itso] {
    font-weight: 500;
}

.rsvp-match-party[b-5eq7n2itso] {
    font-size: var(--text-meta);
    font-style: italic;
    color: var(--ink-faint);
}

/* ---------- Respond ---------- */

.rsvp-member[b-5eq7n2itso] {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--space-2);
    margin: 0 0 var(--space-2);
}

.rsvp-member legend[b-5eq7n2itso] {
    font-family: var(--font-display);
    font-size: var(--text-lead);
    padding: 0 6px;
}

.rsvp-choices[b-5eq7n2itso] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.rsvp-choice[b-5eq7n2itso] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--ink-soft);
}

.rsvp-choice:has(input:checked)[b-5eq7n2itso] {
    color: var(--ink);
    font-weight: 500;
}

.rsvp-choice input[b-5eq7n2itso] {
    accent-color: var(--rose);
}

.rsvp-fields[b-5eq7n2itso] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.rsvp-courses[b-5eq7n2itso] {
    display: flex;
    gap: var(--space-1);
}

.rsvp-course[b-5eq7n2itso] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-meta);
    color: var(--ink-soft);
}

/* No dinner questions for a member who is declining. */
.rsvp-member:has(input[type="radio"][value="no"]:checked) .rsvp-courses[b-5eq7n2itso] {
    display: none;
}

.rsvp-actions[b-5eq7n2itso] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.rsvp-error[b-5eq7n2itso] {
    color: var(--rose-deep);
    background: var(--rose-mist);
    padding: 12px var(--space-2);
    border-radius: var(--radius-card);
    margin: 0 0 var(--space-2);
}

/* ---------- Thanks / closed ---------- */

.rsvp-thanks p[b-5eq7n2itso],
.rsvp-closed p[b-5eq7n2itso] {
    color: var(--ink-soft);
    margin: 0;
}

.rsvp-thanks a[b-5eq7n2itso] {
    color: var(--rose);
}

@media (max-width: 719px) {
    .rsvp-search[b-5eq7n2itso] {
        flex-direction: column;
    }

    .rsvp-courses[b-5eq7n2itso] {
        flex-direction: column;
    }

    .rsvp-actions[b-5eq7n2itso] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}
/* /Components/Pages/Seating/Seating.razor.rz.scp.css */
/* The masthead itself lives in Shared/PageMasthead; only this page's slot
   content (meta line + progress) is styled here. */
.seat-meta[b-h2k843e6xf] {
    margin: 0;
}

/* Thin sage progress line: fills toward the same "settled" green as the
   all-seated message. */
.seat-progress[b-h2k843e6xf] {
    width: 220px;
    max-width: 100%;
    height: 2px;
    background: var(--line);
    margin-top: var(--space-1);
}

.seat-progress-fill[b-h2k843e6xf] {
    height: 100%;
    background: var(--sage);
    transition: width 240ms ease-out;
}

/* ---------- First-visit start ---------- */

.start[b-h2k843e6xf] {
    text-align: center;
    padding: var(--space-6) var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    background: var(--wash);
}

.start h2[b-h2k843e6xf] {
    margin: 0;
}

.start p[b-h2k843e6xf] {
    color: var(--ink-soft);
    margin: 0 0 var(--space-1);
}

/* ---------- Selection bar ---------- */

.seat-bar[b-h2k843e6xf] {
    position: sticky;
    top: var(--space-1);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    background: var(--rose-mist);
    border: 1px solid var(--rose);
    border-radius: var(--radius-card);
    padding: 10px var(--space-2);
    margin-bottom: var(--space-2);
}

.seat-bar-actions[b-h2k843e6xf] {
    display: flex;
    gap: var(--space-1);
}

.seat-bar .btn-secondary[b-h2k843e6xf] {
    padding: 6px 14px;
    font-size: var(--text-meta);
    background: var(--white);
}

/* ---------- Unseated panel ---------- */

/* Neutral wash, clay label: "not seated yet" is outstanding work, same meaning
   clay carries on the budget page. The panel itself stays neutral so the RSVP
   chips inside keep their own tints readable. */
.unseated[b-h2k843e6xf] {
    margin-bottom: var(--space-3);
    background: var(--wash);
}

.unseated-head[b-h2k843e6xf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.unseated-label[b-h2k843e6xf] {
    margin: 0;
    color: var(--clay-deep);
}

.unseated-search[b-h2k843e6xf] {
    width: 200px;
    padding: 6px 12px;
    font-size: var(--text-meta);
}

.unseated-none[b-h2k843e6xf] {
    margin: var(--space-1) 0 0;
    color: var(--ink-soft);
}

/* Done state in sage, the settled colour. */
.all-seated[b-h2k843e6xf] {
    margin-bottom: var(--space-3);
    color: var(--sage-deep);
}

/* ---------- Chips ---------- */

.chip-row[b-h2k843e6xf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.chip[b-h2k843e6xf] {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

/* RSVP tints mirror the budget pills: white chip for undecided (was --cream,
   which is white now and vanished against the wash), sage for accepted, clay
   for declined, each with its own-colour border for definition. */
.chip.rsvp-pending[b-h2k843e6xf] {
    background: var(--white);
    color: var(--ink-soft);
    border-color: var(--line);
}

.chip.rsvp-accepted[b-h2k843e6xf] {
    background: var(--sage-mist);
    color: var(--sage-deep);
    border-color: var(--sage);
}

.chip.rsvp-declined[b-h2k843e6xf] {
    background: var(--clay-mist);
    color: var(--clay-deep);
    border-color: var(--clay);
    text-decoration: line-through;
}

.chip:hover[b-h2k843e6xf] {
    border-color: var(--rose);
}

.chip-selected[b-h2k843e6xf] {
    border-color: var(--rose);
    background: var(--rose-mist);
    color: var(--rose-deep);
    box-shadow: 0 0 0 3px var(--rose-mist);
}

.chip[draggable="true"][b-h2k843e6xf] {
    cursor: grab;
}

.chip-dragging[b-h2k843e6xf] {
    opacity: 0.45;
}

.chip-add[b-h2k843e6xf] {
    background: transparent;
    border: 1px dashed var(--ink-faint);
    color: var(--ink-soft);
}

.chip-add:hover[b-h2k843e6xf] {
    color: var(--rose-deep);
    border-color: var(--rose);
}

/* The fold/unfold chip in the unseated panel: solid so it reads as a control
   rather than a guest. After .chip's border shorthand so its border survives. */
.chip-more[b-h2k843e6xf] {
    background: var(--white);
    border: 1px solid var(--ink-faint);
    color: var(--ink-soft);
}

.chip-more:hover[b-h2k843e6xf] {
    color: var(--ink);
    border-color: var(--ink);
}

/* ---------- Table grid ---------- */

.table-grid[b-h2k843e6xf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    align-items: start;
}

/* Tables sit on the wash so they lift off the white page, like budget rows. */
.table-card[b-h2k843e6xf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--wash);
}

.head-table[b-h2k843e6xf] {
    grid-column: 1 / -1;
    border-color: var(--gold);
}

.seatable[b-h2k843e6xf] {
    cursor: pointer;
}

.seatable:hover[b-h2k843e6xf] {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px var(--rose-mist);
}

.drop-ready[b-h2k843e6xf] {
    border-style: dashed;
    border-color: var(--rose);
}

.card-dragging[b-h2k843e6xf] {
    opacity: 0.45;
}

.grip[b-h2k843e6xf] {
    cursor: grab;
}

.grip svg[b-h2k843e6xf] {
    width: 16px;
    height: 16px;
    display: block;
}

/* ---------- Table header ---------- */

/* Place-card header: seat count as a tiny tracked kicker over a big serif
   name, like the numbered spreads on the landing page. */
.table-head[b-h2k843e6xf] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
}

.table-title-block[b-h2k843e6xf] {
    flex: 1;
    min-width: 0;
}

.table-kicker[b-h2k843e6xf] {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    margin: 0 0 2px;
    white-space: nowrap;
}

/* Gold marks the head table, deep enough to pass contrast on the wash. */
.table-kicker.head[b-h2k843e6xf] {
    color: var(--gold-deep);
}

.table-kicker.over[b-h2k843e6xf] {
    color: var(--clay-deep);
}

.table-name[b-h2k843e6xf] {
    font-size: 1.5rem;
    margin: 0;
    min-width: 0;
}

/* Empty tables get a whisper rather than dead space; decorative (the kicker
   already says "0 seated"), so faint is fine. */
.table-empty[b-h2k843e6xf] {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink-faint);
}

.table-actions[b-h2k843e6xf] {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}

.table-card:hover .table-actions[b-h2k843e6xf],
.table-card:focus-within .table-actions[b-h2k843e6xf] {
    opacity: 1;
}

.action[b-h2k843e6xf] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    padding: 6px;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
}

.action:hover[b-h2k843e6xf] {
    color: var(--ink);
    background: var(--cream);
}

.action.icon svg[b-h2k843e6xf] {
    width: 16px;
    height: 16px;
    display: block;
}

.action.confirm[b-h2k843e6xf] {
    color: var(--clay-deep);
    font-weight: 500;
}

.confirm-text[b-h2k843e6xf] {
    font-size: var(--text-meta);
    color: var(--clay-deep);
}

/* ---------- Table edit ---------- */

.table-edit[b-h2k843e6xf] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
}

.table-edit input[b-h2k843e6xf] {
    flex: 1;
    min-width: 120px;
    width: auto;
}

.table-edit .cap-input[b-h2k843e6xf] {
    flex: 0 0 90px;
}

.table-edit .btn-primary[b-h2k843e6xf],
.table-edit .btn-secondary[b-h2k843e6xf] {
    padding: 8px 16px;
    font-size: var(--text-meta);
}

/* ---------- Quick add ---------- */

.quick-add[b-h2k843e6xf] {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Anchors the suggestion list to the input. */
.quick-add-box[b-h2k843e6xf] {
    position: relative;
}

.quick-add input[b-h2k843e6xf] {
    width: 160px;
    padding: 6px 12px;
    font-size: var(--text-meta);
}

/* ---------- Guest suggestions ---------- */

.suggest[b-h2k843e6xf] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 230px;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--ink);
    box-shadow: var(--shadow-lift);
}

.suggest-item[b-h2k843e6xf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink);
    transition: background var(--transition);
}

.suggest-item:hover[b-h2k843e6xf],
.suggest-item:focus-visible[b-h2k843e6xf],
.suggest-active[b-h2k843e6xf] {
    background: var(--wash-deep);
}

.suggest-name[b-h2k843e6xf] {
    font-weight: 500;
}

.suggest-where[b-h2k843e6xf] {
    color: var(--ink-soft);
    white-space: nowrap;
}

.quick-add .btn-primary[b-h2k843e6xf],
.quick-add .btn-secondary[b-h2k843e6xf] {
    padding: 6px 14px;
    font-size: var(--text-meta);
}

/* ---------- Add table ---------- */

.add-table[b-h2k843e6xf] {
    border: 1px dashed var(--ink-faint);
    border-radius: var(--radius-card);
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-4);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.add-table:hover[b-h2k843e6xf] {
    color: var(--rose-deep);
    border-color: var(--rose);
}

/* ---------- Mobile ---------- */

@media (max-width: 719px) {


    .table-grid[b-h2k843e6xf] {
        grid-template-columns: 1fr;
    }

    .table-actions[b-h2k843e6xf] {
        opacity: 1;
    }

    .seat-bar[b-h2k843e6xf] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* /Components/Pages/Settings/Settings.razor.rz.scp.css */
.settings-card[b-ca5dda6c1t] {
    max-width: 560px;
    margin-bottom: var(--space-3);
}

.settings-section-title[b-ca5dda6c1t] {
    font-size: var(--text-lead);
    margin: 0 0 var(--space-3);
}

.optional[b-ca5dda6c1t] {
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink-faint);
    font-weight: 300;
}

.save-row[b-ca5dda6c1t] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.saved-note[b-ca5dda6c1t] {
    font-size: var(--text-meta);
    color: var(--sage-deep);
    animation: fade-in-b-ca5dda6c1t 240ms ease-out;
}

@keyframes fade-in-b-ca5dda6c1t {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.photos-lead[b-ca5dda6c1t] {
    color: var(--ink-soft);
    font-size: var(--text-meta);
    margin: 0 0 var(--space-2);
}

.photo-fields[b-ca5dda6c1t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.photo-label[b-ca5dda6c1t] {
    display: block;
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin-bottom: var(--space-1);
}

.photo-drop[b-ca5dda6c1t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px dashed var(--line);
    background: var(--cream);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition);
}

.photo-drop:hover[b-ca5dda6c1t] {
    border-color: var(--rose);
}

.photo-drop img[b-ca5dda6c1t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-hint[b-ca5dda6c1t] {
    font-size: var(--text-meta);
    color: var(--ink-faint);
    text-align: center;
    padding: 0 var(--space-1);
}

/* Hide the raw file input; the styled label triggers it. */
.photo-field[b-ca5dda6c1t]  input[type="file"] {
    display: none;
}

/* ---------- RSVP link ---------- */

.share-lead[b-ca5dda6c1t] {
    color: var(--ink-soft);
    font-size: var(--text-meta);
    margin: 0 0 var(--space-2);
}

.share-row[b-ca5dda6c1t] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    margin-bottom: var(--space-1);
}

.share-url[b-ca5dda6c1t] {
    flex: 1;
    font-size: var(--text-meta);
    color: var(--ink-soft);
}

.share-controls[b-ca5dda6c1t] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}

/* Status reads as state; the button next to it is the action. */
.share-status[b-ca5dda6c1t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-meta);
}

.share-status[b-ca5dda6c1t]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.share-status.live[b-ca5dda6c1t] {
    color: var(--sage-deep);
}

.share-status.live[b-ca5dda6c1t]::before {
    background: var(--sage);
}

.share-status.off[b-ca5dda6c1t] {
    color: var(--clay-deep);
}

.share-status.off[b-ca5dda6c1t]::before {
    background: var(--clay);
}

.share-action[b-ca5dda6c1t] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    padding: 6px;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
}

.share-action:hover[b-ca5dda6c1t] {
    color: var(--ink);
    background: var(--cream);
}

.share-action.confirm[b-ca5dda6c1t] {
    color: var(--clay-deep);
    font-weight: 500;
}

.confirm-text[b-ca5dda6c1t] {
    font-size: var(--text-meta);
    color: var(--clay-deep);
}

.share-message[b-ca5dda6c1t] {
    width: 100%;
    resize: vertical;
    font-size: var(--text-meta);
}

/* ---------- The menu ---------- */

.menu-lead[b-ca5dda6c1t] {
    color: var(--ink-soft);
    font-size: var(--text-meta);
    margin: 0 0 var(--space-2);
}

.menu-courses[b-ca5dda6c1t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.menu-course-title[b-ca5dda6c1t] {
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    margin: 0 0 var(--space-1);
}

.menu-dish[b-ca5dda6c1t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.menu-dish .action[b-ca5dda6c1t] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-faint);
    padding: 4px;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
}

.menu-dish .action:hover[b-ca5dda6c1t] {
    color: var(--rose-deep);
    background: var(--cream);
}

.menu-dish .action svg[b-ca5dda6c1t] {
    width: 14px;
    height: 14px;
    display: block;
}

.menu-add[b-ca5dda6c1t] {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.menu-add input[b-ca5dda6c1t] {
    flex: 1;
}

.menu-add .btn-secondary[b-ca5dda6c1t] {
    padding: 8px 18px;
    font-size: var(--text-meta);
}
/* /Components/Pages/Setup/Setup.razor.rz.scp.css */
/* Echoes the landing hero's kicker: scarlet, tracked, above the serif title. */
.setup-kicker[b-ylsxgbg7co] {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--text-meta);
    color: var(--rose);
    margin: 0 0 var(--space-1);
}

.optional[b-ylsxgbg7co] {
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink-faint);
    font-weight: 300;
}

.photo-fields[b-ylsxgbg7co] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.photo-label[b-ylsxgbg7co] {
    display: block;
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin-bottom: var(--space-1);
}

.photo-drop[b-ylsxgbg7co] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px dashed var(--line);
    background: var(--cream);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition);
}

.photo-drop:hover[b-ylsxgbg7co] {
    border-color: var(--rose);
}

.photo-drop img[b-ylsxgbg7co] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-hint[b-ylsxgbg7co] {
    font-size: var(--text-meta);
    color: var(--ink-faint);
    text-align: center;
    padding: 0 var(--space-1);
}

/* Hide the raw file input; the styled label triggers it. */
.photo-field[b-ylsxgbg7co]  input[type="file"] {
    display: none;
}

.quit-form[b-ylsxgbg7co] {
    text-align: center;
    margin-top: var(--space-3);
}

.quit[b-ylsxgbg7co] {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    color: var(--ink-soft);
    cursor: pointer;
    transition: color var(--transition);
}

.quit:hover[b-ylsxgbg7co] {
    color: var(--rose-deep);
}
/* /Components/Shared/ComingSoon.razor.rz.scp.css */
.coming-soon[b-k6zkzn17yu] {
    text-align: center;
    padding: var(--space-7) var(--space-3);
    max-width: 480px;
    margin: 0 auto;
}

.coming-soon h1[b-k6zkzn17yu] {
    font-size: var(--text-title);
}

.coming-soon p[b-k6zkzn17yu] {
    color: var(--ink-soft);
    margin-bottom: var(--space-4);
}
/* /Components/Shared/NewsletterSignup.razor.rz.scp.css */
.newsletter[b-iy4g8ed0qy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.newsletter-heading[b-iy4g8ed0qy] {
    font-size: 1.25rem;
    margin: 0 0 var(--space-1);
}

.newsletter-copy p[b-iy4g8ed0qy],
.newsletter-done p[b-iy4g8ed0qy] {
    color: var(--ink-soft);
    margin: 0;
    max-width: 46ch;
}

.newsletter-row[b-iy4g8ed0qy] {
    display: flex;
    gap: var(--space-1);
    align-items: stretch;
    max-width: 460px;
}

.newsletter-row input[b-iy4g8ed0qy] {
    flex: 1;
    min-width: 0;
}

.newsletter-row .btn-primary[b-iy4g8ed0qy] {
    flex-shrink: 0;
    white-space: nowrap;
}

.newsletter-form[b-iy4g8ed0qy]  .validation-message {
    margin-top: var(--space-1);
}

.newsletter-done[b-iy4g8ed0qy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Compact variant — for narrow footer columns. */
.is-compact .newsletter-heading[b-iy4g8ed0qy] {
    font-size: 1.05rem;
}

.is-compact .newsletter-copy p[b-iy4g8ed0qy],
.is-compact .newsletter-done p[b-iy4g8ed0qy] {
    font-size: var(--text-meta);
}

.visually-hidden[b-iy4g8ed0qy] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 520px) {
    .newsletter-row[b-iy4g8ed0qy] {
        flex-direction: column;
    }

    .newsletter-row .btn-primary[b-iy4g8ed0qy] {
        width: 100%;
    }
}
/* /Components/Shared/PageMasthead.razor.rz.scp.css */
.page-head[b-2jr5pdi2be] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--ink);
}

/* Landscape and sharp-cornered; 3:2 matches the seating masthead's look. */
.page-head-photo[b-2jr5pdi2be] {
    width: 280px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    flex-shrink: 0;
}

.page-head-copy[b-2jr5pdi2be] {
    min-width: 0;
}

.page-kicker[b-2jr5pdi2be] {
    display: inline-block;
    border-top: 2px solid var(--ink);
    padding-top: 6px;
    margin: 0 0 var(--space-1);
}

.page-head h1[b-2jr5pdi2be] {
    font-size: 2.4rem;
    margin-bottom: 4px;
}

@media (max-width: 719px) {
    .page-head-photo[b-2jr5pdi2be] {
        width: 132px;
    }
}

/* On the narrowest screens the photo gives its space back to the title. */
@media (max-width: 580px) {
    .page-head-photo[b-2jr5pdi2be] {
        display: none;
    }
}
/* /Components/Shared/Portrait.razor.rz.scp.css */
.portrait[b-2jqadw3osf] {
    border-radius: 50%;
    border: 2px solid var(--gold);
    padding: 3px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.portrait img[b-2jqadw3osf],
.portrait .monogram[b-2jqadw3osf] {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portrait .monogram[b-2jqadw3osf] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rose-mist);
    color: var(--rose-deep);
    font-family: var(--font-display);
    font-weight: 600;
}

.portrait-lg[b-2jqadw3osf] {
    width: 96px;
    height: 96px;
}

.portrait-lg .monogram[b-2jqadw3osf] {
    font-size: 2.2rem;
}

.portrait-md[b-2jqadw3osf] {
    width: 56px;
    height: 56px;
}

.portrait-md .monogram[b-2jqadw3osf] {
    font-size: 1.4rem;
}
/* /Components/Shared/ProgressRing.razor.rz.scp.css */
.ring[b-zj13u1r78d] {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

.ring svg[b-zj13u1r78d] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.track[b-zj13u1r78d],
.value[b-zj13u1r78d] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.track[b-zj13u1r78d] {
    stroke: var(--line);
}

.value[b-zj13u1r78d] {
    stroke: var(--rose);
    animation: sweep-b-zj13u1r78d 600ms ease-out;
}

.ring-label[b-zj13u1r78d] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
}

@keyframes sweep-b-zj13u1r78d {
    from {
        stroke-dashoffset: 119.4;
    }
}

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