/* The results panel: cut sets, notices, the legend's keys. Numbers are
   monospace, right-aligned, tabular — everywhere. */

.count { margin-left: 6px; color: var(--color-fg-muted); font-weight: 400; }

.notices { margin: 0 0 8px; padding: 6px 8px; list-style: none; border: 1px solid var(--color-warning); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.notices li + li { margin-top: 4px; }

.cutsets { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cutsets th { padding: 3px 4px; color: var(--color-fg-muted); font-weight: 500; text-align: left; border-bottom: 1px solid var(--color-border); }
.cutsets td { padding: 4px; vertical-align: top; border-bottom: 1px solid var(--color-border-subtle); overflow-wrap: anywhere; }
.cutsets .num { text-align: right; white-space: nowrap; }
.cutsets tbody tr { cursor: pointer; }
.cutsets tbody tr:hover { background: var(--color-bg-hover); }
.cutsets tbody tr.is-active { background: var(--color-bg-active); box-shadow: inset 2px 0 0 var(--color-accent); }
/* Rows holding the node selected on the canvas. */
.cutsets tbody tr.has-selected td:nth-child(2) { color: var(--color-accent); }
.cutsets tbody tr:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.spof-flag, .legend-tag {
  display: inline-block; margin-left: 6px; padding: 0 4px;
  border-radius: 3px;
  background: var(--color-fg-primary); color: var(--color-bg-base);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; line-height: 14px;
}
.legend-tag { margin: 0 5px 0 0; }
.legend-measure { padding: 1px 6px; font-size: var(--text-xs); }

/* The right panel's tabs, and the controls under the second one. */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--color-border-subtle); }
.tab { padding: 4px 8px 5px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--color-fg-muted); font: 600 0.625rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.tab:hover { color: var(--color-fg-primary); }
.tab[aria-selected="true"] { border-bottom-color: var(--color-accent); color: var(--color-fg-primary); }
.controls { margin: 0; padding: 0; list-style: none; }
.control { padding: 6px 0; border-bottom: 1px solid var(--color-border-subtle); }
.control:last-child { border-bottom: 0; }
.control-head { display: flex; align-items: baseline; gap: 6px; font-size: var(--text-sm); }
.control-head input { flex: none; margin: 0; accent-color: var(--color-accent); }
.control-name { flex: 1; min-width: 0; }
.control-rank { flex: none; color: var(--color-fg-muted); font-size: var(--text-xs); }
.control-facts, .control-worth { margin: 2px 0 0 19px; color: var(--color-fg-muted); font-size: var(--text-xs); line-height: 1.35; }
.control-worth { color: var(--color-fg-secondary); }
.controls-baseline { margin: 0 0 4px; text-align: left; font-size: var(--text-xs); color: var(--color-fg-secondary); }
#tab-controls .hint { margin: 8px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); line-height: 1.35; }

