/* Responsive layer. Loaded after live-theme.css.
   Scope is deliberately conservative: it only fixes overflow and window
   overflow, and never changes the arrangement of existing rows, columns or
   chains. Height, chrome wrapping and ruler borders are left exactly as the
   Ableton-faithful layout defines them. */

:root {
  /* Windows only. These cap panels that used fixed pixel widths and could
     otherwise run past the space available to them. */
  --win-device: clamp(210px, 26vw, 430px);
  --win-device-expanded: clamp(260px, 52vw, 760px);
  --win-mapping: clamp(196px, 24vw, 420px);
  --win-settings: clamp(260px, 42vw, 530px);
  --win-menu: clamp(150px, 17vw, 244px);
  --win-browser-col: clamp(74px, 7.4vw, 125px);

  /* The ruler clips its own overflow, so the end labels need a small inset.
     They are absolutely positioned against the scale's padding box, which is
     why the scale itself must keep zero padding. */
  --ruler-edge-inset: clamp(2px, .3vw, 5px);
}

/* ---------------------------------------------------------------- overflow */
/* A flex or grid child defaults to min-width/height:auto, so one wide clip,
   a long device name or a big EQ graph can stop the shell from shrinking.
   This only relaxes the automatic minimum; it sets no width or height. */
body .studio .workspace,
body .studio .main-panel,
body .studio .browser-panel,
body .studio .detail-area,
body .studio .device-panel,
body .studio .session-view,
body .studio .session-tracks,
body .studio .session-scroll,
body .studio .session-grid,
body .studio .track-column,
body .studio .scene-column,
body .studio .return-column,
body .studio .clip-launch,
body .studio .session-mixer,
body .studio .session-returns,
body .studio .mixer,
body .studio .arrangement-view,
body .studio .arrangement-scroll,
body .studio .timeline-scale,
body .studio .timeline-lane,
body .studio .timeline-main-space,
body .studio .timeline-label,
body .studio .timeline-track-name,
body .studio .timeline-track-routing,
body .studio .timeline-track-index,
body .studio .timeline-bottom-mixer,
body .studio .master-column,
body .studio .device-card,
body .studio .editor-content,
body .studio .editor-top,
body .studio .editor-bottom,
body .studio .transport,
body .studio .transport-left,
body .studio .transport-main,
body .studio .transport-right,
body .studio .topbar,
body .studio .project-actions,
body .studio .statusbar,
body .studio .browser-columns,
body .studio .library-content-filters,
body .studio .mapping-panel,
body .studio .settings-layout,
body .studio .audio-settings,
body .studio .midi-editor,
body .studio .midi-note-body,
body .studio .eq-eight-body,
body .studio .project-menu {
  min-width: 0;
  min-height: 0;
}

/* Keep the theme's full-height timeline: its flexible drop area pushes the
   Returns and time ruler to the bottom of the available scroll viewport. */
body .studio .arrangement-grid { min-width: 0; }
/* Fill available Session width before the spacer distributes spare room. */
body .studio .session-grid { min-width: 100%; }

/* Labels ellipsize instead of stretching their row. */
body .studio .track-title,
body .studio .timeline-track-name,
body .studio .device-head strong,
body .studio .master-caption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- windows */
/* Capped panels keep their original sizing and only gain a ceiling, so they
   can no longer overflow the viewport. */
body .studio .eq-eight-card {
  max-width: 100%;
}

body .studio .eq-eight-card.eq-expanded {
  max-width: 100%;
}

body .studio .mapping-panel {
  max-width: min(100%, 500px);
}

body .audio-settings {
  max-width: calc(100vw - 2 * var(--gutter));
}

body .studio .project-menu {
  max-width: calc(100vw - 2 * var(--gutter));
}

body .context-menu,
body .studio .clipboard-menu {
  max-width: calc(100vw - 2 * var(--gutter));
}

/* ---------------------------------------------------------- ruler extremes */
/* Only the end labels move; their ticks stay at the musical coordinate.
   Edge labels omit their own stroke so translating text cannot shift a grid line.
   No ruler container border, margin or padding is touched, so
   the ruler keeps its exact height and stays aligned with the lane grid. */
body .studio .timeline-scale {
  padding-inline: 0;
  margin-inline: 0;
}

body .studio .timeline-ruler-edge-start {
  border-left: 0;
  transform: translateX(var(--ruler-edge-inset));
}

body .studio .timeline-ruler-edge-end {
  border-left: 0;
  transform: translateX(calc(-100% - var(--ruler-edge-inset)));
}

/* --------------------------------------------------------------- narrow */
/* Below the phone breakpoint the arrangement columns fall back to the widths
   live-theme.css already defines, so the grid never overflows sideways. */
