/* ═══════════════════════════════════════════════════════════════════════════
   DLYJ Redesign — Editorial Data Journalism Aesthetic
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Paper palette */
    --paper: #FAFAFA;
    --paper-warm: #F5F1EB;
    --ink: #1C1B18;
    --ink-secondary: #5C5850;
    --ink-tertiary: #8A8578;
    --signal: oklch(0.55 0.09 145);
    --signal-soft: oklch(0.68 0.06 145);
    --signal-light: oklch(0.55 0.09 145 / 0.10);
    --signal-medium: oklch(0.55 0.09 145 / 0.18);
    --signal-text: oklch(0.40 0.08 145);
    --ink-strong: #141310;
    --rule: #DDD8CF;
    --rule-light: #E8E4DD;
    --surface: #F0ECE5;
    --paper-bright: #FEFDFB;

    /* Typography */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Fluid type scale */
    --text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
    --text-sm: clamp(0.84rem, 0.8rem + 0.2vw, 0.92rem);
    --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
    --text-lg: clamp(1.08rem, 1rem + 0.4vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
    --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
    --text-3xl: clamp(2rem, 1.4rem + 3vw, 3.4rem);
    --text-4xl: clamp(2.4rem, 1.6rem + 4vw, 4.4rem);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    /* Border radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* Transitions */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 140ms;
    --duration-normal: 180ms;
    --duration-slow: 320ms;
    --duration-reveal: 460ms;
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }

/* ─── Site Header ───────────────────────────────────────────────────────── */

.r-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-light);
}
.r-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px var(--space-lg);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-lg);
}
.r-brand {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    text-decoration: none;
    color: var(--ink);
    white-space: nowrap;
}
/* Header-inline analysis summary */
.r-header-summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}
.r-header-summary.hidden-block {
    display: none;
}
.r-header-summary h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.r-header-summary-meta {
    display: flex;
    gap: 6px;
    align-items: baseline;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
}
.r-header-summary-sep {
    color: var(--ink-tertiary);
}
.r-header-summary-edit {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    color: var(--signal-text);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    white-space: nowrap;
    transition: color 180ms ease;
}
.r-header-summary-edit:hover,
.r-header-summary-edit:focus-visible {
    outline: none;
    color: var(--ink);
}

.r-nav { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.r-nav a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    color: var(--ink-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: color 0.12s;
}
.r-nav a:hover { color: var(--ink); }
.r-nav a.active {
    color: var(--ink);
    background: transparent;
    border-bottom: 2px solid var(--signal);
    border-radius: 0;
    padding-bottom: 4px;
}

@media (max-width: 600px) {
    .r-header { position: static; }
    .r-header-inner { flex-direction: column; gap: var(--space-sm); padding: 12px var(--space-md); }
    .r-nav { gap: 2px; }
    .r-header-summary { flex-direction: column; gap: 2px; align-items: flex-start; }
    .r-header-summary h2 { font-size: var(--text-sm); }
    .r-progress { display: none; }
}

/* ─── Scroll Progress Bar ───────────────────────────────────────────────── */

.r-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--signal);
    z-index: 200;
    transition: width 0.1s linear;
}

/* ─── Main Container ────────────────────────────────────────────────────── */

.r-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ─── Model Page: Hero ──────────────────────────────────────────────────── */

.r-hero {
    padding: var(--space-3xl) 0 var(--space-2xl);
    max-width: 720px;
}
.r-hero h1 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
    color: var(--ink);
}
.r-hero .r-subtitle {
    font-size: var(--text-lg);
    color: var(--ink-secondary);
    line-height: 1.55;
    max-width: 56ch;
}

@media (max-width: 600px) {
    .r-hero { padding: var(--space-2xl) 0 var(--space-xl); }
}

/* ─── Model Page: Intake Flow ───────────────────────────────────────────── */

.r-intake {
    padding-top: var(--space-xl);
    max-width: 920px;
}
.r-intake-step {
    margin-bottom: var(--space-xl);
    opacity: 1;
    transition: opacity 0.2s;
}
.r-intake-step--occupation {
    margin-bottom: calc(var(--space-xl) + 10px);
}
.r-intake-step.r-answered {
    margin-bottom: var(--space-lg);
}
.r-intake-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}
.r-intake-help {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    margin-bottom: var(--space-sm);
}

/* Analysis mode toggle below hierarchy */
.r-analysis-mode-toggle {
    display: flex;
    gap: 8px;
    margin-top: var(--space-md);
}
.r-analysis-mode-toggle.hidden-block {
    display: none;
}
.r-adjust-toggle {
    appearance: none;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink-secondary);
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.r-adjust-toggle:hover,
.r-adjust-toggle:focus-visible {
    border-color: var(--signal);
    color: var(--ink);
    outline: none;
}
.r-adjust-toggle.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.r-intake select,
.r-intake input[type="text"],
.r-intake input[list] {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 14px 16px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink);
    appearance: none;
    min-height: 52px;
    transition: border-color 0.12s;
}
.r-intake select:focus,
.r-intake input:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-light);
}
.r-intake select.selected {
    border-color: var(--ink-tertiary);
}

.r-occupation-picker {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: clamp(20px, 2.8vw, 34px);
    align-items: start;
}

.r-occupation-search-column {
    display: grid;
    gap: 12px;
}

.r-occupation-selection {
    min-height: 1.6em;
    margin-top: 10px;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
}

.r-intake-inline-block {
    margin-top: 14px;
}

.r-intake-inline-block .r-intake-help:last-child {
    margin-bottom: 0;
}

.r-intake-variant-picker {
    display: grid;
    gap: 8px;
}

.r-intake-variant-picker h4 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-secondary);
}

.r-intake-variant-picker .v2-composition-add-row {
    margin-top: 0;
}

.r-intake-variant-picker .plane-dropdown {
    cursor: pointer;
    border-color: color-mix(in oklab, var(--rule) 72%, var(--signal-soft) 28%);
    background: color-mix(in oklab, var(--paper) 92%, var(--signal-soft) 8%);
}

.r-intake-variant-picker .plane-dropdown:hover,
.r-intake-variant-picker .plane-dropdown:focus {
    border-color: var(--signal);
}

.r-hierarchy-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.r-hierarchy-option {
    appearance: none;
    display: grid;
    gap: 5px;
    min-height: 78px;
    padding: 14px 14px 12px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.r-hierarchy-option strong {
    font-size: var(--text-sm);
    font-weight: 700;
}

.r-hierarchy-option span {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.r-hierarchy-option:hover,
.r-hierarchy-option:focus-visible {
    outline: none;
    border-color: var(--signal);
    transform: translateY(-1px);
}

.r-hierarchy-option.is-selected {
    border-color: var(--ink);
    background: color-mix(in oklab, var(--paper) 90%, var(--surface) 10%);
}

.r-hierarchy-selection {
    margin-top: 12px;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    max-width: 62ch;
}

.r-occupation-list-column {
    display: grid;
    gap: 10px;
}

.r-occupation-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule-light);
}

.r-occupation-list-head span {
    color: var(--ink-tertiary);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.r-occupation-list-head strong {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
}

.r-occupation-list-head strong:empty {
    display: none;
}

.r-occupation-list {
    max-height: 360px;
    overflow: auto;
    display: grid;
    gap: 6px;
    padding-right: 6px;
}

.r-occupation-option {
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    background: color-mix(in oklab, var(--paper) 92%, var(--signal-soft) 8%);
    border: 1px solid transparent;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.r-occupation-option strong {
    font-size: var(--text-base);
    line-height: 1.35;
    font-weight: 600;
}

.r-occupation-option span {
    color: var(--ink-secondary);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.r-occupation-option:hover,
.r-occupation-option:focus-visible {
    outline: none;
    transform: translateX(2px);
    border-color: color-mix(in oklab, var(--signal) 45%, var(--rule-light) 55%);
    background: color-mix(in oklab, var(--paper) 86%, var(--signal-soft) 14%);
}

.r-occupation-option.is-selected {
    border-color: color-mix(in oklab, var(--signal) 52%, var(--rule-light) 48%);
    background: color-mix(in oklab, var(--paper) 80%, var(--signal-soft) 20%);
}

.r-occupation-empty {
    padding: 14px 0;
    color: var(--ink-secondary);
}
/* Custom dropdown arrow */
.r-select-wrap {
    position: relative;
}
.r-select-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--ink-tertiary);
    pointer-events: none;
}

/* Refine link */
.r-refine-link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--ink-secondary);
    text-decoration: none;
    padding: 12px 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.12s;
}
.r-refine-link:hover { color: var(--ink); }
.r-refine-link::after {
    content: ' \2192';
    transition: transform 0.12s;
    display: inline-block;
}
.r-refine-link:hover::after { transform: translateX(3px); }

/* ─── Results: Narrative Scroll ─────────────────────────────────────────── */

.r-results {
    border-top: 1px solid var(--rule);
    padding-top: var(--space-md);
    margin-top: var(--space-lg);
}
.r-results.hidden-block { display: none; }

.r-verdict {
    margin-bottom: var(--space-3xl);
}
.r-verdict-kicker {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signal-text);
    margin-bottom: var(--space-sm);
}
.r-verdict h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1.1;
    margin-bottom: var(--space-md);
}
.r-verdict-fate {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--signal-text);
    margin-bottom: var(--space-lg);
}
.r-verdict-summary {
    font-size: var(--text-lg);
    color: var(--ink-secondary);
    line-height: 1.6;
    max-width: 64ch;
}
.r-verdict-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--rule-light);
}
.r-metric {
    min-width: 160px;
}
.r-metric dt {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    margin-bottom: 2px;
}
.r-metric dd {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--ink);
}

/* ─── Wave Timeline ─────────────────────────────────────────────────────── */

.r-section-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signal-text);
    margin-bottom: var(--space-md);
}
.r-wave-timeline {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-3xl);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.r-wave-step {
    flex: 1;
    padding: var(--space-lg) var(--space-md);
    position: relative;
}
.r-wave-step + .r-wave-step {
    border-left: 1px solid var(--rule-light);
}
.r-wave-step-label {
    font-size: var(--text-xs);
    color: var(--signal-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
}
.r-wave-step-state {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}
.r-wave-step-detail {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.45;
}
.r-wave-section {
    margin-bottom: var(--space-3xl);
}
.r-wave-section--support {
    padding: var(--space-lg);
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.55);
}
.r-wave-support-copy {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    margin-bottom: var(--space-md);
    max-width: 62ch;
}
.r-wave-section--support .r-wave-timeline {
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.4);
}

@media (max-width: 600px) {
    .r-wave-timeline { flex-direction: column; }
    .r-wave-step + .r-wave-step { border-left: none; border-top: 1px solid var(--rule-light); }
}

/* ─── Narrative Grid ────────────────────────────────────────────────────── */

.r-narrative {
    margin-bottom: var(--space-3xl);
}
.r-narrative-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl) var(--space-2xl);
}
.r-narrative-item h4 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
    color: var(--ink);
}
.r-narrative-item p {
    color: var(--ink-secondary);
    line-height: 1.65;
}

@media (max-width: 768px) {
    .r-narrative-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ─── Role Fate Map ─────────────────────────────────────────────────────── */

.r-map {
    margin-bottom: var(--space-3xl);
}
.r-map-header {
    margin-bottom: var(--space-lg);
}
.r-map-header h3 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
}
.r-map-header p {
    color: var(--ink-secondary);
    max-width: 64ch;
}
.r-map-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    overflow-x: auto;
}
.r-map-column {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--rule-light);
    background: rgba(255, 255, 255, 0.5);
}
.r-map-column h4 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--ink);
    margin-bottom: var(--space-md);
    white-space: nowrap;
}
.r-map-column-note {
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    line-height: 1.45;
    margin-bottom: var(--space-sm);
}
.r-map-column--current {
    background: rgba(255, 255, 255, 0.45);
}
.r-map-column--bargaining {
    background: var(--signal-light);
}
.r-map-column--direct {
    background: oklch(0.71 0.11 70 / 0.12);
}
.r-map-column--spillover {
    background: oklch(0.68 0.05 245 / 0.10);
}
.r-map-column--retained {
    background: oklch(0.63 0.10 155 / 0.08);
}

@media (max-width: 900px) {
    .r-map-grid {
        grid-template-columns: repeat(5, minmax(180px, 1fr));
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .r-map-column { scroll-snap-align: start; }
}

/* Cluster items (used by app.js createClusterListItem) */
.v2-cluster-item {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--rule-light);
    font-size: var(--text-sm);
}
.v2-cluster-item:last-child { border-bottom: none; }
.v2-cluster-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: 4px;
}
.v2-cluster-label {
    font-weight: 500;
    color: var(--ink);
    white-space: normal;
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}
.v2-cluster-share {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.v2-cluster-bar {
    height: 3px;
    background: var(--rule-light);
    border-radius: var(--radius-xs);
    margin-bottom: 4px;
}
.v2-cluster-bar-fill {
    height: 100%;
    background: var(--signal);
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}
.v2-cluster-meta {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    line-height: 1.4;
}

/* ─── Task Breakdown ────────────────────────────────────────────────────── */

.r-task-section {
    margin-bottom: var(--space-3xl);
}
.r-task-summary {
    margin-bottom: var(--space-lg);
}
.r-task-summary-copy {
    color: var(--ink-secondary);
    margin-bottom: var(--space-md);
}
.r-task-stats {
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
}
.v2-task-stat span {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
}
.v2-task-stat strong {
    display: block;
    font-size: var(--text-base);
    color: var(--ink);
}

/* Task items (created by app.js) */
.v2-task-item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--rule-light);
}
.v2-task-item:last-child { border-bottom: none; }
.v2-task-item--critical {
    border-left: 3px solid var(--signal);
    padding-left: var(--space-md);
}
.v2-task-topline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: 6px;
}
.v2-task-statement {
    font-weight: 500;
    color: var(--ink);
    flex: 1;
    min-width: 0;
}
.v2-task-share {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.v2-task-meter {
    height: 4px;
    background: var(--rule-light);
    border-radius: var(--radius-xs);
    margin-bottom: 8px;
    position: relative;
}
.v2-task-meter-share {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--ink-tertiary);
    border-radius: var(--radius-xs);
    opacity: 0.3;
}
.v2-task-meter-exposed {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--signal);
    border-radius: var(--radius-xs);
}
.v2-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.v2-task-chip {
    font-size: var(--text-xs);
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--ink-secondary);
    white-space: nowrap;
}
.v2-task-chip--accent { background: var(--signal-light); color: var(--signal-text); }
.v2-task-chip--warning { background: oklch(0.71 0.11 70 / 0.18); color: oklch(0.52 0.11 70); }
.v2-task-chip--success { background: oklch(0.62 0.10 155 / 0.12); color: oklch(0.40 0.10 155); }
.v2-task-footnote {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    line-height: 1.5;
}
.v2-task-toggle {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-secondary);
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    cursor: pointer;
    min-height: 48px;
    transition: border-color 0.12s, color 0.12s;
}
.v2-task-toggle:hover { border-color: var(--ink-tertiary); color: var(--ink); }

/* ─── Labor Market Panel ────────────────────────────────────────────────── */

.r-labor {
    margin-bottom: var(--space-3xl);
    padding: var(--space-xl);
    background: var(--surface);
    border-radius: var(--radius-md);
}
.r-labor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-lg);
}
.v2-labor-metric span {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    display: block;
}
.v2-labor-metric strong {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--ink);
}
.v2-labor-metric--primary strong {
    color: var(--signal-text);
    font-size: var(--text-xl);
}
.r-labor-chart {
    max-height: 220px;
    position: relative;
}

/* ─── Model Details (collapsible) ───────────────────────────────────────── */

.r-details {
    margin-bottom: var(--space-3xl);
    border-top: 1px solid var(--rule);
}
.r-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--ink);
}
.r-details summary::-webkit-details-marker { display: none; }
.r-details summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ink-tertiary);
    border-bottom: 2px solid var(--ink-tertiary);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.r-details[open] summary::after { transform: rotate(-135deg); }
.r-details-helper {
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    margin-left: var(--space-md);
}
.r-details-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
    padding-bottom: var(--space-xl);
}
.r-rail-card {
    padding: var(--space-lg);
    background: var(--surface);
    border-radius: var(--radius-md);
}
.v2-evidence-row,
.v2-evidence-rows .v2-evidence-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule-light);
    font-size: var(--text-sm);
}
.v2-evidence-row:last-child { border-bottom: none; }
.v2-evidence-row span { color: var(--ink-secondary); }
.v2-evidence-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.v2-assignment-copy {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    line-height: 1.5;
    margin-top: var(--space-sm);
}

/* ─── Questionnaire / Refinement Panel ──────────────────────────────────── */

.r-refinement {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--rule);
}
.r-refinement.hidden-block { display: none; }

.r-refinement-header {
    margin-bottom: var(--space-xl);
}
.r-refinement-header h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
}
.r-refinement-header p {
    color: var(--ink-secondary);
    max-width: 56ch;
}

