/* Setpoint charts: tokens for every literal colour in the desktop drawing code (PlotControl,
   HeatmapControl, DotPlotControl, NoiseView, SpectrumView, FilterPreviewView) and the generic
   option-row controls (Avalonia Fluent look, sampled from the desktop at 1920×1080). Desktop keeps
   these literals identical in both themes; the light block repeats them so a re-skin can diverge. */
:root, :root[data-theme="dark"] {
  /* Reference / target lines: Brushes.Black with a LightGray halo in dark mode. */
  --sp-chart-ref-line: #000000;
  --sp-chart-ref-halo: #D3D3D3;
  /* Noise motor colours M1 red, M2 orange, M3 blue, M4 cyan (NoiseView.MotorColors). */
  --sp-chart-motor-1: #FF5A5A; --sp-chart-motor-2: #FFA040; --sp-chart-motor-3: #5AA0FF; --sp-chart-motor-4: #40E0E0;
  /* Freq × throttle RPM harmonic lines 1st/2nd/3rd. */
  --sp-chart-harmonic-1: #7FD3FF; --sp-chart-harmonic-2: #B6F07A; --sp-chart-harmonic-3: #E9A6FF;
  /* Dynamic notch: logged centre trace, configured min/max lines, undetectable-bin shading. */
  --sp-chart-notch: #D58CFF;
  --sp-chart-notch-limit: #E7C2FF;
  --sp-chart-notch-shade: rgba(213, 140, 255, 0.2745);
  /* Heat map grid (white 70/255), corner mean/peak badge (black 150/255, white text). */
  --sp-chart-heat-grid: rgba(255, 255, 255, 0.2745);
  --sp-chart-heat-badge: rgba(0, 0, 0, 0.5882);
  --sp-chart-heat-badge-text: #FFFFFF;
  /* Spectrum RPM distribution motors 1–8, dynamic notch sweep band. */
  --sp-chart-rpm-1: #EE6D75; --sp-chart-rpm-2: #ECAF44; --sp-chart-rpm-3: #67AFFF; --sp-chart-rpm-4: #49CFB8;
  --sp-chart-rpm-5: #B997ED; --sp-chart-rpm-6: #D58CB6; --sp-chart-rpm-7: #91BB54; --sp-chart-rpm-8: #9EBBC8;
  --sp-chart-sweep: #C497FF;
  /* Filter preview: estimated curve and throttle slider (#FFC400), editor section border. */
  --sp-chart-estimated: #FFC400;
  --sp-chart-preview-section: #A5801C;
  /* Fluent controls (option rows). */
  --sp-ctl-bg: #161619;
  --sp-ctl-border: #A2A2A3;
  --sp-ctl-disabled-bg: #515154;
  --sp-ctl-disabled-border: #747476;
  --sp-ctl-disabled-text: #9D9DA4;
  --sp-ctl-button: #4A4A4D;
  --sp-ctl-button-hover: #57575B;
  --sp-ctl-button-text: #FFFFFF;
  --sp-ctl-check-border: #A8A8A9;
  --sp-ctl-mark: #FFFFFF;
  --sp-ctl-track: #777779;
}
:root[data-theme="light"] {
  --sp-chart-ref-line: #000000;
  --sp-chart-ref-halo: #D3D3D3;
  --sp-chart-motor-1: #FF5A5A; --sp-chart-motor-2: #FFA040; --sp-chart-motor-3: #5AA0FF; --sp-chart-motor-4: #40E0E0;
  --sp-chart-harmonic-1: #7FD3FF; --sp-chart-harmonic-2: #B6F07A; --sp-chart-harmonic-3: #E9A6FF;
  --sp-chart-notch: #D58CFF;
  --sp-chart-notch-limit: #E7C2FF;
  --sp-chart-notch-shade: rgba(213, 140, 255, 0.2745);
  --sp-chart-heat-grid: rgba(255, 255, 255, 0.2745);
  --sp-chart-heat-badge: rgba(0, 0, 0, 0.5882);
  --sp-chart-heat-badge-text: #FFFFFF;
  --sp-chart-rpm-1: #EE6D75; --sp-chart-rpm-2: #ECAF44; --sp-chart-rpm-3: #67AFFF; --sp-chart-rpm-4: #49CFB8;
  --sp-chart-rpm-5: #B997ED; --sp-chart-rpm-6: #D58CB6; --sp-chart-rpm-7: #91BB54; --sp-chart-rpm-8: #9EBBC8;
  --sp-chart-sweep: #C497FF;
  --sp-chart-estimated: #FFC400;
  --sp-chart-preview-section: #A5801C;
  --sp-ctl-bg: #FAFAFB;
  --sp-ctl-border: #646464;
  --sp-ctl-disabled-bg: #C5C5C6;
  --sp-ctl-disabled-border: #9E9E9F;
  --sp-ctl-disabled-text: #6C6C73;
  --sp-ctl-button: #CCCCCC;
  --sp-ctl-button-hover: #BEBEBE;
  --sp-ctl-button-text: #000000;
  --sp-ctl-check-border: #626262;
  --sp-ctl-mark: #FFFFFF;
  --sp-ctl-track: #999999;
}