@media (max-width: 760px) {
  body .studio .audio-settings,
  body .studio .project-menu,
  body .studio .mapping-panel {
    max-width: calc(100vw - 2 * var(--gutter));
  }
  body .studio .browser-columns {
    grid-template-columns: var(--win-browser-col) minmax(0, 1fr);
  }
}
/* Match icon boxes across the transport without changing text-button widths. */
body .studio .transport :is(.icon-button, .view-tab, .transport-text, .play-button, .stop-button, .record-button, .back-arrangement),
body .studio .transport select,
body .studio .transport .tempo-field,
body .studio .transport .time-signature {
  height: 18px;
  min-height: 18px;
  box-sizing: border-box;
}
body .studio .transport .icon-button,
body .studio .transport .view-tab {
  width: 18px;
  min-width: 18px;
}
body .studio .transport .icon-button svg,
body .studio .transport .view-tab svg,
body .studio .transport .keyboard-icon svg {
  width: 12px;
  height: 12px;
}

/* Each row uses the same four parameter columns, including partial rows. */
body .studio .device-knobs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 auto;
  min-height: 58px;
  align-items: start;
  padding: 5px 5px 4px;
  gap: 4px;
}
body .studio .channel-eq-card .device-knobs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body .studio .device-knobs > label {
  width: 100%;
  text-align: center;
  justify-self: center;
  font-size: 9px;
  line-height: 11px;
  gap: 2px;
  overflow: hidden;
}
body .studio .device-knobs > label > span:not(.knob-control),
body .studio .device-knobs output,
body .studio .device-knobs select {
  max-width: 100%;
  min-width: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
body .studio .timeline-label [data-mixer-number],
body .studio .timeline-label button,
body .studio .timeline-return-controls select {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
body .studio .timeline-loop-brace.enabled {
  background: transparent;
  border-color: var(--live-ruler);
}

/* Device rows keep their geometry when a readout becomes an editable value. */
body .studio .device-knobs .device-value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 15px;
  min-height: 15px;
  gap: 1px;
  overflow: visible;
  font-size: 9px;
  line-height: 13px;
  font-variant-numeric: tabular-nums;
}
body .studio .device-value .device-value-editor {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: var(--device-readout-width,3ch);
  min-width: 0;
  max-width: 100%;
  height: 15px;
  margin: 0;
  padding: 0 1px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--live-text);
  font: inherit;
  text-align: right;
}
body .studio .device-value-editor:hover,
body .studio .device-value-editor:focus {
  border-color: var(--live-frame);
  background: var(--live-field);
}
body .studio .device-value-editor:focus { flex:1 1 0; width:0; }
body .studio .device-value-editor:focus-visible {
  outline: 1px solid var(--live-selection);
  outline-offset: 0;
}
body .studio .device-value-unit {
  flex: 0 0 auto;
  color: var(--live-muted);
  white-space: nowrap;
}
body .studio .device-enum select {
  width: 100%;
  height: 23px;
  padding: 0 1px;
  font-size: 9px;
  border: 1px solid var(--live-frame);
  background: var(--live-field);
  color: var(--live-text);
}
/* Longer catalogues scroll within their card instead of shrinking the rows. */
body .studio .device-card:has(> .device-knobs) {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
body .studio .device-card:has(> .device-knobs) > .device-head {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* A second transport row keeps every primary control reachable on small screens. */
@media (max-width: 600px) {
  body .studio .transport {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 24px 24px;
    height: 50px;
    min-height: 50px;
    gap: 0 4px;
  }
  body .studio .transport-left {
    grid-column: 1;
    grid-row: 1;
  }
  body .studio .transport-right {
    grid-column: 2;
    grid-row: 1;
  }
  body .studio .transport-main {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
    justify-self: center;
  }
  body .studio .browser-panel,
  body .studio .mapping-panel {
    top: 77px;
  }
}

/* Desktop uses three measured groups; narrower windows keep both strips reachable. */
@media (min-width: 601px) and (max-width: 1100px) {
  body .studio .transport {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: 22px 22px;
    height: 46px; min-height:46px; gap:0 5px;
  }
  body .studio .transport-left { grid-column:1; grid-row:1; }
  body .studio .transport-right { grid-column:2; grid-row:1; }
  body .studio .transport-main { position:static; transform:none; max-width:none; grid-column:1 / -1; grid-row:2; justify-self:center; }
  body .studio .transport .loop-controls { display:flex; }
  body .studio .browser-panel, body .studio .mapping-panel { top:68px; }
}
@media (max-width:600px) {
  body .studio .transport-main { max-width:none; }
  body .studio .transport .loop-controls { display:flex; }
  body .studio .transport .loop-controls input { width:36px; }
  body .studio .browser-panel, body .studio .mapping-panel { top:72px; }
}

@media (max-width:480px) {
  body .studio .transport { grid-template-columns:minmax(0,1fr); grid-template-rows:22px 22px 22px; height:70px; min-height:70px; gap:0; }
  body .studio .transport-left { grid-column:1; grid-row:1; justify-self:start; }
  body .studio .transport-right { grid-column:1; grid-row:2; justify-self:end; }
  body .studio .transport-main { grid-column:1; grid-row:3; justify-self:center; }
  body .studio .browser-panel, body .studio .mapping-panel { top:92px; }
}