/* Spacing, alignment and decluttering.
   Shared chrome and channel spacing. Device faces and Clip View own their internal layout.

   Two jobs:
   1. One spacing and alignment system for every icon and every piece of text,
      so rows line up optically instead of by coincidence.
   2. Remove from the columns and containers what is not needed all the time.
      Everything hidden here stays reachable through .studio.dense-mixer or
      .studio.detailed-panels, so nothing is deleted. */

:root {
  /* One box for every glyph, so icons and labels share a baseline rhythm. */
  --icon-box: 18px;
  --icon-box-sm: 17px;
  --row-gap: 3px;
  --text-line: 13px;

  /* Chrome heights. A small named set instead of a different pixel value per
     bar, so the topbar, transport and toolbars share one vertical rhythm. */
  --chrome-topbar: 20px;
  --chrome-transport: 24px;
  --chrome-toolbar: 24px;
  --chrome-status: 22px;

  /* Text inside a control is optically centred, not mathematically centred:
     this is the usual correction for the overshoot of round shapes. */
  --icon-optical: 0.5px;
}

/* ----------------------------------------------------------- chrome rhythm */
/* Buttons, selects and inputs inside a bar share one height and centre their
   content, so nothing sits half a pixel off the row. */
body .studio .topbar > *,
body .studio .transport-left > *,
body .studio .transport-main > *,
body .studio .transport-right > *,
body .studio .session-toolbar > *,
body .studio .statusbar > * {
  align-self: center;
}

body .studio .topbar button,
body .studio .topbar select,
body .studio .transport button,
body .studio .transport select,
body .studio .transport input,
body .studio .statusbar button,
body .studio .statusbar select {
  min-height: var(--icon-box-sm);
}

/* ------------------------------------------------------------------ icons */
/* Every icon control is a square with the glyph centred on both axes. */
body .studio .icon-button,
body .studio .view-tab,
body .studio .play-button,
body .studio .stop-button,
body .studio .record-button,
body .studio .transport-text,
body .studio .plain-button,
body .studio .track-buttons button,
body .studio .timeline-track-compact button,
body .studio .track-record-arm {
  display: grid;
  place-items: center;
  line-height: 1;
  box-sizing: border-box;
}

/* Inline SVG glyphs get a fixed box so a 16-wide path and a 20-wide path do
   not render at different sizes. */
body .studio .icon-button svg,
body .studio .view-tab svg,
body .studio .transport-text svg {
  width: var(--icon-box-sm);
  height: var(--icon-box-sm);
  display: block;
  flex: none;
}

/* Text glyph buttons need a little extra room than bare symbols. */
body .studio .transport-text,
body .studio .plain-button {
  line-height: var(--text-line);
}

/* ------------------------------------------------------------------- text */
/* Labels and values share one line box so rows of text sit on one rhythm. */
body .studio .track-head,
body .studio .track-title,
body .studio .scene-head,
body .studio .master-caption,
body .studio .device-head strong,
body .studio .mixer-label,
body .studio .pan-row,
body .studio .routing,
body .studio .sends,
body .studio .db-value,
body .studio .timeline-track-name,
body .studio .timeline-label,
body .studio .statusbar,
body .studio .tempo-field,
body .studio .position,
body .studio .loop-controls label {
  line-height: var(--text-line);
}

/* Numeric readouts are tabular and centred in the same slot every time. */
body .studio .db-value,
body .studio .pan-row > span:last-child,
body .studio .routing-value {
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Track titles truncate instead of pushing the column wider. */
body .studio .track-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline: 0;
}

/* ----------------------------------------------------------- column stack */
/* One gap between every block of a channel column: routing, sends, mixer,
   pan and the button row. */
body .studio .session-mixer,
body .studio .mixer {
  gap: var(--row-gap);
}

body .studio .mixer {
  padding: 3px 4px;
}

body .studio .track-buttons,
body .studio .sends {
  gap: var(--row-gap);
}

body .studio .track-buttons {
  height: var(--icon-box-sm);
  min-height: var(--icon-box-sm);
}

body .studio .track-buttons button {
  height: 100%;
  min-width: 0;
  padding: 0;
}

/* The dB readout sits in the gap reserved above the fader; keep it centred. */
body .studio .volume-row {
  justify-content: center;
  gap: 0;
}

body .studio .pan-row {
  justify-content: center;
  gap: var(--row-gap);
}

/* The device picker replaces a wall of one button per effect. It keeps the
   same data-device-add-select contract so the panel stays the single place
   that knows how to add a device. */
body .studio .device-picker {
  display: flex;
  align-items: center;
  gap: var(--row-gap);
  min-width: 0;
}

