/* web/bench.css -- the robot bench: the drawers, the stage and the rail side by side; stacked
   on a phone. Colours and type come from chrome.css and notebook.css (--rule, --muted, --blue,
   --amber, --green, --red, --mono). */
main.bench-page { max-width: none; }
.bench { display: grid; grid-template-columns: 240px minmax(0, 1fr) 340px; gap: 16px; margin-top: 20px; height: calc(100vh - 210px); min-height: 560px; }
.drawers, .rail { overflow-y: auto; border: 1px solid var(--rule); padding: 8px 12px; }
.drawers input[type="search"] { width: 100%; font: inherit; font-size: 13px; padding: 4px 6px; }
.drawer-list details { border-bottom: 1px solid var(--rule); padding: 4px 0; }
.drawer-list summary { cursor: pointer; font-size: 13px; text-transform: capitalize; }
.drawer-list .part { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; margin: 2px 0; padding: 3px 6px; }
.bench .stage { position: relative; margin: 0; height: auto; min-height: 0; }
.bench .stage canvas { width: 100%; height: 100%; display: block; }
.toolbar { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; }
/* The toolbar's buttons in the site's graphite, as the notebooks' (.tb): no fill of their own. */
.toolbar button, .toolbar .file { font: inherit; font-size: 13px; padding: 3px 8px; border: 1px solid #5F5E5A; color: var(--fg); background: var(--bg); cursor: pointer; }
.toolbar button:hover, .toolbar .file:hover { border-color: var(--fg); }
.toolbar button:disabled { color: var(--muted); border-color: var(--rule); cursor: default; }
.toolbar .file input { display: none; }
.stage-note { position: absolute; left: 16px; bottom: 12px; margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.stage-note:empty { display: none; }
.rail section { padding: 12px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; }
.rail section:last-child { border-bottom: 0; }
.rail h2, .drawers h2 { font-size: 13px; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.rail h3 { font-size: 15px; margin: 0; }
.muted { color: var(--muted); margin: 0; }
.mono { font-family: var(--mono); }
.small { font-size: 13px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.starters { flex-wrap: wrap; gap: 6px; }
.row button, .row select, .row input { font: inherit; font-size: 13px; }
.choice { display: grid; gap: 6px; }
.joints { display: grid; gap: 6px; }
.joint { display: grid; grid-template-columns: 90px minmax(0, 1fr) 48px; gap: 8px; align-items: center; }
.joint output { text-align: right; font-family: var(--mono); font-size: 13px; }
.poses { display: flex; flex-wrap: wrap; gap: 6px; }
.pose { display: inline-flex; }
.pose .x { padding: 0 6px; }
.issues { margin: 0; padding-left: 18px; font-size: 13px; }
.issues li { cursor: pointer; }
.issues .failure { color: var(--red); }
.issues .warning { color: var(--amber); }
.ok { color: var(--green); margin: 0; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: 13px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-family: var(--mono); }
#sweepOut { margin: 0; white-space: pre-wrap; }
@media (max-width: 1000px) {
  .bench { grid-template-columns: minmax(0, 1fr); height: auto; }
  .bench .stage { height: 60vh; }
  .drawers, .rail { max-height: 50vh; }
}