/* Copyright (C) 2026 Zaher Salman
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

* {
    box-sizing: border-box;
}

:root {
    --mu-bg: #f1efe6;
    --mu-panel: #fffdf7;
    --mu-panel-soft: #f8faf3;
    --mu-green: #2f6f3e;
    --mu-green-dark: #17351e;
    --mu-green-muted: #5f7d63;
    --mu-border: #c7d4c4;
    --mu-text: #1f2721;
    --mu-accent: #b7791f;
    --mu-status-height: 38px;
    --mu-web-gutter: clamp(12px, 2vw, 28px);
}

html {
    height: 100%;
}

body {
    background:
	radial-gradient(circle at top left, rgba(47, 111, 62, 0.16), transparent 32vw),
	linear-gradient(135deg, #f7f4ea 0%, var(--mu-bg) 54%, #e4ebde 100%);
    color: var(--mu-text);
    display: flex;
    flex-direction: column;
    font-family: "Trebuchet MS", "Lucida Sans", Geneva, sans-serif;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    min-height: 0;
    overflow: hidden;
    padding: clamp(12px, 2vh, 20px) 0 calc(var(--mu-status-height) + 24px) 0;
}

td {
    white-space: wrap;
}

button,
input,
select {
    font-family: inherit;
}

.app-shell {
    display: flex;
    flex: 1 1 auto;
    height: auto;
    margin: 0 auto 0 var(--mu-web-gutter);
    min-height: 0;
    width: min(980px, 50vw);
}

.electron-shell .app-shell {
    margin: 0 auto;
    max-width: none;
    width: calc(100vw - 16px);
}

.app-card {
    background: linear-gradient(180deg, var(--mu-panel) 0%, #fbfbf4 100%);
    border: 1px solid rgba(95, 125, 99, 0.35);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(31, 39, 33, 0.18);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}


input[type="text"],
input[type="number"],
select {
    background: #fff;
    border: 1px solid #aebdab;
    border-radius: 4px;
    min-height: 30px;
    padding: 4px 7px;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: var(--mu-green);
    box-shadow: 0 0 0 2px rgba(47, 111, 62, 0.16);
    outline: none;
}

button:not(.tablinks):not(.action-btn):not(.editor-source-tab):not(.status-state-button):not(.help-button):not(.constraint-icon-button) {
    background: #fff;
    border: 1px solid #8aaa80;
    border-radius: 4px;
    color: #24472a;
    cursor: pointer;
    font-weight: bold;
    padding: 5px 10px;
}

button:not(.tablinks):not(.action-btn):not(.editor-source-tab):not(.status-state-button):not(.help-button):not(.constraint-icon-button):hover {
    background: #e9f2e6;
}


/* Style the tab */
.tab {
    background: var(--mu-green-dark);
    border: 0;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 2px;
    overflow-x: auto;
    padding: 6px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background: transparent;
    border: none;
    border-radius: 5px;
    color: #dce9d8;
    float: none;
    font-size: 92%;
    font-weight: bold;
    outline: none;
    cursor: pointer;
    padding: 8px 10px;
    transition: background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
    
/* Create an active/current tablink class */
.tab button.active {
    background: var(--mu-panel);
    color: var(--mu-green-dark);
}

/* Short action confirmations follow the TRIMSP-NL pattern: visible beside the
   initiating control, non-blocking, and automatically dismissed. */
.transient-warning {
    background: #fff1c9;
    border: 1px solid #c79824;
    border-radius: 7px;
    box-shadow: 0 7px 20px rgba(31, 39, 33, 0.17);
    box-sizing: border-box;
    color: #523c08;
    line-height: 1.35;
    max-width: min(380px, calc(100vw - 24px));
    opacity: 0;
    padding: 9px 12px;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.2s ease;
    z-index: 2000;
}

.transient-warning.visible {
    opacity: 1;
}

/* Persistent workflow actions.
   These controls apply across tabs, so they sit outside the Runs form and stay
   visible while the user edits parameters, constraints, or the MSR text. */
.main-action-bar {
    align-items: center;
    background: var(--mu-panel-soft);
    border-bottom: 1px solid var(--mu-border);
    box-shadow: 0 6px 18px rgba(31, 39, 33, 0.08);
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    justify-content: space-between;
    padding: 9px 12px;
    position: sticky;
    top: 0;
    z-index: 900;
}

.action-bar-title {
    align-items: center;
    display: flex;
    gap: 9px;
    min-width: 220px;
}

.app-brand-icon {
    border-radius: 7px;
    flex: 0 0 auto;
    height: 34px;
    width: 34px;
}

.action-bar-title-text {
    min-width: 0;
}

.action-bar-title strong {
    color: var(--mu-green-dark);
    display: block;
}

.action-bar-eyebrow {
    color: var(--mu-green-muted);
    display: block;
    font-size: 78%;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.action-bar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.action-bar-activity {
    align-items: center;
    color: var(--mu-green-dark);
    display: inline-flex;
    flex: 0 1 auto;
    font-size: 86%;
    font-weight: 600;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-bar-activity[hidden] {
    display: none;
}

.action-activity-spinner {
    animation: musrfit-action-spin 0.8s linear infinite;
    border: 2px solid rgba(47, 111, 54, 0.22);
    border-radius: 50%;
    border-top-color: var(--mu-green-dark);
    flex: 0 0 auto;
    height: 14px;
    width: 14px;
}

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

.action-btn {
    background: #fff;
    border: 1px solid #8aaa80;
    border-radius: 4px;
    color: #24472a;
    cursor: pointer;
    flex: 1 1 0;
    font-weight: bold;
    min-width: 0;
    padding: 6px 10px;
}

.action-btn:hover {
    background: #e9f2e6;
}

.action-btn-primary {
    background: #fff;
    border-color: #8aaa80;
    color: #24472a;
}

.action-btn-primary:hover {
    background: #e9f2e6;
}

.action-btn-secondary {
    background: #fff;
    border-color: #8aaa80;
    color: #24472a;
}

.action-btn-secondary:hover {
    background: #e9f2e6;
}

.action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.action-btn.is-running:disabled {
    background: #e1eee0;
    border-color: #6f966b;
    color: #1f5427;
    cursor: wait;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .action-activity-spinner {
        animation: none;
    }
}

/* Style the tab content */
.tabcontent {
    display: none;
    background:
	linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0)),
	var(--mu-panel);
    border: 0;
    border-top: 1px solid var(--mu-border);
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px 14px 16px 14px;
}
    
.tabcontent {
    animation: fadeEffect 0.01s; /* Fading effect takes 1 second */
}
    
/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Layout utilities */
.input-full { height: 80%; width: 100%; }
.w100 { width: 100%; }
.overflow-auto { overflow: auto; }

/* Local layout helpers for the remaining settings/editor panels. Constraints
   now use the same compact settings rows as the primary analysis controls. */
.settings-grid {
    display: grid;
    gap: 8px;
    padding: 8px 0;
}

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


.settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.settings-field input,
.settings-field select {
    width: 100%;
}


/* Constraint entry intentionally mirrors the one-line Runs/Fit sections. The
   expression field grows with the tab, while parameter selectors and actions
   keep predictable compact widths. */
.constraints-options-row,
.custom-parameter-row {
    overflow: visible;
    position: relative;
}

.constraint-field {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.constraint-parameter-field select {
    min-width: 145px;
}

.constraint-expression-field {
    flex: 1 1 420px;
    min-width: 240px;
}

.constraint-expression-field input {
    flex: 1 1 auto;
    min-width: 180px;
}

.custom-parameter-field input {
    width: 210px;
}

.custom-param-list {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

/* THEORY and FUNCTIONS are verification output, but they are central enough to
   constraint editing to stay visible. The preview keeps the same spacing as the
   compact settings sections while preserving a two-column layout when space allows. */
.split-panel-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 8px;
}

.constraints-preview-grid {
    padding: 0 2px 2px;
}

.code-panel {
    min-width: 0;
}

.constraint-preview-label {
    color: var(--mu-green-muted);
    font-size: 85%;
    font-weight: bold;
    padding: 2px 0 5px;
}

.code-panel .mono-block {
    margin: 0;
}

/* Preview blocks can be smaller than the general-purpose code panels because
   they are read-only summaries rather than the primary MSR editor. */
.constraints-preview-grid .mono-block {
    height: clamp(140px, 24vh, 280px);
}

.other-settings-grid {
    padding-top: 8px;
}

.data-path-warning {
    align-items: baseline;
    background: #fff8e8;
    border: 1px solid rgba(183, 121, 31, 0.45);
    border-radius: 5px;
    display: flex;
    gap: 8px;
    margin: 0 8px 10px 8px;
    padding: 6px 8px;
}

/* The author-level display:flex above overrides the browser's default
   [hidden] rule, so explicitly preserve the semantic hidden state. */
.data-path-warning[hidden] {
    display: none;
}

/* Keep this diagnostic visually light: it is absent during normal operation
   and should only draw attention when RUN-line construction actually fails. */
.data-path-warning-label {
    color: var(--mu-accent);
    flex: 0 0 auto;
    font-size: 78%;
    font-weight: bold;
    text-transform: uppercase;
}

.data-path-warning-message {
    overflow-wrap: anywhere;
}

.settings-panel {
    background: var(--mu-panel-soft);
    border: 1px solid var(--mu-border);
    border-radius: 7px;
    margin: 12px 8px;
    padding: 10px;
}

.settings-panel-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.settings-panel-header p {
    color: #536056;
    font-size: 88%;
    margin: 2px 0 0 0;
}

.settings-mode {
    background: #e2eadf;
    border-radius: 3px;
    color: var(--mu-green-dark);
    flex: 0 0 auto;
    font-size: 78%;
    font-weight: bold;
    padding: 3px 6px;
}

.data-root-controls {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.custom-param-badge {
    background: var(--mu-panel-soft);
    border: 1px solid var(--mu-border);
    border-radius: 4px;
    color: var(--mu-green-dark);
    display: inline-block;
    font-size: 0.9em;
    margin: 0;
    padding: 2px 6px;
    white-space: nowrap;
}
.cp-remove {
    background: none;
    border: none;
    color: #c00;
    cursor: pointer;
    font-size: 1.1em;
    padding: 0 2px;
    line-height: 1;
}
.cp-remove:hover {
    color: #800;
}

.expert-panel {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--mu-border);
    border-radius: 7px;
    padding: 12px;
}

.expert-panel-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.expert-panel-header strong {
    color: var(--mu-green-dark);
    display: block;
}

.expert-panel-header p {
    color: #4c584c;
    margin: 4px 0 0 0;
}

.expert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.t0bg-section-title {
    color: var(--mu-green-dark);
    font-weight: bold;
    margin: 12px 0 6px 0;
}

.t0bg-common-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 12px;
}

.t0bg-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.t0bg-pair {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 1fr;
}

.t0bg-stack {
    display: grid;
    gap: 6px;
}

.t0bg-bg-control {
    display: grid;
    gap: 6px;
    min-width: 210px;
}

.t0bg-bg-details {
    display: grid;
    gap: 6px;
}

.t0bg-table-wrap {
    overflow-x: auto;
}

.t0bg-table {
    min-width: 560px;
}

.t0bg-table-compact {
    min-width: 520px;
}

.t0bg-table th {
    background: var(--mu-panel-soft);
    color: var(--mu-green-dark);
    white-space: nowrap;
}

.t0bg-table td {
    vertical-align: top;
}

.t0bg-table td:first-child {
    white-space: nowrap;
    width: 72px;
}


/* The editor tab is a vertical flex container: the toolbar/source tabs keep
   their natural height, while the editable MSR text takes the remaining space. */
#Editor.tabcontent {
    flex-direction: column;
    overflow: hidden;
}

