/*
   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-teal: #003f4b;
    --brand-teal-2: #0d5960;
    --brand-magenta: #e6007e;
    --brand-magenta-strong: #a8005c;
    --brand-magenta-dark: #7a1648;
    --brand-mint: #a8c9c7;
    --brand-mint-soft: #eef5f4;
    --brand-ink: #12313a;
    --brand-muted: #5f7175;
    --text-on-dark: #ffffff;
    --text-on-dark-muted: #c7dbdc;
    --brand-mint-on-dark: #9fd2d1;
    --accent-on-dark: #ff73bd;
    --bg-primary: #f6f8f8;
    --bg-secondary: #e8f0f0;
    --bg-card: #ffffff;
    --bg-card-hover: #fbfdfd;
    --bg-input: #ffffff;
    --surface-muted: var(--brand-mint-soft);
    --surface-strong: var(--brand-teal);
    --border: #d4e1e2;
    --border-strong: #a8c9c7;
    --border-focus: var(--brand-magenta);
    --text-primary: var(--brand-ink);
    --text-secondary: #41575d;
    --text-muted: var(--brand-muted);
    --accent: var(--brand-teal-2);
    --accent-hover: var(--brand-teal);
    --accent-glow: rgba(230, 0, 126, 0.13);
    --accent-soft: #fce8f3;
    --success: #0d5960;
    --success-bg: #e6f1f1;
    --warning: #b15c00;
    --warning-bg: #fff4e1;
    --error: #b71f63;
    --error-bg: #fff0f6;
    --info: var(--brand-teal-2);
    --info-bg: #e6f1f1;
    --data-venture: var(--brand-magenta);
    --data-mentor: var(--brand-teal-2);
    --data-fit-excellent: var(--brand-teal-2);
    --data-fit-strong: #397d80;
    --data-fit-moderate: #7d5a18;
    --data-fit-limited: var(--brand-mint);
    --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: #eef5f4;
    --data-seq-2: #d8e8e7;
    --data-seq-3: #bfd9d7;
    --data-seq-4: #94bebc;
    --data-seq-5: #5f9696;
    --data-seq-6: #2f7477;
    --data-seq-7: #0d5960;
    --purple: var(--brand-magenta);
    --purple-bg: #fce8f3;
    --blue: var(--brand-teal-2);
    --blue-bg: #e6f1f1;
    --radius: 6px;
    --radius-sm: 4px;
    --shadow-sm: 0 1px 0 rgba(0, 63, 75, 0.08);
    --shadow-md: 0 16px 38px rgba(0, 63, 75, 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(0, 63, 75, 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-teal);
    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-teal);
    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-teal);
    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-teal);
    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-teal);
    border-color: var(--brand-teal);
}

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

.dashboard-link:hover {
    color: #ffffff;
    background: var(--brand-teal-2);
    border-color: var(--brand-teal-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: #fbfdfd;
    border: 1px solid rgba(0, 63, 75, 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-teal);
    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-mint-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: #fbfdfd;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-teal-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-teal); 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-teal); 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;
}

.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-mint-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-teal);
    --console-teal-2: var(--brand-teal-2);
    --console-magenta: var(--brand-magenta);
    --console-mint: var(--brand-mint);
    --console-ink: var(--brand-ink);
    --console-muted: var(--brand-muted);
    --console-rule: var(--border);
    --console-soft: var(--brand-mint-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(0, 63, 75, 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: #9fd2d1;
    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: #c7dbdc;
    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: #9fd2d1;
    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: #fbfdfd;
}

.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(0, 63, 75, 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-teal-2);
    outline-offset: -4px;
}

/* --data-fit-excellent resolves to --brand-teal-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,
#new-streams.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-teal-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);
}

.results-header {
    background: var(--brand-teal);
    color: #ffffff;
}

.results-header-inner {
    display: flex;
    width: min(100% - 48px, 1440px);
    min-height: 60px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin: 0 auto;
    padding: 10px 0;
}

.results-brand {
    margin: 0 0 2px;
    color: var(--brand-mint);
    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: rgba(255, 255, 255, 0.7);
    color: #ffffff;
}

.results-header h1 {
    max-width: 700px;
    margin: 0;
    color: #ffffff;
    font-size: 1.375rem;
    font-weight: var(--weight-semibold);
    line-height: 1.15;
}

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

.results-header-actions a,
.results-header-actions button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.42);
    background: transparent;
    color: #ffffff;
    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 {
    border-color: var(--brand-mint);
    color: var(--brand-mint);
    transform: translateY(-1px);
}

.results-header-actions a:active,
.results-header-actions button:active {
    transform: translateY(0);
}

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

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

/* ── Left-side layout ──────────────────────────────────────────────
   Replaces the old horizontal, full-bleed "review dock" pinned across the
   top of the page. Section labels now live in a persistent sidebar so the
   top of the page stays uncluttered and reads like a report you scroll
   through, not a toolbar you operate. */
