/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Scoped styles for the shell chrome that app.css doesn't cover: the sidebar
   'Notifications' row is a <button> (not a NavLink), and the sidebar-launched
   notifications panel needs to pin beside the rail instead of the global
   .notif-panel absolute right-anchoring. */

/* Strip UA button chrome so .side-item (global) renders identically to the
   NavLink <a> siblings; re-declare the 3px left rule the border reset kills. */
button.side-item[b-zzlnhzqj2z] {
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
}

/* The base reset above out-specifies the global .side-item:hover background;
   re-declare it so the button's hover feedback matches the NavLinks. */
button.side-item:hover[b-zzlnhzqj2z] {
    background: var(--surface-alt);
}

/* Anchor the sidebar panel next to the rail (whatever width the active
   layout gives it — layouts.css repositions further for topbar/dock). */
.sidebar-notif-anchor[b-zzlnhzqj2z]  .notif-panel {
    position: fixed;
    left: calc(var(--sidebar-width) + 8px);
    top: 16px;
    right: auto;
}

/* The sidebar (and its toggle) only exists >=900px; keep the panel with it. */
@media (max-width: 899.98px) {
    .sidebar-notif-anchor[b-zzlnhzqj2z] {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-qcaefjhdi4],
.components-reconnect-repeated-attempt-visible[b-qcaefjhdi4],
.components-reconnect-failed-visible[b-qcaefjhdi4],
.components-pause-visible[b-qcaefjhdi4],
.components-resume-failed-visible[b-qcaefjhdi4],
.components-rejoining-animation[b-qcaefjhdi4] {
    display: none;
}

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


#components-reconnect-modal[b-qcaefjhdi4] {
    background-color: var(--overlay-bg, #fff);
    color: var(--text, #16161a);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--panel-stroke, transparent);
    border-radius: var(--radius-xl, 0.5rem);
    box-shadow: var(--shadow-overlay, 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-qcaefjhdi4 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-qcaefjhdi4] {
    border: 0;
    background-color: var(--accent, #0f62fe);
    color: var(--accent-text, #fff);
    padding: 8px 24px;
    border-radius: var(--radius-s, 4px);
    font-weight: 500;
}

    #components-reconnect-modal button:hover[b-qcaefjhdi4] {
        background-color: var(--accent-hover, #0043ce);
    }

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

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

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

@keyframes components-rejoining-animation-b-qcaefjhdi4 {
    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/Admin/AdminHome.razor.rz.scp.css */
/* Scoped styles for the admin area — shared row chrome for both the evidence
   queue and the reports queue. Card chrome and .segmented come from app.css. */

.header-row[b-e8kn4m1qq6] {
    position: relative;         /* anchors the overlaid refresh icon button */
}

.admin-tabs[b-e8kn4m1qq6] {
    margin-top: 4px;
}

.busy-center[b-e8kn4m1qq6] {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.admin-list[b-e8kn4m1qq6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    margin-top: var(--space-m);
}

.admin-row[b-e8kn4m1qq6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-l);
}

.admin-row-head[b-e8kn4m1qq6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-m);
    flex-wrap: wrap;
}

.admin-row-title[b-e8kn4m1qq6] {
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: break-word;
}

.admin-line[b-e8kn4m1qq6] {
    font-size: 13px;
}

.admin-line-label[b-e8kn4m1qq6] {
    color: var(--text-secondary);
}

/* Marks a name the submitter hides from other members: visible here because
   moderation needs it, flagged so it never gets copied somewhere public. */
.admin-private-tag[b-e8kn4m1qq6] {
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--card-stroke);
    border-radius: var(--radius-s);
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-evidence[b-e8kn4m1qq6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
    padding: 8px 10px;
    background: var(--surface-alt);
    border-left: 2px solid var(--card-stroke);
    border-radius: var(--radius-s);
}

/* Long URLs must wrap rather than widen the card. */
.admin-evidence-link[b-e8kn4m1qq6] {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.admin-evidence-image[b-e8kn4m1qq6] {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    border-radius: var(--radius-s);
    object-fit: contain;
    align-self: flex-start;
}

.admin-no-evidence[b-e8kn4m1qq6],
.admin-note[b-e8kn4m1qq6] {
    font-size: 13px;
    margin-top: 2px;
    padding: 8px 10px;
    background: var(--surface-alt);
    border-left: 2px solid var(--card-stroke);
    border-radius: var(--radius-s);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.admin-no-evidence[b-e8kn4m1qq6] {
    color: var(--text-secondary);
}

.admin-row-actions[b-e8kn4m1qq6] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-s);
    margin-top: 4px;
}

/* Compact row action — overrides .btn's 44px minimums */
.btn-compact[b-e8kn4m1qq6] {
    min-height: 34px;
    min-width: 0;
    padding: 4px 14px;
    font-size: 13px;
}
/* /Components/Pages/Auth/AccountCreated.razor.rz.scp.css */
/* Editorial Carbon interstitial: the full-bleed green splash is retired —
   success is voiced by a check badge, serif headline, and the signature
   accent rule on the app's paper + dot-grid background (from app.css). */
.success-page[b-f7uxqk69jz] {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.success-stack[b-f7uxqk69jz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 460px;
    text-align: center;
}

/* Check badge — bounces in: fade+scale to 1.15 over 400ms CubicOut, then
   settles to 1.0 over 200ms CubicIn (mobile parity). */
.check-circle[b-f7uxqk69jz] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--interested-green-soft);
    border: 1px solid var(--interested-green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    opacity: 0;
    transform: scale(0);
    animation: check-pop-b-f7uxqk69jz 600ms forwards;
}

@keyframes check-pop-b-f7uxqk69jz {
    0% {
        opacity: 0;
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); /* CubicOut */
    }
    66.7% {
        opacity: 1;
        transform: scale(1.15);
        animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); /* CubicIn */
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.check-mark[b-f7uxqk69jz] {
    font-size: 40px;
    line-height: 1;
    color: var(--interested-green);
}

/* Mono eyebrow + serif headline fade in after the check settles (600ms). */
.success-eyebrow[b-f7uxqk69jz] {
    opacity: 0;
    animation: success-fade-in-b-f7uxqk69jz 350ms cubic-bezier(0.33, 1, 0.68, 1) 600ms forwards;
}

.success-title[b-f7uxqk69jz] {
    opacity: 0;
    animation: success-fade-in-b-f7uxqk69jz 350ms cubic-bezier(0.33, 1, 0.68, 1) 600ms forwards;
}

/* Centre the signature accent rule under the centred headline. */
.success-title.page-title.ruled[b-f7uxqk69jz]::after {
    margin-left: auto;
    margin-right: auto;
}

/* Subtitle and the redirect spinner fade in staggered, 300ms each. */
.success-subtitle[b-f7uxqk69jz] {
    margin: 0;
    font-size: 15px;
    color: var(--text-secondary);
    opacity: 0;
    animation: success-fade-in-b-f7uxqk69jz 300ms cubic-bezier(0.33, 1, 0.68, 1) 950ms forwards;
}

.success-wait[b-f7uxqk69jz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    opacity: 0;
    animation: success-fade-in-b-f7uxqk69jz 300ms cubic-bezier(0.33, 1, 0.68, 1) 1250ms forwards;
}

.success-wait .spinner[b-f7uxqk69jz] {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

@keyframes success-fade-in-b-f7uxqk69jz {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .check-circle[b-f7uxqk69jz],
    .success-eyebrow[b-f7uxqk69jz],
    .success-title[b-f7uxqk69jz],
    .success-subtitle[b-f7uxqk69jz],
    .success-wait[b-f7uxqk69jz] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* /Components/Pages/Auth/CreateAccount.razor.rz.scp.css */
/* Editorial Carbon registration wizard. The split shell (.auth-split /
   .auth-brand-panel / .auth-form-panel), stepper, fields, and the body's
   paper + dot grid all come from app.css — no page background override. */

/* Wizard column: header pinned at the top, the active step centred in the
   remaining viewport on mobile; on desktop the whole column is centred by
   .auth-form-panel and the header sits directly above the step. */
.wizard-col[b-b215nog6rw] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    min-height: 100dvh;
    padding: 14px 30px 34px;
}

/* The step form joins the column flow (app.css gives .intro-stack its own
   100dvh centring when used standalone — neutralised here). */
.wizard-col .intro-stack[b-b215nog6rw] {
    min-height: 0;
    padding: 0;
    width: 100%;
    flex: 1;
    justify-content: center;
}

/* Compact serif wordmark above the wizard (mobile only). */
.wordmark-mobile[b-b215nog6rw] {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    padding: 8px 0 18px;
}

.wordmark-mobile .accent[b-b215nog6rw] {
    color: var(--accent);
}

/* Back + mono step label on one line, segmented stepper beneath. */
.wizard-header[b-b215nog6rw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 26px;
}

.wizard-top[b-b215nog6rw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Step headline group — tight editorial stack, no negative-margin hacks. */
.step-head[b-b215nog6rw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step-head p[b-b215nog6rw] {
    margin: 0;
}

/* "Hey {name}!" greeting: serif, accent ink, one size down from the headline. */
.step-hey[b-b215nog6rw] {
    font-size: clamp(22px, 3vw, 28px);
}

/* --- Verify step --- */
/* One-time-code entry: mono, big, centred, wide tracking. letter-spacing
   trails every glyph (including the last), so an equal text-indent on the
   left rebalances the visual centre. */
.code-entry[b-b215nog6rw] {
    font-family: var(--font-mono);
    font-size: 24px;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    text-align: center;
}

.resend-row[b-b215nog6rw] {
    display: flex;
}

/* app.css .btn-text has no disabled treatment; the countdown needs one. */
.resend-row .btn-text:disabled[b-b215nog6rw] {
    color: var(--text-disabled);
    cursor: default;
}

/* Dismissible DEV MODE note — only rendered while the API returns DevCode
   (Development), so it vanishes in production without extra logic. */
.dev-note[b-b215nog6rw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: var(--space-l);
}

.dev-note-body[b-b215nog6rw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dev-note-code[b-b215nog6rw] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text);
}

/* --- Brand panel (desktop only; app.css hides it under 900px) --- */
.brand-lockup[b-b215nog6rw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brand-lockup p[b-b215nog6rw] {
    margin: 0;
}

.brand-note[b-b215nog6rw] {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 300px;
}

.brand-note[b-b215nog6rw]::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    background: var(--accent);
    margin-bottom: 14px;
}

@media (min-width: 900px) {
    .wordmark-mobile[b-b215nog6rw] {
        display: none;
    }

    .wizard-col[b-b215nog6rw] {
        min-height: 0;
        padding: 0;
    }

    .wizard-col .intro-stack[b-b215nog6rw] {
        flex: 0 0 auto;
    }
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* Editorial Carbon login. The split shell (.auth-split / .auth-brand-panel /
   .auth-form-panel) and the body's paper + dot grid come from app.css — no
   page background override here. */

/* --- Brand panel (desktop only; app.css hides it under 900px) --- */
.brand-lockup[b-ckzcux7oei] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brand-lockup p[b-ckzcux7oei] {
    margin: 0;
}

/* Short editorial line pinned to the panel's bottom, introduced by the
   signature 4px accent rule. */
.brand-note[b-ckzcux7oei] {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 300px;
}

.brand-note[b-ckzcux7oei]::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    background: var(--accent);
    margin-bottom: 14px;
}

/* --- Compact wordmark above the form (mobile only) --- */
.wordmark-mobile[b-ckzcux7oei] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    margin-bottom: 6px;
}

.wordmark-mobile p[b-ckzcux7oei] {
    margin: 0;
}

/* --- Desktop-only form heading ("Sign in" + ruled accent) --- */
.form-head[b-ckzcux7oei] {
    display: none;
}

/* --- Buttons: text centred, glyph pinned right (mobile ContentLayout parity) --- */
.btn-icon-right[b-ckzcux7oei] {
    position: relative;
}

.btn-icon-right svg[b-ckzcux7oei] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 900px) {
    .wordmark-mobile[b-ckzcux7oei] {
        display: none;
    }

    .form-head[b-ckzcux7oei] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 4px;
    }

    .form-head p[b-ckzcux7oei] {
        margin: 0;
    }
}
/* /Components/Pages/Browse/BrowseIdeas.razor.rz.scp.css */
/* Home ideas feed: one idea per screen, CSS scroll-snap.

   Geometry. The page is a fixed-height flex column — a non-scrolling head
   (title + tools + filter panel) over a scroller that takes the rest. The
   height is derived from the layout variables published by app.css /
   layouts.css so every bar-type / bar-location combination works:
     --topnav-height    top bar layouts (0 elsewhere)
     --tab-bar-height   mobile bottom tab bar (no tab bar >= 900px)
     --bottombar-height bottom bar layout, desktop only (undefined elsewhere)
   The pill layouts pad .app-content instead of publishing a var, so they get
   explicit overrides at the bottom of this file. */

.feed-page[b-p95jljej6v] {
    position: relative;          /* anchors the absolute .notif-panel */
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--topnav-height) - var(--tab-bar-height));
    min-height: 0;
}

@media (min-width: 900px) {
    .feed-page[b-p95jljej6v] {
        /* No tab bar on desktop; a bottom nav bar publishes its own height. */
        height: calc(100dvh - var(--topnav-height) - var(--bottombar-height, 0px));
    }
}

/* The head no longer needs position:sticky — it is simply the flex row above
   the scroller — but it keeps .browse-sticky's surface, rule and gutters. */
.feed-head[b-p95jljej6v] {
    position: static;
    flex: 0 0 auto;
    max-height: 60%;             /* a tall open filter panel scrolls itself */
}

/* Bell + the red unread dot from app.css, which positions absolutely. */
.feed-bell-wrap[b-p95jljej6v] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- The snap scroller ---------- */
.snap-feed[b-p95jljej6v] {
    flex: 1 1 auto;
    min-height: 0;               /* required, or flex children refuse to shrink */
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    /* Don't hand a bounce at either end to the page behind the feed. */
    overscroll-behavior-y: contain;
    /* Full-bleed, matching the mobile card-grid treatment. */
    margin-left: calc(-1 * var(--space-xl));
    margin-right: calc(-1 * var(--space-xl));
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
    /* Feed scrolls, but shows no scrollbar (snap paging IS the affordance). */
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;
}

.snap-feed[b-p95jljej6v]::-webkit-scrollbar {
    display: none;                   /* Chrome / Edge / Safari */
}

@media (min-width: 900px) {
    .snap-feed[b-p95jljej6v] {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* One idea == one screen. Scrolling is deliberately NORMAL-feeling: no
   scroll-snap-stop, so a flick can travel through several ideas — but
   scroll-snap-type:y mandatory on the container means the scroll always
   settles on whichever idea is closest to where it lands, top-aligned
   (scroll-snap-align:start). */
.snap-item[b-p95jljej6v] {
    /* Grow WITH the card, never clip it. An item used to be locked to one
       screen with its own inner scroller — fast scrolling left that inner
       position wherever wheel-chaining dropped it, so cards arrived with
       their top or bottom cut off. min-height keeps short ideas filling a
       full screen; a taller idea simply extends, and CSS snap lets you
       scroll freely within an oversized snap area before snapping onward. */
    min-height: 100%;
    height: auto;
    scroll-snap-align: start;
    /* Clear the fixed .docked-bar (Like/Nope) at the bottom of the screen. */
    padding: var(--space-m) 0 84px;
    /* Single column at EVERY width. Deliberately not .card-grid: that goes
       multi-column at >=700px and is shared with Browse Users. */
    display: block;
}

/* Narrow the ideas to ~75% of the column on desktop; full width on phones,
   where 75% of an already-small screen would waste the little space there is. */
@media (min-width: 700px) {
    .snap-item[b-p95jljej6v] {
        width: 75%;
        margin-inline: auto;
    }
}

/* Snap children are laid out one per screen, so the loader gets its own. */
.snap-loader[b-p95jljej6v] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
}

/* ---------- Pill layouts: padding on .app-content, no published var ------- */
@media (min-width: 900px) {
    [data-bar-type="pill"][data-bar-location="bottom"] .feed-page[b-p95jljej6v] {
        height: calc(100dvh - 110px);
    }

    [data-bar-type="pill"][data-bar-location="top"] .feed-page[b-p95jljej6v] {
        height: calc(100dvh - 90px);
    }
}
/* /Components/Pages/Browse/BrowseUsers.razor.rz.scp.css */
/* Browse People: the profiles analogue of the Home ideas feed. Everything below
   is the same snap-feed geometry, feed-card look and detail-modal styling as
   BrowseIdeas / IdeaCard / IdeaModal, brought in here because scoped CSS does
   not cross component boundaries. Only page-unique bits (the All / Matched tabs)
   are original. The shared browse chrome (header, filter panel, skeleton,
   load-more) still lives in app.css. */

/* ---------- Feed geometry (mirrors BrowseIdeas.razor.css) ----------
   A fixed-height flex column: a non-scrolling head (title + tools + filters +
   tabs) over a scroller that takes the rest. Height derives from the layout
   variables app.css / layouts.css publish. */
.feed-page[b-9jerm5dlrt] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--topnav-height) - var(--tab-bar-height));
    min-height: 0;
}