/* Task detail section */
.r-task-detail {
    margin-bottom: var(--space-xl);
}
.r-task-detail h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
}
.r-task-detail > p {
    color: var(--ink-secondary);
    margin-bottom: var(--space-lg);
}
.v2-composition-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-md);
}
.v2-structure-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.v2-structure-guide-item {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--rule);
    display: grid;
    gap: 4px;
}
.v2-structure-guide-item strong {
    font-size: var(--text-sm);
    color: var(--ink);
}
.v2-structure-guide-item span {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.45;
}
.v2-flow-map-shell {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, var(--signal-light), rgba(255, 255, 255, 0.82)),
        var(--surface);
    border: 1px solid var(--rule);
}
.v2-flow-map-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.v2-flow-map-header h4 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin-top: 4px;
}
.v2-flow-map-header p {
    max-width: 42rem;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.55;
}
.v2-flow-map-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: var(--space-md);
    position: relative;
}
.v2-flow-map-board::before,
.v2-flow-map-board::after {
    content: '\2192';
    position: absolute;
    top: 22px;
    color: var(--signal);
    font-size: var(--text-xl);
    font-weight: 700;
    opacity: 0.7;
}
.v2-flow-map-board::before {
    left: calc(33.333% - 10px);
}
.v2-flow-map-board::after {
    left: calc(66.666% - 10px);
}
.v2-flow-lane {
    min-width: 0;
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.v2-flow-lane-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.v2-flow-lane-header span {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-secondary);
}
.v2-flow-lane-header strong {
    font-size: var(--text-sm);
    color: var(--ink);
}
.v2-flow-lane-body {
    display: grid;
    gap: 8px;
}
.v2-flow-node {
    position: relative;
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 22px rgba(21, 32, 43, 0.04);
}
.v2-flow-node--task {
    border-left: 4px solid var(--signal);
}
.v2-flow-node--link {
    border-left: 4px solid rgba(125, 132, 143, 0.55);
}
.v2-flow-node--custom {
    border-left-color: var(--signal-text);
}
.v2-flow-node--function {
    border-left: 4px solid rgba(58, 88, 64, 0.8);
}
.v2-flow-node--link-target {
    border-left: 4px solid rgba(125, 132, 143, 0.55);
    background:
        linear-gradient(180deg, rgba(250, 248, 243, 0.96), rgba(245, 242, 235, 0.96));
}
.v2-flow-node--link-target::after,
.v2-flow-node--function::after {
    content: 'Drop task here';
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.v2-flow-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    padding: 3px 7px;
    border-radius: var(--radius-pill);
    background: var(--signal-light);
    color: var(--signal-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.v2-flow-node-title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
}
.v2-flow-node-meta,
.v2-flow-node-support {
    margin-top: 6px;
    font-size: var(--text-xs);
    line-height: 1.45;
}
.v2-flow-node-meta {
    color: var(--ink-secondary);
}
.v2-flow-node-support {
    color: var(--ink);
}
.v2-flow-empty {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.v2-composition-card {
    padding: var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
}
.v2-composition-card-header h4 {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: 4px;
}
.v2-composition-card-header p {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}
.v2-composition-active-list {
    display: grid;
    gap: 8px;
    margin-bottom: var(--space-sm);
}
.v2-composition-chip {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.v2-composition-chip-body {
    min-width: 0;
}
.v2-composition-chip-title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
}
.v2-composition-chip-meta {
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    margin-top: 4px;
    line-height: 1.5;
}
.v2-composition-linkline {
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--ink);
    line-height: 1.45;
}
.v2-composition-share-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.v2-composition-share-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    font-weight: 600;
}
.v2-composition-share-select {
    min-width: 132px;
    font-size: var(--text-xs);
    padding: 8px 30px 8px 10px;
    background-size: 10px;
}
.v2-composition-share-input {
    width: 72px;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    padding: 6px 8px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}
.v2-composition-share-input::-webkit-outer-spin-button,
.v2-composition-share-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.v2-composition-share-input:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 2px var(--signal-light);
}
.v2-composition-share-label::after {
    content: '%';
    color: var(--ink-tertiary);
    font-size: var(--text-xs);
}
.v2-composition-remove {
    border: none;
    background: transparent;
    color: var(--signal);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
}
.v2-composition-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
}
.v2-composition-add-row .r-refine-link {
    white-space: nowrap;
}
.v2-composition-empty {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.5);
    color: var(--ink-secondary);
    font-size: var(--text-sm);
}
.v2-dependency-editor {
    margin-top: var(--space-lg);
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}
.v2-dependency-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.v2-dependency-list {
    display: grid;
    gap: 8px;
}
.v2-dependency-item {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.v2-dependency-label {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: 1.45;
}
.v2-inline-collapsible {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.v2-inline-collapsible--nested {
    background: rgba(255, 255, 255, 0.55);
    border-style: solid;
}
.v2-inline-collapsible-summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    position: relative;
    padding-right: calc(var(--space-lg) + 22px);
}
.v2-inline-collapsible-summary::-webkit-details-marker {
    display: none;
}
.v2-inline-collapsible-summary::after {
    content: '';
    position: absolute;
    right: var(--space-lg);
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink-secondary);
    border-bottom: 2px solid var(--ink-secondary);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.16s ease;
}
.v2-inline-collapsible[open] .v2-inline-collapsible-summary::after {
    transform: translateY(-35%) rotate(225deg);
}
.v2-inline-collapsible-summary span:first-child {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--ink);
}
.v2-inline-collapsible-helper {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    max-width: 38rem;
    text-align: right;
    padding-right: 32px;
}
.v2-inline-collapsible-body {
    padding: 0 var(--space-lg) var(--space-lg);
}
.v2-inline-collapsible[open] .v2-inline-collapsible-summary {
    padding-bottom: var(--space-md);
}
.v2-structure-guide,
.v2-flow-map-shell,
.v2-role-studio {
    width: min(1460px, calc(100vw - 36px));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}
.v2-structure-guide {
    margin-bottom: clamp(16px, 2vw, 22px);
}
.v2-flow-map-shell {
    margin-bottom: clamp(20px, 2.4vw, 28px);
    padding: clamp(18px, 2vw, 28px);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(248, 246, 240, 0.96), rgba(241, 238, 230, 0.84)),
        linear-gradient(90deg, rgba(92, 122, 167, 0.06), transparent 40%, rgba(92, 122, 167, 0.04));
    border: 1px solid color-mix(in oklch, var(--signal) 16%, var(--rule));
    box-shadow: 0 24px 60px rgba(31, 42, 54, 0.08);
}
.v2-flow-map-board {
    grid-template-columns: minmax(320px, 1.25fr) minmax(260px, 0.95fr) minmax(320px, 1.1fr);
    gap: clamp(14px, 1.5vw, 22px);
}
.v2-flow-map-board::before,
.v2-flow-map-board::after {
    content: '→';
    top: 18px;
    font-size: var(--text-2xl);
}
.v2-flow-lane {
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 252, 246, 0.82);
    border: 1px solid rgba(83, 102, 126, 0.08);
}
.v2-flow-node {
    border-radius: var(--radius-md);
    background: rgba(255, 254, 250, 0.98);
    box-shadow: none;
}
.v2-flow-node--task {
    cursor: grab;
}
.v2-flow-node--task.is-dragging {
    opacity: 0.55;
    transform: scale(0.985);
}
.v2-role-studio {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 1.7vw, 24px);
    align-items: start;
    padding: clamp(18px, 2vw, 26px);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(246, 243, 235, 0.88), rgba(242, 238, 229, 0.8)),
        repeating-linear-gradient(
            90deg,
            rgba(92, 122, 167, 0.04) 0,
            rgba(92, 122, 167, 0.04) 1px,
            transparent 1px,
            transparent 148px
        );
    border: 1px solid rgba(83, 102, 126, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 24px 60px rgba(31, 42, 54, 0.06);
}
.v2-role-studio-lane {
    min-width: 0;
    display: grid;
    gap: 12px;
}
.v2-role-studio-header--full {
    border-bottom: 1px solid rgba(83, 102, 126, 0.12);
    padding-bottom: 12px;
}
.v2-role-studio-header {
    padding: 4px 2px 6px;
    border-bottom: 1px solid rgba(83, 102, 126, 0.12);
}
.v2-role-studio-header h4 {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.2vw, 1.25rem);
    line-height: 1.2;
    margin-top: 4px;
}
.v2-role-studio-header p {
    margin-top: 8px;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.55;
    max-width: 34ch;
}
.v2-studio-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}
.v2-graph-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) auto;
    gap: 12px;
    align-items: center;
}
.v2-graph-mode-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.v2-graph-mode-button {
    border: 1px solid rgba(83, 102, 126, 0.14);
    background: rgba(255, 255, 255, 0.8);
    color: var(--ink-secondary);
    border-radius: var(--radius-pill);
    padding: 9px 14px;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 600;
}
.v2-graph-mode-button.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: white;
}
.v2-role-graph-editor {
    position: relative;
    min-height: 620px;
    border-radius: var(--radius-xl);
    overflow: auto;
    background:
        linear-gradient(180deg, rgba(252, 250, 244, 0.98), rgba(247, 244, 236, 0.94)),
        radial-gradient(circle at 20% 20%, rgba(92, 122, 167, 0.07), transparent 26%);
    border: 1px solid rgba(83, 102, 126, 0.12);
}
.v2-role-graph-editor::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(83, 102, 126, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83, 102, 126, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.v2-role-graph-helper {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.5;
}
.v2-studio-remove,
.v2-studio-pill-remove {
    border: 0;
    background: rgba(83, 102, 126, 0.08);
    color: var(--ink-secondary);
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.v2-studio-remove {
    padding: 6px 10px;
    font-size: var(--text-xs);
    font-weight: 600;
}
.v2-studio-pill-remove {
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 700;
}
.v2-studio-task-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.v2-studio-share-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}
.v2-studio-linklist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.v2-studio-linkpill,
.v2-tree-branch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: rgba(83, 102, 126, 0.08);
    color: var(--ink);
    font-size: var(--text-xs);
    line-height: 1.35;
}
.v2-workflow-tree {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.v2-workflow-stage {
    display: grid;
    gap: 10px;
    align-content: start;
}
.v2-workflow-stage-label {
    position: sticky;
    top: 0;
    padding-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.v2-tree-branch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
@media (max-width: 900px) {
    .v2-structure-guide,
    .v2-flow-map-shell,
    .v2-role-studio {
        width: auto;
        margin-left: 0;
        transform: none;
    }
    .v2-flow-map-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .v2-flow-map-board {
        grid-template-columns: 1fr;
    }
    .v2-flow-map-board::before,
    .v2-flow-map-board::after {
        display: none;
    }
    .v2-dependency-controls {
        grid-template-columns: 1fr;
    }
    .v2-graph-toolbar {
        grid-template-columns: 1fr;
    }
    .v2-graph-mode-group {
        justify-content: flex-start;
    }
    .v2-role-graph-editor {
        min-height: 860px;
    }
    .v2-inline-collapsible-summary {
        flex-direction: column;
        align-items: flex-start;
    }
    .v2-inline-collapsible-helper {
        max-width: none;
        text-align: left;
    }
}

/* Refinement readout */
.r-readout {
    padding: var(--space-lg);
    background: var(--surface);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
}
.r-readout-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-xl);
    margin-top: var(--space-md);
}
.v2-outlook-note {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.v2-outlook-note span {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
}
.v2-outlook-note strong {
    font-size: var(--text-base);
    color: var(--ink);
}

/* Prefill toggle */
.r-prefill-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    cursor: pointer;
    margin-bottom: var(--space-lg);
}
.r-prefill-toggle input { width: 18px; height: 18px; accent-color: var(--signal); }

/* Core questions */
.r-questions-header {
    margin-bottom: var(--space-lg);
}
.r-questions-header h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-xs);
}
.r-questions-header p {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

/* Question grid */
.question-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: var(--space-md);
}
.question-grid > * { min-width: 0; }

/* Individual question (fieldset-style) */
.question, .question-group {
    padding: var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-md);
    border: none;
}
.question h5, .question-group h5 {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1.4;
}
.question p, .question-group p {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1.5;
}

/* Radio options */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.radio-option {
    position: relative;
}
.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.radio-option label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 8px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    color: var(--ink-secondary);
    background: var(--paper);
    transition: border-color 0.1s, background 0.1s, color 0.1s;
    line-height: 1.3;
}
.radio-option label:hover {
    border-color: var(--ink-tertiary);
    color: var(--ink);
}
.radio-option input[type="radio"]:checked + label {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper-bright);
}
.radio-option input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

/* Advanced refinement (details/summary) */
.v2-advanced-refinement {
    border-top: 1px solid var(--rule-light);
    margin-top: var(--space-xl);
}
.v2-advanced-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--ink);
}
.v2-advanced-summary::-webkit-details-marker { display: none; }
.v2-advanced-helper {
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
}
.v2-advanced-body {
    padding-bottom: var(--space-lg);
}

/* Category headers (used by app.js) */
.category {
    border-bottom: 1px solid var(--rule-light);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.category:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    cursor: pointer;
    user-select: none;
}
.category-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--ink);
}
.category-count {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-tertiary);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.category-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-tertiary);
    transition: transform 0.1s;
}
.category-toggle.open { transform: rotate(180deg); }
.category-content { padding-top: var(--space-md); }
.category-content.hidden { display: none; }
.card-description {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.5;
}

/* Model explanation */
.r-explanation {
    padding: var(--space-xl) 0;
    max-width: 640px;
}
.r-explanation.hidden-block { display: none; }
.r-explanation h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
}
.r-explanation p {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.65;
    margin-bottom: var(--space-sm);
}
.r-explanation a {
    color: var(--signal-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Article body links (guide, methodology pages) */
.r-article-main a,
.r-article-body a {
    color: var(--signal-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color 0.12s;
}
.r-article-main a:hover,
.r-article-body a:hover {
    color: var(--signal);
}

/* ─── Footer ────────────────────────────────────────────────────────────── */

.r-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-2xl);
    border-top: 1px solid var(--rule-light);
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
}
.r-footer a {
    color: var(--signal-text);
    text-decoration: none;
    transition: color 0.12s;
}
.r-footer a:hover { color: var(--signal); }
.r-footer-links {
    display: flex;
    gap: var(--space-md);
}
.r-footer .social-divider {
    color: var(--rule);
}

/* ─── Utility ───────────────────────────────────────────────────────────── */

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

/* Hidden score stack (kept for app.js compatibility) */
.v2-score-stack[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   GUIDE & METHODOLOGY PAGES — Article Layout
   ═══════════════════════════════════════════════════════════════════════════ */

.r-article-container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding-inline: clamp(20px, 3vw, 40px);
    padding-bottom: var(--space-2xl);
    /* overflow-x handled by html { overflow-x: hidden } — removed here so position:sticky works on child .r-hero-band */
}
.r-article-hero {
    max-width: 860px;
    margin-bottom: var(--space-3xl);
}
.r-article-hero .r-eyebrow,
.r-hero .r-eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal-text);
    margin-bottom: var(--space-sm);
}
.r-article-hero h1 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: 1.05;
    margin-bottom: var(--space-md);
}
.r-article-hero .r-lede {
    font-size: var(--text-lg);
    color: var(--ink-secondary);
    line-height: 1.6;
    max-width: 60ch;
}
.r-back-link {
    display: inline-block;
    margin-top: var(--space-md);
    font-weight: 500;
    color: var(--signal-text);
    text-decoration: none;
    transition: color 0.12s;
}
.r-back-link:hover {
    color: var(--ink);
}

/* Article body: single-column content, centered within container */
.r-article-body {
    display: grid;
    grid-template-columns: minmax(0, 860px);
    justify-content: center;
    gap: var(--space-2xl);
    align-items: start;
    padding-top: var(--space-2xl);
}
.r-article-main {
    min-width: 0;
}
.r-article-orientation {
    max-width: 720px;
    margin-bottom: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    border-left: 3px solid var(--signal);
    background: rgba(255, 255, 255, 0.52);
}
.r-article-orientation strong {
    display: block;
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--signal-text);
    margin-bottom: 6px;
}
.r-article-orientation p {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

@media (max-width: 960px) {
    .r-article-body {
        grid-template-columns: 1fr;
    }
    /* Equations: cancel breakout on small screens to prevent overflow */
    .r-equation {
        margin-inline: 0;
        padding-inline: var(--space-md);
    }
}

/* Article sections */
.r-article-main section {
    margin-bottom: var(--space-3xl);
    scroll-margin-top: 110px;
}
.r-article-main section + section {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--rule-light);
}
.r-article-main h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
    color: var(--ink);
}
.r-article-main h3 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
    color: var(--ink);
}
.r-article-main p {
    color: var(--ink-secondary);
    line-height: 1.75;
    margin-bottom: var(--space-md);
}
.r-article-main ul, .r-article-main ol {
    color: var(--ink-secondary);
    line-height: 1.75;
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}
.r-article-main li {
    margin-bottom: var(--space-sm);
}
.r-article-main li strong {
    color: var(--ink);
}
.r-article-main a strong,
.r-article-body a strong {
    color: inherit;
}
.r-article-main code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--surface);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}

/* Margin notes / sidebar */
.r-article-margin {
    position: sticky;
    top: 80px;
}
.r-margin-note {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    line-height: 1.5;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--rule-light);
    margin-bottom: var(--space-xl);
}
.r-margin-note strong {
    display: block;
    color: var(--ink-secondary);
    margin-bottom: 4px;
}

/* Pill nav for methodology */
.r-pill-nav {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    padding: var(--space-sm) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-xl);
}
.r-pill-nav a {
    font-size: var(--text-xs);
    font-weight: 500;
    text-decoration: none;
    color: var(--ink-secondary);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--rule);
    white-space: nowrap;
    transition: border-color 0.12s, color 0.12s;
}
.r-pill-nav a:hover { border-color: var(--ink-tertiary); color: var(--ink); }
.r-pill-nav a.is-major {
    font-weight: 600;
    color: var(--ink);
    border-color: var(--ink-tertiary);
}

