/* Button states: one strip (figures/grid.js; round 6, iteration 16,
   2026-10-11; owner: "Make it way simpler, minimal, compact yet still
   make it very clear what is what"). One frame, one row of six cells,
   the button in each state with its name under it; the first is live.
   The names are the lab's (its small type, dim; ink where they point:
   the state the live button shows, the one chosen); the buttons are
   the system's (components/button.css), so nothing here paints a rung.
   Every length a token or whole cells: a cell at least 24 cells (96),
   its button on a band of 12 (48: a control of 32 and 8 above and
   below), its name a line of 5 (20) under it. */
.states-stage {
  min-width: 0;
  margin-top: calc(var(--ds-grid-cell) * 6);
}
/* the frame (iteration 13; owner: "Add frame to button states"): the
   veil of the ink and a hairline, the control's corner, 32 in; two rows
   of three, each cell a third of it; one row of six only where every
   cell has 112 (the frame's 736: a button of 94 and its ring with 16
   between), so no two buttons nearly touch and no ring meets its
   neighbour (the review of iteration 16: at six in 592 they stood 4.8
   apart) */
.strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--ds-space-16);
  box-sizing: border-box;
  min-width: 0;
  overflow-x: auto;
  /* and its pad to the 16 lattice, evenly (lib/lattice.js, iteration 18) */
  padding: calc(var(--ds-grid-cell) * 6 + var(--lattice-t))
    calc(var(--ds-grid-cell) * 8)
    calc(var(--ds-grid-cell) * 6 + var(--lattice-b));
  border-radius: var(--ds-radius-corner);
  background: color-mix(in srgb, var(--ds-color-ink) 3%, transparent);
  box-shadow: inset 0 0 0 var(--rule) var(--ds-color-line);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar {
  display: none;
}
.strip__cell {
  display: grid;
  grid-template-rows: calc(var(--ds-grid-cell) * 12) auto;
  justify-items: center;
  align-items: center;
  min-width: 0;
  padding-inline: var(--ds-space-4);
  border-radius: var(--ds-radius-corner);
}
.strip__spec {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* a name: the lab's small type, dim, a line of 20 under the button; in
   ink where it points (the state the live button shows, the one chosen,
   the live one's own) */
.strip__cap {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-4);
  margin: 0;
  min-width: 0;
  color: var(--ds-color-dim);
  font-size: var(--ds-text-14);
  line-height: calc(var(--ds-grid-cell) * 5);
  white-space: nowrap;
}
/* a name: its own room (4 either side) and the control's corner, so
   the keys' ring stands clear of its letters */
.strip__name {
  padding-inline: var(--ds-space-4);
  border-radius: var(--ds-radius-corner);
  color: inherit;
  font: inherit;
  white-space: nowrap;
}
/* the live one's tag after its name, out of the flow, so the name
   stays centred under its button */
.strip__now {
  position: absolute;
  left: 100%;
  color: var(--ds-color-dim);
  white-space: nowrap;
}
.strip__cell--live .strip__name {
  color: var(--ds-color-ink);
}
.strip__cell[data-live] .strip__name,
.strip__cell[data-chosen] .strip__name {
  color: var(--ds-color-ink);
}
/* the state the live button shows now, and the one chosen: its cell on
   the lifted ground (a veil over the frame's own, on either scheme) */
.strip__cell[data-live],
.strip__cell[data-chosen] {
  background: color-mix(in srgb, var(--ds-color-ink) 5%, transparent);
}
@media (hover: hover) {
  .strip__name:hover {
    color: var(--ds-color-ink);
  }
}
.strip__name:focus-visible {
  outline: none;
}
html[data-kbd] .strip__name:focus-visible {
  box-shadow: inset 0 0 0 var(--rule) var(--ds-color-measure);
}
/* a state that does not apply: a slot of the control's height,
   dashed in the line, saying what it needs in the dim small type */
.strip__none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--control, calc(var(--ds-grid-cell) * 8));
  padding-inline: var(--ds-space-8);
  border-radius: var(--control-corner, var(--ds-radius-corner));
  outline: 1px dashed var(--ds-color-line);
  outline-offset: -1px;
  color: var(--ds-color-text-dim);
  font-size: var(--ds-text-14);
  white-space: nowrap;
}
@container (min-width: 736px) {
  .strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
/* a phone: the live button alone (the frozen states are debug chrome) */
@media (max-width: 767px) {
  /* the one cell across the frame, its button centred in it (the
     visual audit, 2026-10-12: a column of auto held it at the left,
     two thirds of the frame empty) */
  .strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .strip__cell:not(.strip__cell--live) {
    display: none;
  }
}
@media (forced-colors: active) {
  .strip__cell[data-chosen],
  .strip__cell[data-live] {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }
}