@media (min-width: 900px) {
    .feed-page[b-9jerm5dlrt] {
        /* No tab bar on desktop; a bottom nav bar publishes its own height. */
        height: calc(100dvh - var(--topnav-height) - var(--bottombar-height, 0px));
    }
}

/* The head is simply the flex row above the scroller, but keeps
   .browse-sticky's surface, rule and gutters. */
.feed-head[b-9jerm5dlrt] {
    position: static;
    flex: 0 0 auto;
    max-height: 60%;             /* a tall open filter panel scrolls itself */
}

/* ---------- The snap scroller ---------- */
.snap-feed[b-9jerm5dlrt] {
    flex: 1 1 auto;
    min-height: 0;               /* required, or flex children refuse to shrink */
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    /* Don't hand a bounce at either end to the page behind the feed. */
    overscroll-behavior-y: contain;
    /* Full-bleed, matching the mobile card-grid treatment. */
    margin-left: calc(-1 * var(--space-xl));
    margin-right: calc(-1 * var(--space-xl));
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
    /* Feed scrolls, but shows no scrollbar (snap paging IS the affordance). */
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;
}

.snap-feed[b-9jerm5dlrt]::-webkit-scrollbar {
    display: none;                   /* Chrome / Edge / Safari */
}

@media (min-width: 900px) {
    .snap-feed[b-9jerm5dlrt] {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* One profile == one screen. Scrolling is deliberately NORMAL-feeling: no
   scroll-snap-stop, so a flick can travel through several profiles — but
   scroll-snap-type:y mandatory on the container means the scroll always settles
   on whichever profile is closest to where it lands, top-aligned. */
.snap-item[b-9jerm5dlrt] {
    min-height: 100%;
    height: auto;
    scroll-snap-align: start;
    /* Clear the fixed .docked-bar (Like/Nope) at the bottom of the screen. */
    padding: var(--space-m) 0 84px;
    display: block;
}

/* Narrow the profiles to ~75% of the column on desktop; full width on phones,
   where 75% of an already-small screen would waste the little space there is. */
@media (min-width: 700px) {
    .snap-item[b-9jerm5dlrt] {
        width: 75%;
        margin-inline: auto;
    }
}

/* Snap children are laid out one per screen, so the loader gets its own. */
.snap-loader[b-9jerm5dlrt] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
}

/* ---------- Pill layouts: padding on .app-content, no published var ------- */
@media (min-width: 900px) {
    [data-bar-type="pill"][data-bar-location="bottom"] .feed-page[b-9jerm5dlrt] {
        height: calc(100dvh - 110px);
    }

    [data-bar-type="pill"][data-bar-location="top"] .feed-page[b-9jerm5dlrt] {
        height: calc(100dvh - 90px);
    }
}

/* ---------- Feed card (mirrors IdeaCard.razor.css) ----------
   The whole card is clickable; like/dislike moved to the one screen-fixed bar
   the snap feed owns. */
.browse-card[b-9jerm5dlrt] {
    --card-pad: 33px;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);         /* roomier stack than the default card 12px */
    padding: var(--card-pad);
    cursor: pointer;
    text-align: left;
}

