/*
   ION Lab Mentor-Mentee Matching Tool
   Focused operational interface for uploads, status tracking, and results.
*/

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --brand-navy: #16256b;
    --brand-navy-2: #24409a;
    --brand-magenta: #c8176c;
    /* The pink-to-purple sweep in the ION mark, reused as the banner rule. */
    --brand-gradient: linear-gradient(90deg, #e05a9e 0%, #8b2fb8 100%);
    --brand-magenta-strong: #a2124f;
    --brand-magenta-dark: #7d0d3c;
    --brand-mist: #b9c6e4;
    --brand-mist-soft: #eef1fa;
    --brand-ink: #141d47;
    --brand-muted: #5b678f;
    --text-on-dark: #ffffff;
    --text-on-dark-muted: #c6d0ec;
    --brand-mist-on-dark: #a9bce6;
    --accent-on-dark: #ff7ab8;
    --bg-primary: #f6f8fc;
    --bg-secondary: #e9eef8;
    --bg-card: #ffffff;
    --bg-card-hover: #fbfcff;
    --bg-input: #ffffff;
    --surface-muted: var(--brand-mist-soft);
    --surface-strong: var(--brand-navy);
    --border: #d5dcef;
    --border-strong: #b9c6e4;
    --border-focus: var(--brand-magenta);
    --text-primary: var(--brand-ink);
    --text-secondary: #3f4a75;
    --text-muted: var(--brand-muted);
    --accent: var(--brand-navy-2);
    --accent-hover: var(--brand-navy);
    --accent-glow: rgba(200, 23, 108, 0.13);
    --accent-soft: #fbe7f0;
    --success: #0d5960;
    --success-bg: #e8edfa;
    --warning: #b15c00;
    --warning-bg: #fff4e1;
    --error: #b71f63;
    --error-bg: #fff0f6;
    --info: var(--brand-navy-2);
    --info-bg: #e8edfa;
    --data-venture: var(--brand-magenta);
    --data-mentor: var(--brand-navy-2);
    --data-fit-excellent: var(--brand-navy-2);
    --data-fit-strong: #4257a8;
    --data-fit-moderate: #7d5a18;
    --data-fit-limited: var(--brand-mist);
    --data-fit-review: var(--error);
    --data-fit-critical: var(--brand-magenta-dark);
    --rating-best: #12a05f;
    --rating-best-bg: #d7f5e4;
    --rating-mid: #f2a516;
    --rating-mid-bg: #fff2cc;
    --rating-weak: #e5484d;
    --rating-weak-bg: #ffe3e3;
    --data-seq-1: #eef1fa;
    --data-seq-2: #dde3f5;
    --data-seq-3: #c3cdec;
    --data-seq-4: #9aabdd;
    --data-seq-5: #6c82c8;
    --data-seq-6: #3f56a8;
    --data-seq-7: #1c3282;
    --purple: var(--brand-magenta);
    --purple-bg: #fbe7f0;
    --blue: var(--brand-navy-2);
    --blue-bg: #e8edfa;
    --radius: 6px;
    --radius-sm: 4px;
    --shadow-sm: 0 1px 0 rgba(20, 29, 71, 0.08);
    --shadow-md: 0 16px 38px rgba(20, 29, 71, 0.10);
    --font-heading: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: "SF Mono", "Fira Code", "Roboto Mono", monospace;
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 360ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: var(--motion-base) var(--ease-standard);
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.5rem;
    /* Spacing is in rem, not px, so it scales with the root font size along with
       the type. That makes the --app-scale knob below behave like browser zoom
       instead of shrinking text inside padding that stayed put. At a 16px root
       these are the same 4/8/12/16/20/24/32/40px they have always been. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --control-height: 2.75rem;
}

html {
    /* The console reads better a notch smaller than browser default — this is
       the 90% the programme team was manually zooming to, made the default.
       One number: raise it back to 100% to undo, or tune it in 5% steps. */
    font-size: calc(16px * 0.9);
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo {
    font-family: var(--font-heading);
    letter-spacing: 0;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--accent-hover);
}

button,
input {
    font: inherit;
    min-width: 0;
}

select,
textarea {
    font: inherit;
    min-width: 0;
}

button,
a,
input,
select,
textarea,
summary {
    -webkit-tap-highlight-color: rgba(230, 0, 126, 0.12);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.tooltip:focus-visible,
[role="tab"]:focus-visible,
label:focus-within {
    outline: 3px solid var(--brand-magenta);
    outline-offset: 2px;
}

main p a,
.login-note a,
.success-banner a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.is-hidden {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.app-container.dashboard-container {
    max-width: 1440px;
    --room-venture: var(--data-venture);
    --room-mentor: var(--data-mentor);
    --room-ink: var(--text-primary);
    --room-ink-2: var(--text-secondary);
    --room-muted: var(--text-muted);
    --room-grid: var(--border);
    --room-good: var(--data-fit-excellent);
    --room-warning: var(--data-fit-moderate);
    --room-serious: var(--data-fit-review);
    --room-critical: var(--data-fit-critical);
    --room-border: rgba(20, 29, 71, 0.14);
    --room-radius: var(--radius);
    --room-shadow: none;
}

.main-content {
    flex: 1;
    min-width: 0;
    padding: 28px 0 40px;
}

.main {
    flex: 1;
    min-width: 0;
    padding: 28px 0 40px;
}

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 -24px;
    padding: 18px 24px 16px;
    color: var(--text-on-dark);
    background: var(--brand-navy);
    border-bottom: 6px solid var(--brand-magenta);
    min-width: 0;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.header h1 {
    color: var(--text-on-dark);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
}

.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: var(--text-on-dark);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.header-text {
    min-width: 0;
}

.header-text h1 {
    color: var(--text-on-dark);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
}

.subtitle {
    color: var(--text-on-dark-muted);
    font-size: 0.84rem;
    margin-top: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-link,
.back-link a {
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 600;
}

.header .header-link,
.header .header-link-button {
    color: var(--text-on-dark);
}

.header .header-link:hover,
.header .header-link-button:hover {
    color: var(--text-on-dark);
    text-decoration-color: var(--brand-magenta);
}

.back-link a::before,
.back-link-inline::before {
    content: "<";
    margin-right: 7px;
}

.upload-card,
.status-card,
.dashboard-card,
.dashboard-info-bar,
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}

.upload-card,
.status-card,
.dashboard-card,
.card {
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 28px;
    margin-bottom: 24px;
}

.card h2 {
    margin-bottom: 14px;
    color: var(--brand-navy);
    font-size: 1.36rem;
    line-height: 1.2;
}

.card p {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 22px;
}

.eyebrow {
    color: var(--brand-magenta);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.card-header h2 {
    color: var(--brand-navy);
    font-size: 1.36rem;
    font-weight: 600;
    line-height: 1.2;
}

.card-header p {
    max-width: min(760px, 100%);
    color: var(--text-secondary);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
    min-width: 0;
}

.section-heading h3 {
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 600;
}

.section-heading span {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pipeline-stages,
.enrich-toggle-section,
.milp-toggle-section {
    max-width: 100%;
    min-width: 0;
    margin-bottom: 20px;
    padding: 18px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stage-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    min-width: 0;
}

.stage-choice {
    min-height: 58px;
    min-width: 0;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.stage-choice:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-hover);
}

.toggle-label input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.toggle-switch {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 22px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    transition: background var(--transition), border-color var(--transition);
}

.toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(23, 32, 51, 0.25);
    transition: transform var(--transition);
}

.toggle-label input[type="checkbox"]:checked + .toggle-switch {
    background: var(--brand-magenta);
    border-color: var(--brand-magenta);
}

.toggle-label input[type="checkbox"]:checked + .toggle-switch::after {
    transform: translateX(18px);
}

.toggle-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.toggle-text strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    color: #a8005c;
    background: var(--accent-soft);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
}

.toggle-description {
    max-width: 100%;
    margin-top: 8px;
    padding-left: 52px;
    color: var(--text-muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.file-inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 22px;
    min-width: 0;
}

.file-inputs + .file-inputs {
    margin-top: 12px;
}

.file-group {
    position: relative;
    display: flex;
    min-height: 168px;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 16px;
    text-align: center;
    background: var(--bg-card);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.file-group:hover,
.file-group.dragover {
    background: var(--accent-soft);
    border-color: var(--brand-magenta);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.file-group.has-file {
    background: var(--success-bg);
    border-color: var(--success);
    border-style: solid;
}

.file-group label {
    display: flex;
    width: 100%;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
}

.file-group input[type="file"] {
    display: none;
}

.file-icon {
    position: relative;
    width: 36px;
    height: 44px;
    border: 2px solid var(--brand-magenta);
    border-radius: 5px;
    background: #ffffff;
}

.file-icon::before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 13px;
    height: 13px;
    background: var(--accent-soft);
    border-left: 2px solid var(--brand-magenta);
    border-bottom: 2px solid var(--brand-magenta);
    border-radius: 0 5px 0 4px;
}

.file-icon::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 19px;
    height: 12px;
    border-top: 2px solid var(--border-strong);
    border-bottom: 2px solid var(--border-strong);
}

.file-label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-primary);
    font-size: 0.93rem;
    font-weight: 600;
}

