/* Live run control (control-panel.js, control-load-form.js) and what it draws on the charts (chart-control.js).
   Tinted by the run's phase with a 1px hue border and no new elevation, like the health callout. Text uses
   the same tokens as the rest of the page, so contrast is the page's (AA in both themes); a disabled
   button stays focusable (aria-disabled) and its reason is a visible sentence, never colour alone. */
.control { margin: 0 0 16px; padding: 14px 18px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.control[data-phase="paused"] { background: var(--warn-soft); border-color: var(--warn); }
.control[data-phase="pausing"], .control[data-phase="resuming"], .control[data-phase="preparing"], .control[data-phase="committing"] { border-color: var(--accent); }
.control-status { margin: 6px 0 10px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.control-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.control .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.control .btn[aria-disabled="true"]:hover { border-color: var(--border); }
.control .btn[aria-busy="true"] { cursor: progress; }
.control .btn:focus-visible, .control .input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.control-why { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.control-why::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--warn); }
.control-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); max-width: 90ch; }
.control-error { margin: 8px 0 0; min-height: 0; font-size: 13px; font-weight: 600; color: var(--bad); overflow-wrap: anywhere; }
.control-error:empty { display: none; }

.control-progress { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); }
/* The state is a glyph and the sentence (clock: working, check: done, cross: failed); the hue only echoes it. */
.control-progress-text .icon { margin-right: 6px; }
/* Hanging indent: the glyph is 16px + 6px gap, so a wrapped line starts under the sentence, not under the glyph. */
.control-progress[data-tone="busy"] .icon { color: var(--accent); }
.control-progress[data-tone="done"] .icon { color: var(--good); }
.control-progress[data-tone="failed"] .icon { color: var(--bad); }
.control-progress-text { margin: 0; padding-left: 22px; text-indent: -22px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.control-bar { height: 6px; margin: 0 0 8px; border-radius: 3px; background: var(--border); overflow: hidden; }
.control-bar-fill { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(var(--fill, 0)); transform-origin: left; transition: transform 200ms ease-out; }
.control-bar[data-indeterminate="true"] .control-bar-fill { width: 35%; transform: none; animation: control-slide 1.4s ease-in-out infinite; }
@keyframes control-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

.control-load { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.control-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; padding: 0; border: 0; min-width: 0; }
.control-fields legend { padding: 0; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-dim); }
.control-units { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.control-unit { display: inline-flex; align-items: center; gap: 6px; }
.control-unit input { width: 18px; height: 18px; accent-color: var(--accent); }
.control-unit input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.control-field { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.control-field label { font-size: 13px; font-weight: 600; }
.control-field .input { width: 100%; max-width: 280px; }
.control-field-wide { grid-column: 1 / -1; }
.control-field-wide .input { max-width: 560px; }
.control-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.control-actions .control-hint { margin: 0; }
.control-preview:not(:empty) { margin-top: 12px; }
.control-split caption { padding: 8px 12px; text-align: left; font-size: 13px; font-weight: 600; color: var(--text-dim); caption-side: top; }
.control-split .num { text-align: right; font-variant-numeric: tabular-nums; }
.control-split tfoot th, .control-split tfoot td { border-top: 1px solid var(--border); font-weight: 650; }

/* Charts: a hatched band over a pause (a pattern and a label, not colour alone) and a solid rule at a load change. */
.chart .band-fill { fill: var(--panel); }
.chart .band-hatch { stroke: var(--text-faint); stroke-width: 1.2; opacity: 0.55; }
.chart .band-edge { stroke: var(--text-faint); stroke-width: 1; }
.chart .band-label { fill: var(--text-dim); font-size: 10.5px; font-weight: 600; font-family: var(--sans); }
.chart .load-rule { stroke: var(--s-vus); stroke-width: 1.5; }
.chart .load-label { fill: var(--s-vus); font-size: 10.5px; font-weight: 650; font-family: var(--sans); }
.strip[data-tone="paused"] .strip-state { color: var(--warn); }

@media (max-width: 760px) {
  .control { padding: 12px 14px 14px; }
  .control-fields { grid-template-columns: minmax(0, 1fr); }
  .control-field .input { max-width: none; }
}
@media (max-width: 480px) {
  .control-buttons .btn, .control-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .control-bar-fill { transition: none; }
  /* Unknown progress: a static diagonal-stripe track (a pattern, so it cannot be read as a full bar or a disabled one). */
  .control-bar[data-indeterminate="true"] .control-bar-fill { animation: none; width: 100%; background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, transparent 6px 12px); }
}