/* Equation callouts — break out to full container width */
.r-equation {
    margin: var(--space-lg) calc(-1 * clamp(20px, 3vw, 40px));
    padding: var(--space-md) clamp(20px, 3vw, 40px);
    background: var(--surface);
    border-radius: 0;
    overflow-x: auto;
}
.r-equation-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    margin-bottom: var(--space-sm);
}
.r-equation .equation-display {
    color: var(--ink);
    overflow-x: auto;
}

/* Callout blocks (amber left border) */
.r-callout {
    border-left: 3px solid var(--signal);
    padding-left: var(--space-lg);
    margin: var(--space-lg) 0;
}
.r-callout p {
    color: var(--ink);
}

/* Methodology: dual-track sections */
.r-method-section {
    margin-bottom: var(--space-3xl);
}
.r-method-summary {
    margin-bottom: var(--space-lg);
}
.r-method-math {
    border-top: 1px solid var(--rule-light);
    padding-top: var(--space-lg);
}
.r-method-toggle {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-md);
}
.r-method-toggle:hover { color: var(--ink); }
.r-method-toggle::before { content: 'Show the math \2192 '; }
.r-method-section[open] .r-method-toggle::before { content: 'Hide the math \2190 '; }

/* Numbered lists with oversized numbers */
.r-numbered-list {
    list-style: none;
    padding-left: 0;
    counter-reset: step;
}
.r-numbered-list > li {
    counter-increment: step;
    padding-left: var(--space-xl);
    position: relative;
    margin-bottom: var(--space-lg);
}
.r-numbered-list > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -2px;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--rule);
    line-height: 1;
}
.r-numbered-list ul {
    list-style: disc;
    margin-top: 10px;
    padding-left: 1.25rem;
}
.r-numbered-list ul li {
    padding-left: 0;
    position: static;
    margin-bottom: 8px;
}
.r-numbered-list ul li::before {
    content: none;
}

/* Action lists */
.r-action-list {
    border-left: 3px solid var(--signal);
    padding-left: var(--space-lg);
    margin: var(--space-lg) 0;
}
.r-action-list li {
    margin-bottom: var(--space-sm);
    color: var(--ink);
}

/* Blockquotes */
.r-article-main blockquote {
    border-left: 3px solid var(--rule);
    padding-left: var(--space-lg);
    margin: var(--space-lg) 0;
    font-style: italic;
    color: var(--ink-secondary);
}

/* Research tables */
.paper-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin: var(--space-xl) 0;
    color: var(--ink-secondary);
}
.paper-table thead th {
    text-align: left;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
    border-bottom: 2px solid var(--rule);
}
.paper-table td {
    padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
    border-bottom: 1px solid var(--rule-light);
    line-height: 1.5;
    vertical-align: top;
}
.paper-table tr:last-child td {
    border-bottom: none;
}
.paper-table td:first-child {
    color: var(--ink);
    font-weight: 500;
}

/* ─── Banner System ─────────────────────────────────────────────────────── */

/* Ensure page content stacks above hero canvas */
.r-container,
.r-article-container {
    position: relative;
    z-index: 1;
}
/* Header already has position:sticky + z-index:100 — keep it out of this block */

/* Hero band: breaks out of container padding, hosts the animated canvas */
.r-hero-band {
    position: relative;
    margin-inline: calc(-1 * clamp(20px, 3vw, 40px));
    padding-inline: clamp(20px, 3vw, 40px);
    overflow: hidden;
    min-height: 260px;
}

#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Hero text sits above canvas */
.r-hero-band .r-hero,
.r-hero-band .r-article-hero {
    position: relative;
    z-index: 1;
}

/* Article hero inside hero band: own padding, no standalone margin */
.r-hero-band .r-article-hero {
    padding: var(--space-3xl) 0 var(--space-2xl);
    margin-bottom: 0;
}

/* ─── Print ─────────────────────────────────────────────────────────────── */

@media print {
    .r-header, .r-progress, .r-footer { display: none; }
    body { background: #fff; }
    .r-results { border-top: 1px solid #999; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Model Page Overhaul — Wide Field Manual Layout
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --page-max: 1640px;
    --signal: oklch(0.52 0.11 140);
    --signal-soft: oklch(0.65 0.08 140);
    --signal-light: oklch(0.52 0.11 140 / 0.10);
    --signal-medium: oklch(0.52 0.11 140 / 0.18);
    --signal-text: oklch(0.38 0.09 140);
}

body {
    background: var(--paper);
}

.r-header {
    background: color-mix(in oklch, var(--paper) 92%, white 8%);
    backdrop-filter: blur(8px);
}

.r-header-inner,
.r-container {
    max-width: var(--page-max);
}

.r-container {
    padding-inline: clamp(20px, 3vw, 40px);
}

.r-intake-note,
.r-rail-note {
    padding: clamp(18px, 2vw, 24px);
    border: 1px solid color-mix(in oklch, var(--rule) 80%, var(--signal) 20%);
    background:
        linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(245, 239, 230, 0.92));
    border-radius: var(--radius-xl);
    box-shadow: 0 18px 50px rgba(44, 39, 31, 0.06);
}

.r-intake-shell {
    display: block;
    padding: clamp(36px, 5vw, 60px) 0 clamp(18px, 2vw, 28px);
}

.r-analysis-summary {
    position: sticky;
    top: 72px;
    z-index: 90;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-top: 14px;
    padding: 8px 0 10px;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}

.r-analysis-summary.hidden-block {
    display: none;
}

.r-analysis-summary-main {
    display: grid;
    gap: 2px;
}

.r-analysis-summary-kicker {
    color: var(--ink-tertiary);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.r-analysis-summary h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 2.15rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.r-analysis-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
}

.r-analysis-summary-separator {
    color: var(--ink-tertiary);
}

.r-analysis-summary-edit {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    color: var(--signal-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 180ms ease;
}

.r-analysis-summary-edit:hover,
.r-analysis-summary-edit:focus-visible {
    outline: none;
    color: color-mix(in oklch, var(--signal-text) 76%, var(--ink) 24%);
}

.r-stage-entering {
    animation: r-stage-in 420ms var(--ease-out);
}

.r-stage-leaving {
    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

@keyframes r-stage-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.r-intake {
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 44px);
}

.r-intake-step,
.r-intake-step--occupation,
.r-intake-step.r-answered {
    margin-bottom: 0;
}

.r-intake-step {
    padding: 0 0 clamp(22px, 3vw, 34px);
    border-bottom: 1px solid var(--rule-light);
    opacity: 0;
    transform: translateY(10px);
    animation: r-intake-enter 360ms var(--ease-out) forwards;
}

.r-intake-step:last-child,
.r-intake-step--cta {
    border-bottom: none !important;
    padding-bottom: 0;
}

.r-intake-step:nth-child(2) {
    animation-delay: 70ms;
}

.r-intake-step:nth-child(3) {
    animation-delay: 140ms;
}

.r-step-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--space-sm);
}

.r-step-header .r-intake-label {
    margin-bottom: 0;
}

.r-step-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--signal);
    color: var(--paper);
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    font-family: var(--font-body);
}

.r-intake-step--occupation input[list] {
    max-width: 640px;
}

.r-occupation-results {
    max-width: 640px;
    margin-top: 10px;
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.r-occupation-results .r-occupation-list-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule-light);
    border-radius: 0;
}

.r-occupation-results .r-occupation-list {
    max-height: 260px;
    border-radius: 0;
    padding-right: 0;
    gap: 0;
}

.r-occupation-results .r-occupation-option {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--rule-light);
    background: var(--paper);
}

.r-occupation-results .r-occupation-option:last-child {
    border-bottom: none;
}

.r-occupation-results .r-occupation-option:hover,
.r-occupation-results .r-occupation-option:focus-visible {
    transform: none;
    background: color-mix(in oklab, var(--paper) 88%, var(--signal-soft) 12%);
    border-color: var(--rule-light);
}

.r-occupation-results .r-occupation-option.is-selected {
    background: color-mix(in oklab, var(--paper) 80%, var(--signal-soft) 20%);
    border-left: 3px solid var(--signal);
}


.r-adjust-toggle-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

.r-adjust-cta {
    appearance: none;
    border: 1.5px solid var(--rule);
    background: transparent;
    color: var(--ink-secondary);
    border-radius: var(--radius-md);
    padding: 14px 24px;
    font: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.r-adjust-cta:hover,
.r-adjust-cta:focus-visible {
    border-color: var(--signal);
    color: var(--ink);
    outline: none;
    box-shadow: 0 0 0 3px var(--signal-light);
}

.r-adjust-cta:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.r-adjust-cta.is-active {
    background: var(--signal);
    color: var(--paper-bright);
    border-color: var(--signal);
    box-shadow: 0 2px 12px color-mix(in oklab, var(--signal) 28%, transparent 72%);
}

.r-adjust-cta.is-active:hover,
.r-adjust-cta.is-active:focus-visible {
    background: color-mix(in oklab, var(--signal) 88%, var(--ink) 12%);
    border-color: color-mix(in oklab, var(--signal) 88%, var(--ink) 12%);
    color: var(--paper);
    box-shadow: 0 0 0 3px var(--signal-light);
}

.r-adjust-cta--secondary.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    box-shadow: none;
}

.r-adjust-cta--secondary.is-active:hover,
.r-adjust-cta--secondary.is-active:focus-visible {
    background: color-mix(in oklab, var(--ink) 88%, transparent 12%);
    border-color: var(--ink);
    color: var(--paper);
}

@keyframes r-intake-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.r-rail-note p {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.55;
}

.r-rail-note strong {
    color: var(--ink);
}

.r-refine-link {
    font-weight: 600;
    color: var(--signal-text);
}

.r-refine-link:hover {
    color: color-mix(in oklch, var(--signal-text) 82%, var(--ink) 18%);
}

.setup-wizard--shell {
    display: block;
}

.r-workbench-main {
    min-width: 0;
}

.r-task-detail {
    margin-bottom: clamp(18px, 2vw, 26px);
}

.r-workbench-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 10px;
}

.r-workbench-header h3 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    line-height: 1;
    margin-bottom: 0;
}

.r-workbench-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--signal-light);
    color: var(--signal-text);
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
}

.r-builder-surface {
    padding: clamp(20px, 2vw, 28px);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(244, 239, 230, 0.94)),
        repeating-linear-gradient(90deg, rgba(192, 131, 92, 0.05) 0, rgba(192, 131, 92, 0.05) 1px, transparent 1px, transparent 180px);
    border: 1px solid color-mix(in oklch, var(--rule) 72%, var(--signal) 28%);
    box-shadow: 0 24px 60px rgba(44, 39, 31, 0.06);
}

.r-adjust-gate {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: 18px;
    align-items: center;
    padding: 24px 0 18px;
    margin-bottom: 18px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule-light);
}

.r-adjust-gate-copy {
    max-width: 58ch;
}

.r-adjust-gate-copy h3 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.3rem);
    line-height: 1.02;
    margin-bottom: 8px;
}

.r-adjust-gate-copy p {
    color: var(--ink-secondary);
}

.r-adjust-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.r-adjust-choice {
    appearance: none;
    border: 1px solid color-mix(in oklch, var(--rule) 76%, var(--signal) 24%);
    background: rgba(255, 252, 247, 0.82);
    color: var(--ink);
    border-radius: var(--radius-pill);
    padding: 14px 20px;
    min-height: 52px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform 220ms var(--ease-out), background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.r-adjust-choice:hover,
.r-adjust-choice:focus-visible {
    border-color: var(--signal);
    transform: translateY(-1px);
    outline: none;
}

.r-adjust-choice--primary,
.r-adjust-choice.is-active {
    background: var(--signal);
    color: var(--paper);
    border-color: var(--signal);
}

.r-stage-nav {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid color-mix(in oklab, var(--rule-light) 78%, transparent 22%);
}

.r-stage-nav--gate {
    grid-column: 1 / -1;
    padding-top: 0;
    border-top: none;
}

.r-stage-next {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    color: var(--signal-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 180ms ease, transform 180ms ease;
}

.r-stage-next:hover,
.r-stage-next:focus-visible {
    outline: none;
    color: color-mix(in oklch, var(--signal-text) 76%, var(--ink) 24%);
    transform: translateY(-1px);
}

.r-adjust-shell {
    display: grid;
    gap: 20px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}

.r-adjust-shell.hidden-block {
    display: none;
}

.r-adjust-shell--visible {
    animation: r-adjust-reveal 420ms var(--ease-out);
}

@keyframes r-adjust-reveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.r-builder-surface-head {
    margin-bottom: 18px;
    max-width: 52ch;
}

.r-builder-surface-head h4 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1.05;
    margin-bottom: 8px;
}

.r-builder-surface-head p {
    color: var(--ink-secondary);
}

.r-experimental-cut {
    display: none !important;
}

.v2-structure-guide,
.v2-flow-map-shell,
.v2-role-studio {
    width: 100%;
    max-width: none;
    margin-left: 0;
    transform: none;
}

.v2-structure-guide {
    gap: 12px;
    margin-bottom: 18px;
}

.v2-structure-guide-item {
    border-radius: var(--radius-lg);
    background: rgba(255, 253, 249, 0.7);
}

.v2-composition-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 20px);
}

.v2-composition-card {
    padding: 18px;
    border-radius: var(--radius-lg);
    background: rgba(255, 251, 245, 0.82);
    border: 1px solid color-mix(in oklch, var(--rule-light) 78%, var(--signal) 22%);
}

.v2-composition-card-header h4 {
    font-size: var(--text-lg);
    margin-bottom: 6px;
}

.v2-composition-card-header p,
.v2-composition-chip-meta,
.v2-composition-linkline,
.v2-composition-empty {
    color: var(--ink-secondary);
}

.v2-composition-chip {
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.92);
    padding: 12px 14px;
}

.v2-composition-remove {
    color: var(--signal-text);
}

.v2-inline-collapsible,
.v2-inline-collapsible--nested {
    border-radius: var(--radius-xl);
}

.r-questions-section {
    margin-top: 20px;
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.v2-inline-collapsible-summary {
    padding: 20px 24px;
}

.v2-inline-collapsible-summary span:first-child {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.9rem);
}

.v2-inline-collapsible-body {
    padding: 0 24px 24px;
}

.r-explanation {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 22px 24px;
    margin-top: clamp(24px, 3vw, 36px);
    border-radius: var(--radius-xl);
    background: rgba(255, 252, 247, 0.72);
    border: 1px solid var(--rule-light);
}

.r-explanation h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    margin-bottom: 0;
}

.r-explanation p {
    max-width: none;
    color: var(--ink-secondary);
}

.r-results {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.78fr);
    gap: clamp(22px, 3vw, 40px);
    align-items: start;
    border-top: 1px solid color-mix(in oklch, var(--ink) 22%, var(--rule) 78%);
    padding-top: clamp(30px, 4vw, 52px);
    margin-top: clamp(30px, 4vw, 48px);
}

.r-verdict {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
    gap: clamp(18px, 3vw, 42px);
    align-items: end;
    margin-bottom: 0;
    padding-bottom: clamp(18px, 2vw, 26px);
    border-bottom: 1px solid var(--rule-light);
}

.r-verdict > :not(.r-verdict-metrics) {
    max-width: 64ch;
}

.r-verdict-kicker {
    color: var(--signal-text);
}

.r-verdict h2 {
    font-size: clamp(2.2rem, 4.4vw, 4.6rem);
    line-height: 0.96;
}

.r-verdict-fate {
    font-size: clamp(1.45rem, 2vw, 2.25rem);
    display: inline-block;
    background: var(--signal-light);
    border-left: 3px solid var(--signal);
    padding: 4px 16px 4px 12px;
    border-radius: 0 4px 4px 0;
    margin-bottom: 10px;
}

.r-verdict-metrics {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    align-self: stretch;
    padding-left: clamp(12px, 1.4vw, 18px);
    border-left: 1px solid var(--rule-light);
}

.r-metric {
    min-width: 0;
    padding-top: 6px;
}

.r-metric dd {
    font-size: clamp(1rem, 1.15vw, 1.16rem);
}

.r-narrative,
.r-wave-section,
.r-map,
.r-task-section,
.r-labor {
    grid-column: 1 / 2;
}

.r-details {
    grid-column: 2 / 3;
    grid-row: 2 / span 8;
    margin-bottom: 0;
    padding-top: 6px;
    border-top: none;
    position: sticky;
    top: 86px;
}

.r-details summary {
    padding-top: 0;
}

.r-details-body {
    grid-template-columns: 1fr;
    gap: 14px;
}

.r-rail-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--rule-light);
    background: rgba(255, 252, 247, 0.94);
}

.r-narrative-grid {
    gap: clamp(20px, 2.4vw, 34px);
}

.r-narrative-item {
    padding-top: 12px;
    border-top: 1px solid var(--rule-light);
}

.r-wave-section--support,
.r-task-section,
.r-labor,
.r-map {
    padding: clamp(18px, 2vw, 28px);
    border-radius: var(--radius-xl);
    background: rgba(255, 251, 245, 0.68);
    border: 1px solid var(--rule-light);
}

.r-map-grid {
    gap: 0;
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.72);
}

