#sensor-denominator {
  margin: 54px 0;
  padding: 26px 0 0;
  color: #18212f;
  background: transparent;
  border-top: 1px solid #cbd6df;
}
#sensor-denominator [hidden] { display: none !important; }
#sensor-denominator h2 { margin: 8px 0 10px; }
#sensor-denominator h3 { margin: 0 0 8px; font-size: 1.1rem; }
#sensor-denominator button {
  min-height: 44px;
  padding: 8px 12px;
  color: #18212f;
  background: #f7f9fb;
  border: 1px solid #9fadb9;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}
#sensor-denominator button[aria-pressed="true"] {
  padding: 7px 11px;
  font-weight: 750;
  color: #153f69;
  background: #e7f4fb;
  border: 2px solid #235f9e;
}
#sensor-denominator button[aria-pressed="true"]::before { content: "✓ "; }
#sensor-denominator button:focus-visible { outline: 3px solid #235f9e; outline-offset: 3px; }
.sensor-denominator-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.sensor-denominator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 1.06fr);
  gap: 22px;
  align-items: start;
}
.sensor-denominator-layout figure { min-width: 0; margin: 0; }
.sensor-denominator-layout svg { display: block; width: 100%; height: auto; overflow: visible; }
.sensor-denominator-layout figcaption { margin-top: 7px; color: #4b596b; font-size: .9rem; line-height: 1.5; }
.sensor-denominator-axis { display: block; margin: 3px 0; text-align: center; font-size: .92rem; }
.sensor-denominator-key { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 10px 0; font-size: .86rem; }
.sensor-denominator-key span { display: inline-flex; align-items: center; gap: 6px; }
.sensor-denominator-key i { display: inline-block; width: 22px; height: 0; border-top: 3px solid #235f9e; }
.sensor-denominator-key i.physical { border-color: #61705b; border-top-style: dashed; }
.sensor-denominator-key i.fit { border-color: #18212f; }
.sensor-denominator-copy { min-width: 0; padding: 15px; background: #f3f7fa; border-left: 4px solid #235f9e; }
.sensor-denominator-copy p { margin: 8px 0; }
.sensor-denominator-formula { margin: 11px 0; font: 1.08rem/1.7 Georgia, "Times New Roman", serif; }
.sensor-denominator-rail { margin: 15px 0; }
.sensor-denominator-rail h3 { margin-bottom: 4px; }
.sensor-denominator-bar { display: flex; min-height: 58px; margin: 10px 0 7px; border: 1px solid #8795a6; border-radius: 6px; overflow: hidden; }
.sensor-denominator-bar > span { display: grid; place-items: center; min-width: 0; padding: 7px; text-align: center; font-size: .82rem; line-height: 1.25; }
.sensor-denominator-remainder { color: #153f69; background: #d9ebf8; }
.sensor-denominator-noise { color: #672a1f; background: #f3cbbf; }
.sensor-denominator-scale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px 14px; color: #4b596b; font-size: .86rem; }
.sensor-denominator-table-wrap { max-width: 100%; margin: 18px 0; overflow-x: auto; }
.sensor-denominator-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; font-variant-numeric: tabular-nums; }
.sensor-denominator-table th, .sensor-denominator-table td { padding: 8px 7px; border-bottom: 1px solid #d8dde6; text-align: left; }
.sensor-denominator-table thead th { color: #536174; background: #f1f5f8; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.sensor-denominator-table tbody th { border-left: 4px solid #18212f; }
.sensor-denominator-table tr.correlator th { border-left-color: #367d51; }
.sensor-denominator-table tr.eiv th { border-left-color: #994531; }
.sensor-denominator-table tr.is-selected { background: #edf5fb; font-weight: 700; }
.sensor-denominator-table tr.correlator.is-selected { background: #edf5ee; }
.sensor-denominator-table tr.eiv.is-selected { background: #fcf0eb; }
.sensor-denominator-table td:last-child { text-align: right; white-space: nowrap; }
.sensor-denominator-matrix { margin: 20px 0 4px; padding: 15px 0; border-block: 1px solid #d8c28f; }
.sensor-denominator-matrix p { margin: 7px 0; }
.sensor-gram-bridge { margin-top: 18px; padding-top: 18px; border-top: 1px solid #d8dde6; }
.sensor-gram-bridge h3 { margin-bottom: 12px !important; }
.sensor-gram-bridge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sensor-gram-bridge article { display: grid; grid-template-rows: 116px auto auto; gap: 7px; min-width: 0; padding: 12px; border: 1px solid #d8dde6; border-radius: 5px; background: #fff; }
.sensor-gram-bridge article svg { display: block; width: 100%; height: 112px; }
.sensor-gram-bridge article strong { font-size: .9rem; }
.sensor-gram-bridge article span { color: #4b596b; font-size: .8rem; line-height: 1.4; }
.sensor-gram-bridge svg text { fill: #536170; font: 700 12px system-ui, sans-serif; text-anchor: end; }
.sensor-gram-bridge .mini-diagonal { fill: none; stroke-width: 6; stroke-linecap: round; opacity: .8; }
.sensor-gram-bridge .mini-diagonal.subtract { stroke: #b05f3b; stroke-dasharray: 4 3; }
.sensor-gram-bridge .mini-diagonal.ridge { stroke: #7862b2; }
.sensor-gram-bridge .mini-mask { fill: rgba(255,255,255,.83); stroke: #8f9baa; stroke-width: 1; stroke-dasharray: 3 2; }
.sensor-gram-bridge > p { margin-top: 13px; font-weight: 750; }
.sensor-denominator-error { color: #8a2929; padding: 12px; border: 2px solid currentColor; background: #fff; }
.sensor-denominator-note { color: #4b596b; font-size: .92rem; }
@media (max-width: 960px) {
  .sensor-denominator-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sensor-gram-bridge-grid { grid-template-columns: 1fr; }
  .sensor-gram-bridge article { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; }
  .sensor-gram-bridge article svg { grid-row: 1 / 3; }
}
@media (max-width: 480px) {
  #sensor-denominator { margin: 38px 0; padding-top: 20px; }
  .sensor-denominator-copy { padding: 12px 9px; }
  .sensor-denominator-table th, .sensor-denominator-table td { padding: 8px 4px; }
  .sensor-denominator-table thead th { font-size: 13px; letter-spacing: 0; text-transform: none; }
  .sensor-denominator-table td:last-child { white-space: normal; }
  .sensor-denominator-table td:last-child strong { display: inline-block; }
  .sensor-denominator-remainder > span { display: none; }
  .sensor-denominator-scale { align-items: flex-start; gap: 7px; }
  .sensor-denominator-scale span { flex: 1 1 0; }
  .sensor-denominator-scale span:nth-child(2) { text-align: center; }
  .sensor-denominator-scale span:last-child { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  #sensor-denominator *, #sensor-denominator *::before { transition: none !important; animation: none !important; }
}

/* The denominator's plot and live arithmetic form one complete result unit. */
#sensor-denominator-content .sensor-denominator-layout { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; }
#sensor-denominator-content .sensor-denominator-copy { padding:10px; font-size:14px; line-height:1.45; }
#sensor-denominator-content .sensor-denominator-copy p { font-size:inherit; line-height:inherit; }
#sensor-denominator-content .sensor-denominator-copy h3 { font-size:14px; }
#sensor-denominator-content .sensor-denominator-formula { font-size:15px; font-weight:700; }
#sensor-denominator-content .sensor-denominator-controls { margin:0 0 12px; gap:6px; }
#sensor-denominator-content .sensor-denominator-controls button { font-size:13px; flex:1 1 40%; }
#sensor-denominator-content .sensor-denominator-rail { margin:10px 0; }
#sensor-denominator-content .sensor-denominator-scale { font-size:12px; gap:6px; }
#sensor-denominator-content .sensor-denominator-bar { min-height:44px; margin:7px 0; }
#sensor-denominator-content .sensor-denominator-bar > span { font-size:12px; padding:5px; }
.sensor-denominator-table-options { margin-top:12px; }
.sensor-denominator-table-options > summary { cursor:pointer; font-weight:700; }
.sensor-denominator-matrix-options .sensor-denominator-matrix { border:0; margin:0; }
@media(max-width:899px) {
  #sensor-denominator-content .sensor-denominator-layout { grid-template-columns:minmax(0,1fr); }
  #sensor-denominator-content .sensor-denominator-copy { font-size:14px; }
  #sensor-denominator-content .sensor-denominator-controls button { min-height:44px; }
}

/* The current output and guide controls belong to the changing scatter, before
   the longer explanation and the arithmetic. */
#sensor-denominator-content .sensor-denominator-current { margin-top:7px; padding:7px 9px; background:#f3f7fa; border-left:3px solid #235f9e; }
#sensor-denominator-content .sensor-denominator-current h3 { margin:0 0 3px; font-size:14px; line-height:1.35; }
#sensor-denominator-content .sensor-denominator-current .sensor-denominator-formula { margin:0; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
#sensorDenominatorGuide .ra-steps-current { margin:8px 0; font-size:13px; line-height:1.4; }
#sensorDenominatorGuide .ra-steps-nav { margin-top:7px; }
#sensor-denominator-content .reader-guide-scope { margin:0 0 10px; font-size:13px; line-height:1.45; }
@media(max-width:899px), (max-height:700px) {
  #sensor-denominator-content .sensor-denominator-axis { font-size:13px; line-height:1.35; margin:2px 0; }
  #sensor-denominator-content .sensor-denominator-key { margin:5px 0; gap:5px 12px; font-size:12px; }
  #sensor-denominator-content .sensor-denominator-current { margin-top:5px; padding:6px 8px; }
  #sensor-denominator-content .sensor-denominator-controls { margin-bottom:8px; }
}
.sensor-denominator-guide-column { min-width:0; }
.sensor-denominator-guide-column .sensor-denominator-figure-note { margin:8px 0 0; color:#4b596b; font-size:13px; line-height:1.45; }
/* On a short desktop the height budget, rather than the available width, is
   scarce. Put the guide beside a 320px scatter and the longer arithmetic below.
   The renderer uses this actual width as its viewBox, keeping ticks at 12px. */
@media(min-width:900px) and (max-height:700px) {
  #sensor-denominator-content .reader-scene-layout { display:block; }
  #sensor-denominator-content .sensor-denominator-layout { display:block; }
  #sensor-denominator-content .sensor-denominator-layout > figure { display:grid; grid-template-columns:minmax(280px,320px) minmax(0,1fr); gap:0 20px; align-items:start; }
  #sensor-denominator-content .sensor-denominator-layout > figure > :not(.sensor-denominator-guide-column) { grid-column:1; }
  #sensor-denominator-content .sensor-denominator-guide-column { grid-column:2; grid-row:1 / 5; margin:0; }
  #sensor-denominator-content .sensor-denominator-current { margin-top:0; }
  #sensor-denominator-content .sensor-denominator-copy { margin-top:14px; }
}