/* tokens.css — Relio Design System v1 */
:root {
    --font-heading: "Source Serif 4", "Iowan Old Style", Georgia, serif;
    --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

    --fs-h1: 40px;
    --lh-h1: 48px;
    --fs-h2: 28px;
    --lh-h2: 36px;
    --fs-h3: 20px;
    --lh-h3: 28px;
    --fs-body: 16px;
    --lh-body: 24px;
    --fs-small: 14px;
    --lh-small: 20px;
    --fs-caption: 12px;
    --lh-caption: 16px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --numeric-tabular: tabular-nums;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --container-max: 1120px;
    --page-pad-desktop: 40px;
    --page-pad-mobile: 20px;

    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 10px rgba(16, 24, 40, 0.08);
    --shadow: 0 10px 30px rgba(16, 24, 40, 0.10);

    --bg: #F5F6F8;
    --surface: #FFFFFF;
    --surface-2: #F0F2F5;
    --border: #D8DEE6;
    --border-strong: #C5CEDA;
    --text: #1F2933;
    --text-muted: #5B6776;
    --text-subtle: #7D8796;

    --brand-900: #172A3A;
    --brand-800: #1F3A52;
    --brand-700: #2A4B66;
    --brand-600: #335C79;

    --accent-600: #3F7C7A;
    --accent-700: #346866;
    --accent-200: #CFE4E2;
    --accent-100: #E7F2F1;

    /* Attention (action items). Teal is the "confirmed / already in good shape" colour, so an
       action block cannot also be teal — green reading as "do something" is exactly what made the
       Recommended-Next-Step block and the positives panel look swapped. Warm gold draws the eye
       without the enforcement overtone red would carry: nothing here is an adjudicated breach, and
       a page of findings tinted red would read as a penalty notice. --attention-600 is the same
       muted gold as --risk-high, so this is the palette the site already had, not a new hue. */
    --attention-600: #C3A04E;
    --attention-700: #7A5416;
    --attention-200: #EADCBB;
    --attention-50: #FDF6EC;

    --focus-ring: 0 0 0 2px rgba(63, 124, 122, 0.35);

    --risk-low: #2F5B7C;
    --risk-moderate: #3F7C7A;
    --risk-high: #C3A04E;
    --risk-critical: #9A5A3B;

    --risk-low-bg: rgba(47, 91, 124, 0.14);
    --risk-moderate-bg: rgba(63, 124, 122, 0.14);
    --risk-high-bg: rgba(195, 160, 78, 0.18);
    --risk-critical-bg: rgba(154, 90, 59, 0.18);

    --btn-height: 44px;
    --input-height: 44px;

    --card-pad: 24px;
    --card-bg: var(--surface);
    --card-border: 1px solid var(--border);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-sm);

    --gradientbox-w: 168px;
    --gradientbox-h: 240px;
    --gradientbox-radius: 14px;
    --band-sep-dark: rgba(255, 255, 255, 0.18);
    --band-sep-light: var(--border);
}

html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
}

/* The `hidden` attribute has to actually hide. The browser's own rule for it is just
   `[hidden] { display: none }`, so ANY author rule that sets display — `.checkout-waiting
   { display: flex }`, a `.scan-gate__form` row, a scoped component style — silently outranks
   it, and the element stays on screen with nothing in the markup to explain why. That shipped
   once: /scan/upgrade's checkout spinner rendered on page load and looked like a request that
   had hung. Component CSS keeps its display value; this only wins while `hidden` is present,
   which is exactly when nothing should be painted. Do not remove the !important — without it
   a single class selector beats this rule again. */
[hidden] {
    display: none !important;
}

h1 { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-semibold); }
h2 { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); }
h3 { font-family: var(--font-body); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }

.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-subtle); }
.metric { font-variant-numeric: var(--numeric-tabular); }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-md);
}

a {
    color: var(--brand-700);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* FocusOnNavigate programmatically focuses the page h1 (screen-reader announcement); a heading
   isn't interactive, so the :focus-visible ring is noise there — same intent as h1:focus above. */
h1:focus-visible {
    box-shadow: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e52250;
}

.validation-message {
    color: #e52250;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* Global component styles to ensure DS visuals apply consistently */
.home-page {
    display: grid;
    gap: var(--space-5);
    max-width: var(--container-max);
    padding-bottom: var(--space-6);
}

.home-hero {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: start;
}

.home-hero p {
    color: var(--text-muted);
    max-width: 70ch;
}

.hero-badges {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.home-grid,
.forms-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.gradient-wrap {
    display: flex;
    justify-content: center;
}

.form-stack {
    display: grid;
    gap: var(--space-3);
}

.form-stack--spaced {
    gap: var(--space-5);
}

.form-stack input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-stack select {
    width: 100%;
    min-height: var(--input-height);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
}

/* ---- Auth pages (Login / Register / Forgot password / Reset password) ----
   Card chrome lives here globally, not duplicated per-page: ForgotPassword.razor and
   ResetPassword.razor render this same markup but have no paired scoped .razor.css of their
   own, so scoped copies in Login.razor.css/Register.razor.css never reached them. */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: var(--space-8, 4rem);
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-7, 2.5rem);
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.auth-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin: 0;
}

/* Warm one-line welcome under the title. Pulled up toward the title so the pair reads as a
   headline/subhead instead of two sections separated by the card's full flex gap. */
.auth-subline {
    font-size: var(--fs-body);
    color: var(--text-muted);
    margin: calc(-1 * var(--space-3)) 0 0;
}

.auth-intro {
    font-size: var(--fs-body);
    color: var(--text-muted);
    margin: 0;
}

.auth-footer-note {
    font-size: var(--fs-small);
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

.auth-footer-note a {
    color: var(--brand-700);
    text-decoration: none;
}

.auth-footer-note a:hover {
    text-decoration: underline;
}

.rl-button {
    min-height: var(--btn-height);
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    transition: 120ms ease;
}

.rl-button--primary { background: var(--brand-800); color: var(--surface); }
.rl-button--primary:hover { background: var(--brand-900); }
.rl-button--secondary { background: var(--surface); color: var(--brand-800); border-color: var(--border-strong); }
.rl-button--secondary:hover { background: var(--surface-2); }
.monitor-finding-status { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.monitor-finding-status__button { border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-muted); padding: .35rem .7rem; min-height: 36px; cursor: pointer; }
.monitor-finding-status__button.is-active { background: var(--brand-800); border-color: var(--brand-800); color: var(--surface); }
.monitor-finding-status__button:disabled { cursor: wait; opacity: .65; }
.monitor-finding-status__button:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
.rl-button.is-disabled, .rl-button:disabled { opacity: 0.55; pointer-events: none; }
.rl-button__icon { display: inline-flex; }

.rl-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.rl-badge--neutral { background: var(--surface-2); color: var(--text-muted); }
.rl-badge--brand { background: var(--accent-100); color: var(--accent-700); }

.risk-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
}

.risk-badge--low { background: var(--risk-low-bg); color: var(--risk-low); }
.risk-badge--moderate { background: var(--risk-moderate-bg); color: var(--risk-moderate); }
.risk-badge--elevated { background: var(--risk-high-bg); color: var(--risk-high); }
.risk-badge--high { background: var(--risk-high-bg); color: var(--risk-high); }
.risk-badge--critical { background: var(--risk-critical-bg); color: var(--risk-critical); }

.rl-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-pad);
}

.rl-card__header h3 { margin: 0; }
.rl-card__header .caption { margin: var(--space-1) 0 0; }
.rl-card__content { margin-top: var(--space-4); }
.rl-card__actions { margin-top: var(--space-4); display: flex; gap: var(--space-2); }

.metric-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

.metric-row:last-child { border-bottom: none; }
.metric-row__label { font-weight: var(--fw-medium); }
.metric-row__value { text-align: right; }

.risk-list ol {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: var(--space-2);
}

.risk-list .caption { margin-top: var(--space-3); }

.gradient-box {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    width: var(--gradientbox-w);
    min-height: var(--gradientbox-h);
    border-radius: var(--gradientbox-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.gradient-box__bands { display: grid; grid-template-rows: repeat(4, 1fr); }
.gradient-box__band { border-bottom: 1px solid var(--band-sep-dark); }
.gradient-box--light .gradient-box__band { border-bottom-color: var(--band-sep-light); }
.gradient-box__band:last-child { border-bottom: none; }
.gradient-box__band--critical { background: var(--risk-critical); }
.gradient-box__band--high { background: var(--risk-high); }
.gradient-box__band--moderate { background: var(--risk-moderate); }
.gradient-box__band--low { background: var(--risk-low); }

.gradient-box__labels {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    align-items: center;
    gap: var(--space-1);
    background: rgba(23, 42, 58, 0.9);
    color: var(--surface);
    padding: var(--space-2);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}

.gradient-box--light .gradient-box__labels { background: var(--surface); color: var(--text); }
.gradient-box__indicator {
    position: absolute;
    left: calc(100% - 8px);
    transform: translate(-100%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 2px solid var(--brand-900);
}

.form-field { display: grid; gap: var(--space-1); }
.form-field__label { font-weight: var(--fw-medium); }
.form-field__error { color: #9f1239; margin: 0; font-size: var(--fs-caption); }
.form-field__input input,
.form-field__input select,
.form-field__input textarea { width: 100%; min-height: var(--input-height); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); box-sizing: border-box; }
.form-field__input textarea { min-height: 6rem; resize: vertical; }

.toggle-wrap { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.toggle-input { width: 1.125rem; height: 1.125rem; accent-color: var(--accent-600); cursor: pointer; flex-shrink: 0; }
.toggle-label { font-weight: var(--fw-regular); }

@media (max-width: 900px) {
    .home-hero { flex-direction: column; }
}

/* Marketing / landing hero */
.hero-section {
    background: var(--brand-900);
    color: var(--surface);
    padding: var(--space-7) var(--space-5);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.hero-section__content h1 {
    color: var(--surface);
    margin: 0 0 var(--space-3);
}

.hero-section__content p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 var(--space-5);
    max-width: 60ch;
}

.hero-section__scale {
    flex-shrink: 0;
}

.page-title {
    margin: 0 0 var(--space-4);
}

.content-section {
    margin-bottom: var(--space-6);
    /* Prose pages sit on the shared 820px site column, aligned with the header brand
       (also keeps line lengths readable instead of spanning the full 1040px layout). */
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-prose p {
    margin: 0 0 var(--space-4);
}

.content-prose p:last-child {
    margin-bottom: 0;
}

.content-prose ul,
.content-prose ol {
    margin: 0 0 var(--space-4);
    padding-left: 1.5rem;
}

.content-prose li {
    margin-bottom: var(--space-2);
}

@media (max-width: 900px) {
    .hero-section {
        flex-direction: column;
    }
}

/* ── Risk timeframe tabs (3 / 6 / 9 / 12 months) — shared by RelioRisk & Results ── */
.risk-tabs {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.risk-tab {
    padding: var(--space-2) var(--space-4);
    min-width: 4.5rem;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.risk-tab:hover {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border-strong);
}

.risk-tab:active {
    transform: scale(0.98);
}

.risk-tab:focus-visible {
    outline: none;
    border-color: var(--accent-600);
    box-shadow: var(--focus-ring);
}

.risk-tab--active {
    color: var(--brand-900);
    background: var(--accent-100);
    border-color: var(--accent-600);
}

.risk-tab--active:hover {
    background: var(--accent-100);
    border-color: var(--accent-700);
    color: var(--brand-900);
}

/* Risk result layout (shared by RelioRisk & Results) */
.risk-result-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: start;
    margin-top: var(--space-3);
}

.risk-result-gradient {
    flex-shrink: 0;
}

.risk-result-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.risk-cost-heading {
    margin-bottom: var(--space-1);
}

.methodology-link {
    display: inline-block;
    margin-top: var(--space-2);
    font-weight: var(--fw-medium);
}

.urgency-message {
    margin-top: var(--space-4);
    font-style: italic;
}

@media (max-width: 560px) {
    .risk-result-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Elevated cost ratio callout ── */
.risk-elevated-cost-callout {
    background: var(--risk-critical-bg);
    border: 1px solid var(--risk-critical);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
}

.risk-elevated-cost-callout__text {
    margin: 0;
    font-weight: var(--fw-medium);
    color: var(--risk-critical);
    line-height: var(--lh-body);
}

/* ── Current vs. Optimized path comparison ── */
.risk-path-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
}

.risk-path {
    text-align: center;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.risk-path--current { background: var(--risk-high-bg); }
.risk-path--optimized { background: var(--risk-low-bg); }
.risk-path--savings { background: var(--accent-100); }

.risk-path__label {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}

.risk-path__value {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    font-family: var(--font-heading);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .risk-path-comparison { grid-template-columns: 1fr; }
}

/* ── Structural risk flags / Recommendations ── */
.risk-recommendations {
    display: grid;
    gap: var(--space-4);
}

.risk-recommendation {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.risk-recommendation__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.risk-recommendation__category {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.risk-recommendation__savings {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--accent-600);
    white-space: nowrap;
}

.risk-recommendation__observation {
    margin: 0 0 var(--space-2);
    color: var(--text);
    line-height: var(--lh-body);
}

.risk-recommendation__action {
    margin: 0;
    color: var(--text-muted);
    line-height: var(--lh-body);
}

/* ── Search method comparison table ── */
.risk-search-comparison {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.risk-search-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}

.risk-search-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.risk-search-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
}

.risk-search-table tr:last-child td { border-bottom: none; }

.risk-search-table__current {
    background: var(--accent-100);
    font-weight: var(--fw-medium);
}

/* ── Engagement path details ── */
.risk-engagement-details {
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
    background: var(--neutral-50);
    border-radius: var(--radius);
    border: 1px solid var(--neutral-200);
}
.risk-engagement-details__heading {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    margin-bottom: var(--space-2);
    color: var(--neutral-700);
}

/* ── Agency comparison ── */
.risk-agency-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}

.risk-agency-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.risk-agency-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
}

.risk-agency-table tr:last-child td { border-bottom: none; }

.risk-agency-table__total {
    font-weight: var(--fw-semibold);
    background: var(--accent-50, var(--surface-elevated));
}

.risk-agency-verdict {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
}

.risk-agency-verdict__label {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin: 0 0 var(--space-1);
}

.risk-agency-verdict__value {
    font-size: var(--fs-large);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-3);
}

.risk-agency-verdict__value--favors {
    color: var(--risk-low, #16a34a);
}

.risk-agency-verdict__narrative {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── Revenue context ── */
.risk-revenue-context {
    display: flex;
    flex-direction: column;
}

/* ── Data acknowledgments ── */
.risk-acknowledgments {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-2);
    border-radius: var(--radius-md);
}

.risk-acknowledgment {
    margin: 0 0 var(--space-1);
    color: var(--text-muted);
}

.risk-acknowledgment:last-child { margin-bottom: 0; }

/* ── Applicant noise qualitative note ── */
.risk-noise-note {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--risk-moderate_bg, #fff8e1);
    border-left: 3px solid var(--risk-moderate, #f5a623);
    border-radius: var(--radius-md);
}

.risk-noise-note p {
    margin: 0;
    color: var(--text);
}

/* ── Risk form & free results ── */
.risk-free-methodology {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-small);
    color: var(--text-muted);
}

/* ── Tone slider (agency only) ── */
.risk-tone-slider {
    margin-bottom: var(--space-4);
}
.risk-tone-slider__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
    font-size: var(--fs-small);
}
.risk-tone-slider__endpoints {
    display: flex;
    gap: var(--space-4);
    font-size: var(--fs-small);
    color: var(--text-muted);
}
.risk-tone-slider__active {
    color: var(--text-default);
    font-weight: 600;
}
.risk-tone-slider__input {
    width: 100%;
    accent-color: var(--brand-primary, #1a1a2e);
}

.risk-ctas {
    flex-wrap: wrap;
}

/* ── Collapsible results sections (<details>/<summary>) — legacy, used only if we keep accordion ── */
.results-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.results-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    font-family: var(--font-heading);
    line-height: var(--lh-h3);
    color: var(--text);
    user-select: none;
    list-style: none;
}

.results-section__header::-webkit-details-marker {
    display: none;
}

.results-section__header::after {
    content: "›";
    font-size: 20px;
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: var(--space-3);
}

.results-section[open] > .results-section__header::after {
    transform: rotate(90deg);
}

.results-section__body {
    padding: 0 var(--space-5) var(--space-5);
    border-top: 1px solid var(--surface-2);
}

/* ── Share link UI ────────────────────────────────────────────────────────── */
.share-link-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    flex-wrap: wrap;
}

.share-url-field {
    flex: 1;
    min-width: 200px;
    font-size: var(--fs-caption);
    font-family: monospace;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--text-muted);
    cursor: text;
    outline: none;
}

.share-note {
    width: 100%;
    color: var(--text-subtle);
    margin: var(--space-1) 0 0;
}

/* ── Dashboard ─────────────────────────────── */
.job-profile-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: var(--space-4); }
.job-profile-card  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.job-profile-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.job-profile-card__title  { font-size: var(--fs-body); font-weight: var(--fw-semibold); margin: 0; }
.job-profile-card__meta   { margin: var(--space-1) 0 0; }
.job-profile-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Candidate documents */
.candidate-docs { border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: var(--space-1); }
.candidate-docs__upload { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.candidate-docs__upload-label { cursor: pointer; }
.candidate-docs__type-select { padding: var(--space-1) var(--space-2); font-size: var(--fs-caption); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); }
.candidate-docs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.candidate-docs__item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--surface-2); border-radius: var(--radius-md); }
.candidate-docs__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.candidate-docs__name { font-size: var(--fs-caption); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.candidate-docs__meta { font-size: var(--fs-small, 0.75rem); }
.candidate-docs__actions { display: flex; gap: var(--space-1); flex-shrink: 0; }

.stage-badge                   { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.stage-badge--active           { background: var(--risk-moderate-bg); color: var(--risk-moderate); }
.stage-badge--draft            { background: var(--surface-2); color: var(--text-muted); }
.stage-badge--archived         { background: var(--risk-critical-bg); color: var(--risk-critical); }

.filter-bar        { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); align-items: center; }
.dashboard-filter-select { padding: var(--space-2) var(--space-3); font-size: var(--fs-body); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); min-width: 180px; }

