/* ==========================================================================
   CIRCLE OF FIFTHS — shared widget, embedded at the top of every page
   (not a modal). Class names and colors ported from the original app's CSS.
   ========================================================================== */

.circle-section {
    position: relative;
    background:
        linear-gradient(160deg, rgba(79, 125, 245, .16), rgba(79, 125, 245, .02)),
        linear-gradient(165deg, rgba(24, 21, 46, .58), rgba(10, 8, 22, .66));
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(140, 170, 255, .28);
    border-radius: 18px;
    padding: 24px;
    margin: 20px auto;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow:
        0 22px 54px rgba(0, 0, 0, .45),
        0 2px 8px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 0 34px rgba(79, 125, 245, .10);
    overflow: hidden;
    transition: padding .36s cubic-bezier(0.22, 1, 0.36, 1), gap .36s cubic-bezier(0.22, 1, 0.36, 1), max-width .36s cubic-bezier(0.22, 1, 0.36, 1);
}
.circle-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 6% -12%, rgba(255, 255, 255, .12), transparent 55%);
    z-index: 0;
}
.circle-section::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    pointer-events: none;
    z-index: 0;
}
.circle-section > * {
    position: relative;
    z-index: 1;
}

/* Mirror the bass page's fretboard/card width tiers so the circle lines
   up with the panel below it at every screen size. */
@media (min-width: 601px) and (max-width: 1099px) {
    .circle-section { max-width: 100%; }
}
@media (min-width: 2560px) {
    .circle-section { max-width: 1440px; }
}
@media (min-width: 3840px) {
    .circle-section { max-width: 1800px; }
}
.circle-section.is-collapsed { padding: 12px 20px; gap: 0; }
.circle-section.is-collapsed .circle-header { align-items: center; }
.circle-section.is-collapsed .circle-header-title h3 { margin-bottom: 0; }

.circle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--border2);
    padding-bottom: 14px;
    transition: border-color .36s cubic-bezier(0.22, 1, 0.36, 1), padding .36s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
}
.circle-section.is-collapsed .circle-header { border-bottom: none; padding-bottom: 0; }
.circle-section.is-collapsed .circle-header-title p { opacity: 0; max-height: 0; overflow: hidden; margin: 0; }

.circle-header-title p {
    transition: opacity .36s cubic-bezier(0.22, 1, 0.36, 1), max-height .36s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 40px;
    opacity: 1;
}
.circle-header-title h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.35px;
    color: #fff;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.circle-header-title p { font-size: 13px; color: var(--text2); margin: 0; }

.circle-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Circle-of-fifths sharp/flat display toggle. Independent from the
   root-picker's ♮/♯/♭ pill elsewhere on the site — this one only swaps
   which glyph (♯ or ♭) is drawn on the wheel/hub/legend text. Two states
   only (sharp/flat), no natural, sharp by default. ── */
.cof-sf-toggle {
    flex-shrink: 0;
    align-self: flex-start;
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px;
    color: var(--text2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease), box-shadow .12s var(--ease);
}
.cof-sf-toggle:hover {
    background: rgba(255, 209, 102, .14);
    border-color: rgba(255, 209, 102, .40);
    color: #fff;
}
.cof-sf-toggle[data-mode="sharp"] {
    background: linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(0, 150, 255, .60));
    border-color: rgba(125, 223, 255, .55);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 3px 12px rgba(0, 150, 255, .38);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
.cof-sf-toggle[data-mode="flat"] {
    background: linear-gradient(150deg, rgba(255, 255, 255, .30), rgba(255, 209, 102, .75));
    border-color: rgba(255, 209, 102, .55);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 12px rgba(255, 209, 102, .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.circle-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text2);
    padding: 4px 6px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: color .18s var(--ease), background .18s var(--ease), transform .36s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.circle-toggle-btn:hover { color: var(--purple-l); background: var(--purple-dim); }
.circle-toggle-btn.is-collapsed { transform: rotate(-90deg); }

.circle-body-outer {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .36s cubic-bezier(0.22, 1, 0.36, 1), opacity .36s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 1;
    overflow: hidden;
    contain: layout;
}
.circle-body-outer.collapsed { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.circle-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    padding: 4px 2px;
}
@media (min-width: 768px) {
    .circle-body { flex-direction: row; align-items: flex-start; }
}

.circle-container {
    position: relative;
    width: 300px;
    height: 300px;
    flex-shrink: 0;
    align-self: center;
    margin: 0 auto;
}
.circle-svg { width: 100%; height: 100%; overflow: visible; display: block; }

.circle-sector {
    fill: #1d1933;
    stroke: #ffffff1f;
    stroke-width: 1.2;
    cursor: pointer;
    transition: fill .22s cubic-bezier(0.22, 1, 0.36, 1), stroke .22s, stroke-width .22s, filter .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.circle-sector:hover { fill: #292349; }
.circle-sector.active-root {
    fill: #4d3fb0;
    stroke: #c3b6ff;
    stroke-width: 3;
    filter: drop-shadow(0 0 10px rgba(169, 158, 245, .7)) drop-shadow(0 0 20px rgba(169, 158, 245, .5));
}
.circle-text {
    font-family: system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    fill: var(--text);
    pointer-events: none;
    user-select: none;
}
.circle-text-minor {
    font-family: system-ui, sans-serif;
    font-size: 10.5px;
    fill: var(--text2);
    pointer-events: none;
    user-select: none;
}

.circle-center-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    background: radial-gradient(circle, #2b235f, #1a1735 70%);
    border: 2px solid rgba(169, 158, 245, .5);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px #7c6fe066;
    padding: 0 8px;
    text-align: center;
}
.circle-center-label {
    font-size: 10px;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.circle-center-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--purple-l);
    font-family: var(--font-display);
}
.circle-center-mode {
    font-size: 11px;
    color: var(--text2);
    margin-top: 1px;
}

.circle-legend-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
}
.circle-title-block {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border2);
    padding-bottom: 12px;
    margin-bottom: 8px;
}
.circle-title-text { min-width: 0; }
.circle-title-block h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text);
}
.circle-title-block p { font-size: 13px; color: var(--text2); margin: 0; }

