/* /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/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 */
/* BrowseIdeas — page-unique styles only. The shared browse chrome (header,
   filter panel, feed grid, skeleton, load-more) now lives in app.css under
   "Feed-list & browse-page chrome". */

/* MAUI Stepper substitute: [-][+] button pair. Named hours-stepper to stay
   clear of the design system's wizard .stepper. */
.hours-row[b-p95jljej6v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hours-stepper[b-p95jljej6v] {
    display: inline-flex;
    border: 1px solid var(--entry-border);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.hours-stepper button[b-p95jljej6v] {
    width: 42px;
    height: 38px;
    border: none;
    background: var(--entry-bg);
    color: var(--text);
    font-size: 17px;
    line-height: 1;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.hours-stepper button:hover[b-p95jljej6v] {
    background: var(--surface-alt);
}

.hours-stepper button:first-child[b-p95jljej6v] {
    border-right: 1px solid var(--entry-border);
}

.hours-stepper button:active[b-p95jljej6v] {
    opacity: 0.7;
}

.hours-value[b-p95jljej6v] {
    font-size: var(--font-body);
}

/* Clickable skill suggestions under the Skill input: .pill chips with a
   .meta-label eyebrow, sourced from my profile. (Kept scoped: .skill-chip
   also exists — with different structure — on MyIdea/Profile.) */
.skill-suggest[b-p95jljej6v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.skill-chip[b-p95jljej6v] {
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.skill-chip:hover[b-p95jljej6v] {
    border-color: var(--accent);
    color: var(--accent);
}

.skill-chip:active[b-p95jljej6v] {
    opacity: 0.7;
}
/* /Components/Pages/Browse/BrowseUsers.razor.rz.scp.css */
/* BrowseUsers — page-unique styles only. The shared browse chrome (header,
   filter panel, feed grid, skeleton, load-more) now lives in app.css under
   "Feed-list & browse-page chrome". */

/* All / Matched segmented tabs: 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;
    }
}

/* Clickable skill suggestions under the Skill input: .pill chips with a
   .meta-label eyebrow, sourced from my idea's needed skills. (Kept scoped:
   .skill-chip also exists — with different structure — on MyIdea/Profile.) */
.skill-suggest[b-9jerm5dlrt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.skill-chip[b-9jerm5dlrt] {
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.skill-chip:hover[b-9jerm5dlrt] {
    border-color: var(--accent);
    color: var(--accent);
}

.skill-chip:active[b-9jerm5dlrt] {
    opacity: 0.7;
}
/* /Components/Pages/Browse/IdeaCard.razor.rz.scp.css */
/* Browse feed card: flex column so the action row pins to the bottom and
   button rows line up across a card-grid row (.list-card supplies the
   surface, 1px rule, and hover raise). */
.browse-card[b-sjugu65fk8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.card-head[b-sjugu65fk8] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 14px;
    align-items: center;
}

.avatar-btn[b-sjugu65fk8] {
    display: flex;
    border: none;
    background: transparent;
    padding: 0;
}

.card-id[b-sjugu65fk8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.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;
}

/* Clickable title: same nav as tapping the avatar. */
.title-btn[b-sjugu65fk8] {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

.title-btn:hover[b-sjugu65fk8] {
    color: var(--accent);
}

.bookmark-btn[b-sjugu65fk8] {
    align-self: start;
}

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

.card-actions[b-sjugu65fk8] {
    margin-top: auto;
    padding-top: var(--space-xs);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.view-btn[b-sjugu65fk8] {
    grid-column: 1 / -1;
}
/* /Components/Pages/Browse/UserCard.razor.rz.scp.css */
/* Browse feed card: flex column so the action row pins to the bottom and
   button rows line up across a card-grid row (.list-card supplies the
   surface, 1px rule, and hover raise). */
.browse-card[b-96jmt9pva1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.card-head[b-96jmt9pva1] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 14px;
    align-items: center;
}

.avatar-btn[b-96jmt9pva1] {
    display: flex;
    border: none;
    background: transparent;
    padding: 0;
}

.card-id[b-96jmt9pva1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

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

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

/* Clickable name: same nav as tapping the avatar. */
.title-btn[b-96jmt9pva1] {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

.title-btn:hover[b-96jmt9pva1] {
    color: var(--accent);
}

.anon[b-96jmt9pva1] {
    color: var(--text-secondary);
}

.bookmark-btn[b-96jmt9pva1] {
    align-self: start;
}

.card-actions[b-96jmt9pva1] {
    margin-top: auto;
    padding-top: var(--space-xs);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.view-btn[b-96jmt9pva1] {
    grid-column: 1 / -1;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Scoped styles for the Home page (greeting, launcher tile grid, saved-search
   tiles). Panel chrome (.notif-panel/.notif-header/.notif-row/.unread-dot/
   .bell-dot) and tile chrome (.tile-card) come from app.css; the panel's
   internals moved to Shared/NotificationsPanel.razor.css. */

.home-root[b-1jcuf3tsgy] {
    position: relative;         /* anchors the absolute .notif-panel */
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-top: var(--space-xl);
}

.home-topbar[b-1jcuf3tsgy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.home-bell-wrap[b-1jcuf3tsgy] {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-greeting[b-1jcuf3tsgy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

/* Launcher: 2x2 on mobile, 4-across once the sidebar layout kicks in */
.home-grid[b-1jcuf3tsgy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
}

.home-tile[b-1jcuf3tsgy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-s);
    text-align: left;
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-body);
    cursor: pointer;
}

/* Icon sits in a small accent-tinted square chip */
.home-tile-chip[b-1jcuf3tsgy] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-m);
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-tile-title[b-1jcuf3tsgy] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-top: 2px;
}

@media (min-width: 900px) {
    .home-grid[b-1jcuf3tsgy] {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-l);
    }

    .home-tile[b-1jcuf3tsgy] {
        min-height: 176px;
        padding: var(--space-xxl) var(--space-xl);
    }
}

/* --- Saved-search tiles: compact cousins of the launcher tiles --- */

.home-saved[b-1jcuf3tsgy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.home-saved-grid[b-1jcuf3tsgy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
}

.home-saved-tile[b-1jcuf3tsgy] {
    position: relative;         /* anchors the dismiss X */
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-l);
    text-align: left;
    color: var(--text);
    cursor: pointer;
}

.home-saved-chip[b-1jcuf3tsgy] {
    width: 32px;
    height: 32px;
}

.home-saved-name[b-1jcuf3tsgy] {
    font-weight: 600;
    line-height: 1.35;
    padding-right: 18px;        /* clear the dismiss X */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-saved-dismiss[b-1jcuf3tsgy] {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;                  /* neutralize .icon-btn's -8px hit-area margin */
    padding: 6px;
    color: var(--text-disabled);
}

@media (min-width: 900px) {
    .home-saved-grid[b-1jcuf3tsgy] {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-l);
    }
}
/* /Components/Pages/Ideas/Bookmarks.razor.rz.scp.css */
/* Bookmarks — page-unique styles only. The shared list-row chrome (sticky
   header, edge-to-edge rows, avatar + title + meta layout, action buttons)
   now lives in app.css under "Feed-list & browse-page chrome". */

/* Remove is a red ghost variant of .row-btn / .btn-action. */
.btn-remove[b-cc7f6zzr4j] {
    color: var(--dislike-red);
    border-color: var(--dislike-red);
}

.btn-remove:hover:not(:disabled)[b-cc7f6zzr4j] {
    background: var(--dislike-red-soft);
    border-color: var(--dislike-red);
}
/* /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;
}

.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;
}

/* MAUI Stepper substitute: two .btn-ghost squares + mono readout */
.hours-row[b-wr3d3goeeu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stepper-square[b-wr3d3goeeu] {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
}

.hours-value[b-wr3d3goeeu] {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    min-width: 2ch;
    text-align: right;
    margin-left: 4px;
}

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

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

.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: back + bookmark stay 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;
}

.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);
}

/* 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;
}

.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: back + bookmark stay 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/Reports.razor.rz.scp.css */
/* Scoped styles for the admin Reports queue — .section-card rows, reason +
   mono timestamp header line, inset note well. Card chrome from app.css. */

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

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

.report-list[b-9awxdok0h0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    margin-top: 10px;
}

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

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

.report-reason[b-9awxdok0h0] {
    font-size: 15px;
    font-weight: 600;
}

.report-line[b-9awxdok0h0] {
    font-size: 13px;
}

.report-line-label[b-9awxdok0h0] {
    color: var(--text-secondary);
}

/* Free-text note from the reporter: quiet inset well */
.report-note[b-9awxdok0h0] {
    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;
}

/* Compact row action — overrides .btn's 44px minimums */
.btn-compact[b-9awxdok0h0] {
    min-height: 34px;
    min-width: 0;
    padding: 4px 14px;
    font-size: 13px;
}

.report-dismiss[b-9awxdok0h0] {
    align-self: flex-end;
    margin-top: 4px;
}
/* /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);
}

/* --- Layout picker: wireframe mini-diagrams (nav chrome vs content) --- */
.layout-grid[b-76mszm60bj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 2px;
}

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

.layout-swatch[b-76mszm60bj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    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);
}

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

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

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

.layout-swatch-hint[b-76mszm60bj] {
    font-size: 10.5px;
    color: var(--text-secondary);
}

/* The wireframe: a little page with a nav block + content lines. Each
   lsp-* variant repositions the nav block like the real layout. */
.layout-swatch-preview[b-76mszm60bj] {
    position: relative;
    height: 56px;
    border-radius: 6px;
    background: var(--page-bg);
    border: 1px solid var(--card-stroke);
    overflow: hidden;
    display: block;
}

.lsp-nav[b-76mszm60bj] {
    position: absolute;
    background: var(--accent);
    opacity: 0.85;
    border-radius: 2px;
}

.lsp-content[b-76mszm60bj] {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lsp-line[b-76mszm60bj] {
    height: 5px;
    border-radius: 2px;
    background: var(--text-secondary);
    opacity: 0.55;
    width: 44px;
}

.lsp-line.short[b-76mszm60bj] {
    width: 28px;
}

/* Classic: left sidebar */
.lsp-classic .lsp-nav[b-76mszm60bj] { left: 5px; top: 5px; bottom: 5px; width: 12px; }
.lsp-classic .lsp-content[b-76mszm60bj] { left: 26px; top: 14px; }

/* Top Bar: strip across the top */
.lsp-topbar .lsp-nav[b-76mszm60bj] { left: 5px; right: 5px; top: 5px; height: 9px; }
.lsp-topbar .lsp-content[b-76mszm60bj] { left: 22px; top: 24px; }

/* Icon Rail: thin left strip */
.lsp-rail .lsp-nav[b-76mszm60bj] { left: 5px; top: 5px; bottom: 5px; width: 6px; }
.lsp-rail .lsp-content[b-76mszm60bj] { left: 20px; top: 14px; }

/* Floating Dock: pill at the bottom centre */
.lsp-dock .lsp-nav[b-76mszm60bj] { left: 50%; transform: translateX(-50%); bottom: 4px; width: 30px; height: 8px; border-radius: 999px; }
.lsp-dock .lsp-content[b-76mszm60bj] { left: 18px; top: 10px; }

.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/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/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;
}
/* /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; }
}