/* Bellworx global presentation authority.
 * Instrument profiles own physical materials; all DOM views inherit these roles.
 * Production owns font registrations. Workspace CSS owns layout, not new themes.
 */
@import url("/brand/typography.css");
:root {
  --font-geist-sans: Arial;
  --ui-font: var(--bw-website-profile-font-content);
  --ui-display: var(--bw-website-profile-font-display);
  --ui-type-meta: 12px;
  --ui-type-control: 14px;
  --ui-type-value: 24px;
  --ui-type-heading: clamp(24px, 3vw, 42px);
  --ui-inverse: #142021;
  --ui-space-4: 4px;
  --ui-space-8: 8px;
  --ui-space-12: 12px;
  --ui-space-16: 16px;
  --ui-space-24: 24px;
  --ui-space-32: 32px;
  --ui-space-48: 48px;
  --ui-gutter: 4vw;
  --ui-width: none;
  --ui-control-size: 48px;
  --ui-radius: 4px;
  --ui-motion-enter: 180ms;
  --ui-motion-feedback: 120ms;
  --ui-ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-canvas: #10181a;
  --ui-text: #edf0eb;
  --ui-muted: #b0bbb8;
  --ui-line: #edf0eb24;
  --ui-popover: #172324;
  --instrument-min-height: 440px;
}
#bellworx-host {
  --ui-accent: var(--machine-accent);
  --ui-surface: color-mix(in srgb, var(--machine-enamel) 10%, var(--ui-canvas));
  --ui-field: color-mix(in srgb, var(--machine-chassis) 65%, var(--ui-canvas));
  --ui-key-surface: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ui-key) 92%, white),
    var(--ui-key)
  );
  --ui-key-shadow: inset 0 1px #ffffff18, inset 0 -2px #0004, 0 2px 3px #0003;
  --ui-key: color-mix(in srgb, var(--machine-pad) 20%, #263133);
  /* Compatibility with the instrument shell while its geometry stays separate. */
  --paper: var(--ui-text);
  --muted: var(--ui-muted);
  --signal: var(--ui-accent);
  font-family: var(--ui-font);
  font-size: var(--ui-type-control);
  font-synthesis: none;
  color: var(--ui-text);
  background-color: var(--ui-canvas);
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  :root {
    --ui-display: var(--ui-font);
    --ui-type-heading: 24px;
    --ui-type-value: 16px;
    --ui-gutter: 16px;
    --ui-control-size: 44px;
  }
}

/* Common editing controls; workspace layouts may specialize size and placement. */
:where(.tuning-deck, #flat-editor, #files-workspace) h2 {
  font-size: var(--ui-type-control);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
}
:where(.tuning-deck, #flat-editor, #files-workspace) button {
  min-height: var(--ui-control-size);
}
:where(.tuning-deck, #flat-editor, #files-workspace)
  :is(input[type="number"], input[type="text"], input:not([type]), select) {
  min-height: var(--ui-control-size);
  min-width: 0;
  background: var(--ui-field);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: var(--ui-space-8) var(--ui-space-12);
  font-size: var(--ui-type-value);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 3px #0002;
}
:where(.tuning-deck, #flat-editor, #files-workspace) :is(input, select):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
}
:where(.tuning-deck, #flat-editor, #files-workspace) button:disabled {
  opacity: 0.4;
  box-shadow: none;
  transform: none;
}

/* Supporting labels and readouts share the same family and semantic roles. */
.mobile-transport label,
.note-inspector label > span,
#flat-editor .chord > span,
#flat-editor .lane-label small,
#flat-editor .step-label,
#flat-editor .subtle {
  font-family: var(--ui-font);
  font-size: var(--ui-type-meta);
  color: var(--ui-muted);
}
.mobile-transport > button,
.tempo-nudge button {
  font-weight: 500;
}
.tempo-nudge button {
  font-family: var(--ui-font);
  font-size: var(--ui-type-value);
  color: var(--ui-muted);
}
#mobile-tempo,
#flat-editor .control-strip select,
#flat-editor .pad,
#flat-editor .chord select {
  font-family: var(--ui-font);
  font-variant-numeric: tabular-nums;
}
#mobile-lanes button {
  font-family: var(--ui-font);
  font-size: var(--ui-type-meta);
  color: var(--ui-muted);
}
#mobile-lanes button[aria-pressed="true"] {
  color: var(--ui-inverse);
}

/* A field's unit belongs to its caption, never a detached row between controls. */
.note-inspector .field-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-8);
  margin: 0;
  line-height: normal;
  letter-spacing: 0;
}
.field-caption small {
  font: inherit;
  color: var(--ui-muted);
}