/* Instrumented Spaces is a v2 workbench (data-ds-page="tool", compact): v2 draws the frame, the docks and the controls.
   This sizes the panes and keeps the sensor colours, which are data (one per kind of sensor), in one place for the page
   and the viewer. */
:root { --sensor-kinect: #e8870c; --sensor-grideye: #12a37a; --sensor-spider: #2f62d8 }

/* Dense, as a data tool is (TJ, 31 October 2026: "a data analytics tool", not "a banking app"). Past v2's compact: a
   thin frame, rows 20 px, no card padding and no ground between panels, so the picture and the data get the room. */
.ds-topbar { height: 32px; min-height: 32px; padding: 0 var(--ds-space-3) }
.ds-topbar .ds-tools { margin-inline-start: auto }
.ds-statusbar { padding: 2px var(--ds-space-3); font-size: 11px }
.ds-split > [role=separator] { width: 5px }
.side { background: var(--ds-surface) }
.ds-dock-head { padding: 2px var(--ds-space-2) }
.ds-dock-head h2 { font-size: var(--ds-type-ui) }
.ds-dock-body { padding: 0 var(--ds-space-2) var(--ds-space-2) }
.ds-checkbox { min-height: 20px; gap: 6px }
.ds-checkbox input { width: 13px; height: 13px }
.ds-table th, .ds-table td { height: 20px; padding: 0 var(--ds-space-2) 0 0 }

/* The work pane: the 3D view takes what the Data panel leaves. */
.work { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; overflow: hidden }
.work .ds-view { min-height: 0; min-width: 0; position: relative; grid-template-columns: minmax(0, 1fr) }
.work .ds-view-canvas { display: block; width: 100%; height: 100%; min-width: 0; max-width: 100% }  /* its box's size, never its own */
/* Controls float over the picture, as small as they go (TJ: "put the buttons over the canvas"). */
.over { position: absolute; display: flex; align-items: center; gap: 2px; padding: 2px; border: var(--ds-line) solid var(--ds-rule);
  border-radius: var(--ds-radius-act); background: color-mix(in srgb, var(--ds-surface) 86%, transparent); backdrop-filter: blur(4px) }
.over .ds-icon-button { border-color: transparent; background: transparent }
.over .ds-icon-button:hover { background: var(--ds-hover) }
.over .ds-icon-button[aria-pressed="true"] { background: var(--ds-ink); color: var(--ds-on-ink) }
.view-tools { top: var(--ds-space-2); right: var(--ds-space-2) }
.replay { left: var(--ds-space-2); right: var(--ds-space-2); bottom: var(--ds-space-2); gap: var(--ds-space-2); padding-inline-end: var(--ds-space-2) }
.replay input[type=range] { flex: 1; min-width: 0; margin: 0; accent-color: var(--ds-ink) }
.replay output { font-family: var(--ds-font-mono); font-size: var(--ds-type-ui); font-variant-numeric: tabular-nums }
.replay .speed { font: inherit; font-size: var(--ds-type-ui); height: 22px; padding: 0 2px; border: var(--ds-line) solid var(--ds-rule); border-radius: var(--ds-radius-act); background: var(--ds-surface); color: var(--ds-text) }
@media (prefers-reduced-transparency: reduce) { .over { background: var(--ds-surface); backdrop-filter: none } }
.graphs-body { max-height: 40vh; overflow: auto; padding: 0 }                  /* grows with the sensors chosen, then scrolls */
.graphs-body canvas { display: block; width: 100%; touch-action: pan-y }
.graphs-empty { margin: 0; padding: var(--ds-space-3); color: var(--ds-text-2) }

/* Sensors: a swatch of the sensor's colour before its name; what it reads; why one has nothing to graph. */
.sw { display: inline-block; width: var(--ds-space-3); height: var(--ds-space-3); margin-inline-end: var(--ds-space-2); vertical-align: -1px }
.sw.kinect { background: var(--sensor-kinect) }
.sw.grideye { background: var(--sensor-grideye) }
.sw.spider { background: var(--sensor-spider) }
.sensors { width: 100% }
.sensors td, .sensors th { white-space: nowrap }
.sensors .reads { color: var(--ds-text-2) }

/* Start here: the explanation, in the tool's own type, beside the picture it explains (TJ: "this is an explainer too"). */
.explain { font-size: var(--ds-type-ui); line-height: var(--ds-leading-ui) }
.explain :is(p, dd, dt, summary, button) { font-size: inherit; line-height: inherit }
.explain p { margin: 0 0 6px }
.explain h3 { margin: var(--ds-space-2) 0 2px; font-size: var(--ds-type-ui); font-weight: var(--ds-weight-semibold) }
.moments { list-style: none; margin: 0 0 var(--ds-space-2); padding: 0 }
.moments button { display: grid; grid-template-columns: max-content 1fr; gap: var(--ds-space-2); width: 100%; padding: 3px 4px; border: 0;
  border-radius: var(--ds-radius-act); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer }
.moments button:hover { background: var(--ds-hover) }
.moments .t { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums }
.explain details { border-top: var(--ds-line) solid var(--ds-rule); padding: 3px 0 }
.explain summary { cursor: pointer; font-weight: var(--ds-weight-semibold) }
.explain details[open] summary { margin-bottom: 4px }
.explain .read { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--ds-space-2); margin: 0 0 4px }
.explain .read dt { font-weight: var(--ds-weight-semibold); white-space: nowrap }
.explain .read dd { margin: 0 }
.explain .credit { margin: var(--ds-space-2) 0 0; color: var(--ds-text-2) }

/* A phone: the panes stack and the page scrolls (v2); the picture comes first, 4 by 3. */
@media (width <= 639px) {
  .work { order: -1; display: block; overflow: visible }
  .work .ds-view--fill { width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3 }
  .graphs-body { max-height: none }
  footer.ds-statusbar > dl { flex-wrap: wrap; min-width: 0; max-width: 100% }
  /* One line of top bar, with the page's own name kept whole: the crumbs before it give way first. */
  .ds-topbar { flex-wrap: nowrap }
  .ds-topbar .ds-tools { flex: none }
  .ds-topbar .ds-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .ds-topbar .ds-crumb:has(~ .ds-crumb) { flex: 0 100 auto; min-width: 4ch }
}