/* The wheel, and the panel beside it.
 *
 * Geometry and structure follow the music-toolkit page this grew out of
 * (github.com/pouriaseyfi/music-toolkit, circle-of-fifths.html); the colours
 * are this site's. The disc is darker than the page so it reads as an object
 * lying on it, and the window over the chosen key is the only brass on screen —
 * one accent, so the eye knows where to look.
 */

.cof {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}
@media (max-width: 860px) {
  .cof { grid-template-columns: 1fr; }
}

/* ---- the disc ---- */

.wheel-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cof svg { display: block; width: 100%; height: auto; }

.seg { cursor: pointer; }
.seg path {
  fill: #151a24;
  stroke: #262e3d;
  stroke-width: 1.1;
  transition: fill 0.35s;
}
.seg text {
  fill: #e8ecf4;
  transition: fill 0.35s;
  pointer-events: none;
  font-family: var(--font-ui);
  font-weight: 600;
}
.seg .enh { opacity: 0.6; }
.seg.dim text { fill: #5c6578; }
.seg.lit path { fill: #222b3a; }
.seg.lit.side .ring-inn path { fill: #151a24; }
.seg.lit.side .ring-inn text { fill: #5c6578; }
.seg:focus { outline: none; }
.seg:focus-visible path { stroke: var(--accent); stroke-width: 2.4; }

.frame, .center-label { pointer-events: none; }
.center-label .big { fill: var(--text); font-family: var(--font-ui); font-weight: 800; }
.center-label .small {
  fill: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.1em;
}

.wheel-nav { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.legend { margin: 0; color: var(--muted); font-size: 0.85rem; text-align: center; line-height: 1.9; }

/* ---- the panel ---- */

.cof-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.key-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.key-head .name { font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
.key-head .fa { color: var(--muted); font-size: 1rem; }
.key-rel { margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; }

.sig { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sig .badge {
  background: var(--brass-soft);
  color: var(--accent);
  border: 1px solid var(--brass);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.82rem;
  font-weight: 700;
}
.sig .accs { font-size: 1rem; }

.scale-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.scale-row .note-chip { min-width: 54px; }
.scale-row .play { margin-inline-start: auto; }

.chords {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
}
.chord {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: start;
  cursor: pointer;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: inherit;
}
.chord:hover { border-color: var(--brass); }
.chord:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.chord .rn { color: var(--accent); font-size: 0.9rem; font-weight: 700; direction: ltr; }
.chord .cn { font-size: 1.25rem; line-height: 1.2; direction: ltr; }
.chord .fn { color: var(--muted); font-size: 0.72rem; }