#Editor .editor-toolbar {
    flex: 0 0 auto;
}

.editor-text-row {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.editor-text-pane {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

/* Code/pre blocks */
.mono-block,
.msr-editor,
.job-log {
    font-family: "Fira Mono", "Cascadia Mono", "Courier New", monospace;
}

.mono-block {
    background: #fff;
    border: 1px solid var(--mu-border);
    border-radius: 4px;
    height: clamp(180px, 30vh, 340px);
    overflow: auto;
    padding: 8px;
}


.msr-editor {
    background: #fff;
    border: 1px solid var(--mu-border);
    border-radius: 4px;
    caret-color: #111;
    flex: 1 1 auto;
    height: auto;
    margin: 0;
    min-height: 0;
    outline: none;
    overflow: auto;
    padding: 8px;
    tab-size: 4;
    white-space: pre-wrap;
    width: 100%;
}

.msr-editor:focus {
    border-color: var(--mu-green);
    box-shadow: inset 0 0 0 1px var(--mu-green);
}


.editor-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/* The MSR document selector is styled as a true tab strip rather than as a
   pair of action buttons. This keeps Global/Template visually associated with
   the editor document while leaving document and ownership controls as actions. */
.editor-source-tabs {
    align-self: stretch;
    border-bottom: 1px solid var(--mu-border);
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0;
}

.editor-source-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #59655d;
    cursor: pointer;
    font-weight: 600;
    min-height: 30px;
    padding: 5px 11px 6px;
}

.editor-source-tab:hover {
    background: #f3f6f1;
    color: #24472a;
}

.editor-source-tab:focus-visible {
    outline: 2px solid var(--mu-green);
    outline-offset: -2px;
}

.editor-source-tab[hidden] {
    display: none;
}

/* A narrow underline marks the selected MSR document without giving it the
   visual weight of the primary Fit action. */
.editor-source-tab.active {
    background: transparent;
    border-bottom-color: var(--mu-green);
    color: #226126;
}

/* Ownership actions appear only after manual editing transfers control to the
   editor. Keep them visually quiet: the accessible labels and tooltips explain
   the one-way MSR-to-GUI synchronization and the editor lock. */
.msr-source-state {
    align-items: center;
    color: #45504a;
    display: inline-flex;
    gap: 2px;
}

.msr-source-state[hidden] {
    display: none;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.editor-icon-button {
    align-items: center;
    background: transparent;
    border-color: transparent;
    color: #526057;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 5px;
    width: 36px;
}

.editor-icon-button svg {
    fill: none;
    height: 21px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 21px;
}

.editor-lock-closed {
    display: none;
}

.editor-lock-button.locked {
    background: rgba(190, 45, 60, 0.16);
    border-color: rgba(160, 35, 50, 0.38);
    color: #8f2732;
}

.editor-lock-button.locked .editor-lock-open {
    display: none;
}

.editor-lock-button.locked .editor-lock-closed {
    display: initial;
}

.editor-lock-button:disabled {
    cursor: default;
    opacity: 1;
}

/* Inline padlock icons inside the quick-start MSR Editor help section. The
   closed padlock shows both the shackle path and the body; the open padlock
   uses only the open shackle so the closed variant must be forced visible so
   the global .editor-lock-closed { display:none } rule cannot hide it. */
.editor-help-lock {
    fill: none;
    height: 0.85em;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    vertical-align: -0.12em;
    width: 0.85em;
}

.editor-help-lock .editor-lock-closed {
    display: inline;
}

.editor-icon-button:hover {
    background: #eef3eb;
    border-color: var(--mu-border);
    color: #226126;
}

.editor-lock-button:disabled:hover {
    background: transparent;
    border-color: transparent;
    color: #526057;
}

.editor-lock-button.locked:hover {
    background: rgba(190, 45, 60, 0.24);
    border-color: rgba(160, 35, 50, 0.52);
    color: #7d1f29;
}

.editor-icon-button:focus-visible {
    outline: 2px solid var(--mu-green);
    outline-offset: 1px;
}

.editor-transfer-button {
    min-height: 36px;
    white-space: nowrap;
}

.editor-toolbar-spacer {
    flex: 1 1 auto;
}

.msr-comment {
    color: #777;
}

.msr-keyword {
    color: #0b6e4f;
    font-weight: bold;
}

.msr-command {
    color: #8a4b00;
    font-weight: bold;
}

.msr-directive {
    color: #245c7c;
    font-weight: bold;
}

.msr-function {
    color: #9a3f24;
    font-weight: bold;
}

.msr-parameter {
    color: #6b4f9c;
    font-weight: 600;
}

.msr-number,
.msr-value {
    color: #2f6574;
}

.msr-operator {
    color: #555;
    font-weight: bold;
}

.job-log {
    background: #fff;
    border: 1px solid var(--mu-border);
    border-radius: 4px;
    height: clamp(180px, 30vh, 340px);
    overflow: auto;
    padding: 8px;
    white-space: pre-wrap;
}

/* Logs mix commands, tool output and application messages. Highlight semantic
   line types instead of pretending the complete stream is one programming language. */
.job-log-timestamp {
    color: #7a837d;
}

.job-log-section {
    color: var(--mu-green-dark);
    font-weight: 700;
}

.job-log-command {
    color: #315f70;
    font-weight: 600;
}

.job-log-success {
    color: #2f6f36;
}

.job-log-warning {
    color: #8a6500;
}

.job-log-error {
    color: #a32626;
    font-weight: 600;
}

/* Tables */
.parameter-table {
    border-collapse: collapse;
    border: 1px solid var(--mu-border);
    box-shadow: 0 2px 6px rgba(31, 39, 33, 0.12);
    font-size: 0.82rem;
    min-width: 600px;
    table-layout: fixed;
    width: 100%;
}

.parameter-table th,
.parameter-table td {
    border-bottom: 1px solid var(--mu-border);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.parameter-table-header {
    background: var(--mu-green);
    color: #fff;
}

.parameter-table tr:not(.parameter-table-header):hover td {
    background: #eef3eb;
}

.parameter-label-cell {
    background: #e8ece6;
}

.parameter-table th:first-child,
.parameter-table td:first-child {
    text-align: center;
    width: 2ch;
}

.parameter-table th:nth-child(2),
.parameter-table td:nth-child(2) {
    overflow-wrap: anywhere;
    width: 12ch;
}

.parameter-table-multi th:nth-child(3),
.parameter-table-multi td:nth-child(3) {
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    width: 4ch;
}

.parameter-table th:nth-last-child(-n+4),
.parameter-table td:nth-last-child(-n+4) {
    text-align: center;
    white-space: nowrap;
}

.parameter-table-multi input[type="checkbox"] {
    display: block;
    margin: 0 auto;
}

.parameter-value-input {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 8ch;
    width: 11ch;
}

.full-table {
    border: 1px solid var(--mu-border);
    border-collapse: collapse;
    width: 100%;
}

.full-table th,
.full-table td {
    border-color: var(--mu-border);
    padding: 4px 6px;
}

.result-output {
    margin: 0 0 10px;
}

.result-empty {
    color: #667067;
    padding: 8px 2px 12px;
}

/* Keep the fitted MSR visible as the primary result. Generated companion files,
   including ROOT canvases, remain one click away under Other files. */
.result-primary-files {
    background: #fff;
    border: 1px solid var(--mu-border);
    border-radius: 6px;
    overflow: hidden;
}

.result-primary-files[hidden],
.result-other-files[hidden] {
    display: none;
}

.result-file-row {
    align-items: center;
    border-bottom: 1px solid #e2e9df;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(100px, 0.28fr) minmax(0, 1fr);
    padding: 8px 12px;
}

.result-file-row:last-child {
    border-bottom: 0;
}

.result-other-files {
    margin-top: 8px;
}

.result-secondary-files {
    border-top: 1px solid var(--mu-border);
}

.result-file-row a {
    color: #174f87;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-file-row a:not([href]) {
    color: inherit;
    text-decoration: none;
}

.result-file-label,
.execution-details dt {
    color: #555;
    font-size: 85%;
    font-weight: bold;
}

.result-file-actions {
    align-items: baseline;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.result-inline-action {
    background: transparent;
    border: 0;
    color: #174f87;
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    font-weight: bold;
    padding: 0;
    text-decoration: underline;
}

.result-inline-action[hidden] {
    display: none;
}

.results-details {
    background: #f8faf7;
    border: 1px solid var(--mu-border);
    border-radius: 6px;
    margin-bottom: 10px;
}

.results-details summary {
    color: var(--mu-green-dark);
    cursor: pointer;
    font-weight: bold;
    padding: 9px 12px;
}

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

.execution-details div {
    min-width: 0;
}

.execution-details dd {
    margin: 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.execution-detail-wide {
    grid-column: 1 / -1;
}

.jobs-log-wrap .job-log {
    flex: 1 1 auto;
    height: auto;
    margin: 0 12px 12px;
    min-height: 0;
    width: calc(100% - 24px);
}

#Jobs.tabcontent {
    flex-direction: column;
    overflow: hidden;
}

.jobs-log-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin-bottom: 0;
    min-height: 0;
}

.results-log-heading {
    color: var(--mu-green-dark);
    flex: 0 0 auto;
    font-weight: bold;
    padding: 9px 12px;
}

/* Shared floating-window shell used by web plot dialogs. */
.web-plot-window {
    background: var(--mu-panel);
    border: 1px solid var(--mu-border);
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    color: var(--mu-text);
    inset: auto;
    margin: 0;
    max-height: 85vh;
    max-width: calc(100vw - 24px);
    min-height: 180px;
    min-width: min(260px, calc(100vw - 24px));
    overflow: hidden;
    padding: 0;
    position: fixed;
    resize: both;
    width: calc(100vw / 3);
}

.web-plot-window[open] {
    display: flex;
    flex-direction: column;
}

.web-plot-window[data-plot-state="maximized"] {
    max-height: calc(100vh - var(--mu-status-height) - 36px);
    max-width: calc(100vw - 24px);
    resize: none;
}

.web-plot-window[data-plot-state="minimized"] {
    height: auto !important;
    max-height: none;
    min-height: 0;
    min-width: min(280px, calc(100vw - 24px));
    resize: none;
    width: min(280px, calc(100vw - 24px)) !important;
}

.web-plot-header {
    align-items: center;
    background: var(--mu-panel-soft);
    border-bottom: 1px solid var(--mu-border);
    cursor: move;
    display: flex;
    justify-content: space-between;
    padding: 9px 12px;
    position: relative;
    touch-action: none;
    user-select: none;
}

.web-plot-header strong {
    color: var(--mu-green-dark);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.web-plot-header > div:first-child {
    min-width: 0;
}


.web-plot-drag-handle {
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 24px;
}

.web-plot-controls {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
    margin-left: 10px;
}

.web-plot-controls button {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    height: 26px;
    justify-content: center;
    line-height: 1;
    padding: 0 !important;
    width: 28px;
}

/* Hamburger button on the left of the plot title bar; opens the plot-action
   menu so plot commands are reachable without a keyboard (notably on touch). */
.web-plot-menu-button {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 16px;
    height: 30px;
    justify-content: center;
    line-height: 1;
    margin-right: 8px;
    padding: 0 !important;
    width: 34px;
}

/* Dropdown of plot actions, anchored under the hamburger button. The title bar
   is flex, so the menu participates in flow and must be absolutely positioned
   relative to the first (hamburger) column to draw over the canvas. */
.web-plot-action-menu {
    background: var(--mu-panel);
    border: 1px solid var(--mu-border);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 2px;
    left: 8px;
    min-width: 168px;
    padding: 6px;
    position: absolute;
    top: calc(100% + 6px);
    z-index: 20;
}

.web-plot-action-menu[hidden] {
    display: none;
}

.web-plot-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--mu-text);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    min-height: 44px;
    padding: 0 12px;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.web-plot-action:hover,
.web-plot-action:focus-visible {
    background: var(--mu-green);
    color: #fff;
    outline: none;
}

@media (min-width: 760px) {
    .web-plot-action {
        min-height: 32px;
    }
}


.web-plot-window[data-plot-state="minimized"] .web-plot-header {
    border-bottom: 0;
    cursor: default;
}


.app-status-bar {
    align-items: center;
    background: #1f2721;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 2px solid var(--mu-green);
    border-radius: 8px 8px 0 0;
    bottom: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    color: #f5f5f5;
    display: flex;
    gap: 6px;
    left: var(--mu-web-gutter);
    min-height: var(--mu-status-height);
    overflow: hidden;
    padding: 5px 10px;
    position: fixed;
    right: auto;
    transform: none;
    width: min(980px, 50vw);
    z-index: 1000;
}

.electron-shell .app-status-bar {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 16px);
}

.app-status-bar[data-state="failed"] {
    border-top-color: #d32f2f;
}

.app-status-bar[data-state^="running"] {
    border-top-color: #f9a825;
}

/* Notices describe the latest user-facing event independently of the process
   state. This lets an Idle validation error look like an error without claiming
   that a musrfit process failed. */
.app-status-bar[data-notice-level="success"] {
    border-top-color: var(--mu-green);
}

.app-status-bar[data-notice-level="warning"] {
    border-top-color: #f9a825;
}

.app-status-bar[data-notice-level="error"] {
    border-top-color: #d32f2f;
}

/* State forms a terse permanent phrase.
   Optional context gets separators only when JavaScript reveals the field. */
.status-state {
    color: #b8dfbd;
    flex: 0 0 auto;
    font-size: 88%;
    font-weight: bold;
}

.app-status-bar[data-state="failed"] .status-state {
    color: #ffb3b3;
}

.app-status-bar[data-state="missing-data"] .status-state {
    color: #ffe08a;
}

.app-status-bar[data-state^="running"] .status-state {
    color: #ffe08a;
}

.status-statistic,
.status-message,
.status-file,
.status-directory {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-statistic::before,
.status-message::before,
.status-file::before,
.status-directory::before {
    color: #78827a;
    content: "\00b7";
    margin-right: 6px;
}

/* The fitted statistic is concise enough to stay visible even while later
   musrview status messages change. Non-convergence is highlighted separately
   because a musrfit process may exit normally without producing a valid fit. */
.status-statistic {
    color: #e2f2e4;
    flex: 0 0 auto;
    font-size: 88%;
    font-weight: bold;
}

.app-status-bar[data-fit-state="not-converged"] .status-statistic {
    color: #ffb3b3;
}

.status-message {
    flex: 1 1 18ch;
}

.app-status-bar[data-notice-level="success"] .status-message {
    color: #b8dfbd;
}

.app-status-bar[data-notice-level="warning"] .status-message {
    color: #ffe08a;
}

.app-status-bar[data-notice-level="error"] .status-message {
    color: #ffb3b3;
}

.status-file {
    flex: 0 1 22ch;
    font-family: monospace;
}

.status-directory {
    flex: 1 2 30ch;
    color: #cfd4d0;
    font-family: monospace;
}

.funLineEditing {
    background-color: #ffffcc;
    outline: 2px solid #ffaa00;
    padding: 2px 4px;
    border-radius: 3px;
}

@media only screen and (max-width: 700px) {
    /* The remaining project-owned grid layouts stack at narrow widths. */
    .settings-grid-2,
    .split-panel-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Constraint fields may wrap on narrow screens, while the normal desktop
       layout remains a compact single row. */
    .constraints-options-row,
    .custom-parameter-row {
        flex-wrap: wrap;
    }

    .constraint-expression-field {
        flex-basis: 100%;
    }
}

@media only screen and (max-width: 820px) {
    body {
	padding: 8px 0 calc(var(--mu-status-height) + 18px) 0;
    }

    .app-shell {
	margin: 0 auto;
	min-height: 0;
	width: calc(100vw - 12px);
    }

    .app-card {
	border-radius: 9px;
    }

    .tab {
	flex-wrap: nowrap;
	overflow-x: auto;
    }

    .tab button {
	flex: 0 0 auto;
	padding: 8px 9px;
    }

    .action-bar-title {
	min-width: 0;
	order: 1;
    }

    .main-action-bar {
	flex-wrap: wrap;
    }

    .action-bar-buttons {
	order: 2;
    }

    .action-bar-activity {
	flex-basis: 100%;
	order: 3;
    }

    .expert-panel-header {
	flex-direction: column;
    }

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

    .execution-details {
	grid-template-columns: 1fr;
    }

    .status-directory {
	display: none;
    }

    .app-status-bar {
	bottom: 4px;
	border-radius: 7px 7px 0 0;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100vw - 12px);
    }
}

@media only screen and (max-width: 520px) {
    .web-plot-window {
	width: calc(100vw - 24px);
    }

    .action-bar-title {
	display: none;
    }

    .action-bar-buttons {
	width: 100%;
    }

    .action-btn {
	min-width: 0;
    }

    .editor-source-tabs,
    .msr-source-state {
	flex-wrap: wrap;
    }

    /* On narrow screens the toolbar can wrap naturally; a forced spacer would
       otherwise create an unnecessary empty line before Save/Run. */
    .editor-toolbar-spacer {
	display: none;
    }

    .status-file {
	display: none;
    }

    .data-path-warning,
    .settings-panel-header {
	align-items: stretch;
	flex-direction: column;
    }

    .data-root-controls {
	grid-template-columns: 1fr;
    }

    .runs-options-row {
	flex-wrap: wrap;
	overflow: visible;
	white-space: normal;
    }

    .run-number-field {
	flex: 1 1 100%;
	min-width: 0;
    }

    .run-number-field input {
	min-width: 0;
	width: 100%;
    }
}


/* Parameter plots reuse the same floating shell as JSROOT, but keep their own
   controls compact so most of the window remains available to Plotly. */
.parameter-plot-window {
    height: min(560px, calc(100vh - var(--mu-status-height) - 36px));
    max-height: calc(100vh - var(--mu-status-height) - 36px);
    width: min(720px, calc(100vw - 24px));
}

.parameter-plot-header {
    min-height: 30px;
    padding: 4px 6px;
}

.parameter-plot-drag-handle {
    align-items: center;
    display: flex;
    overflow: hidden;
}

.parameter-plot-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
    position: relative;
}

.parameter-plot-toolbar {
    align-items: center;
    border-bottom: 1px solid var(--mu-border);
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    padding-bottom: 7px;
}

/* Less frequently used plot controls stay in a collapsible ticket, matching
   the compact Plot/FFT/RRF settings used by the main application. The ticket
   floats above the plot so opening it never resizes or reflows the panels. */
.parameter-plot-options-panel {
    align-items: center;
    background: var(--mu-panel);
    border: 1px solid var(--mu-border);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    left: 8px;
    margin: 0;
    max-height: calc(100% - 52px);
    overflow-y: auto;
    padding: 8px 10px;
    position: absolute;
    right: 8px;
    top: 44px;
    z-index: 20;
}

.parameter-plot-options-panel[hidden] {
    display: none;
}

.parameter-plot-control {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.parameter-plot-control input[type="text"] {
    max-width: 11rem;
}

.parameter-plot-toolbar select {
    max-width: 190px;
    min-width: 90px;
}

.parameter-plot-refresh {
    min-height: 28px;
    padding: 3px 10px;
}

.parameter-plot-summary {
    color: var(--mu-green-muted);
    font-size: 0.88rem;
    margin-left: auto;
}

.parameter-plot-canvas {
    background: #fff;
    flex: 1 1 auto;
    min-height: 260px;
    width: 100%;
}

.web-plot-window[data-plot-state="maximized"] .parameter-plot-content {
    min-height: 0;
}

.web-plot-window[data-plot-state="minimized"] .parameter-plot-content {
    display: none;
}

/* ROOT plots are resizable canvases; the initial size is close to 4:3 while
   still fitting inside the browser viewport above the status bar. */
.web-root-window {
    height: min(500px, calc(100vh - var(--mu-status-height) - 36px));
    max-height: calc(100vh - var(--mu-status-height) - 36px);
    width: min(600px, calc(100vw - 24px));
}

.web-root-plot-header {
    min-height: 30px;
    padding: 4px 6px;
}

/* Container for one or more musrview ROOT canvases returned by PLOT blocks. */
.web-root-plots {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow: auto;
    padding: 10px;
}

.web-root-plot-pane {
    background: var(--mu-panel-soft);
    border: 1px solid var(--mu-border);
    border-radius: 8px;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 360px;
    overflow: hidden;
}

.web-root-plot-pane + .web-root-plot-pane {
    margin-top: 0;
}


/* JSROOT owns the drawing inside this element; CSS only gives it available space. */
.web-root-canvas {
    background: #ffffff;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    width: 100%;
}

.web-root-message {
    color: var(--mu-muted);
    font-size: 13px;
    padding: 8px;
}

.web-root-error {
    color: #9f2d20;
}

/* Retry button shown in a ROOT pane whose load failed or timed out. */
.web-root-retry {
    background: var(--mu-green);
    border: 0;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    margin-left: 8px;
    min-height: 32px;
    padding: 0 14px;
}

.web-root-retry:hover,
.web-root-retry:focus-visible {
    filter: brightness(1.08);
    outline: none;
}

.web-plot-window[data-plot-state="maximized"] .web-root-plots {
    max-height: none;
}

.web-plot-window[data-plot-state="maximized"] .web-root-canvas {
    height: auto;
}

.web-plot-window[data-plot-state="minimized"] .web-root-plots {
    display: none;
}


/* Compact analysis sections share one visual language: a small green header
   followed by a single-line control row. The classes are deliberately generic
   so Fit model can use the same structure as it is compacted further. */
.compact-settings-header {
    background-color: var(--mu-green);
    border-radius: 4px;
    color: #fff;
    padding: 4px 8px;
}

/* Plot, FFT and RRF share one inline details area below their compact selector row.
   The shared area stays in normal document flow so it cannot be clipped by the tab. */

.compact-settings-row {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 42px;
    overflow-x: auto;
    padding: 8px 16px 10px;
    white-space: nowrap;
}

/* Run selection follows the same one-row layout as the other compact analysis
   sections. The run-list input is flexible; Year and Instrument stay narrow so
   the common case remains readable without spending a second row. */
.runs-options-row {
    position: relative;
}

.run-option-field {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.run-number-field {
    flex: 1 1 360px;
    min-width: 240px;
}

.run-number-field input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 170px;
}

.run-year-field input {
    box-sizing: border-box;
    width: 82px;
}

.run-instrument-field select {
    min-width: 88px;
}


/* Keep the three view selectors at their compact intrinsic widths while
   distributing them across the full row. */
.plot-view-options-row {
    justify-content: space-between;
    overflow: visible;
}

.fft-rrf-field,
.fft-range-field,
.rrf-frequency-field {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

/* DC correction is useful often enough to remain on the primary FFT row.
   Keep its checkbox treatment compact and independent from Fit-option styles
   so the two sections can evolve without accidental visual coupling. */
.fft-dc-correct-field {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.fft-dc-correct-field input {
    margin: 0;
}

.fft-range-field input {
    width: 72px;
}

.fft-units-field select {
    min-width: 78px;
}

.fft-rrf-separator {
    color: #666;
}

.fft-type-field select {
    min-width: 126px;
}

.fft-apod-field select {
    min-width: 96px;
}

.fft-number-field input {
    width: 72px;
}

/* Phase remains a first-class FFT control. Give the free-form expression field
   a little more room than ordinary numeric inputs because musrfit also accepts
   parameter-based phase expressions here. */
.fft-phase-field input {
    width: 118px;
}

.rrf-frequency-field input {
    width: 88px;
}

.rrf-frequency-field select {
    min-width: 76px;
}


/* RRF keeps an explicit enable switch even though its settings panel is selected.
   This prevents merely inspecting RRF values from changing the generated PLOT block. */
.rrf-enable-field,
.rrf-settings-inline {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
}

.rrf-enable-field {
    cursor: pointer;
}

.rrf-enable-field input {
    margin: 0;
}

.rrf-settings-inline input[aria-invalid="true"] {
    border-color: #a1261d;
    outline: 1px solid #a1261d;
}

/* Minuit2 controls remain on one row; the shared compact row owns spacing and
   overflow so this section and Fit range stay visually consistent. */
.fit-options-row {
    position: relative;
}

.fit-option-field,
.fit-option-save {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.fit-option-field select {
    min-width: 92px;
}

.fit-option-save {
    cursor: pointer;
}

.fit-option-save input {
    margin: 0;
}

/* Per-run series action chips.  The row is hidden by default and revealed only
   when the independent-series route is eligible (≥2 data sets, no Shared
   parameters).  Each chip cycles reuse → refit → skip → reuse on click. */
.series-actions-row {
    position: relative;
    overflow-x: visible;
}

/* .compact-settings-row forces display:flex which would otherwise beat the UA
   [hidden] rule; restore the hidden attribute so the row disappears when the
   independent-series route is not eligible. */
.series-actions-row[hidden] {
    display: none;
}

.series-actions-label,
.series-actions-bulk {
    color: var(--mu-green-dark);
    font-weight: bold;
    flex: 0 0 auto;
}

.series-actions-bulk {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    cursor: pointer;
}

.series-actions-bulk select {
    min-width: 92px;
}

.series-action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.series-action-chip {
    border: 1px solid var(--mu-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 4px 8px;
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.series-action-chip:hover {
    border-color: var(--mu-green);
}

/* reuse — neutral, muted green tint */
.series-action-chip[data-action="reuse"] {
    background: var(--mu-panel-soft);
    color: var(--mu-green-muted);
}

.series-action-chip[data-action="reuse"]:hover {
    background: #e9f2e6;
    color: var(--mu-green-dark);
}

/* refit — highlighted, accent (amber) */
.series-action-chip[data-action="refit"] {
    background: #fdf3e5;
    border-color: #d69e2e;
    color: #975a16;
}

.series-action-chip[data-action="refit"]:hover {
    background: #fefcf3;
    border-color: var(--mu-accent);
}

/* skip — dim, muted */
.series-action-chip[data-action="skip"] {
    background: #f7f7f7;
    color: #999;
}

.series-action-chip[data-action="skip"]:hover {
    background: #eee;
    color: #666;
}

/* Fit range now contains only fit limits and packing; plot-only controls live
   in the independent View settings disclosures below. */
.range-options-row {
    position: relative;
}

.range-option-field,
.plot-option-field,
.plot-range-fields,
.plot-option-check {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 5px;
}

.range-option-field input,
.plot-range-fields input {
    box-sizing: border-box;
    width: 52px;
}

.range-packing-field {
    margin-left: 6px;
}

.range-packing-field input,
.plot-option-field input {
    box-sizing: border-box;
    width: 52px;
}

.range-separator,
.range-unit {
    color: #666;
}

.view-settings-toggle {
    align-items: center;
    background: var(--mu-panel-soft);
    border: 1px solid var(--mu-border);
    border-radius: 5px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    gap: 5px;
    padding: 4px 8px;
}

.view-settings-toggle::after {
    content: "\25BE";
    font-size: 85%;
}

/* The active selector marks which settings are visible without turning the
   row into a mutually exclusive mode selector. */
.view-settings-toggle[aria-expanded="true"] {
    background: var(--mu-panel);
    border-color: var(--mu-green-dark);
    box-shadow: inset 0 -2px 0 var(--mu-green-dark);
}

.view-settings-toggle[aria-expanded="true"]::after {
    content: "\25B4";
}

/* The dot is deliberately subtle: it only tells the user that a collapsed
   Plot/FFT/RRF group contains a non-default setting. */
.plot-options-active-dot,
.fft-options-active-dot,
.rrf-options-active-dot {
    color: var(--mu-green-dark);
    display: none;
    font-weight: bold;
}

.plot-options-disclosure.has-overrides .plot-options-active-dot,
.fft-options-disclosure.has-overrides .fft-options-active-dot,
.rrf-options-disclosure.has-overrides .rrf-options-active-dot {
    display: inline;
}

/* One shared full-width panel is used by Plot, FFT and RRF. Its contents wrap
   naturally instead of opening a floating box that can be clipped or scroll. */
.view-settings-panel {
    background: var(--mu-panel);
    border: 1px solid var(--mu-border);
    border-radius: 6px;
    box-sizing: border-box;
    margin: 0 16px 10px;
    padding: 9px 11px;
    width: calc(100% - 32px);
}

.view-settings-panel[hidden],
.view-settings-panel-content[hidden] {
    display: none;
}

.view-settings-panel-content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    white-space: normal;
}

.plot-options-label,
.fft-options-label {
    font-weight: bold;
}

.rrf-settings-inline {
    flex-wrap: wrap;
}

.plot-option-check {
    cursor: pointer;
}

.plot-option-check input {
    margin: 0;
}

/* The custom automatic-phase interval exists only when explicitly selected.
   Author-level flex styles override the browser's default [hidden] rule, so the
   hidden selector is repeated here to guarantee that the dormant fields vanish. */
.fft-phase-correction-field select {
    min-width: 112px;
}

.fft-phase-correction-range {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 5px;
}

.fft-phase-correction-range[hidden] {
    display: none;
}

.fft-phase-correction-range input {
    width: 72px;
}

@media only screen and (max-width: 700px) {
    /* The shared settings panel stays within the tab on narrow screens. */
    .view-settings-panel {
        margin-left: 8px;
        margin-right: 8px;
        width: calc(100% - 16px);
    }
}

/* Fit model follows the same compact one-row layout as the other analysis
   settings. The common one-component case stays on one line; extra components
   stack only inside the model selector area instead of expanding the whole GUI. */
.fit-model-row {
    align-items: flex-start;
}

.fit-model-field {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.fit-model-field select {
    min-width: 118px;
}

.fit-model-histograms input {
    width: 150px;
}

.fit-model-components {
    display: flex;
    flex: 1 1 250px;
    flex-direction: column;
    gap: 4px;
    min-width: 230px;
}

.fit-model-component {
    align-items: center;
    display: flex;
    gap: 6px;
    min-height: 30px;
}

.fit-model-component-label,
.fit-model-component-index {
    flex: 0 0 42px;
}

.fit-model-component-index {
    color: var(--mu-green-muted);
    text-align: right;
}

.fit-model-component select {
    flex: 1 1 220px;
    min-width: 200px;
}

/* Add/remove controls intentionally use the same restrained button language as
   the rest of the app, but their square footprint keeps component editing terse. */
.fit-model-add,
.fit-model-remove {
    align-items: center;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    line-height: 1;
    padding: 0 !important;
    width: 30px;
}

.fit-model-remove {
    font-size: 17px;
}

/* Electron application dialogs keep infrequent setup/import tasks out of the
   analysis tabs while retaining the same compact visual language. */
.preferences-dialog,
.shared-configuration-dialog {
    border: 1px solid var(--mu-border);
    border-radius: 8px;
    max-width: min(620px, calc(100vw - 32px));
    padding: 0;
    width: 560px;
}

.preferences-dialog::backdrop,
.shared-configuration-dialog::backdrop {
    background: rgba(0, 0, 0, 0.28);
}

.preferences-form,
.shared-configuration-form {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.preferences-header,
.shared-configuration-header {
    border-bottom: 1px solid var(--mu-border);
    padding-bottom: 10px;
}

.preferences-path-row {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.preferences-path-row input {
    min-width: 0;
    width: 100%;
}

.preferences-hint {
    display: block;
    color: var(--mu-green-muted);
    font-size: 12px;
    margin-top: 4px;
}

.preferences-actions,
.shared-configuration-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
}

.shared-configuration-help {
    color: var(--mu-green-muted);
    margin: 0;
}

.shared-configuration-dialog textarea {
    border: 1px solid #aebdab;
    border-radius: 4px;
    font-family: "Courier New", monospace;
    min-height: 88px;
    padding: 7px;
    resize: vertical;
    width: 100%;
}

.shared-configuration-dialog textarea:focus {
    border-color: var(--mu-green);
    box-shadow: 0 0 0 2px rgba(47, 111, 62, 0.16);
    outline: none;
}

.shared-configuration-error {
    background: rgba(166, 57, 47, 0.1);
    border-left: 3px solid #a6392f;
    color: #7a261f;
    margin: 0;
    padding: 8px 10px;
}

/* Failed actions and missing input need a visible acknowledgement without
   forcing the complete executable log on users who do not need it. */
.job-outcome-dialog {
    background: var(--mu-panel);
    border: 1px solid #c38f35;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    max-width: min(560px, calc(100vw - 28px));
    padding: 0;
    width: 500px;
}

.job-outcome-dialog::backdrop {
    background: rgba(18, 24, 19, 0.34);
}

.job-outcome-dialog[data-level="error"] {
    border-color: #b85b5b;
}

.job-outcome-content {
    display: grid;
    gap: 12px;
    padding: 15px;
}

.job-outcome-header {
    align-items: center;
    border-bottom: 1px solid var(--mu-border);
    color: #805b12;
    display: flex;
    justify-content: space-between;
    padding-bottom: 9px;
}

.job-outcome-dialog[data-level="error"] .job-outcome-header {
    color: #922f35;
}

.job-outcome-close {
    align-items: center;
    background: transparent;
    border-color: transparent;
    display: inline-flex;
    font-size: 18px;
    height: 28px;
    justify-content: center;
    line-height: 1;
    padding: 0 !important;
    width: 28px;
}

.job-outcome-content p {
    font-weight: 600;
    margin: 0;
}

.job-outcome-details {
    background: #f5f3eb;
    border: 1px solid var(--mu-border);
    border-radius: 5px;
    font-family: monospace;
    margin: 0;
    max-height: 180px;
    overflow: auto;
    padding: 9px;
    white-space: pre-wrap;
}

.job-outcome-details[hidden] {
    display: none;
}

.job-outcome-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.preferences-section-title {
    border-top: 1px solid var(--mu-border);
    color: var(--mu-green-dark);
    font-weight: bold;
    padding-top: 12px;
}

.preferences-suffix-grid {
    padding: 0;
}

/* Parameter plotting starts from the parameter names themselves rather than
   adding another selection column to the table. */
.parameter-table-toolbar {
    align-items: center;
    border-bottom: 1px solid var(--mu-border);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 0 0 8px;
    padding: 0 0 8px;
}

.parameter-table-toolbar-title {
    color: var(--mu-green-dark);
}

/* Parameter plotting begins with a small modal choice of the common X axis;
   the larger floating Plotly window opens only after the user confirms it. */
.parameter-axis-dialog {
    border: 1px solid var(--mu-border);
    border-radius: 8px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 0;
    width: 360px;
}

.parameter-axis-dialog::backdrop {
    background: rgba(0, 0, 0, 0.28);
}

.parameter-axis-form {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.parameter-axis-message {
    color: var(--mu-green-muted);
    font-size: 0.86rem;
}

.parameter-axis-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.parameter-select-cell {
    cursor: pointer;
    user-select: none;
}

.parameter-select-cell:focus-visible {
    outline: 2px solid var(--mu-green-dark);
    outline-offset: -2px;
}

.parameter-table tr.parameter-row-selected td,
.parameter-table tr.parameter-row-selected:hover td {
    background: #dcebd9;
}

.parameter-table tr.parameter-row-selected .parameter-select-cell {
    box-shadow: inset 4px 0 0 var(--mu-green-dark);
    font-weight: 700;
}

/* State and message remain visually compact, but both provide a comfortably
   sized target for opening the complete run log. */
.status-log-button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    margin: -2px 0;
    min-height: 26px;
    min-width: 0;
    padding: 3px 5px !important;
}

.status-log-button:disabled {
    cursor: default;
    opacity: 1;
}

.status-log-button:not(:disabled):hover,
.status-log-button:not(:disabled):focus-visible {
    background: rgba(255, 255, 255, 0.1) !important;
    text-decoration: underline;
}

.status-message-button {
    color: inherit;
    font-size: inherit;
    text-align: left;
}

.job-log-window {
    height: min(460px, calc(100vh - var(--mu-status-height) - 48px));
    width: min(720px, calc(100vw - 24px));
    z-index: 1100;
}

.job-log-popup {
    border: 0;
    border-radius: 0;
    flex: 1 1 auto;
    height: auto;
    margin: 0;
    min-height: 0;
}

/* Independent-series per-run fit quality. The status-bar statistic becomes a
   button when a series table is available; the dialog lists every run. */
.series-statistic-dialog {
    background: var(--mu-panel);
    border: 1px solid var(--mu-green-muted);
    border-radius: 6px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    color: var(--mu-text);
    max-height: 70vh;
    max-width: min(860px, calc(100vw - 24px));
    padding: 0;
    width: min(860px, calc(100vw - 24px));
}

.series-statistic-dialog::backdrop {
    background: rgba(18, 24, 19, 0.34);
}

.series-statistic-dialog .web-plot-header {
    border-bottom: 1px solid var(--mu-green-muted);
}

.series-statistic-table {
    border-collapse: collapse;
    display: block;
    max-height: calc(70vh - 96px);
    overflow-y: auto;
    width: 100%;
}

.series-statistic-table thead th {
    background: var(--mu-green-dark);
    color: #e2f2e4;
    position: sticky;
    text-align: left;
    top: 0;
}

.series-statistic-table th,
.series-statistic-table td {
    border-bottom: 1px solid var(--mu-green-muted);
    padding: 4px 10px;
}

.series-statistic-table tr.series-stat-notconverged {
    color: #ffb3b3;
}

.series-statistic-table tr.series-stat-outlier {
    background: rgba(255, 128, 0, 0.08);
    font-weight: bold;
}

.series-statistic-table tr.series-stat-stale {
    color: var(--mu-green-muted);
}

/* A parameter plot in Electron lives in its own native BrowserWindow. The
   shared renderer fills the page directly; the operating-system title bar is
   the only window shell. */
.electron-parameter-plot-page-root,
body.electron-parameter-plot-page {
    height: 100%;
}

body.electron-parameter-plot-page {
    background: var(--mu-panel);
    display: flex;
    margin: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.electron-parameter-plot-page .parameter-plot-content {
    height: 100%;
    padding: 8px;
    width: 100%;
}

/* Multi-panel parameter plots. The toolbar controls the currently selected
   panel; clicking a panel selects it. Each panel may use a different .dat file. */
.parameter-plot-panel-indicator {
    color: var(--mu-green-muted);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}

.parameter-plot-data-source {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    min-width: 0;
}

.parameter-plot-data-source-value {
    color: var(--mu-green-muted);
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parameter-plot-data-button,
.parameter-plot-add,
.parameter-plot-series-chip {
    min-height: 28px;
    padding: 3px 9px;
}

.parameter-plot-add {
    font-size: 1rem;
    font-weight: 700;
    min-width: 30px;
}

.parameter-plot-series-list {
    align-items: center;
    display: flex;
    flex: 1 1 100%;
    gap: 5px;
    margin-left: 0;
    min-width: 0;
    overflow-x: auto;
}

.parameter-plot-series-chip {
    background: #eef3eb;
    border: 1px solid var(--mu-border);
    color: var(--mu-green-muted);
    white-space: nowrap;
}

.parameter-plot-no-series {
    color: var(--mu-green-muted);
    font-size: 0.86rem;
}

.parameter-plot-grid {
    display: grid;
    flex: 1 1 auto;
    gap: 7px;
    min-height: 0;
    overflow: hidden;
    padding-top: 7px;
}

.parameter-plot-panel {
    background: #fff;
    border: 1px solid var(--mu-border);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.parameter-plot-panel.active {
    border-color: var(--mu-green);
    box-shadow: inset 0 0 0 1px var(--mu-green);
}

.parameter-plot-panel .parameter-plot-canvas {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.parameter-plot-panel-empty {
    align-items: center;
    color: #68746d;
    display: flex;
    flex: 1 1 auto;
    font-size: 0.85rem;
    justify-content: center;
    padding: 18px;
    text-align: center;
}

.parameter-plot-panel-empty[hidden] {
    display: none;
}

.parameter-plot-message {
    flex: 0 0 auto;
    min-height: 0;
}

/* Per-panel note about overlaid data sets that could not be plotted. */
.parameter-plot-note {
    color: #8a6d3b;
    background: #fdf6e3;
    border-top: 1px solid #eed9a0;
    font-size: 0.78rem;
    padding: 2px 6px;
    flex: 0 0 auto;
}

.parameter-plot-note[hidden] {
    display: none;
}

/* Overlay data-sets section inside the plot-options panel. */
.parameter-plot-data-sets {
    margin-top: 0.55rem;
    border-top: 1px dashed var(--mu-border);
    padding-top: 0.55rem;
}

.parameter-plot-data-sets-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}

.parameter-plot-data-sets-title {
    font-weight: 600;
}

.parameter-plot-add-data-set {
    font-size: 0.78rem;
}

.parameter-plot-data-sets-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.parameter-plot-data-set-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    padding: 1px 0;
}

.parameter-plot-data-set-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parameter-plot-data-set-swatch {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    flex: 0 0 auto;
}

/* Popover for editing the style of a clicked marker series. */
.parameter-style-popover {
    position: absolute;
    z-index: 1200;
    width: 288px;
    padding: 0.7rem 0.8rem;
    background: #fff;
    border: 1px solid var(--mu-border);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
    font-size: 0.85rem;
    color: var(--mu-text);
}

.parameter-style-title {
    display: block;
    margin-bottom: 0.5rem;
    padding-right: 1.2rem;
    cursor: move;
    touch-action: none;
    user-select: none;
    color: var(--mu-green-muted);
    font-size: 0.88rem;
}

.parameter-style-scope {
    display: flex;
    gap: 0.9rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
}

.parameter-style-scope-option {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.parameter-style-swatches {
    display: grid;
    grid-template-columns: repeat(10, 18px);
    gap: 4px;
    margin-bottom: 0.55rem;
}

.parameter-style-swatch {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    padding: 0;
    cursor: pointer;
}

.parameter-style-swatch.selected {
    outline: 2px solid var(--mu-green);
    outline-offset: 1px;
}

.parameter-style-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.8rem;
    margin: 0.5rem 0 0.6rem;
    align-items: center;
}

.parameter-style-control {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: 0;
}

.parameter-style-control select,
.parameter-style-control input[type="number"] {
    flex: 1;
    min-width: 0;
    width: auto;
}

.parameter-style-opacity {
    grid-column: 1 / -1;
}

.parameter-style-opacity input[type="range"] {
    flex: 1;
    min-width: 0;
}

.parameter-style-opacity-value {
    min-width: 2.2rem;
    text-align: right;
    color: var(--mu-green-muted);
}

.parameter-style-cap {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.parameter-style-cap input[type="checkbox"] {
    margin: 0;
}

.parameter-style-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-top: 0.35rem;
}

.parameter-style-actions button {
    font-size: 0.8rem;
    padding: 0.18rem 0.7rem;
}

.parameter-style-actions .parameter-style-apply {
    background: var(--mu-green);
    color: #fff;
    border-color: var(--mu-green);
    font-weight: 600;
}

/* Rarely changed initialisation policy belongs with other application preferences. */
.preferences-check-row {
   display: flex;
   align-items: center;
   gap: 0.55rem;
   margin: 0.15rem 0 0.75rem;
}
.preferences-check-row input {
   margin: 0;
}

/* Contextual Quick Start help is always available without taking another tab. */
.tab .help-button {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 30px;
    font-size: 16px;
    height: 30px;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    width: 30px;
}

.tab .help-button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.tab .share-button {
    margin-left: 2px;
}

.tab .share-button .share-icon {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 17px;
}

/* The share control is available in both modes. Electron generates the
   canonical muSRFlow web URL rather than a local file:// URL. */

.constraint-line {
    align-items: center;
    display: flex;
    gap: 6px;
    min-height: 28px;
    width: 100%;
}

.constraint-line .funLine {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.constraint-line-actions {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    margin-left: auto;
}

button.constraint-icon-button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 24px;
    height: 24px;
    justify-content: center;
    line-height: 0;
    padding: 2px;
    width: 24px;
}

button.constraint-icon-button svg {
    display: block;
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 16px;
}

button.constraint-icon-button:hover {
    background: var(--mu-soft, rgba(0, 0, 0, 0.06));
}

button.constraint-icon-button:focus-visible {
    border-color: currentColor;
    outline: none;
}

.quick-start-dialog {
    height: min(78vh, 760px);
    max-height: calc(100vh - var(--mu-status-height) - 36px);
    max-width: min(720px, calc(100vw - 24px));
    width: min(680px, calc(100vw - 24px));
    /* JavaScript raises active modeless windows from this common fallback layer. */
    z-index: 1100;
}

.quick-start-frame {
    background: var(--mu-panel);
    border: 0;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* quick-start.html is shared by the browser floating window and Electron's
   independent native Help window. */
body.quick-start-document {
    background: var(--mu-panel);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    padding: 0;
}

.quick-start-document .quick-start-body {
    flex: 1 1 auto;
    min-height: 0;
}

.quick-start-body {
    min-height: 0;
    overflow-y: auto;
    padding: 10px 16px 16px;
}

.quick-start-section {
    border-left: 3px solid transparent;
    border-radius: 5px;
    padding: 8px 10px;
    scroll-margin-top: 8px;
}

.quick-start-section + .quick-start-section {
    margin-top: 4px;
}

.quick-start-section h3 {
    color: var(--mu-green-dark);
    font-size: 105%;
    margin: 0 0 6px;
}

.quick-start-section p,
.quick-start-section ol {
    line-height: 1.45;
    margin: 5px 0;
}

.quick-start-section ol {
    padding-left: 22px;
}

.quick-start-section-active {
    background: rgba(47, 111, 62, 0.08);
    border-left-color: var(--mu-green);
}

.quick-start-footer {
    background: var(--mu-panel-soft);
    border-top: 1px solid var(--mu-border);
    flex: 0 0 auto;
    font-size: 90%;
    opacity: 0.75;
    padding: 8px 16px;
    text-align: center;
}

.quick-start-footer a {
    color: var(--mu-green-dark);
}