/**
 * Backing Track Builder — /backing-track-builder/ page styles.
 *
 * The chart skin is the practice modal's canonical lead-sheet look
 * (modal.css "Canonical-chart visual treatment"), re-scoped under
 * .pg-qb__chart so this page renders identically to Backing Track mode
 * without shipping all of modal.css. If the modal skin evolves, port
 * the change here too.
 */

.pg-qb {
    max-width: 980px;
    margin: 0 auto;
    text-align: left;
}

/* The overlays set display:flex below, which would otherwise defeat
   the `hidden` attribute page.js toggles them with. */
.pg-qb [hidden] { display: none !important; }

/* ── Modal Backing surface, hosted inline ────────────────────────
   Markup is the modal's own (playstrip + metro strip above the chart,
   console transport below), so modal.css does the layout. This block
   un-fixes the modal shell, cards the strips for the page column, and
   forces inline the two things desktop Backing gates behind shell
   state (metro dots; the band deck, a flyout in the modal). */
.pg-qb .pg-practice {
    position: static;
    inset: auto;
    z-index: auto;
}
.pg-qb .pgbk__playstrip { border: 0; border-radius: 0; border-bottom: 1px solid #f0ede6; }
.pg-qb .pgbk__metro-strip { border: 0; border-radius: 0; }
.pg-qb .pg-qb__metro { display: flex !important; }
.pg-qb .pg-practice__transport {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #edeae3;
    overflow: visible;
}
.pg-qb .pg-practice[data-mode="backing"] .pgpt__console {
    min-width: 0;
    flex-wrap: wrap;
    border-left: 0;
    width: 100%;
    padding: 8px 14px;
}
/* The band deck is flyout-gated in the modal; render it inline here. */
.pg-qb .pg-qb__deck { display: flex !important; }
.pg-qb .pgpt-backing__seg { cursor: default; }
.pg-qb .pgpt-backing__bassruns { color: #cfd6de; }
.pg-qb .pgpt-backing__bassruns input { accent-color: var(--pg-blue, #1E4F75); }

/* ── Status / loading line ─────────────────────────────────────── */
.pg-qb__status {
    margin: 10px 2px 0;
    font-size: 13px;
    color: #8a8175;
}

/* ── Chart toolbar (Display popover host) ─────────────────────── */
.pg-qb__chart-tools {
    display: flex;
    justify-content: flex-end;
    margin: 12px 0 0;
}
.pg-qb__chart-tools .pgbk__display { position: relative; }

/* Soloed section — the play button lights up and the section header
   carries the accent while the band loops it. */
.pg-qb-sec__play[aria-pressed="true"] {
    background: var(--pg-blue, #1E4F75);
    color: #fff;
    border-color: var(--pg-blue, #1E4F75);
}
.pg-qb-sec.is-soloed .pg-qb-sec__name { text-decoration: underline; }

/* ── Sections ──────────────────────────────────────────────────── */
.pg-qb__chart { margin-top: 18px; }
.pg-qb-sec { margin-bottom: 10px; }
.pg-qb-sec__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 8px;
}
.pg-qb-sec__name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--pg-blue, #1E4F75);
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    padding: 3px 6px;
    width: 11em;
}
.pg-qb-sec__name:hover, .pg-qb-sec__name:focus {
    border-color: #d9d3c7;
    background: #fff;
    outline: none;
}
.pg-qb-sec__play {
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9d3c7;
    border-radius: 50%;
    background: #fff;
    color: var(--pg-blue, #1E4F75);
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0 0 0 2px;
}
.pg-qb-sec__play:hover { background: var(--pg-blue, #1E4F75); color: #fff; }
.pg-qb-sec__reps {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    color: #8a8175;
}
.pg-qb-sec__reps button {
    width: 22px; height: 22px;
    border: 1px solid #d9d3c7;
    border-radius: 5px;
    background: #fff;
    color: #6b6459;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.pg-qb-sec__reps span { min-width: 2.4em; text-align: center; }
.pg-qb-sec__tools { display: inline-flex; gap: 6px; margin-left: auto; }
.pg-qb-sec__tools button {
    padding: 3px 9px;
    font-size: 12px;
    border: 1px solid #e0dacd;
    border-radius: 6px;
    background: #fff;
    color: #8a8175;
    cursor: pointer;
}
.pg-qb-sec__tools button:hover { color: #1e1b18; border-color: #c9c2b6; }

/* ── Chart skin (modal.css canonical treatment, re-scoped) ─────── */
.pg-qb__chart .pg-rt-chart { max-width: 960px; }
.pg-qb__chart .pg-rt-chart__row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin-bottom: 6px;
    border-left: 2px solid #4a4540;
}
.pg-qb__chart .pg-rt-chart__measure {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    background: transparent;
    border: 0;
    border-right: 1px solid #d0c9bd;
    border-radius: 0;
    padding: 4px 4px;
    overflow: hidden;
    cursor: pointer;
}
.pg-qb__chart .pg-rt-chart__row > .pg-rt-chart__measure:last-child {
    border-right: 2px solid #4a4540;
}
.pg-qb__chart .pg-rt-chart__measure:hover { background: rgba(30, 79, 117, 0.06); }
.pg-qb__chart .pg-rt-chart__measure.is-editing { background: rgba(30, 79, 117, 0.10); }
.pg-qb__chart .pg-rt-chart__beat {
    padding: 8px 5px;
    text-align: center;
    font-family: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.005em;
    background: transparent;
    color: #1e1b18;
    border-radius: 4px;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    position: relative;
}
.pg-qb__chart .pg-rt-chart__beat sup {
    font-size: 0.55em;
    vertical-align: super;
    line-height: 0;
    font-weight: 500;
    margin-left: 0.05em;
}
.pg-qb__chart .pg-rt-chart__beat.is-slash {
    color: #ccc5bb;
    font-family: Georgia, 'Iowan Old Style', serif;
    font-style: italic;
}
.pg-qb__chart .pg-rt-chart__beat.is-inherited {
    color: #c9c2b6;
    font-weight: 400;
}
.pg-qb__chart .pg-rt-chart__beat.is-active {
    background: rgba(255, 210, 77, 0.28);
    color: #1a1a1a;
}
.pg-qb__chart .pg-rt-chart__beat.is-slash.is-active {
    background: rgba(255, 210, 77, 0.18);
    color: #6a5300;
}

/* ── Measure editor input ──────────────────────────────────────── */
.pg-qb__edit-wrap {
    position: absolute;
    z-index: 30;
}
.pg-qb__edit-wrap .pg-qb__edit { position: static; display: block; }
.pg-qb__edit-tools {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    max-width: calc(100vw - 16px);
    flex-wrap: wrap;
    padding: 5px 7px;
    background: #fff;
    border: 1px solid #e0dacd;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(30, 27, 24, 0.14);
    font-size: 11px;
    color: #8a8175;
}
.pg-qb__edit-tools button {
    padding: 3px 8px;
    font-size: 11px;
    border: 1px solid #e0dacd;
    border-radius: 6px;
    background: #fff;
    color: #6b6459;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
}
.pg-qb__edit-tools button:hover { color: #1e1b18; border-color: #c9c2b6; }
.pg-qb__edit-tools button:disabled { opacity: 0.4; cursor: default; }
.pg-qb__edit-tools-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 9.5px;
    font-weight: 700;
}
.pg-qb__edit-tools-count {
    min-width: 1.2em;
    text-align: center;
    font-weight: 700;
    color: #1e1b18;
    font-size: 12px;
}
.pg-qb__edit-tools-div {
    width: 1px;
    align-self: stretch;
    background: #e0dacd;
    margin: 0 3px;
}
.pg-qb__edit {
    position: absolute;
    z-index: 30;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Source Serif 4', Charter, Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    padding: 4px 6px;
    border: 2px solid var(--pg-blue, #1E4F75);
    border-radius: 6px;
    background: #fff;
    color: #1e1b18;
    box-shadow: 0 2px 10px rgba(30, 27, 24, 0.18);
}
.pg-qb__edit:focus { outline: none; }

/* ── Add-bar tile at the end of each section ───────────────────── */
.pg-qb__chart .pg-qb-addbar {
    border: 0;
    background: transparent;
    color: #b3aca0;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 5px;
}
.pg-qb__chart .pg-qb-addbar:hover { color: var(--pg-blue, #1E4F75); }

/* ── Page actions ──────────────────────────────────────────────── */
.pg-qb__actions { display: flex; gap: 10px; margin: 6px 0 0; }
.pg-qb__btn {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #d9d3c7;
    border-radius: 8px;
    background: #fff;
    color: #1e1b18;
    cursor: pointer;
}
.pg-qb__btn:hover { border-color: #b3aca0; }
.pg-qb__btn--quiet { border-color: transparent; color: #8a8175; background: transparent; }
.pg-qb__hint {
    margin: 12px 2px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #8a8175;
}
.pg-qb__hint kbd {
    font-size: 11px;
    padding: 1px 5px;
    border: 1px solid #d9d3c7;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #faf8f4;
}

/* ── Count-in overlay ──────────────────────────────────────────── */
.pg-qb__countin-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 100000; /* above every console/playstrip card; paywall is higher */
    font-size: 120px;
    font-weight: 800;
    /* The modal's overlay treatment: dim + blur the page behind the
       count so it reads as an overlay, not loose text (Phil 2026-08-19). */
    background: rgba(0, 0, 0, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--pg-white, #fff);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ── Paywall ───────────────────────────────────────────────────── */
.pg-qb__paywall {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 27, 24, 0.45);
    padding: 20px;
}
.pg-qb__paywall-card {
    max-width: 430px;
    background: #fff;
    border-radius: 14px;
    padding: 28px 30px;
    box-shadow: 0 12px 40px rgba(30, 27, 24, 0.3);
    text-align: center;
}
.pg-qb__paywall-card h3 {
    margin: 0 0 10px;
    font-size: 21px;
    color: #1e1b18;
}
.pg-qb__paywall-card p {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #55504a;
}
.pg-qb__paywall-cta {
    display: inline-block;
    padding: 11px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--pg-blue, #1E4F75);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.pg-qb__paywall-cta:hover { background: #17415f; text-decoration: none; }
.pg-qb__paywall-dismiss {
    display: block;
    margin: 14px auto 0;
    border: 0;
    background: transparent;
    color: #8a8175;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}

/* ── Mobile (≤1024px): the /app boxed light-cell chart skin ────── */
@media (max-width: 1024px), (max-height: 500px) {
    .pg-qb__chart .pg-rt-chart {
        color: #1a1a1a;
        margin: 0 0 18px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .pg-qb__chart .pg-rt-chart__row {
        gap: 6px;
        margin: 0 0 6px;
        border-left: 0;
    }
    .pg-qb__chart .pg-rt-chart__measure {
        background: #e5e7eb;
        border: 0;
        border-right: 0;
        border-radius: 6px;
        padding: 0;
        gap: 1px;
        overflow: hidden;
    }
    .pg-qb__chart .pg-rt-chart__beat {
        padding: 12px 4px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0;
        background: #ffffff;
        color: var(--pg-blue, #1E4F75);
        border-radius: 0;
    }
    .pg-qb__chart .pg-rt-chart__beat.is-slash {
        color: #cbd5e1;
        font-family: inherit;
        font-style: normal;
        font-weight: 500;
    }
    .pg-qb__chart .pg-rt-chart__beat.is-inherited {
        color: rgba(30, 79, 117, 0.45);
        font-weight: 500;
    }
    .pg-qb__chart .pg-rt-chart__beat.is-active {
        background: #fff4cf;
        color: #1a1a1a;
    }
    .pg-qb__chart .pg-rt-chart__beat.is-slash.is-active {
        background: #fff4cf;
        color: #6a5300;
    }
    .pg-qb__countin-overlay { font-size: 90px; }
    .pg-qb__ctl--tempo input[type="range"] { width: 100px; }
}

/* ── Standalone-final additions (2026-08-18 evening) ───────────── */

/* Give this page the width the modal's console actually needs. */
.pg-tool-hero__inner:has([data-pg-qb]) { max-width: 1180px; }

/* Console card sits ABOVE the playstrip (the modal's top-bar order):
   deck · master · key/capo/time · tempo · trainer pills, one row. */
.pg-qb .pg-practice__transport { margin-bottom: 0; }
.pg-qb .pgpt__console { align-items: center; }
.pg-qb .pg-qb__master {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    align-self: center;
}
.pg-qb .pg-qb__master .pgpt__master-fader-input { width: 90px; }
.pg-qb .pgpt__console-pills {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: center;
}
/* Trainer pill popovers anchor to their pill. */
.pg-qb .pgpt__speed, .pg-qb .pgpt__dropout { position: relative; }

/* Display popover lives at the playstrip's right edge, like the modal. */
.pg-qb .pg-qb__strip-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    position: relative;
}
.pg-qb .pg-qb__strip-right .pgbk__display { position: relative; }

/* The deck is a FLYOUT in desktop backing (absolutely positioned under
   the source selector) — pin it back into normal flow inside our
   console so the knobs sit inline like a hardware bar. */
.pg-qb .pg-qb__deck,
.pg-qb .pg-qb__deck .pgpt-backing__seg {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.pg-qb .pg-qb__deck .pgpt-backing__seg { cursor: default; }


/* ── Title + console tidy (Phil, 2026-08-18 night) ─────────────── */
.pg-qb__titlerow { margin: 0 0 12px; }
.pg-qb__title {
    width: 100%;
    max-width: 560px;
    font-size: 22px;
    font-weight: 700;
    color: #1e1b18;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #e2ddd3;
    padding: 4px 2px 6px;
}
.pg-qb__title:focus { outline: none; border-bottom-color: var(--pg-blue, #1E4F75); }
.pg-qb__title::placeholder { color: #b3aca0; font-weight: 600; }

/* Backing Band seg: knobs left, bassruns + master stacked at right —
   nothing floating outside a card. */
.pg-qb .pg-qb__deck .pgpt-backing__seg {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.pg-qb .pg-qb__deck .pgpt-backing__seg--band {
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    padding: 8px 14px !important;
}
.pg-qb .pg-qb__deck .pgpt-backing__seg--band .pgpt-backing__seg-header { display: none; }
/* Metro seg keeps the modal's column rack layout. */
.pg-qb .pg-qb__deck .pgpt-backing__seg--metro {
    flex-direction: column !important;
    padding: 8px 12px 10px !important;
    gap: 6px;
}
.pg-qb .pg-qb__deck { gap: 12px; }
.pg-qb__seg-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.pg-qb__master-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}
.pg-qb__master-wrap .pgpt__master-fader { display: flex; align-items: center; gap: 6px; }
.pg-qb__master-wrap .pgpt__master-fader-input { width: 84px; }
.pg-qb__master-lbl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #8a8f96;
}
/* Retire the old free-floating master block styles. */
.pg-qb .pg-qb__master { position: static; }

/* Tempo type-in box: looks like the readout, edits like an input. */
.pg-qb__bpm-input {
    width: 3.2em;
    text-align: right;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 1px 3px;
}
.pg-qb__bpm-input:hover { border-color: rgba(255,255,255,0.25); }
.pg-qb__bpm-input:focus { outline: none; border-color: var(--pg-blue, #4a9eff); background: rgba(0,0,0,0.3); }
.pg-qb__bpm-unit {
    font-size: inherit;
    font-weight: inherit;
    margin-left: 3px;
}

/* Loop readout in the playstrip — the modal's "what's looping" label. */
.pg-qb__loop-readout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pg-blue, #1E4F75);
    background: rgba(30, 79, 117, 0.08);
    border: 1px solid rgba(30, 79, 117, 0.25);
    border-radius: 999px;
}
.pg-qb__loop-readout button {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 0 2px;
}


/* ── One-panel player card ─────────────────────────────────────── */
.pg-qb__panel {
    border: 1px solid #ddd6c9;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(30, 27, 24, 0.08);
    margin-bottom: 6px;
}


/* ── Layout pass: compose the console as one balanced row ────────
   (Phil: content crammed left with a dead right half, misaligned
   clusters, nested-card playstrip. Distribute across the full card,
   align every cluster's vertical center, flatten inner chrome.) */
.pg-qb .pg-practice[data-mode="backing"] .pgpt__console {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px !important;
    width: auto;
}
.pg-qb .pg-qb__deck { flex: 0 0 auto; }
.pg-qb .pg-qb__deck .pgpt-backing__seg {
    padding: 10px 14px !important;
    gap: 14px;
}
.pg-qb .pgpt__tempo-seg {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
}
.pg-qb .pgpt__key-slot { flex: 0 0 auto; }
.pg-qb .pgpt__console-key-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pg-qb .pgpt__console-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    flex: 0 1 auto;
}
.pg-qb .pgpt__fader-block { min-width: 230px; flex: 0 1 320px; }

/* Readout text on the WHITE card — the modal's light-on-dark readout
   colors are illegible here. */
.pg-qb .pgpt__fader-bpm,
.pg-qb .pg-qb__bpm-input,
.pg-qb .pg-qb__bpm-unit { color: #1e1b18; font-weight: 700; }
.pg-qb .pgpt__fader-pct { color: #8a8175; }
.pg-qb .pgpt__fader-readout { justify-content: center; }
.pg-qb .pg-qb__bpm-input:hover { border-color: #c9c2b6; }
.pg-qb .pg-qb__bpm-input:focus { background: #faf8f4; border-color: var(--pg-blue, #1E4F75); }

/* Playstrip: flat row of the panel, not a card-in-a-card. */
.pg-qb__panel .pgbk__playstrip {
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 12px 20px !important;
}
.pg-qb__panel .pgbk__metro-strip {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    padding: 0 0 14px !important;
}

/* Title sits on the chart, under the controls. */
.pg-qb__titlerow {
    margin: 22px 0 4px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.pg-qb__title { max-width: 420px; font-size: 24px; flex: 1 1 260px; }
.pg-qb__saveblock {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}
.pg-qb__save-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 90;
    min-width: 250px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e0dacd;
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(30, 27, 24, 0.16);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pg-qb__save-pop-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8a8175;
    padding: 0 2px 2px;
}
.pg-qb__save-pop > button {
    text-align: left;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #e9e4d9;
    border-radius: 7px;
    background: #fff;
    color: #1e1b18;
    cursor: pointer;
}
.pg-qb__save-pop > button:hover { border-color: #c9c2b6; background: #faf8f4; }
.pg-qb__save-pop > button span {
    font-size: 11px;
    font-weight: 500;
    color: #8a8175;
    margin-left: 5px;
}
.pg-qb__save-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid #d9d3c7;
    border-radius: 7px;
    margin-top: 2px;
}
.pg-qb__save-search input:focus { outline: none; border-color: var(--pg-blue, #1E4F75); }
.pg-qb__save-results {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 5px;
}
.pg-qb__save-results button {
    text-align: left;
    padding: 6px 10px;
    font-size: 13px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #1e1b18;
    cursor: pointer;
}
.pg-qb__save-results button:hover { background: #f2efe8; }
.pg-qb__save-results button span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a8175;
    margin-left: 6px;
}
.pg-qb__save-none { font-size: 12px; color: #8a8175; padding: 4px 10px; }
.pg-qb__save.is-saved {
    color: #2e7d32;
    border-color: #bcd8be;
}
.pg-qb__save-links { font-size: 13px; color: #8a8175; }
.pg-qb__save-links a {
    color: var(--pg-blue, #1E4F75);
    font-weight: 600;
    text-decoration: none;
    margin-right: 12px;
}
.pg-qb__save-links a:last-child { margin-right: 0; }

/* Loop selection painting (drag across bars). Mirrors the modal's
   is-loop / is-loop-preview measure treatment on our chart skin. */
.pg-qb__chart .pg-rt-chart__measure.is-loop-preview {
    background: rgba(30, 79, 117, 0.08);
}
.pg-qb__chart .pg-rt-chart__measure.is-loop {
    background: rgba(30, 79, 117, 0.10);
    box-shadow: inset 0 -2px 0 var(--pg-blue, #1E4F75), inset 0 2px 0 var(--pg-blue, #1E4F75);
}
/* Dragging shouldn't select chord text. */
.pg-qb__chart .pg-rt-chart { user-select: none; -webkit-user-select: none; }

/* ── Slim light bar (2026-08-18 final polish) ──────────────────────
   One light panel, two slim rows, no dark segs at rest, minimal
   borders. Knobs/master live in the Band popover. */
.pg-qb__panel { border: 1px solid #e5e0d5; box-shadow: 0 2px 10px rgba(30,27,24,0.06); }
.pg-qb__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 10px 18px;
}
.pg-qb__bar--transport {
    border-top: 1px solid #f0ede6;
    justify-content: flex-start;
}
.pg-qb__band { position: relative; }
.pg-qb__band-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    color: #1e1b18;
    background: #fff;
    border: 1px solid #ddd6c9;
    border-radius: 8px;
    cursor: pointer;
}
.pg-qb__band-btn:hover { border-color: #b3aca0; }
.pg-qb__band-btn[aria-expanded="true"] {
    background: var(--pg-blue, #1E4F75);
    border-color: var(--pg-blue, #1E4F75);
    color: #fff;
}
.pg-qb__band-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.pg-qb__band-pop[hidden] { display: none !important; }
.pg-qb__band-pop .pgpt-backing__knobs { display: flex; gap: 16px; }
.pg-qb__band-pop-side { display: flex; flex-direction: column; gap: 10px; }
.pg-qb__mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a39b8d;
}
.pg-qb__mini select {
    font-size: 13.5px;
    font-weight: 600;
    padding: 5px 7px;
    border: 1px solid #e0dacd;
    border-radius: 7px;
    background: #fff;
    color: #1e1b18;
}
.pg-qb__tempo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 380px;
}
.pg-qb__tempo-slider {
    flex: 1 1 auto;
    accent-color: var(--pg-blue, #1E4F75);
    height: 4px;
}
.pg-qb__step {
    width: 24px; height: 24px;
    border: 1px solid #e0dacd;
    border-radius: 6px;
    background: #fff;
    color: #6b6459;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
.pg-qb__step:hover { color: #1e1b18; border-color: #c9c2b6; }
.pg-qb__tempo-readout {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: #1e1b18;
}
.pg-qb__bpm-dot, .pg-qb__bpm-pct { color: #a39b8d; font-weight: 600; font-size: 12.5px; }
.pg-qb__bpm-pct { cursor: pointer; }
.pg-qb__trainers { display: inline-flex; gap: 8px; margin-left: auto; }
/* Trainer pills: light chrome to match the bar. */
.pg-qb .pgpt__speed-pill, .pg-qb .pgpt__dropout-pill {
    background: #fff;
    border: 1px solid #ddd6c9;
    color: #6b6459;
    box-shadow: none;
    font-size: 12.5px;
    padding: 6px 11px;
}
.pg-qb .pgpt__speed-pill[aria-pressed="true"], .pg-qb .pgpt__dropout-pill[aria-pressed="true"] {
    background: var(--pg-blue, #1E4F75);
    border-color: var(--pg-blue, #1E4F75);
    color: #fff;
}
/* Count-in pill light too. */
.pg-qb .pgpt__preroll-pill {
    background: #fff;
    border: 1px solid #ddd6c9;
    color: #6b6459;
    box-shadow: none;
    font-size: 12.5px;
    padding: 6px 11px;
}
.pg-qb .pgpt__preroll-pill[data-on="1"] {
    background: var(--pg-blue, #1E4F75);
    border-color: var(--pg-blue, #1E4F75);
    color: #fff;
}
.pg-qb__transport-mid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
}
.pg-qb__transport-mid .pg-qb__metro { display: flex !important; gap: 5px; margin-left: 14px; }
.pg-qb__transport-mid .pgpt__metro-dot { width: 14px; height: 14px; border-width: 1px; }
.pg-qb__strip-right { margin-left: auto; position: relative; }

/* ── Modal-style white Band flyout + bar-level master ──────────── */
.pg-qb__panel { overflow: visible; }   /* the flyout must escape the card */
.pg-qb__band-pop {
    background: #fff;
    border: 1px solid #e2ddd3;
    box-shadow: 0 10px 32px rgba(30, 27, 24, 0.18);
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px 20px 14px;
}
.pg-qb__band-pop-rule { border-top: 1px solid #eee9df; }
.pg-qb__band-pop .pgpt-backing__bassruns { color: #1e1b18; }
.pg-qb .pg-qb__master {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: static;
}
.pg-qb .pg-qb__master .pgpt__master-fader-mute { color: #6b6459; background: transparent; border: 0; cursor: pointer; }
.pg-qb .pg-qb__master .pgpt__master-fader-input {
    width: 110px;
    accent-color: var(--pg-blue, #1E4F75);
}
/* Armed dots: unarmed = hollow/dim, armed = filled ring, active flash
   only on armed beats (modal behavior; is-armed styles local since our
   bar is light). */
.pg-qb .pgpt__metro-dot {
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #d9d3c7;
    box-shadow: none;
}
.pg-qb .pgpt__metro-dot.is-armed {
    border-color: var(--pg-blue, #1E4F75);
    background: rgba(30, 79, 117, 0.12);
}
.pg-qb .pgpt__metro-dot.is-active {
    background: var(--pg-blue, #1E4F75);
    border-color: var(--pg-blue, #1E4F75);
}

/* Trainer popovers: the modal positions these FIXED at 0,0 and moves
   them with its own JS — which doesn't run here, so they rendered at
   the viewport corner. Anchor them to their pills instead. */
.pg-qb .pgpt__speed, .pg-qb .pgpt__dropout { position: relative; }
.pg-qb .pgpt__speed-pop,
.pg-qb .pgpt__dropout-pop {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* ── One-row bar, modal stacking ───────────────────────────────── */
.pg-qb__kc { display: flex; flex-direction: column; gap: 6px; }
.pg-qb__kc .pg-qb__mini { justify-content: flex-end; }
.pg-qb__kc select { min-width: 84px; }
@media (min-width: 1000px) {
    .pg-qb__bar:not(.pg-qb__bar--transport) {
        flex-wrap: nowrap;
        gap: 0;
        justify-content: space-between;
    }
    .pg-qb__bar:not(.pg-qb__bar--transport) > * { margin: 0; }
    .pg-qb__kc, .pgpt__fader-block, .pg-qb .pgpt__console-pills {
        border-left: 1px solid #eee9df;
        padding-left: 22px;
        margin-left: 22px !important;
    }
    .pgpt__fader-block { flex: 0 1 340px; min-width: 220px; }
}
/* Loop-clear chip on the last looped bar. */
.pg-qb__loop-clear-chip {
    position: absolute;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid var(--pg-blue, #1E4F75);
    background: #fff;
    color: var(--pg-blue, #1E4F75);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(30,27,24,0.2);
}
.pg-qb__loop-clear-chip:hover { background: var(--pg-blue, #1E4F75); color: #fff; }


/* Count-in hover: the modal's hover recolors the label for its dark
   pill — on our light pill the text vanished. Keep it legible. */
.pg-qb .pgpt__preroll-pill:hover,
.pg-qb .pgpt__preroll-pill:hover .pgpt__preroll-pill-lbl,
.pg-qb .pgpt__preroll-pill:hover .pgpt__preroll-pill-icon {
    color: #1e1b18 !important;
    background-color: #f6f3ec;
}
.pg-qb .pgpt__preroll-pill[data-on="1"]:hover,
.pg-qb .pgpt__preroll-pill[data-on="1"]:hover .pgpt__preroll-pill-lbl,
.pg-qb .pgpt__preroll-pill[data-on="1"]:hover .pgpt__preroll-pill-icon {
    color: #fff !important;
    background-color: var(--pg-blue, #1E4F75);
}
/* Trainer pills: keep them from wrapping to two lines. */
.pg-qb .pgpt__speed-pill, .pg-qb .pgpt__dropout-pill { white-space: nowrap; }

/* Band button stacked over the master slider — one compact cluster. */
.pg-qb__bandmaster {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.pg-qb__bandmaster .pg-qb__master .pgpt__master-fader-input { width: 96px; }

/* Hero lead quieting without :has (belt and suspenders vs stale HTML). */
.page-id-539752 .pg-tool-hero__lead,
body.page .pg-tool-hero__inner:has([data-pg-qb]) .pg-tool-hero__lead {
    font-size: 13.5px;
    line-height: 1.5;
    color: #a39b8d;
    max-width: 640px;
    margin: 0 auto 18px;
}

/* Band button centered over the master slider. */
.pg-qb__bandmaster { align-items: center; }

/* Center the Band button on the slider TRACK, not track + speaker:
   nudge by half the speaker button's footprint. */
.pg-qb__bandmaster .pg-qb__band { transform: translateX(11px); }

/* The translateX nudge made .pg-qb__band a stacking context under its
   siblings — the master slider painted over the open popover. Lift the
   group and the pop itself. */
.pg-qb__bandmaster .pg-qb__band { z-index: 70; }
.pg-qb__band-pop { z-index: 99000; }