@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Layout/AppNavBar.razor.rz.scp.css */
/* ─── Top bar ──────────────────────────────────────────────────────────────── */
.cs-topbar[b-aie7gyryjv] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 56px;
    padding: 0 1rem;
    background-color: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.cs-topbar__logo[b-aie7gyryjv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    border-radius: var(--control-corner-radius);
    padding: 4px 8px;
}

.cs-topbar__logo:hover[b-aie7gyryjv] {
    background-color: var(--neutral-fill-stealth-hover);
}

.cs-topbar__logo-label[b-aie7gyryjv] {
    font-size: 1.1rem;
    font-weight: 600;
}

.cs-topbar__links[b-aie7gyryjv] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex: 1;
    margin-left: 0.5rem;
}

.cs-topbar__actions[b-aie7gyryjv] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

/* ─── Shared nav link ───────────────────────────────────────────────────────── */
.cs-nav-link[b-aie7gyryjv],
[b-aie7gyryjv] .cs-nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 6px 10px;
    border-radius: var(--control-corner-radius);
    text-decoration: none;
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    cursor: pointer;
}

.cs-nav-link:hover[b-aie7gyryjv],
[b-aie7gyryjv] .cs-nav-link:hover {
    background-color: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.cs-nav-link.active[b-aie7gyryjv],
[b-aie7gyryjv] .cs-nav-link.active {
    background-color: var(--neutral-fill-secondary-rest);
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

.cs-nav-link--icon span[b-aie7gyryjv] {
    display: none;
}

/* Spec 005 — pending-incoming connection-request badge nestled to the right
 * of the People link. ::deep so the FluentBadge inside the child component
 * picks up the size override. */
[b-aie7gyryjv] .cs-pending-badge {
    margin-left: 4px;
    font-size: 0.7rem;
    line-height: 1;
}

.cs-nav-guest[b-aie7gyryjv] {
    font-style: italic;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    padding: 0 8px;
}

/* ─── Visibility helpers (768 px breakpoint per T018) ───────────────────────── */
.cs-desktop-only[b-aie7gyryjv] {
    display: flex;
}

@media (max-width: 767px) {
    .cs-desktop-only[b-aie7gyryjv] {
        display: none !important;
    }
}
/* /Components/Layout/BottomMenu.razor.rz.scp.css */
/* ─── Bottom bar ────────────────────────────────────────────────────────────── */
.cs-bottombar[b-xdxrg33rnr] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    align-items: stretch;
    height: 56px;
    background-color: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    box-shadow: 0 -1px 3px rgba(0,0,0,.1);
    padding-bottom: env(safe-area-inset-bottom);
}

.cs-bottom-link[b-xdxrg33rnr],
[b-xdxrg33rnr] .cs-bottom-link {
    flex: 1;
    position: relative; /* anchor for badge overlays (cs-pending-badge,
                           cs-unfiled-badge) so they don't take vertical
                           space in the flex column */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    font-size: 0.625rem;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

.cs-bottom-link:hover[b-xdxrg33rnr],
[b-xdxrg33rnr] .cs-bottom-link:hover {
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-fill-stealth-hover);
}

.cs-bottom-link.active[b-xdxrg33rnr],
[b-xdxrg33rnr] .cs-bottom-link.active {
    color: var(--accent-foreground-rest);
}

.cs-bottom-link--button[b-xdxrg33rnr] {
    cursor: pointer;
    position: relative;
}

/* Spec 005 / spec 013 — badge overlays on the bottom-bar links.
 * On the bottom links they float top-right of the icon; inside the More
 * sheet they sit inline next to the label. ::deep so child-component
 * output picks them up. Spec 032 Phase 4 tangential fix: extend the
 * positioning to `.cs-unfiled-badge` so the Cabinets slot doesn't
 * inline-stack the badge below the label (making the slot taller than
 * its peers). */
[b-xdxrg33rnr] .cs-bottom-link .cs-pending-badge,
[b-xdxrg33rnr] .cs-bottom-link .cs-unfiled-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    font-size: 0.65rem;
    line-height: 1;
}

[b-xdxrg33rnr] .cs-more-link .cs-pending-badge {
    margin-left: 6px;
    font-size: 0.7rem;
    line-height: 1;
}