.r-map-column {
    border: none;
    border-right: 1px solid var(--rule-light);
    border-radius: 0;
    padding: 18px 16px;
    background: transparent;
}

.r-map-column:last-child {
    border-right: none;
}

.r-map-column h4 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 6px;
    font-size: var(--text-base);
}

.r-map-column-note {
    min-height: 48px;
    margin-bottom: 14px;
}

.r-map-column--current { background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(247,243,236,0.8)); }
.r-map-column--bargaining { background: linear-gradient(180deg, rgba(246,239,224,0.8), rgba(255,247,236,0.82)); }
.r-map-column--direct { background: linear-gradient(180deg, rgba(252,239,226,0.9), rgba(255,248,241,0.84)); }
.r-map-column--spillover { background: linear-gradient(180deg, rgba(238,243,248,0.84), rgba(247,250,252,0.84)); }
.r-map-column--retained { background: linear-gradient(180deg, rgba(239,246,239,0.8), rgba(248,252,247,0.82)); }

.v2-task-list {
    border-top: 1px solid var(--rule-light);
}

.v2-task-item {
    padding: 16px 0;
}

.v2-task-item--critical {
    border-left: 3px solid var(--signal);
    padding-left: 14px;
}

.v2-task-footnote {
    color: color-mix(in oklch, var(--ink-tertiary) 86%, var(--signal-text) 14%);
}

.r-labor {
    background: rgba(242, 238, 229, 0.9);
}

/* ─── Page Navigation Links ────────────────────────────────────────────── */

.r-page-nav {
    padding: var(--space-xl) 0;
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
}
.r-page-nav a {
    color: var(--signal-text);
    text-decoration: none;
    font-size: var(--text-lg);
    font-weight: 500;
    transition: color 180ms ease;
}
.r-page-nav a:hover,
.r-page-nav a:focus-visible {
    color: var(--signal);
}

/* ─── Unemployment Empty State ─────────────────────────────────────────── */

.r-unemployment-empty {
    display: none;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    padding: var(--space-md) 0;
}

.r-footer-band {
    position: relative;
    overflow: hidden;
    margin-top: clamp(36px, 5vw, 64px);
    border-top: 1px solid var(--rule-light);
}

#footer-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.r-footer-band .r-footer {
    position: relative;
    z-index: 1;
    border-top: none;
    margin-top: 0;
}

@media (max-width: 1180px) {
    .setup-wizard--shell,
    .r-results,
    .r-explanation,
    .r-verdict {
        grid-template-columns: 1fr;
    }

    .r-details {
        position: static;
    }

    .r-details {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-top: 8px;
    }

    .r-verdict-metrics {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--rule-light);
        padding-top: 18px;
    }
}

@media (max-width: 900px) {
    .v2-composition-cards,
    .r-narrative-grid,
    .r-labor-grid {
        grid-template-columns: 1fr;
    }

    .r-adjust-gate {
        grid-template-columns: 1fr;
    }

    .r-adjust-gate-actions {
        justify-content: flex-start;
    }

    .r-map-grid {
        grid-template-columns: 1fr;
        overflow: hidden;
    }

    .r-map-column {
        border-right: none;
        border-bottom: 1px solid var(--rule-light);
    }

    .r-map-column:last-child {
        border-bottom: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .r-intake-step,
    .r-adjust-shell,
    .r-adjust-cta {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    .r-intake-step {
        opacity: 1 !important;
    }
}

@media (max-width: 640px) {
    .r-container {
        padding-inline: 16px;
    }

    .r-workbench-header {
        align-items: start;
        flex-direction: column;
    }

    .r-verdict-metrics {
        grid-template-columns: 1fr;
    }

    .v2-dependency-controls,
    .v2-composition-add-row {
        grid-template-columns: 1fr;
    }

    .v2-inline-collapsible-summary {
        flex-direction: column;
        align-items: start;
        padding-right: 48px;
    }

    .v2-inline-collapsible-helper {
        text-align: left;
    }
}

/* ─── Guided Analysis Walkthrough ───────────────────────────────────────── */

.r-analysis-prelude {
    max-width: 780px;
    padding: clamp(14px, 2vw, 24px) 0 clamp(10px, 1.4vw, 18px);
}

.r-analysis-prelude h3 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
}

.r-analysis-prelude p {
    max-width: 62ch;
    margin: 0;
    color: var(--ink-secondary);
    font-size: clamp(1rem, 1.5vw, 1.08rem);
    line-height: 1.65;
}

.r-results {
    display: flex;
    flex-direction: column;
    gap: clamp(44px, 6vw, 88px);
    padding-bottom: clamp(110px, 12vw, 160px);
}

.r-story-step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: clamp(16px, 2vw, 24px);
    align-items: center;
    min-height: calc(100svh - 150px);
    padding: clamp(32px, 4.5vw, 52px) 0;
    border-top: 1px solid var(--rule-light);
    scroll-margin-top: 110px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}

.r-story-step.is-visible,
.r-function-card.is-visible,
.r-task-story-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.r-story-index {
    position: sticky;
    top: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--paper) 72%, var(--signal-soft) 28%);
    border: 1px solid color-mix(in oklab, var(--rule-light) 70%, var(--signal-soft) 30%);
    color: var(--signal-text);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
}

.r-story-main {
    display: grid;
    gap: clamp(20px, 2.8vw, 30px);
}

.r-story-step--overview .r-story-main,
.r-story-step--pressure .r-story-main,
.r-story-step--retained .r-story-main,
.r-story-step--outcome .r-story-main {
    width: min(1120px, 100%);
}

.r-analysis-hero {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
    min-height: 28vh;
    align-content: center;
    scroll-margin-top: 132px;
}

.r-analysis-hero h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5.3rem);
    line-height: 0.92;
    letter-spacing: -0.05em;
}

.r-analysis-hero--compact {
    min-height: 0;
    justify-items: start;
    text-align: left;
}

.r-analysis-hero--compact h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.r-analysis-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 24px);
}

.r-analysis-columns--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.r-analysis-column {
    display: grid;
    gap: 16px;
    align-content: start;
    min-height: 100%;
    padding: clamp(18px, 2vw, 26px);
    border-top: 1px solid var(--rule-light);
    background: color-mix(in oklab, var(--paper) 89%, var(--signal-soft) 11%);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}

.r-story-step--overview .r-analysis-columns {
    gap: clamp(26px, 3.2vw, 44px);
}

.r-story-step--overview .r-analysis-column {
    min-height: 0;
    padding: 0;
    border-top: none;
    background: transparent;
}

.r-story-step--overview .r-analysis-column-body {
    gap: 12px;
}

.r-story-step--overview .r-analysis-column-list {
    gap: 8px;
}

.r-story-step--pressure .r-analysis-columns,
.r-story-step--retained .r-analysis-columns {
    gap: clamp(28px, 3.6vw, 52px);
    align-items: start;
}

.r-story-step--pressure .r-analysis-column,
.r-story-step--retained .r-analysis-column {
    min-height: 0;
    padding: 0;
    border-top: none;
    background: transparent;
}

.r-story-step--pressure .r-analysis-column-body,
.r-story-step--retained .r-analysis-column-body {
    gap: 18px;
}

.r-story-step--pressure .v2-cluster-item,
.r-story-step--retained .v2-cluster-item {
    padding: 12px 0 14px;
}

.r-story-step.is-visible .r-analysis-column {
    opacity: 1;
    transform: translateY(0);
}

.r-story-step.is-visible .r-analysis-column:nth-child(2) {
    transition-delay: 120ms;
}

.r-story-step.is-visible .r-analysis-column:nth-child(3) {
    transition-delay: 240ms;
}

.r-analysis-column-index {
    color: var(--ink-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
}

.r-analysis-column h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.28rem, 1.8vw, 1.72rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.r-analysis-column strong {
    font-weight: 700;
}

.r-analysis-column em {
    font-style: italic;
}

.r-analysis-column-body {
    display: grid;
    gap: 14px;
}

.r-analysis-column-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 16px;
}

.r-analysis-method-link {
    margin-top: 2px;
    padding: 4px 0 0;
    font-size: var(--text-sm);
}

.r-analysis-list-item {
    position: relative;
    color: var(--ink);
    line-height: 1.6;
}

.r-analysis-list-item span {
    display: block;
    color: var(--ink-secondary);
    line-height: 1.45;
}

.r-analysis-list-item::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--signal) 55%, var(--rule) 45%);
}

.r-analysis-list-item--empty {
    color: var(--ink-secondary);
}

.r-analysis-list-item--empty::before {
    background: var(--rule);
}

.r-analysis-column-note {
    color: var(--ink-secondary);
    line-height: 1.58;
}

.r-transition-panel {
    display: grid;
    gap: 16px;
    margin-top: 22px;
    padding: 22px;
    border: 1px solid color-mix(in oklab, var(--rule) 72%, white 28%);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--paper) 86%, white 14%), color-mix(in oklab, var(--paper) 96%, white 4%));
}

.r-transition-panel-header {
    display: grid;
    gap: 8px;
}

.r-transition-panel-header h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.9vw, 1.4rem);
    letter-spacing: -0.03em;
}

.r-transition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.r-trigger-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid color-mix(in oklab, var(--rule) 74%, white 26%);
    border-radius: var(--radius-xl);
    background: color-mix(in oklab, white 78%, var(--paper) 22%);
}

.r-trigger-topline {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

.r-trigger-stage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--signal-light) 70%, white 30%);
    color: var(--signal-text);
    font-size: var(--text-xs);
    font-weight: 700;
}

.r-trigger-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}

.r-trigger-score {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
}

.r-trigger-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.r-trigger-copy {
    margin: 0;
    color: var(--ink);
    line-height: 1.55;
    font-size: var(--text-sm);
}

.r-trigger-copy--muted {
    color: var(--ink-secondary);
}

.r-seat-panel {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.r-analysis-columns--three {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.r-analysis-column-toggle {
    justify-self: start;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    min-height: 38px;
    padding: 0 14px;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.r-analysis-column-toggle:hover,
.r-analysis-column-toggle:focus-visible {
    outline: none;
    transform: translateY(-1px);
    border-color: var(--signal);
    background: color-mix(in oklab, var(--paper) 76%, white 24%);
}

.r-story-header {
    display: grid;
    gap: 10px;
    max-width: 68ch;
}

.r-story-header h2,
.r-story-panel-header h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.8vw, 2.55rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.r-story-panel-header h3 {
    font-size: clamp(1.2rem, 1.9vw, 1.55rem);
}

.r-story-header p,
.r-story-panel-header p,
.r-story-note,
.v2-assignment-copy {
    margin: 0;
    color: var(--ink-secondary);
    line-height: 1.65;
}

.r-purpose-copy {
    display: grid;
    gap: 14px;
    max-width: 68ch;
}

.r-purpose-copy p {
    margin: 0;
    color: var(--ink-secondary);
}

.r-source-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.r-source-pill,
.r-role-anchor-card,
.r-story-panel,
.r-function-card,
.r-outcome-card {
    background: color-mix(in oklab, var(--paper) 84%, var(--signal-soft) 16%);
    border: 1px solid color-mix(in oklab, var(--rule-light) 72%, var(--signal-soft) 28%);
}

.r-source-pill,
.r-role-anchor-card {
    display: grid;
    gap: 6px;
    min-height: 106px;
    padding: 16px 16px 18px;
    align-content: start;
}

.r-role-anchor-card {
    grid-column: 1 / -1;
}

.r-source-pill span,
.r-role-anchor-card span,
.r-story-strip-item span,
.r-story-metric span,
.r-function-card-top span {
    color: var(--ink-tertiary);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.r-source-pill strong,
.r-role-anchor-card strong {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink-strong);
}

.r-role-anchor-card small {
    color: var(--ink-secondary);
    line-height: 1.5;
}

.r-source-arrow {
    display: none;
}

.r-story-metrics,
.r-story-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.r-story-metrics--three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.r-story-strip--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.r-story-strip--two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.r-story-strip--three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.r-story-metric,
.r-story-strip-item {
    display: grid;
    gap: 6px;
    padding: 14px 16px 16px;
    background: color-mix(in oklab, var(--paper) 88%, var(--signal-soft) 12%);
    border-top: 1px solid var(--rule-light);
}

.r-story-metric strong,
.r-story-strip-item strong {
    color: var(--ink-strong);
    font-size: var(--text-base);
    line-height: 1.45;
}

.r-story-metric--hidden,
.r-story-strip-item--hidden {
    display: none;
}

.r-story-strip-copy {
    color: var(--ink-strong);
    line-height: 1.55;
}

.r-story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 22px);
}

.r-story-stack {
    display: grid;
    gap: clamp(16px, 2vw, 22px);
}

.r-story-panel,
.r-outcome-card {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 2vw, 24px);
}

.r-story-panel--quiet {
    background: color-mix(in oklab, var(--paper) 92%, var(--signal-soft) 8%);
}

.r-story-panel-header {
    display: grid;
    gap: 8px;
}

.r-function-stage {
    display: grid;
    gap: 16px;
}

.r-function-lead {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--ink-tertiary);
    font-size: var(--text-sm);
    letter-spacing: 0.01em;
    flex-wrap: wrap;
}

.r-function-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.r-function-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

.r-function-card-top {
    display: grid;
    gap: 8px;
}

.r-function-card-top strong {
    font-size: var(--text-lg);
    line-height: 1.35;
}

.r-function-card-note {
    margin: 0;
    color: var(--ink-secondary);
    line-height: 1.6;
}

.r-function-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.r-function-empty {
    padding: 20px 0;
    color: var(--ink-secondary);
}

.r-task-story {
    display: grid;
    gap: clamp(16px, 2vw, 22px);
}

.r-task-story-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 0 0 0 2px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

.r-task-story-index {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
    color: var(--ink-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
}

.r-task-story-content {
    display: grid;
    gap: 12px;
    padding: 0 0 24px 20px;
    border-left: 1px solid color-mix(in oklab, var(--rule-light) 72%, var(--signal-soft) 28%);
}

.r-task-story-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
}

.r-task-story-top h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.9vw, 1.7rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.r-task-story-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.r-task-story-copy {
    margin: 0;
    max-width: 68ch;
    color: var(--ink-secondary);
}

.r-task-story-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.r-task-story-meta-item {
    display: grid;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--rule-light);
}

