/* ============================================================
   PP Chords — Piano Chord Sheet Styles
   ============================================================ */

/* ── Color themes (CSS custom properties) ────────────────── */

.ppchords-container {
    --chord-color:      #333;
    --chord-color-rgb:  51, 51, 51;
    --key-active-bg:    #555;
    --key-active-color: #fff;
    --btn-bg:           #f0f0f0;
    --btn-border:       #ccc;
    --btn-color:        #333;
    --toolbar-bg:       #f8f8f8;
    --toolbar-border:   #e0e0e0;
    --content-bg:       transparent;
    --content-color:    inherit;
}

.ppchords-container.ppchords-theme-ocean {
    --chord-color:      #0055b3;
    --chord-color-rgb:  0, 85, 179;
    --key-active-bg:    #0055b3;
    --key-active-color: #fff;
}

.ppchords-container.ppchords-theme-forest {
    --chord-color:      #2a7a2a;
    --chord-color-rgb:  42, 122, 42;
    --key-active-bg:    #2a7a2a;
    --key-active-color: #fff;
}

.ppchords-container.ppchords-theme-sunset {
    --chord-color:      #c04000;
    --chord-color-rgb:  192, 64, 0;
    --key-active-bg:    #c04000;
    --key-active-color: #fff;
}

.ppchords-container.ppchords-theme-lavender {
    --chord-color:      #7040bb;
    --chord-color-rgb:  112, 64, 187;
    --key-active-bg:    #7040bb;
    --key-active-color: #fff;
}

.ppchords-container.ppchords-theme-midnight {
    --chord-color:      #88bbff;
    --chord-color-rgb:  136, 187, 255;
    --key-active-bg:    #88bbff;
    --key-active-color: #111;
    --btn-bg:           #2a2a3e;
    --btn-border:       #444466;
    --btn-color:        #ccd;
    --toolbar-bg:       #1e1e30;
    --toolbar-border:   #333355;
    --content-bg:       #12121e;
    --content-color:    #dde;
}

.ppchords-theme-midnight .ppchords-chord {
    background: rgba(var(--chord-color-rgb), 0.14);
}

/* ── Container ───────────────────────────────────────────── */

.ppchords-container {
    font-family: inherit;
    margin: 1.5em 0;
    border-radius: 6px;
    overflow: visible;
}

/* ── Toolbar ─────────────────────────────────────────────── */

.ppchords-toolbar {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    gap:             6px;
    padding:         8px 10px;
    background:      var(--toolbar-bg);
    border:          1px solid var(--toolbar-border);
    border-radius:   6px 6px 0 0;
    user-select:     none;
}

.ppchords-section {
    display:     flex;
    align-items: center;
    gap:         3px;
}

/* ── Buttons (base style) ────────────────────────────────── */

.ppchords-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    padding:        4px 8px;
    min-width:      30px;
    height:         28px;
    font-size:      12px;
    line-height:    1;
    font-family:    inherit;
    font-weight:    500;
    cursor:         pointer;
    border:         1px solid var(--btn-border);
    border-radius:  4px;
    background:     var(--btn-bg);
    color:          var(--btn-color);
    transition:     background 0.12s, color 0.12s, border-color 0.12s;
    white-space:    nowrap;
}

.ppchords-btn:hover {
    background:   rgba(var(--chord-color-rgb), 0.1);
    border-color: rgba(var(--chord-color-rgb), 0.5);
    color:        var(--chord-color);
}

.ppchords-btn:active {
    transform: scale(0.95);
}

/* ── Transpose key buttons ───────────────────────────────── */

.ppchords-key-buttons {
    display:   flex;
    flex-wrap: nowrap;
    gap:       2px;
}

.ppchords-key-btn {
    padding:   4px 6px;
    min-width: 28px;
    font-size: 11px;
}

.ppchords-key-btn.ppchords-key-active {
    background:   var(--key-active-bg);
    color:        var(--key-active-color);
    border-color: var(--key-active-bg);
    font-weight:  700;
}

/* Semitone ▲▼ buttons */
.ppchords-semitone-down,
.ppchords-semitone-up {
    min-width: 26px;
    font-size: 10px;
}

