/* Page layout only — box model / flow. Component looks live in components.css. */
* { box-sizing: border-box; }

/* the `hidden` attribute must win over the display rules set on .connect/.drive/.console below */
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
}

.drive {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: max(var(--gap), env(safe-area-inset-top)) var(--gap)
           max(var(--gap), env(safe-area-inset-bottom));
}

/* the controls take the slack between the state display and the e-stop; multiple sliders sit side by
   side (speed + stroke on a telescopic machine), centred, sharing the vertical run. */
.controls { flex: 1 1 auto; display: flex; justify-content: center; gap: calc(var(--gap) * 1.5); min-height: 0; }
.state-display { flex: 0 0 auto; }
.status { flex: 0 0 auto; }
.estop { flex: 0 0 auto; }

/* owner console: a scrolling column of cards (roster, limits) rather than the guest's fixed viewport.
   container-type lets the body below adapt to the console's own width (future-proof for embedding) — a
   container can't style itself, so the query rules target its .console__body descendant. */
.console {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* no bottom padding: the sticky .ownerbar sits flush to the bottom and owns the safe-area inset */
  padding: max(var(--gap), env(safe-area-inset-top)) var(--gap) 0;
  container-type: inline-size;
}

/* narrow (default): the column wrappers dissolve so all four cards stack in DOM order
   (roster, invite, limits, state) between the full-width status header and STOP bar. */
.console__body { display: flex; flex-direction: column; gap: var(--gap); }
.console__col { display: contents; }

/* wide: two independent columns — roster/invite beside limits/state — each sizing to its own
   content (align-items:start keeps them from stretching to a shared row height). */
@container (min-width: 720px) {
  .console__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
  .console__col { display: flex; flex-direction: column; gap: var(--gap); }
}