.dashboard-skeleton { animation: pulse 1.5s infinite; background: var(--surface-2); border-radius: var(--radius-md); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Wizard shared ──────────────────────────── */
.wizard-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    /* Fieldsets have a browser-default min-inline-size: min-content which can
       break grid and flex layouts. Reset it so the fieldset shrinks correctly
       inside .form-stack (display: grid) and other flex containers. */
    min-inline-size: 0;
}

.wizard-fieldset__legend {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}

.wizard-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.wizard-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-4);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.wizard-choice:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.wizard-choice--active {
    border-color: var(--accent-600);
    background: var(--accent-100);
}

.wizard-choice__title {
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.wizard-choice__desc {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.wizard-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.wizard-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wizard-btn:hover {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border-strong);
}

.wizard-btn--active {
    color: var(--brand-900);
    background: var(--accent-100);
    border-color: var(--accent-600);
}

.wizard-btn--primary {
    color: #fff;
    background: var(--accent-600);
    border-color: var(--accent-600);
}

.wizard-btn--primary:hover {
    background: var(--accent-700);
    border-color: var(--accent-700);
    color: #fff;
}

.wizard-btn--full {
    width: 100%;
}

.wizard-btn--sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-caption);
}

.wizard-btn--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
}

.wizard-btn--ghost:hover {
    background: var(--surface-2);
    color: var(--text);
}

.wizard-btn--danger {
    color: var(--risk-critical);
    background: var(--risk-critical-bg, #FDF0EC);
    border-color: var(--risk-critical);
}

.wizard-btn--danger:hover {
    background: var(--risk-critical);
    color: #fff;
}

.wizard-input-narrow { max-width: 8rem; }
.wizard-input-full   { width: 100%; }

.wizard-textarea {
    width: 100%;
    min-height: 5rem;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: var(--fs-body);
}

.wizard-multi-pick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.wizard-check-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--fs-small);
}

.wizard-review {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Shared landing CTA buttons ──────────────────────────────────────────── */
.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    padding: 0 var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    font-family: var(--font-body);
}

.landing-btn--primary {
    background: var(--surface);
    color: var(--brand-900);
    border-color: var(--surface);
}

.landing-btn--primary:hover {
    background: var(--surface-2);
    border-color: var(--surface-2);
    color: var(--brand-900);
}

.landing-btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.3);
}

.landing-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--surface);
}

.landing-btn--accent {
    background: var(--accent-600);
    color: var(--surface);
    border-color: var(--accent-600);
}

.landing-btn--accent:hover {
    background: var(--accent-700);
    border-color: var(--accent-700);
    color: var(--surface);
}

.landing-btn--sm {
    min-height: 38px;
    padding: 0 var(--space-4);
    font-size: var(--fs-small);
}

.landing-btn--full {
    width: 100%;
}

.landing-btn:disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Override: primary btn on light background uses brand color, not white. */
.landing-section:not(.landing-section--dark) .landing-btn--primary,
.prelaunch-section:not(.prelaunch-section--dark) .landing-btn--primary {
    background: var(--brand-800);
    color: var(--surface);
    border-color: var(--brand-800);
}

.landing-section:not(.landing-section--dark) .landing-btn--primary:hover,
.prelaunch-section:not(.prelaunch-section--dark) .landing-btn--primary:hover {
    background: var(--brand-900);
    border-color: var(--brand-900);
    color: var(--surface);
}

/* ── Shared landing fieldset ─────────────────────────────────────────────── */
.landing-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
}

.landing-fieldset__legend {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Relio Rigor — Styles
   ═══════════════════════════════════════════════════════════════════════════ */

.rigor-screen {
    max-width: var(--container-max);
    margin: 0 auto;
}

.rigor-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.rigor-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

.rigor-timeline__step {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
}

.rigor-timeline__step--done {
    color: var(--text-muted);
    background: var(--surface-2);
}

.rigor-timeline__step--active {
    color: var(--surface);
    background: var(--primary);
    font-weight: var(--fw-semibold);
}

.rigor-timeline__arrow {
    color: var(--text-muted);
    font-size: var(--fs-body);
}

/* Toggle sections */
.rigor-toggle-section {
    padding: var(--space-3) 0;
}

.rigor-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--text);
}

.rigor-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.rigor-conditional-fields {
    margin-top: var(--space-4);
    padding-left: var(--space-5);
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Optional details */
.rigor-optional-details {
    margin-top: var(--space-3);
}

.rigor-optional-summary {
    cursor: pointer;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--primary);
    padding: var(--space-2) 0;
}

.rigor-optional-summary:hover {
    text-decoration: underline;
}

/* Baseline badge */
.rigor-baseline-badge {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    margin-top: var(--space-3);
}

.rigor-baseline-badge--auto {
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.rigor-baseline-badge--loaded {
    background: #E8F5E8;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
}

/* Candidate cards */
.rigor-candidate-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-top: var(--space-5);
    background: var(--surface);
}

.rigor-candidate-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin-bottom: var(--space-4);
}

/* Upload sections */
.rigor-upload-section {
    margin-top: var(--space-3);
}

.rigor-upload-label {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--text);
    margin-bottom: var(--space-1);
}

.rigor-upload-hint {
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.rigor-extraction-status {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin-top: var(--space-2);
    font-style: italic;
}

.rigor-extraction-status--done {
    color: #2E7D32;
}

/* Error */
.rigor-error {
    padding: var(--space-3) var(--space-4);
    background: #FFF3F0;
    border: 1px solid #FFB8A8;
    border-radius: var(--radius-sm);
    color: #C62828;
    font-size: var(--fs-small);
    margin-top: var(--space-4);
}

/* Generating screen */
.rigor-generating {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.rigor-generating__content {
    text-align: center;
}

.rigor-generating__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: rigor-spin 0.8s linear infinite;
    margin: 0 auto var(--space-5);
}

@keyframes rigor-spin {
    to { transform: rotate(360deg); }
}

.rigor-generating__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    color: var(--text);
    margin-bottom: var(--space-3);
}

.rigor-generating__message {
    font-size: var(--fs-body);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.rigor-generating__note {
    color: var(--text-muted);
}

/* Results */
.rigor-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Risk summary card */
.rigor-risk-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.rigor-risk-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.rigor-risk-summary__header h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    color: var(--text);
    margin: 0;
}

.rigor-badge {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-muted);
}

.rigor-risk-summary__body {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.rigor-risk-summary__metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.rigor-risk-summary__explainer {
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: var(--lh-small);
    margin: 0 0 var(--space-4);
}

/* Risk breakdown table (collapsible) */
.rigor-risk-table-wrap {
    margin-top: var(--space-4);
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
}

.rigor-risk-table-wrap > summary {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    cursor: pointer;
    margin-bottom: var(--space-3);
}

.rigor-risk-table-scroll {
    overflow-x: auto;
}

.rigor-risk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.rigor-risk-table th {
    background: var(--surface-2);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-caption);
    color: var(--text-muted);
    white-space: nowrap;
}

.rigor-risk-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.rigor-risk-table__total {
    font-weight: var(--fw-semibold);
}

