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

/* /Components/Jobs/JobListPage.razor.rz.scp.css */
.job-list-header[b-e4dbqus4yx] {
    position: sticky;
    top: 0;
    background: var(--neutral-layer-1);
    /* Horizontal padding gives the count label and buttons breathing
       room from the edge of the sticky band; vertical padding keeps
       the row from feeling cramped. */
    padding: 12px 16px;
    z-index: 5;
    /* Subtle bottom border so the sticky header reads as separate from
       the grid content scrolling underneath it. */
    border-bottom: 1px solid var(--neutral-stroke-rest);
    margin-bottom: 4px;
}
/* /Components/Jobs/StageStrip.razor.rz.scp.css */
.stage-strip[b-tc56l7d3sg] {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-wrap: wrap;
}

.stage-pip[b-tc56l7d3sg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-fill-rest);
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.stage-pip:hover[b-tc56l7d3sg] {
    background: var(--neutral-fill-stealth-hover);
}

.stage-pip:focus-visible[b-tc56l7d3sg] {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-fill-rest);
}

.stage-pip:active[b-tc56l7d3sg] {
    background: var(--neutral-fill-stealth-active);
}

.stage-pip-completed[b-tc56l7d3sg] {
    border-color: var(--stage-color, var(--ck-neutral-400));
    background: color-mix(in srgb, var(--stage-color, var(--ck-neutral-400)) 10%, white);
}

.stage-pip-current[b-tc56l7d3sg] {
    border-color: var(--stage-color, var(--ck-primary-400));
    box-shadow: 0 0 0 1px var(--stage-color, var(--ck-primary-400));
    background: color-mix(in srgb, var(--stage-color, var(--ck-primary-400)) 8%, white);
}

/* Per-stage colour tokens applied via class */
.stage-applied[b-tc56l7d3sg]   { --stage-color: var(--ck-stage-applied); }
.stage-phone[b-tc56l7d3sg]     { --stage-color: var(--ck-stage-phone); }
.stage-interview[b-tc56l7d3sg] { --stage-color: var(--ck-stage-interview); }
.stage-offer[b-tc56l7d3sg]     { --stage-color: var(--ck-stage-offer); }
.stage-accepted[b-tc56l7d3sg]  { --stage-color: var(--ck-stage-accepted); }

.stage-pip-future[b-tc56l7d3sg] {
    color: var(--neutral-foreground-hint);
}

.stage-pip-marker[b-tc56l7d3sg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.stage-pip-dot[b-tc56l7d3sg] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid currentColor;
}

.stage-pip-dot-current[b-tc56l7d3sg] {
    background: var(--stage-color, var(--ck-primary-400));
    border-color: var(--stage-color, var(--ck-primary-400));
}

.stage-pip-body[b-tc56l7d3sg] {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.stage-pip-label[b-tc56l7d3sg] {
    font-weight: 600;
    font-size: 0.85rem;
}

.stage-pip-date[b-tc56l7d3sg] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}

.stage-pip-date-muted[b-tc56l7d3sg] {
    font-style: italic;
}

.stage-pip-connector[b-tc56l7d3sg] {
    align-self: center;
    flex: 0 0 16px;
    height: 2px;
    background: var(--neutral-stroke-rest);
}
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
/* The global `html, body { height: 100%; overflow: hidden }` in app.css locks
   the document scroll because FluentMainLayout owns the scroller for the
   authenticated app shell. Anonymous pages need their own scroll container
   inside that locked viewport. We pin the layout to 100dvh and let the body
   region scroll, same pattern as FluentMainLayout, just with our header. */
.account-layout[b-q3kjhgelzc] {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    overflow: hidden;
}

.account-layout-header[b-q3kjhgelzc] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: #fbfbfb;
    gap: 16px;
    min-height: 50px;
    box-sizing: border-box;
}