/* Feed-card type scale: the feed shows ONE profile per screen, so its card
   reads a couple of points larger than the app's default card type. */
.card-title[b-9jerm5dlrt] {
    font-size: 28px;
}

.browse-card .meta-label[b-9jerm5dlrt] {
    font-size: 13px;
}

/* Pills: the inline meta pills are scoped, the expertise ones come from the
   shared <Pill> child component — ::deep reaches both. Mono type, softer
   corners, inline-flex centring. */
.browse-card[b-9jerm5dlrt]  .pill,
.browse-card .pill[b-9jerm5dlrt] {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 11px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.browse-card:focus-visible[b-9jerm5dlrt] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.truncate[b-9jerm5dlrt] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-2[b-9jerm5dlrt] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Anonymous profiles read quieter, matching the old card. */
.anon[b-9jerm5dlrt] {
    color: var(--text-secondary);
}

/* Header block: avatar on the left spanning the stacked name/profession. */
.card-head[b-9jerm5dlrt] {
    display: flex;
    align-items: center;      /* avatar centred against the text stack */
    gap: var(--space-m);
    min-width: 0;
}

.card-head-text[b-9jerm5dlrt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin-left: 15px;
}

.card-author-name[b-9jerm5dlrt] {
    font-size: 14px;
    color: var(--text-secondary);
    min-width: 0;
}

.card-looking-for .meta-label[b-9jerm5dlrt] {
    margin-bottom: 5px;
}

/* .pill carries a 6px bottom margin; cancel it against the stack gap. */
.pill-row[b-9jerm5dlrt] {
    margin-bottom: -6px;
}

/* Rule under the header, separating identity from facts (reference layout). */
.card-divider[b-9jerm5dlrt] {
    width: 100%;
    margin: 0;
    border: none;
    border-top: 1px solid var(--divider);
}

/* ---------- "Not interested" (greyed) state ----------
   Set the moment Nope is pressed. The profile deliberately STAYS in the feed
   until the next reload (the server drops it from the following page), so it
   reads as dismissed rather than vanishing under the user. Still clickable —
   opening the detail modal on a dismissed profile is harmless. */
.browse-card.is-dismissed[b-9jerm5dlrt] {
    opacity: 0.42;
    filter: grayscale(1);
    transition: opacity var(--dur-med) var(--ease-out),
                filter var(--dur-med) var(--ease-out);
}

.browse-card.is-dismissed:hover[b-9jerm5dlrt] {
    transform: none;
    box-shadow: none;
}

.card-dismissed-note[b-9jerm5dlrt] {
    margin-top: auto;
    padding-top: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .browse-card.is-dismissed[b-9jerm5dlrt] {
        transition: none;
    }
}

/* ---------- Detail modal (mirrors IdeaModal.razor.css) ----------
   .modal-backdrop supplies the scrim (global). The panel is wider than the
   alert .modal-card and capped so a long profile scrolls inside it. */
.profile-modal-panel[b-9jerm5dlrt] {
    position: relative;
    background: var(--overlay-bg);
    border: 1px solid var(--panel-stroke);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-overlay);
    animation: modal-in 200ms var(--ease-out);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    outline: none;
}

.profile-modal-panel:focus-visible[b-9jerm5dlrt] {
    box-shadow: var(--shadow-overlay), 0 0 0 2px var(--accent);
}

/* The only scroll container. overscroll-behavior stops the wheel from chaining
   into the page once the panel hits its end. */
.profile-modal-body[b-9jerm5dlrt] {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-xxl);
    /* Room for the close button so it never sits on top of the content. */
    padding-top: calc(var(--space-xxl) + 20px);
    scrollbar-width: thin;
    scrollbar-color: var(--text-disabled) transparent;
    border-radius: inherit;
}

.profile-modal-body[b-9jerm5dlrt]::-webkit-scrollbar {
    width: 10px;
}

.profile-modal-body[b-9jerm5dlrt]::-webkit-scrollbar-track {
    background: transparent;
    margin: var(--radius-xl) 0;
}

.profile-modal-body[b-9jerm5dlrt]::-webkit-scrollbar-thumb {
    background: var(--text-disabled);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.profile-modal-body[b-9jerm5dlrt]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
    border: 3px solid transparent;
    background-clip: padding-box;
}