/* Decision snapshot */
.rigor-snapshot {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rigor-snapshot__item {
    padding: var(--space-4);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.rigor-snapshot__item h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}

.rigor-snapshot__item p {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
}

.rigor-snapshot__item--highlight {
    border-left: 3px solid var(--primary);
}

.rigor-snapshot__item--warning {
    border-left: 3px solid var(--risk-high, #C3A04E);
    background: #FFFBF0;
}

/* Behavioral risks */
.rigor-behavioral-risks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.rigor-behavioral-risk {
    padding: var(--space-4);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.rigor-behavioral-risk__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.rigor-behavioral-risk__name {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
    color: var(--text);
}

.rigor-behavioral-risk__desc {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin: 0;
    line-height: var(--lh-small);
}

/* Severity badges */
.rigor-severity-badge {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rigor-severity-badge--low {
    background: var(--risk-low_bg, #E8F5E8);
    color: var(--risk-low, #2E7D32);
}

.rigor-severity-badge--moderate {
    background: var(--risk-moderate_bg, #FFF8E1);
    color: var(--risk-moderate, #F57F17);
}

.rigor-severity-badge--elevated {
    background: var(--risk-high_bg, #FFF3E0);
    color: var(--risk-high, #E65100);
}

/* Tradeoff matrix */
.rigor-matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rigor-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.rigor-matrix th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    font-weight: var(--fw-semibold);
    color: var(--text);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.rigor-matrix td {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.rigor-matrix__category {
    font-weight: var(--fw-medium);
    color: var(--text);
    white-space: nowrap;
}

.rigor-matrix__score {
    text-align: center;
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    min-width: 48px;
}

.rigor-matrix__score--low { color: var(--risk-low, #2E7D32); }
.rigor-matrix__score--moderate { color: var(--risk-moderate, #F57F17); }
.rigor-matrix__score--elevated { color: var(--risk-high, #E65100); }
.rigor-matrix__score--high { color: var(--risk-high, #E65100); }
.rigor-matrix__score--critical { color: var(--risk-critical, #B71C1C); }

.rigor-matrix__total td {
    font-weight: var(--fw-semibold);
    border-top: 2px solid var(--border-strong);
    padding-top: var(--space-3);
}

/* Confidence badges */
.rigor-confidence-badge {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
}

.rigor-confidence-badge--strong {
    background: #E8F5E8;
    color: #2E7D32;
}

.rigor-confidence-badge--mixed {
    background: #FFF8E1;
    color: #F57F17;
}

.rigor-confidence-badge--limited {
    background: #FFF3E0;
    color: #E65100;
}

/* Interview probes */
.rigor-probes-section {
    margin-bottom: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.rigor-probes-summary {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
    color: var(--text);
}

.rigor-probes-summary:hover {
    background: var(--surface-2);
}

.rigor-probes-list {
    padding: 0 var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rigor-probe {
    padding: var(--space-3);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.rigor-probe__concern {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.rigor-probe__question {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--text);
    margin-bottom: var(--space-2);
}

.rigor-probe__good {
    font-size: var(--fs-small);
    color: var(--text-muted);
    font-style: italic;
}

/* Candidate risk */
.rigor-candidate-risk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.rigor-candidate-risk {
    padding: var(--space-4);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.rigor-candidate-risk h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin: 0 0 var(--space-3);
}

.rigor-candidate-risk__overlay {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--risk-high, #E65100);
    margin: 0 0 var(--space-2);
}

.rigor-candidate-risk__recovery {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}

.rigor-candidate-risk__fit {
    font-size: var(--fs-small);
    color: var(--text);
    margin: 0 0 var(--space-3);
    line-height: var(--lh-small);
}

.rigor-candidate-risk__strengths {
    margin-bottom: var(--space-3);
}

.rigor-candidate-risk__strengths-label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--risk-low, #16A34A);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rigor-candidate-risk__strengths ul {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-5);
}

.rigor-candidate-risk__strengths li {
    font-size: var(--fs-small);
    color: var(--text);
    line-height: var(--lh-small);
    margin-bottom: var(--space-1);
}

.rigor-candidate-risk__positive {
    font-size: var(--fs-small);
    color: var(--risk-low, #16A34A);
    font-style: italic;
    line-height: var(--lh-small);
    margin: 0 0 var(--space-3);
}

.rigor-candidate-risk__confidence {
    font-size: var(--fs-small);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Failure modes */
.rigor-failure-modes {
    margin-bottom: var(--space-4);
}

.rigor-failure-modes h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin: 0 0 var(--space-2);
}

.rigor-failure-modes ul {
    margin: 0;
    padding-left: var(--space-5);
}

.rigor-failure-modes li {
    font-size: var(--fs-small);
    color: var(--text);
    line-height: var(--lh-small);
    margin-bottom: var(--space-2);
}

/* Executive Summary */
.rigor-exec-summary {
    background: #172A3A;
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
    color: #fff;
}

.rigor-exec-summary__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--fs-small);
    color: #8AACBE;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.rigor-exec-summary__blurbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.rigor-exec-summary__blurb {
    background: rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-left: 3px solid #3F7C7A;
}

.rigor-exec-summary__blurb-label {
    font-size: 0.65rem;
    font-weight: var(--fw-semibold);
    color: #8AACBE;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rigor-exec-summary__blurb-value {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: var(--fw-bold);
    color: #fff;
}

/* Structured Pause */
.rigor-structured-pause {
    border: 2px solid #B45309;
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    background: #FFF8E1;
    color: var(--text);
}

.rigor-structured-pause strong {
    display: block;
    font-size: var(--fs-small);
    color: #B45309;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
}

.rigor-structured-pause p {
    font-size: var(--fs-small);
    color: var(--text);
    margin: 0;
    line-height: var(--lh-small);
}

/* What We're Seeing */
.rigor-what-seeing {
    line-height: 1.5;
}

.rigor-what-seeing ul {
    margin: 0;
    padding-left: var(--space-5);
}

.rigor-what-seeing li {
    font-size: var(--fs-small);
    color: var(--text);
    margin-bottom: var(--space-2);
    line-height: 1.6;
}

/* Before You Issue the Offer */
.rigor-before-offer {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rigor-before-offer__scenario {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    border-left: 3px solid var(--accent);
}

.rigor-before-offer__scenario h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin: 0 0 var(--space-2);
}

.rigor-before-offer__scenario ul {
    margin: 0;
    padding-left: var(--space-5);
}

.rigor-before-offer__scenario li {
    font-size: var(--fs-small);
    color: var(--text);
    line-height: var(--lh-small);
    margin-bottom: var(--space-1);
}

/* Stage-specific probe headers */
.rigor-probe-header {
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    margin: var(--space-4) 0 var(--space-2);
}

.rigor-probe-header--near-final {
    color: var(--accent);
}

.rigor-probe-header--final {
    color: #B45309;
}

/* Expandable candidate cards — stacked layout, not grid */
.rigor-candidate-risk-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rigor-candidate-risk {
    padding: 0;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.rigor-candidate-risk > summary {
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    list-style: none;
    flex-wrap: wrap;
}

.rigor-candidate-risk > summary::-webkit-details-marker {
    display: none;
}

.rigor-candidate-risk > summary::before {
    content: "▸";
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.15s;
    flex-shrink: 0;
}

.rigor-candidate-risk[open] > summary::before {
    transform: rotate(90deg);
}

.rigor-candidate-risk__name {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
    flex-shrink: 0;
}

.rigor-candidate-risk__fit-brief {
    font-size: var(--fs-small);
    color: var(--text-muted);
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rigor-candidate-risk__detail {
    padding: var(--space-2) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border);
}

/* Consistent subsection alignment inside expanded cards */
.rigor-candidate-risk__detail > * {
    max-width: 100%;
}

.rigor-candidate-risk__detail .rigor-matrix-scroll,
.rigor-candidate-risk__detail .rigor-probes-list,
.rigor-candidate-risk__detail .rigor-failure-modes,
.rigor-candidate-risk__detail .rigor-candidate-risk__strengths,
.rigor-candidate-risk__detail .rigor-candidate-risk__confidence {
    margin-bottom: var(--space-3);
}

.rigor-matrix--single {
    width: 100%;
    margin-top: var(--space-3);
}

.rigor-matrix__rationale {
    font-size: var(--fs-small);
    color: var(--text-muted);
    max-width: 40ch;
}

/* CTAs */
.rigor-ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-5) 0;
}

/* Governance footer */
.rigor-governance {
    padding: var(--space-5);
    background: var(--surface-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.rigor-governance__main {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin: 0 0 var(--space-3);
    line-height: var(--lh-small);
}

.rigor-governance__details {
    margin-top: var(--space-2);
}

.rigor-governance__details summary {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    cursor: pointer;
}

.rigor-governance__details ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}

.rigor-governance__details li {
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: var(--lh-small);
    margin-bottom: var(--space-1);
}

/* Thought Partner Ponderings */
.rigor-ponderings {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rigor-pondering {
    margin: 0;
    padding: var(--space-4);
    padding-left: calc(var(--space-4) + 3px);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--risk-low, #16A34A);
}

.rigor-pondering__question {
    font-size: var(--fs-body);
    font-style: italic;
    color: var(--text);
    line-height: var(--lh-body);
    margin: 0 0 var(--space-2);
}

.rigor-pondering__category {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════
   CHAT INTERFACE
   ═══════════════════════════════════════ */

/* Base message shell — shared by user + assistant variants */
.chat-message {
    display: flex;
    max-width: 100%;
}

/* User bubble — right-aligned */
.chat-message--user {
    justify-content: flex-end;
}

/* Assistant message — left-aligned with avatar */
.chat-message--assistant {
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-3);
}

/* Avatar circle used by assistant message + ThinkingIndicator row */
.chat-message__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-600);
    color: var(--surface);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: var(--fw-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

/* Card wrapper — for the RiskSummaryCard embedded in assistant messages */
.chat-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
    margin-top: var(--space-3);
    max-width: 520px;
    box-shadow: var(--shadow-sm);
}

.chat-card__header {
    padding: var(--space-4) var(--space-5);
    background: var(--brand-900);
    color: var(--surface);
}

.chat-card__body {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* "How was this calculated?" collapsible footer */
/* ── Show Me The Math panel ─────────────────────────────────────── */
.show-math {
    margin-top: 0.5rem;
    border: 1px solid #e5e4e0;
    border-radius: 8px;
    background: #fafaf8;
    overflow: hidden;
}

.show-math .show-math__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3F7C79;
    padding: 0.625rem 1rem;
    list-style: none;
    transition: background 0.15s;
}

.show-math .show-math__toggle:hover {
    background: #f0efec;
}

.show-math .show-math__toggle::-webkit-details-marker {
    display: none;
}

.show-math .show-math__toggle::before {
    content: '\25B6';
    font-size: 0.5rem;
    color: #3F7C79;
    transition: transform 0.2s;
}

.show-math[open] .show-math__toggle::before {
    transform: rotate(90deg);
}

/* Input area bar at bottom of chat */
.chat-input-area {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border);
    background: var(--bg);
}

/* Text input inside chat */
.chat-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    resize: none;
    outline: none;
}

.chat-input::placeholder {
    color: var(--text-subtle);
    font-style: italic;
    transition: opacity 0.3s ease;
}

/* Send button */
.chat-send-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--accent-600);
    color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.chat-send-btn:hover {
    background: var(--accent-700);
}

.chat-send-btn:disabled {
    background: var(--surface-2);
    color: var(--text-subtle);
    cursor: not-allowed;
}

/* Confidence indicator dots */
.confidence-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: var(--space-1);
    flex-shrink: 0;
}

.confidence-dot--blue   { background: var(--risk-low); }
.confidence-dot--orange { background: var(--risk-high); }

/* Savings Quality badges */
.savings-quality-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    white-space: nowrap;
}

.savings-quality-badge--likelyrealssavings,
.savings-quality-badge--likelyrealsavings {
    background: var(--risk-low-bg);
    color: var(--risk-low);
}

.savings-quality-badge--mixed {
    background: var(--risk-high-bg);
    color: var(--risk-high);
}

.savings-quality-badge--likelydeferredcost {
    background: var(--risk-critical-bg);
    color: var(--risk-critical);
}

/* Chat card subtitle text */
.chat-card__subtitle {
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    margin-left: auto;
}

/* Freeze analysis card */
.freeze-card__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.freeze-card__metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.freeze-card__metric--highlight {
    grid-column: 1 / -1;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.freeze-card__metric-label {
    font-size: var(--fs-small);
    color: var(--text-muted);
}

.freeze-card__metric-value {
    font-size: 18px;
    font-weight: var(--fw-semibold);
}

.freeze-card__metric-value--positive { color: var(--risk-low); }
.freeze-card__metric-value--negative { color: var(--risk-critical); }

.freeze-card__crossover {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--risk-high-bg);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--fs-small);
}

.freeze-card__crossover-label {
    font-weight: var(--fw-semibold);
    display: block;
    margin-bottom: 4px;
}

.freeze-card__detail {
    margin-top: var(--space-2, 8px);
    font-size: var(--fs-small);
    color: var(--text-muted);
}

/* Workforce comparison table */
.workforce-comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.workforce-comp-table th {
    text-align: left;
    padding: var(--space-2, 8px) var(--space-3);
    border-bottom: 2px solid var(--border);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.workforce-comp-table td {
    padding: var(--space-2, 8px) var(--space-3);
    border-bottom: 1px solid var(--border);
}

.workforce-comp-table__lowest {
    background: var(--risk-low-bg);
}

.workforce-comp-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--risk-low-bg);
    color: var(--risk-low);
    margin-left: 6px;
    font-weight: var(--fw-medium);
}

/* Delay curve table */
.delay-curve-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.delay-curve-table th {
    text-align: left;
    padding: var(--space-2, 8px) var(--space-3);
    border-bottom: 2px solid var(--border);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.delay-curve-table td {
    padding: var(--space-2, 8px) var(--space-3);
    border-bottom: 1px solid var(--border);
}

.delay-curve__accumulated {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--risk-high-bg);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--fs-small);
}

/* Sensitivity list */
.sensitivity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: sensitivity;
}

.sensitivity-list__item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    counter-increment: sensitivity;
}

.sensitivity-list__item:last-child { border-bottom: none; }

.sensitivity-list__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
}

.sensitivity-list__name {
    font-weight: var(--fw-semibold);
}

.sensitivity-list__name::before {
    content: counter(sensitivity) ". ";
    color: var(--text-muted);
}

.sensitivity-list__delta {
    font-size: var(--fs-small);
    color: var(--risk-high);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.sensitivity-list__range {
    display: flex;
    gap: var(--space-4);
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin-top: 4px;
}

/* Role readiness card */
.readiness-card__rating {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.readiness-card__badge {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 999px;
    font-weight: var(--fw-semibold);
    font-size: 16px;
}

.readiness-card__rating--strong .readiness-card__badge {
    background: var(--risk-low-bg);
    color: var(--risk-low);
}

.readiness-card__rating--mixed .readiness-card__badge {
    background: var(--risk-high-bg);
    color: var(--risk-high);
}

.readiness-card__rating--weak .readiness-card__badge {
    background: var(--risk-critical-bg);
    color: var(--risk-critical);
}

.readiness-card__summary {
    font-size: var(--fs-small);
    color: var(--text-muted);
    display: flex;
    gap: var(--space-3);
}

.readiness-card__signals {
    list-style: none;
    padding: 0;
    margin: 0;
}

.readiness-card__signal {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-small);
}

.readiness-card__signal:last-child { border-bottom: none; }

.readiness-card__signal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.readiness-card__signal--critical .readiness-card__signal-dot { background: var(--risk-critical); }
.readiness-card__signal--warning .readiness-card__signal-dot { background: var(--risk-high); }
.readiness-card__signal--info .readiness-card__signal-dot { background: var(--risk-low); }

.readiness-card__signal-desc {
    display: block;
    font-weight: var(--fw-medium);
}

.readiness-card__signal-impact {
    display: block;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Saves Now vs Costs Later card */
.sncl-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.sncl-column__title {
    font-size: 13px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 var(--space-2, 8px) 0;
    padding-bottom: var(--space-2, 8px);
    border-bottom: 2px solid var(--border);
}

.sncl-column--saves .sncl-column__title { border-bottom-color: var(--risk-low); }
.sncl-column--costs .sncl-column__title { border-bottom-color: var(--risk-critical); }

.sncl-column__items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sncl-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: var(--fs-small);
    gap: var(--space-2, 8px);
}

.sncl-item__label { flex: 1; }

.sncl-item__severity {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    margin-left: 4px;
}

.sncl-item__severity--high { background: var(--risk-critical-bg); color: var(--risk-critical); }
.sncl-item__severity--medium { background: var(--risk-high-bg); color: var(--risk-high); }
.sncl-item__severity--low { background: var(--risk-low-bg); color: var(--risk-low); }

.sncl-item__amount {
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.sncl-item__amount--positive { color: var(--risk-low); }
.sncl-item__amount--negative { color: var(--risk-critical); }
.sncl-item__amount--qualitative { color: var(--text-muted); font-weight: 400; font-style: italic; }

.sncl-column__total {
    margin-top: var(--space-2, 8px);
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
}

.sncl-net {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border-radius: var(--radius-sm, 8px);
}

.sncl-net__label {
    font-weight: var(--fw-semibold);
}

.sncl-net__value {
    font-size: 18px;
    font-weight: var(--fw-semibold);
}

.sncl-net__value--positive { color: var(--risk-low); }
.sncl-net__value--negative { color: var(--risk-critical); }

/* Metric cell helpers */
.metric { text-align: right; font-variant-numeric: tabular-nums; }
.metric--positive { color: var(--risk-low); }
.metric--negative { color: var(--risk-critical); }

/* Show Me The Math — formula + body + sections */
.show-math .show-math__formula-wrap {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e5e4e0;
    border-bottom: 1px solid #e5e4e0;
    background: white;
}

.show-math .show-math__formula {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8125rem;
    color: #1a1a18;
    line-height: 1.5;
    margin-top: 0.375rem;
}

.show-math .show-math__body {
    padding: 0.5rem 1rem 0.75rem;
}

.show-math .show-math__section {
    padding: 0.5rem 0;
}

.show-math .show-math__section + .show-math__section {
    border-top: 1px solid #f4f3f0;
}

.show-math .show-math__section-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9b9b96;
    margin-bottom: 0.375rem;
}

.show-math .show-math__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.show-math .show-math__list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.1875rem 0;
    font-size: 0.8125rem;
    color: #1a1a18;
    line-height: 1.4;
}

.show-math .show-math__list li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3F7C79;
    flex-shrink: 0;
    margin-top: 0.4em;
}

.show-math .show-math__list--muted li {
    color: #6b6b67;
}

.show-math .show-math__list--muted li::before {
    background: #c8c7c2;
}

.show-math .show-math__callout {
    padding: 0.5rem 0.75rem;
    background: white;
    border: 1px solid #e5e4e0;
    border-left: 3px solid #3F7C79;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #1a1a18;
    line-height: 1.5;
}

.show-math .show-math__note {
    font-size: 0.8125rem;
    color: #6b6b67;
    line-height: 1.5;
    margin: 0;
}

/* ── Chat message tables ───────────────────────────────────────── */
.chat-table-wrap {
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid #e5e4e0;
    border-radius: 10px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.chat-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.chat-table thead {
    background: #f8f8f6;
}

.chat-table th {
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b6b67;
    border-bottom: 1px solid #e5e4e0;
    white-space: nowrap;
}

.chat-table th:first-child {
    border-top-left-radius: 10px;
}

.chat-table th:last-child {
    border-top-right-radius: 10px;
}

.chat-table td {
    padding: 0.625rem 1rem;
    color: #1a1a18;
    border-bottom: 1px solid #f4f3f0;
    vertical-align: top;
}

.chat-table td:first-child {
    font-weight: 500;
    color: #1a1a18;
}

.chat-table tbody tr:last-child td {
    border-bottom: none;
}

.chat-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.chat-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.chat-table tbody tr:hover {
    background: #fafaf8;
}

/* Numbers in tables — right-align dollar amounts */
.chat-table td strong {
    color: #3F7C79;
    font-weight: 600;
}

/* Risk summary card */
.risk-summary__headline {
    text-align: center;
    margin-bottom: var(--space-3);
}

.risk-summary__tdc {
    font-size: 28px;
    font-weight: var(--fw-semibold);
    display: block;
}

.risk-summary__source {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-top: 4px;
}

.risk-summary__components {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.risk-summary__component {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    background: var(--surface-2);
    border-radius: var(--radius-sm, 8px);
}

.risk-summary__component-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.risk-summary__component-value {
    font-size: 16px;
    font-weight: var(--fw-semibold);
    display: flex;
    align-items: center;
    gap: 4px;
}

.risk-summary__controllable {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--risk-low-bg);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--fs-small);
    text-align: center;
}

.risk-summary__acknowledgments {
    margin-top: var(--space-3);
    font-size: var(--fs-small);
    color: var(--text-muted);
    font-style: italic;
}

.risk-summary__revenue {
    margin-top: var(--space-2, 8px);
    font-size: var(--fs-small);
    color: var(--text-muted);
}

/* Accuracy notice */
.chat-accuracy-notice {
    padding: 0 var(--space-4);
    font-size: 12px;
    color: var(--text-muted);
}

.chat-accuracy-notice summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-2, 8px) 0;
}

.chat-accuracy-notice summary::-webkit-details-marker { display: none; }

.chat-accuracy-notice__icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.chat-accuracy-notice__expanded {
    padding: 0 0 var(--space-3) 20px;
    line-height: 1.5;
}

/* ── Blog post shared styles (used across all /blog/* pages) ── */
.blog-post {
    max-width: 720px;
}

.blog-post__header {
    margin-bottom: var(--space-7);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-5);
}

.blog-post__header h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

.blog-post__meta {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.blog-post__body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-primary);
}

.blog-post__body h2 {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 600;
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.blog-post__body p {
    margin-bottom: var(--space-4);
}

.blog-post__body ul,
.blog-post__body ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-5);
}

.blog-post__body li {
    margin-bottom: var(--space-2);
}

.blog-post__body strong {
    font-weight: 600;
}

.blog-post__sources {
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.blog-post__sources p {
    margin-bottom: var(--space-1);
}

.blog-post__cta {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    text-align: center;
}

.blog-post__cta p {
    font-size: 1.0625rem;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.blog-post__back {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: var(--space-5);
}

.blog-post__back:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.btn-primary {
    display: inline-block;
    background: var(--brand-700);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s;
}

.btn-primary:hover {
    background: var(--brand-800);
    color: #fff;
    text-decoration: none;
}

/* ── DPA / data processing table (used on /dpa and /security) ── */
.dpa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: var(--space-4) 0 var(--space-5);
}

.dpa-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.dpa-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.5;
}

.dpa-table tr:last-child td {
    border-bottom: none;
}

.dpa-notice {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Thinking status message */
.thinking-status {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin-top: 6px;
    font-style: italic;
}

/* ── Front-door tool pages (/tools/*) ─────────────────────────────── */
.tool-page {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--space-7) var(--page-pad-mobile) var(--space-8);
}
@media (min-width: 768px) { .tool-page { padding-left: var(--page-pad-desktop); padding-right: var(--page-pad-desktop); } }
.tool-page__header { margin-bottom: var(--space-6); }
.tool-page__title { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text); margin: 0 0 var(--space-3); }
.tool-page__sub { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); margin: 0; }

.tool-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}
.tool-form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 600px) { .tool-form__row { grid-template-columns: repeat(3, 1fr); } }
.tool-form__field { display: flex; flex-direction: column; gap: var(--space-1); }
.tool-form__label { font-size: var(--fs-small); color: var(--text-muted); font-weight: var(--fw-medium); }
.tool-form__input, .tool-form__select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: var(--fs-body);
    font-family: var(--font-body);
    background: var(--surface);
    color: var(--text);
}
.tool-form__input:focus, .tool-form__select:focus { outline: 2px solid var(--accent-600); outline-offset: 1px; }
.tool-form__advanced { margin: 0 0 var(--space-4); }
.tool-form__advanced > summary { cursor: pointer; font-size: var(--fs-small); color: var(--accent-700); font-weight: var(--fw-medium); margin-bottom: var(--space-3); }
.tool-form__btn {
    background: var(--accent-600);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 12px 28px;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}
