.sensor-workbench { margin: 1rem 0; }
.sensor-workbench > *, .sensor-control { min-width: 0; }
.sensor-results { margin-top: 1rem; }
.sensor-control { margin: .8rem 0; }
.sensor-control input[type=number] { width: 7rem; max-width: 100%; }
.calibration-points { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.calibration-points fieldset { min-width: 0; padding: .7rem; border: 1px solid #c8d8e2; border-radius: 8px; background: white; }
.calibration-points legend { float: none; width: auto; margin: 0; padding: 0 .25rem; font-size: 1rem; font-weight: 700; color: #17649a; }
.calibration-points label { font-size: .85rem; margin: .6rem 0 .3rem; }
.calibration-points input { width: 100%; }
.sensor-results .demo-stats { margin: 1rem 0 .5rem; }
.teaching-demo .sensor-plot { margin: .7rem 0; }
.teaching-demo .sensor-plot text { font: 18px system-ui, sans-serif; fill: #415969; }
.sensor-plot .sensor-axis-title { font-size: 20px; }
.sensor-plot .sensor-point-label { fill: #18374b; font-weight: 700; }
.calibration-fit { fill: none; stroke: #17649a; stroke-width: 3; }
.calibration-extension { stroke: #708797; stroke-width: 2; stroke-dasharray: 7 5; fill: none; }
.calibration-reference { fill: #17649a; stroke: white; stroke-width: 2; }
.calibration-current { fill: #ac5007; stroke: white; stroke-width: 2; }
.sensor-status { border-left: 4px solid #17649a; background: #eaf2f8; padding: .65rem .85rem; font-size: .9rem; }
.sensor-status[data-state=outside], .sensor-status[data-state=invalid] { background: #fff2df; border-color: #a9580a; }
.sensor-control input[aria-invalid=true], .calibration-points input[aria-invalid=true] { outline: 2px solid #a9580a; }
.sensor-rule { font-size: .9rem; padding: .65rem .85rem; background: #eaf2f8; border-radius: 6px; }
.fan-card { border: 1px solid #c8d8e2; border-radius: 8px; padding: .7rem; background: #fff; }
.fan-card[data-state=on] { background: #e4f3eb; border-color: #6ba48c; }
.fan-card p { margin: 0 0 .2rem; font-size: .9rem; }
.fan-card strong { display: block; font-size: 1.6rem; }
.fan-card[data-state=on] strong { color: #076347; }
.fan-card span { display: block; font-size: .85rem; }
.fan-between { fill: #e5efe8; }
.fan-setting { stroke: #8b5819; stroke-dasharray: 6 4; stroke-width: 1.5; }
.fan-reading { stroke: #17649a; stroke-width: 3; fill: none; }
.fan-track { fill: #f0f3f5; stroke: #bdcbd5; }
.fan-on { fill: #18765b; }
.teaching-demo[data-demo=calibration]:fullscreen, .teaching-demo[data-demo=fan-control]:fullscreen { display: block; padding: 1.25rem 2rem; }
@media (min-width: 900px) {
  .teaching-demo:fullscreen .sensor-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.5rem; align-items: start; }
  .teaching-demo:fullscreen .sensor-results .demo-stats { margin: 0 0 .5rem; }
  .teaching-demo:fullscreen .sensor-results { margin-top: 0; }
  .teaching-demo:fullscreen .sensor-control { margin: .35rem 0; }
  .teaching-demo:fullscreen .sensor-control label { display: inline-block; max-width: calc(100% - 7.5rem); padding-top: .5rem; }
  .teaching-demo:fullscreen .sensor-control input[type=number] { float: right; }
  .teaching-demo:fullscreen .sensor-control input[type=range] { clear: both; min-height: 1.65rem; margin-top: 0; }
  .teaching-demo:fullscreen .sensor-plot { margin: .5rem 0; }
  .teaching-demo:fullscreen .sensor-plot svg { max-height: 340px; }
  .teaching-demo:fullscreen .sensor-plot text { font-size: 20px; }
}
@media (max-width: 520px) {
  .teaching-demo[data-demo=calibration], .teaching-demo[data-demo=fan-control] { padding: .8rem; }
  .calibration-points { gap: .5rem; }
  .calibration-points fieldset { padding: .5rem; }
  .calibration-points label { min-height: 2.5em; }
  .sensor-results .demo-stats { grid-template-columns: 1fr; }
  .sensor-results .demo-stats > div { display: flex; gap: .5rem; align-items: center; justify-content: space-between; }
  .sensor-results .demo-stats dd { margin: 0; }
  .teaching-demo .sensor-plot text { font-size: 24px; }
  .teaching-demo .sensor-plot .sensor-axis-title { font-size: 25px; }
  .teaching-demo[data-demo=calibration] .demo-footer, .teaching-demo[data-demo=fan-control] .demo-footer { flex-wrap: wrap; }
  .fan-card { padding: .5rem; }
}
@media print { .sensor-inputs { display: none; } }