.account-layout-body[b-q3kjhgelzc] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(5rem + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

@media (max-width: 600px) {
    .account-layout-body[b-q3kjhgelzc] {
        padding-right: max(12px, env(safe-area-inset-right));
        padding-left: max(12px, env(safe-area-inset-left));
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.user-avatar[b-cxsybr0rp4] {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    border: 2px solid var(--ck-neutral-200, #E2E8F0);
    background: var(--ck-neutral-100, #F1F5F9);
    color: var(--ck-neutral-600, #475569);
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    transition: border-color 120ms ease, background 120ms ease;
}

.user-avatar:hover[b-cxsybr0rp4] {
    border-color: var(--ck-primary-600, #185FA5);
    background: var(--ck-neutral-200, #E2E8F0);
}

.user-avatar img[b-cxsybr0rp4] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.user-avatar-initial[b-cxsybr0rp4] {
    position: relative;
    z-index: 0;
}

/* Account menu (details/summary). Anchor for the dropdown — the menu content
   is absolutely positioned against this. */
.user-menu[b-cxsybr0rp4] {
    position: relative;
}

/* Hide the native disclosure triangle on summary in every engine. */
.user-menu > summary[b-cxsybr0rp4] {
    list-style: none;
    cursor: pointer;
}

.user-menu > summary[b-cxsybr0rp4]::-webkit-details-marker {
    display: none;
}

.user-menu > summary[b-cxsybr0rp4]::marker {
    display: none;
    content: "";
}

/* Visible focus ring on the avatar trigger. summary is keyboard-focusable
   by default but doesn't pick up the avatar button's hover/focus styling. */
.user-menu > summary:focus-visible[b-cxsybr0rp4] {
    outline: 2px solid var(--ck-primary-600, #185FA5);
    outline-offset: 2px;
}

.user-menu-content[b-cxsybr0rp4] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--ck-neutral-50, #FFFFFF);
    border: 1px solid var(--ck-neutral-200, #E2E8F0);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 4px;
    z-index: 100;
}

.user-menu-header[b-cxsybr0rp4] {
    padding: 8px 12px 8px 12px;
    border-bottom: 1px solid var(--ck-neutral-200, #E2E8F0);
    margin-bottom: 4px;
}

.user-menu-email[b-cxsybr0rp4] {
    display: block;
    font-size: 0.85rem;
    color: var(--ck-neutral-600, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-item[b-cxsybr0rp4] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    text-align: left;
    color: var(--ck-neutral-900, #0F172A);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 4px;
}

.user-menu-item:hover[b-cxsybr0rp4] {
    background: var(--ck-neutral-100, #F1F5F9);
}

.user-menu-item:focus-visible[b-cxsybr0rp4] {
    outline: 2px solid var(--ck-primary-600, #185FA5);
    outline-offset: -2px;
    background: var(--ck-neutral-100, #F1F5F9);
}

.user-menu-item:active[b-cxsybr0rp4] {
    background: var(--ck-neutral-200, #E2E8F0);
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
.password-field-wrapper[b-9l181p9srw] { position: relative; width: 100%; }

.password-field-wrapper .password-toggle[b-9l181p9srw] {
    position: absolute;
    right: 4px;
    bottom: 2px;
    background: transparent;
    border: none;
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.password-field-wrapper .password-toggle:hover[b-9l181p9srw] { color: var(--neutral-foreground-rest); }
.password-field-wrapper .password-toggle:focus-visible[b-9l181p9srw] { outline: 2px solid var(--accent-fill-rest); outline-offset: 2px; }
/* /Components/Pages/Account/PasswordFieldWithChecklist.razor.rz.scp.css */
.password-field-wrapper[b-kchdtvlk7o] { position: relative; width: 100%; }

.password-field-wrapper .password-toggle[b-kchdtvlk7o] {
    position: absolute;
    right: 2px;
    bottom: 2px;
    background: transparent;
    border: none;
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.password-field-wrapper .password-toggle:hover[b-kchdtvlk7o] { color: var(--neutral-foreground-rest); }
.password-field-wrapper .password-toggle:focus-visible[b-kchdtvlk7o] { outline: 2px solid var(--accent-fill-rest); outline-offset: 2px; }

.password-requirements[b-kchdtvlk7o] {
    list-style: none;
    margin: 2px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 4px;
    font-size: 0.72em;
    width: 100%;
}

.password-requirements li[b-kchdtvlk7o] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--neutral-layer-2, rgba(0, 0, 0, 0.04));
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest, rgba(0, 0, 0, 0.08));
    transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
    white-space: nowrap;
}

.password-requirements .rule-icon[b-kchdtvlk7o] { flex-shrink: 0; }

.password-requirements li.passed[b-kchdtvlk7o] {
    background: rgba(16, 124, 16, 0.08);
    color: var(--neutral-foreground-rest);
    border-color: rgba(16, 124, 16, 0.35);
}

.password-requirements li.passed .rule-icon[b-kchdtvlk7o] { color: #107c10; }
/* /Components/Pages/Account/Setup.razor.rz.scp.css */
.setup-page[b-alm46c5g7v] {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.setup-header[b-alm46c5g7v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setup-header h1[b-alm46c5g7v] {
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    line-height: 1.2;
}

.setup-intro[b-alm46c5g7v] {
    margin: 0;
    color: var(--neutral-foreground-rest);
    font-size: 1rem;
    line-height: 1.5;
}

.setup-hint[b-alm46c5g7v] {
    margin: 0;
    color: var(--neutral-foreground-hint);
    font-size: 0.9rem;
    line-height: 1.5;
}

.setup-stack[b-alm46c5g7v] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* The .setup-card wrapper owns the card's internal padding rhythm; the
   nested FluentCard provides the visual surface (background + border +
   shadow). Each direct child of the FluentCard gets consistent left/right
   padding so the section dividers and footer line up. */
.setup-card[b-alm46c5g7v]  fluent-card {
    padding: 0;
}

.setup-card[b-alm46c5g7v]  fluent-card > * {
    padding-left: 24px;
    padding-right: 24px;
}

.setup-card[b-alm46c5g7v]  fluent-card > .setup-card-footer {
    padding-top: 16px;
    padding-bottom: 16px;
}

@media (max-width: 600px) {
    .setup-card[b-alm46c5g7v]  fluent-card > * {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.setup-card-title[b-alm46c5g7v] {
    margin: 0;
    padding-top: 24px;
    padding-bottom: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* Each capability group is a labelled section: small uppercase eyebrow,
   a single visual rhythm down the card, ~24px breathing room between groups.
   The group heading replaces the previous flat list of labels. */
.setup-group[b-alm46c5g7v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.setup-group:first-of-type[b-alm46c5g7v] {
    border-top: none;
    padding-top: 8px;
}

.setup-group-h[b-alm46c5g7v] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-foreground-rest);
}

.setup-group-hint[b-alm46c5g7v] {
    margin: 0;
    color: var(--neutral-foreground-hint);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Star legend — small, two-line on narrow viewports, single-line on wide. */
.setup-legend[b-alm46c5g7v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 8px 12px;
    background: var(--neutral-fill-input-rest);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.setup-legend-item[b-alm46c5g7v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.setup-legend strong[b-alm46c5g7v] {
    color: var(--neutral-foreground-rest);
    font-weight: 600;
}

[b-alm46c5g7v] .setup-legend-icon {
    color: var(--neutral-foreground-hint);
}

[b-alm46c5g7v] .setup-legend-icon--required {
    color: var(--accent-fill-rest);
}

/* Distance slider gets its own labelled block, sized so 5–50 reads as a
   real range instead of a 100-pixel increment. Bounds are tiny min/max
   labels at the ends — the slider thumb itself shows the live value via
   the Distance heading above. Replaces the cramped tick-label set that
   visually collided with the Include-remote checkbox. */
.setup-distance[b-alm46c5g7v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 360px;
    padding: 8px 0 4px 0;
}

.setup-distance-value[b-alm46c5g7v] {
    color: var(--accent-foreground-rest);
}

.setup-distance[b-alm46c5g7v]  fluent-slider {
    width: 100%;
}

.setup-distance-bounds[b-alm46c5g7v] {
    display: flex;
    justify-content: space-between;
    color: var(--neutral-foreground-hint);
    font-size: 0.75rem;
    margin-top: -4px;
}

/* Toggles inside the Where / Job-type groups get a touch more vertical
   breathing room than a default checkbox so they read as their own row. */
.setup-toggle[b-alm46c5g7v] {
    padding: 4px 0;
}

/* Recency row keeps the number field, label, and live-text hint on one line
   on wide viewports; wraps to two rows on narrow. */
.setup-recency-row[b-alm46c5g7v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.setup-recency-hint[b-alm46c5g7v] {
    color: var(--neutral-foreground-hint);
    font-size: 0.9rem;
}

/* Job-type rows: side-by-side on wide viewports, stacked on narrow. Each row
   is a clean container — no nested-card visual — with the toggle as the
   header and the salary/day-rate field revealed below only when enabled.
   The --on modifier subtly tints the active row so the user sees which
   side carries an active spend constraint. */
.setup-jobtypes[b-alm46c5g7v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .setup-jobtypes[b-alm46c5g7v] {
        grid-template-columns: 1fr;
    }
}

.setup-jobtype[b-alm46c5g7v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    background: transparent;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.setup-jobtype--on[b-alm46c5g7v] {
    border-color: var(--accent-stroke-control-rest);
    background: var(--neutral-fill-input-rest);
}

.setup-jobtype-field[b-alm46c5g7v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 26px; /* aligns with the checkbox label, not the box */
}

@media (max-width: 600px) {
    .setup-jobtype-field[b-alm46c5g7v] {
        padding-left: 0;
    }
}

/* Disclosure — replaces the bare native triangle with a chevron that matches
   the rest of the form's heading rhythm. */
.setup-disclosure[b-alm46c5g7v] {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    margin-top: 4px;
}

.setup-disclosure > summary[b-alm46c5g7v] {
    cursor: pointer;
    list-style: none;
    padding: 16px 0;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.setup-disclosure > summary[b-alm46c5g7v]::-webkit-details-marker {
    display: none;
}

.setup-disclosure-chevron[b-alm46c5g7v] {
    display: inline-flex;
    width: 12px;
    height: 12px;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease-out;
}

.setup-disclosure-chevron[b-alm46c5g7v]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translate(-1px, -1px);
}

.setup-disclosure[open] > summary > .setup-disclosure-chevron[b-alm46c5g7v] {
    transform: rotate(90deg);
}

.setup-disclosure > summary:focus-visible[b-alm46c5g7v] {
    outline: 2px solid var(--accent-stroke-control-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.setup-disclosure-body[b-alm46c5g7v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
}

/* Card footer — Save and Finish anchored inside the card, right-aligned on
   wide viewports, full-width on narrow. Subtle top border to separate it
   from the form content above. */
.setup-card-footer[b-alm46c5g7v] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    margin-top: 8px;
}

@media (max-width: 600px) {
    .setup-card-footer[b-alm46c5g7v] {
        flex-direction: column;
    }

    .setup-card-footer[b-alm46c5g7v]  fluent-button {
        width: 100%;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ── Action cards ── */

.card-inner[b-y1tlbagn2n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.card-icon-block[b-y1tlbagn2n] {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon-discovery[b-y1tlbagn2n] { background: var(--ck-primary-50, #E6F1FB); }
.card-icon-review[b-y1tlbagn2n]    { background: var(--ck-coral-50, #FAECE7); }
.card-icon-criteria[b-y1tlbagn2n]  { background: var(--ck-neutral-100, #F1F5F9); }

.card-badge[b-y1tlbagn2n] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ck-coral-400, #D85A30);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    padding: 0 3px;
    border: 2px solid #fff;
    box-sizing: content-box;
}

.card-text-group[b-y1tlbagn2n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-heading[b-y1tlbagn2n] {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--ck-neutral-900, #0F172A);
    margin: 0 !important;
}

.card-description[b-y1tlbagn2n] {
    font-size: 13px;
    font-weight: 400;
    color: var(--ck-neutral-600, #64748B);
    margin: 0;
    line-height: 1.5;
}

.card-meta[b-y1tlbagn2n] {
    font-size: 12px;
    color: var(--ck-neutral-600, #64748B);
    margin: 4px 0 0 0;
    line-height: 1.5;
}

.card-meta-stale[b-y1tlbagn2n] {
    display: inline-block;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--ck-warning-bg, #FEF3C7);
    color: var(--ck-warning-text, #78350F);
}

.card-button-row[b-y1tlbagn2n] {
    margin-top: auto;
}


/* ── Pipeline section ── */

.pipeline-section[b-y1tlbagn2n] {
    margin-top: var(--ck-space-8, 32px);
}

.pipeline-heading[b-y1tlbagn2n] {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--ck-neutral-900, #0F172A);
    margin: 0 0 12px 0 !important;
}

.pipeline-grid[b-y1tlbagn2n] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.pipeline-card[b-y1tlbagn2n] {
    background: #fff;
    border: 0.5px solid var(--ck-neutral-200, #E2E8F0);
    border-top: 3px solid transparent;
    border-radius: 0 0 8px 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}

.pipeline-border-review[b-y1tlbagn2n]     { border-top-color: var(--ck-stage-applied, #94A3B8); }
.pipeline-border-shortlisted[b-y1tlbagn2n] { border-top-color: var(--ck-stage-phone, #378ADD); }
.pipeline-border-active[b-y1tlbagn2n]     { border-top-color: var(--ck-stage-interview, #185FA5); }
.pipeline-border-accepted[b-y1tlbagn2n]   { border-top-color: var(--ck-success, #16A34A); }
.pipeline-border-closed[b-y1tlbagn2n]     { border-top-color: var(--ck-stage-applied, #94A3B8); }

.pipeline-label[b-y1tlbagn2n] {
    font-size: 13px;
    font-weight: 400;
    color: var(--ck-neutral-600, #64748B);
    margin-bottom: 4px;
}

.pipeline-number[b-y1tlbagn2n] {
    font-size: 28px;
    font-weight: 600;
    color: var(--ck-neutral-900, #0F172A);
    font-family: var(--ck-font-mono) !important;
    line-height: 1.2;
}

.pipeline-number-muted[b-y1tlbagn2n] {
    color: var(--ck-neutral-600, #475569);
}
/* /Components/Pages/Jobs/ApplicationBoard.razor.rz.scp.css */
/* Scroll wrapper: owns the horizontal overflow so the inner grid can keep
   its natural minmax(160px, 1fr) tracks. min-width: 0 lets the wrapper
   shrink inside its flex parent (defeating flex-item min-width: auto);
   overflow-x: auto kicks in whenever the grid's intrinsic width exceeds
   the available main-area width — e.g. 1024 × 768 with a 270 px nav
   leaves ~700 px, while 5 × 160 + 4 × 16 gaps = 864 px. Padding-bottom
   keeps the bottom row clear of the native scrollbar. */
.application-board-scroll[b-9337u3vi5w] {
    /* FluentStack sets align-items: start, so children size to content rather
       than stretching. Force width: 100% so the wrapper matches its flex
       parent and the inner grid scrolls within instead of pushing past. */
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

@media (min-width: 900px) {
    .application-board-scroll[b-9337u3vi5w] {
        padding-bottom: 8px;
    }
}

.application-board[b-9337u3vi5w] {
    display: grid;
    /* Mobile-first: stacked column layout. Above 900 px, six columns
       (In Progress → Accepted). The narrower 140 px floor at 900 px keeps
       the kanban from forcing horizontal scroll on a typical 1280-wide
       laptop viewport; the 220 px floor at 1200+ px gives readable card
       widths on a 1440 px+ desktop. The .application-board-scroll wrapper
       takes care of horizontal overflow on viewports that fall between
       these floors. */
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 900px) {
    .application-board[b-9337u3vi5w] {
        grid-template-columns: repeat(6, minmax(140px, 1fr));
    }
}

@media (min-width: 1200px) {
    .application-board[b-9337u3vi5w] {
        grid-template-columns: repeat(6, minmax(220px, 1fr));
    }
}

.application-board-column[b-9337u3vi5w] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    border-top: 3px solid transparent;
}

.board-col-applying[b-9337u3vi5w]  { border-top-color: var(--ck-stage-applying); }
.board-col-applied[b-9337u3vi5w]   { border-top-color: var(--ck-stage-applied); }
.board-col-phone[b-9337u3vi5w]     { border-top-color: var(--ck-stage-phone); }
.board-col-interview[b-9337u3vi5w] { border-top-color: var(--ck-stage-interview); }
.board-col-offer[b-9337u3vi5w]     { border-top-color: var(--ck-stage-offer); }
.board-col-accepted[b-9337u3vi5w]  { border-top-color: var(--ck-stage-accepted); }

.application-board-column-header[b-9337u3vi5w] {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}

/* Kill the default <summary> disclosure chevron on desktop — the column
   is always open and not meaningfully collapsible there. On mobile
   the native chevron still renders, which is the affordance we want. */
.application-board-column-header[b-9337u3vi5w]::-webkit-details-marker { display: none; }
.application-board-column-header[b-9337u3vi5w]::marker { content: ""; }

@media (min-width: 900px) {
    .application-board-column-header[b-9337u3vi5w] {
        cursor: default;
    }
}

.application-board-column-count[b-9337u3vi5w] {
    min-width: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--neutral-fill-stealth-rest);
    color: var(--neutral-foreground-hint);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.application-board-column-body[b-9337u3vi5w] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
}

/* Empty-state dropzone — replaces the italic "Nothing here yet" copy with
   a faint dashed outline that doubles as a drag target. The class is only
   applied when the column has zero cards, so cells with content keep the
   plain layout above. */
.application-board-column-body-empty[b-9337u3vi5w] {
    border: 1.5px dashed var(--neutral-stroke-rest);
    border-radius: 6px;
    /* Match the card padding and rhythm so the empty area visually shares
       the "this is where cards go" footprint. */
    margin-top: 4px;
}

/* Frame wrapping the card link + stage-change menu. Two siblings rather
   than a nested button-in-anchor (HTML disallows interactive elements
   inside <a>). position: relative anchors the menu in the top-right. */
.application-board-card-frame[b-9337u3vi5w] {
    position: relative;
}

.application-board-card[b-9337u3vi5w] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 10px 12px;
    /* Reserve space on the right for the menu trigger so long titles
       don't run under the ⋮. 32 px = 24 px trigger + 8 px gap. */
    padding-right: 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Grab cursor is only meaningful on pointer: fine (mouse). On touch
   devices the drag interaction is disabled so the grab-hand affordance
   is a lie. Cards remain clickable links on touch — users can't drag
   them but they can tap to open the status page. */
@media (pointer: fine) and (min-width: 900px) {
    .application-board-card[b-9337u3vi5w] {
        cursor: grab;
    }
}

.application-board-card:hover[b-9337u3vi5w] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.application-board-card:focus-visible[b-9337u3vi5w] {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-fill-rest);
}

.application-board-card:active[b-9337u3vi5w] { cursor: grabbing; }

.application-board-card-company[b-9337u3vi5w] {
    font-weight: 600;
    font-size: 0.9rem;
}

.application-board-card-title[b-9337u3vi5w] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.application-board-card-meta[b-9337u3vi5w] {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.application-board-card-age[b-9337u3vi5w] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.application-board-card-age-icon[b-9337u3vi5w] {
    /* Match the surrounding text colour and sit on the text baseline so the
       icon reads as a duration affordance rather than a separate decoration. */
    color: var(--neutral-foreground-hint);
}

/* Source chip — small inline tag identifying where the job came from
   (Reed, Adzuna, Manual, ...). Triage signal at a glance. */
.application-board-card-source[b-9337u3vi5w] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.application-board-card-source-board[b-9337u3vi5w] {
    background: var(--neutral-fill-stealth-rest);
    color: var(--neutral-foreground-hint);
}

.application-board-card-source-manual[b-9337u3vi5w] {
    /* Subtle accent tint distinguishes hand-entered jobs from board-listed
       ones — Manual rows often have less rich data and the user tends to
       want to know which they are. */
    background: var(--accent-fill-stealth-rest, #e8f1fb);
    color: var(--accent-foreground-rest, #185FA5);
}

/* SortableJS state classes — applied to the wrapper div */
.application-board-card-ghost > .application-board-card-frame > .application-board-card[b-9337u3vi5w] {
    opacity: 0.4;
    background: var(--accent-fill-stealth-rest, #f3f7fc);
}

.application-board-card-chosen > .application-board-card-frame > .application-board-card[b-9337u3vi5w] {
    border-color: var(--accent-fill-rest);
}

.application-board-card-drag[b-9337u3vi5w] {
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* Stage-change menu — keyboard/touch fallback for drag-and-drop. The
   trigger sits absolutely in the top-right of the card frame; the menu
   itself uses the HTML popover attribute so the browser renders it in
   the top layer (escapes the scroll wrapper's overflow clipping). */
.application-board-card-menu-trigger[b-9337u3vi5w] {
    appearance: none;
    border: none;
    background: transparent;
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    font-size: 1rem;
    line-height: 1;
    user-select: none;
    /* Per-card anchor-name is set inline so each popover binds to its
       own trigger; this rule just ensures the property cascades. */
}

.application-board-card-menu-trigger:hover[b-9337u3vi5w] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.application-board-card-menu-trigger:focus-visible[b-9337u3vi5w] {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-fill-rest);
}

/* The popover element. position-anchor is set inline (per-card anchor
   name) so each menu lands on its own trigger. position-area below is
   the anchor-positioning equivalent of "below + right-aligned to the
   trigger". The popover renders in the top layer when shown, so no
   z-index, overflow, or clipping issue can crop it. */
[popover].application-board-card-menu-content[b-9337u3vi5w] {
    /* Reset UA <popover> defaults (margin: auto, etc.) so anchor-positioning
       takes over cleanly. */
    margin: 0;
    /* Anchor-positioning area: bottom of trigger, aligned to its right edge. */
    position-area: bottom span-left;
    /* Small offset so the menu doesn't crowd the trigger. */
    margin-top: 4px;
    /* Visual styling. */
    min-width: 160px;
    padding: 4px;
    background: var(--neutral-layer-floating, var(--neutral-layer-1));
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    display: none;
    flex-direction: column;
    gap: 2px;
}

[popover].application-board-card-menu-content:popover-open[b-9337u3vi5w] {
    display: flex;
}

.application-board-card-menu-item[b-9337u3vi5w] {
    appearance: none;
    background: transparent;
    border: none;
    text-align: left;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
}

.application-board-card-menu-item:hover[b-9337u3vi5w] {
    background: var(--neutral-fill-stealth-hover);
}

.application-board-card-menu-item:focus-visible[b-9337u3vi5w] {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-fill-rest);
}
/* /Components/Pages/Jobs/ApplicationStatusPage.razor.rz.scp.css */
/* Application Status page: one timeline card with stage sections laid out
   in a responsive two-column grid. The page used to render five separate
   cards; now they're sections inside a single FluentCard. Visual cues:
     - dot colour matches the strip's stage colour (--ck-stage-* tokens)
     - left border carries the same colour, supplied by the global
       .ck-border-* classes in candidatekit-theme.css
     - current section gets a subtle accent tint
     - future sections render dimmed but stay editable */

/* The wrapping FluentCard. No max-width, so it matches the strip card's
   full-page width and the page reads as one coherent column rather than
   a narrow follow-up. */
.status-timeline-card[b-5c53byuk3q] {
}

/* Section grid. Fixed two columns above 720px (one row per pair of
   sequential stages: Applied|PhoneScreen, Interview|Offer, Accepted|gap).
   Collapses to one column below 720px to keep things readable down to
   the 320px floor. align-items: stretch (the default) makes both items
   in a row share the row's max height, which is what equalises sibling
   textareas. */
.stage-card-grid[b-5c53byuk3q] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 8px;
}

@media (max-width: 720px) {
    .stage-card-grid[b-5c53byuk3q] {
        grid-template-columns: 1fr;
    }
}

.stage-card[b-5c53byuk3q] {
    /* Sections sit inside the parent FluentCard now; drop the outer card
       chrome (background, border, radius). The colour-cue left border is
       left to the global .ck-border-* shorthand classes (border-left:
       3px solid var(--ck-stage-*)) so this rule must NOT set border-left
       at all. (A shorthand here would win over the unscoped global rule
       because Razor scoped CSS adds an attribute selector and bumps
       specificity.) */
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 16px 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Anchor target for in-page jumps (#stage-card-Foo). Offset gives
       browsers room above the section so the smooth-scrolled landing
       doesn't crowd the strip / app header. */
    scroll-margin-top: 16px;
}

.stage-card-current[b-5c53byuk3q] {
    /* Subtle accent fill so the current stage stands out without inheriting
       the old card chrome. Border-left handled by the .ck-border-* class
       on the section. */
    background: var(--accent-fill-stealth-rest, var(--neutral-fill-input-rest));
}

.stage-card-future[b-5c53byuk3q] {
    /* Dim the title row (handled below) but keep the textarea fully
       legible; users may want to write reminders ahead of time. */
}

.stage-card-future .stage-card-header[b-5c53byuk3q] {
    color: var(--neutral-foreground-hint);
}

.stage-card-closed[b-5c53byuk3q] {
    border-left: 4px solid var(--ck-warning, #B7791F);
    background: var(--neutral-fill-input-rest);
}

.stage-card-header[b-5c53byuk3q] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.stage-card-status[b-5c53byuk3q] {
    color: var(--neutral-foreground-hint);
    font-size: 0.85rem;
}

/* Pushes the date label and picker over to the right edge of the header.
   flex: 1 on this empty span eats whatever horizontal slack the header
   has; on narrow viewports the header wraps and the spacer collapses. */
.stage-card-date-spacer[b-5c53byuk3q] {
    flex: 1 1 auto;
    min-width: 0;
}

.stage-card-date-label[b-5c53byuk3q] {
    color: var(--neutral-foreground-hint);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Notes textarea: plain <textarea> in the light DOM (the page does not
   use FluentTextArea here because its inner textarea lives in shadow DOM
   and can't be reached for sizing). Two behaviours stack:
     1. field-sizing: content makes the textarea grow with the user's
        content (no scrollbar). Modern CSS, supported in Chromium 123+,
        Safari 18.4+, Firefox 137+.
     2. flex: 1 1 auto inside the section's flex column means that when
        the grid row stretches a shorter sibling section (because its
        partner has a taller textarea), this textarea fills the new
        leftover height — paired textareas end up the same height as
        the taller of the two.
   Visual styling matches the Fluent inputs elsewhere on the page: 1px
   neutral border, 4px radius, 8/12px padding, accent focus ring. */
.stage-card-notes-textarea[b-5c53byuk3q] {
    flex: 1 1 auto;
    width: 100%;
    field-sizing: content;
    min-height: 8rem;
    resize: none;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest, #fff);
    color: var(--neutral-foreground-rest);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    outline: none;
}

.stage-card-notes-textarea[b-5c53byuk3q]::placeholder {
    color: var(--neutral-foreground-hint);
}

.stage-card-notes-textarea:focus[b-5c53byuk3q] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

/* 12 px coloured circle. The dot's background colour is set by
   .ck-bg-applied / .ck-bg-phone / etc. Future-stage dots are rendered
   as outlined rings rather than filled discs, so the eye picks up
   "not there yet" at a glance. */
.stage-card-dot[b-5c53byuk3q] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.stage-card-dot.ck-bg-applied[b-5c53byuk3q]   { background: var(--ck-stage-applied); }
.stage-card-dot.ck-bg-phone[b-5c53byuk3q]     { background: var(--ck-stage-phone); }
.stage-card-dot.ck-bg-interview[b-5c53byuk3q] { background: var(--ck-stage-interview); }
.stage-card-dot.ck-bg-offer[b-5c53byuk3q]     { background: var(--ck-stage-offer); }
.stage-card-dot.ck-bg-accepted[b-5c53byuk3q]  { background: var(--ck-stage-accepted); }

.stage-card-dot-future[b-5c53byuk3q] {
    background: transparent !important;
    border: 2px solid var(--neutral-stroke-rest);
}

.stage-card-dot-closed[b-5c53byuk3q] {
    background: var(--ck-warning, #B7791F);
}

.stage-card-actions[b-5c53byuk3q] {
    margin-top: 4px;
}

/* Pip-click flash. The JS shim (wwwroot/js/status-page.js) toggles this
   class on for 1.5 s. The keyframes pulse the box-shadow accent ring so
   the user sees what they jumped to without disrupting layout. */
.stage-card-flash[b-5c53byuk3q] {
    animation: stage-card-flash-b-5c53byuk3q 1.5s ease-out;
}

@keyframes stage-card-flash-b-5c53byuk3q {
    0%   { box-shadow: 0 0 0 0 var(--accent-fill-rest); }
    20%  { box-shadow: 0 0 0 6px var(--accent-fill-rest); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Reduced-motion users get a static highlight rather than a pulse;
   the flash communicates "you landed here", which colour alone can do. */
@media (prefers-reduced-motion: reduce) {
    .stage-card-flash[b-5c53byuk3q] {
        animation: none;
        box-shadow: 0 0 0 2px var(--accent-fill-rest);
    }
}
/* /Components/Pages/Jobs/ApplicationWorkspace.razor.rz.scp.css */
.workspace-header[b-m5nzccd0oh] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.workspace-header-title[b-m5nzccd0oh] {
    min-width: 0;
    /* min-width: 0 lets the column shrink below its content's
       intrinsic width, so the h1 wraps naturally instead of
       forcing the grid to expand. */
}

.workspace-header-actions[b-m5nzccd0oh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Documents section in the In Progress card. The grid wrapper sizes its
   single column to minmax(0, max-content): all chip rows share the width
   of the widest chip's natural content, so a long filename and a short
   one render the same width without either truncating prematurely. The
   max-width: 100% on the wrapper caps it at the parent so a very long
   filename doesn't push the card sideways. */
.application-doc-chips[b-m5nzccd0oh] {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    gap: 6px;
    max-width: 100%;
}

.application-doc-chip[b-m5nzccd0oh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    /* Each chip stretches to fill the grid cell width. The cell width is
       max-content of the widest chip in the column, so all chips end up
       the same width without explicit pixels. */
}

.application-doc-chip-name[b-m5nzccd0oh] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

/* Secondary text-link affordance for "Move back to Shortlisted" / "Pass
   on this one". Looks like plain body text so the card aesthetic stays
   calm; the click target is signalled by cursor: pointer plus a subtle
   colour-and-underline hover state. Focus-visible adds an accent ring
   so keyboard navigation is discoverable. */
.application-textlink[b-m5nzccd0oh] {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--neutral-foreground-rest);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: color 120ms ease, text-decoration-color 120ms ease;
}

.application-textlink:hover[b-m5nzccd0oh] {
    color: var(--accent-fill-rest);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.application-textlink:focus-visible[b-m5nzccd0oh] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
    border-radius: 2px;
}
/* /Components/Pages/Jobs/Shortlisted.razor.rz.scp.css */
.in-progress-row[b-cra41s2j6s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
}

.in-progress-row-meta[b-cra41s2j6s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Above 600 px we want the meta column on the left and the action group
   on the right. Use CSS Grid with `1fr auto` so the meta column takes
   all remaining space while the actions claim only the width they need.
   A flex-row layout here loses the column-width auction to FluentStack
   and collapses the title to one-word-per-line. */
@media (min-width: 600px) {
    .in-progress-row[b-cra41s2j6s] {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 16px;
    }
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* Direction A: a single 720px centered spine the whole way down. Sections share
   one max-width, one set of side rails, and rely on margin-top + padding-top to
   set rhythm — no width-changing gear-shift between sections. */
.landing[b-ye05lt8pec] {
    display: flex;
    flex-direction: column;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.landing > section[b-ye05lt8pec] {
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.landing-hero[b-ye05lt8pec] {
    padding-top: 72px;
    padding-bottom: 56px;
}

.landing-how[b-ye05lt8pec] {
    margin-top: 64px;
    padding-bottom: 56px;
}

.landing-feature[b-ye05lt8pec] {
    margin-top: 64px;
    padding-bottom: 56px;
}

.landing-form[b-ye05lt8pec] {
    margin-top: 64px;
    padding-top: 40px;
    padding-bottom: 56px;
    border-top: 1px solid var(--ck-neutral-200, #E2E8F0);
    text-align: left;
}

/* ── Eyebrows ──
   One vocabulary across hero ("Closed beta · UK") and section labels ("How it
   works", "Track every application"): coral-600, uppercase, 12px, tracked. */
.landing-eyebrow[b-ye05lt8pec],
.landing-section-eyebrow[b-ye05lt8pec] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ck-coral-600, #993C1D);
    margin: 0 0 16px;
}

/* ── Hero ── */
.landing-hero h1[b-ye05lt8pec] {
    font-size: clamp(2rem, 4.5vw + 1rem, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0;
    color: var(--ck-neutral-900, #0F172A);
}

.landing-lede[b-ye05lt8pec] {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ck-neutral-800, #1E293B);
    margin: 24px 0 0;
    max-width: 600px;
}

.landing-hero .board-mock[b-ye05lt8pec] {
    margin-top: 32px;
}

/* ── How it works ──
   Two-column grid, no card chrome, no icons. Steps prime the feature section
   below; they don't read as a separate panel. */
.landing-how-grid[b-ye05lt8pec] {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 540px) {
    .landing-how-grid[b-ye05lt8pec] {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.landing-step[b-ye05lt8pec] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.landing-step-num[b-ye05lt8pec] {
    font-size: 11px;
    color: var(--ck-coral-400, #D85A30);
    margin: 0;
    line-height: 1;
}

.landing-step-name[b-ye05lt8pec] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ck-neutral-900, #0F172A);
    margin: 0;
    line-height: 1.3;
}

.landing-step-desc[b-ye05lt8pec] {
    font-size: 14px;
    color: var(--ck-neutral-600, #475569);
    margin: 0;
    line-height: 1.55;
}

/* ── Feature ("Track every application") ── */
.landing-feature h2[b-ye05lt8pec] {
    font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    color: var(--ck-neutral-900, #0F172A);
}

.landing-feature-lede[b-ye05lt8pec] {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ck-neutral-800, #1E293B);
    margin: 16px 0 0;
    max-width: 600px;
}

.landing-feature .board-mock[b-ye05lt8pec] {
    margin-top: 32px;
}

.landing-feature-points[b-ye05lt8pec] {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.landing-feature-points li[b-ye05lt8pec] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ck-neutral-800, #1E293B);
}

.landing-feature-points li[b-ye05lt8pec]::before {
    content: "—";
    flex-shrink: 0;
    color: var(--ck-coral-400, #D85A30);
    font-weight: 600;
}

/* ── Board mock ──
   Stylised kanban shared by hero (3 cols) and feature (5 cols). Soft depth via
   a layered shadow rather than a strong border. Decorative — pointer-events
   off so it never intercepts focus. */
.board-mock[b-ye05lt8pec] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    background: var(--ck-neutral-50, #F8FAFC);
    border: 1px solid var(--ck-neutral-200, #E2E8F0);
    border-radius: var(--ck-radius-lg, 12px);
    box-shadow:
        0 24px 48px -32px rgba(15, 23, 42, 0.18),
        0 4px 12px -8px rgba(15, 23, 42, 0.08);
    user-select: none;
    pointer-events: none;
    box-sizing: border-box;
}

.board-mock--lg[b-ye05lt8pec] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* At narrow viewports the columns would otherwise collapse below the
   readability floor. Switch to a flex/scroll layout with fixed-width columns
   so card text wraps naturally to multiple lines instead of truncating. The
   page itself never scrolls horizontally; only the mock does. */
@media (max-width: 600px) {
    .board-mock--lg[b-ye05lt8pec] {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }
    .board-mock--lg .board-mock-col[b-ye05lt8pec] {
        flex: 0 0 140px;
    }
}

@media (max-width: 480px) {
    .board-mock:not(.board-mock--lg)[b-ye05lt8pec] {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }
    .board-mock:not(.board-mock--lg) .board-mock-col[b-ye05lt8pec] {
        flex: 0 0 140px;
    }
}

.board-mock-col[b-ye05lt8pec] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--ck-neutral-200, #E2E8F0);
    border-radius: var(--ck-radius, 8px);
    padding: 10px;
    min-height: 140px;
    box-sizing: border-box;
}

.board-mock--lg .board-mock-col[b-ye05lt8pec] {
    min-height: 160px;
}

.board-mock-col-header[b-ye05lt8pec] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ck-neutral-800, #1E293B);
    padding: 0 0 6px;
    border-bottom: 1px solid var(--ck-neutral-100, #F1F5F9);
    /* Single-line headers keep card baselines aligned across columns. Without
       this, "Phone Screen" wraps to two lines in narrow columns and pushes
       its cards down out of step with single-line columns. */
    min-width: 0;
}

/* Label shrinks/ellipsises before the dot or count are touched. */
.board-mock-col-label[b-ye05lt8pec] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-mock-dot[b-ye05lt8pec] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.board-mock-count[b-ye05lt8pec] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--ck-neutral-400, #94A3B8);
    line-height: 1;
}

.board-mock-card[b-ye05lt8pec] {
    background: #ffffff;
    border: 1px solid var(--ck-neutral-200, #E2E8F0);
    border-radius: var(--ck-radius-sm, 4px);
    padding: 8px 10px;
}

.board-mock-card-title[b-ye05lt8pec] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ck-neutral-900, #0F172A);
    line-height: 1.3;
}

.board-mock-card-meta[b-ye05lt8pec] {
    font-size: 10.5px;
    color: var(--ck-neutral-600, #475569);
    line-height: 1.35;
    margin-top: 2px;
}

/* ── Form ("Request an invite") ──
   Left-aligned within the column. The hairline at the top of the section is
   the only container — no card, no shadow. Form block narrows to 480px so the
   email field doesn't run the full column width. */
.landing-form h2[b-ye05lt8pec] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
    color: var(--ck-neutral-900, #0F172A);
}

.landing-founder[b-ye05lt8pec] {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ck-neutral-600, #475569);
    margin: 16px 0 0;
}

.landing-founder a[b-ye05lt8pec] {
    color: var(--ck-primary-600, #185FA5);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.landing-form-trust[b-ye05lt8pec] {
    font-size: 12px;
    color: var(--ck-neutral-600, #475569);
    line-height: 1.5;
    margin: 24px 0 0;
}

.landing-form-block[b-ye05lt8pec] {
    margin-top: 20px;
    max-width: 480px;
}

.landing-form-success[b-ye05lt8pec] {
    margin-top: 24px;
    max-width: 480px;
}

.landing-consent[b-ye05lt8pec] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    line-height: 1.45;
    cursor: pointer;
    color: var(--ck-neutral-800, #1E293B);
    font-size: 14.5px;
}

.landing-consent input[type="checkbox"][b-ye05lt8pec] {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--ck-primary-600, #185FA5);
}

.landing-consent a[b-ye05lt8pec] {
    color: var(--ck-primary-600, #185FA5);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Submit button ships at min 48×48 via the global app.css touch-target rule;
   this scoped override only widens it to fit the form max-width comfortably. */
.landing-form-block[b-ye05lt8pec]  fluent-button {
    min-width: 160px;
}

/* ── Footer ──
   Centered in the 720px column (deliberate change from the rest of the page,
   which is left-aligned). Hairline above for visual separation from the form. */
.landing-footer[b-ye05lt8pec] {
    max-width: 720px;
    width: 100%;
    margin: 32px auto 0;
    padding: 24px 32px 48px;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid var(--ck-neutral-200, #E2E8F0);
}

.landing-footer-links[b-ye05lt8pec] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
}

.landing-footer-sep[b-ye05lt8pec] {
    color: var(--ck-neutral-400, #94A3B8);
}

.landing-footer-copy[b-ye05lt8pec] {
    margin: 0;
    font-size: 13px;
    color: var(--ck-neutral-600, #475569);
    line-height: 1.45;
}

/* /Components/Pages/Privacy.razor.rz.scp.css */
.privacy[b-0boekrhdx1] {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(16px, 4vw, 48px) clamp(16px, 4vw, 32px);
    line-height: 1.55;
}

.privacy h1[b-0boekrhdx1] {
    font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
    margin: 0 0 4px;
}

.privacy h2[b-0boekrhdx1] {
    font-size: clamp(1.1rem, 1vw + 0.9rem, 1.35rem);
    margin: 32px 0 8px;
}

.privacy p[b-0boekrhdx1],
.privacy ul[b-0boekrhdx1] {
    margin: 0 0 12px;
    max-width: 64ch;
}

.privacy ul[b-0boekrhdx1] {
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.privacy-updated[b-0boekrhdx1] {
    color: var(--neutral-foreground-hint, #666);
    font-size: 0.9rem;
}

.privacy-footer[b-0boekrhdx1] {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-rest, #e5e5e5);
}
/* /Components/Pages/Settings/Criteria.razor.rz.scp.css */
/* Location-score row inputs. The row is wrap:true so on narrow
   viewports the three controls (name / score / remove) each claim
   the full width in turn; `flex-basis` with `min-width:0` lets them
   shrink below their intrinsic width before wrapping, which avoids
   horizontal overflow on a 360 px device. Desktop gets the original
   180 / 80 px fixed widths back via a min-width guard. */
[b-x9emltyos3] .loc-name-field {
    min-width: 0;
    flex: 1 1 180px;
    max-width: 100%;
}

[b-x9emltyos3] .loc-score-field {
    min-width: 0;
    flex: 0 1 80px;
    max-width: 100%;
}

@media (min-width: 600px) {
    [b-x9emltyos3] .loc-name-field {
        flex: 0 0 180px;
    }

    [b-x9emltyos3] .loc-score-field {
        flex: 0 0 80px;
    }
}
/* /Components/Shared/HoneypotField.razor.rz.scp.css */
.ck-honeypot[b-5zlukye53b] {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* /Components/Shared/MentionedTermInput.razor.rz.scp.css */
.tag-input-container[b-0qz62v43lj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tag-input-wrapper[b-0qz62v43lj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    align-items: center;
}

.tag-input-wrapper:focus-within[b-0qz62v43lj] {
    border-color: var(--neutral-stroke-input-focus);
    outline: calc(var(--focus-stroke-width) * 1px) solid var(--accent-stroke-control-focus);
    outline-offset: -1px;
}

.tags-list[b-0qz62v43lj] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Native <input> as the typing surface. See TagInput.razor.css and
   wwwroot/js/tag-input.js for why FluentTextField was unsuitable here. */
.tag-input-native[b-0qz62v43lj] {
    flex: 1;
    min-width: 240px;
    height: calc(var(--base-height-multiplier) * var(--design-unit) * 1px);
    padding: 0 calc(var(--design-unit) * 2px + 1px);
    background: transparent;
    color: var(--neutral-foreground-rest);
    border: none;
    outline: none;
    font: var(--type-ramp-base-font-size) / var(--type-ramp-base-line-height) var(--body-font);
    box-sizing: border-box;
}

.tag-input-native[b-0qz62v43lj]::placeholder {
    color: var(--neutral-foreground-hint);
    opacity: 1;
}

[b-0qz62v43lj] .mentioned-term {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    cursor: default;
    max-width: 100%;
    min-width: 0;
}

/* Clip pre-existing oversize entries to the card width — the remove button
   stays reachable instead of being pushed past the right edge of the viewport. */
[b-0qz62v43lj] .tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Required chips earn a stronger background tint so the eye picks them up
   at a glance — the star alone is the primary signal but pairing it with a
   subtle fill makes scanning a long list of chips faster. The actual class
   emitted by the razor is `tag-badge--required` (combined with .mentioned-term);
   compound selector ties the tint to mentioned-term chips specifically. */
[b-0qz62v43lj] .mentioned-term.tag-badge--required {
    background: var(--accent-fill-rest);
    color: var(--neutral-foreground-on-accent-rest);
}

[b-0qz62v43lj] .tag-star,
[b-0qz62v43lj] .tag-remove {
    padding: 0;
    min-width: 16px;
    height: 16px;
}

[b-0qz62v43lj] .tag-text {
    user-select: none;
}

/* Chip-level focus ring: the chip itself is focusable for keyboard
   star-toggle / remove. Without this, keyboard users can't see where they
   are. Inset shadow rather than outline so it doesn't shift layout. */
[b-0qz62v43lj] .mentioned-term:focus-visible {
    outline: 2px solid var(--accent-stroke-control-focus);
    outline-offset: 2px;
}
/* /Components/Shared/PreferredLocationInput.razor.rz.scp.css */
.tag-input-container[b-w8i4r2we2h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tag-input-wrapper[b-w8i4r2we2h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    align-items: center;
}

.tag-input-wrapper:focus-within[b-w8i4r2we2h] {
    border-color: var(--neutral-stroke-input-focus);
    outline: calc(var(--focus-stroke-width) * 1px) solid var(--accent-stroke-control-focus);
    outline-offset: -1px;
}

.tags-list[b-w8i4r2we2h] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Native <input> as the typing surface — see TagInput.razor.css and
   wwwroot/js/tag-input.js for why FluentTextField was unsuitable. */
.tag-input-native[b-w8i4r2we2h] {
    flex: 1;
    min-width: 240px;
    height: calc(var(--base-height-multiplier) * var(--design-unit) * 1px);
    padding: 0 calc(var(--design-unit) * 2px + 1px);
    background: transparent;
    color: var(--neutral-foreground-rest);
    border: none;
    outline: none;
    font: var(--type-ramp-base-font-size) / var(--type-ramp-base-line-height) var(--body-font);
    box-sizing: border-box;
}

.tag-input-native[b-w8i4r2we2h]::placeholder {
    color: var(--neutral-foreground-hint);
    opacity: 1;
}

[b-w8i4r2we2h] .preferred-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    cursor: default;
    max-width: 100%;
    min-width: 0;
}

/* Clip pre-existing oversize entries to the card width — the remove button
   stays reachable instead of being pushed past the right edge of the viewport. */
[b-w8i4r2we2h] .tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    user-select: none;
}

/* Starred chips earn a stronger background tint so the eye picks them up at
   a glance — pairs with the filled star to make scanning faster. */
[b-w8i4r2we2h] .preferred-location.tag-badge--required {
    background: var(--accent-fill-rest);
    color: var(--neutral-foreground-on-accent-rest);
}

[b-w8i4r2we2h] .tag-star,
[b-w8i4r2we2h] .tag-remove {
    padding: 0;
    min-width: 16px;
    height: 16px;
}

/* Chip-level focus ring: the chip itself is focusable for keyboard
   star-toggle / remove. Without this, keyboard users can't see where they
   are. Outline rather than box-shadow so it's visible against the tinted
   starred background. */
[b-w8i4r2we2h] .preferred-location:focus-visible {
    outline: 2px solid var(--accent-stroke-control-focus);
    outline-offset: 2px;
}
/* /Components/Shared/TagInput.razor.rz.scp.css */
.tag-input-container[b-tpp1887ra9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tag-input-wrapper[b-tpp1887ra9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    align-items: center;
}

.tags-list[b-tpp1887ra9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Native <input> as the typing surface (FluentTextField was unsuitable —
   commit-then-clear racing Blazor's ChangeHandlerAsync; see wwwroot/js/
   tag-input.js header). Styled with Fluent design tokens so it matches
   surrounding FluentTextFields elsewhere on the page. */
.tag-input-native[b-tpp1887ra9] {
    flex: 1;
    min-width: 240px;
    height: calc(var(--base-height-multiplier) * var(--design-unit) * 1px);
    padding: 0 calc(var(--design-unit) * 2px + 1px);
    background: transparent;
    color: var(--neutral-foreground-rest);
    border: none;
    outline: none;
    font: var(--type-ramp-base-font-size) / var(--type-ramp-base-line-height) var(--body-font);
    box-sizing: border-box;
}

.tag-input-native[b-tpp1887ra9]::placeholder {
    color: var(--neutral-foreground-hint);
    opacity: 1;
}

.tag-input-native:focus[b-tpp1887ra9],
.tag-input-native:focus-visible[b-tpp1887ra9] {
    outline: none;
    /* Wrapper carries the focus ring so the chips and input share one
       focus state, which matches FluentTextField's appearance. */
}

.tag-input-wrapper:focus-within[b-tpp1887ra9] {
    border-color: var(--neutral-stroke-input-focus);
    outline: calc(var(--focus-stroke-width) * 1px) solid var(--accent-stroke-control-focus);
    outline-offset: -1px;
}

/* FluentBadge and FluentButton render as child components.
   max-width:100% + the .tag-text overflow rules below clip any pre-existing
   long entry to the card width, keeping the remove button reachable instead
   of letting one giant chip stretch the row off-screen. */
[b-tpp1887ra9] .tag-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    max-width: 100%;
    min-width: 0;
}

[b-tpp1887ra9] .tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

[b-tpp1887ra9] .tag-remove {
    padding: 0;
    min-width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* /Components/Shared/TurnstileWidget.razor.rz.scp.css */
/* Centre the 300×65 Cloudflare widget within whatever form column it sits
   in. Without this it left-aligns against a narrower content edge than the
   inputs above it and reads as a misplaced outlier. The vertical margin
   matches the FluentStack VerticalGap on the surrounding fields. */
.ck-turnstile[b-iyi6bwfwrn] {
    display: flex;
    justify-content: center;
    margin: 0.25rem 0;
}