/* Track heights (redesign 2026-11): Full (as before), Medium (name,
   buttons, volume) and Compact (one 40 px line: name and R/M/S). Heights
   come from trackFold.js, so the card, the lane and every pointer
   calculation agree. Phones keep their own layout. */

/* Phones have no track heights to choose. */
html body .track-card .sw-fold-btn {
  display: none;
}

@media (min-width: 761px) {
  html body .track-card .sw-fold-btn {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: -0.1rem;
    padding: 0;
    border: 0;
    border-radius: 0.3rem;
    background: transparent;
    color: rgba(255, 248, 232, 0.55);
    cursor: pointer;
  }

  html body .track-card .sw-fold-btn:hover {
    background: rgba(255, 248, 232, 0.08);
    color: #f6dca3;
  }

  html body .track-card .sw-fold-btn:disabled {
    opacity: 0.3;
    cursor: default;
  }

  html body .track-card .sw-fold-btn svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
  }

  /* The arrow shows what the click does: up while the track is open (the click
     closes it), down once it is closed (the click opens it). */
  html body .track-card .sw-fold-btn[data-fold="full"] svg,
  html body .track-card .sw-fold-btn[data-fold="medium"] svg {
    transform: rotate(180deg);
  }

  /* Medium: keep the name, the buttons and the volume. */
  html body .track-card.sw-fold-medium {
    padding-top: 0.5rem !important;
    padding-bottom: 0.3rem !important;
  }

  html body .track-card.sw-fold-medium .pan-row,
  html body .track-card.sw-fold-medium .track-output-meter-row,
  html body .track-card.sw-fold-medium .midi-velocity-row {
    display: none !important;
  }

  html body .track-card.sw-fold-medium .track-meta-row {
    margin-top: 0.05rem !important;
    margin-bottom: 0.2rem !important;
  }

  /* Compact: one line. */
  html body .track-card.sw-fold-compact {
    display: flex !important;
    align-items: center;
    padding: 0 0.55rem !important;
  }

  html body .track-card.sw-fold-compact .track-name-row {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
  }

  html body .track-card.sw-fold-compact .track-name-input {
    min-width: 0;
    max-width: 100%;
    font-size: 0.8rem !important;
  }

  html body .track-card.sw-fold-compact .track-meta-row {
    display: flex !important;
    flex: 0 0 auto;
    margin: 0 1.75rem 0 0.25rem !important;
  }

  html body .track-card.sw-fold-compact .track-buttons {
    gap: 0.2rem !important;
  }

  html body .track-card.sw-fold-compact .track-meta,
  html body .track-card.sw-fold-compact .range-row,
  html body .track-card.sw-fold-compact .track-audio-body,
  html body .track-card.sw-fold-compact .track-output-meter-row,
  html body .track-card.sw-fold-compact .midi-editor-q-panel,
  html body .track-card.sw-fold-compact .track-resize-handle {
    display: none !important;
  }

  html body .track-card.sw-fold-compact .track-buttons .track-toggle {
    width: 1.35rem !important;
    height: 1.35rem !important;
    min-width: 1.35rem !important;
    font-size: 0.58rem !important;
  }

  html body .track-card.sw-fold-compact .track-lock-button {
    top: 50% !important;
    transform: translateY(-50%);
  }
}

/* Phones and tablets: the R / listen / M / S row starts under the colour
   dot instead of under the name, so S no longer runs into the right edge
   of the track column (it overflowed by about 2 px). */
@media (max-width: 1024px) {
  html body .track-card .track-meta-row {
    margin-left: 0 !important;
  }
}