/* Hornet-specific panels on top of the shared HUD: the pitch/roll/yaw panel
   takes the bottom-left slot the camber diagram uses in Sim 01. */
#axes { left: 20px; bottom: 20px; width: 400px; padding: 14px 16px 12px; }
.axis { margin-bottom: 10px; }
.axis-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.axis-head b { font-weight: 600; }
.axis-head span { font: 500 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.axis-head output { margin-left: auto; font: 500 12px var(--mono); color: var(--cyan); font-variant-numeric: tabular-nums; }
.axis-bar { position: relative; height: 20px; margin-top: 4px; border-radius: 4px; background: rgba(150, 190, 255, 0.08); overflow: hidden; }
.axis-bar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.axis-bar i { position: absolute; top: 4px; bottom: 4px; left: 50%; width: 0; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 10px rgba(95, 225, 255, 0.6); transition: left 0.12s linear, width 0.12s linear; }
.axis-bar em { position: absolute; top: 3px; font: 500 9.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); font-style: normal; }
.axis-bar em:first-of-type { left: 8px; } .axis-bar em:last-of-type { right: 8px; }
#axes .calc { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }

.sw.stab { background: #5fe1ff; } .sw.rudder { background: #ff9f5a; }
.note { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.note b { color: var(--cyan); font-family: var(--mono); font-weight: 500; }
.note small { color: var(--dim); }
.tog.wide { flex-direction: row; justify-content: center; width: 100%; font-size: 10.5px; padding: 8px; gap: 8px; }
.toggles.three { grid-template-columns: repeat(3, 1fr); }
.seg button[data-view] { font-size: 10px; }

@media (max-width: 1280px) { #axes { width: 340px; } }
@media (max-width: 900px) { #axes { order: 3; } }