/* Accidental toggle */
.ppchords-accidental-toggle {
    min-width: 32px;
    font-size: 14px;
    font-weight: 700;
}

/* Font size */
.ppchords-font-decrease,
.ppchords-font-increase {
    font-size:   12px;
    font-weight: 600;
    min-width:   32px;
}

/* ── Autoscroll ───────────────────────────────────────────── */

.ppchords-autoscroll-section {
    gap: 4px;
}

.ppchords-speed-btn {
    font-size: 16px;  /* emoji needs a bit more room */
    padding:   2px 5px;
    min-width: 32px;
    height:    30px;
    opacity:   0.5;
    transition: opacity 0.15s, background 0.12s;
}

.ppchords-speed-btn.ppchords-speed-active {
    opacity:    1;
    background: rgba(var(--chord-color-rgb), 0.12);
    border-color: rgba(var(--chord-color-rgb), 0.5);
}

.ppchords-scroll-play {
    min-width:   36px;
    font-size:   13px;
}

.ppchords-scroll-play.ppchords-scroll-active {
    background:   rgba(var(--chord-color-rgb), 0.15);
    border-color: var(--chord-color);
    color:        var(--chord-color);
}

/* ── Chord content area ───────────────────────────────────── */

.ppchords-content {
    padding:        16px 16px 24px;
    background:     var(--content-bg);
    color:          var(--content-color);
    border:         1px solid var(--toolbar-border);
    border-top:     none;
    border-radius:  0 0 6px 6px;
    overflow-x:     auto;
}

/* ── Lines ────────────────────────────────────────────────── */

.ppchords-line {
    display:      block;
    line-height:  1;
    margin-top:   0.75em;   /* breathing room above the chord badge */
    margin-bottom: 0;
}

.ppchords-line:first-child {
    margin-top: 0;
}

.ppchords-text-only {
    padding:      0.15em 0;
    line-height:  1.5;
    color:        var(--content-color, inherit);
}

.ppchords-blank-line {
    height: 0.9em;
}

/* ── Holds (chord + lyric pair) ───────────────────────────── */

.ppchords-hold {
    display:        inline-block;
    vertical-align: bottom;
    position:       relative;
    padding-top:    1.5em;      /* just enough for the chord badge height */
    white-space:    pre;
    margin-right:   6px;
}

/* ── Chord badge (floats above lyric) ────────────────────── */

.ppchords-chord {
    position:       absolute;
    top:            0.05em;
    left:           0;
    font-size:      0.8em;
    font-weight:    800;
    color:          var(--chord-color);
    white-space:    nowrap;
    line-height:    1.3;
    letter-spacing: 0.02em;

    /* Badge */
    background:     rgba(var(--chord-color-rgb), 0.07);
    padding:        2px 7px 3px 6px;
    border-radius:  4px;
}

.ppchords-chord-empty {
    visibility: hidden;
    background: none !important;
    border:     none !important;
    padding:    0 !important;
}

/* ── Lyric text ───────────────────────────────────────────── */

.ppchords-lyric {
    display:     inline;
    white-space: pre;
    line-height: 1.5;
}

/* ── Responsive / Mobile ──────────────────────────────────── */

@media (max-width: 640px) {
    .ppchords-toolbar {
        gap: 4px;
    }

    .ppchords-key-buttons {
        flex-wrap: wrap;
        max-width: calc(100vw - 100px);
    }

    .ppchords-key-btn {
        min-width: 24px;
        padding:   3px 4px;
        font-size: 10px;
    }

    .ppchords-speed-btn {
        font-size: 14px;
        min-width: 28px;
    }

    .ppchords-content {
        padding: 12px 10px 20px;
        font-size: 95%;
    }
}

@media (max-width: 420px) {
    .ppchords-key-buttons {
        max-width: calc(100vw - 80px);
    }
}

/* ── Print ────────────────────────────────────────────────── */

@media print {
    .ppchords-toolbar {
        display: none;
    }

    .ppchords-content {
        border: none;
        padding: 0;
    }

    .ppchords-chord {
        color:      #000 !important;
        background: none !important;
        border:     none !important;
        padding:    0 !important;
    }
}