.diatonic-grid-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.diatonic-grid-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
}
.diatonic-card {
    position: relative;
    background: rgba(79, 125, 245, .06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(140, 170, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1), background .18s var(--ease), border-color .18s var(--ease), box-shadow .22s var(--ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.diatonic-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), transparent 45%);
    pointer-events: none;
}
.diatonic-card:hover {
    background: rgba(79, 125, 245, .12);
    border-color: rgba(140, 170, 255, .30);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 125, 245, .18);
}
.diatonic-card.active-diatonic {
    background: rgba(79, 125, 245, .18);
    border-color: rgba(140, 170, 255, .45);
    box-shadow:
        0 0 0 1px rgba(140, 170, 255, .40),
        0 10px 30px rgba(79, 125, 245, .32),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}
.diatonic-card .roman { position: relative; z-index: 1; font-size: 11px; color: var(--text2); font-weight: 600; letter-spacing: .3px; }
.diatonic-card .chord-name { position: relative; z-index: 1; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.1; margin: 4px 0 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.diatonic-card .chord-quality { position: relative; z-index: 1; font-size: 11px; color: var(--text3); }
.diatonic-card.is-major .chord-name { color: var(--gold); }
.diatonic-card.is-minor .chord-name { color: var(--purple-l); }
.diatonic-card.is-dim .chord-name { color: #f07070; }
.diatonic-card.tonic-card { background: rgba(79, 125, 245, .12); border-color: rgba(140, 170, 255, .30); }

.scale-info-row {
    background: rgba(0, 0, 0, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    font-size: 13px;
}
.scale-info-icon { color: var(--purple-l); font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.scale-info-text { color: var(--text2); line-height: 1.5; }
.scale-info-notes { color: var(--purple-l); font-weight: 600; }



@media (max-width: 768px) {
    /* Mobile-only 5% font-size reduction (auto-generated). Desktop keeps
       the original sizes; this block only fires under 768px. */
    .circle-header-title h3 { font-size: 17px; }
    .circle-header-title p { font-size: 12.5px; }
    /* ── Circle-of-fifths sharp/flat display toggle. Independent from the
   root-picker's ♮/♯/♭ pill elsewhere on the site — this one only swaps
   which glyph (♯ or ♭) is drawn on the wheel/hub/legend text. Two states
   only (sharp/flat), no natural, sharp by default. ── */
.cof-sf-toggle { font-size: 13.5px; }
    .circle-toggle-btn { font-size: 19px; }
    .circle-text { font-size: 14px; }
    .circle-text-minor { font-size: 10px; }
    .circle-center-label { font-size: 8.5px; }
    .circle-center-value { font-size: 18px; }
    .circle-center-label { font-size: 8px; }
    .circle-center-mode { font-size: 9px; }
    .circle-title-block h3 { font-size: 16px; }
    .circle-title-block p { font-size: 12.5px; }
    .diatonic-card .roman { font-size: 10.5px; }
    .diatonic-card .chord-name { font-size: 19px; }
    .diatonic-card .chord-quality { font-size: 10.5px; }
    .scale-info-row { font-size: 12.5px; }
    .scale-info-icon { font-size: 14px; }
}

@media (pointer: coarse) {
    /* However light the transition properties are, animating a
       container that wraps the SVG wheel + chord cards still forces
       that whole subtree to be laid out on every frame — real phone
       hardware struggles with this regardless of duration tuning.
       Skip the animation on mobile entirely: an instant, snappy toggle
       reads better than a stuttering animated one. */
    .circle-body-outer {
        transition: none;
    }

    /* Even with no animation, toggling still forces one synchronous
       layout+paint pass over the whole SVG wheel + chord cards — heavy
       enough on real phone hardware to show as a single hitch. When
       collapsed, tell the browser to skip layout/paint for this subtree
       entirely (and remember its rendering state, unlike display:none,
       so re-expanding is also cheap) instead of just skipping the
       transition around it. */
    .circle-body-outer.collapsed {
        content-visibility: hidden;
    }

    /* Paint cost on weak GPUs: the selected segment carries two stacked
       drop-shadow filters (each one re-rasterizes the SVG shape), and the
       hub, card and section shadows are large soft blurs. The selected
       segment is still clearly marked by its brighter fill and thick light
       outline; the shadows/transitions are what get dropped on touch. */
    .circle-sector { transition: none; }
    .circle-sector.active-root { filter: none; }
    .circle-center-hub { box-shadow: none; }
    .circle-section,
    .diatonic-card,
    .scale-info-row {
        box-shadow: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .circle-section,
    .diatonic-card,
    .scale-info-row {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}