/* compositor.css — Lámina VI: el sugeridor de ruedas y su curva afectiva. */

.ruedas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.rueda {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-sunk); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.rueda__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rueda__label { font-family: var(--font-display); font-weight: 300; font-size: var(--t-0); margin: 0; }
.rueda__play { padding: 6px 14px; font-size: var(--t--1); }
.rueda__chords { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rueda__chip {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 11px; font-size: var(--t--1); color: var(--ink);
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.rueda__chip:hover { border-color: var(--live); background: color-mix(in srgb, var(--live) 8%, var(--paper)); }
.rueda__arrow { color: var(--live); font-size: var(--t--2); }
.rueda__roman { font-size: var(--t--2); color: var(--ink-dim); letter-spacing: 0.04em; }
.band {
  width: 100%; height: 30px; border-radius: var(--radius);
  border: 1px solid var(--line); display: block;
}
.rueda__why { font-size: var(--t--1); color: var(--ink-dim); font-style: italic; margin: 0; max-width: 46ch; }
.comp__caveat { margin-top: 26px; font-size: var(--t--2); font-style: italic; max-width: 64ch; }
.comp__caveat em { color: var(--ink); }