.results-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--space-8);
    row-gap: var(--space-3);
    width: min(100% - 48px, max(1440px, 80vw));
    margin: 0 auto;
    padding: var(--space-6) 0 72px;
    align-items: start;
}

/* Collapsing the cohort panel hands the whole width to the tables, which the
   wider schedules need. The toggle stays put so it can bring the panel back. */
.results-body.is-nav-collapsed {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-5);
}

.results-body.is-nav-collapsed .results-sidenav {
    display: none;
}

.results-nav-toggle {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: var(--space-6);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--brand-muted);
    cursor: pointer;
    line-height: 1;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard);
}

.results-nav-toggle svg {
    display: block;
}

.results-nav-toggle:hover,
.results-nav-toggle:focus-visible {
    background: var(--bg-secondary);
    color: var(--brand-teal);
}

.results-sidenav {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: var(--space-6);
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.results-group-control {
    display: grid;
    gap: var(--space-2);
}

.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-teal-2);
    border-bottom: 2px solid var(--brand-teal-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-teal-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-teal-2);
    outline: 2px solid var(--brand-magenta);
    outline-offset: 2px;
    box-shadow: none;
}

.results-group-trigger[aria-expanded="true"] {
    border-color: var(--brand-teal-2);
    background: var(--brand-mint-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(0, 63, 75, 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-mint-soft);
    color: var(--brand-teal);
}

.results-group-option[aria-selected="true"] {
    background: var(--brand-mint-soft);
    box-shadow: inset 3px 0 0 var(--brand-magenta);
    color: var(--brand-teal);
    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);
}

.results-index {
    display: grid;
    gap: var(--space-1);
}

.results-index a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    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-base) var(--ease-standard),
        transform var(--motion-fast) var(--ease-out);
}

.results-index a:hover,
.results-index a:focus-visible {
    background: var(--brand-mint-soft);
    color: var(--brand-teal);
    transform: translateX(2px);
}

.results-index a[aria-current] {
    border-left-color: var(--brand-magenta);
    background: var(--brand-mint-soft);
    color: var(--brand-teal);
}

.results-index a:active {
    transform: translateX(1px);
}

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

@media (max-width: 900px) {
    .results-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .results-sidenav {
        position: static;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .results-index {
        grid-column: 1 / -1;
        grid-auto-flow: column;
        justify-content: start;
        overflow-x: auto;
    }
}

.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-teal);
    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-teal-2);
    background: #ffffff;
    color: var(--brand-teal-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-mint-soft);
    color: var(--brand-teal-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-teal-2);
    background: var(--brand-mint);
    color: var(--brand-teal);
    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-teal);
    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-teal-2);
    background: var(--brand-mint-soft);
    color: var(--brand-teal);
    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-mint);
    background: var(--brand-mint-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;
}

.objective-signal-list li span {
    display: inline-block;
    min-width: 82px;
    color: var(--brand-teal-2);
    font-weight: var(--weight-semibold);
}

.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-teal-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-mint-soft);
    color: var(--brand-teal);
}

.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-teal-2);
    color: var(--brand-teal-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-mint-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-teal);
    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. */
.matrix-cell.is-ineligible {
    opacity: 0.62;
}

/* 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-teal-2);
    color: var(--brand-teal-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 {
    width: min(100% - 48px, 1440px);
    margin: 0 auto;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

@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-index {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        justify-content: stretch;
        width: 100%;
        overflow: visible;
    }

    .results-index a,
    .results-index a:nth-child(2) {
        min-width: 0;
        width: auto;
        min-height: 48px;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        white-space: normal;
    }

    .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 invisible columns: founders' asks on the left, our scoring on the right.
   There is no divider or heading — the split is carried by position alone, so
   the tile ORDER in renderKPIs() is what makes it true. Filling is row-major,
   so the rows read as pairs too (formal roles on top, table rotation below). */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--space-4);
}

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

@media (max-width: 420px) {
    .kpi-figure,
    .kpi-ring {
        width: 84px;
        height: 84px;
    }

    .kpi-value {
        font-size: 2.25rem;
    }

    .kpi-figure.has-ring .kpi-value {
        font-size: 1.6rem;
    }
}

/* A KPI tile is a <button> — it's clickable (jumps to Assignments and
   highlights the ventures behind the number), so it gets real button
   semantics instead of a div with a click handler bolted on. Reset the
   browser's default button chrome back to the plain-card look. */