.profile-modal-close[b-9jerm5dlrt] {
    position: absolute;
    top: var(--space-m);
    right: var(--space-m);
    z-index: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    border: 1px solid var(--panel-stroke);
    border-radius: var(--radius-s);
    background: var(--overlay-bg);
    color: var(--text);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.profile-modal-close:hover[b-9jerm5dlrt] {
    background: var(--surface-alt);
    border-color: var(--text);
}

/* ---------- Docked Nope / Like strip ----------
   Sits under the scrolling body, inside the panel, so it is always visible —
   the modal's analogue of the feed's fixed bottom bar. */
.profile-modal-actions[b-9jerm5dlrt] {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: var(--space-xxl);
    padding: var(--space-m) var(--space-xxl);
    border-top: 1px solid var(--divider);
}

.modal-action-btn[b-9jerm5dlrt] {
    height: 44px;
    padding: 0 26px;
    border-radius: 10px;         /* matches the feed bar's rounding */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.modal-action-dislike[b-9jerm5dlrt] {
    border: 1px solid var(--dislike-red);
    color: var(--dislike-red);
}

.modal-action-dislike:hover[b-9jerm5dlrt] {
    background: var(--dislike-red-soft);
}

.modal-action-dislike.is-active[b-9jerm5dlrt] {
    background: var(--dislike-red);
    color: #ffffff;
}

.modal-action-like[b-9jerm5dlrt] {
    border: 1px solid var(--interested-green);
    color: var(--interested-green);
}

.modal-action-like:hover[b-9jerm5dlrt] {
    background: var(--interested-green-soft);
}

.modal-action-like.is-active[b-9jerm5dlrt] {
    background: var(--interested-green);
    color: #ffffff;
}

@media (max-width: 600px) {
    .profile-modal-body[b-9jerm5dlrt] {
        padding: var(--space-l);
        padding-top: calc(var(--space-l) + 32px);
    }
}

/* ---------- All / Matched segmented tabs (page-unique) ----------
   Full width on mobile, capped on desktop. */
.browse-tabs[b-9jerm5dlrt] {
    margin-bottom: 14px;
}

@media (min-width: 700px) {
    .browse-tabs[b-9jerm5dlrt] {
        max-width: 320px;
    }
}
/* /Components/Pages/Browse/IdeaCard.razor.rz.scp.css */
/* Ideas feed card: flex column (.list-card supplies the surface, 1px rule and
   hover raise). The whole card is clickable — like/dislike moved to the one
   screen-fixed bar the snap feed owns. */
.browse-card[b-sjugu65fk8] {
    /* One knob for the text area's edge margin. The hero's full-bleed negative
       margins are derived from it, so they can never drift apart. */
    --card-pad: 33px;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);         /* roomier stack than the default card 12px */
    padding: var(--card-pad);
    cursor: pointer;
    text-align: left;
}

/* ---------- Feed-card type scale ----------
   The feed shows ONE idea per screen, so its card reads a couple of points
   larger than the app's default card type. Sizes live on the individual rules
   below; these two cover what those rules don't reach. */
.card-title[b-sjugu65fk8] {
    font-size: 28px;
}

.browse-card .meta-label[b-sjugu65fk8] {
    font-size: 13px;
}

/* "Suggested equity" and "Help me with:" read 2pts quieter than the other
   section labels (same specificity as the rule above — order decides). */
.browse-card .card-help-label[b-sjugu65fk8],
.card-equity-label-row .meta-label[b-sjugu65fk8] {
    font-size: 11px;
}

/* Pills: the inline meta pills are scoped, the "Looking for" ones come from
   the shared <Pill> child component — ::deep reaches both. Mono type (matches
   the reference), softer corners, and inline-flex centring: with ONE font size
   and centred content, no pill's text can ride higher than its neighbours'
   (the old misalignment was smaller uppercase text sharing a baseline with
   larger text). */
.browse-card[b-sjugu65fk8]  .pill,
.browse-card .pill[b-sjugu65fk8] {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 11px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.browse-card:focus-visible[b-sjugu65fk8] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Wide header image, truly edge to edge: negative margins swallow the card's
   --space-xl padding on the top and sides, and the top corners take the card's
   own radius so the image meets the border cleanly. */
.card-hero[b-sjugu65fk8] {
    width: calc(100% + 2 * var(--card-pad));
    /* The global img { max-width: 100% } reset clamps the over-wide bleed and
       leaves the missing width as a right-hand gap — lift it here. */
    max-width: none;
    margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
    /* Shorter than the 16:9 the wizard crops (cover just crops top/bottom):
       the feed banner shouldn't dominate the card. The MODAL keeps 16:9. */
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    display: block;
    background: var(--accent-secondary);
}

.card-hero-empty[b-sjugu65fk8] {
    background: var(--accent-secondary);
}

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

.title-2[b-sjugu65fk8] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Header block: avatar on the left spanning the stacked title/byline/category. */
.card-head[b-sjugu65fk8] {
    display: flex;
    align-items: center;      /* avatar centred against the text stack */
    gap: var(--space-m);
    min-width: 0;
}

.card-head-text[b-sjugu65fk8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin-left: 15px;
}

.card-author-name[b-sjugu65fk8] {
    font-size: 14px;
    color: var(--text-secondary);
    min-width: 0;
}

.card-category[b-sjugu65fk8] {
    margin-top: 2px;
}

.card-looking-for .meta-label[b-sjugu65fk8] {
    margin-bottom: 5px;
}

/* .pill carries a 6px bottom margin; cancel it against the stack gap. */
.pill-row[b-sjugu65fk8] {
    margin-bottom: -6px;
}

/* Reference colour scheme: evidence review reads neutral (grey, dark text),
   Companies House reads green — both with a circled-tick glyph. */
.pill-verified[b-sjugu65fk8] {
    background: var(--pill-bg);
    color: var(--pill-text);
}

.browse-card .pill-ch[b-sjugu65fk8] {
    background: var(--interested-green-soft);
    color: var(--interested-green);
}

/* Stage stands out from the neutral meta pills (filled, like the reference).
   Two-class selector: must outrank the .browse-card .pill size rule above. */
.browse-card .pill-stage[b-sjugu65fk8] {
    background: var(--text);
    color: var(--card-bg);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
}

/* Rule above the meta pills, separating copy from facts (reference layout). */
.card-divider[b-sjugu65fk8] {
    width: 100%;
    margin: 0;
    border: none;
    border-top: 1px solid var(--divider);
}

/* Neutral placeholder — not a live count. */
.contributing-pill[b-sjugu65fk8] {
    background: transparent;
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--card-stroke);
}

.company-line[b-sjugu65fk8] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    overflow-wrap: break-word;
}

/* ---------- Equity ---------- */
.card-equity[b-sjugu65fk8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The "?" sits immediately after the label text. */
.card-equity-label-row[b-sjugu65fk8] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

/* The value is the hero number of the card: big and accent, per the reference. */
.card-equity-value[b-sjugu65fk8] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
}

