/* =========================================================
   Component · stage card — the framed panel around the robot arm in the hero, with its status pill, readout grid and hint.
   ========================================================= */

/* ---------- Robot arm stage ---------- */
.stage {
  position: relative;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 28px;
  box-shadow: 0 40px 80px -48px rgba(46, 49, 146, .35);
}
.stage__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 12px;
  font-size: 11.5px; letter-spacing: .1em; color: var(--muted);
}
.stage__view {
  border-radius: 18px;
  background-color: #FAFBFD;
  background-image: radial-gradient(rgba(46, 49, 146, .13) 1px, transparent 1.3px);
  background-size: 20px 20px;
  background-position: 10px 10px;
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--edge);
  font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--text);
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--go); }
.pill b { font-weight: 500; }
.pill[data-mode="boot"] i { background: #E5A800; animation: blink .5s steps(1) infinite; }
.pill[data-mode="manual"] i { background: var(--accent); }
.pill[data-mode="idle"] i { background: var(--muted); }

.stage__hud {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px; margin-top: 12px;
  background: var(--edge); border: 1px solid var(--edge); border-radius: 14px; overflow: hidden;
}
.stage__hud div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--bg); }
.stage__hud span { font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.stage__hud b { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage__hint {
  margin-top: 12px; text-align: center;
  font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  transition: opacity .3s;
}
.stage.is-manual .stage__hint { opacity: 0; }

@media (max-width: 480px) {
  .stage { padding: 12px; border-radius: 22px; }
  .stage__hud div { padding: 8px 6px; }
  .stage__hud b { font-size: 10.5px; }
}