/* ==========================================================================
   Paddy Prompt Studio — circle of fifths
   Layers on /blog/style.css and /tools/shared/tool-common.css.
   ========================================================================== */

.cof [hidden] { display: none !important; }
.cof-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.cof-wheel-wrap { position: relative; }
.cof-wheel { display: block; width: 100%; max-width: 30rem; margin: 0 auto; overflow: visible; }
.cof-wheel:focus { outline: none; }

.cof-w { cursor: pointer; }
.cof-w path { stroke: #0b0d16; stroke-width: 2; transition: fill 0.18s ease; }
.cof-w.major path { fill: #1b1f3a; }
.cof-w.minor path { fill: #141830; }
.cof-w:hover path { fill: #2a2f5a; }
.cof-w.is-fam.major path { fill: rgba(99, 102, 241, 0.42); }
.cof-w.is-fam.minor path { fill: rgba(99, 102, 241, 0.3); }
.cof-w.is-sel path { fill: url(#cof-sel); }
.cof-w:focus { outline: none; }
.cof-w:focus-visible path { stroke: #22d3ee; stroke-width: 3; }

.cof-name { fill: #e0e7ff; font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 800; font-size: 19px; text-anchor: middle; pointer-events: none; }
.cof-name.sm { font-size: 14px; fill: #c7d2fe; }
.cof-alt { fill: #8b93b8; font-family: "Inter", sans-serif; font-weight: 600; font-size: 10.5px; text-anchor: middle; pointer-events: none; }
.cof-num { fill: #a5f3fc; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 12px; text-anchor: middle; pointer-events: none; }
.cof-w.is-sel .cof-name, .cof-w.is-sel .cof-alt { fill: #0b0620; }
.cof-w.is-sel .cof-num { fill: #fff; }
.cof-w.minor .cof-num { font-size: 10px; }
.cof-sig { fill: #8b93b8; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; text-anchor: middle; pointer-events: none; }
.cof-sig.xs { font-size: 8.5px; }
.cof-hub { fill: #0b0d16; stroke: rgba(129, 140, 248, 0.4); stroke-width: 1.5; }
.cof-hub-name { fill: #fff; font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 800; font-size: 30px; text-anchor: middle; }
.cof-hub-mode { fill: #a5b4fc; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; text-anchor: middle; text-transform: uppercase; }
.cof-legend { margin: 0.5rem 0 0; text-align: center; font-size: 0.78rem; color: var(--text-dim); }
.cof-legend i { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 3px; vertical-align: -0.05em; margin: 0 0.25em 0 0.6em; }
.cof-legend .k-sel { background: linear-gradient(135deg, #818cf8, #22d3ee); }
.cof-legend .k-fam { background: rgba(99, 102, 241, 0.5); }

/* Info panel */
.cof-title { margin: 0; font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 800; font-size: clamp(1.6rem, 4vw, 2rem); color: #fff; line-height: 1.1; }
.cof-sig-line { margin: 0.35rem 0 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.9rem; color: #a5f3fc; }
.cof-rel-line { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--text-muted); }
.cof-block { margin-top: 0.9rem; }
.cof-notes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cof-note { min-width: 2.4rem; text-align: center; padding: 0.3rem 0.5rem; border-radius: 9px; font-weight: 700; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); }
.cof-note.root { background: rgba(34, 211, 238, 0.14); border-color: rgba(103, 232, 249, 0.5); color: #a5f3fc; }
.cof-chords { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.4rem; }
.cof-chord {
  display: grid; gap: 0.1rem; justify-items: center; cursor: pointer; padding: 0.45rem 0.3rem; min-height: 44px;
  font: inherit; color: var(--text); border-radius: 12px; border: 1px solid var(--border); background: rgba(129, 140, 248, 0.08);
  transition: transform 0.08s ease, background 0.15s ease;
}
.cof-chord:hover { background: rgba(129, 140, 248, 0.2); }
.cof-chord:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.cof-chord.flash { background: rgba(34, 211, 238, 0.3); transform: scale(1.05); }
.cof-chord-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; color: #a5b4fc; font-weight: 700; }
.cof-chord-name { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 800; font-size: 1.05rem; color: #fff; }
.cof-chord-notes { font-size: 0.68rem; color: var(--text-dim); }
.cof-chord.q-min { background: rgba(99, 102, 241, 0.05); }
.cof-chord.q-dim { border-style: dashed; }
.cof-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.cof-nbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.cof-nb { display: grid; text-align: left; gap: 0.1rem; cursor: pointer; padding: 0.45rem 0.7rem; min-height: 44px; font: inherit; font-weight: 700; color: #fff; border-radius: 12px; border: 1px solid var(--border-soft); background: rgba(255, 255, 255, 0.03); }
.cof-nb small { font-weight: 600; font-size: 0.68rem; color: var(--text-dim); }
.cof-nb:hover { background: rgba(129, 140, 248, 0.15); }
.cof-nb:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

@media (max-width: 860px) {
  .cof-layout { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .cof-nbs { grid-template-columns: 1fr; }
}