@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,700&display=swap");

:root {
    --bg: #eef3f8;
    --panel: rgba(255, 255, 255, 0.96);
    --panel-strong: #ffffff;
    --ink: #1d3440;
    --muted: #5e717b;
    --line: rgba(29, 52, 64, 0.14);
    --accent: #2c78b4;
    --accent-soft: rgba(44, 120, 180, 0.12);
    --success: #1c7c54;
    --error: #b6453d;
    --shadow: 0 8px 24px rgba(26, 44, 52, 0.08);
}

.main-tabs {
    margin-bottom: 22px;
}

.main-tabs.workspace-hidden {
    display: none !important;
}

.main-tabs.workspace-visible {
    display: block !important;
}

.main-tabs > .tab-container {
    display: none !important;
}

.main-tab {
    background: transparent !important;
    border: 0 !important;
    color: var(--muted) !important;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    padding: 12px 20px !important;
}

.main-tab--selected {
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    color: var(--accent) !important;
    box-shadow: var(--shadow);
}

.tab-content-stack,
.single-workspace {
    display: grid;
    gap: 22px;
}

.single-workspace {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
}

.single-graph-panel {
    min-height: 560px;
}

.single-graph-panel .js-plotly-plot,
.single-graph-panel .plot-container {
    min-height: 520px;
}

@media (max-width: 1080px) {
    .single-workspace {
        grid-template-columns: 1fr;
    }
}

/* RosettaX application shell: compact white cards, blue section accents, and
   a quiet fixed navigation rail. */
body {
    background: #ffffff;
    color: #212529;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: .95rem;
}

.app-shell {
    max-width: none;
    padding: 0;
}

.dashboard-frame {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 0;
    min-height: 100vh;
}

.dashboard-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 12px 8px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.sidebar-logo {
    width: 190px;
    max-width: 100%;
    margin: 0 auto 8px;
}

.sidebar-nav {
    gap: 2px;
}

.sidebar-link {
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #343a40;
    font-size: .92rem;
    font-weight: 500;
}

.plot-controls-panel,
.run-panel,
.helper-panel {
    padding-bottom: 12px;
}

.plot-controls-panel > .helper-copy,
.plot-controls-panel > .run-controls-grid,
.run-panel > .run-panel-copy,
.run-panel > .run-actions,
.run-panel > .status-banner,
.helper-panel > .helper-copy,
.helper-panel > .helper-examples {
    margin-left: 12px;
    margin-right: 12px;
}

.run-panel > .run-actions {
    margin-bottom: 12px;
}

.run-panel > .status-banner {
    margin-bottom: 0;
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.settings-card-body {
    min-height: 124px;
}

.settings-card-subtitle {
    margin-left: auto;
    color: #6c7c85;
    font-size: .72rem;
    font-weight: 500;
}

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

.settings-field {
    min-width: 0;
}

.plot-options-card {
    margin: 12px 14px 14px;
    padding: 12px 14px 14px;
    border: 1px solid rgba(96, 110, 123, .20);
    border-radius: 8px;
    background: #f1f3f5;
}

.export-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 14px 14px;
}

.export-actions .export-button {
    min-width: 220px;
    background: #f7f9fb;
    color: #2f4358;
    border: 1px solid #c7d1d9;
}

.plot-options-title {
    margin-bottom: 10px;
    color: #52616d;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.plot-options-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(104px, 1fr));
    gap: 10px 12px;
}

.plot-option-field {
    min-width: 0;
}

.plot-option-field label {
    display: block;
    margin-bottom: 4px;
    color: #63727c;
    font-size: .72rem;
    font-weight: 650;
}

.plot-option-control {
    width: 104px;
    min-width: 104px;
    min-height: 34px;
    font-size: .82rem;
}

html .plot-option-control.dashboard-dropdown {
    width: 104px;
    min-width: 104px;
    height: 38px;
    min-height: 38px;
}

html .plot-option-control.dashboard-dropdown .Select-control {
    width: 104px;
    height: 38px;
    min-height: 38px;
}

/* Keep numeric plot controls visually consistent with the dropdowns, while
   keeping their compact values from stretching across the whole grid cell. */
html .plot-number-control {
    box-sizing: border-box;
    width: 104px;
    height: 38px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel-strong);
    color: var(--ink);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.2;
}

html .plot-number-control:focus {
    border-color: rgba(44, 120, 180, .65);
    box-shadow: 0 0 0 2px rgba(44, 120, 180, .18);
}

@media (max-width: 900px) {
    .plot-options-grid {
        grid-template-columns: repeat(4, minmax(104px, 1fr));
    }
}

@media (max-width: 520px) {
    .plot-options-grid {
        grid-template-columns: 1fr;
    }
}

.settings-field-wide {
    grid-column: span 3;
}

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

.settings-label {
    display: block;
    margin-bottom: 6px;
    color: #52697a;
    font-size: .82rem;
    font-weight: 700;
}

.settings-number-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid #cbd8e2;
    border-radius: 4px;
    color: #26323b;
    background: #fff;
}

.settings-help,
.settings-save-status {
    margin: 12px 0 0;
    color: #6c7c85;
    font-size: .82rem;
    line-height: 1.4;
}

.settings-note {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .settings-form-grid,
    .settings-layout-fields {
        grid-template-columns: 1fr;
    }

    .settings-field-wide,
    .settings-note {
        grid-column: auto;
    }
}

/* Final RosettaX typography parity. */
html body { font-size: 1rem !important; }

.home-page-hero h1 {
    font-size: 2.55rem;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 8px;
}

.home-page-hero .hero-text { font-size: 1.08rem; line-height: normal; }

.documentation-page-hero h1 {
    font-size: 2.45rem;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 10px;
}

.documentation-page-hero .hero-text { font-size: 1.05rem; line-height: normal; }
html .home-info-copy { font-size: .95rem !important; }
html .home-capability-card .home-section-header { font-size: 1.08rem !important; line-height: 1.2; }
html .home-capability-body > p { min-height: 66px; font-size: 1rem !important; line-height: normal; }
html .home-step-list { font-size: .9rem !important; }
html .home-step-number { font-size: .78rem !important; }
html .home-button, html .home-workflow-button { font-size: 1rem !important; }
html .home-metric-value { font-size: 2rem !important; }
html .home-metric-tile { font-size: .92rem !important; }

.version-widget {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(128, 128, 128, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(8px);
}

.version-widget-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.version-widget-value { font-size: .92rem; font-weight: 700; }

html .home-page-hero { padding: 26px !important; border-radius: 15px; border-left: 5px solid rgba(13, 110, 253, .75); }
html .home-page-hero h1 { margin: 0 0 8px; font-family: inherit !important; font-size: 2.55rem !important; font-weight: 800; line-height: 1.05; }
html .home-page-hero .hero-text { max-width: 980px; margin: 0; font-size: 1.08rem !important; line-height: normal; opacity: .86; }

html .home-metrics-card > .card-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 16px !important;
}

html .home-metrics-card .home-metric-tile {
    height: 100%;
    padding: 18px !important;
    border: 1px solid rgba(13, 110, 253, .16);
    border-radius: 12px;
    background: rgba(13, 110, 253, .04);
}

html .home-metrics-card .home-metric-value { font-size: 2rem !important; font-weight: 800; line-height: 1; }
html .home-metrics-card .home-metric-label { margin-top: 6px; font-size: .92rem !important; opacity: .76; }

/* Exact RosettaX workflow-header geometry and typography. */
html body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important; }

html .workflow-header-card {
    margin-bottom: 16px;
    overflow: visible !important;
}

