/* Chordwise Design System — shared visual tokens and reusable setup primitives.
   Loaded last to prevent ad-hoc overrides from changing component geometry. */
:root {
  --cw-walnut: #805239;
  --cw-walnut-dark: #392519;
  --cw-parchment: #fff8ea;
  --cw-gold-border: #d5bea0;
  --cw-radius-card: 12px;
  --cw-radius-control: 8px;
  --cw-space-1: 4px;
  --cw-space-2: 8px;
  --cw-space-3: 12px;
  --cw-space-4: 16px;
  --cw-space-6: 24px;
  --cw-step-size: 40px;
}
/* Reusable numbered-step component, identical for steps 1–4. */
#setup.triad-setup-active .triad-step-number {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--cw-step-size);
  width: var(--cw-step-size);
  height: var(--cw-step-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cw-walnut);
  color: #fff4e1;
  font: 700 20px/1 Arial, sans-serif;
  text-align: center;
  vertical-align: middle;
}
#setup.triad-setup-active .triad-step h2,
#setup.triad-setup-active .triad-root-row label {
  display: flex;
  align-items: center;
  gap: var(--cw-space-3);
}
#setup.triad-setup-active .triad-card {
  box-sizing: border-box;
  border-radius: var(--cw-radius-card);
}
#setup.triad-setup-active .triad-root-row select {
  box-sizing: border-box;
  border-radius: var(--cw-radius-control);
  border-color: var(--cw-gold-border);
  background: var(--cw-parchment);
}
#setup.triad-setup-active .triad-bottom-row #start {
  box-sizing: border-box;
  border-radius: var(--cw-radius-control);
}

/* Prevent label/heading line-height and font metrics from shifting the numeral. */
#setup.triad-setup-active .triad-step-number {
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  transform: none;
}