/* A control opened to be edited. */
.control-form { margin: 6px 0 2px 19px; padding: 0; }
.control-form .hint { grid-column: 1 / -1; }
.effect { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 4px; align-items: center; }
.effect-node { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
.effect-add { margin-top: 2px; }

.analysis-chart { display: block; width: 100%; overflow: visible; }
.analysis-chart text { fill: var(--color-fg-muted); font: 10px var(--font-mono); font-variant-numeric: tabular-nums; }
.chart-grid { stroke: var(--color-border-subtle); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--viz-series-baseline); stroke-width: 2; }
.chart-sampled { stroke-dasharray: 5 4; }
.chart-scenario { stroke: var(--viz-series-scenario); stroke-dasharray: 1.5 3; stroke-linecap: round; }
.chart-band-scenario { fill: var(--viz-series-scenario); fill-opacity: .08; stroke: var(--viz-series-scenario); stroke-opacity: .3; }
.chart-band { fill: var(--viz-series-baseline); fill-opacity: .13; stroke: var(--viz-series-baseline); stroke-opacity: .4; stroke-dasharray: 2 3; }
.chart-dot { fill: var(--viz-series-baseline); }
.chart-cross { stroke: var(--color-fg-muted); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
.chart-tooltip { min-height: 2.5em; font-size: var(--text-xs); overflow-wrap: anywhere; }
.chart-key { font-size: var(--text-xs); color: var(--color-fg-muted); }
/* A key's line sample: the series' own stroke and dash. */
.key-sample { display: inline-block; margin-right: 4px; vertical-align: middle; overflow: visible; }
.chart-quantiles { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: var(--text-xs); }
.chart-quantiles dd { margin: 0; }
.chart-table { margin-top: 10px; font-size: var(--text-xs); }
.chart-table summary { cursor: pointer; }
.analysis-scroll { overflow-x: auto; }
.analysis-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.analysis-table th, .analysis-table td { padding: 4px; border-bottom: 1px solid var(--color-border-subtle); }
.analysis-table th { color: var(--color-fg-muted); font-weight: 500; }
.analysis-table .num { text-align: right; white-space: nowrap; }
.analysis-chart:focus-visible { outline: 2px solid var(--color-accent); }

.pareto-table { min-width: 480px; border: 1px solid var(--color-border-subtle); }
.pareto-table th, .pareto-table td { vertical-align: top; text-align: right; padding: 6px 8px; border-right: 1px solid var(--color-border-subtle); }
.pareto-table th:first-child, .pareto-table td:first-child { text-align: left; }
.pareto-table th { background: var(--color-bg-surface); border-bottom-color: var(--color-border); }
.pareto-sort { display: block; width: 100%; }
.pareto-table th .pareto-sort { text-align: right; }
.pareto-table th:first-child .pareto-sort { text-align: left; }
.pareto-sort, .pareto-path { border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.pareto-sort:hover, .pareto-path:hover { text-decoration: underline; }
.pareto-path { display: block; width: 100%; min-width: 140px; text-align: left; }
.pareto-table .cheapest { background: var(--color-bg-elevated); }
.pareto-cheapest { display: block; font-size: var(--text-xs); color: var(--color-accent); }
.pareto-table tr.is-active { background: var(--color-bg-active); box-shadow: inset 2px 0 var(--color-accent); }
.pareto-table tr.has-selected .pareto-path { text-decoration: underline; color: var(--color-accent); }
.pareto-scatter { margin-top: 16px; }
.pareto-axes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 6px; align-items: center; font-size: var(--text-xs); }
.pareto-point { cursor: pointer; stroke: var(--viz-outline); stroke-width: 1; }
.pareto-point.front { fill: var(--color-accent); }
.pareto-point.dominated { fill: var(--color-fg-muted); }
.pareto-point.is-active, .pareto-point.has-selected { stroke: var(--color-fg-primary); stroke-width: 3; }
.node.hl-pareto { filter: drop-shadow(0 0 3px var(--color-accent)); }
.edge.hl-pareto { stroke: var(--color-accent); stroke-width: 2.5; }

/* Results that describe an older text stay on screen, faded, until the next
   solve replaces them (app.js sets data-results). "updating": all of them;
   "exact": the sampled parts — the exact part is already current. */
#hud-stats .stat, #hud-stats .hud-sub, #tab-results .panel-section,
#tab-ttc, #tab-loss, #tab-pareto, .control-worth, .controls-baseline, #selected-facts { transition: opacity 150ms ease; }
.workspace[data-results="updating"] :is(#hud-stats .stat, #hud-stats .hud-sub, #tab-results .panel-section),
.workspace:is([data-results="updating"], [data-results="exact"]) :is(#hud-eal, #hud-p95, #tab-ttc, #tab-loss, #tab-pareto, .control-worth, .controls-baseline, #selected-facts) { opacity: .45; }

/* Compare: the baseline against one scenario. */
.compare-pick, .compare-row { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--text-sm); }
.compare-term { flex: none; color: var(--color-fg-muted); }
.compare-pick .pick { flex: 1; min-width: 0; }
.compare-form { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--color-border-subtle); }
.compare-form h3, .compare-results h3 { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 4px; font-size: var(--text-xs); font-weight: 600; color: var(--color-fg-secondary); }
.compare-form h3 .label-action { margin-left: auto; }
.compare-name, .compare-speed { min-width: 0; padding: 3px 5px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-fg-primary); font: inherit; font-size: var(--text-sm); }
.compare-name { display: block; width: 100%; margin: 0 0 8px; }
.compare-speed { width: 6ch; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.compare-unit, .compare-same { color: var(--color-fg-muted); }
.compare-changes, .compare-steps { margin: 0 0 4px; padding: 0; list-style: none; }
.compare-change { display: grid; grid-template-columns: minmax(0, 1fr) 11ch auto; align-items: center; gap: 6px; padding: 2px 0; font-size: var(--text-sm); }
.compare-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-change .pick { width: 100%; }
.compare-remove { padding: 0 6px; }
.compare-remove-scenario { margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--color-fg-muted); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.compare-remove-scenario:hover, .compare-remove-scenario:focus-visible { color: var(--color-danger); text-decoration: underline; }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.compare-table th, .compare-table td { padding: 2px 0; font-weight: 400; text-align: left; }
.compare-table thead th { color: var(--color-fg-muted); font-family: var(--font-sans); font-size: var(--text-xs); }
.compare-table tbody th { max-width: 0; width: 45%; padding-right: 8px; color: var(--color-fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; padding-left: 10px; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { padding-top: 4px; border-top: 1px solid var(--color-border-subtle); }
.compare-results.is-stale .compare-table { opacity: .5; }
.compare-results .hint { margin: 4px 0 0; }
.compare-step { display: block; width: calc(100% + 8px); margin: 0 -4px; padding: 2px 4px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.compare-step:hover, .compare-step:focus-visible { background: var(--color-bg-hover); }