/* Circled "?" — the whole explainer affordance, right after the label text. */
.equity-help-circle[b-sjugu65fk8] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--text-secondary);
    background: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.equity-help-circle:hover[b-sjugu65fk8] {
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- Copy ---------- */
.card-summary[b-sjugu65fk8] {
    margin: 0;
    font-size: 16px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Sits directly under the clamped summary; -8px pulls it into the clamp. */
.card-more[b-sjugu65fk8] {
    margin-top: -8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
}

.card-help[b-sjugu65fk8] {
    margin: var(--space-xs) 0 0;
    font-size: 16px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* ---------- "Not interested" (greyed) state ----------
   Set the moment Nope is pressed. The idea deliberately STAYS in the feed
   until the next reload (the server drops it from the following page), so it
   reads as dismissed rather than vanishing under the user. Still clickable —
   opening the detail modal on a dismissed idea is harmless. */
.browse-card.is-dismissed[b-sjugu65fk8] {
    opacity: 0.42;
    filter: grayscale(1);
    transition: opacity var(--dur-med) var(--ease-out),
                filter var(--dur-med) var(--ease-out);
}

.browse-card.is-dismissed:hover[b-sjugu65fk8] {
    transform: none;
    box-shadow: none;
}

.card-dismissed-note[b-sjugu65fk8] {
    margin-top: auto;
    padding-top: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .browse-card.is-dismissed[b-sjugu65fk8] {
        transition: none;
    }
}
/* /Components/Pages/Ideas/MyIdea.razor.rz.scp.css */
/* MyIdea scoped styles — Editorial Carbon editor feel: mono eyebrow section
   headers over a hairline, .field groups with boxed inputs, .btn-ghost stepper
   squares, dashed drop-zone upload affordances, and a sticky save footer that
   clears the mobile tab bar (no tab bar on desktop >=900px). */

.my-idea-stack[b-wr3d3goeeu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* No .page bottom padding: the sticky save footer docks against the tab
       bar, and padding below it would lift it off at scroll-end. Preview mode
       compensates with .sub-stack's own bottom padding. */
    padding-bottom: 0;
    padding-top: 28px;
}

.lede[b-wr3d3goeeu] {
    margin: -6px 0 0;
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 52ch;
}

.mode-toggle[b-wr3d3goeeu] {
    max-width: 320px;
}

/* Mobile: the Preview/Edit toggle spans the page (its buttons already flex). */
@media (max-width: 640px) {
    .mode-toggle[b-wr3d3goeeu] {
        max-width: none;
        width: 100%;
    }
}

.gate-btn[b-wr3d3goeeu] {
    margin-top: var(--space-s);
}

/* ----- Preview mode ----- */

.sub-stack[b-wr3d3goeeu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding-bottom: var(--space-xl);   /* breathing room (page padding moved off the stack) */
}

.delete-btn[b-wr3d3goeeu] {
    align-self: center;
    min-width: 180px;
    margin: var(--space-m) 0 0;
}

/* ----- Edit / create form ----- */

.idea-form[b-wr3d3goeeu] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form-section[b-wr3d3goeeu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Mono accent eyebrow over a hairline — the section signature */
.eyebrow[b-wr3d3goeeu] {
    color: var(--accent);
    letter-spacing: 0.12em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--divider);
}

/* Skill chips extend .pill with an inline remove affordance */
.skill-chip[b-wr3d3goeeu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.skill-chip button[b-wr3d3goeeu] {
    background: transparent;
    border: none;
    padding: 0 2px;
    line-height: 1;
    font-size: 13px;
    color: var(--text-secondary);
    transition: color var(--dur-fast) var(--ease-out);
}

.skill-chip button:hover[b-wr3d3goeeu] {
    color: var(--dislike-red);
}

.skill-add-row[b-wr3d3goeeu] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-s);
    align-items: center;
}

.remote-row[b-wr3d3goeeu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Checkbox + its label on one line (remote, registered company) */
.check-row[b-wr3d3goeeu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.check-row label[b-wr3d3goeeu] {
    cursor: pointer;
}

/* ----- Wizard chrome (mirrors CreateAccount.razor.css) ----- */

.wizard-header[b-wr3d3goeeu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 4px;
}

.wizard-top[b-wr3d3goeeu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ----- Step 2: stage cards ----- */

.stage-cards[b-wr3d3goeeu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stage-card[b-wr3d3goeeu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: 1px solid var(--card-stroke);
    border-radius: var(--radius-m);
    background: var(--card-bg, transparent);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.stage-card:hover[b-wr3d3goeeu] {
    border-color: var(--accent);
}

.stage-card.selected[b-wr3d3goeeu] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.stage-card-head[b-wr3d3goeeu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
}

.stage-card-title[b-wr3d3goeeu] {
    font-weight: 600;
    color: var(--text);
}

.stage-card-pill[b-wr3d3goeeu] {
    flex: 0 0 auto;
}

.stage-card-desc[b-wr3d3goeeu] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Evidence sub-section, revealed by a Prototype / Early-revenue claim.
   Indented behind an accent rule so it reads as belonging to the card above. */
.evidence-panel[b-wr3d3goeeu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0 2px 14px;
    border-left: 2px solid var(--accent);
}

.evidence-panel p[b-wr3d3goeeu] {
    margin: 0;
}

/* ----- Step 3: company lookup ----- */

.verify-row[b-wr3d3goeeu] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-s);
    align-items: center;
}

.lookup-ok[b-wr3d3goeeu] {
    color: var(--accent);
}

/* Soft "Optional" tag beside an eyebrow heading */
.optional-tag[b-wr3d3goeeu] {
    margin-left: 8px;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
}

/* ----- Upload affordances: dashed drop-zone-look labels ----- */

/* The header image is cropped 16:9 — preview it at that shape, not the
   132px square the other previews use. */
.header-image-preview[b-wr3d3goeeu] {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-m);
    border: 1px solid var(--card-stroke);
    display: block;
}

.main-image-preview[b-wr3d3goeeu] {
    width: 132px;
    height: 132px;
    object-fit: cover;
    border-radius: var(--radius-m);
    border: 1px solid var(--card-stroke);
    display: block;
}

.drop-zone[b-wr3d3goeeu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    min-height: 72px;
    padding: 14px;
    border: 1px dashed var(--entry-border);
    border-radius: var(--radius-m);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-body);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.drop-zone:hover[b-wr3d3goeeu] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* "Insert block" affordances — same structure as the Profile page's row. */
.add-block-row[b-wr3d3goeeu] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Labels doubling as buttons (hidden file pickers) need the pointer themselves */
label.btn[b-wr3d3goeeu] {
    cursor: pointer;
}

/* ----- Sticky save footer ----- */

.form-footer[b-wr3d3goeeu] {
    position: sticky;
    /* 1px overlap onto the tab bar so display-scaling rounding can't open a
       seam between the two surfaces. */
    bottom: calc(var(--tab-bar-height) - 1px);
    z-index: 40;
    display: flex;
    flex-wrap: wrap;                /* lets the .save-hint line sit above the buttons */
    gap: 10px;
    padding: var(--space-m) 0 14px;
    margin-top: 4px;
    background: var(--page-bg);
    border-top: 1px solid var(--divider);
}

.form-footer .btn[b-wr3d3goeeu] {
    flex: 1;
}

.busy-row[b-wr3d3goeeu] {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

/* ----- Front-end validation ----- */

/* Field label with an optional right-aligned char counter */
.label-row[b-wr3d3goeeu] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
}

/* Red asterisk on mandatory field labels */
.req[b-wr3d3goeeu] {
    color: var(--dislike-red);
    margin-left: 2px;
}

.char-count[b-wr3d3goeeu] {
    text-align: right;
}

.char-count.over[b-wr3d3goeeu] {
    color: var(--dislike-red);
}

/* Inline invalid-field hint (shown only after the field was touched) */
.field-hint[b-wr3d3goeeu] {
    color: var(--dislike-red);
}

/* What's-missing summary next to the disabled Save button */
.save-hint[b-wr3d3goeeu] {
    flex-basis: 100%;
    margin-bottom: -2px;
}

@media (min-width: 900px) {
    .form-footer[b-wr3d3goeeu] {
        bottom: 0;                  /* sidebar layout: no tab bar */
        justify-content: flex-end;
    }

    .form-footer .btn[b-wr3d3goeeu] {
        flex: 0 0 auto;
        min-width: 180px;
    }

    .save-hint[b-wr3d3goeeu] {
        text-align: right;
    }
}
/* /Components/Pages/Ideas/ViewIdea.razor.rz.scp.css */
/* Narrow reading column with a pinned header. The fixed Like/Nope bar itself
   is the shared .docked-bar (app.css), which mirrors this page's reading
   column so the buttons line up under it. */

.view-idea-shell[b-af8ipwff7o] {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--tab-bar-height));
    padding-bottom: 0;
}

/* Pinned header: the back button stays put while the idea scrolls. */
.idea-head[b-af8ipwff7o] {
    position: sticky;
    top: var(--topnav-height);
    z-index: 40;
    background: var(--page-bg);
    border-bottom: 1px solid var(--divider);
}

.view-idea-body[b-af8ipwff7o] {
    flex: 1;
    padding-top: var(--space-l);        /* + header's 8px = 24px rhythm to the first card */
    padding-bottom: 84px;               /* reserve space for the fixed .docked-bar */
}

@media (max-width: 899px) {
    .idea-head[b-af8ipwff7o] {
        margin-left: calc(-1 * var(--space-xl));
        margin-right: calc(-1 * var(--space-xl));
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
}

@media (min-width: 900px) {
    .view-idea-shell[b-af8ipwff7o] {
        min-height: calc(100dvh - 48px - var(--topnav-height));    /* desktop app-content bottom padding */
    }
}
/* /Components/Pages/Messages/Conversation.razor.rz.scp.css */
/* Conversation — Editorial Carbon chat column: bordered header row on top,
   scrolling thread in the middle, input row pinned at the bottom. Bubble,
   system-line and input visuals come from app.css (.chat-bubble*,
   .chat-system, .chat-input-row, .chat-input-border); this file owns the
   page skeleton. Width is capped by .page-narrow on the root element. */

.chat-page[b-fxn74gkzus] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--topnav-height));
}

/* Desktop .app-content carries 48px bottom padding; subtract it so the
   input row sits exactly on the viewport's bottom edge. Mobile is exact
   already: this route adds .no-tabs, which zeroes the bottom padding.
   (--topnav-height is 0 except under the Top Bar layout.) */
@media (min-width: 900px) {
    .chat-page[b-fxn74gkzus] {
        height: calc(100dvh - 48px - var(--topnav-height));
    }
}

/* Header row: back / 40px avatar / name / mono ended note / kebab,
   closed with a single 1px structural rule. */
.chat-topbar[b-fxn74gkzus] {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: 10px var(--space-l);
    border-bottom: 1px solid var(--card-stroke);
    flex-shrink: 0;
}

/* .avatar-btn is global (app.css). */

.chat-title[b-fxn74gkzus] {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-ended-note[b-fxn74gkzus] {
    flex-shrink: 0;
}

.icon-20[b-fxn74gkzus] {
    width: 20px;
    height: 20px;
}

.chat-thread[b-fxn74gkzus] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;                       /* CollectionView ItemSpacing=4 */
    padding: var(--space-m) 0;
}

.chat-thread-empty[b-fxn74gkzus] {
    justify-content: center;
}

.chat-item[b-fxn74gkzus] {
    padding: 2px var(--space-l);    /* item template Grid Padding="16,2" */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.chat-item .chat-system[b-fxn74gkzus] {
    margin: 8px 0;                  /* system label Margin="0,8" */
}

.chat-top-sentinel[b-fxn74gkzus] {
    height: 1px;
    flex-shrink: 0;
}

/* Day separator: centered .chat-system-style mono date between two hairline
   rules — rendered between messages from different local calendar days. */
.chat-day-sep[b-fxn74gkzus] {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: 10px var(--space-l) 6px;
    flex-shrink: 0;
}

.chat-day-sep[b-fxn74gkzus]::before,
.chat-day-sep[b-fxn74gkzus]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--divider);
}

.chat-day-label[b-fxn74gkzus] {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-secondary);
}

/* "Unread Messages" divider — same rule-label-rule shape as the day
   separator, but accent-colored so the reading position pops. */
.chat-unread-sep[b-fxn74gkzus] {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: 10px var(--space-l) 6px;
    flex-shrink: 0;
}

.chat-unread-sep[b-fxn74gkzus]::before,
.chat-unread-sep[b-fxn74gkzus]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--accent);
}

.chat-unread-label[b-fxn74gkzus] {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--accent);
}

/* Per-message mono time under the last bubble of a same-sender run,
   hugging the bubble's side. */
.chat-time[b-fxn74gkzus] {
    font-size: 10px;
    color: var(--text-disabled);
    margin-top: 3px;
}

.chat-time-mine[b-fxn74gkzus] {
    align-self: flex-end;
}

.chat-time-theirs[b-fxn74gkzus] {
    align-self: flex-start;
}

/* Manual paging affordance above the oldest message; the top sentinel's
   IntersectionObserver still auto-loads on scroll. Sized so swapping it
   for .chat-loading doesn't shift the anchored scroll restore. */
.chat-load-older[b-fxn74gkzus] {
    align-self: center;
    flex-shrink: 0;
    min-height: 32px;
    min-width: 0;
    margin: 5px 0;
    padding: 4px 14px;
    font-size: var(--font-caption);
    color: var(--text-secondary);
}

.chat-load-older:hover:not(:disabled)[b-fxn74gkzus] {
    color: var(--text);
}

.chat-loading[b-fxn74gkzus] {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    flex-shrink: 0;
}

.chat-input-row[b-fxn74gkzus] {
    flex-shrink: 0;
}

/* Editor: AutoSize=TextChanges, Min 40 (incl. border padding), Max 120. */
.chat-input-border textarea[b-fxn74gkzus] {
    field-sizing: content;          /* auto-grow in modern browsers; falls back to 1 row + scroll */
    min-height: 24px;
}