html .workflow-header-card.ui-card--green { background: var(--bs-card-bg, var(--bs-body-bg, #fff)) !important; border: 1px solid rgba(128, 128, 128, .25) !important; border-left: 5px solid rgba(25, 135, 84, .75) !important; }
html .workflow-header-card.ui-card--blue { background: var(--bs-card-bg, var(--bs-body-bg, #fff)) !important; border: 1px solid rgba(128, 128, 128, .25) !important; border-left: 5px solid rgba(13, 110, 253, .75) !important; }

html .workflow-header-body {
    padding: 18px !important;
    overflow: visible !important;
}

html .header-card-intro h2 {
    margin: 0 0 8px;
    font-family: inherit !important;
    font-size: 2rem !important;
    font-weight: 600;
    line-height: 1.2;
}

html .header-card-intro p {
    margin: 0 0 12px;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.5;
    opacity: .85;
}

html .header-card-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

html .rosettax-workflow-step-card {
    height: 100%;
    min-width: 0;
    padding: 14px !important;
    border: 1px solid rgba(13, 110, 253, .16) !important;
    border-radius: 12px !important;
    border-left-width: 1px !important;
    background: var(--bs-card-bg, var(--bs-body-bg, #fff)) !important;
    overflow: visible !important;
}

html .rosettax-workflow-step-card--green { border-color: rgba(25, 135, 84, .16) !important; }
html .rosettax-workflow-step-card--blue { border-color: rgba(13, 110, 253, .16) !important; }
html .rosettax-workflow-step-card--yellow { border-color: rgba(255, 215, 0, .16) !important; }
html .rosettax-workflow-step-card--orange { border-color: rgba(255, 193, 7, .16) !important; }
html .rosettax-workflow-step-card--purple { border-color: rgba(111, 66, 193, .16) !important; }

html .rosettax-workflow-step-card .header-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 10px;
    border-radius: 50%;
    font-family: inherit !important;
    font-size: .9rem !important;
    font-weight: 700;
}

html .rosettax-workflow-step-card--green .header-step-number { background: rgba(25, 135, 84, .12); border: 1px solid rgba(25, 135, 84, .35); }
html .rosettax-workflow-step-card--blue .header-step-number { background: rgba(13, 110, 253, .12); border: 1px solid rgba(13, 110, 253, .35); }
html .rosettax-workflow-step-card--yellow .header-step-number { background: rgba(255, 215, 0, .12); border: 1px solid rgba(255, 215, 0, .35); }
html .rosettax-workflow-step-card--orange .header-step-number { background: rgba(255, 193, 7, .12); border: 1px solid rgba(255, 193, 7, .35); }
html .rosettax-workflow-step-card--purple .header-step-number { background: rgba(111, 66, 193, .12); border: 1px solid rgba(111, 66, 193, .35); }

html .rosettax-workflow-step-card h6 {
    margin: 0 0 6px;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.2;
}

html .rosettax-workflow-step-card p {
    margin: 0;
    font-family: inherit !important;
    font-size: .86rem !important;
    line-height: 1.45;
    opacity: .78;
}

@media (max-width: 700px) {
    html .home-metrics-card > .card-body { grid-template-columns: 1fr; }
}

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

.install-steps {
    display: grid;
    row-gap: 7px;
    margin: 0;
    padding-left: 20px;
}

.documentation-link-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.documentation-link-chip {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    padding: 8px 11px;
    border: 1px solid rgba(13, 110, 253, .14);
    border-radius: 10px;
    background: rgba(13, 110, 253, .04);
    font-weight: 600;
    text-decoration: none;
}

.card-title { font-weight: 750; font-size: 1.02rem; }
.card-subtitle { margin-top: 3px; opacity: .76; font-size: .86rem; font-weight: 400; }

.install-download-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.install-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid #0d6efd;
    border-radius: 4px;
    background: #0d6efd;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.install-release-note { opacity: .85; }
.install-release-note a { font-weight: 600; text-decoration: none; }

@media (max-width: 800px) {
    .install-local-grid {
        grid-template-columns: 1fr;
    }
}

/* RosettaX card parity: the final cascade block keeps the shared card tokens
   identical to RosettaX (15px radius, 5px accent, 18px body, soft shadow). */
.ui-card {
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .08);
    overflow: visible;
}

.ui-card--blue { border-left: 5px solid rgba(13, 110, 253, .75); }
.ui-card--green { border-left: 5px solid rgba(25, 135, 84, .75); }
.ui-card--yellow { border-left: 5px solid rgba(255, 215, 0, .75); }
.ui-card--cyan { border-left: 5px solid rgba(13, 202, 240, .75); }
.ui-card--purple { border-left: 5px solid rgba(111, 66, 193, .75); }

.ui-card > .card-header,
.ui-card > .panel-header,
.ui-card > .home-section-header {
    margin: 0;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(13, 110, 253, .20);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background: rgba(13, 110, 253, .10);
    font-size: 1.02rem;
    font-weight: 750;
}

.ui-card--green > .card-header,
.ui-card--green > .panel-header,
.ui-card--green > .home-section-header,
.ui-card--green > summary { background: rgba(25, 135, 84, .10); border-bottom-color: rgba(25, 135, 84, .20); }
.ui-card--yellow > .card-header,
.ui-card--yellow > .panel-header,
.ui-card--yellow > .home-section-header,
.ui-card--yellow > summary { background: rgba(255, 215, 0, .10); border-bottom-color: rgba(255, 215, 0, .20); }
.ui-card--cyan > .card-header,
.ui-card--cyan > .panel-header,
.ui-card--cyan > .home-section-header,
.ui-card--cyan > summary { background: rgba(13, 202, 240, .10); border-bottom-color: rgba(13, 202, 240, .20); }
.ui-card--purple > .card-header,
.ui-card--purple > .panel-header,
.ui-card--purple > .home-section-header,
.ui-card--purple > summary { background: rgba(111, 66, 193, .10); border-bottom-color: rgba(111, 66, 193, .20); }

/* Final proportional sizing for the desktop shell. */
@media (min-width: 1081px) {
    .dashboard-frame {
        grid-template-columns: 336px minmax(0, 1fr);
    }

    .dashboard-sidebar {
        width: 336px;
        min-width: 336px;
    }

}

/* Embedded workflow steps use the same accent treatment as top-level cards. */
html .rosettax-workflow-step-card--green { border-left: 4px solid #20b486 !important; background: rgba(32, 180, 134, .04) !important; }
html .rosettax-workflow-step-card--blue { border-left: 4px solid #4f8df7 !important; background: rgba(79, 141, 247, .04) !important; }
html .rosettax-workflow-step-card--yellow { border-left: 4px solid #f2b233 !important; background: rgba(242, 178, 51, .06) !important; }
html .rosettax-workflow-step-card--orange { border-left: 4px solid #f2b233 !important; background: rgba(242, 178, 51, .06) !important; }
html .rosettax-workflow-step-card--purple { border-left: 4px solid #8d6bd8 !important; background: rgba(141, 107, 216, .05) !important; }

/* Documentation hub: structured guide cards, examples, and reference rows. */
.documentation-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.documentation-quickstart-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.documentation-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    min-width: 0;
}

.documentation-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(13, 110, 253, .28);
    border-radius: 50%;
    background: rgba(13, 110, 253, .08);
    color: #2672d6;
    font-size: .72rem;
    font-weight: 800;
}

.documentation-step h3 {
    margin: 0 0 4px;
    color: #26323b;
    font-size: .92rem;
    font-weight: 750;
}

.documentation-step p {
    margin: 0;
    color: #6c7c85;
    font-size: .78rem;
    line-height: 1.4;
}

.documentation-topic-grid .documentation-guide-card {
    min-height: 100%;
}

.documentation-guide-card .card-header h2 {
    margin: 3px 0 0;
}

.documentation-card-kicker {
    display: block;
    color: #6c7c85;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.documentation-guide-card .card-body,
.documentation-detail-card .card-body {
    display: flex;
    flex-direction: column;
}

.documentation-guide-card .card-body > p,
.documentation-detail-card .card-body > p {
    margin-top: 0;
    color: #52697a;
    line-height: 1.5;
}

.documentation-bullet-list {
    display: grid;
    gap: 5px;
    margin: 4px 0 16px;
    padding-left: 18px;
    color: #6c7c85;
    font-size: .82rem;
    line-height: 1.4;
}

.documentation-guide-card .inline-action {
    margin-top: auto;
}

.documentation-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 12px;
}

.documentation-syntax-list {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.documentation-syntax-row {
    display: grid;
    grid-template-columns: minmax(130px, .55fr) 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(13, 110, 253, .14);
    border-radius: 6px;
    background: rgba(13, 110, 253, .04);
}

.documentation-syntax-row code {
    color: #2672d6;
    font-size: .82rem;
    font-weight: 700;
}

.documentation-syntax-row span {
    color: #6c7c85;
    font-size: .8rem;
}

.documentation-callout {
    margin: 14px 0 0 !important;
    padding: 9px 10px;
    border-left: 3px solid #f2b233;
    border-radius: 4px;
    background: rgba(242, 178, 51, .08);
    font-size: .8rem;
}

.documentation-definition-list {
    display: grid;
    gap: 0;
}

.documentation-definition-list > div {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(128, 128, 128, .16);
}

.documentation-definition-list > div:first-child { padding-top: 0; }
.documentation-definition-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.documentation-definition-list strong { color: #26323b; font-size: .82rem; }
.documentation-definition-list span { color: #6c7c85; font-size: .82rem; line-height: 1.4; }

.documentation-model-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.documentation-model-group h3 {
    margin: 0 0 8px;
    color: #26323b;
    font-size: .86rem;
    font-weight: 750;
}

.documentation-model-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.documentation-model-pill {
    padding: 5px 8px;
    border: 1px solid rgba(25, 135, 84, .22);
    border-radius: 999px;
    background: rgba(25, 135, 84, .06);
    color: #52697a;
    font-size: .76rem;
}

.documentation-note-body p {
    margin: 0 0 12px;
    color: #52697a;
    line-height: 1.5;
}

@media (max-width: 1000px) {
    .documentation-quickstart-body,
    .documentation-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .documentation-quickstart-body,
    .documentation-columns,
    .documentation-model-grid {
        grid-template-columns: 1fr;
    }

    .documentation-syntax-row,
    .documentation-definition-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}
.ui-card--blue > summary { background: rgba(13, 110, 253, .10); border-bottom-color: rgba(13, 110, 253, .20); }

.ui-card > .card-header h2,
.ui-card > .panel-header h2,
.ui-card > .home-section-header h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 750;
}

.ui-card > .card-body,
.ui-card > .home-info-body,
.ui-card > .home-capability-body {
    padding: 18px;
    overflow: visible;
}

.ui-card > .card-body > p,
.ui-card > .card-body > .home-info-copy {
    margin: 0 0 14px;
}

.theme-mode-control {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

.theme-mode-control label {
    color: #52697a;
    font-size: .78rem;
    font-weight: 700;
}

.theme-mode-select .Select-control {
    min-height: 34px;
    height: 34px;
    border-radius: 4px;
}

.theme-mode-select .Select-value,
.theme-mode-select .Select-placeholder {
    line-height: 32px;
    font-size: .86rem;
}

/* Keep PyMieSim surfaces on the active Bootswatch palette, matching
   RosettaX's FLATLY/SLATE theme behavior. */
html body,
html .dashboard-main,
html .dashboard-sidebar {
    background-color: var(--bs-body-bg, #fff) !important;
    color: var(--bs-body-color, #212529) !important;
}

html .page-hero,
html .ui-card,
html .panel,
html .home-info-card,
html .home-capability-card,
html .home-action-card,
html .summary-card {
    background-color: var(--bs-card-bg, var(--bs-body-bg, #fff)) !important;
    color: var(--bs-body-color, #212529) !important;
    border-color: var(--bs-border-color-translucent, rgba(128, 128, 128, .25));
}

html .home-info-copy,
html .home-capability-body > p,
html .home-step-list,
html .theme-mode-control label {
    color: var(--bs-body-color, #52697a) !important;
}

/* Experiment result column: plot first, then actions, then a horizontal
   syntax guide matching the RosettaX workflow-page composition. */
.result-column > .run-panel,
.result-column > .helper-panel {
    width: 100%;
    box-sizing: border-box;
}

.result-column > .helper-panel .helper-examples {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.plot-control-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 18px 12px 12px;
}

.plot-control-actions .run-button {
    width: 100%;
    box-sizing: border-box;
}

.plot-controls-panel > .status-banner {
    margin: 0 12px 12px;
}

.plot-control-actions .export-button {
    background: #f7f9fb;
    color: #2f4358;
    border: 1px solid #c7d1d9;
}

@media (max-width: 900px) {
    .result-column > .helper-panel .helper-examples {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .result-column > .helper-panel .helper-examples {
        grid-template-columns: 1fr;
    }
}

/* Keep selectors comfortably inset from card edges on both workflows. */
.workflow-card > .workflow-card-body {
    padding: 18px !important;
}

.workflow-card > .workflow-card-body > .dashboard-dropdown {
    margin-bottom: 14px;
}

/* Keep Experiment's left configuration column aligned with Single's
   narrower setup area. */
.workspace {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr) !important;
}

.workspace .control-column,
.workspace .set-panel-grid,
.workspace .workflow-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 1080px) {
    .workspace {
        grid-template-columns: 1fr !important;
    }
}

/* RosettaX card tokens, applied last so every workflow card uses the same
   radius, accent, shadow, header, and body proportions as the reference UI. */
.workflow-card,
.home-info-card,
.home-capability-card,
.panel,
.summary-card {
    border: 1px solid rgba(128, 128, 128, .25);
    border-left: 5px solid rgba(13, 110, 253, .75);
    border-radius: 15px;
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .08);
}

.workflow-card {
    overflow: visible;
    background: #fff;
}

.workflow-card > summary,
.home-section-header,
.panel-header {
    padding: 12px 18px;
    background: rgba(13, 110, 253, .10);
    border-bottom: 1px solid rgba(13, 110, 253, .20);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    font-size: 1.02rem;
    font-weight: 700;
}

.workflow-card-body,
.home-info-body,
.home-capability-body,
.panel-body {
    padding: 18px;
    overflow: visible;
}

.single-workspace .representation-card > summary {
    padding: 12px 18px;
    background: rgba(13, 110, 253, .10);
    border-bottom: 1px solid rgba(13, 110, 253, .20);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    font-size: 1.02rem;
    font-weight: 700;
}

.single-workspace .representation-card > .representation-card-header {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    background: rgba(13, 110, 253, .10);
    border-bottom: 1px solid rgba(13, 110, 253, .20);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: #212529;
    font-size: 1.02rem;
    font-weight: 700;
}

.single-workspace .representation-card-body {
    padding: 18px;
}

.home-capability-card,
.home-info-card {
    border-left-width: 5px;
}

/* Extend the same RosettaX card language to every workspace surface, not
   only the source/scatterer workflow cards. */
.page-hero,
.hero,
.home-action-card,
.documentation-card,
.documentation-note,
.plot-controls-panel,
.helper-panel,
.graph-panel,
.single-graph-panel {
    border: 1px solid rgba(128, 128, 128, .25);
    border-left: 5px solid rgba(13, 110, 253, .75);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .08);
}

.page-hero,
.hero {
    padding: 18px;
}

.home-action-card {
    min-height: 190px;
    padding: 18px;
}

.documentation-card,
.documentation-note,
.plot-controls-panel,
.helper-panel {
    padding: 0;
    overflow: visible;
}

.documentation-card > .panel-header,
.documentation-note > .panel-header,
.plot-controls-panel > .panel-header,
.helper-panel > .panel-header {
    margin: 0;
}

.documentation-card > p,
.documentation-note > p,
.plot-controls-panel > p,
.plot-controls-panel > .helper-copy,
.helper-panel > p,
.helper-panel > .helper-copy {
    margin: 0;
    padding: 18px;
}

.documentation-note > .inline-action {
    display: inline-flex;
    margin: 0 18px 18px;
}

.graph-panel,
.single-graph-panel {
    padding: 18px;
    overflow: visible;
}

.workflow-page-header {
    display: block;
    min-height: 0;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid rgba(128, 128, 128, .25);
    border-left: 5px solid rgba(13, 110, 253, .75);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .08);
}

.workflow-page-header .eyebrow {
    margin: 0 0 6px;
}

.workflow-page-header h1 {
    margin: 0 0 8px;
    color: #212529;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.workflow-page-header .hero-text {
    max-width: 900px;
    margin: 0;
    color: #52697a;
    font-size: .95rem;
    line-height: 1.45;
}

/* Experiment follows the same left-controls/right-plot composition as
   Single, with enough width for the source, scatterer, and detector forms. */
.workspace {
    grid-template-columns: minmax(540px, 640px) minmax(0, 1fr);
}

.workspace .control-column,
.workspace .result-column {
    min-width: 0;
}

.workspace .set-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (max-width: 1080px) {
    .workspace {
        grid-template-columns: 1fr;
    }
}

/* Reusable card primitives: the accent colors follow RosettaX's workflow
   progression and remain visible as a highlighted strip on the left edge. */
.ui-card,
.workflow-card {
    border-left: 5px solid rgba(13, 110, 253, .75);
}

.ui-card--green,
.workflow-card--green { border-left-color: #20b486; }
.ui-card--blue,
.workflow-card--blue { border-left-color: #4f8df7; }
.ui-card--yellow,
.workflow-card--yellow { border-left-color: #f2b233; }
.ui-card--cyan,
.workflow-card--cyan { border-left-color: #20c7d5; }
.ui-card--purple,
.workflow-card--purple { border-left-color: #8d6bd8; }

.workflow-card--yellow { background: #fffbed; }
.workflow-card--blue { background: #eef4ff; }
.workflow-card--cyan { background: #effbfc; }

.workflow-card--yellow > summary { background: #fffbed; }
.workflow-card--blue > summary { background: #eef4ff; }
.workflow-card--cyan > summary { background: #effbfc; }

.workflow-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border: 1px solid #9da9b2;
    border-radius: 50%;
    color: #6e7d87;
    cursor: help;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
}

.workflow-info-button:hover,
.workflow-info-button:focus-visible {
    border-color: #2f4358;
    background: #fff;
    color: #2f4358;
}

.workflow-header-card {
    margin-bottom: 18px;
    padding: 18px;
    overflow: visible;
}

.header-card-intro h1 {
    margin: 0 0 6px;
    color: #212529;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.header-card-intro p {
    margin: 0 0 12px;
    color: #52697a;
    font-size: .86rem;
    line-height: 1.4;
}

.header-card-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.header-step-card {
    min-height: 84px;
    padding: 10px;
    border: 1px solid rgba(128, 128, 128, .18);
    border-radius: 8px;
    background: #fff;
}

.header-step-card--green { border-color: rgba(32, 180, 134, .28); border-left: 5px solid #20b486; background: rgba(32, 180, 134, .04); }
.header-step-card--blue { border-color: rgba(79, 141, 247, .28); border-left: 5px solid #4f8df7; background: rgba(79, 141, 247, .04); }
.header-step-card--yellow { border-color: rgba(242, 178, 51, .34); border-left: 5px solid #f2b233; background: rgba(242, 178, 51, .06); }
.header-step-card--purple { border-color: rgba(141, 107, 216, .30); border-left: 5px solid #8d6bd8; background: rgba(141, 107, 216, .05); }

.header-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-bottom: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: #52697a;
    font-size: .68rem;
    font-weight: 750;
}

.header-step-card h3 {
    margin: 0 0 4px;
    color: #34495a;
    font-size: .82rem;
    font-weight: 750;
}

.header-step-card p {
    margin: 0;
    color: #52697a;
    font-size: .72rem;
    line-height: 1.35;
}

/* Every remaining card-like surface gets the same visible left accent. */
.meta-chip,
.helper-chip,
.home-metric-tile,
.sidebar-card,
.empty-section {
    border-left: 5px solid #4f8df7;
}

.helper-chip-note {
    border-left-color: #7d8790;
}

/* Final card accent guarantee: every card variant, including all workflow
   configuration cards, keeps its highlighted left edge. */
html .ui-card,
html .workflow-card,
html .panel,
html .page-hero,
html .hero,
html .home-action-card,
html .documentation-card,
html .documentation-note,
html .graph-panel,
html .single-graph-panel,
html .summary-card,
html .meta-chip,
html .helper-chip,
html .home-metric-tile,
html .sidebar-card,
html .empty-section {
    border-left: 5px solid #4f8df7 !important;
}

html .workflow-card--green,
html .ui-card--green,
html .header-step-card--green { border-left-color: #20b486 !important; background-color: rgba(32, 180, 134, .04) !important; }
html .workflow-card--blue,
html .ui-card--blue,
html .header-step-card--blue { border-left-color: #4f8df7 !important; background-color: rgba(79, 141, 247, .04) !important; }
html .workflow-card--yellow,
html .ui-card--yellow,
html .header-step-card--yellow { border-left-color: #f2b233 !important; background-color: rgba(242, 178, 51, .06) !important; }
html .workflow-card--cyan,
html .ui-card--cyan { border-left-color: #20c7d5 !important; background-color: rgba(32, 199, 213, .04) !important; }
html .workflow-card--purple,
html .ui-card--purple,
html .header-step-card--purple { border-left-color: #8d6bd8 !important; background-color: rgba(141, 107, 216, .05) !important; }
html .helper-chip-note { border-left-color: #7d8790 !important; }

/* Keep the rounded corner geometry continuous between the tinted surface and
   its highlighted left edge. */
html .ui-card,
html .workflow-card,
html .header-step-card {
    background-clip: border-box;
}

html .workflow-card--green,
html .ui-card--green { border-color: rgba(32, 180, 134, .28) !important; }
html .workflow-card--blue,
html .ui-card--blue { border-color: rgba(79, 141, 247, .28) !important; }
html .workflow-card--yellow,
html .ui-card--yellow { border-color: rgba(242, 178, 51, .34) !important; }
html .workflow-card--cyan,
html .ui-card--cyan { border-color: rgba(32, 199, 213, .30) !important; }
html .workflow-card--purple,
html .ui-card--purple { border-color: rgba(141, 107, 216, .30) !important; }

html .header-step-card--green { border-color: rgba(32, 180, 134, .28) !important; }
html .header-step-card--blue { border-color: rgba(79, 141, 247, .28) !important; }
html .header-step-card--yellow { border-color: rgba(242, 178, 51, .34) !important; }
html .header-step-card--purple { border-color: rgba(141, 107, 216, .30) !important; }

html .workflow-card--green,
html .ui-card--green,
html .header-step-card--green { border-left-color: #20b486 !important; }
html .workflow-card--blue,
html .ui-card--blue,
html .header-step-card--blue { border-left-color: #4f8df7 !important; }
html .workflow-card--yellow,
html .ui-card--yellow,
html .header-step-card--yellow { border-left-color: #f2b233 !important; }
html .workflow-card--cyan,
html .ui-card--cyan { border-left-color: #20c7d5 !important; }
html .workflow-card--purple,
html .ui-card--purple,
html .header-step-card--purple { border-left-color: #8d6bd8 !important; }


/* Slightly larger dashboard type and more generous syntax-guide spacing. */
html body {
    font-size: 1rem;
}

html .workflow-card > summary,
html .panel-header,
html .home-section-header,
html .representation-card-header {
    font-size: 1.08rem;
}

html .workflow-card > summary {
    justify-content: flex-start;
}

html .workflow-card > summary .workflow-info-button {
    margin-left: 8px;
}

html .workflow-card > summary::before {
    margin-left: auto;
}

html .field-block label,
html .run-panel label,
html .plot-controls-panel label {
    font-size: 1rem;
}

html .dashboard-dropdown .Select-value-label,
html .dashboard-dropdown .Select-placeholder,
html .field-input,
html input,
html select {
    font-size: 1rem;
}

html .result-column > .helper-panel {
    padding-bottom: 18px;
}

html .result-column > .helper-panel > .helper-copy {
    padding: 18px 18px 10px;
    font-size: 1rem;
    line-height: 1.45;
}

html .result-column > .helper-panel .helper-examples {
    gap: 12px;
    margin-left: 18px;
    margin-right: 18px;
}

html .result-column > .helper-panel .helper-chip {
    padding: 16px;
    font-size: .95rem;
}

html .result-column > .helper-panel .helper-chip strong {
    font-size: 1.1rem;
}

html .result-column > .helper-panel .helper-chip span {
    font-size: .95rem;
    line-height: 1.45;
}

html .header-card-intro h1 {
    font-size: 2.2rem;
}

html .header-card-intro p {
    font-size: 1rem;
}

html .header-step-card {
    min-height: 96px;
    padding: 14px;
}

html .header-step-number {
    width: 20px;
    height: 20px;
    font-size: .72rem;
}

html .header-step-card h3 {
    font-size: .9rem;
}

html .header-step-card p {
    font-size: .8rem;
}

/* React-Select/Dash adds generous global input padding. Override it inside
   dropdowns so the search field and every option remain RosettaX-sized. */
.dashboard-dropdown .Select-menu-outer {
    max-height: 240px !important;
    overflow-y: auto !important;
}

.dashboard-dropdown .Select-input,
.dashboard-dropdown .Select-input > input {
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    line-height: 36px !important;
}

.dashboard-dropdown .Select-menu-outer .Select-option,
.dashboard-dropdown .Select-menu-outer .VirtualizedSelectOption,
.dashboard-dropdown .Select-menu-outer .VirtualizedSelectFocusedOption,
.dashboard-dropdown .Select-menu-outer [class*="Option"] {
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 7px 10px !important;
    line-height: 20px !important;
    font-size: .95rem !important;
}

.dashboard-dropdown .Select-menu-outer .Select-input,
.dashboard-dropdown .Select-menu-outer .Select-input input,
.dashboard-dropdown .Select-menu-outer input {
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 10px !important;
    line-height: 38px !important;
}

@media (max-width: 760px) {
    .header-card-steps { grid-template-columns: 1fr; }
}

/* Final route and control sizing overrides. */
.main-tabs .tab-container,
.main-tabs > div:first-child {
    display: none !important;
}

.dashboard-dropdown .Select-control {
    min-height: 38px;
    height: 38px;
    border-radius: 4px;
}

.dashboard-dropdown .Select-placeholder,
.dashboard-dropdown .Select--single > .Select-control .Select-value {
    line-height: 36px;
    font-size: .95rem;
}

.dashboard-dropdown .Select-input,
.dashboard-dropdown .Select-input > input {
    height: 36px;
    line-height: 36px !important;
}

.dashboard-dropdown .Select-option,
.dashboard-dropdown .VirtualizedSelectOption,
.dashboard-dropdown .VirtualizedSelectFocusedOption {
    min-height: 34px;
    height: 34px;
    padding: 7px 10px;
    box-sizing: border-box;
    line-height: 20px;
    font-size: .95rem;
}

.dashboard-dropdown .Select-menu {
    max-height: 240px;
}

/* The route already selects Experiment or Single; the internal Tabs control
   must not be visible as a second navigation bar. */
.main-tabs .tab-container,
.main-tabs > div:first-child {
    display: none !important;
}

/* Compact Dash dropdowns and normal-height option rows. */
.dashboard-dropdown .Select-control {
    min-height: 38px;
    height: 38px;
    border-radius: 4px;
}

.dashboard-dropdown .Select-placeholder,
.dashboard-dropdown .Select--single > .Select-control .Select-value {
    line-height: 36px;
    font-size: .95rem;
}

.dashboard-dropdown .Select-input,
.dashboard-dropdown .Select-input > input {
    height: 36px;
    line-height: 36px !important;
}

.dashboard-dropdown .Select-option,
.dashboard-dropdown .VirtualizedSelectOption,
.dashboard-dropdown .VirtualizedSelectFocusedOption {
    min-height: 34px;
    height: 34px;
    padding: 7px 10px;
    box-sizing: border-box;
    line-height: 20px;
    font-size: .95rem;
}

.dashboard-dropdown .Select-menu {
    max-height: 240px;
}

.sidebar-link:hover,
.sidebar-link.active {
    border: 0;
    background: #2f4358;
    color: #ffffff;
}

.dashboard-main {
    padding: 8px 16px 36px;
    gap: 12px;
}

.page-content-stack {
    gap: 12px;
}

.page-hero,
.hero-copy,
.hero-meta,
.panel,
.home-action-card,
.summary-card {
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .08);
}

.page-hero {
    padding: 12px 14px;
    border-left: 4px solid rgba(13, 110, 253, .75);
    background: #ffffff;
}

.page-hero h1 {
    max-width: none;
    margin: 0 0 6px;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: 1.7rem;
    line-height: 1.15;
    letter-spacing: 0;
}

.page-hero .hero-text {
    margin: 0;
    max-width: 900px;
    font-size: .86rem;
}

.home-card-grid,
.documentation-grid {
    gap: 8px;
}

.home-action-card {
    min-height: 190px;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .06);
}

.home-action-card:hover {
    border-color: rgba(13, 110, 253, .35);
    transform: none;
}

.home-action-card h2,
.documentation-card h2 {
    margin: 10px 0 7px;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: 1.02rem;
    font-weight: 750;
}

.home-action-card p,
.documentation-card p,
.home-overview-card p,
.documentation-note p {
    font-size: .86rem;
    line-height: 1.45;
}

.home-overview-card,
.documentation-note {
    padding: 0 10px 12px;
}

.panel {
    padding: 0;
    overflow: hidden;
}

.panel-header {
    margin: 0;
    padding: 8px 10px;
    background: rgba(13, 110, 253, .10);
    border-bottom: 1px solid rgba(13, 110, 253, .20);
}

.panel-header h2 {
    font-size: 1.02rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.panel > p,
.panel > .helper-copy,
.panel > .run-panel-copy {
    padding: 0 10px;
}

.panel-body {
    padding: 0 10px 10px;
}

.workflow-card {
    border-radius: 8px;
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .06);
}

.workflow-card > summary {
    padding: 9px 10px;
    font-size: .94rem;
    letter-spacing: 0;
}

.workflow-card-body {
    padding: 0 10px 10px;
}

.run-panel {
    background: #ffffff;
    color: #212529;
}

.run-button-primary {
    background: #2f4358;
    border-radius: 4px;
}

@media (max-width: 900px) {
    .dashboard-frame {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        position: static;
        height: auto;
    }
}

.page-content-stack {
    display: grid;
    gap: 22px;
}

.page-hero {
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(232,242,250,.92));
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 34px;
}

.page-hero h1 {
    max-width: 760px;
    margin: 4px 0 12px;
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 4.7rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.home-card-grid,
.documentation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

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

.home-action-card {
    display: block;
    min-height: 210px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease;
}

.home-action-card:hover {
    color: var(--ink);
    border-color: var(--accent);
    transform: translateY(-3px);
}

.home-card-number {
    color: var(--accent);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.home-action-card h2,
.documentation-card h2 {
    margin: 24px 0 8px;
    font-family: Fraunces, Georgia, serif;
}

.home-action-card p,
.documentation-card p,
.home-overview-card p,
.documentation-note p {
    color: var(--muted);
    line-height: 1.6;
}

.meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.documentation-note {
    padding-bottom: 24px;
}

.inline-action {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 900px) {
    .home-card-grid,
    .documentation-grid {
        grid-template-columns: 1fr;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "IBM Plex Sans", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(44, 120, 180, 0.08), transparent 34%),
        radial-gradient(circle at top right, rgba(20, 145, 125, 0.08), transparent 32%),
        linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
    color: var(--ink);
    scroll-behavior: smooth;
}

.app-shell {
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px;
    overflow-x: clip;
}

.dashboard-frame {
    display: grid;
    grid-template-columns: minmax(300px, 330px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.dashboard-sidebar {
    position: sticky;
    top: 20px;
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.sidebar-brand {
    display: grid;
    gap: 0;
}

.sidebar-logo-link {
    display: block;
    width: 100%;
}

.sidebar-logo {
    width: 100%;
    max-width: 180px;
    height: auto;
    display: block;
}

.sidebar-eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
    color: var(--accent);
    font-weight: 700;
}

.sidebar-title {
    margin: 0;
    font-family: "Fraunces", serif;
    font-size: 2.1rem;
    line-height: 0.95;
}

.sidebar-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.sidebar-nav {
    display: grid;
    gap: 8px;
}

.sidebar-link {
    display: block;
    padding: 11px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.sidebar-link:hover {
    border-color: rgba(201, 109, 67, 0.2);
    background: rgba(201, 109, 67, 0.08);
}

.sidebar-link:active {
    background: var(--accent-soft);
}

.sidebar-card {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 253, 0.98));
}

.sidebar-card span {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    font-weight: 700;
}

.sidebar-card code {
    display: block;
    word-break: break-word;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.84rem;
    color: var(--ink);
}

.dashboard-main {
    min-width: 0;
    display: grid;
    gap: 22px;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.hero-copy,
.hero-meta,
.panel,
.summary-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.hero-copy {
    padding: 32px;
}

.hero-copy h1 {
    margin: 10px 0 12px;
    font-family: "Fraunces", serif;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.02;
}

.hero-text {
    max-width: 58ch;
    color: var(--muted);
    font-size: 1.02rem;
}

.eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.76rem;
    color: var(--accent);
    font-weight: 700;
}

.hero-meta {
    padding: 24px;
    display: grid;
    gap: 14px;
}

.meta-chip {
    border-radius: 18px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(237, 245, 246, 0.92));
    border: 1px solid var(--line);
}

.meta-chip span,
.summary-card span {
    display: block;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 6px;
}

.meta-chip small {
    color: var(--ink);
    font-size: 0.96rem;
    line-height: 1.45;
}

.workspace {
    display: grid;
    grid-template-columns: minmax(380px, 430px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.control-column,
.result-column {
    display: grid;
    gap: 18px;
    align-content: start;
    min-width: 0;
}

.control-column {
    overflow: visible;
}

.panel {
    padding: 18px;
    min-width: 0;
}

.plot-controls-panel {
    position: relative;
    z-index: 8;
    overflow: visible;
}

.set-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.workflow-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.workflow-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.workflow-card > summary::-webkit-details-marker {
    display: none;
}

.workflow-card > summary::before {
    content: "+";
    order: 3;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent);
    text-align: center;
    line-height: 19px;
    font-size: 1.1rem;
}

.workflow-card[open] > summary::before {
    content: "−";
}

.workflow-card-toggle {
    margin-left: auto;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
}

.workflow-card-body {
    padding: 0 20px 20px;
}

.control-column {
    position: sticky;
    top: 20px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.panel-header h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.panel-body {
    margin-top: 14px;
}

.run-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2a6f9d, #1f5f89);
    color: #f9fcff;
}

.helper-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 253, 0.98));
}

.helper-copy {
    margin: 0 0 14px;
    color: var(--muted);
}

.helper-examples {
    display: grid;
    gap: 10px;
}

.helper-chip {
    border-radius: 16px;
    padding: 14px;
    background: rgba(44, 120, 180, 0.08);
    border: 1px solid rgba(44, 120, 180, 0.16);
    min-width: 0;
}

.helper-chip-note {
    background: rgba(22, 51, 59, 0.06);
    border-color: rgba(22, 51, 59, 0.12);
}

.helper-chip strong {
    display: block;
    margin-bottom: 6px;
    font-family: "Fraunces", serif;
    font-size: 1.05rem;
}

.helper-chip span {
    color: var(--muted);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.run-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent);
    pointer-events: none;
}

.run-panel .panel-header h2,
.run-panel label,
.run-panel-copy,
.run-panel .field-help,
.run-panel .status-banner {
    position: relative;
    z-index: 1;
}

.run-panel-copy {
    margin: 0 0 18px;
    max-width: 70ch;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1rem;
}

.run-panel .field-input,
.run-panel input,
.run-panel select {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.96);
}

.run-controls-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.plot-controls-panel .run-controls-grid {
    position: static;
}

.run-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}

.field-grid {
    display: grid;
    gap: 14px;
}

.field-block,
.panel-body,
.summary-card,
.meta-chip {
    min-width: 0;
}

.field-block label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.field-input,
input,
select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--panel-strong);
    min-height: 56px;
    padding: 14px 16px;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
}

.field-input:focus,
input:focus,
select:focus {
    outline: 0;
    border-color: rgba(44, 120, 180, 0.65);
    box-shadow: 0 0 0 2px rgba(44, 120, 180, 0.18);
}

html input::placeholder {
    color: #9aa7b2;
    opacity: 1;
}

html .field-input-default {
    color: #9aa7b2 !important;
}

html .field-input-invalid {
    border-color: #dc3545 !important;
    background: #fff5f5 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .14);
}

html .field-input {
    min-height: 48px;
    padding: 10px 12px;
    font-size: .95rem;
}

.field-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dashboard-dropdown .Select-control,
.dashboard-dropdown .Select-menu-outer,
.dashboard-dropdown .Select-menu,
.dashboard-dropdown .Select-value,
.dashboard-dropdown .Select-placeholder,
.dashboard-dropdown .Select-input > input,
.dashboard-dropdown .Select-option,
.dashboard-dropdown .Select-value-label,
.dashboard-dropdown .VirtualizedSelectOption,
.dashboard-dropdown .VirtualizedSelectFocusedOption,
.dashboard-dropdown .Select--single > .Select-control .Select-value,
.dashboard-dropdown .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label {
    color: var(--ink) !important;
}

.dashboard-dropdown .Select-control {
    min-height: 56px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--panel-strong);
}

.dashboard-dropdown .Select-placeholder,
.dashboard-dropdown .Select--single > .Select-control .Select-value {
    line-height: 54px;
    font-size: 1.05rem;
    font-weight: 500;
}

.dashboard-dropdown .Select-input {
    height: 54px;
}

.dashboard-dropdown .Select-input > input {
    line-height: 1.35 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.dashboard-dropdown .Select-menu-outer {
    border: 1px solid var(--line);
    background: var(--panel-strong);
    box-shadow: var(--shadow);
    z-index: 30;
}

.plot-controls-panel .dashboard-dropdown .Select-menu-outer {
    z-index: 120;
}

.dashboard-dropdown .VirtualizedSelectFocusedOption,
.dashboard-dropdown .Select-option.is-focused {
    background: rgba(201, 109, 67, 0.12);
}

.dashboard-dropdown .Select-option.is-selected {
    background: rgba(22, 51, 59, 0.08);
}

.run-panel .dashboard-dropdown .Select-control,
.run-panel .dashboard-dropdown .Select-menu-outer {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.96);
}

.run-button {
    border: 0;
    border-radius: 16px;
    padding: 15px 18px;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
    min-width: 220px;
}

.run-button:hover {
    transform: translateY(-1px);
}

.run-button-primary {
    flex: 0 0 auto;
    min-height: 68px;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #54a6de, #2d78b5);
    box-shadow: 0 14px 30px rgba(45, 120, 181, 0.24);
}

.export-button {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.18);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: none;
}

.status-banner {
    margin-top: 12px;
    border-radius: 16px;
    padding: 12px 14px;
    font-weight: 600;
}

.status-banner.idle {
    background: rgba(22, 51, 59, 0.06);
    color: var(--muted);
}

.status-banner.success {
    background: rgba(13, 61, 40, 0.78);
    color: white;
}

.status-banner.error {
    background: rgba(182, 69, 61, 0.12);
    color: var(--error);
}

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

.summary-card {
    padding: 18px 20px;
}

.summary-card strong {
    font-family: "Fraunces", serif;
    font-size: 1.25rem;
}

.graph-panel,
.table-panel {
    overflow: hidden;
}

.empty-section {
    padding: 16px;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--ink);
}

@media (max-width: 1080px) {
    .dashboard-frame,
    .hero,
    .workspace {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar,
    .control-column {
        position: static;
    }

    .set-panel-grid,
    .run-controls-grid {
        grid-template-columns: 1fr;
    }

    .run-actions {
        flex-direction: column;
    }

    .app-shell {
        padding: 18px;
    }
}

/* Final RosettaX visual overrides. */
body {
    background: #ffffff;
    color: #212529;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: .95rem;
}

.app-shell { max-width: none; padding: 0; }
.dashboard-frame { grid-template-columns: 210px minmax(0, 1fr); gap: 0; min-height: 100vh; }
.dashboard-sidebar { position: sticky; top: 0; height: 100vh; padding: 12px 8px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.sidebar-logo { width: 190px; max-width: 100%; margin: 0 auto 8px; }
.sidebar-nav { gap: 2px; }
.sidebar-link { padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: #343a40; font-size: .92rem; font-weight: 500; }
.sidebar-link:hover, .sidebar-link.active { border: 0; background: #2f4358; color: #fff; }
.dashboard-main { padding: 8px 16px 36px; gap: 12px; }
.page-content-stack { gap: 12px; }
.page-hero, .hero-copy, .hero-meta, .panel, .home-action-card, .summary-card { border: 1px solid rgba(128,128,128,.25); border-radius: 8px; background: #fff; box-shadow: 0 .35rem .9rem rgba(0,0,0,.08); }
.page-hero { padding: 12px 14px; border-left: 4px solid rgba(13,110,253,.75); background: #fff; }
.page-hero h1 { max-width: none; margin: 0 0 6px; font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-size: 1.7rem; line-height: 1.15; letter-spacing: 0; }
.page-hero .hero-text { margin: 0; max-width: 900px; font-size: .86rem; }
.home-card-grid, .documentation-grid { gap: 8px; }
.home-action-card { min-height: 190px; padding: 12px; border-radius: 8px; box-shadow: 0 .2rem .6rem rgba(0,0,0,.06); }
.home-action-card:hover { border-color: rgba(13,110,253,.35); transform: none; }
.home-action-card h2, .documentation-card h2 { margin: 10px 0 7px; font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-size: 1.02rem; font-weight: 750; }
.home-action-card p, .documentation-card p, .home-overview-card p, .documentation-note p { font-size: .86rem; line-height: 1.45; }
.home-overview-card, .documentation-note { padding: 0 10px 12px; }
.panel { padding: 0; overflow: hidden; }
.panel-header {
    margin: 0;
    padding: 8px 10px;
    background: rgba(13,110,253,.10);
    border-bottom: 1px solid rgba(13,110,253,.20);
    /* Let the header meet the colored card accent without a white notch. */
    border-top-left-radius: 0;
    border-top-right-radius: 8px;
}
.workflow-card > summary,
.home-section-header,
.ui-card > .card-header,
.single-workspace .representation-card > summary,
.single-workspace .representation-card > .representation-card-header {
    border-top-left-radius: 0;
    border-top-right-radius: 8px;
}

/* Dash 4 renders dropdown options with its own option-list classes. Keep
   those rows compact as well as the legacy React-Select classes above. */
.dash-dropdown-content .dash-dropdown-options {
    max-height: 200px !important;
    overflow-y: auto !important;
}

.dash-dropdown-content .dash-dropdown-search-container {
    box-sizing: border-box !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 6px !important;
    padding: 0 10px !important;
}

.dash-dropdown-content .dash-dropdown-search {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 42px !important;
    padding: 0 !important;
    line-height: 22px !important;
}

.dash-dropdown-content .dash-dropdown-option,
.dash-dropdown-content .dash-options-list-option-wrapper,
.dash-dropdown-content .dash-options-list-option,
.dash-dropdown-content .dash-options-list-option-text {
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 22px !important;
}

.dash-dropdown-content .dash-dropdown-option {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.dash-dropdown-content .dash-options-list-option-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.dash-dropdown-content .dash-options-list-option {
    width: 100% !important;
    padding: 0 12px !important;
}

.dash-dropdown-content .dash-options-list-option-text {
    margin: 0 !important;
    padding: 0 !important;
}
.panel-header h2 { font-size: 1.02rem; font-weight: 750; letter-spacing: 0; text-transform: none; }
.panel > p, .panel > .helper-copy, .panel > .run-panel-copy { padding: 0 10px; }
.panel-body { padding: 0 10px 10px; }
.workflow-card { border-radius: 8px; box-shadow: 0 .2rem .6rem rgba(0,0,0,.06); }
.workflow-card > summary { padding: 9px 10px; font-size: .94rem; letter-spacing: 0; }
.workflow-card-body { padding: 0 10px 10px; }
.run-panel { background: #fff; color: #212529; }
.run-button-primary { background: #2f4358; border-radius: 4px; }

.home-info-card,
.home-capability-card {
    overflow: hidden;
    border: 1px solid rgba(128, 128, 128, .25);
    border-left: 4px solid rgba(13, 110, 253, .75);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .08);
}

.home-section-header {
    padding: 8px 12px;
    background: rgba(13, 110, 253, .10);
    border-bottom: 1px solid rgba(13, 110, 253, .20);
    font-size: 1.02rem;
    font-weight: 750;
}

.home-info-body,
.home-capability-body {
    padding: 14px 12px;
}

.home-info-copy {
    margin: 0 0 14px;
    color: #52697a;
    font-size: .86rem;
}

.home-button-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.home-button,
.home-workflow-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.home-button-primary { background: #f59e0b; color: #fff; }
.home-button-outline { border-color: #2f4358; color: #2f4358; background: #fff; }
.home-button-info { border-color: #58a9f5; color: #2877b9; background: #fff; }
.home-button-muted { border-color: #b9c5cc; color: #6c7c85; background: #fff; }
.home-button:hover, .home-workflow-button:hover { filter: brightness(.97); text-decoration: none; }
.citation-bibtex { margin: 14px 0 0; padding: 14px; background: rgba(0, 0, 0, .06); border-radius: 6px; white-space: pre-wrap; overflow-x: auto; }

.home-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.home-capability-card {
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(13, 110, 253, .16);
    border-color: rgba(13, 110, 253, .16);
}

.home-capability-card .home-section-header {
    padding: 8px 10px;
    font-size: .94rem;
}

.home-capability-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.home-capability-body > p {
    min-height: 58px;
    margin: 0 0 12px;
    color: #52697a;
    font-size: .80rem;
    line-height: 1.4;
}

.home-step-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    color: #3f515d;
    font-size: .78rem;
}

.home-step-list > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.home-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid #b8d4ff;
    border-radius: 50%;
    background: #edf4ff;
    color: #2672d6;
    font-size: .68rem;
}

.home-workflow-button {
    width: 100%;
    margin-top: auto;
    background: #2f4358;
    color: #fff;
}

.home-metrics-card { margin-top: 0; }

.home-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.home-metric-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border: 1px solid #d9e7fb;
    border-radius: 8px;
    background: #f7faff;
    color: #52697a;
    font-size: .78rem;
}

.home-metric-value {
    color: #26323b;
    font-size: 1.45rem;
    line-height: 1;
}

@media (max-width: 900px) {
    .dashboard-frame { grid-template-columns: 1fr; }
    .dashboard-sidebar { position: static; height: auto; }
    .home-capability-grid, .home-metrics-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .home-capability-grid, .home-metrics-grid { grid-template-columns: 1fr; }
}

/* Sidebar sizing correction: keep the navigation compact instead of letting
   the full-height rail stretch each grid row. */
.dashboard-frame {
    grid-template-columns: 312px minmax(0, 1fr);
}

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    gap: 16px;
    width: 312px;
    min-width: 312px;
    height: 100vh;
    padding: 16px 12px;
}

.sidebar-brand,
.sidebar-nav {
    flex: 0 0 auto;
    height: auto;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.sidebar-logo {
    width: 364px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.sidebar-link {
    display: flex;
    align-items: center;
    min-height: 38px;
    height: 38px;
    flex: 0 0 38px;
    box-sizing: border-box;
}

.set-panel-grid {
    grid-template-columns: 1fr;
}

/* Keep Parameter Sweep configuration cards compact and let the result area
   use the remaining horizontal space. */
html body .workspace {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
}

.single-workspace .control-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.single-workspace {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
}

.single-workspace .workflow-card,
.single-workspace .run-panel {
    width: 100%;
    box-sizing: border-box;
}

.single-workspace .run-panel {
    padding: 0 0 12px;
    overflow: hidden;
    background: #fff;
    color: #212529;
}

.single-workspace .run-panel .panel-header {
    margin: 0 0 12px;
    padding: 8px 10px;
    background: rgba(13, 110, 253, .10);
    border-bottom: 1px solid rgba(13, 110, 253, .20);
}

.single-workspace .run-panel .field-block,
.single-workspace .run-panel .run-button,
.single-workspace .run-panel .status-banner {
    width: auto;
    margin-left: 12px;
    margin-right: 12px;
}

.single-workspace .run-panel .run-button {
    display: block;
    width: calc(100% - 24px);
    box-sizing: border-box;
    min-width: 0;
}

.single-workspace .run-panel .status-banner {
    margin-bottom: 0;
}

.single-workspace .representation-card {
    overflow: hidden;
}

.single-workspace .representation-card > summary {
    padding: 9px 10px;
    background: rgba(13, 110, 253, .10);
    border-bottom: 1px solid rgba(13, 110, 253, .20);
    font-size: .94rem;
    font-weight: 750;
}

.single-workspace .representation-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 12px 12px;
}

.single-workspace .representation-card-body .field-block {
    margin: 0;
}

.single-workspace .representation-top-row {
    display: contents;
}

.single-workspace .representation-card-body .nearfield-mode-field {
    margin-top: -4px;
}

.plot-computing-indicator {
    padding: 10px 16px;
    border: 1px solid rgba(79, 141, 247, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #315f9e;
    box-shadow: 0 4px 14px rgba(30, 55, 90, .18);
    font-size: .9rem;
    font-weight: 700;
}

.single-workspace .representation-card-body .run-button {
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}

.single-workspace .representation-card-body .status-banner {
    margin: 0;
}

@media (max-width: 1080px) {
    .single-workspace {
        grid-template-columns: 1fr;
    }
}

/* Final route and dropdown sizing overrides. */
.main-tabs .tab-container,
.main-tabs > div:first-child {
    display: none !important;
}

.dashboard-dropdown .Select-control {
    min-height: 38px;
    height: 38px;
    border-radius: 4px;
}

.dashboard-dropdown .Select-placeholder,
.dashboard-dropdown .Select--single > .Select-control .Select-value {
    line-height: 36px;
    font-size: .95rem;
}

.dashboard-dropdown .Select-input,
.dashboard-dropdown .Select-input > input {
    height: 36px;
    line-height: 36px !important;
}

.dashboard-dropdown .Select-option,
.dashboard-dropdown .VirtualizedSelectOption,
.dashboard-dropdown .VirtualizedSelectFocusedOption {
    min-height: 34px;
    height: 34px;
    padding: 7px 10px;
    box-sizing: border-box;
    line-height: 20px;
    font-size: .95rem;
}

.dashboard-dropdown .Select-menu {
    max-height: 240px;
}

.plot-controls-panel,
.run-panel,
.helper-panel {
    padding-bottom: 12px;
}

.plot-controls-panel > .helper-copy,
.plot-controls-panel > .run-controls-grid,
.run-panel > .run-panel-copy,
.run-panel > .run-actions,
.run-panel > .status-banner,
.helper-panel > .helper-copy,
.helper-panel > .helper-examples {
    margin-left: 12px;
    margin-right: 12px;
}

.run-panel > .run-actions {
    margin-bottom: 12px;
}

.run-panel > .status-banner {
    margin-bottom: 0;
}

/* Shared card geometry: keep every card's header clipped to the same outer
   corner and aligned with its left accent, including home-page cards. */
.ui-card,
.panel,
.workflow-card,
.home-info-card,
.home-capability-card,
.home-action-card,
.summary-card {
    overflow: hidden;
    border-radius: 8px;
}

.ui-card > .card-header,
.ui-card > .panel-header,
.ui-card > .home-section-header,
.workflow-card > summary,
.home-section-header,
.single-workspace .representation-card > summary,
.single-workspace .representation-card > .representation-card-header {
    border-top-left-radius: 0;
    border-top-right-radius: 8px;
}

/* Match each workflow header to its left accent, including the summary
   headers used by Experiment and Single setup cards. */
.ui-card--blue > summary { background: rgba(13, 110, 253, .10); border-bottom-color: rgba(13, 110, 253, .20); }
.ui-card--green > summary { background: rgba(25, 135, 84, .10); border-bottom-color: rgba(25, 135, 84, .20); }
.ui-card--yellow > summary { background: rgba(255, 215, 0, .10); border-bottom-color: rgba(255, 215, 0, .20); }
.ui-card--cyan > summary { background: rgba(13, 202, 240, .10); border-bottom-color: rgba(13, 202, 240, .20); }
.ui-card--purple > summary { background: rgba(111, 66, 193, .10); border-bottom-color: rgba(111, 66, 193, .20); }

@media (min-width: 700px) {
    .dashboard-frame {
        grid-template-columns: 312px minmax(0, 1fr);
    }

    .dashboard-sidebar {
        width: 312px;
        min-width: 312px;
    }

    .workspace {
        grid-template-columns: minmax(540px, 640px) minmax(0, 1fr) !important;
    }
}

@media (max-width: 1080px) {
    .dashboard-frame {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        width: auto;
        min-width: 0;
        position: static;
        height: auto;
    }

    .workspace,
    .single-workspace {
        grid-template-columns: 1fr !important;
    }
}

/* Compact controls inside the Source, Scatterer, and Detector cards. */
html .workflow-card .field-input {
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    border-radius: 8px;
    font-size: .95rem;
}

html .workflow-card .dashboard-dropdown .Select-control {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 8px;
}

html .workflow-card .dashboard-dropdown .Select-placeholder,
html .workflow-card .dashboard-dropdown .Select--single > .Select-control .Select-value {
    line-height: 40px;
    font-size: .95rem;
}

html .plot-options-card .plot-option-control,
html .plot-options-card .plot-option-control.dashboard-dropdown,
html .plot-options-card .plot-option-control.dashboard-dropdown .Select-control {
    width: 104px !important;
    min-width: 104px !important;
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box;
}

.graph-axis-card {
    display: block;
    margin: 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(96, 110, 123, .20);
    border-radius: 8px;
    background: #f7f8f9;
}

.graph-axis-title {
    margin-bottom: 10px;
    color: #52616d;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.graph-axis-fields {
    display: flex;
    gap: 14px;
    flex: 1;
}

.graph-axis-field {
    flex: 0 0 230px;
}

.graph-axis-field label {
    display: block;
    margin-bottom: 4px;
    color: #63727c;
    font-size: .72rem;
    font-weight: 650;
}

/* Match Particle Explorer representation controls to the compact Graph Axes
   card used by Parameter Sweep. */
.single-workspace .representation-card {
    width: calc(100% - 28px);
    max-width: none;
    height: fit-content;
    min-height: 0;
    margin: 0 14px;
    align-self: start;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid rgba(96, 110, 123, .20);
    border-radius: 8px;
    background: #f7f8f9;
    box-shadow: none;
}

/* Override the inherited blue workflow-card treatment for this neutral
   controls surface. */
html .single-workspace .representation-card {
    border: 1px solid rgba(96, 110, 123, .20) !important;
    border-left: 1px solid rgba(96, 110, 123, .20) !important;
    background: #f7f8f9 !important;
    background-color: #f7f8f9 !important;
}

.single-workspace .representation-card > .representation-card-header {
    padding: 0;
    margin-bottom: 10px;
    background: transparent;
    border: 0;
    color: #52616d;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.single-workspace .representation-card-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 230px));
    align-items: start;
    gap: 14px;
    height: auto;
    min-height: 0;
    padding: 0;
}

.single-workspace .representation-card-body .field-block {
    flex: 0 0 230px;
    margin: 0;
}

.single-workspace .representation-card-body .field-block label {
    display: block;
    margin-bottom: 4px;
    color: #63727c;
    font-size: .72rem;
    font-weight: 650;
}

.single-workspace .representation-card-body .field-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.single-workspace .representation-card-body .dashboard-dropdown {
    width: 100%;
}

.single-workspace .representation-card .dashboard-dropdown .Select-menu {
    max-height: 400px;
}

.single-workspace .representation-card .dash-dropdown-content .dash-dropdown-options {
    max-height: 400px !important;
}

@media (max-width: 620px) {
    .single-workspace .representation-card-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .graph-axis-card {
        display: block;
    }

    .graph-axis-fields {
        flex-direction: column;
    }

    .graph-axis-field {
        flex-basis: auto;
    }
}