.r-task-story-meta-item span {
    color: var(--ink-tertiary);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.r-task-story-meta-item strong {
    color: var(--ink-strong);
    font-size: var(--text-base);
    line-height: 1.45;
}

.r-outcome-card .r-verdict-kicker {
    margin-bottom: 0;
}

.r-verdict-metrics--compact {
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.r-supporting-timing {
    border-top: 1px solid var(--rule-light);
    padding-top: 14px;
}

.r-supporting-timing summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    color: var(--ink-strong);
    font-weight: 600;
}

.r-supporting-timing summary::-webkit-details-marker {
    display: none;
}

.r-details--appendix {
    margin-top: 8px;
    border-top: 1px solid var(--rule-light);
    padding-top: 14px;
    position: static;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
}

.r-details--appendix .r-details-body--stacked {
    display: grid;
    gap: 24px;
    padding-top: 18px;
}

.r-appendix-section {
    display: grid;
    gap: 16px;
}

.r-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.r-labor--appendix {
    margin-top: 0;
}

@media (max-width: 980px) {
    .r-analysis-summary {
        align-items: flex-start;
        flex-direction: column;
        top: 64px;
    }

    .r-hierarchy-scale {
        grid-template-columns: 1fr;
    }

    .r-analysis-columns {
        grid-template-columns: 1fr;
    }

    .r-occupation-list {
        max-height: 260px;
    }

    .r-source-flow,
    .r-story-metrics,
    .r-story-strip,
    .r-story-metrics--three-up,
    .r-story-strip--two-up,
    .r-story-grid,
    .r-function-grid,
    .r-details-grid,
    .r-verdict-metrics--compact,
    .r-task-story-meta {
        grid-template-columns: 1fr;
    }

    .r-story-step {
        grid-template-columns: 1fr;
    }

    .r-story-index {
        position: static;
        width: 42px;
        height: 42px;
    }

    .r-source-arrow {
        width: 1px;
        min-height: 22px;
        justify-self: center;
    }

    .r-task-story-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .r-task-story-content {
        padding: 14px 0 22px;
        border-left: none;
        border-top: 1px solid color-mix(in oklab, var(--rule-light) 72%, var(--signal-soft) 28%);
    }

    .r-task-story-top {
        flex-direction: column;
    }

    .r-task-story-badges {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .r-story-step,
    .r-function-card,
    .r-task-story-item,
    .r-analysis-column,
    .r-analysis-summary {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Occupation Map (scatter plot)
   ═══════════════════════════════════════════════════════════════════════════ */

.occupation-map-shell {
    display: grid;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.occupation-map-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-md);
    align-items: end;
}

.occupation-map-control {
    display: grid;
    gap: 6px;
}

.occupation-map-control label,
.occupation-map-toggle {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}

.occupation-map-control select {
    min-height: 44px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    padding: 10px 12px;
    font: inherit;
    width: 100%;
}

.occupation-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.occupation-map-toggle input {
    accent-color: var(--signal-text);
}

.occupation-map-zoom-controls {
    display: grid;
    gap: 6px;
}

.occupation-map-zoom-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}

.occupation-map-zoom-btns {
    display: flex;
    gap: 4px;
}

.occupation-map-zoom-btn {
    appearance: none;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 6px 10px;
    min-height: 36px;
    min-width: 36px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.12s, border-color 0.12s;
}

.occupation-map-zoom-btn:hover {
    background: var(--surface);
    border-color: var(--ink-tertiary);
}

.occupation-map-zoom-btn--reset {
    min-width: auto;
    padding: 6px 12px;
}

.occupation-map-plot {
    cursor: default;
}

.occupation-map-plot.is-zoomed {
    cursor: grab;
}

.occupation-map-plot.is-dragging {
    cursor: grabbing;
}

.occupation-map-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.occupation-map-plot-wrap {
    display: grid;
    gap: 10px;
}

.occupation-map-caption,
.occupation-map-status {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.occupation-map-plot {
    position: relative;
    min-height: 760px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
}

.occupation-map-surface,
.occupation-map-points {
    position: absolute;
    inset: 0;
}

.occupation-map-surface {
    transform: translate(0px, 0px) scale(1);
    transform-origin: 0 0;
    transition: opacity 140ms ease;
}

.occupation-map-plot.is-loading .occupation-map-surface {
    opacity: 0;
}

.occupation-map-axis-line,
.occupation-map-midline {
    position: absolute;
    background: var(--rule-light);
}

.occupation-map-axis-line--x {
    left: 72px;
    right: 22px;
    bottom: 52px;
    height: 1px;
}

.occupation-map-axis-line--y {
    top: 18px;
    bottom: 52px;
    left: 72px;
    width: 1px;
}

.occupation-map-midline--x {
    left: 72px;
    right: 22px;
    top: 50%;
    border-top: 1px dashed color-mix(in oklab, var(--rule-light) 75%, var(--signal-soft) 25%);
    background: transparent;
}

.occupation-map-midline--y {
    top: 18px;
    bottom: 52px;
    left: 50%;
    border-left: 1px dashed color-mix(in oklab, var(--rule-light) 75%, var(--signal-soft) 25%);
    background: transparent;
}

.occupation-map-axis-title,
.occupation-map-tick {
    position: absolute;
    color: var(--ink-tertiary);
}

.occupation-map-axis-title {
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.occupation-map-axis-title--x {
    left: 72px;
    right: 22px;
    bottom: 12px;
    text-align: center;
}

.occupation-map-axis-title--y {
    top: 50%;
    left: 8px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    width: 250px;
}

.occupation-map-quadrant {
    position: absolute;
    font-size: var(--text-xs);
    font-weight: 500;
    color: color-mix(in oklab, var(--ink-tertiary) 66%, transparent 34%);
    pointer-events: none;
    letter-spacing: 0.05em;
}

.occupation-map-quadrant--tl { top: 28px; left: 84px; }
.occupation-map-quadrant--tr { top: 28px; right: 34px; }
.occupation-map-quadrant--bl { bottom: 68px; left: 84px; }
.occupation-map-quadrant--br { bottom: 68px; right: 34px; }

.occupation-map-tick {
    font-size: 11px;
    font-family: var(--font-mono);
}

.occupation-map-tick--x0 { left: 72px; bottom: 28px; }
.occupation-map-tick--x1 { right: 22px; bottom: 28px; }
.occupation-map-tick--y0 { left: 42px; bottom: 52px; }
.occupation-map-tick--y1 { left: 42px; top: 12px; }

.occupation-map-point {
    position: absolute;
    border: none;
    border-radius: var(--radius-pill);
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.22);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
    padding: 0;
    z-index: 1;
    filter: none;
}

.occupation-map-point::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: var(--radius-pill);
}

.occupation-map-point:hover,
.occupation-map-point:focus-visible,
.occupation-map-point.is-selected {
    outline: none;
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.52);
    z-index: 2;
    filter: none;
}

.occupation-map-label {
    position: absolute;
    transform: translate(10px, -50%);
    font-size: 11px;
    line-height: 1.25;
    color: var(--ink-secondary);
    pointer-events: none;
    white-space: nowrap;
}

.occupation-map-detail {
    display: grid;
    gap: 12px;
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule-light);
    max-width: 72ch;
}

.occupation-map-detail h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2vw, 2rem);
    line-height: 0.98;
}

.occupation-map-detail p {
    margin: 0;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.occupation-map-meta {
    display: grid;
    gap: 8px;
}

.occupation-map-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule-light);
    font-size: var(--text-sm);
}

.occupation-map-meta-row span:first-child {
    color: var(--ink-tertiary);
}

.occupation-map-meta-row strong {
    color: var(--ink);
    text-align: right;
}

.occupation-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-top: 4px;
}

.occupation-map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}

.occupation-map-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    display: inline-block;
}

.occupation-map-heading {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.5vw, 2.6rem);
    line-height: 1.02;
    margin: 0 0 var(--space-sm);
}

.occupation-map-intro {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
    max-width: 72ch;
    margin: 0 0 var(--space-lg);
}

/* Two-column layout: plot + detail sidebar on wide screens */
@media (min-width: 961px) {
    .occupation-map-frame {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

/* ── User & baseline point styles ────────────────────────── */

.occupation-map-point--user {
    width: 16px;
    height: 16px;
    background: var(--signal-text, #1a1a1a);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.25);
    z-index: 3;
}

.occupation-map-point--baseline {
    width: 14px;
    height: 14px;
    background: transparent;
    border: 2px solid var(--ink-secondary, #666);
    box-shadow: none;
    z-index: 3;
}

.occupation-map-point--baseline:hover,
.occupation-map-point--baseline:focus-visible,
.occupation-map-point--baseline.is-selected {
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.45);
}

.occupation-map-label--user,
.occupation-map-label--baseline {
    font-weight: 600;
    color: var(--ink);
}

.occupation-map-label--baseline {
    font-weight: 400;
    font-style: italic;
    color: var(--ink-tertiary);
}

.occupation-map-connector {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

@media (max-width: 960px) {
    .r-results {
        gap: 18px;
        padding-bottom: 72px;
    }

    .occupation-map-controls,
    .occupation-map-frame {
        grid-template-columns: 1fr;
    }
    .occupation-map-plot {
        min-height: 560px;
    }

    .r-story-step {
        min-height: 0;
        align-items: start;
        padding: 18px 0;
        gap: 14px;
    }

    .r-story-main {
        gap: 16px;
    }

    .r-analysis-hero {
        min-height: 0;
        align-content: start;
    }

    .r-stage-nav {
        padding-top: 6px;
    }

    .r-dx-seat-panels {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg);
    }

    .r-dx-seat-glossary {
        grid-template-columns: 1fr !important;
    }

    .r-dx-wave-defs {
        grid-template-columns: 1fr !important;
    }

    .r-dx-seat-numbers {
        flex-direction: row !important;
        justify-content: center;
        gap: var(--space-xl);
    }

    .r-dx-pmap-frame {
        grid-template-columns: 1fr !important;
    }

    .r-dx-pmap-plot {
        min-height: 560px !important;
    }

    .r-dx-scatter-narratives {
        grid-template-columns: 1fr !important;
    }

    .r-dx-wave-timeline {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .r-dx-wave-connector {
        width: 2px !important;
        height: 32px !important;
        align-self: center;
    }

    .r-dx-trigger-grid {
        grid-template-columns: 1fr !important;
    }

    .r-dx-audit-grid {
        grid-template-columns: 1fr !important;
    }

    .r-dx-labor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .r-dx-fate-label {
        font-size: var(--text-3xl) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Results Page Overhaul — r-dx- sections
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Shared section patterns ──────────────────────────────────────────── */

.r-dx-section {
    padding: clamp(32px, 4.5vw, 56px) 0;
    border-top: 1px solid var(--rule-light);
    scroll-margin-top: 110px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 460ms var(--ease-out),
                transform 460ms var(--ease-out);
}

.r-dx-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.r-dx-section-header {
    margin-bottom: var(--space-lg);
}

.r-dx-section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin: 0 0 var(--space-sm);
}

.r-dx-section-sub {
    color: var(--ink-secondary);
    font-size: var(--text-base);
    line-height: 1.5;
    max-width: 640px;
}

/* ─── Section 1: Verdict ────────────────────────────────────────────────── */

.r-dx-section--verdict {
    border-top: none;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.r-dx-edit-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    padding: 5px var(--space-sm);
    background: var(--signal-light);
    border: 1px solid oklch(0.55 0.09 145 / 0.22);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--signal-text);
}

.r-dx-verdict-lede {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem);
    line-height: 1.25;
    color: var(--ink);
    max-width: 62ch;
    margin: 0 0 var(--space-lg);
    letter-spacing: -0.02em;
}

/* Verdict meta strip — inline stats */

.r-dx-verdict-strip {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--rule-light);
}

.r-dx-verdict-strip-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--text-sm);
}

.r-dx-verdict-strip-label {
    color: var(--ink-tertiary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.r-dx-verdict-strip-item strong {
    color: var(--ink);
    font-weight: 600;
}

.r-dx-verdict-strip-sep {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--rule);
    flex-shrink: 0;
}

/* Fate label (now in storyboard section) */

.r-dx-fate-label {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: 0.92;
    letter-spacing: -0.05em;
    color: var(--ink);
    margin: 0;
}

.r-dx-fate-label .r-dx-fate-word {
    display: inline-block;
    opacity: 0;
    animation: r-dx-word-in 300ms var(--ease-out) forwards;
}

@keyframes r-dx-word-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Forces: drivers and counterweights */

.r-dx-forces {
    display: grid;
    gap: var(--space-sm);
    width: 100%;
    max-width: 480px;
}

.r-dx-force-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.r-dx-force-label {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.r-dx-force-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.r-dx-force-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 500;
    opacity: 0;
}

@keyframes r-dx-chip-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.r-dx-force-chip.is-animated {
    animation: r-dx-chip-in 200ms var(--ease-out) forwards;
}

.r-dx-force-chip--driver {
    background: oklch(0.62 0.12 40 / 0.12);
    color: oklch(0.42 0.10 40);
    border: 1px solid oklch(0.62 0.12 40 / 0.25);
}

.r-dx-force-chip--counterweight {
    background: var(--signal-light);
    color: var(--signal-text);
    border: 1px solid oklch(0.55 0.09 145 / 0.25);
}

/* ─── Storyboard stage ─────────────────────────────────────────────────── */

/* ─── Storyboard / Bundle Strip ─────────────────────────────────────────── */

.r-dx-section--storyboard {
    border-top: none;
    padding-top: 0;
    scroll-margin-top: 140px;
}

.r-dx-story-header {
    margin-bottom: var(--space-xl);
}

.r-dx-story-header .r-section-label {
    margin-bottom: var(--space-sm);
}

.r-dx-story-summary-text {
    margin: 0;
    max-width: 68ch;
    color: var(--ink-secondary);
    font-size: var(--text-md);
    line-height: 1.6;
}

/* Bundle strip — editorial list of work bundles grouped by fate */

.r-dx-bundle-strip {
    display: grid;
    gap: var(--space-2xl);
}

.r-dx-bundle-group {
    display: grid;
    gap: 0;
}

.r-dx-bundle-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-bottom: 10px;
    margin-bottom: 2px;
}

.r-dx-bundle-group-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.22;
}

.r-dx-bundle-group-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    white-space: nowrap;
}

.r-dx-bundle-group--shrink { color: oklch(0.50 0.08 45); }
.r-dx-bundle-group--retain { color: var(--ink-secondary); }
.r-dx-bundle-group--grow   { color: oklch(0.44 0.09 145); }

.r-dx-bundle-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 2px var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--rule-light);
    cursor: default;
}

.r-dx-bundle-row:last-child {
    border-bottom: none;
}

.r-dx-bundle-row-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
    grid-column: 1;
    grid-row: 1;
}

.r-dx-bundle-row-share {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.r-dx-bundle-row-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 2px;
    background: var(--rule-light);
    border-radius: 1px;
    margin: 4px 0;
}

.r-dx-bundle-row-bar-fill {
    height: 100%;
    width: calc(var(--bar-width, 0.5) * 100%);
    border-radius: 1px;
    transition: width 600ms var(--ease-out);
}

.r-dx-bundle-group--shrink .r-dx-bundle-row-bar-fill { background: oklch(0.68 0.07 45); }
.r-dx-bundle-group--retain .r-dx-bundle-row-bar-fill { background: oklch(0.58 0.02 90); }
.r-dx-bundle-group--grow   .r-dx-bundle-row-bar-fill { background: oklch(0.60 0.09 145); }

.r-dx-bundle-row-reason {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.5;
    margin: 0;
}

.r-dx-story-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: var(--space-lg);
}

.r-state-control-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(12px, 1.4vw, var(--space-md));
    margin-top: var(--space-lg);
}

.r-state-control {
    display: grid;
    grid-template-rows: auto auto minmax(2.8em, auto) auto;
    align-content: start;
    gap: 6px;
    padding-top: 10px;
    padding-bottom: 2px;
    min-height: 0;
    border-top: 1px solid color-mix(in oklab, var(--rule) 82%, transparent 18%);
}

.r-state-control span {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-tertiary);
}

.r-state-control strong {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: 1.35;
}

.r-state-control-desc {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    line-height: 1.4;
    margin-top: -2px;
    max-width: 30ch;
}

.r-state-control input[type="range"] {
    width: 100%;
    margin-top: 2px;
    accent-color: var(--signal);
}

.r-occupation-hierarchy-control {
    display: grid;
    gap: 8px;
}

.r-occupation-hierarchy-control span {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-tertiary);
}

.r-occupation-hierarchy-control select {
    width: 100%;
    min-height: 42px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in oklab, var(--rule) 88%, transparent 12%);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    padding: 0 14px;
}

.r-occupation-hierarchy-control strong {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: 1.4;
}

.r-state-control-strip--occupation {
    margin-top: 0;
}

.r-state-checkpoint-card {
    background: color-mix(in oklab, var(--paper) 95%, var(--signal-light) 5%);
}

.r-state-checkpoint-note {
    border-top: 1px solid var(--rule-light);
    padding-top: 10px;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
}

.r-dx-story-metric {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--paper) 98%, var(--signal-soft) 2%);
    border: 1px solid color-mix(in oklab, var(--rule) 82%, transparent 18%);
}

.r-dx-story-metric span {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-tertiary);
}

.r-dx-story-metric strong {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: 1.35;
}

.r-dx-story-metric--accent {
    background: linear-gradient(180deg, color-mix(in oklab, var(--signal-light) 65%, var(--paper) 35%), var(--paper));
}

.r-dx-story-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--space-sm);
}

.r-dx-story-link {
    border: none;
    border-bottom: 1px solid color-mix(in oklab, var(--rule) 80%, transparent 20%);
    background: none;
    padding: 0 0 4px;
    font: inherit;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease;
}

.r-dx-story-link:hover {
    color: var(--ink);
    border-color: color-mix(in oklab, var(--signal) 28%, var(--rule) 72%);
}

.r-dx-supporting-details {
    margin-top: clamp(28px, 4vw, 44px);
    border-top: 1px solid var(--rule-light);
    padding-top: var(--space-lg);
}

.r-dx-supporting-summary {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-md);
    align-items: center;
    padding: 0 0 var(--space-md);
    cursor: pointer;
}

.r-dx-supporting-summary::-webkit-details-marker {
    display: none;
}

.r-dx-supporting-kicker {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-tertiary);
    margin-bottom: 4px;
}

.r-dx-supporting-summary strong {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    line-height: 1;
}

.r-dx-supporting-copy {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    text-align: right;
}

.r-dx-supporting-summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--rule) 75%, transparent 25%);
    color: var(--ink-secondary);
    font-size: 1.1rem;
    line-height: 1;
}

.r-dx-supporting-details[open] .r-dx-supporting-copy {
    color: var(--ink);
}

.r-dx-supporting-details[open] .r-dx-supporting-summary::after {
    content: "−";
    color: var(--ink);
    border-color: color-mix(in oklab, var(--signal) 25%, var(--rule) 75%);
}

.r-dx-supporting-body {
    display: grid;
    gap: 0;
}

.r-dx-model-inspector {
    border-top: 1px solid var(--rule-light);
    padding-top: var(--space-md);
}

.r-dx-model-inspector-summary {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-md);
    align-items: center;
    cursor: pointer;
    padding-bottom: var(--space-md);
}

.r-dx-model-inspector-summary::-webkit-details-marker {
    display: none;
}

.r-dx-model-inspector-kicker {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-tertiary);
    margin-bottom: 4px;
}

.r-dx-model-inspector-copy {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    text-align: right;
}

.r-dx-model-inspector-summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--rule) 75%, transparent 25%);
    color: var(--ink-secondary);
    font-size: 1rem;
    line-height: 1;
}

.r-dx-model-inspector[open] .r-dx-model-inspector-summary::after {
    content: "−";
    color: var(--ink);
    border-color: color-mix(in oklab, var(--signal) 25%, var(--rule) 75%);
}

.r-dx-model-inspector-body {
    display: grid;
    gap: var(--space-lg);
    padding-top: var(--space-sm);
}