.chat-send-btn[b-fxn74gkzus] {
    font-weight: 600;
    min-height: 40px;
    align-self: flex-end;           /* Button VerticalOptions="End" */
}
/* /Components/Pages/Messages/Messages.razor.rz.scp.css */
/* Messages list — Editorial Carbon: ruled page title with a refresh icon
   beside it, then a single bordered .section-card whose conversation rows
   are separated by 1px rules. Row anatomy: 44px avatar / name + one-line
   preview / mono timestamp / unread dot / kebab. */

.messages-header[b-py4ma3ah06] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-xl) 0 var(--space-l);
}

/* Cancel .icon-btn's -8px top pull so the icon optically centers on the
   title's first line (the blue rule hangs below it). */
.messages-refresh[b-py4ma3ah06] {
    margin-top: 0;
}

.icon-20[b-py4ma3ah06] {
    width: 20px;
    height: 20px;
}

.messages-loading[b-py4ma3ah06] {
    display: flex;
    justify-content: center;
    padding: var(--space-s) 0 var(--space-l);
}

/* The card supplies the border; rows own their padding so the hover wash
   and divider rules run edge to edge. */
.conv-card[b-py4ma3ah06] {
    padding: 4px 0;
    overflow: hidden;
}

/* Mobile: the list runs edge-to-edge (social-feed style). */
@media (max-width: 699px) {
    .conv-card[b-py4ma3ah06] {
        margin-left: calc(-1 * var(--space-xl));
        margin-right: calc(-1 * var(--space-xl));
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
}

.conv-row[b-py4ma3ah06] {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: 12px var(--space-l);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.conv-row + .conv-row[b-py4ma3ah06] {
    border-top: 1px solid var(--divider);
}

.conv-row:hover[b-py4ma3ah06],
.conv-row:focus-visible[b-py4ma3ah06] {
    background: var(--surface-alt);
}

.conv-text[b-py4ma3ah06] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conv-name[b-py4ma3ah06] {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-preview[b-py4ma3ah06] {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-time[b-py4ma3ah06] {
    flex-shrink: 0;
}

.conv-unread[b-py4ma3ah06] {
    flex-shrink: 0;
}

/* Unread rows: accent outline + numeric badge so they stand out at a glance. */
.conv-row-unread[b-py4ma3ah06] {
    border-left: 3px solid var(--accent);
    padding-left: calc(var(--space-l) - 3px);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.unread-badge[b-py4ma3ah06] {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Avatar is non-interactive on this list — the whole row opens the chat.
   Keep it from shrinking in the flex row (matches the old .avatar-btn box). */
.conv-avatar[b-py4ma3ah06] {
    display: inline-flex;
    flex-shrink: 0;
}

.conv-menu-btn[b-py4ma3ah06] {
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .conv-row[b-py4ma3ah06] {
        transition: none;
    }
}
/* /Components/Pages/Profiles/Profile.razor.rz.scp.css */
/* Own-profile page — Editorial Carbon editor treatment.
   Mono eyebrow-ruled form sections, dashed drop-zone upload label, and
   token-tinted switches. All colors come from app.css tokens. */

.profile-page[b-eyrbx5zyl8] {
    position: relative;
    padding-top: 20px;
}

.profile-stack[b-eyrbx5zyl8] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-head[b-eyrbx5zyl8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.create-subtitle[b-eyrbx5zyl8] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 52ch;
}

/* ---------- Form scaffolding ---------- */
.form-stack[b-eyrbx5zyl8] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form-section[b-eyrbx5zyl8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Mono eyebrow with an accent tick and trailing hairline —
   echoes the ruled page-title motif. */
.form-eyebrow[b-eyrbx5zyl8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-eyebrow[b-eyrbx5zyl8]::before {
    content: "";
    width: 16px;
    height: 2px;
    background: var(--accent);
}

.form-eyebrow[b-eyrbx5zyl8]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--divider);
}

/* Read-only name well (value comes from the auth session) */
.name-value[b-eyrbx5zyl8] {
    padding: 10px 12px;
    background: var(--surface-alt);
    border: 1px solid var(--card-stroke);
    border-radius: var(--radius-s);
    font-size: var(--font-body);
}

/* Side-by-side fields on wider viewports */
.field-duo[b-eyrbx5zyl8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 700px) {
    .field-duo[b-eyrbx5zyl8] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* ---------- Dashed drop-zone upload label ---------- */
.drop-zone[b-eyrbx5zyl8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border: 1.5px dashed var(--entry-border);
    border-radius: var(--radius-m);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.drop-zone:hover[b-eyrbx5zyl8] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.drop-zone-preview[b-eyrbx5zyl8] {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-m);
    border: 1px solid var(--card-stroke);
    display: block;
}

.drop-zone-cta[b-eyrbx5zyl8] {
    font-size: 14px;
    font-weight: 500;
    color: var(--accent);
}

.drop-zone-hint[b-eyrbx5zyl8] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ---------- Privacy switches ---------- */
.switch-card[b-eyrbx5zyl8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--space-l) var(--space-xl);
}

.switch-row[b-eyrbx5zyl8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.switch[b-eyrbx5zyl8] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.switch input[b-eyrbx5zyl8] {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.switch .slider[b-eyrbx5zyl8] {
    position: absolute;
    inset: 0;
    background: var(--segment-stroke);
    border-radius: 11px;
    transition: background-color var(--dur-fast) var(--ease-out);
    cursor: pointer;
}

.switch .slider[b-eyrbx5zyl8]::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: var(--card-bg);
    transition: transform var(--dur-fast) var(--ease-out);
}

/* Dark theme: card-bg is too dark for a knob — use the ink-inverse text tone */
[data-theme="dark"] .switch .slider[b-eyrbx5zyl8]::before {
    background: var(--text);
}

.switch input:checked + .slider[b-eyrbx5zyl8] {
    background: var(--accent);
}

.switch input:checked + .slider[b-eyrbx5zyl8]::before {
    transform: translateX(18px);
}

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

/* ---------- Skill chips ---------- */
.skill-chips[b-eyrbx5zyl8] {
    display: flex;
    flex-wrap: wrap;
}

.skill-chips:empty[b-eyrbx5zyl8] {
    display: none;
}

.skill-chip[b-eyrbx5zyl8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    margin: 0 6px 6px 0;
    border-radius: var(--radius-s);
    border: 1px solid var(--card-stroke);
    background: var(--pill-bg);
    color: var(--pill-text);
    font-size: 12px;
    font-weight: 500;
}

.skill-chip button[b-eyrbx5zyl8] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: var(--radius-s);
    transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.skill-chip button:hover[b-eyrbx5zyl8] {
    color: var(--dislike-red);
    background: var(--dislike-red-soft);
}

.add-row[b-eyrbx5zyl8] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.add-block-row[b-eyrbx5zyl8] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Labels doubling as buttons (hidden file pickers) need the pointer themselves */
label.btn[b-eyrbx5zyl8] {
    cursor: pointer;
}

/* ---------- Front-end validation ---------- */
/* Field label with an optional right-aligned char counter */
.label-row[b-eyrbx5zyl8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.char-count[b-eyrbx5zyl8] {
    text-align: right;
}

.char-count.over[b-eyrbx5zyl8] {
    color: var(--dislike-red);
}

/* Inline invalid-field hint (shown only after the field was touched) */
.field-hint[b-eyrbx5zyl8] {
    color: var(--dislike-red);
}

/* ---------- Save actions ---------- */
.save-area[b-eyrbx5zyl8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* What's-blocking-save summary above the disabled button (default .caption tone) */

.save-full[b-eyrbx5zyl8] {
    width: 100%;
    margin-top: 4px;
}

.save-row[b-eyrbx5zyl8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

/* .busy-float moved to app.css (shared "Feed-list & browse-page chrome"). */
/* /Components/Pages/Profiles/ViewProfile.razor.rz.scp.css */
/* View-profile scaffolding — pinned header, scrolling body. The fixed Like/Nope
   bar itself is the shared .docked-bar (app.css), which mirrors this page's
   reading column so the buttons line up under it. */

.view-profile-page[b-9c9tgzzyt7] {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--tab-bar-height));
    padding-bottom: 0;
}

/* Pinned header: the back button stays put while the profile scrolls. */
.profile-head[b-9c9tgzzyt7] {
    position: sticky;
    top: var(--topnav-height);
    z-index: 40;
    background: var(--page-bg);
    border-bottom: 1px solid var(--divider);
}

.profile-body[b-9c9tgzzyt7] {
    flex: 1;
    padding-top: 4px;
    padding-bottom: 84px;               /* reserve space for the fixed .docked-bar */
}

.profile-stack[b-9c9tgzzyt7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Block / Report: quiet ghost triggers, centered below the content. */
.safety-row[b-9c9tgzzyt7] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.safety-btn[b-9c9tgzzyt7] {
    font-size: 12.5px;
    color: var(--text-secondary);
    padding: 7px 16px;
    min-height: 36px;
    border-radius: var(--radius-s);
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.safety-btn:hover:not(:disabled)[b-9c9tgzzyt7] {
    color: var(--text);
}

@media (max-width: 899px) {
    .profile-head[b-9c9tgzzyt7] {
        margin-left: calc(-1 * var(--space-xl));
        margin-right: calc(-1 * var(--space-xl));
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
}

@media (min-width: 900px) {
    .view-profile-page[b-9c9tgzzyt7] {
        min-height: calc(100dvh - 48px - var(--topnav-height));
    }
}
/* /Components/Pages/Settings/BlockedUsers.razor.rz.scp.css */
/* Scoped styles for Blocked Users — .section-card rows with mono
   "BLOCKED <date>" meta timestamps. Card chrome comes from app.css. */

.header-row[b-1gmtty446d] {
    position: relative;         /* anchors the overlaid refresh icon button */
}

.busy-center[b-1gmtty446d] {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.blocked-list[b-1gmtty446d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin-top: 10px;
}

.blocked-row[b-1gmtty446d] {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: 14px var(--space-l);
}

.blocked-info[b-1gmtty446d] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.blocked-name[b-1gmtty446d] {
    font-size: 15px;
    font-weight: 600;
}

/* Compact row action — overrides .btn's 44px minimums */
.btn-compact[b-1gmtty446d] {
    min-height: 34px;
    min-width: 0;
    padding: 4px 14px;
    font-size: 13px;
}
/* /Components/Pages/Settings/Settings.razor.rz.scp.css */
/* Scoped styles for Settings — mono eyebrows over quiet .section-card
   surfaces, a red-ruled danger zone, and a ghost Log Out pinned to the
   page foot. Card chrome comes from app.css (.section-card). */

.settings-page[b-76mszm60bj] {
    display: flex;
    flex-direction: column;
    /* Fill the viewport (minus the fixed tab bar) so Log Out pins to the bottom. */
    min-height: calc(100dvh - var(--tab-bar-height));
}

.settings-scroll[b-76mszm60bj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding-bottom: var(--space-xxl);
}

/* Section eyebrow (ACCOUNT / APPEARANCE / ...) sits above its card */
.settings-eyebrow[b-76mszm60bj] {
    margin-top: var(--space-l);
}

.settings-eyebrow:first-child[b-76mszm60bj] {
    margin-top: 0;
}

.settings-card[b-76mszm60bj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-hint[b-76mszm60bj] {
    font-size: var(--font-body);
    color: var(--text-secondary);
}

.settings-value[b-76mszm60bj] {
    font-size: 15px;
}

.settings-row[b-76mszm60bj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
}

.settings-version[b-76mszm60bj] {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
}

/* --- Theme (palette) picker: a grid of live micro-mockup swatches --- */
.theme-heading[b-76mszm60bj] {
    margin-top: 6px;
}

.theme-grid[b-76mszm60bj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 2px;
}

@media (max-width: 560px) {
    .theme-grid[b-76mszm60bj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.theme-swatch[b-76mszm60bj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 8px 10px;
    border-radius: var(--radius-l);
    border: 1px solid var(--card-stroke);
    background: var(--surface-alt);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.theme-swatch:hover[b-76mszm60bj] {
    border-color: var(--accent);
}

.theme-swatch:active[b-76mszm60bj] {
    transform: scale(0.98);
}

.theme-swatch.active[b-76mszm60bj] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

/* The preview carries its own data-theme + data-theme-name, so every
   var() below resolves to *that* palette — a real page/card/accent mockup. */
.theme-swatch-preview[b-76mszm60bj] {
    position: relative;
    height: 60px;
    border-radius: 8px;
    background: var(--page-bg);
    border: 1px solid var(--card-stroke);
    overflow: hidden;
    padding: 8px;
}

.tsp-card[b-76mszm60bj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 68%;
    padding: 6px;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-stroke);
}

.tsp-line[b-76mszm60bj] {
    height: 4px;
    border-radius: 2px;
}

.tsp-line-1[b-76mszm60bj] {
    width: 80%;
    background: var(--text);
}

.tsp-line-2[b-76mszm60bj] {
    width: 55%;
    background: var(--text-secondary);
}

.tsp-accent[b-76mszm60bj],
.tsp-secondary[b-76mszm60bj] {
    position: absolute;
    bottom: 8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--card-stroke);
}

.tsp-accent[b-76mszm60bj] {
    right: 8px;
    background: var(--accent);
}

.tsp-secondary[b-76mszm60bj] {
    right: 27px;
    background: var(--accent-secondary);
}

.theme-swatch-name[b-76mszm60bj] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

/* (The old layout-picker wireframe swatches were replaced by the segmented
   Bar Style / Bar Position controls, which use the shared .segmented styles.) */
.layout-note[b-76mszm60bj] {
    margin-top: 2px;
}

/* Danger zone: 1px red left rule on the card */
.settings-danger[b-76mszm60bj] {
    border-left-color: var(--dislike-red);
}

.settings-delete[b-76mszm60bj] {
    width: 100%;
}

.settings-logout[b-76mszm60bj] {
    margin-top: auto;
    width: 100%;
}

@media (min-width: 900px) {
    .settings-page[b-76mszm60bj] {
        min-height: calc(100dvh - 48px - var(--topnav-height));   /* desktop shell: no tab bar, 48px bottom pad */
    }
}
/* /Components/Shared/ComposeMessageModal.razor.rz.scp.css */
/* Shell mirrors .idea-modal-panel but narrower — this is a short form, not a
   long read. Capped at 90vh so the openers list scrolls inside the panel. */
.compose-modal-panel[b-lvbfdcc7ip] {
    position: relative;
    background: var(--overlay-bg);
    border: 1px solid var(--panel-stroke);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-overlay);
    animation: modal-in 200ms var(--ease-out);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    outline: none;
}

.compose-modal-panel:focus-visible[b-lvbfdcc7ip] {
    box-shadow: var(--shadow-overlay), 0 0 0 2px var(--accent);
}

/* The only scroll container; overscroll-behavior stops wheel chaining into
   the page behind the scrim. */
.compose-modal-body[b-lvbfdcc7ip] {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-xxl);
    /* Room for the close button. */
    padding-top: calc(var(--space-xxl) + 8px);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.compose-modal-close[b-lvbfdcc7ip] {
    position: absolute;
    top: var(--space-m);
    right: var(--space-m);
    z-index: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    border: 1px solid var(--panel-stroke);
    border-radius: var(--radius-s);
    background: var(--overlay-bg);
    color: var(--text);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.compose-modal-close:hover[b-lvbfdcc7ip] {
    background: var(--surface-alt);
    border-color: var(--text);
}

.compose-modal-title[b-lvbfdcc7ip] {
    padding-right: 40px;   /* clear the close button */
}

.compose-modal-sub[b-lvbfdcc7ip] {
    margin-top: calc(-1 * var(--space-s));
}

.compose-openers-label[b-lvbfdcc7ip] {
    opacity: 0.7;
}

.compose-openers[b-lvbfdcc7ip] {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

/* Openers are full sentences — let them wrap instead of clipping to the
   standard fixed button height. */
.compose-opener[b-lvbfdcc7ip] {
    text-align: left;
    white-space: normal;
    height: auto;
    padding: 10px 12px;
    line-height: 1.35;
}

.compose-input-border[b-lvbfdcc7ip] {
    border: 1px solid var(--chat-input-border);
    border-radius: var(--radius-m);
    padding: 8px 12px;
    background: var(--entry-bg);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.compose-input-border:focus-within[b-lvbfdcc7ip] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.compose-input-border textarea[b-lvbfdcc7ip] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    resize: none;
    max-height: 160px;
}

.compose-error[b-lvbfdcc7ip] {
    color: var(--dislike-red);
    font-size: var(--font-small);
}

.compose-modal-actions[b-lvbfdcc7ip] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-s);
}

@media (max-width: 600px) {
    .compose-modal-body[b-lvbfdcc7ip] {
        padding: var(--space-l);
        padding-top: calc(var(--space-l) + 32px);
    }
}
/* /Components/Shared/ContentBlockEditor.razor.rz.scp.css */
.cb-list[b-x772mkm5qf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cb-row[b-x772mkm5qf] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
}

.cb-reorder[b-x772mkm5qf] {
    display: flex;
    flex-direction: column;
}

.cb-move[b-x772mkm5qf] {
    margin: 0;
    padding: 4px;
    color: var(--text-secondary);
}

.cb-move:hover:not(:disabled)[b-x772mkm5qf] {
    color: var(--accent);
}

.cb-frame[b-x772mkm5qf] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border: 1px solid var(--card-stroke);
    border-radius: var(--radius-m);
    background: var(--card-bg);
    padding: 10px 8px 10px 12px;
    transition: border-color 110ms;
}

.cb-frame:focus-within[b-x772mkm5qf] {
    border-color: var(--accent);
}

.cb-body[b-x772mkm5qf] {
    flex: 1;
    min-width: 0;
}

.cb-image-wrap[b-x772mkm5qf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cb-image[b-x772mkm5qf] {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius-s);
    display: block;
}

.cb-caption[b-x772mkm5qf] {
    font-size: 13px;
    background: transparent;
    border-bottom: 1px solid var(--entry-border);
    padding: 6px 2px;
}

.cb-caption:focus[b-x772mkm5qf] {
    border-bottom-color: var(--accent);
}

.cb-remove[b-x772mkm5qf] {
    margin: 0;
    padding: 8px;
    color: var(--text-secondary);
}

.cb-remove:hover:not(:disabled)[b-x772mkm5qf] {
    color: var(--dislike-red);
}
/* /Components/Shared/DialogHost.razor.rz.scp.css */
.prompt-input[b-oky9mkki9y] {
    width: 100%;
    margin-bottom: var(--space-xl);
}

.prompt-actions[b-oky9mkki9y] {
    margin-top: 0;
}
/* /Components/Shared/IdeaDetailsView.razor.rz.scp.css */
/* Detail body: one vertical stack, section cards supply their own surface. */
.idea-detail[b-6v9654h17a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

/* Wide hero, NOT an avatar. Fixed 16:9 so a tall source can't blow out the
   stack; object-fit crops rather than distorts. */
.idea-hero[b-6v9654h17a] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-l);
    display: block;
    background: var(--accent-secondary);
}

.idea-hero-empty[b-6v9654h17a] {
    background: var(--accent-secondary);
}

.idea-detail-title[b-6v9654h17a] {
    margin: 0;
    overflow-wrap: break-word;
}

/* .pill-row has no bottom margin of its own — .pill carries 0 0 6px 0, which
   would double up against the stack gap, so pull the row back by that much. */
.pill-row[b-6v9654h17a] {
    margin-bottom: -6px;
}

/* Approved evidence only. Tinted rather than coloured so both themes hold. */
.pill-verified[b-6v9654h17a] {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-soft-border);
}

/* Neutral by design: the count is a placeholder, not a live signal. */
.contributing-pill[b-6v9654h17a] {
    background: transparent;
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--card-stroke);
}

.company-line[b-6v9654h17a] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    overflow-wrap: break-word;
}

.section-label[b-6v9654h17a] {
    display: block;
    margin-bottom: var(--space-s);
}

/* Author-entered copy: keep their line breaks, break long unbroken strings. */
.prose[b-6v9654h17a] {
    font-size: var(--font-body);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* ---------- Equity ---------- */
.equity-card[b-6v9654h17a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.equity-row[b-6v9654h17a] {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.equity-value[b-6v9654h17a] {
    font-family: var(--font-display);
    font-size: var(--font-title);
    font-weight: 600;
    color: var(--text);
}

/* Circled "?" — the whole explainer affordance, sitting right after the value. */
.equity-help-circle[b-6v9654h17a] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--text-secondary);
    background: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.equity-help-circle:hover[b-6v9654h17a] {
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- Author ---------- */
.author-row[b-6v9654h17a] {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    background: var(--card-bg);
    border: var(--surface-border-width) solid var(--card-stroke);
    border-radius: var(--radius-l);
    padding: var(--space-m) var(--space-l);
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
}

.author-row-btn[b-6v9654h17a] {
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.author-row-btn:hover[b-6v9654h17a] {
    border-color: var(--accent-soft-border);
    background: var(--accent-soft);
}

.author-avatar[b-6v9654h17a] {
    flex-shrink: 0;
    display: flex;
}

.author-copy[b-6v9654h17a] {
    min-width: 0;
}

.author-name[b-6v9654h17a] {
    font-weight: 600;
    overflow-wrap: break-word;
}

.author-desc[b-6v9654h17a] {
    overflow-wrap: break-word;
}

/* ---------- Extras ---------- */
.extras[b-6v9654h17a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}
/* /Components/Shared/IdeaModal.razor.rz.scp.css */
/* Wider than .modal-card (which is sized for short alert copy) and capped at
   90vh so a long idea scrolls inside the panel instead of off-screen. */
.idea-modal-panel[b-4bze3d683w] {
    position: relative;
    background: var(--overlay-bg);
    border: 1px solid var(--panel-stroke);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-overlay);
    animation: modal-in 200ms var(--ease-out);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    outline: none;
}

.idea-modal-panel:focus-visible[b-4bze3d683w] {
    box-shadow: var(--shadow-overlay), 0 0 0 2px var(--accent);
}

/* The only scroll container. overscroll-behavior stops the wheel from chaining
   into the page once the panel hits its end (belt to the body lock's braces). */
.idea-modal-body[b-4bze3d683w] {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-xxl);
    /* Room for the close button so it never sits on top of the hero image. */
    padding-top: calc(var(--space-xxl) + 20px);
    /* Slim themed scrollbar (kept visible — unlike the feed, modal content
       length varies, so the affordance matters). Firefox first: */
    scrollbar-width: thin;
    scrollbar-color: var(--text-disabled) transparent;
    /* The scroll container must clip to the panel's rounded corners, or the
       scrollbar pokes past them as square pixels. */
    border-radius: inherit;
}

/* WebKit (Chrome/Edge/Safari): a floating pill thumb on an invisible track.
   The transparent border + padding-box clip renders a ~4px thumb inside a
   10px hit area — easy to grab, visually light. */
.idea-modal-body[b-4bze3d683w]::-webkit-scrollbar {
    width: 10px;
}

.idea-modal-body[b-4bze3d683w]::-webkit-scrollbar-track {
    background: transparent;
    /* Keep the thumb's travel clear of the panel's rounded corners. */
    margin: var(--radius-xl) 0;
}

.idea-modal-body[b-4bze3d683w]::-webkit-scrollbar-thumb {
    background: var(--text-disabled);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.idea-modal-body[b-4bze3d683w]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
    border: 3px solid transparent;
    background-clip: padding-box;
}

.idea-modal-close[b-4bze3d683w] {
    position: absolute;
    top: var(--space-m);
    right: var(--space-m);
    z-index: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    border: 1px solid var(--panel-stroke);
    border-radius: var(--radius-s);
    background: var(--overlay-bg);
    color: var(--text);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.idea-modal-close:hover[b-4bze3d683w] {
    background: var(--surface-alt);
    border-color: var(--text);
}

/* ---------- Docked Nope / Like strip ----------
   Sits under the scrolling body, inside the panel, so it is always visible —
   the modal's analogue of the feed's fixed bottom bar. */
.idea-modal-actions[b-4bze3d683w] {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: var(--space-xxl);
    padding: var(--space-m) var(--space-xxl);
    border-top: 1px solid var(--divider);
}

.modal-action-btn[b-4bze3d683w] {
    height: 44px;
    padding: 0 26px;
    border-radius: 10px;         /* matches the feed bar's rounding */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.modal-action-dislike[b-4bze3d683w] {
    border: 1px solid var(--dislike-red);
    color: var(--dislike-red);
}

.modal-action-dislike:hover[b-4bze3d683w] {
    background: var(--dislike-red-soft);
}

.modal-action-dislike.is-active[b-4bze3d683w] {
    background: var(--dislike-red);
    color: #ffffff;
}

.modal-action-like[b-4bze3d683w] {
    border: 1px solid var(--interested-green);
    color: var(--interested-green);
}

.modal-action-like:hover[b-4bze3d683w] {
    background: var(--interested-green-soft);
}

.modal-action-like.is-active[b-4bze3d683w] {
    background: var(--interested-green);
    color: #ffffff;
}

@media (max-width: 600px) {
    .idea-modal-body[b-4bze3d683w] {
        padding: var(--space-l);
        padding-top: calc(var(--space-l) + 32px);
    }
}
/* /Components/Shared/LikeDislikeBar.razor.rz.scp.css */
.ld-bar[b-w55n0d8cgx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 10px 24px;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

.ld-btn[b-w55n0d8cgx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    font-size: 14px;
    /* Softer than .btn-action's sharp 2px — these are the app's two most
       tapped controls. */
    border-radius: 10px;
}
/* /Components/Shared/NotificationsPanel.razor.rz.scp.css */
/* Scoped styles for the notifications panel internals (moved verbatim from
   Home.razor.css when the panel was extracted). Panel chrome (.notif-panel /
   .notif-header / .notif-row / .unread-dot / .bell-dot) stays global in
   app.css so hosts can anchor and theme it. */

.notif-close[b-x1s4iihjrl] {
    color: var(--text-secondary);
}

.notif-loading[b-x1s4iihjrl] {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.notif-empty[b-x1s4iihjrl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 30px 24px;
    text-align: center;
}

.notif-empty-title[b-x1s4iihjrl] {
    font-weight: 600;
}

.notif-dot-spacer[b-x1s4iihjrl] {
    width: 8px;                 /* keeps alignment steady when read */
}

.notif-text[b-x1s4iihjrl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif-line[b-x1s4iihjrl] {
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* tail truncation, as mobile MaxLines=2 */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-dismiss[b-x1s4iihjrl] {
    color: var(--text-disabled);
}
/* /Components/Shared/RefreshIconButton.razor.rz.scp.css */
.refresh-btn[b-0e281i65wq] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;                  /* cancel .icon-btn's negative margin inside the header overlay */
    color: var(--text-secondary);
}

.refresh-btn:hover:not(:disabled)[b-0e281i65wq] {
    color: var(--accent);
}

.refresh-glyph[b-0e281i65wq] {
    display: inline-flex;
    width: 18px;
    height: 18px;
    transition: transform var(--dur-med) var(--ease-out);
}

.refresh-btn:hover:not(:disabled) .refresh-glyph[b-0e281i65wq] {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .refresh-glyph[b-0e281i65wq] { transition: none; }
}