/* ─── More flyout ───────────────────────────────────────────────────────────── */
.cs-more-overlay[b-xdxrg33rnr] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 150;
}

.cs-more-sheet[b-xdxrg33rnr] {
    position: fixed;
    bottom: calc(56px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    z-index: 151;
    background-color: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    box-shadow: 0 -2px 8px rgba(0,0,0,.2);
    padding: 0.5rem;
    flex-direction: column;
}

.cs-more-link[b-xdxrg33rnr],
[b-xdxrg33rnr] .cs-more-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 12px 16px;
    border-radius: var(--control-corner-radius);
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    font-size: 0.9375rem;
}

.cs-more-link:hover[b-xdxrg33rnr],
[b-xdxrg33rnr] .cs-more-link:hover {
    background-color: var(--neutral-fill-stealth-hover);
}

.cs-more-divider[b-xdxrg33rnr] {
    height: 1px;
    margin: 0.5rem 0.5rem;
    background-color: var(--neutral-stroke-divider-rest);
}

/* ─── Visibility (mirrors AppNavBar 768 px breakpoint per T018) ─────────────── */
.cs-mobile-only[b-xdxrg33rnr] {
    display: none;
}

@media (max-width: 767px) {
    .cs-mobile-only[b-xdxrg33rnr] {
        display: flex !important;
    }
}
/* /Components/Layout/Footer.razor.rz.scp.css */
.cs-footer[b-ljys8ncudx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-top: 2rem;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    background-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-hint);
    font-size: 0.8125rem;
}

.cs-footer__copyright[b-ljys8ncudx] {
    white-space: nowrap;
}

.cs-footer__links[b-ljys8ncudx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cs-footer-link[b-ljys8ncudx],
[b-ljys8ncudx] .cs-footer-link {
    color: var(--neutral-foreground-hint);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--control-corner-radius);
}