.tool-form__btn:hover { background: var(--accent-700); }
.tool-form__btn:disabled { opacity: 0.6; cursor: progress; }
.tool-form__error { color: #B42318; font-size: var(--fs-small); margin: var(--space-3) 0 0; }
.tool-result { margin-top: var(--space-5); }

/* ── Shared score/zone visual language for rubric & capacity cards ── */
.hc-score, .rr-score, .awr-score, .sr-score { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.hc-score__num, .rr-score__num, .awr-score__num, .sr-score__num {
    font-size: 44px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; color: var(--text);
}
.hc-score__max, .rr-score__max, .awr-score__max, .sr-score__max { font-size: 18px; color: var(--text-subtle); }
.hc-score__rating, .rr-score__rating, .awr-score__rating, .sr-score__rating { font-weight: var(--fw-semibold); }
.hc-score__zone, .awr-score__zone, .sr-score__zone { font-size: var(--fs-small); margin-top: 2px; }

/* Zone / rating colors */
.hc-score--strong, .rr-score--strong, .awr-score--low, .sr-score--strong { color: var(--accent-700); }
.hc-score--mixed, .rr-score--mixed, .awr-score--moderate, .sr-score--mixed { color: #B25E09; }
.hc-score--weak, .rr-score--weak, .awr-score--high, .awr-score--critical, .sr-score--weak { color: #B42318; }
.hc-zone--sustainable { color: var(--accent-700); }
.hc-zone--amber { color: #B25E09; }
.hc-zone--red, .hc-zone--crisis { color: #B42318; }

.hc-metrics, .sr-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.hc-metric { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-3); text-align: center; }
.hc-metric__val { display: block; font-size: var(--fs-h3); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--text); }
.hc-metric__label { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
.hc-assessment { margin: 0 0 var(--space-2); color: var(--text); }
.hc-timeline { margin: 0 0 var(--space-4); font-size: var(--fs-small); }
.hc-timeline--ok { color: var(--accent-700); }
.hc-timeline--risk { color: #B42318; }

.hc-flags, .rr-list, .awr-checkpoints, .sr-fixes { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.hc-flag, .rr-list li, .awr-checkpoints li, .sr-fixes li {
    background: #FEF3F2; border-left: 3px solid #F0A09A; border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3); font-size: var(--fs-small); color: var(--text);
}
.hc-options, .sr-dims, .awr-stages { display: flex; flex-direction: column; gap: var(--space-2); }
.hc-options__title, .sr-dims__title, .awr-stages__title, .rr-section__title {
    font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-muted); margin-bottom: var(--space-1);
}
.hc-option { display: grid; grid-template-columns: auto auto 1fr; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.hc-option__name { font-weight: var(--fw-medium); }
.hc-option__cost { font-variant-numeric: tabular-nums; color: var(--accent-700); }
.hc-option__desc { color: var(--text-muted); font-size: var(--fs-small); }

/* Tool-form checkboxes (shared across role-risk / ai-workflow-risk / systems-readiness) */
.tool-checks { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.tool-check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-small); color: var(--text); cursor: pointer; }
.tool-check input { margin-top: 2px; accent-color: var(--accent-600); }
.tool-select-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }

/* Role Risk card */
.rr-score__meta { display: flex; flex-direction: column; gap: 2px; }
.rr-readytag { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.rr-readytag--yes { color: var(--accent-700); }
.rr-readytag--no { color: #B42318; }
.rr-comp { margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--text); background: var(--surface-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.rr-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.rr-list li { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--fs-small); }
.rr-fix { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-small); }

/* AI workflow risk + systems readiness — per-stage/dimension map + pills */
.awr-map { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.awr-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.awr-row__label { font-size: var(--fs-small); color: var(--text); }
.awr-pill, .sr-pill--strong, .sr-pill--mixed, .sr-pill--weak, .sr-pill--na {
    font-size: var(--fs-caption); font-weight: var(--fw-semibold); padding: 2px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.awr-pill--none { background: var(--surface-2); color: var(--text-subtle); }
.awr-pill--low, .sr-pill--strong { background: #E6F4F1; color: var(--accent-700); }
.awr-pill--moderate, .sr-pill--mixed { background: #FDF0E3; color: #B25E09; }
.awr-pill--high, .awr-pill--critical, .sr-pill--weak { background: #FEF3F2; color: #B42318; }
.sr-pill--na { background: var(--surface-2); color: var(--text-subtle); }
.awr-checkpoints, .sr-fixes { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.sr-fixes { list-style: decimal; padding-left: var(--space-5); }
.awr-checkpoints li { background: #E6F4F1; border-left: 3px solid var(--accent-600); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--fs-small); }
.sr-fixes li { font-size: var(--fs-small); padding: 2px 0; }

/* ============ Blazor error UI ============ */
/* The placeholder div every layout renders. Hidden by default — blazor.web.js sets
   display:block on it only when the circuit hits a real unhandled error. These rules
   originally lived in MainLayout.razor.css, deleted with the Bootstrap cleanup; they
   must stay global or the banner shows permanently on every page. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    background: var(--surface);
    color: var(--text);
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 -1px 2px rgba(16, 24, 40, 0.12);
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

#blazor-error-ui .reload {
    color: var(--accent-700);
    font-weight: var(--fw-semibold);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--space-3);
    top: var(--space-2);
    color: var(--text-muted);
}

/* ── Posting-compliance free scan (/scan) ─────────────────────────────────── */
.scan-url-field { flex: 1 1 100%; }
/* Block-level (with a fit-content width so the pill still hugs its text): as inline-flex the chip
   left the submit button sitting beside it on the same line, which read as two peer controls
   instead of a hint above the action. */
.scan-detect { display: flex; width: fit-content; align-items: baseline; gap: var(--space-2); max-width: 100%; margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-caption); line-height: 1.4; }
.scan-detect__glyph { font-weight: var(--fw-semibold); flex: 0 0 auto; }
.scan-detect__text { min-width: 0; }
.scan-detect--supported { background: var(--accent-100); color: var(--accent-700); }
.scan-detect--best { background: var(--surface-2); color: var(--text-muted); }
.scan-detect--not-yet { background: var(--risk-high-bg); color: var(--risk-high); }
/* Systems list on /scan/how-it-works */
.scan-systems { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-4) 0; }
.scan-systems__group { display: flex; flex-direction: column; gap: var(--space-2); }
.scan-systems__heading { font-size: var(--fs-small); font-weight: var(--fw-semibold); margin: 0; }
.scan-systems__note { color: var(--text-muted); font-size: var(--fs-caption); margin: 0; }
.scan-systems__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.scan-systems__chip { padding: 2px var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-caption); background: var(--surface-2); border: 1px solid var(--border); }
.scan-systems__group--supported .scan-systems__chip { background: var(--accent-100); color: var(--accent-700); border-color: transparent; }
.scan-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--fs-caption); color: var(--text-muted); }
.scan-coverage-note { margin-top: var(--space-4); font-size: var(--fs-caption); color: var(--text-muted); }
.scan-links__label { color: var(--text-muted); }
.scan-links__sep { color: var(--border-strong); }
.scan-result { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-6); }
.scan-result__headline h2 { margin: 0 0 var(--space-2); }
.scan-result__source { color: var(--text-muted); font-size: var(--fs-caption); margin: 0; }
.scan-result__meta { color: var(--text-subtle); font-size: var(--fs-caption); margin: var(--space-1) 0 0; }
.scan-result__clean { background: var(--accent-100); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.scan-result__clean p { margin: 0; }
.scan-findings { display: flex; flex-direction: column; gap: var(--space-4); }
.scan-finding { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-5); }
.scan-finding--high { border-left-color: var(--accent-700); }
.scan-finding--medium { border-left-color: var(--accent-600); }
.scan-finding__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); font-size: var(--fs-caption); }
.scan-finding__severity { background: var(--surface-2); color: var(--text-muted); border-radius: var(--radius-md); padding: 2px var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.scan-finding__severity--high { background: var(--accent-100); color: var(--accent-700); }
.scan-finding__enforcing { color: var(--accent-700); font-weight: 600; }
.scan-finding__title { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.scan-finding__summary { margin: 0 0 var(--space-2); }
.scan-finding__evidence { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--fs-caption); }
.scan-finding__fix { margin: 0 0 var(--space-2); }
/* The confidence line sits between the Evidence-reviewed disclosure and the approaches/next-step
   block. Both neighbours are dense, so it needs its own breathing room above and below or it reads
   as a stray caption glued to the evidence list. */
.scan-finding__confidence { margin: var(--space-3) 0; font-size: var(--fs-caption); color: var(--text-muted); }
/* Label on its own line, explanation beneath — the same label/value shape the Recommended Next
   Step block uses. Inline, the two ran together with no separator at all ("High confidenceThe
   candidate-facing source was readable…"), because neither Razor nor the markup put a space
   between the <strong> and the note span. */
.scan-finding__confidence strong { display: block; margin-bottom: var(--space-1); color: var(--text-muted); font-weight: var(--fw-medium); }
.scan-finding__confidence-note { display: block; color: var(--text-muted); }
.scan-finding__confidence-note + .scan-finding__confidence-note { margin-top: var(--space-1); }
.scan-finding__approaches { margin: 0 0 var(--space-2); }
.scan-finding__approaches-label { margin: 0 0 var(--space-1); }
.scan-finding__approaches ul { margin: 0; padding-left: var(--space-5); }
.scan-finding__approaches li { margin-bottom: var(--space-1); color: var(--text-muted); font-size: var(--fs-caption); }
.scan-finding__cure { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--fs-caption); }
.scan-finding__links { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-caption); align-items: baseline; }
.scan-finding__citation { color: var(--text-muted); }
.scan-exposure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.scan-exposure h3 { margin: 0 0 var(--space-3); }
.scan-exposure ul { margin: 0; padding-left: var(--space-5); }
.scan-exposure li { margin-bottom: var(--space-1); }
.scan-exposure__unknown { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--fs-caption); }
/* Spec 06: results-state and section headings layered onto the existing scan markup. */
.scan-result__clean-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 1.1rem; }
.scan-findings__heading { margin: 0 0 var(--space-1); font-family: var(--font-heading); }
.scan-exposure__intro { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-caption); }
.scan-gate { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.scan-gate h3 { margin: 0 0 var(--space-2); }
.scan-gate__form { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.scan-gate__form .tool-form__input { flex: 1 1 260px; }
.scan-gate__done { color: var(--accent-700); font-weight: 600; }
.scan-disclaimers { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.scan-disclaimers p { color: var(--text-muted); font-size: var(--fs-caption); margin: 0 0 var(--space-2); }

/* Positives: the affirmative side of a result — what the reviewed postings already state.
   Teal is the "confirmed good" signal, but it lives on the stat tiles, the heading and the
   all-clear edges — NOT on the panel. .scan-upsell directly below already fills its whole panel
   with --accent-100, so tinting this one too merged the two into a single block and made a
   results section look like part of the paid offer. */
.scan-result__clean-more { margin: var(--space-2) 0 0 !important; color: var(--text-muted); font-size: var(--fs-caption); }
.scan-positives { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.scan-positives__heading { margin: 0 0 var(--space-1); font-family: var(--font-heading); color: var(--accent-700); }
.scan-positives__intro { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--fs-caption); }
.scan-positives__stats { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
@media (min-width: 720px) { .scan-positives__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scan-positive-stat { display: flex; flex-direction: column; gap: var(--space-1); background: var(--accent-100); border: 1px solid var(--accent-200); border-radius: var(--radius-md); padding: var(--space-3); }
.scan-positive-stat__value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--fw-semibold); line-height: 1.1; color: var(--accent-700); }
.scan-positive-stat__label { font-size: var(--fs-caption); color: var(--text-muted); }
/* Says whether the disclosure was required at all, so a low count is not read as a gap. */
.scan-positive-stat__note { margin-top: var(--space-1); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-subtle); }
/* The per-posting list collapses so the monitoring CTA stays within easy reach of the results. */
.scan-positives__details { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.scan-positives__toggle { cursor: pointer; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--brand-800); }
.scan-positives__toggle:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
.scan-positives__details[open] .scan-positives__toggle { margin-bottom: var(--space-3); }
.scan-positives__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.scan-positive { border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); overflow-wrap: anywhere; }
.scan-positive--clear { border-left-color: var(--accent-600); }
/* The all-clear chip always gets its own row under the posting title. Sharing a baseline row with
   space-between made placement depend on title length — short titles pushed the chip to the right
   edge, long ones wrapped it to the left — so the same chip landed in a different place on every
   card in the list. */
.scan-positive__title-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.scan-positive__clear-chip { color: var(--accent-700); font-size: var(--fs-caption); font-weight: var(--fw-semibold); white-space: nowrap; }
.scan-positive__facts { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--fs-caption); color: var(--text-muted); }
.scan-positive__source { color: var(--text-subtle); }
/* A banded posting lists several ranges, which is too long to sit in the wrapping fact row: give it
   the full width so the bands stay readable as one statement. */
.scan-positive__pay-bands { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.scan-positives__cap { margin: var(--space-3) 0 0; font-size: var(--fs-caption); color: var(--text-subtle); }
.scan-positives__note { margin: var(--space-2) 0 0; font-size: var(--fs-caption); color: var(--text-subtle); }

/* Postings stated outside the U.S.: context, not findings. Neutral surface with no severity
   accent, so it never reads as a list of things to go fix. */
.scan-outside-us { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); overflow-wrap: anywhere; }
.scan-outside-us h3 { margin: 0 0 var(--space-2); font-family: var(--font-heading); }
.scan-outside-us__intro { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-small); }
.scan-outside-us__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.scan-outside-us__list li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }
.scan-outside-us__country { font-size: var(--fs-caption); color: var(--text-subtle); }

