/* One light engineering graph; shared by presentation and firmware. */
.pa3-view-controls { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 4px; align-items: center; }
.pa3-control-group { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pa3-control-caption { font-size: .72rem; font-weight: 650; color: #40596d; letter-spacing: .04em; text-transform: uppercase; margin-right: 2px; }
.pa3-view-controls button.small { min-height: 30px; padding: 4px 12px; font-size: .77rem; border-width: 1px; border-radius: 7px; }
.pa3-view-controls button[aria-pressed="true"] { background: #293e51; color: white; border-color: #293e51; }
/* Extra annotation gutters only; the calibrated data rectangle keeps its original height. */
#strain-chart, #chart { height: 364px; border-radius: 8px; border: 1px solid #dce3ea; background: #fbfcfd; }
.pa3-coordinate-note { color: #5b6977; font-size: .74rem; line-height: 1.4; margin-top: 7px; overflow-wrap: anywhere; }
.pa3-coordinate-note p { margin: 3px 0; }
.pa3-limit-key { color: #40596d; font-size: .7rem; }
.pa3-warning { color: #8a5b0d; font-weight: 600; }
.pa3-hover { font-variant-numeric: tabular-nums; color: #244f72; }
.pa3-diagnostics { margin-top: 8px; padding: 8px 0; border-top: 1px solid #e3e8ee; color: #5b6977; font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
.pa3-diagnostics summary { cursor: pointer; color: #40596d; font-weight: 650; }
.pa3-diagnostics p { margin: 5px 0; }
.pa3-diagnostics a { display: inline-block; margin: 4px 0; color: #255f8d; }
.pa3-raw-summary { font-variant-numeric: tabular-nums; }
.pa3-history-controls, .pa3-overlays { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; align-items:center; }
.pa3-history-controls button[data-history="live"][aria-pressed="true"] { background:#17633a; border-color:#17633a; }
.pa3-coordinates { color:#244f72; }
.pa3-history-controls button.small { min-height:32px; padding:5px 10px; font-size:.77rem; border-radius:7px; }
.pa3-history-controls button[aria-pressed="true"] { background:#293e51; color:white; }
.pa3-overlays label { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; padding:4px; }
.pa3-overlays input { accent-color:#6854a2; }
.pa3-overlays label:has(input:disabled) { opacity:.6; }
.pa3-overlays input[data-overlay="reference"] { accent-color:#007e91; }
.pa3-adjustment { color:#007e91; font-weight:650; font-variant-numeric:tabular-nums; }
.pa3-reference-note { color:#007080; }
.pa3-history-status { font-size:.72rem; color:#4a6073; overflow-wrap:anywhere; margin:7px 0; }
.pa3-marker-rails { display:block; width:100%; background:#fbfcfd; border:1px solid #e2e8ee; border-radius:5px; }
.pa3-marker-rails[hidden], .strain-window[hidden], .toggle[hidden] { display:none; }
.band-legend { margin: 8px 0; font-size: .77rem; line-height: 1.45; color: #3b4652; }
.band-head { display: flex; flex-wrap: wrap; gap: 6px; }
.band-tag { display: inline-block; padding: 1px 8px; border-radius: 5px; background: #eef1f4; color: #4b5663; font-weight: 650; }
.band-tag.active { background: #e3f0e9; color: #17633a; }
.band-tag.stale, .band-hint { color: #7a5a00; }
.band-inside { font-weight: 600; }
.band-foot { color: #6a7480; }
.live .readout .counts { font-size: 34px; }
.live .readout .unit { font-size: .8rem; }
#strain-counts { font-size: 25px; }
.feed-delayed { color: #8a5b0d; }
@media (max-width: 560px) {
  #strain-chart, #chart { height: 384px; }
  .live-head { flex-wrap: wrap; }
  .live-head .tag { max-width: 100%; overflow-wrap: anywhere; }
}