/* Noise tab (Charts/Noise/NoiseView.razor, HeatmapControl): layout of the desktop NoiseView and the
   heat-map colour map. Overlay / grid / badge colours are --sp-chart-* tokens in charts.css. */

/* Heat colour map: piecewise-linear stops at 0, pos-1, pos-2, pos-3 (= 1). The defaults are the
   desktop's MATLAB "hot" map (black -> red at 3/8 -> yellow at 3/4 -> white), identical in both
   themes because it encodes data, not chrome. Re-skin by changing these tokens. */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --sp-heat-stop-0: #000000;
  --sp-heat-stop-1: #FF0000;
  --sp-heat-stop-2: #FFFF00;
  --sp-heat-stop-3: #FFFFFF;
  --sp-heat-pos-1: 0.375;
  --sp-heat-pos-2: 0.75;
  --sp-heat-pos-3: 1;
}

/* DockPanel Margin 12,10,12,8: option bars on top, grid fills the rest. */
.spc-noise { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 10px 12px 8px; box-sizing: border-box; }
.spc-noise > .spc-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; }
/* Grid: auto column for the rotated axis names, one star column per shown channel; auto head row,
   three star rows. */
.spc-noise-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto repeat(3, minmax(0, 1fr)); }
.spc-noise-head { display: flex; align-items: center; margin: 0 0 4px 44px; min-width: 0; white-space: nowrap; }
.spc-noise-axis { display: flex; align-items: center; justify-content: center; }
.spc-noise-axis > span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; font-weight: 600; }
.spc-noise-cell { position: relative; margin: 2px; min-width: 0; min-height: 0; }
.spc-noise-cell > .spc-chart { position: absolute; inset: 0; }
.spc-motorkey { display: inline-flex; align-items: center; }
.spc-motorkey > span { font-weight: 600; margin-right: 8px; }
/* Desktop row geometry (1920×1080, 100 %): option bar 50 px tall (the Fluent slider sets it) with
   items centred except the combo boxes, which a WrapPanel leaves top-aligned; 4 px gap; overlays
   row 32 px (CheckBox MinHeight); 8 px gap; column heads 26 px (TextBox) + 4 px. */
.spc-noise > .spc-noise-top { min-height: 50px; margin-bottom: 4px; }
.spc-noise > .spc-noise-top > .spc-combo { align-self: flex-start; }
.spc-noise > .spc-noise-overlays { min-height: 32px; margin-bottom: 8px; }
.spc-noise-head { height: 26px; }
.spc-noise-head > .spc-textbox { height: 26px; }
/* Rotated axis names: the desktop Label's 6 px right margin is rotated with it, so the column is
   just the line height wide. */
.spc-noise-axis > span.spc-label { margin: 0; }
/* RadioButton / CheckBox content inherits the desktop's 13 px default font size. */
.spc-noise .spc-check, .spc-noise .spc-radio { font-size: 13px; }
/* dB range boxes keep the Fluent TextBox MinHeight (32 px) with the text near the top. */
.spc-noise .spc-noise-db { height: 32px; padding: 3px 5px 9px; }
.spc-noise .spc-noise-db:focus { padding-bottom: 8px; }
/* Heat-map text may run past the control's right edge, as on the desktop (see heatmap.js OVERHANG). */
.spc-noise-cell > .spc-chart { overflow: visible; }
.spc-noise-cell > .spc-chart > .spc-canvas { pointer-events: none; }