/* ═══════════════════════════════════════════════════════════════════
   stack-explorer.css — Diatonic chord-stack rows aligned beneath the
   Theory page's notes row (lives inside .theory-interval-card).
   Each chord cell sits in the same chromatic column as the note above.
   ═══════════════════════════════════════════════════════════════════ */

.theory-stack {
  margin-top: 0;
  /* Visible separator between the notes row and the stack-explorer
     toggle below — mirrors the dashed divider used between the
     intervals and notes rows. */
  border-top: 1.5px dashed var(--text-3, #aaa);
  padding-top: 12px;
  margin-top: 14px;
}

/* Toggle sits flush LEFT (no padding-left to push it right) — clearly
   reads as "expand this section" rather than as a centred row label. */
.theory-stack-toggle-row {
  display: flex;
  align-items: center;
  padding-left: 0;
  padding-right: 4px;
}

/* Visually a real expand-button: solid background, prominent caret,
   border so it doesn't blend into the dashed divider above it. */
.theory-stack-toggle {
  font: inherit;
  font-size: 0.82rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  background: var(--surface-2, #f5f4f0);
  border: var(--border-w, 1px) solid var(--border);
  padding: 7px 14px;
  border-radius: var(--r-sm, var(--radius-md, 6px));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  transition: background var(--t-fast, 0.12s), border-color var(--t-fast, 0.12s), color var(--t-fast, 0.12s), box-shadow var(--t-fast, 0.12s);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}
.theory-stack-toggle:hover {
  background: var(--surface, #fff);
  border-color: var(--accent, #e8874a);
  color: var(--text);
}
.theory-stack-toggle.open {
  background: rgba(232, 135, 74, 0.10);
  border-color: var(--accent, #e8874a);
  color: var(--accent, #e8874a);
}
.theory-stack-toggle .stk-sub {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-normal);
  font-size: 0.85em;
  color: var(--text-muted, #888);
  margin-left: var(--space-xs);
}
.theory-stack-toggle.open .stk-sub {
  color: var(--text-muted, #888);
}
.theory-stack-caret {
  font-size: 0.95rem;
  transition: transform 0.25s ease;
  color: var(--accent, #e8874a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2857rem;     /* ~18 px */
  height: 1.2857rem;
  border-radius: var(--radius-full, 50%);
  background: rgba(232, 135, 74, 0.15);
  font-weight: var(--weight-bold);
  line-height: 1;
}
.theory-stack-toggle.open .theory-stack-caret {
  transform: rotate(180deg);
}

/* Collapsible body */
.theory-stack-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.theory-stack-body.open {
  max-height: 800px;
}

/* Stack rows mirror the intervals row layout exactly so cells align
   vertically with the notes-row's chromatic cells. */
.theory-stack-row {
  margin-top: 6px;
}

.theory-stack-cells {
  display: flex;
  flex: 1;
  gap: 3px;
  padding-left: 48px;        /* match .theory-interval-row alignment */
  padding-right: 48px;
}

.theory-stack-cell {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: var(--space-sm) 2px;
  border-radius: var(--r-sm, var(--radius-md, 6px));
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 0.85rem;
  font-weight: var(--weight-bold);
  color: var(--text);
  background: transparent;
  border: var(--border-w, 1px) solid var(--border);
  transition: background var(--t-fast, 0.12s), border-color var(--t-fast, 0.12s), font-size var(--t-fast, 0.15s);
  /* Never truncate — chord names must stay readable.  Compact jazz
     notation (Δ, ø) makes most chords fit; the responsive size steps
     below shrink the type instead of clipping it. */
  white-space: nowrap;
  overflow: visible;
  line-height: 1.15;
}
.theory-stack-cell:not(.empty):hover {
  background: var(--surface-2, #f5f4f0);
}
[data-theme="dark"] .theory-stack-cell:not(.empty):hover {
  background: rgba(255,255,255,0.04);
}

/* Empty placeholder in non-scale chromatic columns — keep the column
   width but no visible content. */
.theory-stack-cell.empty {
  border-color: transparent;
  background: transparent;
  visibility: hidden;
}

/* Quality differentiation by text colour only (chart-like, not button-y) */
.theory-stack-cell.q-min { color: #5b8fd9; }
.theory-stack-cell.q-dim { color: #b45050; }
.theory-stack-cell.q-aug { color: #aa6ec8; }

/* ── Responsive scaling — chord cells shrink instead of truncating ─── */
/* 12 chromatic columns, only 7 filled.  Available width per filled cell
   ≈ (container − 96px padding) / 12 − 3px gap.  We step the font size
   down at the points where the longest chord token (e.g. "F#m7") would
   otherwise overflow at the previous step. */
@media (max-width: 1100px) {
  .theory-stack-cell { font-size: 0.78rem; padding: 7px 1px; }
}
@media (max-width: 900px) {
  .theory-stack-cell { font-size: 0.72rem; padding: 6px 1px; }
}
@media (max-width: 760px) {
  .theory-stack-cell { font-size: 0.66rem; padding: 5px 1px; letter-spacing: -0.02em; }
}

/* Mobile — match the smaller scroll-button + gap of the notes row */
@media (max-width: 640px) {
  .theory-stack-toggle-row {
    padding-left: 0;
  }
  .theory-stack-toggle {
    font-size: 0.74rem;
    padding: 6px 10px;
  }
  .theory-stack-cells {
    padding-left: 38px;
    padding-right: 38px;
  }
  .theory-stack-cell {
    font-size: 0.62rem;
    padding: 4px 0;
    letter-spacing: -0.03em;
  }
}