body .studio .device-picker-label {
  color: var(--live-muted);
  line-height: var(--text-line);
  white-space: nowrap;
}

body .studio .device-picker select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  line-height: var(--text-line);
}

/* --------------------------------------------------------------- the top */
/* The header carries no information beyond the project name and the menu.
   The "STUDIO" caption and the save status duplicate the brand and the save
   button, so they go, and the bar stays a single row with no columns. */
body .studio .brand-sub,
body .studio #save-status,
body .studio .project-dot {
  display: none;
}

body .studio .topbar {
  gap: var(--fluid-gap);
  padding-inline: var(--fluid-pad);
}

body .studio .project-heading {
  flex: 1 1 auto;
  min-width: 0;
}

/* The project name is the only thing the header says, so let it breathe. */
body .studio #project-name {
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
}

/* Menu items are grouped so the eye finds the action it wants instead of
   scanning six unlabelled cells. */
body .studio .project-actions {
  gap: 2px var(--row-gap);
  padding: 3px;
}

body .studio .project-actions > * {
  margin-block: 0;
}

body .studio .project-actions > .plain-button,
body .studio .project-actions > select,
body .studio .project-actions > .save-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Save is the only primary action in the menu. */
body .studio #save-project {
  margin-top: 3px;
}

/* ------------------------------------------------------------- declutter */
/* Repeated captions may collapse; routing and sends remain visible like the
   native Session mixer. The detail preference restores the optional captions. */
body .studio .track-column .mixer-label,
body .studio .pan-row > span:first-child {
  display: none;
}

body.studio-dense .studio .track-column .routing,
body.studio-dense .studio .track-column .sends,
body.studio-dense .studio .track-column .mixer-label,
body.studio-dense .studio .pan-row > span:first-child {
  display: flex;
}

body.studio-dense .studio .track-column .mixer-label {
  display: block;
}

body.studio-dense .studio .track-column .sends {
  display: grid;
}

/* The dB readout sits in the gap the volume row reserves above the fader.
   Centring it with auto margins instead of a fixed width plus a translate
   keeps it aligned whatever the text length is. */
body .studio .db-value {
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  min-width: 4ch;
  max-width: 100%;
  transform: none;
  text-align: center;
}

/* The pan value keeps its slot when the word PAN is hidden, so the row does
   not jump when the density changes. */
body .studio .pan-row > span:last-child {
  display: inline-block;
  min-width: 3ch;
}

/* Permanently disabled transport affordances. Both buttons are disabled with a
   tooltip explaining they are not implemented, so they are pure noise in the
   most crowded strip of the interface. */
body .studio .transport-unavailable {
  display: none;
}

/* The routing block is gone, so its static divider goes with it. The column
   keeps the padding and the height the theme layer defined. */
body .studio .track-column .mixer-label {
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  body .studio .track-buttons,
  body .studio .icon-button,
  body .studio .view-tab {
    transition: none;
  }
}

/* Decorative glyphs share a baseline; category labels remain real text. */
body .studio .live-icon { display:block; flex:none; width:14px; height:14px; }
body .studio .browser-categories button { display:flex; align-items:center; gap:5px; text-align:left; }
body .studio .browser-categories button > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body .studio .sound-icon { display:inline-flex; align-items:center; justify-content:center; flex:none; width:13px; }
body .studio .sound-icon .live-icon { width:12px; height:12px; }
body .studio .search-icon { display:flex; align-items:center; justify-content:center; }
body .studio .search-icon .live-icon { width:11px; height:11px; }
body .studio .transport :is(.play-button,.stop-button,.record-button) .live-icon { width:16px; height:16px; }
body .studio .timeline-track-fold .live-icon { width:11px; height:11px; }
body .studio .timeline-ruler .timeline-label { justify-content:flex-start; padding:1px 4px; }
body .studio .timeline-loop-row .timeline-label { padding:0; }
body .studio .clip-cell.empty > .slot-stop { display:block; width:5px; height:5px; background:var(--live-muted); opacity:.6; border-radius:50%; margin:2px 0 0 3px; }
body .studio .clip-cell.empty { display:flex; align-items:center; justify-content:flex-start; border-color:transparent; background:var(--live-surface); }
body .studio .clip-cell.empty.selected { background:var(--live-selection); }
body .studio .session-mixer .routing { font-size:9px; gap:1px; padding-bottom:3px; border-bottom:0; }
body .studio .session-mixer .routing-value { background:var(--live-field); border:1px solid var(--live-frame); line-height:12px; }
body .studio .session-mixer .sends { gap:2px 4px; }