/* ================================================================
   Circle of Fifths Styles
   ================================================================ */

.circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.circle-of-fifths-svg {
    max-width: 520px;
    width: 100%;
    height: auto;
}

/* Wedge segments */
.cof-wedge {
    cursor: pointer;
    transition: all 0.2s ease;
}

.cof-wedge path {
    fill: var(--bg-card);
    stroke: var(--border);
    stroke-width: 1;
    transition: all 0.2s ease;
}

.cof-wedge:hover path {
    fill: var(--bg-hover);
    stroke: var(--accent);
    stroke-width: 1.5;
}

.cof-wedge.active path {
    fill: var(--accent-glow);
    stroke: var(--accent);
    stroke-width: 2;
}

.cof-wedge text {
    fill: var(--text);
    font-family: var(--font);
    font-weight: 600;
    font-size: 14px;
    pointer-events: none;
    dominant-baseline: central;
    text-anchor: middle;
}

.cof-wedge.active text {
    fill: var(--accent-light);
}

/* Minor ring */
.cof-minor-wedge {
    cursor: pointer;
    transition: all 0.2s ease;
}

.cof-minor-wedge path {
    fill: var(--bg-surface);
    stroke: var(--border);
    stroke-width: 0.8;
    transition: all 0.2s ease;
}

.cof-minor-wedge:hover path {
    fill: var(--bg-hover);
    stroke: var(--accent-2);
}

.cof-minor-wedge.active path {
    fill: rgba(255,107,157,0.15);
    stroke: var(--accent-2);
    stroke-width: 1.5;
}

.cof-minor-wedge text {
    fill: var(--text-muted);
    font-family: var(--font);
    font-weight: 500;
    font-size: 11px;
    pointer-events: none;
    dominant-baseline: central;
    text-anchor: middle;
}

.cof-minor-wedge.active text {
    fill: var(--accent-2);
}

/* Center */
.cof-center circle {
    fill: var(--bg);
    stroke: var(--border);
    stroke-width: 1;
}

.cof-center text {
    fill: var(--text-dim);
    font-family: var(--font);
    font-size: 11px;
    dominant-baseline: central;
    text-anchor: middle;
}