/* Spent free-scan allowance. Not an error style: nothing failed, the hour's scans are just used. */
.scan-limit { background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent-600); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-4); }
.scan-limit__title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--fs-h3); }
.scan-limit__body { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-small); }
.scan-limit__cta { display: inline-block; text-decoration: none; }

/* The "can't read this ATS?" dead-end affordance: expands in place via native details/summary
   (no JS, stays keyboard-accessible), matching the positives disclosure above. */
.scan-ats-request { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.scan-ats-request__toggle { cursor: pointer; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--brand-800); }
.scan-ats-request__toggle:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
.scan-ats-request__body { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); max-width: 420px; }
.scan-ats-request__intro { margin: 0; color: var(--text-muted); font-size: var(--fs-caption); }
.scan-ats-request__detected { margin: calc(-1 * var(--space-2)) 0 0; color: var(--text-subtle); font-size: var(--fs-caption); }
.scan-ats-request__thanks { margin: 0; color: var(--accent-700); font-size: var(--fs-small); font-weight: var(--fw-medium); }
/* Honeypot: visually hidden but still in the DOM and submittable; bots that auto-fill every field
   trip it. Real visitors never see it. Matches .engine-waitlist__honeypot. */
.scan-ats-request__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── Pay-transparency state pages ─────────────────────────────────────────── */
.state-page__answer { background: var(--accent-100); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); }
.state-page__answer p { margin: 0; }
.state-page__sources { border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-6); color: var(--text-muted); font-size: var(--fs-caption); }
.state-page__cta { margin-top: var(--space-5); }
/* Link from a state page back to the /pay-transparency hub. */
.state-page__siblings { margin-top: var(--space-4); font-size: var(--fs-small); }
/* Jurisdiction lists on the hub, grouped States / Cities. Columns rather than one long list,
   collapsing to one on narrow screens. Global (not scoped) to match the rest of the
   .state-page__* shell. Selectors are prefixed with .content-prose on purpose: `.content-prose ul`
   and `.content-prose li` set bullets, padding and margins at higher specificity than a bare
   class, and would otherwise win. */
.content-prose .state-page__jurisdiction-heading {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: var(--space-5) 0 var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}
.content-prose ul.state-page__jurisdictions {
    columns: 3 170px;
    column-gap: var(--space-6);
    list-style: none;
    padding: 0;
    margin: 0;
}
.content-prose .state-page__jurisdictions li { break-inside: avoid; margin: 0; padding: var(--space-1) 0; }
/* A guide is marked three ways (weight, underline, arrow), never by colour alone. */
.content-prose .state-page__guide-link {
    color: var(--accent-700);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-decoration-color: var(--accent-200);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.content-prose .state-page__guide-link:hover,
.content-prose .state-page__guide-link:focus-visible { text-decoration-color: currentColor; }

/* ── Paid posting monitor (/monitor/{token}) ──────────────────────────────── */
.monitor-nav { margin: var(--space-2) 0 0; font-size: var(--fs-caption); }
.monitor-panel { margin-top: var(--space-5); }
.monitor-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.monitor-row__surface { font-weight: 600; min-width: 110px; }
.monitor-row__url { flex: 1 1 260px; overflow-wrap: anywhere; font-size: var(--fs-caption); }
.monitor-row__remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: var(--fs-caption); text-decoration: underline; }
.monitor-badge { border-radius: var(--radius-md); padding: 2px var(--space-2); font-size: var(--fs-caption); background: var(--surface-2); color: var(--text-muted); }
.monitor-badge--ok { background: var(--accent-100); color: var(--accent-700); }
.monitor-badge--blocked, .monitor-badge--gone { background: #fdf6ec; color: #8a5a00; }
.monitor-new-chip { background: var(--accent-700); color: #fff; border-radius: var(--radius-md); padding: 2px var(--space-2); font-size: var(--fs-caption); font-weight: 600; }
/* Spec 07: shared FindingCard chips, actions, evidence detail, staged progress, and a11y. */
/* Ordinary inline flow, deliberately not flex: as a flex row the name is one unbreakable item, so
   a long job title jumped to its own line and left the label stranded above it, while a short one
   stayed alongside. Placement then depended on title length and no two cards agreed. Inline, the
   label always leads and the name simply wraps under itself; the source is a block, so it always
   starts its own line. */
.scan-finding__posting { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-caption); line-height: var(--lh-small); }
/* The job title is the reader's "which posting do I fix?" anchor, and on a page of cards it is what
   tells one card from the next. It reads at nearly the weight of the finding headline above it:
   same heading face, a size under it, full contrast. Deliberately still a step down, because what
   is wrong with the posting stays the first thing read. */
.scan-finding__posting-name { font-size: 0.95rem; font-weight: var(--fw-semibold); line-height: var(--lh-small); color: var(--text); }
/* A quiet eyebrow, not a label competing with the name it introduces. */
.scan-finding__posting-label { margin-right: var(--space-1); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-subtle); }
.scan-finding__posting-source { display: block; margin-top: var(--space-1); color: var(--text-muted); }
/* The shared card owns its own hierarchy on every surface it renders on. Page-level paragraph rules
   (.landing-section p on the home page) otherwise out-specify the card's caption colours and flatten
   the muted rows into body text, so the home-page example stops matching the real scan card. */