.file-label-text {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.file-type {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    color: var(--text-secondary);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.file-name {
    width: 100%;
    margin-top: 9px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.79rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-group.has-file .file-name {
    color: var(--success);
    font-weight: 600;
}

.tooltip {
    position: absolute;
    top: 11px;
    right: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--text-muted);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: help;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 10;
}

.tooltip:hover,
.tooltip:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
}

.tooltip .tooltip-text {
    position: absolute;
    right: 0;
    bottom: calc(100% + 9px);
    visibility: hidden;
    width: min(260px, 78vw);
    padding: 10px 12px;
    color: #ffffff;
    background: var(--surface-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), visibility var(--transition);
}

.tooltip:hover .tooltip-text,
.tooltip:focus-visible .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.milp-settings {
    max-width: 100%;
    min-width: 0;
    margin-bottom: 22px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.milp-intro {
    margin: 14px 18px 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    width: 100%;
    color: var(--text-primary);
    border: 0;
    border-bottom: 1px solid var(--border);
    font: inherit;
    text-align: left;
}

.settings-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.settings-chevron {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.settings-body {
    padding: 18px;
}

.settings-body .milp-intro {
    margin: 0 0 14px;
}

.settings-grid,
.settings-full-width {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.settings-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
}

.settings-full-width {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setting-group {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.setting-group label,
.milp-params-grid label {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.setting-group input[type="number"],
.setting-group input[type="text"],
.milp-params-grid input,
.login-form input[type="email"],
.login-form input[type="password"],
.role-select,
select {
    width: 100%;
    min-height: var(--control-height);
    padding: 8px 10px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.setting-group input:focus,
.milp-params-grid input:focus,
.login-form input:focus,
.role-select:focus,
select:focus {
    border-color: var(--brand-magenta);
    box-shadow: 0 0 0 4px var(--accent-glow);
    outline: none;
}

.setting-hint {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
}

.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    padding: 12px 22px;
    color: #ffffff;
    background: var(--brand-magenta);
    border: 1px solid var(--brand-magenta);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.98rem;
    font-weight: 700;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--control-height);
    padding: 8px 14px;
    color: var(--brand-navy);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn:hover {
    color: var(--brand-magenta);
    background: var(--accent-soft);
    border-color: var(--brand-magenta);
}

.btn-primary {
    color: #ffffff;
    background: var(--brand-magenta);
    border-color: var(--brand-magenta);
}

.btn-primary:hover {
    color: #ffffff;
    background: #c6006c;
    border-color: #c6006c;
}

.submit-btn:hover:not(:disabled) {
    background: #c6006c;
    border-color: #c6006c;
    box-shadow: var(--shadow-sm);
}

.submit-btn:active:not(:disabled) {
    box-shadow: var(--shadow-sm);
}

.submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    box-shadow: none;
}

.action-spaced {
    margin-top: 16px;
}

.btn-loader {
    align-items: center;
    justify-content: center;
}

.spinner {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    vertical-align: middle;
    animation: spin 700ms linear infinite;
}

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

.error-banner,
.success-banner {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-weight: 600;
}

.error-banner {
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid rgba(194, 65, 58, 0.35);
}

.success-banner {
    color: var(--success);
    background: var(--success-bg);
    border: 1px solid rgba(19, 138, 85, 0.35);
}

.info-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.info-card {
    min-height: 148px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.info-icon {
    width: auto;
    height: auto;
    margin-bottom: 14px;
    color: var(--brand-magenta);
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.info-icon::before {
    content: "01";
}

.info-card:nth-child(2) .info-icon::before {
    content: "02";
}

.info-card:nth-child(3) .info-icon::before {
    content: "03";
}

.info-card h3 {
    margin-bottom: 6px;
    font-size: 0.95rem;
    font-weight: 700;
}

.info-card p {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.job-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.job-label,
.info-label {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.job-id {
    display: inline-flex;
    max-width: 100%;
    overflow: hidden;
    padding: 4px 9px;
    color: var(--brand-magenta);
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    padding: 6px 12px;
    color: var(--text-secondary);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--text-muted);
    border-radius: 50%;
}

.status-badge.running {
    color: var(--brand-magenta);
    background: var(--accent-soft);
    border-color: rgba(230, 0, 126, 0.26);
}

.status-badge.running .status-dot {
    background: var(--brand-magenta);
    animation: pulse 1400ms ease-in-out infinite;
}

.status-badge.scored {
    color: var(--warning);
    background: var(--warning-bg);
    border-color: rgba(183, 121, 31, 0.32);
}

.status-badge.scored .status-dot {
    background: var(--warning);
}

.status-badge.complete {
    color: var(--success);
    background: var(--success-bg);
    border-color: rgba(19, 138, 85, 0.3);
}

.status-badge.complete .status-dot {
    background: var(--success);
}

.status-badge.failed {
    color: var(--error);
    background: var(--error-bg);
    border-color: rgba(194, 65, 58, 0.32);
}

.status-badge.failed .status-dot {
    background: var(--error);
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(1.28);
    }
}

.elapsed {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.progress-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 22px;
    padding: 8px 18px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.step {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.step:last-child {
    border-bottom: 0;
}

.step-indicator {
    position: relative;
    flex: 0 0 14px;
}

.step:not(:last-child) .step-indicator::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 6px;
    width: 2px;
    height: 46px;
    background: var(--border);
}

.step-dot {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    background: #c5cfdc;
    border: 3px solid var(--surface-muted);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-strong);
}

.step.active .step-dot {
    background: var(--brand-magenta);
    box-shadow: 0 0 0 1px var(--brand-magenta), 0 0 0 5px var(--accent-glow);
    animation: pulse 1400ms ease-in-out infinite;
}

.step.done .step-dot {
    background: var(--success);
    box-shadow: 0 0 0 1px var(--success);
}

.step.error .step-dot {
    background: var(--error);
    box-shadow: 0 0 0 1px var(--error);
}

.step.milp-step .step-name,
.step.milp-step.done .step-status {
    color: var(--purple);
}

.step.milp-step.active .step-dot,
.step.milp-step.done .step-dot {
    background: var(--purple);
    box-shadow: 0 0 0 1px var(--purple), 0 0 0 5px var(--purple-bg);
}

.step-info {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.step-name {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.step-status {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: right;
}

.step.active .step-status {
    color: var(--brand-magenta);
    font-weight: 700;
}

.step.done .step-status {
    color: var(--success);
    font-weight: 700;
}

.error-detail {
    padding: 16px;
    margin-bottom: 22px;
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid rgba(194, 65, 58, 0.35);
    border-radius: var(--radius);
}

.error-title {
    margin-bottom: 8px;
    font-weight: 700;
}

.error-detail pre {
    overflow-x: auto;
    color: var(--text-primary);
    font-family: var(--mono);
    font-size: 0.8rem;
    white-space: pre-wrap;
}

.download-area {
    margin-bottom: 22px;
}

.download-area h3 {
    margin-bottom: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.milp-status-text {
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.download-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.download-btn,
.dashboard-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 14px;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-weight: 700;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.download-btn:hover {
    color: var(--brand-magenta);
    background: var(--accent-soft);
    border-color: var(--brand-magenta);
}

.download-btn.milp-dl:hover {
    color: var(--purple);
    background: var(--purple-bg);
    border-color: var(--purple);
}

.dl-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.dl-icon::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 1px;
    width: 2px;
    height: 10px;
    background: currentColor;
}

.dl-icon::after {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.dashboard-link {
    color: #ffffff;
    background: var(--brand-navy);
    border-color: var(--brand-navy);
}

.dashboard-link::after {
    content: ">";
    margin-left: 4px;
}

.dashboard-link:hover {
    color: #ffffff;
    background: var(--brand-navy-2);
    border-color: var(--brand-navy-2);
}

.back-link {
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.footer {
    min-width: 0;
    padding: 22px 0;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    text-align: center;
}

.footer p {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.group-selection-panel {
    margin-top: 22px;
    padding: 20px;
    background: var(--bg-card-hover);
    border: 1px solid rgba(20, 29, 71, 0.18);
    border-radius: var(--radius);
}

.group-selection-panel h3 {
    margin-bottom: 14px;
    font-size: 1rem;
    font-weight: 700;
}

.group-detection-summary {
    margin-bottom: 14px;
    padding: 11px 13px;
    color: var(--brand-navy);
    background: var(--info-bg);
    border: 1px solid rgba(13, 89, 96, 0.22);
    border-radius: var(--radius);
    font-size: 0.84rem;
    font-weight: 700;
}

.milp-params-details {
    overflow: hidden;
    margin-top: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.milp-params-details summary {
    padding: 12px 14px;
    color: var(--text-secondary);
    background: var(--surface-muted);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
}

.milp-params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    padding: 14px;
}

.milp-params-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.apply-defaults-btn,
.group-card-toggle,
.dl-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 7px 12px;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.apply-defaults-btn {
    margin: 0 14px 14px;
    color: var(--brand-magenta);
    border-color: rgba(230, 0, 126, 0.28);
}

.apply-defaults-btn:hover,
.group-card-toggle:hover,
.dl-btn-small:hover {
    color: var(--brand-magenta);
    background: var(--accent-soft);
    border-color: var(--brand-magenta);
}

.group-card {
    overflow: hidden;
    margin-top: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.group-card.selected {
    border-color: var(--brand-magenta);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.group-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 14px;
    background: var(--bg-card);
}

.group-card-header input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-magenta);
    cursor: pointer;
}

.group-card-label {
    flex: 1;
    min-width: 130px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.group-card-meta,
.group-card-auto {
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.group-card-auto {
    margin-left: auto;
}

.group-card-params {
    display: none;
    padding: 0;
    border-top: 1px solid var(--border);
}

.dashboard-info-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(160px, auto));
    gap: 16px;
    align-items: center;
    padding: 15px 18px;
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.info-value {
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 600;
}

.info-value.status-ok {
    color: var(--success);
}

.info-value.status-warn {
    color: var(--warning);
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.download-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 56px;
    padding: 12px 14px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.download-item-name {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.download-item-btns {
    display: flex;
    gap: 7px;
}

.dl-btn-small {
    color: var(--text-secondary);
    text-transform: uppercase;
}

.dl-btn-small.xlsx {
    color: var(--success);
    border-color: rgba(19, 138, 85, 0.3);
}

.dl-btn-small.xlsx:hover {
    color: var(--success);
    background: var(--success-bg);
    border-color: var(--success);
}

.dl-btn-small.active {
    color: #ffffff;
    background: var(--brand-magenta);
    border-color: var(--brand-magenta);
}

.table-wrapper {
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.fit-score-wrapper {
    max-height: 600px;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}

.data-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 13px;
    color: var(--text-secondary);
    background: var(--brand-mist-soft);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    max-width: 320px;
    padding: 11px 13px;
    overflow: hidden;
    color: var(--text-primary);
    border-bottom: 1px solid #e3eeee;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pipe-joined mentor rosters (full schedule, table assignments) must stay
   readable in place — the ellipsis truncation above has no way to reveal
   the rest of the list, so these columns wrap instead of clipping. */
.data-table td.list-cell {
    max-width: 420px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.5;
}

.data-table tbody tr:hover td {
    background: var(--bg-card-hover);
}

.score-cell {
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.score-high {
    color: var(--success);
    font-weight: 700;
}

.score-mid {
    color: var(--warning);
}

.score-low {
    color: var(--text-muted);
}

.fit-score-table td {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

.fit-score-cell {
    min-width: 44px;
    height: 44px;
    padding: 8px 4px;
    cursor: pointer;
    text-align: center;
}

.fit-score-cell:focus-visible {
    position: relative;
    z-index: 3;
    outline: 3px solid var(--brand-magenta);
    outline-offset: -3px;
}

/* Each band is selected as `.fit-score-table td.<band>` (0,2,1) rather than
   `.<band>` (0,1,0), because the matrix table carries both classes —
   `class="data-table fit-score-table"` — and `.data-table td` (0,1,1) sets
   `color: var(--text-primary)`. At single-class specificity that dark ink won
   on every cell, rendering the dark-teal 0.80+ cells at 1.7:1 (invisible) and
   silently discarding the magenta on the low bands. The legend swatch is an
   empty `<i>`, so it is listed separately for the background only. */
.fit-score-table td.fit-score-critical,
.fit-scale-swatch.fit-score-critical {
    color: var(--brand-magenta-dark);
    background: var(--error-bg);
}

.fit-score-table td.fit-score-review,
.fit-scale-swatch.fit-score-review {
    color: var(--error);
    background: var(--accent-soft);
}

.fit-score-table td.fit-score-moderate,
.fit-scale-swatch.fit-score-moderate {
    color: var(--brand-ink);
    background: var(--data-seq-2);
}

.fit-score-table td.fit-score-strong,
.fit-scale-swatch.fit-score-strong {
    color: var(--brand-ink);
    background: var(--data-seq-4);
}

.fit-score-table td.fit-score-excellent,
.fit-scale-swatch.fit-score-excellent {
    color: #ffffff;
    background: var(--data-fit-excellent);
}

.fit-startup-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card);
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.fit-role-os {
    box-shadow: inset 0 0 0 3px var(--brand-magenta);
}

.fit-role-oc {
    box-shadow: inset 0 0 0 3px var(--brand-navy-2);
}

.dashboard-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    overflow-x: auto;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.dashboard-tab {
    min-height: var(--control-height);
    padding: 8px 14px;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.dashboard-tab.active {
    color: #ffffff;
    background: var(--brand-magenta);
}

.dashboard-tab .tab-status {
    margin-left: 6px;
    font-size: var(--text-xs);
    opacity: 0.85;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.pagination span {
    align-self: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.score-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: min(320px, calc(100vw - 24px));
    padding: 12px;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-size: 0.84rem;
    pointer-events: none;
}

.score-tooltip .tooltip-header {
    margin-bottom: 7px;
    font-weight: 700;
}

.tooltip-role-os {
    margin-top: 6px;
    color: var(--brand-magenta);
    font-weight: 700;
}

.tooltip-role-oc {
    margin-top: 6px;
    color: var(--brand-navy-2);
    font-weight: 700;
}

.fit-score-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 14px 0 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: var(--bg-card);
    border-radius: 4px;
}

.legend-os {
    border: 3px solid var(--brand-magenta);
}

.legend-oc {
    border: 3px solid var(--brand-navy-2);
}

.os-oc-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.stats-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stats-card-wide {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
}

.stats-ring-container {
    position: relative;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
}

.stats-ring {
    width: 100%;
    height: 100%;
}

.stats-ring-progress {
    stroke: var(--brand-navy-2);
}

.stats-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-weight: 700;
}

.stats-number {
    color: var(--text-primary);
    font-size: 1.28rem;
    font-weight: 700;
}

.stats-label {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.stats-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.stats-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
}

.stats-dot-total {
    background: var(--text-secondary);
}

.stats-dot-excluded {
    background: var(--error);
}

.stats-dot-eligible {
    background: var(--success);
}

.stats-dot-os {
    background: var(--brand-magenta);
}

.stats-dot-oc {
    background: var(--brand-navy-2);
}

.stats-dot-unassigned {
    background: var(--text-muted);
}

.stats-label-spaced {
    margin-bottom: 8px;
}

.stats-mentor-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stats-mentor-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.empty-state {
    width: 100%;
    padding: var(--space-4);
    color: var(--text-muted);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
}

.milp-download-group {
    width: 100%;
    margin-bottom: 12px;
}

.milp-download-heading {
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.milp-download-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 960px) {
    .stage-list,
    .settings-grid,
    .info-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .file-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-info-bar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .app-container {
        padding: 0;
    }

    .main-content {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 20px 16px 40px;
    }

    .header {
        width: 100%;
        max-width: none;
        margin: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .header-actions {
        width: 100%;
    }

    .upload-card,
    .status-card,
    .dashboard-card {
        width: 100%;
        max-width: 100%;
        padding: 20px;
    }

    .upload-card > *,
    .status-card > *,
    .dashboard-card > * {
        max-width: 100%;
    }

    .pipeline-stages,
    .enrich-toggle-section,
    .milp-toggle-section,
    .milp-settings,
    .file-inputs,
    .progress-steps,
    .download-area,
    .group-selection-panel {
        width: 100%;
        max-width: 100%;
    }

    .section-heading span {
        display: none;
    }

    .stage-list,
    .file-inputs,
    .settings-grid,
    .settings-full-width,
    .download-buttons,
    .info-row,
    .os-oc-stats {
        grid-template-columns: 1fr;
    }

    .toggle-description {
        max-width: calc(100% - 52px);
        margin-left: 52px;
        padding-left: 0;
    }

    .file-group {
        width: 100%;
        max-width: 100%;
    }

    .status-row,
    .step-info,
    .group-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .group-card-auto {
        margin-left: 0;
        white-space: normal;
    }

    .step-status {
        text-align: left;
    }

    .download-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer {
        padding: 20px 16px;
    }
}

@media (max-width: 480px) {
    .upload-card,
    .status-card,
    .dashboard-card {
        padding: 16px;
    }

    .pipeline-stages,
    .enrich-toggle-section,
    .milp-toggle-section,
    .group-selection-panel {
        padding: 14px;
    }

    .toggle-description {
        max-width: 100%;
        margin-left: 0;
    }

    .file-group {
        min-height: 150px;
    }

    .card-header h2 {
        font-size: 1.2rem;
    }
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: var(--brand-mist-soft);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-navy-2);
}

/* ── Auth & admin (login, change-password, user management) ───────────────── */

.login-card { max-width: 32rem; margin: 2rem auto; }
.login-form .form-group { margin-bottom: 1rem; }
.stream-fieldset { border: 0; padding: 0; }
.stream-fieldset legend { margin-bottom: 8px; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 700; }
.role-name { color: var(--brand-navy); font-weight: 700; }
.login-form input[type="email"],
.login-form input[type="password"] {
  width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border, #d5d9e0);
  border-radius: 6px; font: inherit;
}
.login-note { margin-top: 1.25rem; font-size: 0.85rem; color: var(--muted, #6b7280); }
.success-banner {
  padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem;
  background: var(--success-bg); color: var(--success); border: 1px solid rgba(13, 89, 96, 0.25);
}

.header-nav { display: flex; align-items: center; gap: 1rem; }
.header-logout { margin: 0; }
.header-link-button {
  background: none; border: none; cursor: pointer; font: inherit; padding: 0;
  color: inherit; text-decoration: underline;
}

/* One-time temporary password. Monospace and prominent — it is shown once. */
.temp-password {
  display: block; padding: 0.75rem 1rem; margin: 0.75rem 0;
  background: var(--brand-navy); color: #f9fafb; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem; letter-spacing: 0.02em; word-break: break-all;
}

/* Hubs and streams are multi-selects, not checkbox rows: the programme adds
   sites and streams over time and a row of boxes stops being readable well
   before a list does. One rule for both, so the pair cannot drift apart. */
.hub-select,
.stream-select {
    min-width: 150px;
    max-width: 220px;
    padding: 4px 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.hub-select:focus-visible,
.stream-select:focus-visible {
    outline: 2px solid var(--brand-navy-2);
    outline-offset: 1px;
}

.hub-select:disabled,
.stream-select:disabled {
    background: var(--surface-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* A stream none of the person's hubs runs is a mismatch to resolve, not a
   normal option. It reads as a warning so it is not silently saved back. */
option.stream-orphan {
    color: var(--brand-magenta);
    font-style: italic;
}

.stream-orphan-note {
    color: var(--brand-magenta);
}

.stream-hint {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.stream-check { margin-right: 0.75rem; white-space: nowrap; font-size: 0.85rem; }
.actions-cell {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
}
.btn-small { padding: 0.25rem 0.5rem; font-size: 0.8rem; margin-right: 0.25rem; }
.btn-danger { background: #b71f63; color: #fff; border-color: #9b1653; }
.badge {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
}
.badge-ok { background: var(--success-bg); color: var(--success); }
.badge-off { background: var(--brand-mist-soft); color: var(--brand-muted); }
.badge-warn { background: var(--warning-bg); color: var(--warning); }
.muted { color: var(--muted, #6b7280); font-size: 0.85rem; }

/* Session Room views. */
.room-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

.room-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--room-border);
    background: #fff;
    color: var(--room-ink-2);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.room-tab:hover {
    border-color: var(--room-venture);
    color: var(--room-venture);
}

.room-tab.active {
    background: var(--room-venture);
    border-color: var(--room-venture);
    color: #fff;
}

.room-caption {
    font-size: 14px;
    line-height: 1.5;
    color: var(--room-ink-2);
    max-width: 880px;
    margin: 0 0 16px;
}

.room-legend,
.room-status-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 12.5px;
    color: var(--room-ink-2);
    font-weight: 600;
}

.room-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.room-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--room-border);
}

/* ── Seating chart ─────────────────────────────────────────── */
.room-seating-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

.room-table-card {
    background: #fff;
    border: 1px solid var(--room-border);
    border-radius: var(--room-radius);
    box-shadow: var(--room-shadow);
    padding: 16px;
    min-width: 0;
}

.room-table-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--room-ink);
    margin-bottom: 6px;
}

.room-table-sub {
    font-weight: 500;
    color: var(--room-muted);
    font-size: 12.5px;
}

.room-table-nav {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}

.room-nav-btn {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--room-border);
    border-radius: 5px;
    background: #fff;
    color: var(--data-venture);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.room-nav-btn:hover {
    border-color: var(--data-venture);
    background: var(--surface-muted);
}

/* One venture per panel. A table hosting several ventures scrolls between
   them rather than drawing every venture into one crowded circle. */
.room-table-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
}

/* Exactly one venture fills the table card at a time — the next venture at
   that table is a scroll away, never a second circle competing for attention
   in the same view. */
.room-venture-panel {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
}

.room-venture-panel .room-table-svg {
    max-width: 250px;
}

.room-table-svg {
    width: 100%;
    height: auto;
    display: block;
}

.room-v-seat,
.room-m-seat {
    cursor: pointer;
}

.room-v-seat:focus {
    outline: none;
}

.room-v-seat:focus circle {
    stroke: var(--brand-magenta-dark);
    stroke-width: 4px;
}

/* ── Compatibility cards ───────────────────────────────────── */
.room-compat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(470px, 1fr));
    gap: 18px;
}

/* A venture's OS and CR cards share one box, so the pair reads as one venture
   instead of two cards the grid can wrap apart. The cards inside are unchanged. */
.room-compat-group {
    padding: 14px;
    background: var(--surface-muted);
    border: 1px solid var(--room-border);
    border-radius: var(--room-radius);
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
}

/* --room-shadow is deliberately `none` in this design, so the lift is carried by
   a crisp 1px ring rather than a drop shadow: it doubles the border weight
   without the layout shift a wider border would cause. */
.room-compat-group:hover,
.room-compat-group:focus-visible,
.room-compat-group:focus-within {
    border-color: var(--data-venture);
    box-shadow: 0 0 0 1px var(--data-venture);
    transform: translateY(-2px);
}

.room-compat-group-title {
    margin-bottom: 10px;
    color: var(--room-ink);
    font-size: 13.5px;
    font-weight: 700;
}

.room-compat-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 560px) {
    .room-compat-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .room-compat-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

.room-compat-card {
    background: #fff;
    border: 1px solid var(--room-border);
    border-radius: var(--room-radius);
    box-shadow: var(--room-shadow);
    padding: 18px 16px 16px;
    text-align: center;
}

.room-compat-role {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--room-mentor);
    margin-bottom: 10px;
}

.room-compat-avatars {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.room-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--room-border);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.room-avatar-lg {
    width: 60px;
    height: 60px;
    font-size: 17px;
    margin: 4px auto 10px;
}

.room-avatar-venture {
    background: var(--room-venture);
    z-index: 1;
}

.room-avatar-mentor {
    background: var(--room-mentor);
}

.room-compat-venture {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--room-ink);
    margin-bottom: 2px;
}

.room-compat-mentor {
    font-size: 12.5px;
    color: var(--room-ink-2);
    font-weight: 600;
    margin-bottom: 6px;
}

.room-compat-ring {
    width: 116px;
    height: 116px;
    margin: 4px auto 2px;
    display: block;
}

.room-compat-fit-label {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.room-pref-chip {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--room-ink-2);
    background: var(--surface-muted);
    border: 1px solid var(--room-border);
    border-radius: 999px;
    padding: 4px 11px;
}

.room-pref-chip.ranked {
    color: var(--brand-magenta-strong);
    background: var(--accent-soft);
    border-color: rgba(230, 0, 126, 0.22);
}

/* ── Role detail ────────────────────────────────────────────── */
.room-story-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.room-story-controls label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--room-ink-2);
}

.room-select {
    min-height: var(--control-height);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--room-border);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--room-ink);
    background: #fff;
    cursor: pointer;
}

.room-role-toggle {
    display: flex;
    gap: 6px;
    background: #fff;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--room-border);
}

.room-role-toggle button {
    min-height: 36px;
    padding: 7px 14px;
    border-radius: 7px;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 13px;
    color: var(--room-ink-2);
    cursor: pointer;
}

.room-role-toggle button.active {
    background: var(--room-ink);
    color: #fff;
}

.room-story-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--room-border);
    border-radius: var(--room-radius);
    box-shadow: var(--room-shadow);
    overflow-x: auto;
}

.room-story-panel {
    flex: 1 1 0;
    min-width: 250px;
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.room-story-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--room-venture);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.room-story-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--room-ink);
}

.room-story-fact {
    font-size: 13px;
    font-weight: 600;
    color: var(--room-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.room-story-fact-big {
    font-size: 26px;
    font-weight: 700;
    color: var(--room-ink);
    font-variant-numeric: tabular-nums;
}

.room-story-band {
    font-size: 13px;
    font-weight: 700;
    margin-left: 4px;
}

.room-story-fact-muted {
    font-size: 12.5px;
    color: var(--room-ink-2);
}

.room-story-mentor-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--room-ink);
}

.room-story-arrow {
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--room-muted);
}

.room-story-arrow svg {
    width: 34px;
    height: 20px;
}

@media (max-width: 720px) {
    .room-story-strip {
        flex-direction: column;
    }
    .room-story-arrow {
        transform: rotate(90deg);
        flex: 0 0 30px;
    }
}

/* ── Assignment cards (replaces the raw "Startup OS/CR Assignments" table) ── */
.assign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.assign-card {
    background: #fff;
    border: 1px solid var(--room-border);
    border-radius: var(--room-radius);
    box-shadow: var(--room-shadow);
    padding: 16px;
}

.assign-venture {
    font-size: 15px;
    font-weight: 700;
    color: var(--room-ink);
}

.assign-meta {
    font-size: var(--text-xs);
    color: var(--room-muted);
    font-weight: 600;
    margin: 2px 0 12px;
}

.assign-role-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px dashed var(--room-border);
}

.assign-role-row:first-of-type {
    border-top: none;
}

.assign-role-info {
    flex: 1;
    min-width: 0;
}

.assign-role-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--room-muted);
}

.assign-mentor-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--room-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assign-fit-pill {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
}

/* ── Schedule cards (replaces the raw "Full Schedule" table) ─────────── */
.sched-sgm-block {
    margin-bottom: 22px;
}

.sched-sgm-block:last-child {
    margin-bottom: 0;
}

.sched-sgm-title {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--room-venture);
    border-bottom: 1px solid var(--room-border);
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.sched-table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.sched-table-card {
    background: #fff;
    border: 1px solid var(--room-border);
    border-radius: var(--room-radius);
    box-shadow: var(--room-shadow);
    padding: 14px 16px;
}

.sched-table-title {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--room-muted);
}

.sched-venture {
    font-size: 14px;
    font-weight: 700;
    color: var(--room-ink);
    margin: 3px 0 10px;
}

.sched-mentor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sched-chip {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--room-ink-2);
    background: var(--surface-muted);
    border: 1px solid var(--room-border);
    border-radius: 999px;
    padding: 3px 10px;
}

.sched-chip.os {
    background: var(--room-venture);
    color: #fff;
    border-color: transparent;
}

.sched-chip.oc {
    background: var(--room-mentor);
    color: #fff;
    border-color: transparent;
}

/* Results console theme, informed by the State of Mentorship reference. */
.console-shell {
    max-width: 1480px;
    --console-teal: var(--brand-navy);
    --console-teal-2: var(--brand-navy-2);
    --console-magenta: var(--brand-magenta);
    --console-mint: var(--brand-mist);
    --console-ink: var(--brand-ink);
    --console-muted: var(--brand-muted);
    --console-rule: var(--border);
    --console-soft: var(--brand-mist-soft);
    --accent: var(--console-teal-2);
    --accent-hover: var(--console-teal);
    --border-focus: var(--console-magenta);
    --room-venture: var(--console-magenta);
    --room-mentor: var(--console-teal-2);
    --room-ink: var(--console-ink);
    --room-ink-2: var(--console-muted);
    --room-muted: var(--brand-muted);
    --room-grid: var(--border);
    --room-border: rgba(20, 29, 71, 0.14);
    --room-radius: var(--radius);
    --room-shadow: none;
}

.console-shell .footer {
    color: var(--console-muted);
}

.console-skip-link {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 1200;
    padding: 9px 12px;
    color: #ffffff;
    background: var(--brand-magenta-strong);
    border-radius: var(--radius-sm);
    font-weight: 700;
    transform: translateY(-150%);
}

.console-skip-link:focus {
    color: #ffffff;
    transform: translateY(0);
}

.app-container.dashboard-container.console-shell {
    --room-venture: var(--console-magenta);
    --room-mentor: var(--console-teal-2);
    --room-muted: var(--console-muted);
}

.console-hero {
    margin: 0 -24px;
    padding: 24px 24px 16px;
    color: #fff;
    background: var(--console-teal);
    border-bottom: 8px solid var(--console-magenta);
}

.console-kicker,
.console-section-label {
    display: block;
    color: var(--console-magenta);
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.console-hero .console-kicker {
    color: var(--brand-mist-on-dark);
    margin-bottom: 12px;
}

.console-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.console-title-row > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.console-title-row h1 {
    color: #fff;
    font-size: 2.5rem;
    line-height: 1.05;
    margin: 0;
}

.console-title-row .subtitle {
    color: var(--text-on-dark-muted);
    margin-top: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
}

.console-purpose {
    max-width: 72ch;
    margin-top: 6px;
    color: #e2eeee;
    font-size: var(--text-base);
}

.console-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 900px) {
    .console-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .console-actions {
        justify-content: flex-start;
    }
}

.console-link {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: 700;
}

.console-link:hover {
    color: #fff;
    border-color: var(--console-magenta);
    background: rgba(230, 0, 126, 0.22);
}

.console-meta-strip {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr));
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.console-meta-item {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.console-meta-item:last-child {
    border-right: 0;
}

.console-meta-item span {
    display: block;
    color: var(--brand-mist-on-dark);
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.console-meta-item strong,
.console-meta-item code {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-meta-item strong {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.console-main {
    padding-top: 0;
}

.console-toolbar {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 -24px 22px;
    padding: 10px 24px 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--console-rule);
}

.console-nav-block {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.console-group-block {
    max-width: 56%;
    margin-left: auto;
}

.console-control-label {
    color: var(--console-muted);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.console-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    overflow-x: auto;
}

.console-tab {
    appearance: none;
    flex: 0 0 auto;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--console-ink);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 9px 11px 10px;
    white-space: nowrap;
}

.console-tab:hover {
    background: var(--console-soft);
    color: var(--console-magenta);
}

.console-tab.active {
    background: var(--accent-soft);
    border-bottom-color: var(--console-magenta);
    color: var(--brand-magenta-strong);
}

.console-tab-count {
    display: inline-flex;
    min-width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 0 5px;
    color: var(--console-ink);
    background: var(--console-soft);
    border: 1px solid var(--console-rule);
    border-radius: 50%;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.console-tab-count.is-hidden,
.dashboard-load-error.is-hidden,
.console-group-block.is-hidden,
.console-toolbar .dashboard-tabs.is-hidden {
    display: none;
}

.console-tab.active .console-tab-count {
    color: #ffffff;
    background: var(--brand-magenta-strong);
    border-color: var(--brand-magenta-strong);
}

.console-toolbar .dashboard-tabs {
    max-width: 100%;
    margin: 0;
    padding: 3px;
}

.console-toolbar .dashboard-tab {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: none;
}

.console-toolbar .dashboard-tab .tab-label {
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: 700;
}

.console-toolbar .dashboard-tab .tab-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: var(--console-muted);
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 600;
}

.console-toolbar .dashboard-tab .tab-status::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: var(--success);
    border-radius: 50%;
}

.console-toolbar .dashboard-tab.active .tab-status {
    color: #ffffff;
}

.dashboard-load-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0;
}

.dashboard-load-error div {
    display: grid;
    gap: 2px;
}

.dashboard-load-error strong {
    color: var(--error);
}

.console-guide {
    background: var(--console-soft);
    border-block: 1px solid var(--console-rule);
}

.console-guide summary {
    min-height: var(--control-height);
    padding: 11px 14px;
    color: var(--console-teal);
    cursor: pointer;
    font-weight: 700;
}

.console-guide[open] summary {
    border-bottom: 1px solid var(--console-rule);
}

.console-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.console-guide-grid > div {
    padding: 14px 16px 16px;
    border-right: 1px solid var(--console-rule);
}

.console-guide-grid > div:last-child {
    border-right: 0;
}

.console-guide-grid dt {
    margin-bottom: 3px;
    color: var(--console-ink);
    font-weight: 700;
}

.console-guide-grid dd {
    color: var(--console-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.console-panel {
    display: none;
}

.console-panel.active {
    display: grid;
    gap: 18px;
}

.console-shell .dashboard-card {
    border: 1px solid var(--console-rule);
    border-radius: 6px;
    box-shadow: none;
}

.console-shell .card-header {
    align-items: flex-start;
    border-bottom-color: var(--console-rule);
}

.console-shell .card-header h2 {
    color: var(--console-teal);
    font-size: 1.55rem;
    line-height: 1.1;
}

.console-shell .card-header p {
    max-width: 68ch;
    color: var(--console-muted);
}

.console-shell .card-header .console-scale-note {
    align-self: center;
    margin-left: auto;
    color: var(--console-ink);
    font-size: var(--text-sm);
    text-align: right;
}

.console-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* Outline only — the internal dividers between KPIs stay neutral so the
       pink reads as a frame around the snapshot, not as six pink cells. */
    border: 1px solid var(--console-magenta);
    border-radius: 6px;
    overflow: hidden;
}

.console-kpi {
    min-width: 0;
    padding: 16px 18px;
    background: #fff;
    border-right: 1px solid var(--console-rule);
}

.console-kpi:last-child {
    border-right: 0;
}

.console-kpi span {
    display: block;
    color: var(--console-muted);
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.console-kpi strong {
    display: block;
    margin-top: 8px;
    color: var(--console-teal);
    font-size: 2rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.console-kpi.compact strong {
    font-size: 1.65rem;
    line-height: 1.05;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Second value line (e.g. the shift under the stream in the Group tile), so a
   label like AI-SHIFT-1 breaks at its own boundary instead of mid-token. */
.console-kpi-value-2 {
    display: block;
    margin-top: 2px;
    font-size: 1.1rem;
    line-height: 1.1;
}

.console-kpi em {
    display: block;
    min-height: 2.4em;
    margin-top: 8px;
    color: var(--console-muted);
    font-style: normal;
    line-height: 1.2;
}

.console-kpi.warn {
    background: #fff8e8;
}

.console-kpi.critical {
    background: #fff0f6;
}

.console-kpi.critical strong,
.console-kpi.warn strong {
    color: var(--console-magenta);
}

.attention-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 14px;
}

.attention-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Reuses .room-tab for the buttons, at a slightly tighter scale — the bar sits
   above a dense table rather than acting as top-level navigation. */
.attention-filter .room-tab {
    padding: 6px 12px;
    font-size: 12.5px;
}

.attention-count {
    margin-left: auto;
    color: var(--console-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

.attention-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--console-rule);
    border-radius: 6px;
}

.attention-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.attention-table th {
    padding: 10px 12px;
    background: var(--console-soft);
    color: var(--console-muted);
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
}

.attention-table td {
    padding: 12px;
    border-top: 1px solid var(--console-rule);
    color: var(--console-ink);
    vertical-align: middle;
}

.attention-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.role-chip {
    display: inline-flex;
    min-width: 34px;
    justify-content: center;
    margin-right: 8px;
    padding: 2px 7px;
    border-radius: 3px;
    color: #fff;
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: 700;
}

.role-chip.os {
    background: var(--console-magenta);
}

.role-chip.oc {
    background: var(--console-teal-2);
}

.fit-pill {
    display: inline-flex;
    min-width: 54px;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--fit-color);
    color: #fff;
    font-family: var(--mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fit-result {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.fit-band-label {
    color: var(--console-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.fit-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px 12px;
    color: var(--console-muted);
    background: var(--console-soft);
    border: 1px solid var(--console-rule);
    font-size: var(--text-sm);
}

.fit-scale > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.fit-scale .fit-scale-title {
    color: var(--console-ink);
    font-weight: 700;
}

.fit-scale-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(20, 29, 71, 0.22);
}

.matrix-feedback {
    margin-bottom: 12px;
}

.table-scroll-hint {
    display: none;
    margin: 0 0 8px;
    color: var(--console-muted);
    font-size: var(--text-sm);
}

.fit-score-table .fit-startup-cell:first-child {
    z-index: 3;
    box-shadow: 1px 0 0 var(--border);
}

.fit-score-table .fit-mentor-heading {
    width: 42px;
    max-width: 42px;
    padding: 6px 3px;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.fit-role-oc {
    box-shadow: none;
    outline: 3px dashed var(--brand-navy-2);
    outline-offset: -4px;
}

/* --data-fit-excellent resolves to --brand-navy-2, so on a 0.80+ cell the CR
   ring was drawn in its own background colour and vanished — on exactly the
   high-fit cells most likely to hold an assignment. Stays dashed, so the
   solid-magenta OS / dashed CR distinction still reads. */
.fit-score-table td.fit-score-excellent.fit-role-oc {
    outline-color: #ffffff;
}

.legend-oc {
    border-style: dashed;
}

.console-shell .fit-score-legend {
    justify-content: flex-start;
}

.console-shell .dl-btn-small,
.console-shell .room-role-toggle button {
    min-height: var(--control-height);
}

.console-shell .dl-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.console-shell * {
    letter-spacing: 0;
}

.console-shell .room-seat-label {
    font-family: var(--font);
    font-size: 11.5px;
}

.fit-missing-cell {
    color: var(--text-muted);
    background: var(--surface-muted);
}

.console-shell .download-card {
    max-width: 900px;
}

@media (max-width: 1180px) {
    .console-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .console-kpi:nth-child(3n) {
        border-right: 0;
    }

    .console-kpi:nth-child(n + 4) {
        border-top: 1px solid var(--console-rule);
    }

    .console-group-block {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 760px) {
    .console-title-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .console-actions {
        justify-content: flex-start;
    }
    .console-meta-strip,
    .console-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .console-meta-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .console-meta-item:nth-child(2n) {
        border-right: 0;
    }

    .console-meta-item:nth-child(3) {
        border-right: 1px solid rgba(255, 255, 255, 0.22);
    }

    .console-meta-item:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }

    .console-kpi:nth-child(3n) {
        border-right: 1px solid var(--console-rule);
    }

    .console-kpi:nth-child(2n) {
        border-right: 0;
    }

    .console-kpi:nth-child(n + 3) {
        border-top: 1px solid var(--console-rule);
    }
}

/* Shared interaction and responsive primitives. */
.header-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.header-link,
.header-link-button {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    padding: 8px 0;
}

.header-link-button,
.console-link-button {
    appearance: none;
}

.back-link-inline::before {
    content: "\2190";
}

.console-logout {
    margin: 0;
}

.console-link-button {
    font: inherit;
    cursor: pointer;
    color: #ffffff;
    background: transparent;
}

.console-link {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
}

.console-title-row h1 {
    font-size: 2.5rem;
    line-height: 1.05;
}

.console-hero .status-ok,
.console-hero .status-warn {
    color: #ffffff;
}

.console-tab,
.dashboard-tab,
.room-tab {
    min-height: var(--control-height);
}

.dashboard-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

.admin-table-wrapper {
    margin-top: 12px;
}

.admin-container {
    max-width: 1400px;
}

.admin-form-card,
.admin-safety-card {
    max-width: 760px;
}

.admin-table-wrapper .data-table {
    min-width: 840px;
}

.admin-table-wrapper .role-select {
    min-width: 170px;
}

.actions-cell .btn {
    min-width: max-content;
}

.streams-cell.is-disabled,
.hubs-cell.is-disabled,
#new-streams.is-disabled,
#new-hubs.is-disabled {
    color: var(--text-muted);
    opacity: 0.58;
}

.tooltip:focus-visible {
    outline-color: var(--brand-magenta);
}

@media (max-width: 720px) {
    .container {
        padding: 0;
    }

    .main {
        width: 100%;
        margin: 0;
        padding: 20px 16px 40px;
    }

    .card {
        width: auto;
        max-width: 100%;
        padding: 20px;
        overflow-wrap: anywhere;
    }

    .header-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 16px;
    }

    .console-hero {
        width: 100%;
        margin: 0;
        padding: 24px 16px 16px;
    }

    .console-title-row h1 {
        font-size: 1.875rem;
    }

    .console-purpose {
        font-size: var(--text-sm);
    }

    .console-meta-strip {
        margin-top: 20px;
    }

    .console-toolbar {
        position: relative;
        width: auto;
        margin: 0 -16px 22px;
        padding: 10px 16px 0;
    }

    .console-nav-block,
    .console-tabs {
        width: 100%;
    }

    .console-tabs {
        overscroll-behavior-inline: contain;
    }

    .console-tab,
    .dashboard-tab,
    .room-tab {
        min-height: 44px;
    }

    .dashboard-tabs {
        width: 100%;
        margin-bottom: 0;
        overscroll-behavior-inline: contain;
    }

    .console-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .console-shell .card-header .console-scale-note {
        margin-left: 0;
        text-align: left;
    }

    .console-guide-grid > div:nth-child(2n) {
        border-right: 0;
    }

    .console-guide-grid > div:nth-child(n + 3) {
        border-top: 1px solid var(--console-rule);
    }

    .table-scroll-hint {
        display: block;
    }

    .room-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .room-seating-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Horizontal scrolling lives on .room-table-scroll, which the venture
       panels already size themselves against — the card itself must not
       scroll too, or the panel strip nests inside a second scroller. */
    .room-table-card {
        overflow-x: hidden;
    }

    .console-shell .dashboard-card {
        padding: 20px 16px;
    }
}

@media (max-width: 480px) {
    .card {
        padding: 18px 16px;
    }

    .console-title-row .subtitle {
        overflow-wrap: anywhere;
    }

    .console-hero {
        padding-top: 20px;
    }

    .console-meta-item {
        padding: 10px 11px;
    }

    .console-kpi {
        min-height: 122px;
        padding: 14px;
    }

    .console-kpi strong {
        font-size: 1.65rem;
    }

    .console-kpi.compact strong {
        font-size: 1.35rem;
    }

    .console-kpi em {
        min-height: 0;
        font-size: var(--text-sm);
    }

    .console-guide-grid {
        grid-template-columns: 1fr;
    }

    .console-guide-grid > div,
    .console-guide-grid > div:nth-child(2n) {
        border-right: 0;
    }

    .console-guide-grid > div:nth-child(n + 2) {
        border-top: 1px solid var(--console-rule);
    }

    .dashboard-load-error {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Partial-result warning on the dashboard: a detected group with no schedule. */
.warn-banner {
  padding: 0.75rem 1rem; margin: 0 0 1rem; border-radius: 6px;
  background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
  font-size: 0.9rem; line-height: 1.5;
}
.warn-banner a { color: #92400e; text-decoration: underline; }

/* Founder report affordances. Two entry points, one meaning: open that venture's
   document in a new tab. The Assignments tab gets a labelled action because that is
   where a lead reviews and forwards; the matrix keeps the venture name clickable
   because the row label is the only per-venture target in a dense heatmap. */
.venture-report-link {
  color: inherit; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; cursor: pointer;
}
.venture-report-link:hover,
.venture-report-link:focus-visible { color: var(--brand-magenta); text-decoration-style: solid; }
.report-cue { color: var(--brand-magenta); font-size: .85em; }

.report-action {
  display: inline-flex; align-items: center; gap: .1rem;
  padding: .2rem .55rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: .78rem; font-weight: 600; line-height: 1.5;
  color: var(--brand-navy-2); text-decoration: none; white-space: nowrap;
}
.report-action:hover,
.report-action:focus-visible {
  border-color: var(--brand-magenta); color: var(--brand-magenta);
  background: var(--accent-soft);
}

/* Results console v2: one page, four decision surfaces. */
.results-shell {
    min-height: 100vh;
    background: var(--bg-primary);
}

/* White banner, logo-led. Was a solid navy bar with a text wordmark; the
   lab's mark is navy on white, so the bar had to lighten for it to sit on. */
.results-header {
    background: var(--bg-card);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

/* Banner, gradient rule and tab strip are one continuous white block. As two
   separate cards with a gap between them the tabs read as a floating widget
   rather than part of the masthead. */
.results-header-accent {
    height: 3px;
    background: var(--brand-gradient);
}

.results-tabs {
    width: min(100% - 48px, max(1440px, 80vw));
    margin: 0 auto;
}



.brand-lockup {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.brand-mark {
    display: block;
    width: auto;
    height: 40px;
}

/* The hairline between the lab mark and the product name. */
/* Shown only when the logo file is missing, so the banner still reads as the
   lab rather than showing a broken-image icon. */
.brand-fallback {
    display: none;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-regular);
    color: var(--brand-navy);
    letter-spacing: -0.01em;
}

.brand-fallback b {
    font-weight: var(--weight-bold);
}

.brand-lockup.no-mark .brand-fallback {
    display: inline;
}

.brand-rule {
    width: 1px;
    height: 30px;
    background: var(--border-strong);
}

/* Cohort, run state and account controls share the trailing edge. */
.results-header-side {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
}

.results-header-inner {
    display: flex;
    width: min(100% - 48px, max(1440px, 80vw));
    min-height: 68px;
    align-items: center;
    gap: var(--space-4);
    margin: 0 auto;
    padding: var(--space-3) 0;
}

.results-brand {
    margin: 0 0 2px;
    color: var(--brand-mist);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.environment-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 26px;
    margin: 0 0 var(--space-3);
    padding: 4px 8px;
    border: 1px solid var(--brand-magenta);
    border-radius: var(--radius-sm);
    color: var(--brand-magenta-strong);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.environment-badge-light {
    flex: none;
    margin: 0 0 0 auto;
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.results-header h1 {
    max-width: 700px;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.results-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    /* Tight, because each item now carries its own padding: the hover target is
       the pill, not the word, so they need to read as one cluster rather than
       four separate links. */
    gap: var(--space-1);
    padding-left: var(--space-3);
    margin-left: var(--space-2);
    border-left: 1px solid var(--border);
}

/* These are written for the banner they sit on. That banner used to be navy, so
   the links were white with a white underline; when it became a light card the
   colours were not carried over and the controls went white on white — present,
   focusable, and invisible. They now take the same ink as the rest of the
   header. */
.results-header-actions a,
.results-header-actions button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition:
        color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-out);
}

.results-header-actions a:hover,
.results-header-actions button:hover,
.results-header-actions a:focus-visible,
.results-header-actions button:focus-visible {
    background: var(--brand-mist-soft);
    color: var(--brand-navy);
}

/* The disc is the hover target itself, so the pill behind it would be a second
   shape moving at the same time. */
.results-header-actions .avatar-link {
    padding: 0;
    margin-left: var(--space-1);
}

.results-header-actions .avatar-link:hover,
.results-header-actions .avatar-link:focus-visible {
    background: transparent;
}

.avatar-link:hover .avatar-on-light,
.avatar-link:focus-visible .avatar-on-light {
    background: var(--brand-magenta);
}

.results-header-actions a:active,
.results-header-actions button:active {
    background: var(--brand-mist);
}

.results-header-actions form {
    margin: 0;
}

.results-main {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    padding: 0;
}

/* One column: the cohort controls now sit in a ribbon across the top rather
   than a 260px rail down the left, so the results get the full width. */
.results-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 0;
    width: min(100% - 48px, max(1440px, 80vw));
    margin: 0 auto;
    padding: var(--space-5) 0 72px;
    align-items: start;
}

.results-sidenav {
    grid-column: 1;
    grid-row: 1;
    /* Sticks to the top edge so the cohort in view is always named, which is
       what the left rail was doing with top: var(--space-6). */
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-5);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}


/* Label and picker side by side: stacked, they made the ribbon two rows tall
   for no gain. */
.results-group-control {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.results-group-control:focus-within {
    outline: none;
}

.results-group-label {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
}

.results-select-shell {
    position: relative;
    display: block;
}

.results-group-trigger {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.35;
    text-align: left;
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        background-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard);
}

.results-select-chevron {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin: -4px 2px 0 0;
    border-right: 2px solid var(--brand-navy-2);
    border-bottom: 2px solid var(--brand-navy-2);
    pointer-events: none;
    transform: rotate(45deg);
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        transform var(--motion-base) var(--ease-out);
}

.results-group-trigger:not(:disabled):hover {
    border-color: var(--brand-navy-2);
    background: var(--bg-card-hover);
}

.results-group-trigger:not(:disabled):hover .results-select-chevron {
    border-color: var(--brand-magenta-strong);
}

.results-group-trigger:focus-visible {
    border-color: var(--brand-navy-2);
    outline: 2px solid var(--brand-magenta);
    outline-offset: 2px;
    box-shadow: none;
}

.results-group-trigger[aria-expanded="true"] {
    border-color: var(--brand-navy-2);
    background: var(--brand-mist-soft);
}

.results-group-trigger[aria-expanded="true"] .results-select-chevron {
    margin-top: 3px;
    border-color: var(--brand-magenta-strong);
    transform: rotate(225deg);
}

.results-group-trigger:disabled {
    opacity: 1;
    color: var(--text-secondary);
    cursor: default;
}

.results-group-trigger:disabled .results-select-chevron {
    border-color: var(--text-muted);
    opacity: 0.65;
}

.results-group-menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 240px;
    overflow-y: auto;
    padding: var(--space-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(20, 29, 71, 0.16);
    transform-origin: top center;
}

.results-group-menu[hidden] {
    display: none;
}

.results-group-option {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.35;
    text-align: left;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
}

.results-group-option + .results-group-option {
    margin-top: 2px;
}

.results-group-option:hover,
.results-group-option:focus-visible {
    outline: none;
    background: var(--brand-mist-soft);
    color: var(--brand-navy);
}

.results-group-option[aria-selected="true"] {
    background: var(--brand-mist-soft);
    box-shadow: inset 3px 0 0 var(--brand-magenta);
    color: var(--brand-navy);
    font-weight: var(--weight-semibold);
}

.results-group-option::after {
    width: 9px;
    height: 5px;
    flex: 0 0 9px;
    border-bottom: 2px solid var(--brand-magenta-strong);
    border-left: 2px solid var(--brand-magenta-strong);
    content: "";
    opacity: 0;
    transform: translateY(-1px) rotate(-45deg);
}

.results-group-option[aria-selected="true"]::after {
    opacity: 1;
}

.results-run-state {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.results-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    transition:
        background-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard);
}

.results-run-state.needs-attention .results-state-dot {
    background: var(--warning);
}

/* Tab strip along the bottom of the banner, reading from its left edge. */
.results-index {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-6);
}

.results-index a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    transition:
        color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-base) var(--ease-standard);
}

.results-index a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: transparent;
    transition: background var(--motion-base) var(--ease-standard);
}

.results-index a:hover,
.results-index a:focus-visible {
    color: var(--text-primary);
}

.results-index a:hover::after,
.results-index a:focus-visible::after {
    background: var(--border-strong);
}

/* Active tab: underlined in the brand magenta rather than boxed. A filled pill
   read as a button sitting on the masthead instead of part of it. */
.results-index a[aria-current] {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.results-index a[aria-current]::after {
    background: var(--brand-gradient);
}

.results-index a span {
    color: var(--brand-magenta-strong);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.results-section {
    scroll-margin-top: var(--space-6);
    padding: 40px 44px 48px;
    margin-bottom: var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition:
        border-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard);
}

.results-section:last-of-type {
    margin-bottom: 0;
}

/* No max-width: the header sits inside a card that is already bounded, so a
   second cap only stopped the intro line short of the card's own edge and left
   a band of dead space to its right. */
.results-section-header {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}

/* A section that carries a right-hand badge (the cohort name) gets a third
   column so the badge sits on the heading's own row. */
.results-section-header.has-section-badge {
    grid-template-columns: 64px minmax(0, 1fr) auto;
}

.results-section-badge {
    align-self: center;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--brand-navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.results-section-number {
    min-height: 52px;
    padding: 2px var(--space-4) 0 0;
    border-right: 3px solid var(--brand-magenta);
    color: var(--brand-magenta-strong);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.results-section h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: var(--weight-semibold);
    line-height: 1.15;
}

.results-section-header p {
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.results-inline-status {
    min-height: 24px;
    margin: 0 0 var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.role-symbol {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--brand-magenta);
    border-radius: 50%;
    background: var(--brand-magenta);
    color: #ffffff;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: var(--weight-bold);
    transition:
        background-color var(--motion-base) var(--ease-standard),
        border-color var(--motion-base) var(--ease-standard),
        color var(--motion-base) var(--ease-standard),
        transform var(--motion-base) var(--ease-out);
}

.role-symbol.role-oc {
    border-color: var(--brand-navy-2);
    background: #ffffff;
    color: var(--brand-navy-2);
}

/* One horizontal line per role when collapsed: symbol, name, fit,
   summary, preference, and the explanation toggle all inline — so CR's
   line follows immediately after OS's, not three stacked blocks. */
.role-detail-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.role-detail-name {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.role-detail-name > span {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.role-detail-name > strong {
    font-size: var(--text-base);
}

.role-detail-summary-inline {
    color: var(--text-secondary);
    font-size: var(--text-base);
}

.role-detail-preference-inline {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.role-detail-preference-inline.is-influenced {
    color: var(--brand-magenta-strong);
}

/* Keep the disclosure on a stable full-width line. Changing its flex basis
   only after opening caused the surrounding content to jump before the body
   animation could begin. */
.full-explanation {
    flex-basis: 100%;
    min-width: 0;
}

/* Two of these now stack under each role line ("…of the match", "Why this
   mentor rather than another?"), and they are the main thing a reader is
   hunting for in this section — so they are sized as controls, not as
   footnotes. */
.full-explanation > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: max-content;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--brand-mist-soft);
    color: var(--brand-navy-2);
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    transition:
        color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-out);
}

.full-explanation > summary::marker {
    content: "";
}

.full-explanation > summary::-webkit-details-marker {
    display: none;
}

.full-explanation > summary::before {
    display: inline-block;
    color: currentColor;
    content: "▸";
    transform-origin: center;
    transition: transform var(--motion-base) var(--ease-out);
}

.full-explanation[open]:not(.is-closing) > summary::before {
    transform: rotate(90deg);
}

.full-explanation > summary:hover {
    border-color: var(--brand-navy-2);
    background: var(--brand-mist);
    color: var(--brand-navy);
    transform: translateX(2px);
}

.full-explanation > summary:active {
    transform: translateX(0);
}

/* Open state: the label stops floating as a lone pill and becomes the head
   of one connected panel. It stretches to full width, drops its bottom edge,
   and the body hangs directly off it inside a single shared border — so the
   heading and its content read as one piece instead of two stacked blocks. */
.full-explanation[open] > summary {
    width: 100%;
    justify-content: flex-start;
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.full-explanation[open] > summary:hover {
    transform: none;
}

/* JavaScript animates this wrapper between measured pixel heights. This is
   reliable in table/flex layouts and keeps interrupted clicks continuous. */
.full-explanation-content {
    overflow: hidden;
}

.full-explanation-body {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-top: none;
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    background: var(--bg-card);
}

.full-explanation h4,
.objective-reasoning h4 {
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.full-explanation section p,
.full-explanation li {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.55;
}

.objective-reasoning {
    padding: 0 0 var(--space-5);
}

.objective-reasoning ul {
    margin: 0;
    padding-left: 18px;
}

.role-detail.is-unassigned {
    color: var(--text-muted);
}

/* A solid colored chip, not a bare left-border label — reads as a status
   badge at a glance instead of another line of plain text. */
.fit-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    transition:
        color var(--motion-fast) var(--ease-standard),
        background-color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-out);
}

.fit-state.fit-excellent { background: var(--data-seq-7); color: #ffffff; }
.fit-state.fit-strong { background: var(--data-seq-6); color: #ffffff; }
.fit-state.fit-moderate { background: var(--data-seq-4); color: var(--text-primary); }
.fit-state.fit-limited { background: var(--data-seq-2); color: var(--text-primary); }
.fit-state.fit-review { background: var(--data-fit-review); color: #ffffff; }
.fit-state.fit-unavailable { background: var(--border-strong); color: var(--text-primary); }

.pair-inspector {
    min-height: 280px;
    margin-top: var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand-navy);
    border-radius: var(--radius);
    background: #ffffff;
    transition:
        border-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard);
}

.pair-inspector-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.pair-inspector-kicker {
    margin: 0 0 var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
}

.pair-inspector h3 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
}

.pair-inspector h3 span {
    color: var(--brand-magenta);
    font-weight: var(--weight-regular);
}

.pair-inspector-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
}

.pair-report-link {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    transition:
        color var(--motion-fast) var(--ease-standard),
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-out);
}

.pair-report-link:hover,
.pair-report-link:focus-visible {
    border-color: var(--brand-navy-2);
    background: var(--brand-mist-soft);
    color: var(--brand-navy);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.pair-report-link:active {
    box-shadow: none;
    transform: translateY(0);
}

.pair-inspector-states {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.pair-inspector-states span {
    padding: 3px 8px;
    border-left: 2px solid var(--brand-mist);
    background: var(--brand-mist-soft);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

/* Stacked, one block per row: Profile fit, then Current-needs fit. Side by
   side these read as two narrow columns the eye has to jump between. */
.reasoning-grid,
.reasoning-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5) 0;
}

.reasoning-detail-grid {
    border-top: 1px solid var(--border);
}

.pair-inspector h4 {
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.pair-inspector section p,
.pair-inspector li {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.pair-inspector ul {
    margin: 0;
    padding-left: 18px;
}

/* Signals used to be a fixed-width "Objective N" label column, and this rule
   forced every span inside to 82px. With the badge + body structure it was
   stretching the O1 chip into a wide bar, so it is scoped to the goal line. */
.objective-signal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.explanation-unavailable,
.reasoning-missing {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--warning);
    background: var(--warning-bg);
    color: #73410a;
    font-size: var(--text-sm);
}

.explanation-unavailable {
    display: block;
}

.explanation-unavailable p {
    margin-top: var(--space-1);
}

.reasoning-missing {
    margin-top: var(--space-3);
}

.matrix-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.matrix-key span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.matrix-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(18, 49, 58, 0.2);
}

.matrix-swatch.fit-excellent,
.matrix-cell.fit-excellent {
    background: var(--data-seq-7);
}

.matrix-swatch.fit-strong,
.matrix-cell.fit-strong {
    background: var(--data-seq-6);
}

.matrix-swatch.fit-moderate,
.matrix-cell.fit-moderate {
    background: var(--data-seq-4);
}

.matrix-swatch.fit-limited,
.matrix-cell.fit-limited {
    background: var(--data-seq-2);
}

.matrix-swatch.fit-unavailable,
.matrix-cell.fit-unavailable {
    background: #ffffff;
}

.matrix-view-control {
    display: inline-flex;
    max-width: 100%;
    margin-bottom: var(--space-5);
    border: 1px solid var(--border-strong);
    background: #ffffff;
}

.matrix-view-control button {
    min-height: 40px;
    padding: 8px 14px;
    border: 0;
    border-right: 1px solid var(--border-strong);
    background: #ffffff;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    transition:
        color var(--motion-fast) var(--ease-standard),
        background-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
}

.matrix-view-control button:last-child {
    border-right: 0;
}

.matrix-view-control button[aria-pressed="true"] {
    background: var(--brand-navy-2);
    color: #ffffff;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.28);
}

.matrix-view-control button:not([aria-pressed="true"]):hover {
    background: var(--brand-mist-soft);
    color: var(--brand-navy);
}

.matrix-view-control button:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--brand-magenta);
    outline-offset: 2px;
}

.matrix-legends {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.matrix-legends .matrix-key {
    margin-bottom: 0;
}

.matrix-marker-key {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.matrix-symbol {
    display: inline-flex;
    width: 20px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-family: var(--mono);
    font-size: 10px;
    font-style: normal;
    font-weight: var(--weight-semibold);
    line-height: 1;
}

.matrix-symbol.symbol-preference {
    color: var(--brand-magenta-strong);
    font-size: 11px;
}

.matrix-symbol.symbol-os,
.matrix-symbol.symbol-oc {
    border: 1px solid var(--brand-magenta-strong);
    background: #ffffff;
    color: var(--brand-magenta-strong);
}

.matrix-symbol.symbol-oc {
    border-color: var(--brand-navy-2);
    color: var(--brand-navy-2);
}

.matrix-symbol.symbol-unavailable {
    border: 1px solid var(--border-strong);
    background: #ffffff;
    color: var(--text-muted);
    font-size: 9px;
}

.matrix-symbol.symbol-ineligible {
    border: 1px solid var(--text-muted);
    background: #ffffff;
    color: var(--text-secondary);
    font-size: 9px;
}

.matrix-symbol.symbol-selected {
    border: 3px solid var(--brand-magenta);
    background: #ffffff;
}

.matrix-wrap {
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--border);
    background: #ffffff;
    overscroll-behavior-inline: contain;
}

.results-matrix {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.results-matrix th,
.results-matrix td {
    min-width: 42px;
    padding: 0;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

.results-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 42px;
    min-width: 42px;
    height: 128px;
    background: var(--brand-mist-soft);
    vertical-align: bottom;
}

.results-matrix thead th:first-child {
    left: 0;
    z-index: 4;
    width: 190px;
    min-width: 190px;
    height: auto;
    padding: var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.03em;
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
}

.results-matrix thead th:not(:first-child) span {
    display: block;
    width: 42px;
    overflow: hidden;
    padding: 8px 0;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.results-matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    padding: 0 var(--space-3);
    border-right: 1px solid var(--border);
    background: #ffffff;
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-align: left;
    overflow-wrap: anywhere;
}

.matrix-cell {
    position: relative;
    display: block;
    width: 100%;
    min-width: 42px;
    height: 42px;
    border: 0;
    cursor: pointer;
    transform: translateZ(0);
    transition:
        filter var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-standard),
        outline-color var(--motion-fast) var(--ease-standard);
}

/* Hover is a transient peek (thin ink outline, tooltip at the pointer);
   selection is pinned to the panel below (thick magenta ring). They read
   differently on purpose — before, both drew the same outline, so there was
   no way to tell what the panel was actually showing. */
.matrix-cell:not(.is-static):hover,
.matrix-cell:focus-visible {
    z-index: 1;
    outline: 2px solid var(--brand-ink);
    outline-offset: -2px;
    filter: saturate(1.08) brightness(1.04);
    transform: scale(1.07);
}

.matrix-cell.is-selected {
    z-index: 2;
    outline: 3px solid var(--brand-magenta);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 1px #ffffff;
    transform: scale(1.08);
}

.matrix-cell:not(.is-static):active {
    filter: saturate(1.02);
    transform: scale(0.98);
}

/* A cell with no seating decision behind it — a mentor barred from OS/CR duty,
   or a pair with no score. It still shows its band so the matrix stays
   complete, but it does not pretend to be a control. */
.matrix-cell.is-static {
    cursor: default;
}

.matrix-tooltip {
    position: fixed;
    z-index: 60;
    display: flex;
    max-width: 320px;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-top: 3px solid var(--brand-navy);
    border-radius: var(--radius-sm);
    background: #ffffff;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

.matrix-tooltip:not([hidden]) {
    animation: dashboard-tooltip-in var(--motion-fast) var(--ease-out) both;
}

.matrix-tooltip[hidden] {
    display: none;
}

.matrix-tooltip strong {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.matrix-tooltip-fit {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.matrix-tooltip-states {
    color: var(--brand-magenta);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.matrix-tooltip-why {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Deliberately louder than the rest of the tooltip — this is the one line
   telling the reader the cell is clickable, which testing showed people were
   missing entirely when it read as plain muted text. */
.matrix-tooltip-hint {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--brand-magenta);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

/* Not-role-eligible is carried by the NE tag below, not by a second colour
   scheme laid over the fit bands — the hatch that used to fill these cells
   erased the very score the matrix is here to show. A slight fade is all the
   colour does now. */
/* The fade says "this mentor cannot take a seat", and it has to say only that.
   Element-level `opacity` composited the whole cell as a group, so it also
   dimmed the hover outline, the magenta selection ring and the NE tag itself —
   fine while the cell was inert, wrong now that it is a control and those are
   the marks saying "this is the cell you are reading".

   A wash under the content does the same job to the fill alone. The backdrop
   here is white (.matrix-wrap), so 38% white over the band is what opacity 0.62
   was already producing: the resting cell is unchanged. The pseudo-element
   paints before the positioned tag and markers and outlines paint after
   everything, so ring, NE tag and role marker now stay full strength in every
   state — and because nothing about the fade is state-dependent any more, there
   is no opacity step to animate (it was absent from the transition list above,
   so it snapped while the rest of the hover eased). */
.matrix-cell.is-ineligible::before {
    content: "";
    position: absolute;
    z-index: 0;
    background: rgba(255, 255, 255, 0.38);
    pointer-events: none;
    inset: 0;
}

/* The account control in every shared header: initials in a disc, opening the
   profile page. Small on purpose — it is a way in, not a thing to look at. */
.avatar-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.avatar {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    transition: background-color var(--motion-fast) var(--ease-standard);
}

/* Scoped to the navy header. Unscoped, this beat .avatar-on-light on
   specificity and filled the dashboard's disc with translucent white on a white
   banner, taking its white initials with it: hovering made the control vanish. */
.header .avatar-link:hover .avatar,
.header .avatar-link:focus-visible .avatar {
    background: rgba(255, 255, 255, 0.24);
}

/* The dashboard banner is a light card, not the navy header, so the translucent
   white disc would vanish on it exactly the way the action links did. */
.avatar-on-light {
    border-color: transparent;
    background: var(--brand-navy-2);
}

/* On the profile page itself the disc sits on a white card, so it needs the
   brand fill rather than the translucent one that works on the navy header. */
.avatar-large {
    width: 56px;
    height: 56px;
    border-color: transparent;
    background: var(--brand-navy-2);
    font-size: 19px;
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.profile-identity h2 {
    margin: 0 0 2px;
}

.profile-identity p {
    margin: 0;
}

.profile-identity .badge {
    margin-right: var(--space-1);
}

/* Bottom-left corner tag: "NE" for not role eligible, "n/a" where no score was
   recorded. Deliberately quieter than the OS/CR markers — those name a
   decision, this one names an absence. */
.matrix-state-tag {
    position: absolute;
    right: 2px;
    bottom: 2px;
    padding: 1px 3px;
    border: 1px solid var(--border-strong);
    background: #ffffff;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: var(--weight-semibold);
    line-height: 1;
}

.matrix-state-tag.is-ineligible {
    border-color: var(--text-muted);
    color: var(--text-secondary);
}

.matrix-preference-marker {
    position: absolute;
    bottom: 3px;
    left: 3px;
    padding: 1px 2px 0;
    background: #ffffff;
    color: var(--brand-magenta-strong);
    font-size: 8px;
    line-height: 1;
}

/* A notch larger and bolder than the state tags below them, so an assigned
   seat still reads first in a cell that also carries a tag. */
.matrix-role-marker {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 21px;
    padding: 2px 3px 1px;
    border: 1px solid var(--brand-magenta-strong);
    background: #ffffff;
    color: var(--brand-magenta-strong);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: var(--weight-bold);
    line-height: 1;
    text-align: center;
}

.matrix-role-marker.is-oc {
    border-color: var(--brand-navy-2);
    color: var(--brand-navy-2);
}

.matrix-empty {
    width: 42px;
    height: 42px;
    background: #ffffff;
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-align: center;
}

.matrix-inspector {
    margin-top: var(--space-5);
}

.results-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: min(100% - 48px, max(1440px, 80vw));
    margin: 0 auto;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.results-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-secondary);
}

.footer-mark {
    display: block;
    width: auto;
    height: 34px;
}

.results-footer-meta {
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .results-header-inner,
    .results-main,
    .results-footer {
        width: min(100% - 40px, 1440px);
    }

    .results-review-dock-inner {
        grid-template-columns: minmax(380px, 0.9fr) minmax(420px, 1.1fr);
        width: min(100% - 40px, 1440px);
    }

    .results-controlbar {
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-4);
        align-content: center;
        padding: var(--space-2) var(--space-4) var(--space-2) 0;
    }

    .results-group-control {
        flex: 1 0 100%;
    }

    .results-run-state {
        font-size: var(--text-xs);
    }

    .results-utilities {
        margin-left: auto;
    }

    .results-index a {
        padding-inline: var(--space-3);
    }

    .assigned-role-row {
        grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.6fr);
    }

    .assigned-role-row > .match-preference {
        grid-column: 2;
        padding-top: var(--space-4);
        padding-left: 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }
}

@media (max-width: 800px) {
    .results-header-inner,
    .results-main,
    .results-footer {
        width: calc(100% - 32px);
    }

    .results-header-inner {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-3);
        padding: 12px 0;
    }

    .results-header h1 {
        font-size: 1.25rem;
    }

    .results-header-actions {
        justify-content: flex-start;
    }

    .results-review-dock-inner {
        display: block;
        width: calc(100% - 32px);
    }

    .results-controlbar {
        display: grid;
        grid-template-columns: minmax(140px, 1fr) auto auto;
        gap: var(--space-2);
        align-items: center;
        min-height: 0;
        padding: 6px 0;
        border-right: 0;
    }

    .results-group-control {
        display: grid;
        grid-column: auto;
        flex: initial;
        width: auto;
        gap: 2px;
    }

    .results-group-control select {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding-block: 6px;
    }

    .results-group-control > span {
        font-size: 10px;
        line-height: 1;
    }

    .results-run-state {
        gap: 5px;
        white-space: nowrap;
    }

    .results-utilities {
        margin-left: 0;
    }

    .results-utilities > summary {
        min-height: 36px;
        white-space: nowrap;
    }

    .results-utility-popover {
        right: -1px;
    }

    .results-section {
        padding: 36px 0 44px;
    }

    .results-section-header {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: var(--space-4);
        margin-bottom: var(--space-6);
    }

    .results-section-number {
        min-height: 46px;
        padding-right: var(--space-3);
        font-size: 1.625rem;
    }

    .results-section h2 {
        font-size: var(--text-2xl);
    }

    .venture-review-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: var(--space-3);
        padding: 6px 0;
    }

    .venture-review-select {
        width: 100%;
    }

    .venture-review-select select {
        min-height: 36px;
        padding-block: 6px;
    }

    .venture-review-stepper {
        width: auto;
        gap: var(--space-1);
        justify-content: flex-end;
    }

    .venture-review-stepper button {
        width: 36px;
        height: 36px;
    }

    .venture-review-stepper span {
        min-width: 48px;
    }

    .selected-venture-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-3);
    }

    .assigned-role-row,
    .assigned-role-row.is-unassigned {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .assigned-role-row > .match-preference,
    .assigned-role-detail,
    .assigned-role-row > .exact-score-detail,
    .assigned-role-row > .decision-note {
        grid-column: 1;
    }

    .assigned-role-row > .match-preference {
        padding: var(--space-4) 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .assigned-role-detail > summary,
    .mentor-compare > summary,
    .exact-score-detail summary,
    .comparison-exact summary {
        width: auto;
    }

    .mentor-compare-body {
        grid-template-columns: 1fr;
    }

    .alternative-detail {
        padding-top: var(--space-5);
        padding-left: 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .pair-inspector {
        min-height: 0;
        padding: var(--space-5) var(--space-4);
    }

    .pair-inspector-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .pair-inspector-actions {
        justify-content: flex-start;
    }

    .reasoning-grid,
    .reasoning-detail-grid,
    .exact-score-detail dl {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .reasoning-missing {
        align-items: flex-start;
        flex-direction: column;
    }

    .comparison-facts {
        grid-template-columns: 1fr;
    }

    .comparison-fact,
    .comparison-fact:nth-child(odd),
    .comparison-fact:nth-child(even) {
        padding: var(--space-4) 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        border-left: 0;
    }

    .comparison-fact:last-child {
        border-bottom: 0;
    }

    .comparison-key {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .matrix-key {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .matrix-view-control {
        display: flex;
        width: 100%;
    }

    .matrix-view-control button {
        flex: 1 1 50%;
        line-height: 1.3;
        white-space: normal;
    }

    .results-matrix thead th {
        width: 44px;
        min-width: 44px;
    }

    .results-matrix thead th:first-child,
    .results-matrix tbody th {
        width: 136px;
        min-width: 136px;
        max-width: 136px;
    }

    .matrix-cell,
    .matrix-empty {
        min-width: 44px;
        height: 44px;
    }
}

@media (max-width: 420px) {
    .results-header-actions {
        width: 100%;
        gap: var(--space-4);
    }

    .results-header-actions a,
    .results-header-actions button {
        min-height: 32px;
    }

    .matrix-key {
        grid-template-columns: 1fr;
    }

    .matrix-legends .matrix-key {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .matrix-marker-key span:first-child {
        grid-column: 1 / -1;
    }
}


/* ════════════════════════════════════════════════════════════════════
   Overview — cohort-wide KPI strip. Renders by default; there is no
   per-venture landing view above this.
   ════════════════════════════════════════════════════════════════ */
/* A fixed 2-column grid so 4 tiles always form a 2x2 block — auto-fit
   would wrap 3-then-1 at in-between widths, which read as lopsided. */
/* Two labelled groups stacked, each holding a pair of cards. The grouping is
   the point: "what founders asked for" and "what the fit scores recommend"
   answer different questions, and four unlabelled tiles in a row invited the
   reader to compare figures that are not comparable. */
.kpi-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.kpi-group-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

/* The provenance of the figures, set quieter than the heading it trails. */
.kpi-group-note {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--text-muted);
}

/* No max-width: the intro sits above a full-width pair of cards, and capping
   it at 78ch left the line breaking early with a band of dead space to the
   right of it. */
.kpi-group-intro {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.55;
}

.kpi-group-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 1100px) {
    .kpi-group-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

.kpi-tile {
    display: grid;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    font: inherit;
    text-align: left;
    animation: dashboard-content-in var(--motion-slow) var(--ease-out) backwards;
}

/* Ring with its denominator directly beneath: "83%" alone never says of what,
   and review kept asking. */
.kpi-figure-col {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
}

.kpi-caption {
    max-width: 9rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
    text-align: center;
}

.kpi-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

/* One piece of context per card: the ceiling the figure is measured against,
   or a stricter cut of the same number. Tinted to its group's accent. */
.kpi-pill {
    display: inline-block;
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--brand-magenta-strong);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
}

.kpi-tile.is-attention {
    border-top-color: var(--warning);
}

.kpi-tile.is-info {
    border-top-color: var(--brand-magenta);
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-navy-2);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition:
        color var(--motion-fast) var(--ease-standard),
        text-underline-offset var(--motion-fast) var(--ease-standard);
}

.link-button:hover,
.link-button:focus-visible {
    color: var(--brand-navy);
    text-underline-offset: 4px;
}

/* The figure column, then the wording column. The number is the thing read
   from across the room, so it takes the full height of the card on the left
   instead of sitting small above a paragraph. */
.kpi-figure {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
}

/* Ring and number share one grid cell, so the number sits centred inside the
   ring rather than beside it. */
.kpi-figure > * {
    grid-area: 1 / 1;
}

.kpi-label {
    display: block;
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

.kpi-detail {
    display: block;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.kpi-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

/* Inside the ring there is less room, so the percentage steps down a little —
   still more than twice the size it used to be. */
.kpi-figure.has-ring .kpi-value {
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}

.kpi-ring {
    width: 84px;
    height: 84px;
}

.kpi-ring circle:last-child {
    animation: dashboard-ring-in 520ms var(--ease-out) backwards;
}

/* ════════════════════════════════════════════════════════════════════
   The schedule — one card per table (fixed mentor group), a meeting rail
   showing the ventures that rotate through it. Table-centric because the
   solver pins mentors to a table for the whole shift; ventures move.
   ════════════════════════════════════════════════════════════════ */
.schedule-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Each badge and its label are one flex item, so a narrow screen breaks
   between the two pairs instead of stranding "Critiquer session" under a
   lone CR badge. */
.schedule-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Shared role marker, used both in the legend and on each meeting slot. The two
   selectors must stay together: splitting them once left .schedule-role with no
   size and no radius, so the in-table OS/CR chips rendered as bare squares while
   the legend still looked correct. */
.schedule-role,
.schedule-legend-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    line-height: 1;
}

.schedule-role.is-os,
.schedule-legend-role.is-os {
    background: var(--brand-magenta);
    color: #ffffff;
}

.schedule-role.is-oc,
.schedule-legend-role.is-oc {
    background: var(--brand-navy-2);
    color: #ffffff;
}

.schedule-role.is-filler,
.schedule-legend-role.is-filler {
    background: var(--surface-muted);
    color: var(--text-secondary);
}

.venture-table.schedule-table {
    table-layout: auto;
    min-width: 900px;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

/* A rule on every cell edge: with the marker pinned right, column lines are
   what tie it to its own meeting. */
.venture-table.schedule-table th,
.venture-table.schedule-table td {
    border: 1px solid var(--border-strong);
}

.venture-table.schedule-table thead th {
    border-bottom: 2px solid var(--brand-navy);
}

.schedule-summary-row {
    background: var(--brand-mist-soft);
}

.schedule-cell-table {
    width: 74px;
    color: var(--brand-navy);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

/* A plain percentage on purpose: under table-layout: fixed a clamp() that
   contains a percentage is ignored and the column falls back to auto. */
.schedule-cell-mentors {
    min-width: 380px;
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

.schedule-mentors {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.schedule-mentor {
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.schedule-mentor.is-empty {
    background: transparent;
    font-style: italic;
}

/* Fixed to the viewport, so the table's horizontal scroll container cannot
   clip it the way an in-flow or absolutely positioned tip would. */
.role-tooltip {
    position: fixed;
    z-index: 60;
    max-width: 260px;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--brand-navy);
    color: #ffffff;
    font-size: var(--text-sm);
    line-height: 1.35;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

.role-tooltip[hidden] {
    display: none;
}

.schedule-cell {
    min-width: 150px;
}

/* Venture on the left, marker pinned right: every marker in the column lines
   up, instead of trailing whatever length the venture name happens to be. */
.schedule-cell-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.schedule-cell-inner .schedule-role {
    flex: 0 0 auto;
    order: 2;
    margin-top: 1px;
}

.schedule-cell-venture {
    display: inline;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    line-height: 1.25;
}

/* The OS/CR marker next to the venture; the mentor name lives on its tooltip. */
.schedule-cell .schedule-role {
    margin-left: 8px;
    vertical-align: middle;
    cursor: help;
}


/* ════════════════════════════════════════════════════════════════════
   LRD order — ordered venture presentation slots.
   ════════════════════════════════════════════════════════════════ */
.lrd-schedule-grid {
    display: grid;
    gap: var(--space-6);
}

/* The table carries its own dark outer edge so it reads as one object, with
   the light rules kept for the cells inside it. */
.lrd-order-frame {
    margin-bottom: var(--space-4);
    border: 2px solid var(--brand-navy);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #ffffff;
}

.lrd-order-table {
    min-width: 640px;
}

.lrd-order-table .lrd-order-column {
    width: 12%;
}

.lrd-order-table .lrd-venture-column {
    width: 34%;
}

.lrd-order-table .lrd-mentor-column {
    width: 27%;
}

/* Every cell is bordered, so the section reads as a table rather than as rows
   with a stray rule on two sides. */
/* A rule on every edge of every cell: with border-collapse these meet to form
   continuous vertical column separators as well as the row rules. */
.lrd-order-table th,
.lrd-order-table td {
    border: 1px solid var(--border-strong);
}

.venture-table.lrd-order-table {
    border-collapse: collapse;
}

/* Two classes on purpose: the shared .venture-table thead rule sits later in
   this file, so an equal-specificity selector would lose to it. */
.venture-table.lrd-order-table thead th {
    border-bottom: 2px solid var(--brand-navy);
    background: var(--surface-muted);
    color: var(--brand-navy);
    font-size: var(--text-sm);
}

.lrd-order-row {
    --lrd-accent: var(--brand-mist);
    --lrd-tint: #ffffff;
    background: var(--lrd-tint);
}

.lrd-order-row:hover {
    background: color-mix(in srgb, var(--lrd-tint) 78%, var(--brand-mist-soft));
}

.lrd-order-rank {
    color: var(--brand-navy);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
}

.lrd-order-company {
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
}

.lrd-order-mentor {
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: 1.35;
}

.lrd-order-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    width: fit-content;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.lrd-order-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lrd-legend-swatch {
    width: 6px;
    height: 16px;
    border-radius: 2px;
    background: var(--border-strong);
}

.lrd-legend-weak {
    background: var(--rating-weak);
}

.lrd-legend-medium {
    background: var(--rating-mid);
}

.lrd-legend-best {
    background: var(--rating-best);
}

.lrd-band-excellent,
.lrd-band-strong {
    --lrd-accent: var(--rating-best);
    --lrd-tint: var(--rating-best-bg);
}

.lrd-band-moderate {
    --lrd-accent: var(--rating-mid);
    --lrd-tint: var(--rating-mid-bg);
}

.lrd-band-limited {
    --lrd-accent: var(--rating-weak);
    --lrd-tint: var(--rating-weak-bg);
}

.lrd-band-unavailable {
    --lrd-accent: var(--brand-mist);
}

@media (max-width: 780px) {
    .results-section-header.has-section-badge {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .results-section-badge {
        grid-column: 2;
        justify-self: start;
        margin-top: var(--space-3);
    }
}

/* The venture-level read of the same rotation, behind a disclosure so the
   table-level view stays the default. */
.schedule-journey-toggle {
    margin-top: var(--space-4);
}

.schedule-journey-lead {
    margin-bottom: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.venture-table.schedule-journey-table {
    table-layout: auto;
    min-width: 760px;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.venture-table.schedule-journey-table th,
.venture-table.schedule-journey-table td {
    border: 1px solid var(--border-strong);
}

.venture-table.schedule-journey-table thead th {
    border-bottom: 2px solid var(--brand-navy);
}

.venture-table.schedule-journey-table thead th {
    background: var(--surface-muted);
    color: var(--brand-navy);
    text-align: center;
}

.venture-table.schedule-journey-table thead th:first-child {
    text-align: left;
}

/* The venture is the row's subject, so it is centred, bold and sits on a
   tinted column that separates it from the rounds it travels through. */
.venture-table.schedule-journey-table tbody th {
    background: var(--surface-muted);
    color: var(--brand-navy);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    text-align: center;
    vertical-align: middle;
}

.venture-table.schedule-journey-table tbody tr:nth-child(even) td {
    background: var(--bg-card-hover);
}

.venture-table.schedule-journey-table tbody tr:hover td {
    background: var(--brand-mist-soft);
}

.schedule-journey-table-id {
    display: block;
    margin-bottom: 2px;
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.schedule-journey-mentors {
    display: block;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════
   Assignments — one row per venture, expanding to OS/CR sub-content.
   ════════════════════════════════════════════════════════════════ */
.table-scroll {
    overflow-x: auto;
}

.venture-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    table-layout: fixed;
}

/* table-layout is fixed, so these must total 100% — the LRD order column was
   added to this table and the rest were rebalanced to make room for it. */
.venture-table .lrd-order-column {
    width: 8%;
}

.venture-table .venture-column {
    width: 24%;
}

.venture-table .setter-column,
.venture-table .critiquer-column {
    width: 25%;
}

.venture-table .fit-column {
    width: 18%;
}

/* Sized for the standalone LRD table it came from; inside the assignments
   table it sits next to ordinary body text and should not tower over it. */
.venture-table .lrd-order-rank {
    font-size: var(--text-base);
}

.venture-table thead th {
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--brand-navy);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.03em;
    text-align: left;
    text-transform: uppercase;
}

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

/* The clickable affordance was reported as not obvious — a tinted
   background plus a hover/focus state that darkens it, rather than relying
   on cursor alone. */
.venture-summary-row {
    cursor: pointer;
    background: var(--brand-mist-soft);
    transition:
        background-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard),
        opacity var(--motion-base) var(--ease-standard);
    animation: dashboard-row-in var(--motion-slow) var(--ease-out) backwards;
    animation-delay: calc(var(--row-index, 0) * 30ms);
}

.venture-summary-row:hover,
.venture-summary-row:focus-visible {
    background: var(--brand-mist);
    outline: 2px solid transparent;
    box-shadow: inset 3px 0 0 var(--brand-navy-2);
}

/* Stays highlighted after the click that opened it — not just on hover —
   so it's clear which row is open and that clicking it again collapses it. */
.venture-summary-row[aria-expanded="true"] {
    background: var(--brand-mist);
    box-shadow: inset 3px 0 0 var(--brand-magenta);
}

.venture-summary-row td:first-child {
    font-weight: var(--weight-semibold);
}

.venture-summary-row td:first-child::before {
    display: inline-block;
    margin-right: var(--space-2);
    color: var(--brand-navy-2);
    content: "▸";
    transform-origin: center;
    transition: transform var(--motion-base) var(--ease-out);
}

.venture-summary-row[aria-expanded="true"] td:first-child::before {
    transform: rotate(90deg);
}

.role-cell {
    white-space: nowrap;
}

.role-cell-empty {
    color: var(--text-muted);
}

.medal {
    margin-right: 4px;
}

.venture-detail-row td {
    padding: 0;
    border-bottom: 1px solid var(--border-strong);
}

/* Height is measured and animated by dashboard.js. Avoiding grid track
   interpolation here prevents table relayout from stalling mid-transition. */
.venture-detail-collapse {
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.venture-detail-row.is-open .venture-detail-collapse {
    height: auto;
    opacity: 1;
}

/* Two columns: what the venture is and wants on the left, who it was given
   and why on the right. They answer different questions, and stacking them
   meant scrolling past the whole brief to reach the mentors. */
.venture-detail-split {
    display: grid;
    /* --split-left is set per row by balanceDetailSplit() so the two columns
       come out the same height; 40% is only the first-paint default. */
    grid-template-columns: minmax(30%, var(--split-left, 40%)) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
    overflow: hidden;
    min-height: 0;
    padding: var(--space-5) var(--space-6) var(--space-6);
    background: var(--bg-card);
}

@media (max-width: 1000px) {
    .venture-detail-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.venture-brief {
    min-width: 0;
}

.venture-brief h4 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.venture-brief h4 + * {
    margin-bottom: var(--space-5);
}

.venture-brief-description {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.55;
}

.venture-brief-description.is-empty {
    color: var(--text-muted);
    font-style: italic;
}

.venture-brief-objectives {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--text-primary);
    line-height: 1.55;
}

.venture-brief-objectives li {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
}

/* Objectives render as a lead line plus its own bullets, so a founder's
   "• Success criteria: ..." reads as a list instead of running on. */
.objective-lead {
    display: block;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.objective-bullets {
    margin: var(--space-2) 0 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.objective-bullets li::marker {
    color: var(--brand-mist);
}

/* Objective signals: the badge, the goal in one line, then the finding. */
.objective-signal-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.objective-signal-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.objective-signal-goal {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.objective-signal-why {
    color: var(--text-secondary);
}

/* The medal now carries "founder preference" on its own, so it needs room
   beside the mentor's name. */
.role-detail-name .medal {
    margin-right: 0.35em;
    cursor: help;
}

.venture-brief-objective-text {
    min-width: 0;
}

/* O1/O2/O3 marker — the same badge inline in role summaries and leading each
   objective in the brief, so the two sides of the panel cross-reference. */
.objective-ref {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9em;
    padding: 0.05em 0.45em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-magenta) 12%, #ffffff);
    color: var(--brand-magenta);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.role-detail-summary-inline .objective-ref {
    margin: 0 0.15em;
    vertical-align: baseline;
}

.objective-ref-lead {
    flex: none;
    transform: translateY(-0.1em);
}

/* A badge is a flex item in both the brief and the signals list; without this
   it stretched to fill the column and read as a wide bar rather than a chip. */
.objective-signal-list .objective-ref,
.venture-brief-objectives .objective-ref {
    flex: 0 0 auto;
    align-self: flex-start;
}

.venture-detail-roles {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.role-detail {
    min-width: 0;
}

.role-detail:hover .role-symbol {
    transform: scale(1.04);
}

/* Divider before CR's card so two stacked mentor blocks don't blend
   into one continuous run of text. */
.venture-detail-roles > .role-detail ~ .role-detail {
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}

/* ── Role-scoped comparison, folded into Full explanation ─────────── */
.role-comparison {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--border-strong);
}

/* Inside its own disclosure the summary above is already the divider, and the
   heading would repeat the question the summary just asked. */
.full-explanation-body > .role-comparison:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* This heading was smaller than the body text it introduced. */
.role-comparison h4 {
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
}

.role-comparison.is-top-match {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.role-comparison-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.role-comparison-label {
    min-width: 110px;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
}

.role-comparison-match {
    color: var(--brand-navy-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.role-comparison-gap {
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.reasoning-domain {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.milp-trade-off {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* ── Trade-off reasoning ───────────────────────────────────────────
   One block per question a reader actually asks — "why this mentor",
   "why not the fit-only leader", "why not the preference-adjusted
   leader", "why not this mentor for this venture" — so the answer they
   came for is findable, rather than buried in one long paragraph. */
.trade-off-list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.trade-off {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--border-strong);
    background: var(--bg-primary);
    transition:
        background-color var(--motion-base) var(--ease-standard),
        border-color var(--motion-base) var(--ease-standard);
}

/* The mentor who holds the seat leads the stack and is tinted, so the
   "why not" blocks below read as answers to it. */
.trade-off.is-seated {
    border-left-color: var(--brand-navy-2);
    background: var(--brand-mist-soft);
}

.trade-off.is-match {
    border-left-color: var(--brand-mist);
}

.trade-off h5 {
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.trade-off p {
    margin: 0 0 var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.trade-off p:last-child {
    margin-bottom: 0;
}

/* What the assignment cost this venture — the sentence people skip to. */
.trade-off .trade-off-cost {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--border-strong);
    color: var(--brand-magenta-strong);
    font-weight: var(--weight-medium);
}

@keyframes dashboard-content-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dashboard-row-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dashboard-tooltip-in {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dashboard-ring-in {
    from {
        opacity: 0;
        stroke-dashoffset: 283;
    }
    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

/* ── Banner scale ────────────────────────────────────────────────────
   Sized in px on purpose. The console runs at a 90% root font size, which
   is right for the dense tables below but left the masthead noticeably
   smaller than the approved design. These are absolute so the banner keeps
   its intended weight regardless of the body scale. */
.results-header-inner {
    min-height: 96px;
    padding: 18px 0;
    gap: 24px;
}

.brand-mark {
    height: 56px;
}

.brand-rule {
    height: 40px;
}

.results-header h1 {
    font-size: 32px;
    line-height: 1.1;
}

.results-header-side {
    gap: 20px;
}

.results-group-trigger {
    padding: 11px 18px;
    font-size: 17px;
}

.results-run-state {
    font-size: 17px;
}

.results-index {
    gap: 36px;
}

.results-index a {
    padding: 16px 0;
    font-size: 20px;
}

.results-index a span {
    font-size: 17px;
}


/* ══════════════════════════════════════════════════════════════════════
   MOBILE / NARROW VIEWPORTS
   Additive only: every rule lives inside a media query, so the desktop
   layout is untouched.

   Two things this section exists to undo. First, .results-body carries
       width: min(100% - 48px, max(1440px, 80vw))
   whose inner max() sets a 1440px FLOOR — on a phone the container refused
   to shrink and the page rendered ~1400px wide inside a 375px screen.
   Second, the masthead is deliberately sized in ABSOLUTE px so it keeps its
   weight against the 90% body scale; those sizes are meant for a wide screen
   and have to be scaled back down here or the banner eats half the phone.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .results-body {
        width: min(100% - var(--space-6), 100%);
        padding: var(--space-4) 0 56px;
    }

    /* ── Masthead: the desktop px scale is far too large at this width ── */
    .results-header-inner,
    .results-tabs {
        width: min(100% - var(--space-6), 100%);
    }

    /* .results-main is a child of the already-inset .results-body, so it takes
       the full width of its parent. Left out of this block it fell through to
       the older 1024/800px rules and inset itself a second time, leaving every
       results card ~32px narrower than the masthead above it. Giving it the
       masthead's own width rule insets it twice for the same reason. */
    .results-main {
        width: 100%;
    }

    /* An older narrow-viewport rule stacks this column, which put the logo,
       the word "Matching" and the cohort picker on three separate lines and
       cost ~80px of a phone screen before any result was visible. Back to a
       row: logo and title share line one, the cohort picker wraps to line
       two on its own because it is the only full-width child. */
    .results-header-inner {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px 0;
    }

    .brand-mark {
        height: 34px;
    }

    /* The hairline separates logo from product name on one line; once the
       row wraps it is a stray vertical tick on a line of its own. */
    .brand-rule {
        display: none;
    }

    .results-header h1 {
        font-size: 20px;
    }

    /* Cohort and status take the full second line rather than being squeezed
       against the logo. */
    .results-header-side {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        gap: 10px;
    }

    .results-group-trigger {
        padding: 7px 12px;
        font-size: 15px;
    }

    .results-run-state {
        font-size: 14px;
    }

    /* ── Tabs: one scrolling line, never a wrapped grid ── */
    .results-index {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .results-index a {
        flex: 0 0 auto;
        min-height: 0;
        padding: 10px 0;
        border: 0;
        font-size: 15px;
        white-space: nowrap;
    }

    .results-index a span {
        font-size: 13px;
    }

    /* The thin scrollbar sat directly beside the active tab's gradient rule
       and read as a second, broken underline. Drop it and fade the trailing
       edge instead, which is the honest signal that section 04 is off-screen. */
    .results-index {
        scrollbar-width: none;
    }

    .results-index::-webkit-scrollbar {
        display: none;
    }

    .results-tabs {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    }

    /* ── Content ── */
    .kpi-group-cards,
    .venture-detail-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .results-section,
    .results-main {
        min-width: 0;
    }

    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .results-footer {
        width: min(100% - var(--space-6), 100%);
        gap: var(--space-3);
    }
}

@media (max-width: 640px) {
    /* The number sat in a 64px column, so every section title and paragraph
       was read through a 230px slot on a 375px screen. Lift it to an eyebrow
       above the text and the copy gets the card's full width; the magenta
       rule moves to its left so the section still announces itself. */
    .results-section-header {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
        margin-bottom: var(--space-6);
    }

    /* Section 03 carries a shift badge and keeps its own column template,
       which would have left it as the one section still indented. */
    .results-section-header.has-section-badge {
        grid-template-columns: minmax(0, 1fr);
    }

    .results-section-badge {
        grid-column: 1;
        margin-top: var(--space-2);
    }

    .results-section-number {
        min-height: 0;
        padding: 0 0 0 var(--space-3);
        border-right: 0;
        border-left: 3px solid var(--brand-magenta);
        font-size: 1.5rem;
    }

    .results-section {
        padding: var(--space-5) var(--space-4);
    }

    .brand-mark {
        height: 30px;
    }

    .results-header h1 {
        font-size: 18px;
    }

    /* Side by side at 375px the title wrapped to one word per line, so the
       card stacks instead: a compact figure row (ring + what it counts, read
       as one line) above copy that gets the card's full width. */
    .kpi-tile {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .kpi-figure-col {
        grid-auto-flow: column;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        gap: var(--space-3);
    }

    .kpi-figure,
    .kpi-ring {
        width: 64px;
        height: 64px;
    }

    .kpi-value {
        font-size: 1.5rem;
    }

    .kpi-caption {
        max-width: none;
        text-align: left;
    }

    .kpi-label {
        font-size: var(--text-base);
    }

    .kpi-group-title {
        font-size: var(--text-lg);
    }

    /* The assignments table keeps a 620px min-width so five columns stay
       readable, and the expanded detail row lives inside it — so without this
       the venture description would sit in a 620px box needing sideways
       scrolling to read. Pinning it to the left edge keeps the prose at
       screen width while the table itself still scrolls under it. */
    .venture-detail-split {
        position: sticky;
        left: 0;
        width: calc(100vw - 84px);
        max-width: calc(100vw - 84px);
        padding: var(--space-4);
    }

    .role-detail-line {
        align-items: flex-start;
    }

    /* "Objective Setter  Jonas Ekstrom" side by side is wider than the row
       has left after the OS disc, so the disc was stranded alone on its own
       line. Stack the label over the name and the two sit together. */
    .role-detail-name {
        display: grid;
        align-items: start;
        gap: 2px;
    }

    .venture-table {
        min-width: 620px;
    }

    /* Objective bullets keep their hanging indent but lose the wide gutter. */
    .objective-bullets {
        padding-left: 0.95rem;
    }

    /* The mentor roster claims 380px of a 292px-wide card, pushing all three
       shift columns off-screen. Halve it: the chips wrap onto more rows, but
       the columns that carry the schedule come within one swipe. The cap has
       to sit on the chip row itself — a wrapping flex row's max-content width
       is the sum of every chip, and an auto-layout table sizes the column to
       that, so a min-width on the cell alone changed nothing. */
    .schedule-cell-mentors {
        min-width: 190px;
    }

    .schedule-mentors {
        max-width: 176px;
    }

    /* The 900px floor is what actually set this table's width, so the column
       caps above were being ignored; drop it and let them govern. */
    .venture-table.schedule-table {
        min-width: 0;
    }

    .schedule-cell {
        min-width: 118px;
    }

    .schedule-mentor {
        padding: 2px 7px;
        font-size: 12px;
    }

    /* A 136px venture column left room for three mentors out of 29. Tighter
       cells put five on screen and shorten the rotated header. */
    .results-matrix thead th {
        width: 38px;
        min-width: 38px;
        height: 104px;
    }

    .results-matrix thead th:not(:first-child) span {
        width: 38px;
        font-size: 11px;
    }

    .results-matrix thead th:first-child,
    .results-matrix tbody th {
        width: 104px;
        min-width: 104px;
        max-width: 104px;
    }

    .matrix-cell,
    .matrix-empty {
        min-width: 38px;
        height: 38px;
    }
}