/* Chart host: canvases fill the parent (which needs a definite size). */
.spc-chart { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.spc-host > canvas { position: absolute; left: 0; top: 0; display: block; }
.spc-host > .spc-overlay { touch-action: none; outline: none; }

/* Views and option rows (desktop: TextBlock 13 px, controls 14 px, Inter). */
.spc-view { box-sizing: border-box; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; font-family: var(--sp-font); font-size: 13px; line-height: normal; color: var(--sp-text); background: var(--sp-surface); }
.spc-view *, .spc-view *::before, .spc-view *::after { box-sizing: border-box; }
.spc-bar { display: flex; flex-wrap: wrap; align-items: center; flex: none; }
.spc-cell { position: relative; min-width: 0; min-height: 0; padding: 2px; }
.spc-label { margin-right: 6px; white-space: nowrap; font-size: 13px; }
.spc-big { font-size: 14px; }
.spc-bold { font-size: 14px; font-weight: 600; }
.spc-info { font-size: 14px; font-weight: 600; cursor: help; white-space: nowrap; }
.spc-strong { font-weight: 600; color: var(--sp-text); }
.spc-pre { white-space: pre-line; }
.spc-t10, .spc-t11, .spc-t12, .spc-t13, .spc-t15 { color: var(--sp-text-muted); }
.spc-t10 { font-size: 10px; } .spc-t11 { font-size: 11px; } .spc-t12 { font-size: 12px; } .spc-t13 { font-size: 13px; } .spc-t15 { font-size: 15px; }
.spc-t10.spc-strong, .spc-t11.spc-strong, .spc-t12.spc-strong, .spc-t13.spc-strong, .spc-t15.spc-strong { color: var(--sp-text); }
.spc-card { background: var(--sp-surface-alt); border: 1px solid var(--sp-border); border-radius: 5px; padding: 6px 9px; }
.spc-disabled { opacity: .55; }

/* Button (Fluent: 14 px, radius 4). */
.spc-button { font: inherit; font-size: 14px; line-height: normal; color: var(--sp-ctl-button-text); background: var(--sp-ctl-button); border: 0; border-radius: 4px; padding: 7px 12px; margin: 0 8px 0 0; cursor: pointer; white-space: nowrap; }
.spc-button:hover { background: var(--sp-ctl-button-hover); }
.spc-button:disabled { opacity: .5; cursor: default; }

/* TextBox (Fluent: padding 5,4; 1 px border; radius 3). */
.spc-textbox { font: inherit; font-size: 14px; line-height: normal; color: var(--sp-text); background: var(--sp-ctl-bg); border: 1px solid var(--sp-ctl-border); border-radius: 3px; padding: 4px 5px; min-width: 0; outline: none; }
.spc-textbox:focus { border-bottom: 2px solid var(--sp-accent); padding-bottom: 3px; }
.spc-textbox:disabled { background: var(--sp-ctl-disabled-bg); border-color: var(--sp-ctl-disabled-border); color: var(--sp-ctl-disabled-text); }

/* ComboBox: native select inside a wrapper that draws the chevron. */
.spc-combo { position: relative; display: inline-flex; align-items: center; min-height: 25px; }
.spc-combo > select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px; line-height: normal; color: var(--sp-text); background: var(--sp-ctl-bg); border: 1px solid var(--sp-ctl-border); border-radius: 3px; padding: 3px 30px 3px 6px; width: 100%; min-height: 25px; cursor: pointer; outline: none; }
.spc-combo > select:disabled { background: var(--sp-ctl-disabled-bg); border-color: var(--sp-ctl-disabled-border); color: var(--sp-ctl-disabled-text); cursor: default; }
.spc-combo > select option { background: var(--sp-surface-raised); color: var(--sp-text); }
.spc-combo::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.2px solid var(--sp-text); border-bottom: 1.2px solid var(--sp-text); transform: rotate(45deg); pointer-events: none; }

/* CheckBox / RadioButton (Fluent: 20 px box, padding 0 per app style, 14 px text). */
.spc-check, .spc-radio { position: relative; display: inline-flex; align-items: center; font-size: 14px; cursor: pointer; white-space: nowrap; user-select: none; }
.spc-check > input, .spc-radio > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.spc-mark { flex: none; width: 20px; height: 20px; border: 1px solid var(--sp-ctl-check-border); background: transparent; display: inline-block; position: relative; }
.spc-check .spc-mark { border-radius: 4px; }
.spc-radio .spc-mark { border-radius: 50%; }
.spc-check > input:checked + .spc-mark { background: var(--sp-accent); border-color: var(--sp-accent); }
.spc-check > input:checked + .spc-mark::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border-right: 1.6px solid var(--sp-ctl-mark); border-bottom: 1.6px solid var(--sp-ctl-mark); transform: rotate(45deg); }
.spc-radio > input:checked + .spc-mark { background: var(--sp-accent); border-color: var(--sp-accent); }
.spc-radio > input:checked + .spc-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--sp-ctl-mark); }
.spc-check > input:disabled + .spc-mark, .spc-radio > input:disabled + .spc-mark { opacity: .45; }
.spc-check:has(> input:disabled), .spc-radio:has(> input:disabled) { color: var(--sp-ctl-disabled-text); cursor: default; }
.spc-check > input:focus-visible + .spc-mark, .spc-radio > input:focus-visible + .spc-mark { outline: 2px solid var(--sp-accent); outline-offset: 1px; }

/* Slider (Fluent: 4 px track, 20 px round thumb). Set style="--spc-pct:NN%" for the filled part in
   Chromium; --spc-slider-fill changes the fill colour (filter preview uses the estimated yellow). */
.spc-slider { -webkit-appearance: none; appearance: none; height: 32px; margin: 0; background: transparent; cursor: pointer; --spc-slider-fill: var(--sp-accent); }
.spc-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--spc-slider-fill) 0 var(--spc-pct, 50%), var(--sp-ctl-track) var(--spc-pct, 50%) 100%); }
.spc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--sp-accent); border: 0; }
.spc-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--sp-ctl-track); }
.spc-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--spc-slider-fill); }
.spc-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--sp-accent); border: 0; }
.spc-slider:disabled { opacity: .5; cursor: default; }