.scan-finding .scan-finding__posting,
.scan-finding .scan-finding__evidence,
.scan-finding .scan-finding__confidence,
.scan-finding .scan-finding__cure { color: var(--text-muted); }
.scan-finding .scan-finding__detected { color: var(--text-subtle); }
.scan-finding__group { background: var(--accent-100); color: var(--accent-700); border-radius: var(--radius-md); padding: 2px var(--space-2); font-weight: 500; }
.scan-finding__status { border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 1px var(--space-2); color: var(--text-muted); }
.scan-finding__status--resolved { background: var(--accent-100); color: var(--accent-700); border-color: var(--accent-600); }
.scan-finding__actions { margin: 0 0 var(--space-2); }
.scan-finding__copy { border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text-muted); padding: .3rem .7rem; min-height: 36px; font-size: var(--fs-caption); cursor: pointer; }
.scan-finding__copy:hover { border-color: var(--accent-600); color: var(--accent-700); }
.scan-finding__copy:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
.scan-finding__evidence-records { margin: 0 0 var(--space-2); }
.scan-finding__evidence-records[open] { margin-bottom: var(--space-3); }
.scan-finding__evidence-records summary { cursor: pointer; }
.scan-finding__evidence-records summary:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
/* Mobile safety: long extracted text and URLs wrap inside cards and audit sections. */
.scan-finding, .scan-exposure { overflow-wrap: anywhere; }
/* C10: detection lifecycle chip, detected-dates line, the distinct Recommended-Next-Step block,
   and low-confidence de-emphasis. Priority leads the meta row; confidence reads as secondary. */
.scan-finding__lifecycle { border-radius: var(--radius-md); padding: 2px var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.scan-finding__lifecycle--new { background: var(--accent-100); color: var(--accent-700); }
.scan-finding__lifecycle--active { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.scan-finding__lifecycle--resolved { background: var(--surface); color: var(--text-subtle); border: 1px solid var(--border); }
.scan-finding__lifecycle--reopened { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent-700); }
.scan-finding__detected { margin: 0 0 var(--space-2); color: var(--text-subtle); font-size: var(--fs-caption); }
.scan-finding__next-step { margin: var(--space-3) 0 var(--space-2); background: var(--attention-50); border: 1px solid var(--attention-200); border-left: 3px solid var(--attention-600); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.scan-finding__next-step-label { margin: 0 0 var(--space-1); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--attention-700); }
.scan-finding__next-step-text { margin: 0; }
/* Low confidence: a dashed left edge signals reduced certainty without graying out the card. */
.scan-finding--low-confidence { border-left-style: dashed; }
/* Where the finding reaches, state by state — the card's only such block. Deliberately quiet: the
   gold callout this replaces announced the precaution louder than the finding itself, and a reader
   scanning a page of cards took the colour to mean the card could be skipped. A thin rule and the
   caption size say "supporting detail" without saying "ignorable", and the labels carry the
   distinction the colour used to. */
.scan-finding__scope { margin: 0 0 var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--border); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.scan-finding__scope-line { margin: 0 0 var(--space-1); color: var(--text-muted); }
.scan-finding__scope-line:last-child { margin-bottom: 0; }
.scan-finding__scope-label { font-weight: var(--fw-semibold); color: var(--text); }
.scan-finding__scope-names { color: var(--text-muted); }
/* The explanation belongs to the names directly above it, so it is set in as a sub-point of them. */
.scan-finding__scope-basis { margin: 0; color: var(--text-subtle); }
.scan-finding__scope-basis--nested { padding-left: var(--space-3); }
@media (max-width: 640px) {
    .scan-finding { padding: var(--space-4); }
    .scan-finding__meta { gap: var(--space-1) var(--space-2); }
    .scan-finding__next-step { padding: var(--space-3); }
}
.scan-result__verified { margin: var(--space-1) 0 0; color: var(--accent-700); font-size: var(--fs-caption); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.monitor-select { flex: 0 1 180px; }
.monitor-history__table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); font-size: var(--fs-caption); }
.monitor-history__table th, .monitor-history__table td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--border); }
.monitor-unreachable { margin-top: var(--space-4); }

/* ── Audit trail rows ────────────────────────────────────────────────────────
   Both Hiring Presence surfaces render their run history through RunAuditRow. It replaced a
   <table>, and the grid here is what keeps that table's one real virtue: the columns still line
   up down the page, so runs stay comparable at a glance, while each row opens on its own to say
   what actually happened. Grid rather than table markup because a <details> cannot span table
   cells, and a native <details> is what makes the disclosure work with no interactivity, no JS,
   and full keyboard and screen-reader support.

   Global, not scoped, for the same reason the rest of the .monitor-* shell is: a scoped sheet
   emits a [b-*] attribute selector, so the second surface to use these class names would silently
   render unstyled. Each surface sets only its own column template below.
   ------------------------------------------------------------------------------------------- */
/* The columns keep a floor so the numbers do not collapse into each other, which means a narrow
   card can run out of room before the mobile stack takes over (media queries match the viewport
   including the scrollbar, so that handover is not exactly where the card's own width runs out).
   Scrolling the trail sideways is what the table it replaced did, and it beats a row that spills
   past the card edge. */
.audit-log { margin-top: var(--space-3); font-size: var(--fs-caption); overflow-x: auto; }
.audit-log__head,
.audit-row__summary { display: grid; gap: var(--space-2); align-items: baseline; padding: var(--space-2); }
.audit-log__head { color: var(--text-subtle); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--border-strong); }
.audit-log--monitor .audit-log__head,
.audit-log--monitor .audit-row__summary { grid-template-columns: minmax(8rem, 1.4fr) minmax(6rem, 1fr) repeat(4, minmax(3rem, 0.7fr)); }
.audit-log--portfolio .audit-log__head,
.audit-log--portfolio .audit-row__summary { grid-template-columns: minmax(8rem, 1.4fr) minmax(6rem, 1fr) minmax(4.5rem, 1fr) repeat(4, minmax(3rem, 0.7fr)); }

.audit-row { border-bottom: 1px solid var(--border); }
.audit-row__summary { cursor: pointer; list-style: none; }
/* The default triangle sits outside the grid and throws the first column out of alignment with
   the header; the caret below is drawn inside the first cell instead. */
.audit-row__summary::-webkit-details-marker { display: none; }
.audit-row__summary:hover { background: var(--surface-2); }
.audit-row__summary:focus-visible { outline: 2px solid var(--accent-600); outline-offset: -2px; }
.audit-row__when { display: flex; align-items: baseline; gap: var(--space-1); font-variant-numeric: tabular-nums; }
.audit-row__when::before { content: "\25B8"; color: var(--text-subtle); transition: transform 120ms ease; }
.audit-row[open] .audit-row__when::before { transform: rotate(90deg); }
.audit-row__status { font-weight: var(--fw-semibold); }
/* Teal is the "completed" signal here, matching the results surfaces; an incomplete run is stated
   in plain text rather than coloured, because it is not a finding about the employer. */
.audit-row__status--succeeded { color: var(--accent-700); }
.audit-row__status--failed { color: var(--text-muted); }
.audit-row__cell { font-variant-numeric: tabular-nums; }
.audit-row__cell-label { display: none; }
/* A grid item will not shrink below its own min-content by default, so the longest column label
   ("No longer detected") propped the whole row open and pushed the last column past the card. */
.audit-log__head > *,
.audit-row__summary > * { min-width: 0; overflow-wrap: anywhere; }

.audit-row__detail { padding: var(--space-3) var(--space-2) var(--space-4) var(--space-5); background: var(--surface-2); }
.audit-row__outcome { margin: 0 0 var(--space-2); color: var(--text); }
.audit-row__error { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.audit-row__facts { margin: 0; display: grid; gap: var(--space-2); }
@media (min-width: 720px) { .audit-row__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.audit-row__fact dt { color: var(--text-subtle); }
.audit-row__fact dd { margin: 0; color: var(--text); }
.audit-row__duration { color: var(--text-subtle); }
.audit-row__unreachable { margin-top: var(--space-3); }
.audit-row__unreachable-label { margin: 0 0 var(--space-1); font-weight: var(--fw-semibold); }
.audit-row__unreachable ul { margin: 0; padding-left: var(--space-4); color: var(--text-muted); }
.audit-log__anchor { scroll-margin-top: var(--space-6); }
.audit-log__anchor.is-highlighted { background: var(--accent-100); }
.audit-log__anchor:focus { outline: none; }

/* Narrow screens: the columns stop being a table and become a labelled stack, so no row is ever
   a line of bare numbers with the header scrolled off. */
@media (max-width: 719px) {
    .audit-log__head { display: none; }
    .audit-log--monitor .audit-row__summary,
    .audit-log--portfolio .audit-row__summary { grid-template-columns: 1fr 1fr; }
    .audit-row__when { grid-column: 1 / -1; }
    .audit-row__cell-label { display: inline; color: var(--text-subtle); margin-right: var(--space-1); }
    .audit-row__detail { padding-left: var(--space-3); }
}
/* ── Shared monitor-surface shell ────────────────────────────────────────────
   The navy hero band, the segmented tab control, the boxed empty states, and the card /
   change-row treatments. These started life scoped to MonitorReport.razor.css; they are global
   now because the Portfolio Monitoring workspace is the same kind of surface and has to read the
   same way. A scoped sheet emits a [b-*] attribute selector, so a second component reusing these
   class names silently fell back to whatever this file said instead, which is precisely how the
   portfolio workspace ended up with plain underline tabs next to the report's segmented control.
   Rules genuinely specific to one page still belong in that page's own scoped sheet.
   ------------------------------------------------------------------------------------------- */

/* Hero: full-bleed navy intro. A horizontally-centered child can bleed to 100vw via this margin
   trick no matter how narrow its container, and the negative top margin cancels .tool-page's own
   top padding, so both surfaces wrap their content in .tool-page. Whatever the reader came to
   look at (the employer under review, the portfolio) is the large serif line; the product name is
   demoted to a small eyebrow above it. */
.monitor-hero {
    width: 100vw;
    box-sizing: border-box;
    margin-left: calc(50% - 50vw);
    margin-top: calc(-1 * var(--space-7));
    margin-bottom: var(--space-2);
    background: var(--brand-900);
    padding: 40px var(--page-pad-desktop) 36px;
    border-bottom: 3px solid var(--accent-600);
}

.monitor-hero__inner { max-width: 820px; margin: 0 auto; }

/* The way back to the subscription chooser, above the eyebrow so it reads as a breadcrumb rather
   than as part of the title block. Global like the rest of this shell: both dashboards render the
   same component inside their hero, so a page-scoped rule would style neither. */
.monitor-hero__back {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-caption);
}

.monitor-hero__eyebrow {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.monitor-hero__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: 1.15;
    margin: 0 0 var(--space-3);
    color: #FFFFFF;
    overflow-wrap: anywhere;
}

.monitor-hero__meta { margin: 0; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.78); }

.monitor-hero__link {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 2px;
}

.monitor-hero__link:hover { text-decoration-color: #FFFFFF; }
.monitor-hero__link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.monitor-hero__dot { margin: 0 var(--space-1); color: rgba(255, 255, 255, 0.5); }

.monitor-hero__alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    width: fit-content;
    max-width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
}

.monitor-hero__alert-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--risk-high);
    color: var(--brand-900);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.monitor-hero__alert-link {
    color: #FFFFFF;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    text-decoration: none;
    white-space: nowrap;
}

.monitor-hero__alert-link:hover { text-decoration: underline; }
.monitor-hero__settings { margin: var(--space-4) 0 0; font-size: var(--fs-caption); }

@media (max-width: 768px) {
    .monitor-hero { padding: 32px var(--page-pad-mobile) 28px; }
}

/* Tabs: a segmented control (grey track, white pill on the active tab) rather than a bare
   underline, so the row reads as one control surface instead of four loose text links. */
.monitor-tabs {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-top: var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
}

.monitor-tabs::-webkit-scrollbar { display: none; }

.monitor-tab {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.monitor-tab:hover { color: var(--text); }

.monitor-tab--active {
    background: var(--surface);
    color: var(--brand-900);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-sm);
}

.monitor-tab:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .monitor-tab { transition: none; }
}

@media (max-width: 480px) {
    .monitor-tab { font-size: var(--fs-caption); padding: var(--space-2); }
}

/* Empty and loading states: warm and boxed, carrying the same visual weight as a populated
   panel, so a surface with nothing to report never reads as a page that failed to load. */
.monitor-loading { padding: var(--space-8) 0; text-align: center; color: var(--text-muted); }

.monitor-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 160px;
    margin-top: var(--space-2);
    padding: var(--space-6) var(--space-5);
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}

.monitor-empty-state--inline { min-height: 96px; margin-top: var(--space-4); }
.monitor-empty-state__text { margin: 0; max-width: 46ch; color: var(--text-muted); }

/* Card modules: a heading that belongs to its card, and a header row that can carry a control
   (a filter, a company picker) opposite the title. */
.monitor-card__title { margin: 0 0 var(--space-4); }
.monitor-summary-card__headline { margin-bottom: var(--space-5); }
.monitor-summary-card__headline h2 { margin: 0 0 var(--space-2); }
.monitor-history-card { margin-bottom: var(--space-5); }

.monitor-history-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.monitor-history-card__header .monitor-card__title { margin-bottom: 0; }
.monitor-history-card__filter { flex-shrink: 0; }