.cs-footer-link:hover[b-ljys8ncudx],
[b-ljys8ncudx] .cs-footer-link:hover {
    background-color: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App shell: topbar (sticky) + scrollable main + bottom bar (mobile only). */
.app-shell[b-p2m5xgvn5w] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.app-main[b-p2m5xgvn5w] {
    flex: 1;
    overflow-y: auto;
    /* Horizontal padding scales with viewport: 1rem mobile / 2rem tablet+
       / 3rem desktop+. Wide screens previously ran content nearly edge-
       to-edge with the flat 1rem, which felt cramped — see design-system
       §8 #7. Vertical padding stays at 1rem; the mobile bottom override
       below reserves space for the fixed bottom bar. */
    padding: 1rem;
    padding-bottom: calc(56px + env(safe-area-inset-bottom) + 1rem);
    /* Flex column so the footer can be pushed to the bottom of the viewport
       when page content is shorter than the available area. */
    display: flex;
    flex-direction: column;
}

/* article gets a scoped attribute (it lives in MainLayout's template), so
   this rule applies; flex-grow consumes any extra space and naturally
   pushes the sibling <Footer /> component to the bottom of .app-main. */
.app-main > article[b-p2m5xgvn5w] {
    flex: 1 0 auto;
}

@media (min-width: 768px) {
    .app-main[b-p2m5xgvn5w] {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 1280px) {
    .app-main[b-p2m5xgvn5w] {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

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

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

/* ─── Anonymous chrome (spec 032) ─────────────────────────────────────
   Applied to every MainLayout-routed page when the viewer is not
   authenticated. Slim landing-style header + footer; default light
   theme; no app navbar, no banners, no AddWizard. The body content
   (`@Body`) is identical to the authenticated branch — only the
   wrapping chrome differs.

   Design constraints (spec 032 D3): no decorative gradients, no
   shadows, no hover transitions that feel "marketing." Type-led,
   restrained.
*/

.cs-anon-chrome__header[b-p2m5xgvn5w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
}

/* Logo + wordmark — matches AppNavBar's `.cs-topbar__logo` treatment so
   the anonymous slim header reads as the same brand as the authenticated
   navbar. Clicking takes you back to `/`. */
.cs-anon-chrome__wordmark[b-p2m5xgvn5w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    border-radius: var(--control-corner-radius, 4px);
    padding: 4px 8px;
}

.cs-anon-chrome__wordmark:hover[b-p2m5xgvn5w] {
    background-color: var(--neutral-fill-stealth-hover);
}

.cs-anon-chrome__wordmark:focus-visible[b-p2m5xgvn5w] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.cs-anon-chrome__wordmark-label[b-p2m5xgvn5w] {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Q1 resolution — subtle text link. Underline-on-hover, neutral color,
   no surrounding box. Findable in <2s for a returning user (spec 032
   SC-002) without competing with hero typography below. */
.cs-anon-chrome__login[b-p2m5xgvn5w] {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--control-corner-radius, 4px);
    transition: color 120ms ease;
}

.cs-anon-chrome__login:hover[b-p2m5xgvn5w] {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.cs-anon-chrome__login:focus-visible[b-p2m5xgvn5w] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* Horizontal padding mirrors `.app-main` so anonymous-rendered pages
   (Ethics, NotFound, public profiles, etc.) get the same gutter as
   they would when authenticated. Without this, content that doesn't
   bring its own padding runs flush to the viewport edge. The Start
   landing page has its own per-section padding/centering so it works
   either way. Vertical padding stays small (just enough to breathe
   below the slim header); the bottom-bar reserve from .app-main isn't
   needed here since anonymous chrome has no BottomMenu. */
.cs-anon-chrome__body[b-p2m5xgvn5w] {
    display: block;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    padding: 1rem;
}

@media (min-width: 768px) {
    .cs-anon-chrome__body[b-p2m5xgvn5w] {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1280px) {
    .cs-anon-chrome__body[b-p2m5xgvn5w] {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Footer matches the global `.cs-footer` layout: copyright pinned left,
   links pinned right via flex `space-between`. Horizontal padding
   mirrors `.app-main`'s responsive breakpoints so the visible footer
   gutter on anonymous pages matches what the user sees on authenticated
   pages (where the footer sits inside `.app-main`'s padded column).
   Without this match, the anonymous footer content reads as flush to
   the viewport edge relative to the body content above it. */
.cs-anon-chrome__footer[b-p2m5xgvn5w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    margin-top: 2rem;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    background-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-hint);
    font-size: 0.8125rem;
}

@media (min-width: 768px) {
    .cs-anon-chrome__footer[b-p2m5xgvn5w] {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1280px) {
    .cs-anon-chrome__footer[b-p2m5xgvn5w] {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.cs-anon-chrome__footer-copy[b-p2m5xgvn5w] {
    white-space: nowrap;
}

.cs-anon-chrome__footer-links[b-p2m5xgvn5w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cs-anon-chrome__footer-links a[b-p2m5xgvn5w] {
    color: var(--neutral-foreground-hint);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--control-corner-radius);
}

.cs-anon-chrome__footer-links a:hover[b-p2m5xgvn5w] {
    background-color: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.cs-anon-chrome__footer-links a:focus-visible[b-p2m5xgvn5w] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-lio5ynh1n9],
.components-reconnect-repeated-attempt-visible[b-lio5ynh1n9],
.components-reconnect-failed-visible[b-lio5ynh1n9],
.components-pause-visible[b-lio5ynh1n9],
.components-resume-failed-visible[b-lio5ynh1n9],
.components-rejoining-animation[b-lio5ynh1n9] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Ethics.razor.rz.scp.css */
/* Two-column layout: narrow philosophy column + wider values column.
   Stacks on mobile (single column) below the design-system breakpoint.
   Generous spacing per the Basecamp aesthetic reference — content
   should breathe; never feel cramped even on dense screens. */

.cs-ethics-layout[b-y5p3pbdyy0] {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr);
    align-items: start;
    margin-block: 0.5rem 3rem;
    /* Cap the overall reading width on very wide displays so line
       length stays comfortable (~75ch max). The grid sits centered
       in the available space. */
    max-width: 90rem;
}

@media (max-width: 767px) {
    .cs-ethics-layout[b-y5p3pbdyy0] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Philosophy aside — quieter visual weight than the main content.
   Uses Fluent's hint foreground so it reads as supporting context,
   not a competing primary section. Sized at the secondary reading
   ramp (~17px) per the design-system reading-content tokens. */
.cs-ethics-philosophy[b-y5p3pbdyy0] {
    color: var(--neutral-foreground-hint, #6e6e6e);
    font-size: var(--cs-reading-font-size-sm);
    line-height: var(--cs-reading-line-height);
}

.cs-ethics-philosophy p[b-y5p3pbdyy0] {
    margin: 0;
}

/* Values section — primary reading content. Uses the primary
   reading ramp (~19px). Capped to ~75ch so lines don't sprawl
   on wide monitors. */
.cs-ethics-values[b-y5p3pbdyy0] {
    max-width: 75ch;
}

.cs-ethics-values__heading[b-y5p3pbdyy0] {
    margin: 0 0 0.75rem 0;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.25;
}

.cs-ethics-values__lede[b-y5p3pbdyy0] {
    margin: 0 0 1.25rem 0;
    font-size: var(--cs-reading-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    line-height: 1.5;
}

.cs-ethics-values__list[b-y5p3pbdyy0] {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: var(--cs-reading-font-size);
    line-height: 1.7;
}

.cs-ethics-values__list li + li[b-y5p3pbdyy0] {
    margin-block-start: 0.875rem;
}

/* Inline lede inside a value bullet — used by the dark-patterns
   value to introduce its own sub-list without pulling extra weight
   from a heading. Same reading ramp as the surrounding list. */
.cs-ethics-values__lede-inline[b-y5p3pbdyy0] {
    margin: 0 0 0.5rem 0;
    line-height: 1.7;
}

/* Nested examples list (e.g., dark-pattern catalog under a parent
   value). Tighter line-height + slightly smaller indent so the
   sub-items read as supporting examples rather than peer values. */
.cs-ethics-values__sublist[b-y5p3pbdyy0] {
    margin: 0.5rem 0 0 0;
    padding-inline-start: 1.25rem;
    line-height: 1.55;
}

.cs-ethics-values__sublist li + li[b-y5p3pbdyy0] {
    margin-block-start: 0.5rem;
}

.cs-ethics-values__sublist strong[b-y5p3pbdyy0] {
    font-weight: 600;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* .cs-page-title and .cs-page-subtitle were promoted to app.css —
   they're used by 12+ pages and need to be global, not scoped here. */

.cs-dashboard-grid[b-ir771zfubj] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* /Components/Pages/PublicItemById.razor.rz.scp.css */
/* Spec 043 Phase 2 — the anonymous public-item viewer. Modest, calm,
   responsive media sizing; the T022 voice/polish pass may refine. */

.cs-public-item[b-j15flupm9h] {
    max-width: 56rem;
}

.cs-public-item__description[b-j15flupm9h] {
    margin: 0.5rem 0 1.25rem;
    opacity: 0.85;
}

.cs-public-item__photo[b-j15flupm9h] {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.cs-public-item__video[b-j15flupm9h] {
    display: block;
    width: 100%;
    max-height: 80vh;
    background: #000;
    border-radius: 8px;
}

.cs-public-item__pdf[b-j15flupm9h] {
    display: block;
    width: 100%;
    height: 80vh;
    border: 0;
    border-radius: 8px;
}

.cs-public-item__media-note[b-j15flupm9h] {
    margin: 1rem 0;
    opacity: 0.8;
}

.cs-public-item__download[b-j15flupm9h] {
    font-weight: 600;
}

.cs-public-item__meta[b-j15flupm9h] {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    opacity: 0.65;
}
/* /Components/Pages/Start.razor.rz.scp.css */
/* Spec 032 / Phase 2 — landing page body typography + layout.

   Type-led, restrained. No decorative gradients, no shadows on copy,
   no scroll-jack, no animated reveals (D3). Each section gets generous
   vertical breathing room; horizontal max-width keeps line lengths
   readable (~65ch). Hero is the visual anchor at the top of the page;
   subsequent sections settle into a calm rhythm beneath it.

   Polish pass (typography tune, mobile sweep, dark-theme verify) lands
   in Phase 4 (T040–T044). Phase 2's goal is a coherent first read with
   real prose in each section. */

.cs-landing__hero[b-1neccn7atn],
.cs-landing__philosophy[b-1neccn7atn],
.cs-landing__capabilities[b-1neccn7atn],
.cs-landing__freepaid[b-1neccn7atn],
.cs-landing__footer-cta[b-1neccn7atn] {
    display: block;
    max-width: 42rem;
    margin: 0 auto;
    padding: 3rem 0;
}

/* ─── Hero ───────────────────────────────────────────────────────────
   Wordmark + thesis. No image (Q4). Wordmark is the typographic anchor;
   thesis is the single sentence that answers "what is this." */
.cs-landing__hero[b-1neccn7atn] {
    padding-top: 4.5rem;
    padding-bottom: 3.5rem;
    text-align: center;
}

.cs-landing__wordmark[b-1neccn7atn] {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 1.5rem;
    color: var(--neutral-foreground-rest);
}

.cs-landing__thesis[b-1neccn7atn] {
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
    margin: 0 auto;
    max-width: 30rem;
}

/* ─── Philosophy ─────────────────────────────────────────────────────
   2–4 first-person paragraphs in the /ethics voice. Body-sized type
   with generous line height for slow reading. */
.cs-landing__philosophy p[b-1neccn7atn] {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--neutral-foreground-rest);
    margin: 0 0 1.25rem;
}

.cs-landing__philosophy p:last-child[b-1neccn7atn] {
    margin-bottom: 0;
}

/* Emphasis treatment — `<em>` rendered bold AND italic. The user's
   intent in the philosophy section is to make specific words pop
   against the body weight (e.g. "product", "not", "REAL"). Browser
   default for em is italic only; this rule layers weight on top. */
.cs-landing__philosophy em[b-1neccn7atn] {
    font-style: italic;
    font-weight: 700;
}

/* ─── Capabilities ───────────────────────────────────────────────────
   Three verb-headed sub-sections (Q2). Verbs are the visual hook;
   supporting sentences are quiet, one line each. */
.cs-landing__capabilities[b-1neccn7atn] {
    /* Slightly tighter top padding so the three capabilities feel like
       a single block, not three loose sections. */
    padding-top: 1.5rem;
}

.cs-landing__capability[b-1neccn7atn] {
    margin-bottom: 1.75rem;
}

.cs-landing__capability:last-child[b-1neccn7atn] {
    margin-bottom: 0;
}

.cs-landing__capability-verb[b-1neccn7atn] {
    font-size: clamp(1.5rem, 2.6vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    color: var(--neutral-foreground-rest);
}

.cs-landing__capability-line[b-1neccn7atn] {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ─── Free and paid (D12) ────────────────────────────────────────────
   Short, plain disclosure. Same body-paragraph treatment as Philosophy
   so it reads as part of the founder voice, not as fine print. */
.cs-landing__section-heading[b-1neccn7atn] {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    color: var(--neutral-foreground-rest);
}

.cs-landing__freepaid p[b-1neccn7atn] {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

/* ─── Footer CTA ─────────────────────────────────────────────────────
   Register (primary) + Log In (secondary). Pill shapes, neutral
   monochrome — no decorative gradients, no urgency copy, no fill
   colors that compete with the brand. Register sits first because
   the page is targeting new users; returning users have the top-right
   Log In affordance per FR-009. */
.cs-landing__footer-cta[b-1neccn7atn] {
    padding-top: 2rem;
    padding-bottom: 4rem;
    text-align: center;
}

.cs-landing__cta-row[b-1neccn7atn] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.cs-landing__cta[b-1neccn7atn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.625rem 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.cs-landing__cta--primary[b-1neccn7atn] {
    background: var(--neutral-foreground-rest);
    color: var(--neutral-layer-1);
    border-color: var(--neutral-foreground-rest);
}

.cs-landing__cta--primary:hover[b-1neccn7atn] {
    background: var(--neutral-foreground-hint);
    border-color: var(--neutral-foreground-hint);
}

.cs-landing__cta--secondary[b-1neccn7atn] {
    background: transparent;
    color: var(--neutral-foreground-rest);
    border-color: var(--neutral-stroke-rest);
}

.cs-landing__cta--secondary:hover[b-1neccn7atn] {
    border-color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-stealth-hover);
}

.cs-landing__cta:focus-visible[b-1neccn7atn] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}