@media (max-width: 1080px) {
    .r-dx-supporting-summary {
        grid-template-columns: 1fr;
    }

    .r-dx-model-inspector-summary {
        grid-template-columns: 1fr;
    }

    .r-dx-supporting-copy {
        text-align: left;
    }

    .r-state-control-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (prefers-reduced-motion: reduce) {
    .r-dx-bundle-row-bar-fill {
        transition: none !important;
    }
    .r-dx-fate-label .r-dx-fate-word {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ─── Section 2: Seat Shift (Before/After) ─────────────────────────────── */

.r-dx-seat-panels {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.r-dx-seat-panel {
    display: grid;
    gap: var(--space-md);
}

.r-dx-seat-panel-label {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin: 0;
}

.r-dx-stacked-bar {
    display: flex;
    height: 32px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--rule-light);
}

.r-dx-bar-segment {
    min-width: 2px;
    transition: flex-basis 600ms var(--ease-out);
}

.r-dx-bar-segment--shrink {
    background: oklch(0.72 0.10 55 / 0.55);
}

.r-dx-bar-segment--retain {
    background: var(--surface);
}

.r-dx-bar-segment--grow {
    background: var(--signal-soft);
}

.r-dx-seat-numbers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-xl);
}

.r-dx-seat-num {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.r-dx-seat-num-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1;
    font-weight: 400;
}

.r-dx-seat-num--shrink .r-dx-seat-num-value { color: oklch(0.50 0.10 55); }
.r-dx-seat-num--retain .r-dx-seat-num-value { color: var(--ink-secondary); }
.r-dx-seat-num--grow .r-dx-seat-num-value { color: var(--signal-text); }

.r-dx-seat-num-label {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.r-dx-bundle-list {
    display: grid;
    gap: var(--space-sm);
}

.r-dx-bundle-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--paper);
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    opacity: 0;
    transform: translateY(8px);
}

.r-dx-bundle-item.is-animated {
    animation: r-dx-chip-in 280ms var(--ease-out) forwards;
}

.r-dx-bundle-arrow {
    font-size: var(--text-lg);
    line-height: 1;
}

.r-dx-bundle-arrow--shrink { color: oklch(0.50 0.10 55); }
.r-dx-bundle-arrow--retain { color: var(--ink-tertiary); }
.r-dx-bundle-arrow--grow { color: var(--signal-text); }

.r-dx-bundle-label {
    flex: 1;
}

.r-dx-bundle-badge {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    padding: 2px 6px;
    background: var(--surface);
    border-radius: var(--radius-sm);
}

.r-dx-seat-rebalance {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    margin-top: var(--space-md);
    max-width: 640px;
}

/* ─── Section 3: Pressure Scatter ──────────────────────────────────────── */

/* Pressure map — interactive HTML plot (mirrors occupation map pattern) */

.r-dx-pmap-shell {
    margin-bottom: var(--space-xl);
}

.r-dx-pmap-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    align-items: end;
    margin-bottom: var(--space-md);
}

.r-dx-pmap-plot-wrap {
    min-width: 0;
    display: grid;
    gap: 10px;
    position: relative;
}

.r-dx-pmap-control {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.r-dx-pmap-control label {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.r-dx-pmap-control select {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    padding: 5px 8px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}

.r-dx-pmap-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    cursor: pointer;
    user-select: none;
    padding-bottom: 2px;
}

.r-dx-pmap-toggle input {
    accent-color: var(--signal);
}

.r-dx-pmap-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding-bottom: 2px;
    margin-left: auto;
}

.r-dx-pmap-zoom-label {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.r-dx-pmap-zoom-btns {
    display: inline-flex;
    gap: 6px;
}

.r-dx-pmap-zoom-btn {
    border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent 30%);
    background: color-mix(in oklab, var(--paper) 92%, var(--signal-soft) 8%);
    color: var(--ink);
    font: inherit;
    min-width: 34px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.r-dx-pmap-zoom-btn:hover {
    background: color-mix(in oklab, var(--paper) 82%, var(--signal-soft) 18%);
    border-color: color-mix(in oklab, var(--signal) 24%, var(--rule) 76%);
    transform: translateY(-1px);
}

.r-dx-pmap-zoom-btn--reset {
    min-width: 56px;
}

.r-dx-pmap-frame {
    display: block;
}

.r-dx-pmap-plot {
    position: relative;
    width: 100%;
    min-height: 760px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
    cursor: default;
}

.r-dx-pmap-plot.is-zoomed {
    cursor: grab;
}

.r-dx-pmap-plot.is-dragging {
    cursor: grabbing;
}

.r-dx-pmap-surface {
    position: absolute;
    inset: 0;
    transition: transform 180ms ease;
}

.r-dx-pmap-plot.is-dragging .r-dx-pmap-surface {
    transition: none;
}

.r-dx-pmap-axis-line--x {
    position: absolute;
    bottom: 52px;
    left: 72px;
    right: 22px;
    height: 1px;
    background: var(--rule-light);
}

.r-dx-pmap-axis-line--y {
    position: absolute;
    top: 18px;
    bottom: 52px;
    left: 72px;
    width: 1px;
    background: var(--rule-light);
}

.r-dx-pmap-midline--x {
    position: absolute;
    top: 18px;
    bottom: 52px;
    width: 1px;
    background: transparent;
    border-left: 1px dashed color-mix(in oklab, var(--rule-light) 75%, var(--signal-soft) 25%);
    pointer-events: none;
}

.r-dx-pmap-midline--y {
    position: absolute;
    left: 72px;
    right: 22px;
    height: 1px;
    background: transparent;
    border-top: 1px dashed color-mix(in oklab, var(--rule-light) 75%, var(--signal-soft) 25%);
    pointer-events: none;
}

.r-dx-pmap-quadrant {
    position: absolute;
    font-size: var(--text-xs);
    font-weight: 500;
    color: color-mix(in oklab, var(--ink-tertiary) 66%, transparent 34%);
    pointer-events: none;
    letter-spacing: 0.05em;
}

.r-dx-pmap-quadrant--tl { top: 28px; left: 84px; }
.r-dx-pmap-quadrant--tr { top: 28px; right: 34px; }
.r-dx-pmap-quadrant--bl { bottom: 68px; left: 84px; }
.r-dx-pmap-quadrant--br { bottom: 68px; right: 34px; }

.r-dx-pmap-axis-title {
    position: absolute;
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    pointer-events: none;
}

.r-dx-pmap-axis-title--x {
    left: 72px;
    right: 22px;
    bottom: 12px;
    text-align: center;
}

.r-dx-pmap-axis-title--y {
    top: 50%;
    left: 8px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    width: 250px;
}

.r-dx-pmap-tick {
    position: absolute;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--ink-tertiary);
    pointer-events: none;
}

.r-dx-pmap-tick--x0 { bottom: 28px; left: 72px; }
.r-dx-pmap-tick--x1 { bottom: 28px; right: 22px; }
.r-dx-pmap-tick--y0 { bottom: 52px; left: 42px; }
.r-dx-pmap-tick--y1 { top: 12px; left: 42px; }

.r-dx-pmap-points {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.r-dx-pmap-point {
    position: absolute;
    border: none;
    border-radius: var(--radius-pill);
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.18);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 300ms ease;
    padding: 0;
}

.r-dx-pmap-point:hover,
.r-dx-pmap-point:focus-visible,
.r-dx-pmap-point.is-selected {
    outline: none;
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.65);
    z-index: 4;
}

.r-dx-pmap-point.is-dimmed {
    opacity: 0.25;
}

.r-dx-pmap-point.is-stage-focus {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.55), 0 12px 28px rgba(17, 17, 17, 0.12);
}

.r-dx-pmap-point.is-stage-muted {
    opacity: 0.28;
}

.r-dx-pmap-point.is-filtered {
    opacity: 0.14;
}

.r-dx-pmap-label {
    position: absolute;
    transform: translate(10px, -50%);
    font-size: 11px;
    line-height: 1.2;
    color: var(--ink-secondary);
    pointer-events: none;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.r-dx-pmap-label--left {
    text-align: right;
}

.r-dx-pmap-label.is-selected {
    color: var(--ink);
    font-weight: 600;
}

.r-dx-pmap-label.is-stage-focus {
    color: var(--ink);
    font-weight: 600;
}

.r-dx-pmap-label.is-stage-muted {
    opacity: 0.32;
}

.r-dx-pmap-label.is-dimmed {
    opacity: 0.35;
}

.r-dx-pmap-label.is-filtered {
    opacity: 0.22;
}

.r-dx-pmap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}

.r-dx-pmap-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent 30%);
    background: transparent;
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.r-dx-pmap-legend-item:hover {
    background: color-mix(in oklab, var(--paper) 82%, var(--signal-soft) 18%);
}

.r-dx-pmap-legend-item.is-active {
    background: color-mix(in oklab, var(--paper) 72%, var(--signal-soft) 28%);
    border-color: color-mix(in oklab, var(--signal) 28%, var(--rule) 72%);
    color: var(--ink);
}

.r-dx-pmap-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Detail panel */

.r-dx-pmap-detail {
    position: absolute;
    z-index: 4;
    display: grid;
    gap: 12px;
    padding: var(--space-md);
    background: color-mix(in oklab, var(--paper) 94%, var(--signal-soft) 6%);
    border: 1px solid color-mix(in oklab, var(--rule-light) 76%, var(--signal-soft) 24%);
    box-shadow: 0 22px 48px rgba(17, 17, 17, 0.12);
    border-radius: var(--radius-lg);
    max-width: min(320px, calc(100% - 24px));
    backdrop-filter: blur(6px);
}

.r-dx-pmap-detail[hidden] {
    display: none;
}

.r-dx-pmap-detail-kicker {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (max-width: 900px) {
    .r-dx-pmap-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm);
        align-items: stretch;
    }

    .r-dx-pmap-control select {
        width: 100%;
    }

    .r-dx-pmap-toggle {
        padding: 8px 0 0;
    }

    .r-dx-pmap-zoom-controls {
        grid-column: 1 / -1;
        margin-left: 0;
        justify-content: space-between;
        width: 100%;
    }

    .r-dx-pmap-zoom-btns {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    .r-dx-pmap-controls {
        grid-template-columns: 1fr;
    }

    .r-dx-pmap-frame {
        gap: var(--space-md);
    }

    .r-dx-pmap-toggle {
        padding-top: 0;
    }

    .r-dx-pmap-zoom-btns {
        width: 100%;
        justify-content: stretch;
    }

    .r-dx-pmap-zoom-btn {
        flex: 1 1 auto;
    }

    .r-dx-pmap-detail {
        left: 12px !important;
        right: 12px;
        width: auto !important;
        max-width: none;
    }
}

.r-dx-pmap-detail h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2vw, 2rem);
    line-height: 0.98;
}

.r-dx-pmap-detail p {
    margin: 0;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.r-dx-pmap-meta {
    display: grid;
    gap: 8px;
}

.r-dx-pmap-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: var(--text-sm);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule-light);
}

.r-dx-pmap-meta-row span {
    color: var(--ink-tertiary);
    white-space: nowrap;
}

.r-dx-pmap-meta-row strong {
    color: var(--ink);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
    max-width: 65%;
}

.r-dx-pmap-meta-chip {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
}

.r-dx-pmap-meta-chip--wave-current { background: rgba(28, 27, 24, 0.10); color: var(--ink); }
.r-dx-pmap-meta-chip--wave-next    { background: oklch(0.72 0.10 85 / 0.15); color: oklch(0.42 0.10 85); }
.r-dx-pmap-meta-chip--wave-distant { background: var(--signal-light); color: var(--signal-text); }
.r-dx-pmap-meta-chip--automation   { background: oklch(0.62 0.12 40 / 0.12); color: oklch(0.42 0.10 40); }
.r-dx-pmap-meta-chip--augmentation { background: var(--signal-light); color: var(--signal-text); }
.r-dx-pmap-meta-chip--mixed        { background: oklch(0.72 0.10 85 / 0.12); color: oklch(0.42 0.10 85); }
.r-dx-pmap-meta-chip--evidence     { background: var(--surface); color: var(--ink-secondary); }

.r-dx-pmap-evidence-bar {
    display: grid;
    grid-template-columns: 100px 1fr 36px;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}

.r-dx-pmap-evidence-track {
    height: 5px;
    background: var(--rule-light);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.r-dx-pmap-evidence-fill {
    height: 100%;
    border-radius: var(--radius-xs);
}

.r-dx-scatter-narratives {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.r-dx-scatter-narrative h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin: 0 0 var(--space-xs);
}

.r-dx-scatter-narrative p {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* Friction bars */

.r-dx-friction-panel {
    padding: var(--space-lg);
    background: color-mix(in oklab, var(--paper) 89%, var(--signal-soft) 11%);
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.r-dx-friction-panel h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin: 0 0 var(--space-xs);
}

.r-dx-friction-sub {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
}

.r-dx-friction-bars {
    display: grid;
    gap: var(--space-sm);
}

.r-dx-friction-row {
    display: grid;
    grid-template-columns: 180px 1fr 40px;
    align-items: center;
    gap: var(--space-sm);
}

.r-dx-friction-label {
    font-size: var(--text-sm);
    color: var(--ink);
}

.r-dx-friction-label-weight {
    color: var(--ink-tertiary);
}

.r-dx-friction-track {
    height: 8px;
    background: var(--rule-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.r-dx-friction-fill {
    height: 100%;
    background: var(--signal);
    border-radius: var(--radius-sm);
    width: 0;
    transition: none;
}

.r-dx-friction-fill.is-animated {
    transition: width 500ms var(--ease-out);
}

.r-dx-friction-value {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Task disclosure */

.r-dx-task-disclosure {
    margin-top: var(--space-md);
}

.r-dx-task-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) var(--space-md);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.r-dx-task-toggle:hover {
    background: var(--surface);
    border-color: var(--ink-tertiary);
}

.r-dx-task-stats {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.r-dx-task-table {
    display: grid;
    gap: 1px;
    background: var(--rule-light);
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.r-dx-task-row {
    display: grid;
    grid-template-columns: minmax(200px, 2fr) repeat(5, minmax(60px, 1fr));
    gap: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--paper);
    font-size: var(--text-sm);
    align-items: center;
}

.r-dx-task-row--header {
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-tertiary);
    background: var(--surface);
}

.r-dx-task-cell {
    padding: 2px var(--space-xs);
}

.r-dx-task-cell--statement {
    font-weight: 500;
}

.r-dx-task-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    background: var(--surface);
    color: var(--ink-secondary);
}

/* ─── Section 4: Timeline + Triggers ───────────────────────────────────── */

.r-dx-frontier-shell {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    background:
        linear-gradient(135deg, oklch(0.98 0.01 90), oklch(0.99 0.01 250)),
        var(--paper);
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-lg);
}

.r-dx-frontier-summary-block {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.r-dx-frontier-headline {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-lg);
}

.r-dx-frontier-summary {
    margin: 0;
    color: var(--ink-secondary);
    max-width: 68ch;
}

.r-dx-frontier-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.r-dx-frontier-badge {
    padding: var(--space-sm);
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-lg);
    background: var(--paper);
    display: grid;
    gap: 4px;
}

.r-dx-frontier-badge span {
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}

.r-dx-frontier-badge strong {
    font-size: var(--text-sm);
}

.r-dx-frontier-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
}

.r-dx-frontier-metric {
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--rule-light);
    background: var(--paper);
    display: grid;
    gap: 6px;
}

.r-dx-frontier-metric--accent {
    background: linear-gradient(180deg, var(--signal-light), var(--paper));
}

/* ─── Trajectory graph + scenario strip ───────────────────────────────── */

:root {
    --state-trajectory-line: var(--signal);
    --state-trajectory-band: color-mix(in oklab, var(--signal) 18%, transparent);
    --state-trajectory-fill: color-mix(in oklab, var(--signal) 14%, transparent);
    --trajectory-conservative: oklch(0.56 0.06 210);
    --trajectory-conservative-soft: oklch(0.90 0.03 210);
    --trajectory-baseline: oklch(0.54 0.11 32);
    --trajectory-baseline-soft: oklch(0.91 0.03 32);
    --trajectory-aggressive: oklch(0.45 0.08 145);
    --trajectory-aggressive-soft: oklch(0.89 0.03 145);
}

