/* =============================================================================
   circle-o-5ths.css — progression panels (#root-circle-progressions, #minor-circle-progressions)
   Cards are Bootstrap .card in a Bootstrap .row; the card body reuses the
   #chord-data layout (.cd-* in piano-chords.css) at a compact size.
   ========================================================================== */

:root {
  --cp-bg: #55555c;              /* lighter grey than the chord controls */
  --cp-fg: #f2f2f2;
  --cp-muted: #dcdce0;
  --cp-rule: #8a8a92;            /* light grey dividers in the key box */
  --cp-roman: #6b6b70;
  --cp-active: #3d7be8;
  --cp-gutter: 15px;             /* matches Bootstrap .row gutter (-15px margins) */
  --cp-select-max: 480px;        /* progression dropdown width on wide screens */
  --cp-indent: 0px;              /* sequence badge + description align with the key box */
  --cp-relative-bg: #e0f7fa;     /* Material Cyan 50 — relative progression panel */
  --cp-relative-fg: #1d1d1f;
  --cp-relative-muted: #4a4a50;

  /* compact chord-data card */
  --cp-circle: 44px;
  --cp-name-size: 17px;
}

.cp {
  width: 100%;
  min-width: 0;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 12px var(--cp-gutter) 0;
  border-radius: 10px;
  background: var(--cp-bg);
  color: var(--cp-fg);
  box-sizing: border-box;
  text-align: left;              /* every section inherits left alignment */
}

.cp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cp-key {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  border: 1px solid var(--cc-btn-border, #66666d);   /* same frame as the progression dropdown */
  border-radius: 8px;
  background: var(--cc-select-bg, #2b2b2e);          /* same fill as the progression dropdown */
  overflow: hidden;
}

/* key/value rows: "Key | D major" / "Signature | 2 ♯ (F♯ C♯)" */
.cp-key-name,
.cp-key-signature {
  display: flex;
  align-items: stretch;
  font-size: 16px;
  line-height: 1.4;
}
.cp-key-name { border-bottom: 1px solid var(--cp-rule); }

.cp-kv-label,
.cp-kv-value { padding: 8px 12px; }

.cp-kv-label {
  min-width: 104px;
  border-right: 1px solid var(--cp-rule);
  text-align: right;
  font-weight: 700;
  color: var(--cp-muted);
}
.cp-kv-value { font-weight: 700; color: var(--cp-fg); }

.cp-select { margin-bottom: 0; }

/* --- progression selector (#progression-selector): self-contained block ------- */
.cp-selector {
  width: 100%;
  min-width: 0;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 12px var(--cp-gutter);
  border-radius: 10px;
  background: var(--cp-bg);
  color: var(--cp-fg);
  box-sizing: border-box;
  text-align: left;
}
.cp-selector .cp-select { width: 100%; max-width: var(--cp-select-max); }

/* "Choose a progression" label above the dropdown.
   Resets global <label> rules (e.g. app.css) so only these styles apply. */
.cp-choose {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  line-height: 1.3;
  text-align: left;
}
.cp-choose-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--cp-muted);
}

/* chosen sequence: one chord badge per step (every bar for bar-based forms), in order */
.cp-roman {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - var(--cp-indent));
  margin: 4px 0 10px var(--cp-indent);
  box-sizing: border-box;
}
.cp-seq-sep {
  font-size: 15px;
  font-weight: 700;
  color: var(--cp-muted);
  user-select: none;
}
.cp--relative .cp-seq-sep { color: var(--cp-relative-muted); }

/* "G♯dim is the vii° chord of A major." — explains a key that differs from the chord */
.cp-note {
  margin: 0 0 6px var(--cp-indent);
  font-size: 15px;
  font-weight: 700;
  color: var(--cp-fg);
}
.cp-note[hidden] { display: none; }
.cp--relative .cp-note { color: var(--cp-relative-fg); }

.cp-desc {
  margin: 0 0 12px var(--cp-indent);
  font-size: 15px;
  color: var(--cp-muted);
}

/* right-hand controls column: dropdown (or static label) + relative badge */
.cp-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* "Relative Minor:" + rounded chord badge under the dropdown */
.cp-rel {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-rel-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--cp-muted);
}
.cp-rel-badge,
.cp-seq-badge {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--cc-btn-border, #66666d);
  border-radius: 22px;
  background: var(--cc-select-bg, #2b2b2e);
  color: var(--cp-fg);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cp-rel-badge:hover,
.cp-seq-badge:hover { border-color: var(--cp-fg); }
.cp-rel-badge:focus-visible,
.cp-seq-badge:focus-visible { outline: 3px solid var(--cp-active); outline-offset: 2px; }
.cp-rel-badge.is-active,
.cp-seq-badge.is-active { box-shadow: 0 0 0 3px var(--cp-active); }
.cp-seq-badge { padding: 0 14px; font-size: 16px; white-space: nowrap; }

/* static progression name (relative panel) — looks like the dropdown, not interactive */
.cp-static {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--cc-btn-border, #66666d);
  border-radius: 8px;
  background: var(--cc-select-bg, #2b2b2e);
  color: var(--cp-fg);
  font-size: 15px;
  letter-spacing: 0.02em;
  box-sizing: border-box;
}

/* --- relative progression panel (#minor-circle-progressions) ----------------- */
.cp.cp--relative {
  background: var(--cp-relative-bg);
  color: var(--cp-relative-fg);
}
.cp-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cp-relative-fg);
}
.cp--relative .cp-desc,
.cp--relative .cp-choose-text,
.cp--relative .cp-rel-label { color: var(--cp-relative-muted); }

/* --- Bootstrap cards --------------------------------------------------------- */
.cp-card { color: #1d1d1f; }
.cp-card.is-active { box-shadow: 0 0 0 2px var(--cp-active); }

/* chord-data layout inside a card body: drop the panel chrome, keep the content */
.cd.cd--compact {
  position: relative;
  margin-top: 0;
  padding: 14px 14px 16px;
  border: none;
  border-radius: inherit;
  background: transparent;
}

/* roman numeral: position of the chord in the progression, upper-right corner */
.cp-card-roman {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cp-roman);
}

.cd--compact .cd-name {
  font-size: var(--cp-name-size);
  padding: 0 14px;
  margin-bottom: 12px;
}

.cd--compact .cd-tones { gap: 10px; }

.cd--compact .cd-circle {
  width: var(--cp-circle);
  height: var(--cp-circle);
  font-size: 15px;
}

/* octave rows inside progression cards: narrower circle hit areas so 4-note
   chords fit a 4-across card row (height stays 44px) */
.cd--compact .cd-octaves { margin-top: 14px; padding-top: 12px; gap: 6px; }
.cd--compact .cd-octave-note { min-width: 34px; }
.cd--compact .cd-octave-label { min-width: 38px; padding: 0 4px 0 8px; font-size: 14px; }
.cd--compact .cd-octave-dot { --cd-dot: 28px; font-size: 12px; }

/* =============================================================================
   BREAKPOINTS — keep at end of file
   ========================================================================== */

@media (max-width: 768px) {
  .cp { border-radius: 8px; }
  .cp-selector { border-radius: 8px; }
  .cp-selector .cp-select { max-width: 100%; }
  .cp-select { width: 100%; }
  .cp-choose { width: 100%; }
  .cp-controls { width: 100%; }
}

@media (max-width: 430px) {
  .cp-seq-badge { padding: 0 12px; font-size: 15px; }
  .cp-key-name,
  .cp-key-signature { font-size: 15px; }
  .cp-kv-label { min-width: 92px; }
}