/* playground.css — locomotion sandbox only. Shared chrome is in console.css. */

#topbar { justify-content: space-between; }

/* ── side panels ─────────────────────────────────────────── */

#left-panel, #right-panel {
  position: fixed;
  top: calc(var(--bar-h) + 10px);
  z-index: 15;
  display: flex; flex-direction: column; gap: var(--gap);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), opacity .2s;
}
#left-panel {
  left: 12px; width: 268px;
  max-height: calc(100vh - var(--bar-h) - var(--foot-h) - 22px);
}
#right-panel { right: 12px; width: 250px; }

#left-panel.collapsed { transform: translateX(calc(-100% - 16px)); opacity: 0; pointer-events: none; }
#right-panel.collapsed { transform: translateX(calc(100% + 16px)); opacity: 0; pointer-events: none; }

.row > label { width: 56px; }
.row .val { width: 40px; }

/* ── key list ────────────────────────────────────────────── */

.keys { gap: 5px; font-size: 12px; color: var(--text-3); }
.keys div { display: flex; align-items: baseline; gap: 8px; }
.keys b {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--text); flex-shrink: 0;
  min-width: 62px;
}

/* ── servo and contact tables ────────────────────────────── */

#servo-table, #contact-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 11px;
}
#servo-table th {
  font-family: var(--ui); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3); text-align: right;
  padding: 0 4px 7px;
}
#servo-table td, #contact-table td {
  text-align: right;
  padding: 3px 4px;
  color: var(--text-2);
}
#servo-table td.lg, #contact-table td.lg {
  font-family: var(--ui); font-size: 11.5px;
  text-align: left; color: var(--text-2);
}
#servo-table tbody tr, #contact-table tbody tr {
  border-top: 1px solid var(--line);
  border-left: 2px solid transparent;
}

/* Joint utilisation and per-leg state. Written as classes rather than inline
   styles so the telemetry tick only touches classList. */
#servo-table td.near { color: var(--warn); }
#servo-table td.limit { color: var(--err); }
#servo-table tr.danger { background: rgba(235, 95, 99, 0.14); border-left-color: var(--err); }
#servo-table tr.walled { background: rgba(227, 166, 60, 0.12); border-left-color: var(--warn); }
#servo-table tr.assist { background: rgba(76, 141, 255, 0.12); border-left-color: var(--accent); }
#servo-table tr.danger td.lg { color: var(--err); }
#servo-table tr.walled td.lg { color: var(--warn); }
#servo-table tr.assist td.lg { color: var(--accent-hi); }

.contact-panel { margin-top: 12px; }
#contact-table td.state { color: var(--ok); }
#contact-table td.state.off { color: var(--err); }
#contact-table td.state.stranded { color: var(--accent-hi); }

/* ── status bar ──────────────────────────────────────────── */

#statusbar .t-cell { min-width: 82px; }

/* ── narrow viewports ────────────────────────────────────── */

@media (max-width: 1040px) {
  /* below this the panels would meet over the robot, so the telemetry moves to
     the bottom corner instead of being dropped */
  #right-panel {
    top: auto;
    bottom: calc(var(--foot-h) + 10px);
    width: 214px;
  }
  #right-panel .panel-body { max-height: 42vh; overflow-y: auto; }
}

@media (max-width: 720px) {
  .brand-sub { display: none; }
  #topbar { gap: 10px; padding: 0 10px; }
  #left-panel { width: min(268px, 88vw); left: 8px; }
  #right-panel { right: 8px; width: min(214px, 46vw); }
}