.kpi-tile {
    display: grid;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand-teal-2);
    border-radius: var(--radius);
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transform: translateY(0);
    transition:
        background-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard),
        border-color var(--motion-base) var(--ease-standard),
        transform var(--motion-base) var(--ease-out);
    animation: dashboard-content-in var(--motion-slow) var(--ease-out) backwards;
}

.kpi-tile:hover {
    border-color: var(--brand-teal-2);
    background: var(--bg-card-hover);
    box-shadow: 0 8px 22px rgba(0, 63, 75, 0.09);
    transform: translateY(-2px);
}

.kpi-tile:focus-visible {
    outline: 2px solid var(--brand-teal-2);
    outline-offset: 2px;
}

.kpi-tile[aria-pressed="true"] {
    border-color: var(--brand-magenta);
    box-shadow: 0 0 0 1px var(--brand-magenta);
    transform: translateY(-1px);
}

.kpi-tile:active {
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
}

.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-teal-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-teal);
    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: 116px;
    height: 116px;
}

/* 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-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
}

.kpi-label {
    display: block;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
}

.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.75rem;
    letter-spacing: -0.01em;
}

.kpi-ring {
    width: 116px;
    height: 116px;
}

.kpi-ring circle:last-child {
    animation: dashboard-ring-in 520ms var(--ease-out) backwards;
}

.kpi-detail {
    display: block;
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.5;
}

/* The tile is a button, so the invitation to click is styled as one:
   underlined, bold and italic rather than a full stop in the sentence. */
.kpi-cta {
    display: inline-block;
    margin-top: var(--space-2);
    color: var(--brand-teal-2);
    font-size: var(--text-sm);
    font-style: italic;
    font-weight: var(--weight-bold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kpi-tile:hover .kpi-cta,
.kpi-tile:focus-visible .kpi-cta {
    color: var(--brand-magenta-strong);
}

/* The explanation of whichever tile is pressed. It sits under the 2x2 block
   inside Overview — the answer to "which mentor" belongs next to the number
   that provoked the question, not down in Assignments. The magenta edge is
   the same accent the pressed tile takes, so the panel reads as belonging to
   the tile above it. */
.kpi-explainer {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-magenta);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.kpi-explainer[hidden] {
    display: none;
}

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

.kpi-explainer-eyebrow {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
}

.kpi-explainer-head h3 {
    margin-top: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.kpi-explainer-lead {
    margin-top: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* Stacked, each at the full width of the panel. Side by side, the two lists
   were forced into whatever width was left over — one narrow column of
   wrapped mentor names next to a mostly empty one. */
.kpi-explainer-blocks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.kpi-explainer-block {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.kpi-explainer-block h4 {
    color: var(--brand-teal);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kpi-explainer-list {
    margin-top: var(--space-3);
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.kpi-explainer-list li {
    display: grid;
    gap: 2px;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-base);
    line-height: 1.5;
}

.kpi-explainer-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.kpi-explainer-list strong {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.kpi-explainer-list span {
    color: var(--text-secondary);
}

.kpi-explainer-more {
    color: var(--text-muted);
    font-style: italic;
}

.kpi-explainer-foot {
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

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

/* Shared role marker, used both in the legend and on each meeting slot. */
.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-teal-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-teal);
}

.schedule-summary-row {
    background: var(--brand-mint-soft);
}

.schedule-cell-table {
    width: 74px;
    color: var(--brand-teal);
    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-teal);
    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-teal);
    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-teal);
    background: var(--surface-muted);
    color: var(--brand-teal);
    font-size: var(--text-sm);
}

.lrd-order-row {
    --lrd-accent: var(--brand-mint);
    --lrd-tint: #ffffff;
    background: var(--lrd-tint);
}

.lrd-order-row:hover {
    background: color-mix(in srgb, var(--lrd-tint) 78%, var(--brand-mint-soft));
}

.lrd-order-rank {
    color: var(--brand-teal);
    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-mint);
}

@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-teal);
}

.venture-table.schedule-journey-table thead th {
    background: var(--surface-muted);
    color: var(--brand-teal);
    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-teal);
    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-mint-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-teal);
    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-mint-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-mint);
    outline: 2px solid transparent;
    box-shadow: inset 3px 0 0 var(--brand-teal-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-mint);
    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-teal-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;
}

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

.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-teal-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-teal-2);
    background: var(--brand-mint-soft);
}

.trade-off.is-match {
    border-left-color: var(--brand-mint);
}

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

@media (max-width: 640px) {
    .venture-detail-split {
        position: sticky;
        left: 0;
        width: calc(100vw - 96px);
        max-width: calc(100vw - 96px);
        padding: var(--space-5) var(--space-4) var(--space-6);
    }

    .role-detail-line {
        align-items: flex-start;
    }
}