/* ====================================================================
   Composer - kwintencirkel met instrumentweergave
   Kleuren volgen het houten wiel: notenhout, donkerblauw en goud.
   ==================================================================== */

.cmp-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 110px 18px 90px;
    color: #f2f2f2;
    font-family: Poppins, 'Segoe UI', sans-serif;
}

.cmp-head { text-align: center; margin-bottom: 26px; }
.cmp-head h1 { font-size: 34px; margin: 0 0 6px; letter-spacing: 2px; }
.cmp-head p { margin: 0; opacity: .75; font-size: 15px; }

.cmp-layout {
    display: grid;
    grid-template-columns: minmax(320px, 560px) 1fr;
    gap: 34px;
    align-items: start;
}
@media (max-width: 980px) {
    .cmp-layout { grid-template-columns: 1fr; }
}

/* --- het wiel ---------------------------------------------------- */

.cmp-wheel-box { position: relative; }
.cmp-wheel { width: 100%; height: auto; display: block; touch-action: none; cursor: grab; }
.cmp-wheel:active { cursor: grabbing; }

.cmp-seg-major   { fill: #232c52; }
.cmp-seg-minor   { fill: #1b2340; }
.cmp-seg-dim     { fill: #8b4a2b; }
.cmp-seg-line    { stroke: #c9a24a; stroke-width: 1; fill: none; opacity: .55; }

.cmp-seg-major.is-in-window { fill: #33407a; }
.cmp-seg-minor.is-in-window { fill: #27315e; }
.cmp-seg-dim.is-in-window   { fill: #a85c33; }

.cmp-label {
    fill: #e8c15a;
    font-family: Georgia, 'Times New Roman', serif;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
}
.cmp-label-major { font-size: 30px; font-weight: bold; }
.cmp-label-minor { font-size: 17px; }
.cmp-label-dim   { font-size: 17px; fill: #f6e3b8; }

.cmp-label-major.is-tonic { fill: #fff3cf; font-size: 34px; }

/* De vaste houten cursor bovenop; draait niet mee. */
.cmp-cursor { fill: none; stroke: #a0522d; stroke-width: 7; stroke-linejoin: round; }
.cmp-cursor-fill { fill: #a0522d; opacity: .13; }
.cmp-key-mark { fill: #e8c15a; font-size: 13px; text-anchor: middle; letter-spacing: 2px; }

.cmp-hub { fill: #11172e; }
.cmp-hub-text { fill: #e8c15a; text-anchor: middle; font-size: 15px; letter-spacing: 1px; }

.cmp-wheel-hint {
    text-align: center;
    font-size: 13px;
    opacity: .6;
    margin-top: 10px;
}

/* --- bedieningspaneel -------------------------------------------- */

.cmp-panel { min-width: 0; }

.cmp-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin-bottom: 22px;
}
.cmp-field { display: flex; flex-direction: column; gap: 5px; }
.cmp-field label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: .7; }
.cmp-field select {
    background: #1b2340;
    color: #f2f2f2;
    border: 1px solid #3b4675;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 15px;
    min-width: 170px;
}

.cmp-toggle { display: inline-flex; border: 1px solid #3b4675; border-radius: 6px; overflow: hidden; }
.cmp-toggle button {
    background: #1b2340;
    color: #cfd4e8;
    border: 0;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}
.cmp-toggle button.is-active { background: #e8c15a; color: #1b2340; font-weight: 600; }

/* --- akkoordkaarten ---------------------------------------------- */

.cmp-key-title { font-size: 21px; margin: 0 0 4px; }
.cmp-key-sub { font-size: 14px; opacity: .7; margin: 0 0 18px; }

.cmp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: 14px;
}

.cmp-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(232, 193, 90, .22);
    border-radius: 10px;
    padding: 12px 10px 10px;
    text-align: center;
}
.cmp-card.is-tonic { border-color: #e8c15a; background: rgba(232, 193, 90, .1); }

.cmp-card-name { font-size: 20px; font-weight: 600; color: #e8c15a; }
.cmp-card-degree { font-size: 12px; opacity: .65; margin-bottom: 8px; }
.cmp-card-notes { font-size: 12px; opacity: .7; margin-top: 6px; }
.cmp-card-empty { font-size: 12px; opacity: .55; padding: 18px 4px; }

.cmp-chordbox { width: 100%; height: auto; }
.cmp-cb-line   { stroke: #cfd4e8; stroke-width: 1.2; }
.cmp-cb-nut    { stroke: #f2f2f2; stroke-width: 4; }
.cmp-cb-dot    { fill: #e8c15a; }
.cmp-cb-dot-text { fill: #1b2340; font-size: 8px; text-anchor: middle; dominant-baseline: central; }
.cmp-cb-mark   { fill: #cfd4e8; font-size: 10px; text-anchor: middle; }
.cmp-cb-barre  { fill: #e8c15a; }
.cmp-cb-fret   { fill: #cfd4e8; font-size: 9px; text-anchor: end; }

/* --- halsweergave voor losse noten ------------------------------- */

.cmp-neck { width: 100%; height: auto; margin-top: 6px; }
.cmp-neck-wood { fill: #2a2118; }
.cmp-neck-line { stroke: #6d7391; stroke-width: 1; }
.cmp-neck-string { stroke: #b9bed6; stroke-width: 1.4; }
.cmp-neck-nut { stroke: #f2f2f2; stroke-width: 5; }
.cmp-neck-dot { fill: #3d466f; }
.cmp-neck-note { fill: #e8c15a; }
.cmp-neck-note.is-root { fill: #fff3cf; stroke: #e8c15a; stroke-width: 2; }
.cmp-neck-note-text { fill: #1b2340; font-size: 9px; text-anchor: middle; dominant-baseline: central; font-weight: 600; }
.cmp-neck-label { fill: #cfd4e8; font-size: 10px; text-anchor: middle; }
.cmp-neck-open { fill: #cfd4e8; font-size: 10px; text-anchor: end; }

/* --- pianoklavier ------------------------------------------------ */

.cmp-piano { width: 100%; height: auto; margin-top: 6px; }
.cmp-pk-white { fill: #f4f4f4; stroke: #999; stroke-width: 1; }
.cmp-pk-black { fill: #1b1b1b; stroke: #000; stroke-width: 1; }
.cmp-pk-white.is-active { fill: #e8c15a; }
.cmp-pk-black.is-active { fill: #b8912f; }
.cmp-pk-white.is-root { fill: #fff3cf; stroke: #b8912f; stroke-width: 2; }
.cmp-pk-black.is-root { fill: #d8ab3a; }
.cmp-pk-text { font-size: 10px; text-anchor: middle; fill: #1b2340; font-weight: 600; }
.cmp-pk-text-black { fill: #f4f4f4; }

.cmp-legend { font-size: 12px; opacity: .7; margin-top: 12px; line-height: 1.6; }