/* Wide tables scroll inside their own strip instead of stretching the page on narrow screens. */
.monitor-table-scroll { overflow-x: auto; margin-top: var(--space-2); }

/* The standing boundary on both paid dashboards. Quiet and compact: a returning customer should
   meet it once per visit, not read past it. It keeps caption size rather than going smaller, since
   the point is that it can still be read; what shrank is how much of it is open at once. */
.rl-disclaimer {
    margin-top: var(--space-6);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    max-width: 68ch;
}

.rl-disclaimer__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-caption);
    line-height: 1.55;
}

.rl-disclaimer__full { margin-top: var(--space-2); }

.rl-disclaimer__full > summary {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    cursor: pointer;
}

.rl-disclaimer__full > summary:hover { color: var(--accent-700); }
.rl-disclaimer__full > summary:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }

.rl-disclaimer__full p {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-caption);
    line-height: 1.55;
}

/* Single-employer executive summary: engine-composed lines above two rollup tables. Global rather
   than scoped because it sits on the report shell alongside the other .monitor-* modules. */
.monitor-exec { margin-bottom: var(--space-5); }
.monitor-exec h2 { margin-top: 0; }
.monitor-exec__heading { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-body); }
.monitor-exec__headlines { margin: var(--space-3) 0 0; padding-left: 1.25rem; }
.monitor-exec__headlines li { margin-bottom: var(--space-2); }

/* Ratios read as figures, not prose: right-aligned and tabular so a column of them lines up. */
.monitor-exec__ratio { font-variant-numeric: tabular-nums; white-space: nowrap; }
.monitor-exec__table { margin-top: var(--space-2); }

.monitor-exec__footnote {
    margin: var(--space-3) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-caption);
}

/* Change feed: a chip-styled type label rather than a plain bold word, on rows that read as a
   list rather than as stacked paragraphs. Each row is a native <details>, so the collapsed line is
   the <summary> and everything below only exists once a reader asks for it. */
.monitor-changes-card__summary { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-caption); }

/* Whose changes these are. A portfolio holds many companies and each holds many postings, so the
   feed states its scope rather than leaving the reader to infer it from the picker beside it. */
.monitor-changes-card__scope { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--fs-caption); }
.monitor-changes-card__scope strong { color: var(--text); }

/* Named controls: "All change types" in an unlabelled box still reads as "all changes, portfolio
   wide", so the select says what it filters. */
.monitor-field__label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.monitor-change-list { display: flex; flex-direction: column; }

.monitor-change { border-bottom: 1px solid var(--border); }
.monitor-change:last-child { border-bottom: none; }

.monitor-change__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    margin: 0 calc(var(--space-2) * -1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    list-style: none;
}

/* The default triangle sits before the chip and pushes the row around as it rotates, so the row
   carries its own marker at the end of the line instead. */
.monitor-change__summary::-webkit-details-marker { display: none; }

.monitor-change__summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: var(--space-2);
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 120ms ease;
}

.monitor-change[open] > .monitor-change__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.monitor-change__summary:hover { background: var(--surface-2); }
.monitor-change__summary:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }

.monitor-change__type {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--accent-100);
    color: var(--accent-700);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
}

/* The posting the row is about carries the row: it is how a reader knows which job this is. */
.monitor-change__subject { font-weight: var(--fw-semibold); }
.monitor-change__when { margin-left: auto; color: var(--text-muted); font-size: var(--fs-caption); }
.monitor-change__delta, .monitor-change__meta { color: var(--text-muted); font-size: var(--fs-caption); }

/* The opened row: indented under its summary so the feed still reads as a list. */
.monitor-change__detail {
    padding: 0 0 var(--space-4) var(--space-3);
    border-left: 2px solid var(--border);
    margin: 0 0 var(--space-2) var(--space-1);
    display: grid;
    gap: var(--space-3);
    max-width: 68ch;
}

.monitor-change__what { margin: 0; }
.monitor-change__means, .monitor-change__recorded, .monitor-change__confirmed { margin: 0; color: var(--text-muted); }

.monitor-change__values { display: grid; gap: var(--space-2); margin: 0; }
.monitor-change__value { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.monitor-change__value dt { color: var(--text-muted); font-size: var(--fs-caption); min-width: 12ch; }
.monitor-change__value dd { margin: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

.monitor-change__finding {
    padding: var(--space-3);
    background: var(--surface-2);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--space-2);
}

.monitor-change__finding p { margin: 0; }
.monitor-change__finding-title { font-weight: var(--fw-semibold); }
.monitor-change__finding-meta { color: var(--text-muted); font-size: var(--fs-caption); }
.monitor-change__finding-list { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-1); }

.monitor-change__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.monitor-change__action {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-700);
    font: inherit;
    font-size: var(--fs-caption);
    text-decoration: underline;
    cursor: pointer;
}

.monitor-change__action:hover { color: var(--brand-800); }
.monitor-change__action:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }

/* A finding card a change row has just jumped to. The ring fades so the eye lands on the right
   card without leaving the page permanently marked up. */
.scan-finding-anchor { scroll-margin-top: var(--space-6); border-radius: var(--radius-lg); }
.scan-finding-anchor:focus { outline: none; }
.scan-finding-anchor.is-highlighted { box-shadow: 0 0 0 2px var(--accent-600); animation: relio-highlight-fade 2.4s ease-out 1s forwards; }

@keyframes relio-highlight-fade { to { box-shadow: 0 0 0 2px transparent; } }

@media (prefers-reduced-motion: reduce) {
    .monitor-change__summary::after { transition: none; }
    .scan-finding-anchor.is-highlighted { animation: none; }
}

.monitor-history__day { margin: var(--space-4) 0 var(--space-1); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.monitor-history__events { margin: 0 0 var(--space-3); padding-left: 1.1rem; display: grid; gap: 2px; color: var(--text-muted); font-size: var(--fs-caption); }
/* Which portfolio the page is showing. The switcher only renders for accounts owning more than
   one; everyone else reads the name off the hero title, so the workspace is never ambiguous about
   whose numbers these are. It sits inside the navy hero band, hence the light-on-dark label. */
.portfolio-org-switch { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.portfolio-org-switch__label { font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.72); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--fw-semibold); }
.portfolio-org-switch select { width: auto; min-width: 14rem; }
.portfolio-org-switch select:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.monitor-list { display: grid; gap: var(--space-4); }
.monitor-list__card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); }
.monitor-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.monitor-list__head h2 { margin: 0; }
.monitor-list__url { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.monitor-list__meta { margin: var(--space-1) 0 0; color: var(--text-subtle); font-size: var(--fs-caption); }
.scan-upsell { background: var(--accent-100); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.scan-upsell h3 { margin: 0 0 var(--space-2); }
.scan-upsell p { margin: 0 0 var(--space-3); }
.scan-upsell__annual { background: var(--surface); color: var(--accent-700); border: 1px solid var(--border-strong); }
.scan-upsell__list { margin: 0 0 var(--space-3); padding-left: 1.1rem; display: grid; gap: var(--space-1); }
.scan-upsell__notice { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--fs-small); }
.scan-upsell__how { margin: var(--space-3) 0 0; font-size: var(--fs-caption); }
/* The alternate route out of the purchase path (free review, or a different careers address):
   available but subordinate to the primary action above it. */
.scan-upsell__alt { margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--text-muted); }

/* C12: Enterprise portfolio workspace - text-style in-panel nav button and small layout helpers. */
.rl-link-button { appearance: none; background: transparent; border: 0; padding: 0; color: var(--accent-700); font: inherit; text-align: left; cursor: pointer; }
.rl-link-button:hover { text-decoration: underline; }
.rl-link-button:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
.portfolio-picker { margin: var(--space-4) 0; }
.portfolio-attention { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.portfolio-attention__item { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }
.portfolio-attention__name { margin: 0 0 var(--space-2); font-weight: var(--fw-semibold); }

/* C7: baseline-front-door results. Metric tiles (PRD 10.1) and the baseline statement panel. */
.scan-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 720px) { .scan-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.scan-metric { display: flex; flex-direction: column; gap: var(--space-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.scan-metric__value { font-family: var(--font-heading); font-size: 1.75rem; font-weight: var(--fw-semibold); line-height: 1.1; }
.scan-metric__label { font-size: var(--fs-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.scan-metric__sub { font-size: var(--fs-caption); color: var(--text-subtle); }
/* Linked tiles jump to the section that explains the number. They read as tiles, not buttons —
   the affordance is the "See details →" line, which only a linked tile renders, so a plain tile
   never looks interactive. */
.scan-metric--link { text-decoration: none; color: inherit; transition: border-color .15s ease, background-color .15s ease; }
.scan-metric--link:hover { border-color: var(--accent-600); background: var(--surface-2); }
.scan-metric--link:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
.scan-metric__go { margin-top: auto; padding-top: var(--space-2); font-size: var(--fs-caption); color: var(--accent-700); font-weight: var(--fw-medium); }
@media (prefers-reduced-motion: reduce) { .scan-metric--link { transition: none; } }
.scan-baseline { background: var(--accent-100); border-left: 3px solid var(--accent-600); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); }
.scan-baseline p { margin: 0; }

/* ---- Scan-first landing page (Home.razor) ---- */
/* 820px is the minimal site's shared content column: .tool-page and consulting's .container
   land text at (viewport - 820px)/2, and .site-header__inner matches, so the Relio brand
   sits exactly above the page's left text edge. */
.landing-root { max-width: 820px; margin: 0 auto; }
/* Full-bleed navy hero band, flush under the same-color header (the /engine breakout idiom;
   the 100vw scrollbar overhang is clipped by .marketing-layout { overflow-x: clip }). The
   inner wrapper re-centers content onto the shared 740px site column. */
.landing-hero {
    width: 100vw;
    box-sizing: border-box; /* padding inside the 100vw, or the inner column shifts right */
    margin-left: calc(50% - 50vw);
    margin-top: calc(-1 * var(--space-6)); /* cancel .marketing-main's top padding */
    background: var(--brand-900);
    padding: 64px var(--page-pad-desktop);
    border-bottom: 3px solid var(--accent-600);
}
.landing-hero__inner { max-width: 820px; margin: 0 auto; }
.landing-hero__eyebrow { margin: 0 0 var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.landing-hero__title { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: 1.15; margin: 0 0 var(--space-3); color: #FFFFFF; }
.landing-hero__sub { font-size: var(--fs-body-lg, 1.075rem); color: rgba(255, 255, 255, 0.88); margin: 0 0 var(--space-4); }
/* The analysis module (heading + form + examples line) is the hero's primary conversion action,
   set off from the marketing copy above it with a subtle divider rather than a heavy card, to
   stay in the site's typography-driven register instead of a boxed SaaS-widget look. */
.landing-hero__module { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--band-sep-dark); }
.landing-hero__module-title { font-family: var(--font-heading); font-size: var(--fs-h3); margin: 0 0 var(--space-3); color: #FFFFFF; }
.landing-hero__form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.landing-hero__timevalue { margin: var(--space-3) 0 0; font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.7); }
.landing-hero__input { flex: 1 1 320px; }
.landing-hero__examples { margin-top: var(--space-2); font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.6); }
.landing-hero__who { margin-top: var(--space-2); font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.6); }
.landing-section { padding: var(--space-5) 0; border-top: 1px solid var(--border); }
/* The hero band's accent rule already separates it from the first section. */
.landing-hero + .landing-section { border-top: none; }

/* ---- Page-entrance fade-up ----
   The staggered hero entrance from the live static site (and consulting.css / /engine),
   applied to the minimal site's pages so every navigation opens with the same motion.
   `backwards` keeps delayed elements hidden until their turn. */
@keyframes siteFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.landing-hero__inner > * { animation: siteFadeUp 0.7s ease-out backwards; }
.landing-hero__inner > .landing-hero__eyebrow { animation-delay: 0.05s; }
.landing-hero__inner > .landing-hero__title { animation-delay: 0.12s; }
.landing-hero__inner > .landing-hero__sub { animation-delay: 0.2s; }
.landing-hero__inner > .landing-hero__module { animation-delay: 0.3s; }
.landing-hero__inner > .landing-hero__who { animation-delay: 0.48s; }
.landing-hero__inner > .landing-hero__flow { animation-delay: 0.56s; }
/* The Hiring Presence report and the Portfolio workspace open on the same kind of navy hero band
   as the landing page, so they take the same staggered entrance rather than appearing at once.
   Staggered by position, not by class: the hero's children are conditional (the subscription
   switch link, the eyebrow, a billing alert), so a per-class delay list would leave whichever
   ones happened to be absent shifting everything after them onto the wrong beat. */
.monitor-hero__inner > * { animation: siteFadeUp 0.7s ease-out backwards; animation-delay: 0.05s; }
.monitor-hero__inner > *:nth-child(2) { animation-delay: 0.12s; }
.monitor-hero__inner > *:nth-child(3) { animation-delay: 0.2s; }
.monitor-hero__inner > *:nth-child(4) { animation-delay: 0.28s; }
.monitor-hero__inner > *:nth-child(n+5) { animation-delay: 0.36s; }

/* Pages without the hero band get a single fade on their opening block. */
.tool-page__header,
.marketing-main > .content-section:first-of-type {
    animation: siteFadeUp 0.7s ease-out backwards;
    animation-delay: 0.05s;
}
@media (prefers-reduced-motion: reduce) {
    .landing-hero__inner > *,
    .monitor-hero__inner > *,
    .tool-page__header,
    .marketing-main > .content-section:first-of-type { animation: none; }
    /* Infinite loaders: rest the skeleton pulse at full opacity, and slow the ring spinner to a
       calm rotation rather than freezing it mid-turn (matching the scan spinner's reduced pace). */
    .dashboard-skeleton { animation: none; }
    .rigor-generating__spinner { animation-duration: 2.5s; }
}
.landing-section h2 { font-family: var(--font-heading); margin: 0 0 var(--space-3); }
.landing-section p { color: var(--text); }

/* Growth creates complexity (v2 spec 10): editorial, generous whitespace, no cards/icons. */
.landing-growth__lead { font-family: var(--font-heading); font-size: clamp(20px, 3.4vw, 26px); font-weight: var(--fw-semibold); color: var(--text); margin: 0 0 var(--space-5); }
.landing-growth__close { margin-top: var(--space-5); font-weight: var(--fw-semibold); }

/* Did You Know? (v2 spec 11): pale teal panel, no red, no warning icon; penalty + sources
   subordinate. Styled as a real panel — padded, rounded, own vertical rhythm — to match the
   site's card convention (.landing-questions__card et al). With only a background set it
   inherited .landing-section's zero side padding and top divider, so the tint ran flush to the
   text with square corners and a stray rule across it, reading as unstyled. */
.landing-didyouknow {
    background: var(--accent-100);
    border-top: none;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-4) 0;
}
/* The footnote's trailing margin would otherwise break the panel's even inner padding. */
.landing-didyouknow > *:last-child { margin-bottom: 0; }
.landing-didyouknow__eyebrow { margin: 0 0 var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-700); }
/* Supporting context, not a second headline. It now follows the per-posting exposure paragraph
   (polish §3.7 reorder), where heading-size text outranked the copy above it; emphasized body
   weight keeps it prominent but subordinate to the h2. */
.landing-didyouknow__trend { margin: var(--space-4) 0 0; font-weight: var(--fw-semibold); color: var(--text); }
.landing-didyouknow__stat { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-5) 0 var(--space-4); }
.landing-didyouknow__stat-value { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--text); }
.landing-didyouknow__stat-label { font-size: var(--fs-small); color: var(--text-muted); }
.landing-didyouknow__footnote { font-size: var(--fs-caption); color: var(--text-subtle); }
@media (max-width: 640px) {
    /* A 32px inset eats too much of a narrow column; keep the panel readable. */
    .landing-didyouknow { padding: var(--space-5) var(--space-4); }
}

