/* ---------- readout panel: attitude, boresight, quaternion, telemetry, GPS ---------- */
aside{background:var(--panel); border-left:1px solid var(--line); padding:14px; overflow:auto}
aside h3{margin:2px 0 10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.grp{margin-bottom:16px}
.kv{display:grid; grid-template-columns:1fr auto; gap:3px 10px; font-variant-numeric:tabular-nums}
.kv .lab{color:var(--ink2)}
.kv .val{color:var(--ink); text-align:right; font-family:var(--mono); font-size:13px}
.kv .val.big{font-size:15px}

/* heading / pitch / roll tiles + the filter-state line under them */
.attitude{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px}
.att{background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 4px; text-align:center}
.att .n{font-family:var(--mono); font-size:17px; color:var(--ink)}
.att .u{font-size:10px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-top:2px}
.estline{display:flex; align-items:center; gap:8px; margin:-6px 0 2px}
.badge{font-size:10.5px; font-weight:700; letter-spacing:.05em; padding:2px 9px; border:1px solid currentColor; border-radius:999px; color:var(--muted)}
.est-mob{font-size:11.5px; color:var(--muted); letter-spacing:.04em}

/* quaternion w/x/y/z cells, colour-keyed to the quaternion chart */
.qgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.qcell{background:var(--panel2); border:1px solid var(--line); border-radius:7px; padding:6px 2px; text-align:center}
.qcell .lab{font-size:11px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:4px}
.qcell .lab i{width:8px;height:8px;border-radius:2px; display:inline-block}
.qcell .v{font-family:var(--mono); font-size:13px; margin-top:2px}

@media (max-width:880px){
  aside{border-left:none; border-top:1px solid var(--line); max-height:38vh}
}