/* ─────────────────────────────────────────────────────────────────────────────
   layout-options.css
   Layout switcher for Synthograsizer.

   Modes (button labels → data-layout value → class on .synthograsizer-small):
     ⊟ Studio  (default)  — single centered column, full AI Studio Tools panel
     ▶ Perform (layout-a) — two-column, D-Pad sticky right, no AI Studio Tools

   All rules here are scoped to min-width: 900px so mobile is never affected.
───────────────────────────────────────────────────────────────────────────── */

/* ── Layout Switcher UI ─────────────────────────────────────────────────── */

.layout-switcher {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
}

.layout-btn {
  padding: 4px 13px;
  border: 1.5px solid #d1d5db;
  border-radius: 7px;
  background: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9ca3af;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  user-select: none;
}

.layout-btn:hover {
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.layout-btn.active {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: white;
}


/* ══════════════════════════════════════════════════════════════════════════
   PERFORM MODE (layout-a) — Two-Column, no AI Studio Tools
   Left  (~55%): Output + Actions + Bottom bar
   Right (400px): D-Pad / Knobs + Connections (sticky)
   AI Studio Tools panel is hidden — not needed during live performance
══════════════════════════════════════════════════════════════════════════ */

/* ── Performance mode: hide AI Studio Tools (any viewport) ────────────── */
.layout-a .studio-controls-section {
  display: none !important;
}

/* ── Performance mode: hide site nav (keep app title, lose nav links) ──── */
/* #navbar-mount is a sibling of .synthograsizer-small, so scope to body   */
body.layout-a #navbar-mount {
  display: none;
}

/* ── Performance mode: hide studio-only bottom-bar actions ─────────────── */
.layout-a #batch-button,
.layout-a #favorites-button {
  display: none;
}

/* ── Performance mode: hide output-header utility buttons ──────────────── */
.layout-a #copy-button,
.layout-a #code-button,
.layout-a #favorite-button,
.layout-a #send-button {
  display: none;
}

/* ── Performance mode: hide output-header label row entirely (no buttons
      remain, so the label "Generated Output" is just dead weight) ─────── */
.layout-a .output-header {
  display: none;
}

/* ── Performance mode: larger, fully-visible output text ───────────────── */
.layout-a #output-container {
  font-size: 22px;
  line-height: 1.7;
  max-height: none;
  padding: 20px 24px;
}

/* ── Performance mode: hide tag badges (metadata, not needed live) ─────── */
.layout-a #tag-badges-container {
  display: none;
}

/* ── Performance mode: hide D-pad keyboard tutorial hint ───────────────── */
.layout-a .keyboard-hint {
  display: none;
}

/* ── Performance mode: larger primary action buttons ───────────────────── */
.layout-a .primary-btn {
  height: 80px;
  font-size: 22px;
}

/* ── Performance-mode Template Gen shortcut — hidden in Studio (Template Gen
      is already in the AI Studio Tools panel there) ─────────────────────── */
#perf-template-gen-btn {
  display: none;
}
.layout-a #perf-template-gen-btn {
  display: flex;
}

@media (min-width: 900px) {

  /* ── Grid container ── */
  .layout-a.synthograsizer-small {
    display: grid;
    grid-template-columns: 1fr 400px;
    column-gap: 36px;
    align-items: start;
  }

  /* Full-width: header + error banner */
  .layout-a .app-header,
  .layout-a #error-message {
    grid-column: 1 / -1;
  }

  /* Left column: all content sections */
  .layout-a .output-section,
  .layout-a .primary-actions-section,
  .layout-a #p5-live-section,
  .layout-a .actions-section {
    grid-column: 1;
    min-width: 0; /* prevent content from blowing out the 1fr column */
  }

  /* Tighter bottom margins in two-col — less vertical breathing room needed */
  .layout-a .output-section          { margin-bottom: 20px; }
  .layout-a .primary-actions-section { margin-bottom: 20px; }

  /* Keep Recent list compact so the left column doesn't balloon */
  .layout-a .output-history-strip {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .layout-a .output-history-list {
    max-height: 148px;
    overflow-y: auto;
  }

  .layout-a .output-history-entry {
    min-width: 0;
    max-width: 100%;
  }

  .layout-a .output-history-entry-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Right column: D-Pad + connections — sticky so it stays in view while
     the user scrolls through the left column */
  .layout-a .variable-control-section {
    grid-column: 2;
    grid-row: 2 / span 20;  /* span enough rows to cover the left column */
    position: sticky;
    top: 20px;
    align-self: start;
    margin-bottom: 0;
  }

}


/* ── Shared tweak for Two-Column layout ──────────────────────────────── */

.layout-a .variable-control-section {
  margin-bottom: 24px;
}


/* ── Knobs grid (Two Column) ─────────────────────────────────────────── */
/*
   Scoped to .knob-mode so the rule only fires when JS is actually showing
   the knobs container.  Without this scope, display:grid !important would
   override the display:none that setControlMode() sets for D-Pad mode.
*/
@media (min-width: 900px) {
  .layout-a .variable-control-section.knob-mode .knobs-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 12px;
    overflow-x: visible;
    overflow-y: visible;
    padding: 16px 8px;
    scrollbar-width: auto;
  }

  /* Items no longer need to resist shrinking — the grid handles sizing */
  .layout-a .variable-control-section.knob-mode .knob-item {
    flex-shrink: unset;
    min-width: unset;
    width: 100%;
  }
}