/* Supported recruiting platforms: the roster as text chips inside the platforms FAQ answer, rather
   than repeating the logo wall. One tier only, so every chip carries the same filled teal mark and
   the list needs no legend. Children are selected via .landing-platforms so they outrank
   `.landing-faq__item p` (a class + an element) inside the accordion; a bare class would lose that
   specificity contest. */
.landing-platforms { margin: 0 0 var(--space-4); }
.landing-platforms .landing-platforms__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.landing-platforms .landing-platforms__chip { background: var(--accent-100); color: var(--accent-700); border: 1px solid transparent; border-radius: var(--radius-pill); padding: 5px 12px; font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.landing-platforms .landing-platforms__note { margin: var(--space-3) 0 0; font-size: var(--fs-caption); color: var(--text-subtle); }

/* Portfolio Monitoring page. Keeps the plain page-title header its sibling product pages use, and
   adds the feature grid and pricing panel so the page still carries the site's card/panel language.
   Account creation is the intended path, so it keeps the filled primary treatment in both places
   and the contact link stays the outlined secondary. */
.portfolio-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.portfolio-features li { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); font-weight: var(--fw-medium); color: var(--text); }
.portfolio-features li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--accent-600); }

/* The coverage detail sits in the same pale teal panel the Did You Know block uses, with the
   account CTA inside it. Price is not shown on this page (surfaced at Stripe checkout instead). */
.portfolio-pricing { background: var(--accent-100); border-radius: var(--radius-lg); padding: var(--space-6); }
.portfolio-pricing__detail { margin: 0 0 var(--space-5); color: var(--text-muted); }
.portfolio-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

@media (max-width: 640px) {
    .portfolio-features { grid-template-columns: 1fr; }
    /* Matches the Did You Know panel: a 32px inset crowds the CTAs on a narrow column. */
    .portfolio-pricing { padding: var(--space-5) var(--space-4); }
}

/* Questions Relio helps answer (v2 spec 12): 2x2 card grid, stacks on mobile. */
.landing-questions__intro { margin: 0 0 var(--space-5); color: var(--text-muted); }
.landing-questions__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.landing-questions__card { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.landing-questions__card h3 { margin: 0 0 var(--space-2); }
.landing-questions__card p { margin: 0; color: var(--text-muted); }

/* How Relio works (v2 spec 13): three steps across, stacks on mobile. No process diagram. */
.landing-howitworks__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.landing-howitworks__step { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.landing-howitworks__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--accent-600); color: var(--surface); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.landing-howitworks__step h3 { margin: 0; }
.landing-howitworks__step p { margin: 0; color: var(--text-muted); }
.landing-howitworks__note { margin-top: var(--space-5); font-size: var(--fs-small); color: var(--text-muted); }

@media (max-width: 640px) {
    .landing-questions__grid { grid-template-columns: 1fr; }
    .landing-howitworks__steps { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Example finding eyebrow (v2 spec 14). */
.landing-example__eyebrow { margin: 0 0 var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-700); }

/* Buyer-fit practitioner-credibility block (v2 spec 17): sits below the four buyer cards. */
.landing-audience__credibility { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.landing-audience__credibility h3 { margin: 0 0 var(--space-2); font-family: var(--font-heading); }
.landing-audience__credibility p { margin: 0 0 var(--space-3); color: var(--text-muted); }

/* Secondary "Discuss Portfolio Monitoring" link under the portfolio card CTA (v2 spec 16). */
.landing-pricing__discuss { display: inline-block; margin-top: var(--space-2); font-size: var(--fs-small); color: var(--accent-700); text-decoration: none; }
.landing-pricing__discuss:hover { text-decoration: underline; }
.landing-steps { padding-left: 1.25rem; display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.landing-example__label { margin: 0 0 var(--space-3); font-size: var(--fs-caption); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
/* All three tiers (free / monitor / portfolio) sit on one row on desktop. The landing is an
   820px prose column, so the row breaks out to the layout's content width (centered-breakout
   idiom, as on /engine) to give the cards room. */
.landing-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (min-width: 981px) {
    .landing-pricing__grid {
        width: min(1040px, calc(100vw - 2 * var(--page-pad-desktop)));
        margin-left: 50%;
        transform: translateX(-50%);
    }
    /* The monitoring plan is the recommended tier, so on the 3-up desktop row it reads as the
       dominant card. Below 981px the cards stack (one full-width column each), so this emphasis
       never applies there and cannot overflow. */
    .landing-pricing__card--monitor { transform: scale(1.03); }
}
.landing-pricing__card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.landing-pricing__card h3 { margin: 0; }
.landing-pricing__card--monitor { background: var(--accent-100); border: 2px solid var(--accent-600); box-shadow: var(--shadow); }
.landing-pricing__badge { display: inline-block; align-self: flex-start; margin-bottom: var(--space-2); padding: 2px 10px; border-radius: var(--radius-pill); background: var(--accent-600); color: #fff; font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.02em; }
.landing-pricing__card .rl-button { margin-top: auto; align-self: flex-start; }
.landing-pricing__price { margin: 0; font-size: 1.25rem; font-weight: 600; }
.landing-pricing__alt { font-size: var(--fs-small); font-weight: 400; color: var(--text-muted); }
.landing-pricing__list { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-1); }
/* Secondary explainer under a card's buy button: the informational page stays reachable without
   sitting between the reader and checkout. */
.landing-pricing__learn { align-self: flex-start; font-size: var(--fs-small); color: var(--text-muted); }
/* Tier-inheritance lead-in: unmarked and pulled back to the list's left edge so it reads as a
   heading for the bullets that follow rather than as one more feature among them. */
.landing-pricing__inherits { list-style: none; margin-left: -1.1rem; margin-bottom: var(--space-1); font-weight: var(--fw-semibold); }
.landing-pricing__note { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--text-subtle); }
.landing-portfolio__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.landing-disclaimers { border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-2); }
/* Spec 06: What Relio reviews, monitoring cross-link, closing CTA band, and the /monitoring page. */
.landing-reviews__list { margin: 0 0 var(--space-3); padding-left: 1.1rem; display: grid; gap: var(--space-1); }
.landing-reviews__list li { color: var(--text); }
.landing-reviews__positioning { margin: 0; color: var(--text-muted); font-size: var(--fs-caption); }
@media (min-width: 640px) {
    /* Chunk C1: ten review items read better as two tidy columns than one long column. */
    .landing-reviews__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-5); }
}
/* Four audience cards (v2 spec 17), styled like the pricing cards for visual consistency.
   Deliberately 2x2 at every width: the section held six cards when it was written, so the old
   3-across desktop rule left the fourth card orphaned on its own row. Four across would squeeze
   each card to roughly a quarter of the 820px column and wrap headings like "Private Equity and
   Multi-brand Teams" onto three lines, so 2x2 it is, matching .landing-questions__grid. */
.landing-audience__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.landing-audience__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.landing-audience__card h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.landing-audience__card p { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
@media (max-width: 640px) {
    /* Two columns on a phone leaves each card too narrow; stack, as the questions grid does. */
    .landing-audience__grid { grid-template-columns: 1fr; }
}
/* Chunk C2: recruiting-platform logo wall (Home.razor). Each tile shows the platform's real
   full-color logo mark (wwwroot/img/platforms) above its name. Marks are square-ish and sized
   into a fixed 40px box with object-fit: contain so mixed source resolutions stay visually
   consistent. Logos are used nominatively; the trademark disclaimer sits below the grid. */
.platform-logos__grid { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.platform-logos__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 148px; min-height: 98px; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-sizing: border-box; text-align: center; }
.platform-logos__logo { width: 40px; height: 40px; object-fit: contain; display: block; }
.platform-logos__name { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--text); line-height: 1.2; }
/* Reassurance strip, not a full section: ~40% less vertical breathing room (v2 spec §9). */
.platform-logos { padding: var(--space-3) 0; }
.platform-logos__lead { margin: 0 auto var(--space-4); max-width: 48ch; text-align: center; font-size: var(--fs-body); color: var(--text-muted); }
.platform-logos__note { margin: 0 0 var(--space-2); font-size: var(--fs-caption); color: var(--text-muted); text-align: center; }
.platform-logos__note--soon { color: var(--text-subtle); }
.platform-logos__disclaimer { margin: var(--space-1) 0 0; font-size: var(--fs-caption); color: var(--text-subtle); text-align: center; }
@media (max-width: 640px) {
    .platform-logos__tile { width: 104px; min-height: 88px; padding: var(--space-2); }
}
.landing-practitioner .rl-button { margin-top: var(--space-2); }
/* Manual review vs monitoring (v2 spec 18): compact comparison; the wrap scrolls on narrow screens. */
.landing-compare__statement { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text); margin: 0 0 var(--space-4); }
.landing-compare__wrap { overflow-x: auto; }
.landing-compare__table { width: 100%; border-collapse: collapse; }
.landing-compare__table th, .landing-compare__table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; }
.landing-compare__table thead th { font-family: var(--font-heading); border-bottom: 2px solid var(--border-strong); }
.landing-compare__table td:first-child { color: var(--text-muted); }
.landing-compare__close { margin: var(--space-5) 0 var(--space-4); }

/* FAQ (v2 spec 19): native details/summary accordion, keyboard-accessible, no JS. */
.landing-faq__list { display: grid; gap: var(--space-2); }
.landing-faq__item { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 var(--space-4); }
.landing-faq__item summary { cursor: pointer; padding: var(--space-4) 0; font-weight: var(--fw-semibold); }
.landing-faq__item summary:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
.landing-faq__item p { margin: 0 0 var(--space-4); color: var(--text-muted); }

/* Final CTA (v2 spec 20): full-width navy band echoing the hero (same 100vw breakout idiom,
   clipped by .marketing-layout overflow-x: clip). Ends the page on the conversion action. */
.landing-cta {
    width: 100vw;
    box-sizing: border-box;
    margin-left: calc(50% - 50vw);
    background: var(--brand-900);
    border-top: 3px solid var(--accent-600);
    padding: var(--space-8) var(--page-pad-desktop);
    text-align: center;
}
.landing-cta__inner { max-width: 820px; margin: 0 auto; }
/* The heading now sits directly on the button row (the sub-line was cut), so it takes the site's
   standard pre-CTA gap rather than the tighter heading-above-body-copy one. */
.landing-cta h2 { margin: 0 0 var(--space-5); color: #FFFFFF; }
.landing-cta__actions { display: flex; gap: var(--space-4); justify-content: center; align-items: center; flex-wrap: wrap; }
.landing-cta .rl-button--primary { background: var(--accent-600); color: #FFFFFF; }
.landing-cta .rl-button--primary:hover { background: var(--accent-700); }
.landing-cta__secondary { color: rgba(255, 255, 255, 0.9); font-size: var(--fs-small); text-decoration: none; }
.landing-cta__secondary:hover { text-decoration: underline; color: #FFFFFF; }

@media (max-width: 640px) {
    .landing-cta { padding-left: var(--page-pad-mobile); padding-right: var(--page-pad-mobile); }
}
.monitoring-detail { margin: var(--space-4) 0; font-weight: 500; }
.monitoring-note { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-caption); }
/* Three narrow columns get too cramped below desktop width; stack rather than go 2+1. */
@media (max-width: 980px) {
    .landing-pricing__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .landing-hero { padding: 44px var(--page-pad-mobile) 40px; }
    .landing-hero__form { flex-direction: column; }
    /* In column direction the flex-basis would set the input's HEIGHT — reset it. */
    .landing-hero__input { flex: 0 0 auto; }
}