.r-trajectory-graph-shell {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.r-trajectory-graph-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.r-trajectory-graph-key {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
}

.r-trajectory-key-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.r-trajectory-key-item::before {
    content: "";
    width: 22px;
    height: 0;
    border-top: 3px solid currentColor;
    border-radius: var(--radius-pill);
}

.r-trajectory-key-item--baseline { color: var(--trajectory-baseline); }
.r-trajectory-key-item--band { color: color-mix(in oklab, var(--trajectory-conservative) 45%, var(--trajectory-aggressive) 55%); }
.r-trajectory-key-item--band::before {
    height: 10px;
    border-top: none;
    background: linear-gradient(90deg, color-mix(in oklab, var(--trajectory-conservative) 30%, transparent), color-mix(in oklab, var(--trajectory-aggressive) 34%, transparent));
    border: 1px solid color-mix(in oklab, var(--trajectory-baseline) 18%, var(--rule-light) 82%);
}
.r-trajectory-key-item--inflection { color: oklch(0.48 0.07 205); }
.r-trajectory-key-item--inflection::before {
    width: 12px;
    height: 12px;
    border-top: none;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid currentColor;
}
.r-trajectory-key-item--threshold { color: var(--ink-secondary); }
.r-trajectory-key-item--threshold::before {
    width: 14px;
    height: 14px;
    border-top: none;
    background: linear-gradient(135deg, transparent 35%, currentColor 35%, currentColor 65%, transparent 65%);
    border: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.r-trajectory-key-item--state-baseline { color: var(--state-trajectory-line); }
.r-trajectory-key-item--state-band { color: color-mix(in oklab, var(--state-trajectory-line) 60%, var(--trajectory-aggressive) 40%); }
.r-trajectory-key-item--state-band::before {
    height: 10px;
    border-top: none;
    background: linear-gradient(90deg, color-mix(in oklab, var(--state-trajectory-line) 22%, transparent), color-mix(in oklab, var(--trajectory-aggressive) 26%, transparent));
    border: 1px solid color-mix(in oklab, var(--state-trajectory-line) 18%, var(--rule-light) 82%);
}
.r-trajectory-key-item--state-transition { color: oklch(0.55 0.07 165); }
.r-trajectory-key-item--state-transition::before {
    width: 12px;
    height: 12px;
    border-top: none;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid currentColor;
}
.r-trajectory-key-item--state-shift { color: oklch(0.58 0.10 45); }
.r-trajectory-key-item--state-shift::before {
    width: 12px;
    height: 12px;
    border-top: none;
    border: 2px solid currentColor;
    background: var(--paper);
    transform: rotate(45deg);
}

.r-trajectory-graph-axis-copy {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.r-trajectory-graph-frame {
    position: relative;
    overflow: visible;
    min-height: clamp(320px, 46vw, 460px);
}

.r-trajectory-graph-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.r-trajectory-graph-empty {
    padding: var(--space-xl);
    color: var(--ink-secondary);
}

.r-trajectory-graph-readout {
    margin: 0;
    max-width: 64ch;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.r-state-graph-shell {
    gap: clamp(14px, 2vw, 22px);
    margin-bottom: var(--space-xl);
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.r-state-tipping-headline {
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1.8vw, 1.32rem);
    color: var(--ink);
    line-height: 1.2;
    margin-top: 6px;
    scroll-margin-top: 64px;
    min-height: 1lh;
}

.r-state-exposure-shell {
    display: grid;
    gap: 14px;
    margin-bottom: clamp(18px, 2.2vw, 28px);
}

.r-state-exposure-head {
    display: grid;
    gap: 6px;
    max-width: 74ch;
}

.r-state-exposure-head p {
    margin: 0;
    color: var(--ink-secondary);
    line-height: 1.58;
}

#v2-state-basis-copy {
    display: grid;
    gap: 8px;
}

.r-state-exposure-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.r-state-exposure-card {
    display: grid;
    gap: 8px;
    padding: 14px 0 0;
    border-top: 1px solid color-mix(in oklab, var(--rule-light) 74%, transparent 26%);
}

.r-state-exposure-card span {
    font-size: 11px;
    color: var(--ink-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.r-state-exposure-card strong {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.72rem);
    line-height: 0.98;
    color: var(--ink);
}

.r-state-exposure-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.5;
}

.r-state-story-header {
    margin-bottom: clamp(18px, 2vw, 24px);
}

.r-state-story-headline {
    margin: 0;
    max-width: 26ch;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.8vw, 3.4rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--ink);
    text-wrap: balance;
}

.r-state-story-subline {
    margin: 8px 0 0;
    max-width: 62ch;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--ink-secondary);
}

.r-state-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in oklab, var(--rule-light) 76%, transparent 24%);
}

.r-state-chart-copy {
    max-width: 54ch;
}

.r-state-chart-title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--signal-text);
}

.r-state-chart-copy p {
    margin: 0;
    max-width: 60ch;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.55;
}

.r-state-graph-shell .r-trajectory-key-item {
    text-transform: none;
    letter-spacing: 0;
}

.r-state-outcome-key {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin-top: 12px;
}

