/* lab: the flow panel as a cockpit screen */
.hud { width: min(27rem, 100%); padding: 1.15rem 1.2rem 1.1rem; border-radius: 18px; background: rgba(6, 9, 14, 0.78); box-shadow: inset 0 0 0 1px rgba(92, 242, 196, 0.16), 0 30px 80px -40px rgba(0, 0, 0, 0.9); }
.hud::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px); }
.hud { position: relative; }
.hud-top { display: flex; justify-content: space-between; align-items: center; font: 500 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hud-top b { color: var(--accent); font-weight: 500; }
.hud-live { display: inline-flex; align-items: center; gap: 0.4rem; }
.hud-live i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); animation: blink 1.4s var(--soft) infinite; }
.hud .flow-title { margin-top: 0.7rem; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); }
.hud .seg { margin-top: 0.8rem; }
.hud-map { display: block; width: 100%; height: auto; margin-top: 0.8rem; border-radius: 10px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px var(--line); }
#hud-route { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; stroke-dasharray: 3 4; }
#hud-done { fill: none; stroke: var(--accent); stroke-width: 2; }
#hud-gates circle { fill: #0b0f16; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.2; transition: stroke 0.4s, fill 0.4s; }
#hud-gates circle.on { stroke: var(--accent); fill: rgba(92, 242, 196, 0.25); }
#hud-gates circle.fail { stroke: var(--danger); fill: rgba(255, 90, 60, 0.3); }
#hud-dot { fill: var(--accent); }
.hud.refused #hud-dot { fill: var(--danger); }
.hud .steps { margin-top: 0.7rem; gap: 3px; }
.hud .steps li { grid-template-columns: 5.4rem 1fr auto; align-items: center; padding: 0.5rem 0.7rem; border-radius: 9px; opacity: 0.5; }
.hud .steps b { font-size: 0.875rem; }
.hud .steps span { font-size: 0.75rem; }
.hud .steps em { font: 500 0.66rem var(--mono); letter-spacing: 0.08em; font-style: normal; padding: 0.15rem 0.45rem; border-radius: 5px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.hud .steps em::after { content: "STANDBY"; }
.hud .steps li.checking { opacity: 1; background: rgba(240, 178, 50, 0.07); }
.hud .steps li.checking em { color: #f0b232; box-shadow: inset 0 0 0 1px rgba(240, 178, 50, 0.45); animation: blink 0.9s steps(2) infinite; }
.hud .steps li.checking em::after { content: "CHECKING"; }
.hud .steps li.on em { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(92, 242, 196, 0.45); animation: none; }
.hud .steps li.on em::after { content: "PASS"; }
.hud .steps li.fail em { color: var(--danger); box-shadow: inset 0 0 0 1px rgba(255, 90, 60, 0.5); animation: none; }
.hud .steps li.fail em::after { content: "FAIL"; }
.hud .steps li.dead em::after { content: "—"; }
.hud-tele { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.7rem; }
.hud-tele div { padding: 0.45rem 0.6rem; border-radius: 9px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px var(--line); }
.hud-tele small { display: block; font: 500 0.62rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hud-tele b { display: block; margin-top: 0.1rem; font: 500 0.95rem var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.hud .codeline-panel { margin-top: 0.7rem; }
.hud .flow-note { margin-top: 0.6rem; }
@media (max-height: 820px) { .hud .steps span { display: none; } .hud .steps li { grid-template-columns: 1fr auto; } }
@media (max-width: 900px) {
  .hud { padding: 0.9rem; }
  .hud .flow-title, .hud-tele, .hud .codeline-panel { display: none; }
  .hud .steps span { display: none; }
  .hud .steps li { grid-template-columns: 1fr auto; padding: 0.4rem 0.6rem; }
}