.sensor-rack-mode, .sensor-rack-stages, .sensor-rack-inline { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0; }
.sensor-page [hidden] { display: none !important; }
.sensor-rack-mode button[aria-pressed="true"], .sensor-rack-stages button[aria-pressed="true"] { background: #235f9e; color: white; }
.sensor-rack-controls { border-left: 3px solid #235f9e; padding-left: 14px; margin: 16px 0; }
.sensor-rack-task { padding: 10px 12px; background: #edf3f8; border-radius: 5px; }
.sensor-rack-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 0; }
.sensor-rack-options > label, .sensor-rack-inline > label { display: grid; gap: 5px; font-weight: 600; min-width: 0; max-width: 100%; }
.sensor-rack-main-controls > label { display: inline-flex; align-items: center; }
.sensor-rack-main-controls button[aria-pressed="true"] { background: #235f9e; color: white; }
.sensor-rack-options select, .sensor-rack-inline select, #sensor-rack-mechanism-p { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 7px; font: inherit; background: white; color: #18212f; border: 1px solid #9daabd; border-radius: 4px; }
.sensor-rack-options fieldset { grid-column: 1 / -1; margin: 0; padding: 10px; border: 1px solid #cbd6df; }
.sensor-rack-options fieldset label { display: block; margin: 7px 0; }
.sensor-rack-options input, .sensor-rack-inline input { margin-right: 6px; }
.sensor-rack-inline > p { flex-basis: 100%; margin: 0; }
.sensor-rack-controls select:focus-visible, .sensor-rack-controls input:focus-visible, .sensor-rack-inline select:focus-visible { outline: 3px solid #235f9e; outline-offset: 3px; }
[data-physical-rack="true"] svg, #sensor-rack-mechanism svg { min-width: 0; }
/* Both main figures redraw at their frame width, including on phones. Only
   the optional measured-noise close-up keeps its wider local scroll area. */
#sensor-double-descent[data-physical-rack="true"] #sensor-capacity-plot { min-width: 0; }
#sensor-quadrant[data-physical-rack="true"] #sensor-quadrant-plot { min-width: 0; }
#sensor-rack-mechanism #sensor-rack-mechanism-plot { min-width: 400px; }
.sensor-rack-score { display: inline-block; margin: 3px 15px 3px 0; }
#sensor-capacity-readout, .sensor-rack-key { color: #18212f; }
.sensor-rack-swatch { display: inline-block; width: .9em; height: .45em; margin-right: .35em; vertical-align: .1em; background: var(--sensor-color); border: 1px solid #687587; border-radius: 2px; }
.sensor-rack-score strong, .sensor-rack-oracle-training { display: block; }
#sensor-rack-focus { scroll-margin-top: 92px; }
#sensor-rack-focus:focus { outline: none; }
#sensor-rack-focus:focus-visible { outline: 3px solid #235f9e; outline-offset: 4px; }
.sensor-rack-progress { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 12px 0 6px; }
.sensor-rack-progress span { text-align: center; line-height: 1.3; font-size: .9rem; font-weight: 700; }
.sensor-rack-progress button { padding: 7px 10px; }
.sensor-rack-progress button:disabled { opacity: .45; cursor: default; }
.sensor-feature-quality-bridge { padding: 12px 15px; border-left: 3px solid #235f9e; background: #edf3f8; }
.sensor-feature-quality-bridge > p:first-child { margin-top: 0; }
.sensor-feature-quality-bridge > p:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
  .sensor-rack-options { grid-template-columns: 1fr; }
  .sensor-rack-mode, .sensor-rack-stages { gap: 6px; }
  .sensor-rack-mode button, .sensor-rack-stages button { font-size: .88rem; padding: 8px; }
  .sensor-rack-controls { padding-left: 10px; }
  .sensor-rack-progress span { font-size: .82rem; }
  .sensor-rack-progress button { padding: 7px; font-size: .85rem; }
  .sensor-rack-task { margin: 8px 0; padding: 8px 10px; font-size: .92rem; line-height: 1.45; }
}

.sensor-measuring { margin: 24px 0; padding: 20px; border: 1px solid #cbd6df; border-radius: 10px; background: #f5f8fb; }
.sensor-measuring h2 { font-size: 1.4rem; margin-top: 0; }
.sensor-measuring-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 0; list-style-position: inside; }
.sensor-measuring-flow li { padding: 12px; background: white; border-top: 3px solid #235f9e; }
.sensor-measuring-flow span { display: block; margin-top: 6px; font-size: .92rem; }
.sensor-measuring-table { max-width: 100%; overflow-x: auto; }
.sensor-measuring table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9rem; }
.sensor-measuring caption { text-align: left; font-weight: 700; margin: 10px 0; }
.sensor-measuring th, .sensor-measuring td { padding: 9px; text-align: right; border-bottom: 1px solid #cbd6df; white-space: nowrap; }
.sensor-measuring th:first-child { text-align: left; }
.sensor-measuring-fresh { background: #fff2d6; }
#sensor-measuring-status { min-height: 3.2em; }
.sensor-rule-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.sensor-rule-pair > div { padding: 16px; background: #f2f6fa; border-top: 3px solid #18212f; min-width: 0; }
.sensor-rule-pair > div:last-child { border-color: #367d51; }
.sensor-rule-pair p { font-size: .95rem; }
@media (max-width: 600px) { .sensor-measuring-flow, .sensor-rule-pair { grid-template-columns: 1fr; } .sensor-measuring { padding: 12px; } }
.sensor-thresholds { margin: 48px 0; }


.sensor-measuring-scroll-hint { display: none; }
@media (max-width: 600px) { .sensor-measuring-scroll-hint { display: block; } }

.sensor-rack-picker { min-width: 0; }
.sensor-rack-picker > label { display: block; margin-bottom: 5px; font-weight: 600; }
.sensor-rack-picker-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sensor-rack-picker-row input { width: 4.5em; min-height: 42px; box-sizing: border-box; margin: 0; padding: 7px; font: inherit; color: #18212f; background: white; border: 1px solid #9daabd; border-radius: 4px; }
.sensor-rack-picker-row button { min-height: 42px; padding: 7px 10px; }
.sensor-rack-picker-row button:disabled { opacity: .42; cursor: not-allowed; background: #e7e9ec; color: #687587; border-color: #cbd0d7; }
.sensor-rack-picker-row input:focus-visible { outline: 3px solid #235f9e; outline-offset: 3px; }
.sensor-rack-picker [role="status"] { display: block; min-height: 1.5em; }

#sensor-rack-plane-p { width: 6.5em; }

.sensor-rack-picker:has(input[aria-invalid="true"]) [role="status"] { color: #a13f29; }

/* This drawer uses the shared plot-scroll class, whose phone rule is otherwise
   overflow:visible. Keep the complete measured-noise plot reachable. */
#sensor-rack-mechanism .plot-scroll { max-width: 100%; overflow-x: auto; margin: 0; padding: 0; }
#sensor-rack-mechanism .plot-scroll:focus-visible { outline: 3px solid #235f9e; outline-offset: 2px; }
.sensor-count-inspection { display:grid; grid-template-columns:minmax(0,1fr) 7rem; align-items:center; gap:5px 12px; margin:8px 0; font-size:14px; }
.sensor-count-inspection[hidden] { display:none; }
.sensor-count-inspection input[type="range"], .sensor-count-inspection small { grid-column:1/-1; }
.sensor-count-inspection input[type="number"] { width:100%; min-width:0; padding:5px 7px; }
.sensor-count-inspection input[type="range"] { width:100%; min-height:32px; margin:0; }
.sensor-count-inspection small { color:#526071; line-height:1.4; }
#sensor-capacity-plot { touch-action:pan-y; }
#sensor-quadrant-plot { touch-action:pan-y; }
#sensor-capacity-plot [data-capacity-drag] { cursor:ew-resize; }
/* HTML hit targets own two-dimensional touch drags. SVG children do not
   consistently establish touch ownership in Chromium. The remaining plot is
   ordinary page-scroll space, including stationary predictor markers. */
#sensor-quadrant .sensor-story-plot-scroll { position:relative; }
.sensor-plane-handles { position:absolute; inset:0; pointer-events:none; }
.sensor-plane-handle { position:absolute; display:block; width:24px; height:24px; transform:translate(-50%,-50%); pointer-events:auto; touch-action:none; cursor:grab; }
.sensor-plane-handle:active { cursor:grabbing; }
.sensor-plane-path-choice { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:4px 0 8px; font-size:13px; }
.sensor-plane-path-choice select { max-width:100%; font:inherit; padding:4px 6px; }

/* Do not reserve rows for absent loading text or stage-specific controls. */
#sensor-rack-status:empty, #sensor-rack-step-controls:empty { display: none; }
#sensor-rack-controls .sensor-rack-main-controls { margin: 0 0 8px; }
#sensor-rack-controls .sensor-rack-task { margin: 8px 0 0; }

/* Calibration values must remain readable in the closed native menu. */
.sensor-rack-options > label:has(> #sensor-rack-preset),
.sensor-rack-options > label:has(> #sensor-rack-plane-preset) { grid-column: 1 / -1; }
#sensor-rack-preset, #sensor-rack-plane-preset { width:100%; min-width:0; }
.sensor-rack-inline > label:has(> input[type="checkbox"]) { display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; }
.sensor-rack-inline > label > input[type="checkbox"] { width:auto; margin:0; flex:0 0 auto; }

/* Keep the existing six-stage controller, plot, explanation and scores together. */
#sensor-double-descent .reader-scene-unit .sensor-story-figure { margin:0; }
#sensor-double-descent .reader-scene-unit .sensor-story-plot-scroll { margin:0; padding:0; min-width:0; }
#sensor-double-descent .reader-scene-unit .sensor-rack-mode { margin:0 0 10px; }
#sensor-double-descent .reader-scene-unit .sensor-rack-controls { margin:8px 0; }
#sensor-double-descent .reader-scene-unit .sensor-capacity-actions { margin:5px 0; }
#sensor-double-descent .reader-scene-unit .sensor-story-readout { margin:8px 0 0; padding:10px; font-size:14px; }
#sensor-double-descent .reader-scene-unit .sensor-rack-score { margin:3px 10px 3px 0; }
#sensor-double-descent .reader-scene-unit .sensor-rack-task { font-size:14px; line-height:1.45; }
#sensor-double-descent .reader-scene-unit button { font-size:14px; }
#sensor-double-descent .sensor-overview-story { font-size:15px; line-height:1.55; }
#sensor-double-descent .sensor-overview-story > p { font-size:inherit; line-height:inherit; }
#sensor-double-descent .sensor-capacity-options .sensor-rack-disclosures { margin-top:0; }
@media(max-width:480px) {
  #sensor-double-descent .reader-scene-unit button { font-size:13px; }
  #sensor-double-descent .reader-scene-unit .sensor-rack-task { font-size:13px; }
}
/* Part 1 already owns its guide inside the live comparison: it does not need a
   second story rail competing for horizontal room. */
#sensor-double-descent .sensor-overview-scene { grid-template-columns:minmax(0,1fr); }
#sensor-double-descent .sensor-overview-scene > .reader-scene-unit { box-sizing:border-box; width:100%; max-width:1000px; margin-inline:auto; }
#sensor-double-descent .sensor-overview-story { max-width:78ch; }
#sensor-double-descent .sensor-overview-story h3 { font-size:17px; margin:0 0 8px; }

/* The six-stage controller already returns to this focus region. Keep its
   instruction compact so the next plot is visible in a short viewport. */
@media(max-width:899px), (max-height:700px) {
  #sensor-double-descent #sensor-rack-focus { scroll-margin-top:calc(var(--blog-sticky-stack-height,80px) + 8px); }
  #sensor-double-descent .sensor-rack-progress { margin:6px 0; }
  #sensor-double-descent .reader-scene-unit .sensor-rack-task { margin:6px 0; padding:7px 8px; font-size:13px; line-height:1.4; }
  #sensor-double-descent .reader-scene-unit #sensor-rack-step-controls { margin:5px 0; }
}
#sensor-double-descent .sensor-rack-guide-scope { margin:0 0 9px; font-size:13px; line-height:1.4; max-width:80ch; }