.r-state-outcome-key .r-trajectory-key-item {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.r-state-outcome-key-item--intact { color: #6d8f63; }
.r-state-outcome-key-item--retained { color: #90a699; }
.r-state-outcome-key-item--downside { color: #a3653e; }

.r-state-graph-frame {
    min-height: clamp(340px, 45vw, 470px);
    margin-top: 4px;
}

.r-state-path-shell {
    display: grid;
    gap: 8px;
}

.r-state-path-track {
    display: flex;
    align-items: stretch;
    min-height: 48px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: color-mix(in oklab, var(--paper) 82%, var(--signal-soft) 18%);
}

.r-state-path-segment {
    min-width: 0;
    display: grid;
    place-content: center;
    gap: 2px;
    padding: 7px 10px;
    text-align: center;
    color: color-mix(in oklab, var(--ink) 88%, var(--paper) 12%);
}

.r-state-path-segment span,
.r-state-path-segment small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.r-state-path-segment span {
    font-size: var(--text-sm);
    font-weight: 700;
}

.r-state-path-segment small {
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.82;
}

.r-state-path-segment--retained { background: color-mix(in oklab, #55766f 22%, white 78%); }
.r-state-path-segment--complemented { background: color-mix(in oklab, #5d7d8e 22%, white 78%); }
.r-state-path-segment--compressed { background: color-mix(in oklab, #a3653e 28%, white 72%); }
.r-state-path-segment--rebalanced { background: color-mix(in oklab, #8f6a49 24%, white 76%); }
.r-state-path-segment--displaced { background: color-mix(in oklab, #8c4940 30%, white 70%); }
.r-state-path-segment--indeterminate { background: color-mix(in oklab, #7a7366 18%, white 82%); }

.r-state-transition-inline {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid color-mix(in oklab, var(--rule-light) 78%, transparent 22%);
    max-width: 74ch;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.58;
}

.r-state-forecast-key-item--retained { color: #55766f; }
.r-state-forecast-key-item--complemented { color: #5d7d8e; }
.r-state-forecast-key-item--compressed { color: #a3653e; }
.r-state-forecast-key-item--rebundled { color: #8f6a49; }
.r-state-forecast-key-item--displaced { color: #8c4940; }

.r-state-checkpoint-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.9fr);
    gap: clamp(24px, 2.8vw, 40px);
    align-items: start;
}

.r-state-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 0;
}

.r-state-summary-card {
    display: grid;
    gap: 8px;
    padding: 14px 0 0;
    border-top: 1px solid color-mix(in oklab, var(--rule-light) 74%, transparent 26%);
}

.r-state-summary-card span {
    font-size: 11px;
    color: var(--ink-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.r-state-summary-card strong {
    font-family: var(--font-display);
    font-size: clamp(1.18rem, 1.8vw, 1.55rem);
    line-height: 1;
    color: var(--ink);
}

.r-state-summary-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.5;
}

.r-state-support-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.r-state-support-card {
    display: grid;
    gap: 10px;
    height: 100%;
}

.r-state-support-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.r-state-support-copy {
    margin: 0;
    color: var(--ink-secondary);
    line-height: 1.58;
    max-width: 58ch;
}

.r-state-support-key {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.r-state-support-key .r-trajectory-key-item {
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.r-state-support-graph {
    min-height: clamp(240px, 28vw, 300px);
}

.r-state-support-definitions {
    display: grid;
    gap: 6px;
    margin-top: 2px;
}

.r-state-support-definitions p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--ink-secondary);
}

.r-state-support-definitions strong {
    color: var(--ink);
}

.r-state-support-card--timing {
    padding-top: 4px;
}

.r-state-timing-list {
    display: grid;
    gap: 12px;
}

.r-state-timing-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 14px 0 0;
    border-top: 1px solid color-mix(in oklab, var(--rule-light) 74%, transparent 26%);
}

.r-state-timing-item strong {
    display: block;
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.r-state-timing-item span {
    display: block;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.r-state-timing-values {
    display: grid;
    gap: 4px;
    justify-items: end;
    text-align: right;
    min-width: 120px;
}

.r-state-timing-values span {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.45;
}

.r-state-ribbon {
    display: grid;
    gap: 10px;
}

.r-state-ribbon-label {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.r-state-ribbon-track {
    display: flex;
    align-items: stretch;
    min-height: 42px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: color-mix(in oklab, var(--paper) 84%, var(--signal-soft) 16%);
}

.r-state-ribbon-segment {
    min-width: 0;
    display: grid;
    place-content: center;
    gap: 2px;
    padding: 7px 10px;
    text-align: center;
    color: color-mix(in oklab, var(--ink) 88%, var(--paper) 12%);
}

.r-state-ribbon-segment span,
.r-state-ribbon-segment small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.r-state-ribbon-segment span {
    font-size: var(--text-sm);
    font-weight: 700;
}

.r-state-ribbon-segment small {
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.82;
}

.r-state-ribbon-segment--retained { background: color-mix(in oklab, #55766f 22%, white 78%); }
.r-state-ribbon-segment--complemented { background: color-mix(in oklab, #5d7d8e 22%, white 78%); }
.r-state-ribbon-segment--demand-expanding { background: color-mix(in oklab, #4c8b63 22%, white 78%); }
.r-state-ribbon-segment--rebalanced { background: color-mix(in oklab, #8f6a49 24%, white 76%); }
.r-state-ribbon-segment--compressed { background: color-mix(in oklab, #a3653e 28%, white 72%); }
.r-state-ribbon-segment--bottleneck-fragile { background: color-mix(in oklab, #b15b4f 24%, white 76%); }
.r-state-ribbon-segment--displaced { background: color-mix(in oklab, #8c4940 30%, white 70%); }
.r-state-ribbon-segment--indeterminate { background: color-mix(in oklab, #7a7366 18%, white 82%); }

@media (max-width: 900px) {
    .r-state-chart-head {
        align-items: start;
    }

    .r-state-graph-shell {
        padding: 18px 16px;
    }

    .r-state-support-shell {
        grid-template-columns: 1fr;
    }

    .r-state-timing-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-state-timing-values {
        justify-items: start;
        text-align: left;
        min-width: 0;
    }

    .r-state-exposure-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 640px) {
    .r-state-exposure-grid {
        grid-template-columns: 1fr;
    }

    .r-state-control-strip {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 14px;
    }

    .r-state-control {
        grid-template-rows: auto auto auto auto;
        gap: 5px;
        padding-top: 8px;
    }

    .r-state-control strong {
        font-size: 0.9rem;
    }

    .r-state-control-desc {
        max-width: none;
        font-size: 0.76rem;
        line-height: 1.35;
    }

    .r-state-control input[type="range"] {
        min-height: 32px;
    }

    .r-occupation-forecast-grid-shell {
        max-height: min(56vh, 460px);
    }

    .r-occupation-forecast-grid-shell {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .r-occupation-forecast-grid {
        display: table;
        table-layout: fixed;
        width: 100%;
        min-width: 700px;
    }

    .r-occupation-forecast-grid thead,
    .r-occupation-forecast-grid tbody {
        display: table-header-group;
        width: auto;
    }

    .r-occupation-forecast-grid tbody {
        display: table-row-group;
    }

    .r-occupation-forecast-row,
    .r-occupation-forecast-row--header {
        display: table-row;
        width: auto;
    }

    .r-occupation-forecast-col--role { width: 36%; }
    .r-occupation-forecast-col--timeline { width: 34%; }
    .r-occupation-forecast-col--path { width: 30%; }

    .r-occupation-forecast-row--header {
        font-size: 0.62rem;
        letter-spacing: 0.03em;
    }

    .r-occupation-forecast-row--header th,
    .r-occupation-forecast-role,
    .r-occupation-forecast-track-cell,
    .r-occupation-forecast-path {
        display: table-cell;
        padding: 8px 7px;
    }

    .r-occupation-forecast-track-head,
    .r-occupation-forecast-track-cell,
    .r-occupation-forecast-path,
    .r-occupation-forecast-path-head {
        text-align: center;
    }

    .r-occupation-forecast-role strong,
    .r-occupation-forecast-path strong {
        font-size: 0.76rem;
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    .r-occupation-forecast-role span,
    .r-occupation-forecast-path span {
        margin-top: 2px;
        font-size: 0.62rem;
        line-height: 1.25;
    }

    .r-occupation-forecast-track-head-grid span {
        font-size: 0.62rem;
    }

    .r-occupation-forecast-track-head-grid,
    .r-occupation-forecast-track {
        gap: 1px;
    }

    .r-occupation-forecast-cell {
        height: 15px;
        border-radius: 4px;
    }
}

.r-trajectory-outcome-rail {
    display: grid;
    gap: 10px;
}

.r-trajectory-outcome-label {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.r-trajectory-outcome-track {
    display: flex;
    align-items: stretch;
    min-height: 38px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: color-mix(in oklab, var(--paper) 82%, var(--signal-soft) 18%);
}

.r-trajectory-outcome-segment {
    min-width: 0;
    display: grid;
    place-content: center;
    gap: 2px;
    padding: 6px 10px;
    color: color-mix(in oklab, var(--ink) 88%, var(--paper) 12%);
    text-align: center;
}

.r-trajectory-outcome-segment span,
.r-trajectory-outcome-segment small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.r-trajectory-outcome-segment span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.r-trajectory-outcome-segment small {
    font-size: 10px;
    color: color-mix(in oklab, var(--ink-secondary) 84%, var(--paper) 16%);
}

.r-trajectory-outcome-segment--holds {
    background: color-mix(in oklab, oklch(0.88 0.04 155) 70%, var(--paper) 30%);
}

.r-trajectory-outcome-segment--offsets {
    background: color-mix(in oklab, oklch(0.9 0.05 175) 74%, var(--paper) 26%);
}

.r-trajectory-outcome-segment--rebuilds {
    background: color-mix(in oklab, oklch(0.89 0.05 48) 76%, var(--paper) 24%);
}

.r-trajectory-outcome-segment--compresses {
    background: color-mix(in oklab, oklch(0.87 0.06 32) 76%, var(--paper) 24%);
}

.r-trajectory-outcome-segment--weakens {
    background: color-mix(in oklab, oklch(0.86 0.06 24) 84%, var(--paper) 16%);
}

.r-trajectory-outcome-segment--transitioning {
    background: color-mix(in oklab, oklch(0.9 0.02 80) 78%, var(--paper) 22%);
}

.r-trajectory-threshold-summary {
    display: grid;
    gap: 6px;
    margin-top: var(--space-sm);
}

.r-trajectory-threshold-note {
    margin: 0;
    color: var(--ink-secondary);
    max-width: 60ch;
}

.r-trajectory-threshold-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
}

.r-trajectory-threshold-card {
    display: grid;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in oklab, var(--rule) 82%, transparent 18%);
}

.r-trajectory-threshold-card span {
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}

.r-trajectory-threshold-card strong {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.r-trajectory-threshold-card p {
    margin: 0;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
}

.r-trajectory-threshold-card--accent {
    border-top-color: color-mix(in oklab, var(--trajectory-baseline) 38%, var(--rule) 62%);
}

.r-trajectory-scenario-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.r-trajectory-scenario-card {
    display: grid;
    gap: 14px;
    padding: clamp(18px, 2vw, 24px);
    border-top: 1px solid var(--rule-light);
    background: color-mix(in oklab, var(--paper) 92%, var(--signal-soft) 8%);
}

.r-trajectory-scenario-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-md);
}

.r-trajectory-scenario-top h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.28rem, 1.8vw, 1.72rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.r-trajectory-scenario-chip {
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    white-space: nowrap;
}

.r-trajectory-scenario-metrics {
    display: grid;
    gap: 10px;
}

.r-trajectory-scenario-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    font-size: var(--text-sm);
}

.r-trajectory-scenario-row span {
    color: var(--ink-secondary);
}

.r-trajectory-scenario-meter {
    position: relative;
    height: 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--rule-light) 85%, var(--paper) 15%);
    overflow: hidden;
}

.r-trajectory-scenario-meter-fill {
    height: 100%;
    border-radius: inherit;
}

.r-trajectory-scenario-meter-fill--compression { background: oklch(0.63 0.12 38); }
.r-trajectory-scenario-meter-fill--demand { background: oklch(0.55 0.10 145); }
.r-trajectory-scenario-meter-fill--viability { background: oklch(0.52 0.08 225); }

.r-trajectory-scenario-detail {
    border-top: 1px solid var(--rule-light);
    padding-top: 10px;
}

.r-trajectory-scenario-detail summary {
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    list-style: none;
}

.r-trajectory-scenario-detail summary::-webkit-details-marker {
    display: none;
}

.r-trajectory-scenario-detail p {
    margin: 10px 0 0;
    color: var(--ink-secondary);
}

@media (max-width: 960px) {
    .r-trajectory-threshold-grid,
    .r-trajectory-scenario-strip {
        grid-template-columns: 1fr;
    }

    .r-trajectory-graph-topline {
        align-items: start;
    }

    .r-trajectory-outcome-track {
        min-height: 34px;
    }

    .r-trajectory-outcome-segment {
        padding-inline: 8px;
    }

    .r-trajectory-outcome-segment small {
        display: none;
    }
}

.r-dx-frontier-metric--warning {
    background: linear-gradient(180deg, oklch(0.72 0.12 75 / 0.10), var(--paper));
}

.r-dx-frontier-metric-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-secondary);
}

.r-dx-frontier-metric-value {
    font-size: var(--text-sm);
}

.r-dx-frontier-metric-copy {
    margin: 0;
    color: var(--ink-secondary);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.r-dx-frontier-drivers {
    display: grid;
    gap: var(--space-sm);
}

.r-dx-frontier-drivers-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-sm);
}

.r-dx-frontier-drivers-head h3 {
    margin: 0;
    font-size: var(--text-md);
}

.r-dx-frontier-drivers-head p {
    margin: 0;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    max-width: 70ch;
}

.r-dx-frontier-driver-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}

.r-dx-frontier-driver-card {
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--rule-light);
    background: var(--paper);
    display: grid;
    gap: var(--space-xs);
}

.r-dx-frontier-driver-header {
    display: grid;
    gap: var(--space-xs);
}

.r-dx-frontier-driver-title {
    margin: 0;
    font-size: var(--text-sm);
}

.r-dx-frontier-driver-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.r-dx-frontier-driver-margins {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}

.r-dx-frontier-driver-copy,
.r-dx-frontier-driver-empty {
    margin: 0;
    color: var(--ink-secondary);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.r-dx-wave-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--space-xl);
}

.r-dx-wave-stop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
    flex: 1;
    max-width: 220px;
    opacity: 0;
    transform: translateX(-12px);
}

.r-dx-wave-stop.is-animated {
    animation: r-dx-wave-stop-in 300ms var(--ease-out) forwards;
}

@keyframes r-dx-wave-stop-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.r-dx-wave-node {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--rule);
    background: var(--paper);
    position: relative;
}

.r-dx-wave-stop--primary .r-dx-wave-node {
    border-color: var(--signal);
    box-shadow: 0 0 0 4px var(--signal-light);
}

.r-dx-wave-connector {
    width: 100%;
    max-width: 80px;
    height: 2px;
    background: linear-gradient(to right, var(--rule), var(--rule));
    align-self: 9px;
    margin-top: 8px;
    flex-shrink: 1;
}

.r-dx-wave-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-tertiary);
    margin-top: var(--space-xs);
}

.r-dx-wave-state {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
}

.r-dx-wave-detail {
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}

/* Trigger gauges */

.r-dx-trigger-section {
    margin-top: var(--space-lg);
}

.r-dx-trigger-section h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin: 0 0 var(--space-xs);
}

.r-dx-trigger-summary {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
}

.r-dx-trigger-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.r-dx-trigger-card {
    padding: var(--space-md);
    background: var(--paper);
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-sm);
    cursor: pointer;
    transition: border-color 0.15s;
}

.r-dx-trigger-card:hover {
    border-color: var(--rule);
}

.r-dx-trigger-card--decisive {
    border-color: var(--signal-soft);
}

.r-dx-trigger-card--decisive.is-pulsed {
    animation: r-dx-trigger-pulse 600ms ease-in-out;
}

@keyframes r-dx-trigger-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--signal-light); }
    50%      { box-shadow: 0 0 0 8px var(--signal-light); }
}

.r-dx-trigger-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.r-dx-trigger-label {
    font-weight: 600;
    font-size: var(--text-sm);
    flex: 1;
}

.r-dx-trigger-gauge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: conic-gradient(
        var(--signal) 0deg,
        var(--signal) 0deg,
        var(--rule-light) 0deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.r-dx-trigger-gauge-inner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.r-dx-trigger-readiness {
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-secondary);
}

.r-dx-trigger-frontier {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}

.r-dx-trigger-frontier span {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface);
}

.r-dx-trigger-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms var(--ease-out);
}

.r-dx-trigger-card.is-expanded .r-dx-trigger-detail {
    max-height: 400px;
}

.r-dx-trigger-detail-inner {
    padding-top: var(--space-sm);
    display: grid;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.r-dx-bargaining-cliff {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    padding: var(--space-sm) var(--space-md);
    background: oklch(0.62 0.12 40 / 0.06);
    border-left: 3px solid oklch(0.62 0.12 40 / 0.3);
    border-radius: 0 6px 6px 0;
}

/* ─── Section 5: Landscape (occupation map wrapper) ────────────────────── */

.r-dx-section--landscape {
    padding-bottom: var(--space-xl);
}

.r-dx-section--landscape .r-dx-section-header {
    position: static;
    padding-bottom: var(--space-sm);
    background: transparent;
}

.r-occupation-forecast-shell {
    display: grid;
    gap: var(--space-md);
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.r-occupation-controls-inline {
    display: grid;
    gap: clamp(12px, 2vw, var(--space-lg));
    margin: 0 0 var(--space-md);
}

.r-occupation-controls-inline .r-state-control {
    padding-top: 0;
    border-top: none;
}

.r-occupation-forecast-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-lg);
}

.r-occupation-forecast-copy {
    margin: 6px 0 0;
    max-width: 70ch;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
}

.r-occupation-forecast-status {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
}

.r-occupation-forecast-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.r-occupation-forecast-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink);
    background: color-mix(in oklab, var(--surface-elevated) 82%, white 18%);
}

.r-occupation-forecast-legend-item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.r-occupation-forecast-legend-item--retained { color: #55766f; }
.r-occupation-forecast-legend-item--complemented { color: #5d7d8e; }
.r-occupation-forecast-legend-item--compressed { color: #a3653e; }
.r-occupation-forecast-legend-item--rebundled { color: #8f6a49; }
.r-occupation-forecast-legend-item--displaced { color: #8c4940; }

.r-occupation-forecast-grid-shell {
    position: relative;
    isolation: isolate;
    border-top: 1px solid var(--rule-light);
    border-bottom: 1px solid var(--rule-light);
    padding: 0;
    max-height: min(46vh, 420px);
    overflow: auto;
    background: var(--paper);
}

.r-occupation-forecast-grid thead {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--paper);
}

#occupation-map {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule-light);
}

.r-occupation-forecast-grid {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: var(--paper);
}

.r-occupation-forecast-col--role { width: 28%; }
.r-occupation-forecast-col--timeline { width: 47%; }
.r-occupation-forecast-col--path { width: 25%; }

.r-occupation-forecast-grid th,
.r-occupation-forecast-grid td {
    vertical-align: middle;
}

.r-occupation-forecast-row {
    background: var(--paper);
}

.r-occupation-forecast-grid tbody .r-occupation-forecast-row > th,
.r-occupation-forecast-grid tbody .r-occupation-forecast-row > td {
    border-bottom: 1px solid color-mix(in oklab, var(--rule-light) 78%, transparent 22%);
}

.r-occupation-forecast-grid tbody .r-occupation-forecast-row:last-child > th,
.r-occupation-forecast-grid tbody .r-occupation-forecast-row:last-child > td {
    border-bottom: none;
}

.r-occupation-forecast-row--header {
    color: var(--ink-tertiary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--paper);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--rule) 82%, transparent 18%);
}

.r-occupation-forecast-row--header th {
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--rule) 82%, transparent 18%);
    text-align: center;
    vertical-align: middle;
    background: var(--paper);
    position: relative;
    z-index: 6;
    background-clip: padding-box;
}

.r-occupation-forecast-grid tbody .r-occupation-forecast-row.is-selected {
    background: linear-gradient(90deg, color-mix(in oklab, var(--surface-elevated) 92%, #d7e2dc 8%), transparent 82%);
}

.r-occupation-forecast-role {
    padding: 10px 16px;
    vertical-align: middle;
    text-align: center;
    line-height: 1.25;
}

.r-occupation-forecast-grid thead .r-occupation-forecast-role,
.r-occupation-forecast-grid tbody .r-occupation-forecast-role {
    position: sticky;
    left: 0;
}

.r-occupation-forecast-grid thead .r-occupation-forecast-role {
    z-index: 4;
    background: var(--paper);
}

.r-occupation-forecast-grid tbody .r-occupation-forecast-role {
    z-index: 2;
    background: var(--paper);
    box-shadow: 16px 0 18px -18px rgba(74, 66, 52, 0.28);
}

.r-occupation-forecast-grid tbody .r-occupation-forecast-row.is-selected .r-occupation-forecast-role {
    background: color-mix(in oklab, var(--surface-elevated) 88%, #d7e2dc 12%);
}

.r-occupation-forecast-role strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink);
}

.r-occupation-forecast-role span {
    display: block;
    margin-top: 3px;
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}

.r-occupation-forecast-track-head {
    padding: 12px 16px;
}

.r-occupation-forecast-track-head-grid,
.r-occupation-forecast-track {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 3px;
}

.r-occupation-forecast-track-head-grid span {
    text-align: center;
}

.r-occupation-forecast-track-cell {
    padding: 10px 16px;
    vertical-align: middle;
    text-align: center;
}

.r-occupation-forecast-cell {
    display: block;
    height: 22px;
    border-radius: var(--radius-sm);
    background: var(--surface-elevated);
}

.r-occupation-forecast-cell--retained { background: rgba(85, 118, 111, 0.88); }
.r-occupation-forecast-cell--complemented { background: rgba(93, 125, 142, 0.82); }
.r-occupation-forecast-cell--compressed { background: rgba(163, 101, 62, 0.82); }
.r-occupation-forecast-cell--rebundled { background: rgba(143, 106, 73, 0.78); }
.r-occupation-forecast-cell--displaced { background: rgba(140, 73, 64, 0.88); }

.r-occupation-forecast-path-head {
    padding: 12px 16px;
    white-space: nowrap;
    text-align: center;
}

.r-occupation-forecast-path {
    padding: 10px 16px;
    vertical-align: middle;
    text-align: center;
    line-height: 1.25;
}

.r-occupation-forecast-path strong {
    display: block;
}

.r-occupation-forecast-path span {
    display: block;
    margin-top: 3px;
}

.r-occupation-forecast-path strong {
    font-size: var(--text-sm);
    color: var(--ink);
}

.r-occupation-forecast-path span {
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}

.r-occupation-forecast-empty {
    padding: 18px 0;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
}

@media (max-width: 960px) {
    .r-state-checkpoint-layout {
        grid-template-columns: 1fr;
    }

    .r-dx-section--landscape .r-dx-section-header {
        position: static;
        padding-bottom: 0;
        background: transparent;
    }

    .r-occupation-forecast-head {
        align-items: start;
        flex-direction: column;
    }

    .r-occupation-forecast-legend {
        justify-content: flex-start;
    }

    .r-occupation-forecast-grid-shell {
        max-height: min(60vh, 520px);
    }

    .r-occupation-controls-inline {
        gap: 14px;
    }

    .r-occupation-forecast-grid {
        min-width: 0;
    }

    .r-occupation-forecast-col--role { width: 34%; }
    .r-occupation-forecast-col--timeline { width: 40%; }
    .r-occupation-forecast-col--path { width: 26%; }

    .r-occupation-forecast-grid thead .r-occupation-forecast-role,
    .r-occupation-forecast-grid tbody .r-occupation-forecast-role {
        position: static;
        box-shadow: none;
    }

    .r-occupation-forecast-row--header th,
    .r-occupation-forecast-role,
    .r-occupation-forecast-track-cell,
    .r-occupation-forecast-path {
        padding-left: 10px;
        padding-right: 10px;
    }

    .r-occupation-forecast-role strong,
    .r-occupation-forecast-path strong {
        font-size: 0.82rem;
        line-height: 1.2;
    }

    .r-occupation-forecast-role span,
    .r-occupation-forecast-path span,
    .r-occupation-forecast-track-head-grid span {
        font-size: 0.68rem;
    }

    .r-occupation-forecast-track-head-grid,
    .r-occupation-forecast-track {
        gap: 2px;
    }

    .r-occupation-forecast-cell {
        height: 18px;
    }
}

/* ─── Section 6: Depth Tabs ────────────────────────────────────────────── */

.r-dx-section--depth {
    padding: var(--space-xl) 0 var(--space-2xl);
    border-top: 1px solid var(--rule-light);
    max-width: 1200px;
    margin: 0 auto;
}

.r-dx-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--space-lg);
}

.r-dx-tab {
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.r-dx-tab:hover {
    color: var(--ink);
}

.r-dx-tab[aria-selected="true"] {
    color: var(--ink);
    border-bottom-color: var(--signal);
    font-weight: 600;
}

.r-dx-tab-panel {
    animation: r-dx-panel-in 200ms ease-out;
}

@keyframes r-dx-panel-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Evidence tab */

.r-dx-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.r-dx-evidence-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-md);
}

.r-dx-evidence-item span {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.r-dx-evidence-item strong {
    font-size: var(--text-sm);
    font-weight: 600;
}

.r-dx-evidence-note {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
}

/* Recomposition tab */

.r-dx-recomp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.r-dx-recomp-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-md);
}

.r-dx-recomp-item span {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.r-dx-recomp-item strong {
    font-size: var(--text-sm);
    font-weight: 600;
}

.r-dx-recomp-note {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
}

/* Labor market tab */

.r-dx-labor-note {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
}

.r-dx-labor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.r-dx-labor-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-md);
}

.r-dx-labor-metric span {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.r-dx-labor-metric strong {
    font-size: var(--text-sm);
    font-weight: 600;
}

.r-dx-labor-metric--primary {
    grid-column: span 2;
}

.r-dx-labor-series {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    margin-top: 4px;
}

.r-dx-labor-chart {
    max-width: 640px;
}

/* Audit trail tab */

.r-dx-audit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.r-dx-audit-card {
    padding: var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-sm);
}

.r-dx-audit-card h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    margin: 0;
}

.r-dx-audit-rows {
    display: grid;
    gap: 4px;
}

.r-dx-audit-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    padding: 3px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--rule-light) 60%, transparent 40%);
}

.r-dx-audit-row span {
    color: var(--ink-secondary);
}

.r-dx-audit-row strong {
    font-weight: 500;
    text-align: right;
    word-break: break-word;
    max-width: 60%;
}

.r-dx-audit-copy-btn {
    display: inline-flex;
    padding: var(--space-xs) var(--space-md);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background 0.15s;
}

.r-dx-audit-copy-btn:hover {
    background: var(--rule-light);
}

.r-dx-audit-note {
    color: var(--ink-tertiary);
    font-size: var(--text-xs);
    line-height: 1.4;
}

/* ─── Overview section (How we analyze your role) ─────────────────────── */

.r-dx-section--overview {
    padding-bottom: var(--space-2xl);
}

.r-dx-overview-columns {
    gap: clamp(26px, 3.2vw, 52px) !important;
}

.r-dx-overview-columns .r-analysis-column {
    min-height: 0;
    padding: 0;
    border-top: none;
    background: transparent;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 480ms var(--ease-out),
                transform 480ms var(--ease-out);
}

.r-dx-section--overview.is-visible .r-dx-overview-columns .r-analysis-column,
.r-dx-section.is-visible .r-dx-overview-columns .r-analysis-column {
    opacity: 1;
    transform: translateY(0);
}

.r-dx-section--overview.is-visible .r-dx-overview-columns .r-analysis-column:nth-child(2),
.r-dx-section.is-visible .r-dx-overview-columns .r-analysis-column:nth-child(2) {
    transition-delay: 100ms;
}

.r-dx-section--overview.is-visible .r-dx-overview-columns .r-analysis-column:nth-child(3),
.r-dx-section.is-visible .r-dx-overview-columns .r-analysis-column:nth-child(3) {
    transition-delay: 200ms;
}

.r-dx-overview-columns .r-analysis-column-body {
    gap: 12px;
}

.r-dx-overview-columns .r-analysis-column-list {
    gap: 8px;
}

@media (max-width: 960px) {
    .r-dx-overview-columns {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl) !important;
    }
}

/* ─── Explanation elements ─────────────────────────────────────────────── */

/* Analysis basis band (verdict bottom) */
.r-dx-analysis-basis {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background: color-mix(in oklab, var(--paper) 80%, var(--rule-light) 20%);
    border-radius: var(--radius-md);
    border: 1px solid var(--rule-light);
}

.r-dx-basis-divider {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--rule);
}

/* Seat glossary (Section 2) */
.r-dx-seat-glossary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.r-dx-seat-gloss-item {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: 1.5;
    border-left: 3px solid var(--rule);
}

.r-dx-seat-gloss-item strong {
    display: block;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 3px;
    font-size: var(--text-sm);
}

.r-dx-seat-gloss-item--shrink {
    background: oklch(0.72 0.10 55 / 0.06);
    border-left-color: oklch(0.62 0.10 55 / 0.40);
}

.r-dx-seat-gloss-item--retain {
    background: color-mix(in oklab, var(--surface) 60%, transparent 40%);
    border-left-color: var(--rule);
}

.r-dx-seat-gloss-item--grow {
    background: var(--signal-light);
    border-left-color: oklch(0.55 0.09 145 / 0.35);
}

/* Wave definitions (Section 4) */
.r-dx-wave-defs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding: var(--space-md);
    background: color-mix(in oklab, var(--paper) 89%, var(--signal-soft) 11%);
    border: 1px solid var(--rule-light);
    border-radius: var(--radius-md);
}

.r-dx-wave-def {
    display: grid;
    gap: var(--space-xs);
    font-size: var(--text-sm);
}

.r-dx-wave-def strong {
    font-weight: 600;
    color: var(--ink);
    display: block;
}

.r-dx-wave-def span {
    color: var(--ink-secondary);
    line-height: 1.5;
}

/* Trigger intro line */
.r-dx-trigger-intro {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
    margin-bottom: var(--space-md);
    max-width: 680px;
}

@media (max-width: 900px) {
    .r-dx-frontier-summary-block,
    .r-dx-frontier-metrics,
    .r-dx-frontier-driver-list {
        grid-template-columns: 1fr;
    }

    .r-dx-frontier-drivers-head {
        align-items: start;
        flex-direction: column;
    }
}

/* ─── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .r-dx-section,
    .r-dx-stat-chip,
    .r-dx-force-chip,
    .r-dx-bundle-item,
    .r-dx-wave-stop {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }

    .r-dx-gauge-needle,
    .r-dx-gauge-fill,
    .r-dx-friction-fill,
    .r-dx-bar-segment {
        transition: none;
    }

    .r-dx-fate-label .r-dx-fate-word {
        opacity: 1;
        animation: none;
    }
}