/* ══ Practice modal, Backing redesign (2026-09-18, option pg_modal_refresh_open) ══ The original modal (blue top bar, playlist, modes) with Backing rebuilt around the song page's control strip: the song as the chart's heading (title · Key · Capo · Time · Form-as-readout), the strip (band.css) over the chart, and one control for what sits beside the chart. Every rule is scoped to .pg-practice[data-refresh]; with the option off, none of it applies. */ /* ── Top bar in Backing: the tune's keys, not the recording's credit ── */ .pg-practice[data-refresh] .pgtb__credit-lbl { font-weight: 600; color: #cfd6de; } .pg-practice[data-refresh] .pgtb__credit-sep { margin: 0 5px; color: #5b6470; } .pg-practice .pgtb__keys { display: none; font-size: 13px; font-weight: 500; color: #a8b0ba; flex: 0 1 auto; white-space: nowrap; } .pg-practice[data-refresh][data-mode="backing"] .pgtb__keys:not(:empty) { display: inline; } .pg-practice[data-refresh][data-mode="backing"] .pgtb__keys::before { content: "\B7"; margin-right: 6px; color: #5b6470; } .pg-practice[data-refresh][data-mode="backing"] .pgtb__artist, .pg-practice[data-refresh][data-mode="backing"] .pgtb__origkey, .pg-practice[data-refresh][data-mode="backing"] .pgtb__waltz, .pg-practice[data-refresh][data-mode="backing"] .pgtb__form, .pg-practice[data-refresh][data-mode="backing"] .pgtb__tuning { display: none; } /* ── Backing: the old chrome goes — from the first frame, not once the band has mounted (it flashed the old design on open). ─────────────── */ .pg-practice[data-refresh][data-mode="backing"] .pg-practice__transport, .pg-practice[data-refresh][data-mode="backing"] .pgbk__playstrip, .pg-practice[data-refresh][data-mode="backing"] .pgbk__metro-strip, .pg-practice[data-refresh][data-mode="backing"] .pgbk__chart-tools { display: none !important; } .pg-practice[data-refresh] .pgbk2 { --pgb-ink: #1f2937; --pgb-ink-2: #374151; --pgb-muted: #6b7280; --pgb-faint: #9aa1ab; --pgb-line: #e5e7eb; --pgb-line-2: #eef0f2; --pgb-soft: #f3f4f6; --pgb-green: #53a96b; --pgb-green-soft: #ecf6ef; --pgb-green-line: #b3d4bd; --pgb-green-d: #2c6b40; --pgb-blue: #1e4f75; --pgb-blue-soft: #eef4f9; container-type: inline-size; display: flex; flex-direction: column; gap: 12px; margin: 0 24px; padding: 18px 0 4px; } .pg-practice[data-refresh] .pgbk2 * { box-sizing: border-box; } /* The heading: the title, then its facts in the song page's label style. */ .pg-practice[data-refresh] .pgbk2__head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 28px; } .pg-practice[data-refresh] .pgbk2__title { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; color: #111827; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-practice[data-refresh] .pgbk2__title:empty { display: none; } .pg-practice[data-refresh] .pgbk2__meta { display: flex; align-items: flex-end; gap: 22px; flex: none; } .pg-practice[data-refresh] .pgbk2__field { display: flex; flex-direction: column; gap: 4px; margin: 0; } .pg-practice[data-refresh] .pgbk2__field[hidden] { display: none; } .pg-practice[data-refresh] .pgbk2__lbl { font: 700 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #8a8078; } .pg-practice[data-refresh] .pgbk2__sel { height: 30px; min-width: 64px; padding: 0 24px 0 10px; margin: 0; border: 1px solid #e5e7eb; border-radius: 9px; background-color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; color: #111827; cursor: pointer; } .pg-practice[data-refresh] .pgbk2__val { font-size: 17px; font-weight: 700; color: #111827; line-height: 30px; } /* Form as the readout: every letter, the one playing lit. */ .pg-practice[data-refresh] .pgbk2__form { display: inline-flex; gap: 2px; font-size: 17px; font-weight: 700; color: #1e4f75; letter-spacing: .02em; line-height: 30px; min-height: 30px; } .pg-practice[data-refresh] .pgbk2__form i { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 26px; margin-top: 2px; border-radius: 6px; transition: background .12s, color .12s; } .pg-practice[data-refresh] .pgbk2__form i.is-now { background: #53a96b; color: #fff; } /* The strip: the song page's card. */ .pg-practice[data-refresh] .pgbk2__band { padding: 10px 14px; border-radius: 12px; background: #f7f8fa; border: 0; } /* Band | Metronome beside the Band icon; the popover's own switch goes. */ .pg-practice[data-refresh] .pgbk2 .pg-band-pop .pg-band-seg:has([data-qb="src-band"]) { display: none; } .pg-practice[data-refresh] .pgbk2__src, .pg-practice[data-refresh] .pgbk2__view { display: inline-flex; flex: none; height: 30px; margin-left: auto; border: 1px solid #e5e7eb; border-radius: 9px; overflow: hidden; background: #fff; } .pg-practice[data-refresh] .pgbk2__src { margin-left: 6px; } .pg-practice[data-refresh] .pgbk2__view[hidden] { display: none; } .pg-practice[data-refresh] .pgbk2__view button { height: 100%; padding: 0 11px; margin: 0; border: 0; border-radius: 0; background: none; font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #6b7280; cursor: pointer; } .pg-practice[data-refresh] .pgbk2__view button:not([hidden]) ~ button:not([hidden]) { border-left: 1px solid #e5e7eb; } .pg-practice[data-refresh] .pgbk2__view button[hidden] { display: none; } .pg-practice[data-refresh] .pgbk2__view button:hover { color: #111827; } .pg-practice[data-refresh] .pgbk2__view button[aria-pressed="true"] { background: #eef4f9; color: #1e4f75; } .pg-practice[data-refresh] .pgbk2 .pg-band__opts .pg-band-sp { display: block; flex: 1 1 auto; } /* The chart's Display options: a gear in the chart panel's top-right corner, on the first section label's row (the beat dots' row). */ .pg-practice[data-refresh] .pgbk2__gear { flex: none; margin-left: 6px; } .pg-practice[data-refresh] .pgbk2__gear:empty { display: none; } .pg-practice[data-refresh] .pgbk2__metro-row .pgbk2__gear { position: absolute; right: 16px; top: 0; margin: 0; pointer-events: auto; display: flex; } .pg-practice[data-refresh] .pgbk2__gear .pgbk__display-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; margin: 0; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #374151; cursor: pointer; } .pg-practice[data-refresh] .pgbk2__gear .pgbk__display-btn:hover, .pg-practice[data-refresh] .pgbk2__gear .pgbk__display-btn[aria-expanded="true"] { border-color: #cdd4da; color: #1e4f75; } .pg-practice[data-refresh] .pgbk2__gear .pgbk__display-btn-lbl, .pg-practice[data-refresh] .pgbk2__gear .pgbk__display-btn-caret { display: none; } .pg-practice[data-refresh] .pgbk2__gear .pgbk2__gear-i { width: 16px; height: 16px; } .pg-practice[data-refresh] .pgbk2__gear .pgbk__display-pop { right: 0; left: auto; top: calc(100% + 6px); z-index: 40; } /* Tempo: − slider + and the number, the − / + in the strip's button style. */ .pg-practice[data-refresh] .pgbk2 .pg-band-tempo { flex: 0 1 420px; max-width: 420px; gap: 8px; } .pg-practice[data-refresh] .pgbk2 .pg-band-tempo .pg-band-lbl { display: none; } .pg-practice[data-refresh] .pgbk2 .pg-band-tempo__step { flex: none; width: 28px; height: 28px; padding: 0; margin: 0; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font-size: 16px; font-weight: 600; line-height: 1; color: #374151; display: inline-grid; place-items: center; cursor: pointer; touch-action: manipulation; } .pg-practice[data-refresh] .pgbk2 .pg-band-tempo__step:hover { border-color: #cdd4da; color: #111827; } .pg-practice[data-refresh] .pgbk2 .pg-band-tempo__read { margin-left: 4px; } /* The beat dots over the chart, on the first section label's row. */ .pg-practice[data-refresh] .pgbk2__metro-row { position: relative; height: 0; display: flex; justify-content: center; z-index: 5; pointer-events: none; } .pg-practice[data-refresh] .pgbk2__metro-row .pg-band-metro { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; margin: 0; } .pg-practice[data-refresh] .pgbk2__metro-row .pg-band-metro__dot { width: 14px; height: 14px; } /* ── Phones (a pass of their own later — desktop first, Phil) ───────── */ @media (max-width: 1024px), (max-height: 500px) { .pg-practice[data-refresh] .pgbk2 { margin: 0 12px; padding-top: 12px; } .pg-practice[data-refresh] .pgbk2__title { font-size: 21px; } .pg-practice[data-refresh] .pgbk2__head { gap: 8px 18px; } .pg-practice[data-refresh] .pgbk2__meta { gap: 14px; flex-wrap: wrap; } .pg-practice[data-refresh][data-band2] .pgbk__chart-wrap.is-split-mel { flex-direction: column; } .pg-practice[data-refresh][data-band2] .pgbk__chart-wrap.is-split-mel > .pgbk__chart { display: none; } .pg-practice[data-refresh][data-band2] .pgbk__chart-wrap.is-split-mel > .pgbk__melody { flex: 1 1 100%; border-left: 0; padding: 8px 12px 24px; } .pg-practice[data-refresh] .pgbk2__metro-row:has(+ .pgbk__chart-wrap.is-split-mel) { display: none; } } /* ── Backing: the melody beside the chart (tunes with a melody) ───── The split slot's third occupant, same geometry as Lyrics and Tab. The pane is the shared melody pane (assets/tab-engine/melody-pane.js), which draws with the app's class names — styled here for the modal. */ .pg-practice[data-refresh] .pgbk__mel-btn[hidden] { display: none; } .pg-practice[data-refresh] .pgbk__mel-btn[aria-pressed="true"] { background: #eef4f9; color: #1e4f75; border-color: #cfdcea; } .pg-practice[data-refresh] .pgbk__melody { display: none; flex: 1 1 50%; min-width: 0; overflow: auto; padding: 14px 18px 28px; background: #fff; border-left: 1px solid #e5e7eb; } .pg-practice[data-refresh] .pgbk__chart-wrap.is-split-mel { flex-direction: row; } .pg-practice[data-refresh] .pgbk__chart-wrap.is-split-mel > .pgbk__chart { flex: 1 1 50%; min-width: 0; } .pg-practice[data-refresh] .pgbk__chart-wrap.is-split-mel > .pgbk__melody { display: block; } .pgbk__melody .pg-app__melody-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; } .pgbk__melody .pg-app__melody-chips[hidden] { display: none; } .pgbk__melody .pg-app__pill { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 20px 0 10px; margin: 0; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff no-repeat right 6px center / 10px 10px url("data:image/svg+xml;utf8,"); font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2937; } .pgbk__melody .pg-app__pill[hidden] { display: none; } .pgbk__melody .pg-app__pill-lbl { color: #6b7280; font-weight: 600; } .pgbk__melody .pg-app__pill-sel { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; margin: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; } .pgbk__melody .pg-app__melody-seg { display: inline-flex; height: 32px; border: 1px solid #e5e7eb; border-radius: 999px; overflow: hidden; background: #fff; } .pgbk__melody .pg-app__melody-seg[hidden] { display: none; } .pgbk__melody .pg-app__melody-seg button { height: 30px; padding: 0 11px; margin: 0; border: 0; border-radius: 0; background: none; font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #6b7280; cursor: pointer; } .pgbk__melody .pg-app__melody-seg button + button { border-left: 1px solid #e5e7eb; } .pgbk__melody .pg-app__melody-seg button[aria-pressed="true"] { background: #eef4f9; color: #1e4f75; } .pgbk__melody .pg-app__melody-seg button[hidden] { display: none; } .pgbk__melody .pg-app__melody-seg button:disabled { opacity: .45; } .pgbk__melody .pg-app__melody-stage { color: #1f2937; } .pgbk__melody .pg-app__melody-part { margin: 12px 0 0 38px; font: 700 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #8a8078; } .pgbk__melody .pg-app__melody-line { margin-bottom: -6px; overflow-x: auto; } .pgbk__melody .pg-app__melody-line svg { display: block; max-width: none; } .pgbk__melody [data-pg-tab-note][data-lit] rect { fill: #1e4f75; } .pgbk__melody [data-pg-tab-note][data-lit] text { fill: #fff; } .pgbk__melody [data-pg-staff-note][data-lit] ellipse, .pgbk__melody [data-pg-staff-note][data-lit] circle { fill: #1e4f75; stroke: #1e4f75; stroke-width: 7; stroke-opacity: .22; paint-order: stroke; } .pgbk__melody [data-pg-staff-note][data-lit] line, .pgbk__melody [data-pg-staff-note][data-lit] text { stroke: #1e4f75; fill: #1e4f75; } .pgbk__melody [data-pg-jp-note][data-lit] text { fill: #1e4f75; font-weight: 700; } .pgbk__melody [data-pg-jp-chord] { fill: #1e4f75; font-weight: 700; } .pgbk__melody .pg-app__placeholder { color: #6b7280; font-size: 14px; } .pgbk__melody .pg-app__melody-lock { position: relative; margin-top: -28px; padding: 40px 16px 18px; text-align: center; } .pgbk__melody .pg-app__melody-ghost { position: absolute; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%); pointer-events: none; } .pgbk__melody .pg-app__melody-lock p { position: relative; margin: 0 0 12px; color: #6b7280; font-size: 14px; line-height: 1.45; } .pgbk__melody .pg-app__melody-join { position: relative; display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 10px; background: #53a96b; color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none !important; } /* With a pane beside the chart, the dots centre over the CHART half. */ .pg-practice[data-refresh] .pgbk2__metro-row:has(+ .pgbk__chart-wrap.is-split), .pg-practice[data-refresh] .pgbk2__metro-row:has(+ .pgbk__chart-wrap.is-split-tab), .pg-practice[data-refresh] .pgbk2__metro-row:has(+ .pgbk__chart-wrap.is-split-mel) { width: 50%; } /* The melody panel's header: one fader — the speaker is on/off, the slider the level. The band mixer's own melody knob hides. */ .pg-practice[data-refresh] .pgbk2 .pg-band-knob[data-knob="melody"] { display: none !important; } .pg-practice[data-refresh] .pgbk2-melbar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .pg-practice[data-refresh] .pgbk2-melbar[hidden] { display: none; } .pg-practice[data-refresh] .pgbk2-melvol { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; } .pg-practice[data-refresh] .pgbk2-melvol__btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; margin: 0; border: 0; border-radius: 7px; background: none; cursor: pointer; font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #6b7280; } .pg-practice[data-refresh] .pgbk2-melvol__btn svg { width: 16px; height: 16px; } .pg-practice[data-refresh] .pgbk2-melvol__btn .is-on-i { display: none; } .pg-practice[data-refresh] .pgbk2-melvol.is-on .pgbk2-melvol__btn { color: #2c6b40; background: #ecf6ef; } .pg-practice[data-refresh] .pgbk2-melvol.is-on .pgbk2-melvol__btn .is-on-i { display: block; } .pg-practice[data-refresh] .pgbk2-melvol.is-on .pgbk2-melvol__btn .is-off-i { display: none; } .pg-practice[data-refresh] .pgbk2-melvol__btn:hover { color: #111827; } .pg-practice[data-refresh] .pgbk2-melvol__range { -webkit-appearance: none; appearance: none; width: 110px; height: 4px; margin: 0; border-radius: 2px; cursor: pointer; background: linear-gradient(90deg, #c3c8ce var(--fill, 100%), #eef0f2 0); } .pg-practice[data-refresh] .pgbk2-melvol.is-on .pgbk2-melvol__range { background: linear-gradient(90deg, #53a96b var(--fill, 100%), #eef0f2 0); } .pg-practice[data-refresh] .pgbk2-melvol__range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid #9aa1ab; } .pg-practice[data-refresh] .pgbk2-melvol.is-on .pgbk2-melvol__range::-webkit-slider-thumb { border-color: #53a96b; } .pg-practice[data-refresh] .pgbk2-melvol__range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid #9aa1ab; } /* The chart area has no card outline any more: it was the bottom of the old play strip's box, and with the strip gone it drew an open frame. */ .pg-practice[data-refresh][data-band2] .pgbk__chart-wrap { border: 0; border-radius: 0; box-shadow: none; } /* "Your tabs ▾" — the member's own charts, beside ours. */ .pg-practice[data-refresh] .pgbk2-own { position: relative; margin-left: auto; } .pg-practice[data-refresh] .pgbk2-own[hidden] { display: none; } .pg-practice[data-refresh] .pgbk2-own__btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; margin: 0; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; cursor: pointer; font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #374151; } .pg-practice[data-refresh] .pgbk2-own__btn svg { width: 12px; height: 12px; color: #9aa1ab; } .pg-practice[data-refresh] .pgbk2-own__btn:hover, .pg-practice[data-refresh] .pgbk2-own__btn[aria-expanded="true"] { border-color: #cdd4da; } .pg-practice[data-refresh] .pgbk2-own__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); } .pg-practice[data-refresh] .pgbk2-own__menu[hidden] { display: none; } .pg-practice[data-refresh] .pgbk2-own__menu button { display: block; width: 100%; padding: 8px 10px; margin: 0; border: 0; border-radius: 7px; background: none; text-align: left; cursor: pointer; font: 500 14px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2937; } .pg-practice[data-refresh] .pgbk2-own__menu button:hover { background: #f3f4f6; } .pg-practice[data-refresh] .pgbk2-own__menu [data-own-add] { color: #1e4f75; font-weight: 600; } /* In the member's tab view: a header row with the way back to ours. */ .pg-practice[data-refresh] .pgbk2-tabbar { display: flex; align-items: center; padding: 10px 12px 0; } .pg-practice[data-refresh] .pgbk2-tabbar[hidden] { display: none; } .pg-practice[data-refresh] .pgbk2-back { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px; margin: 0; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; cursor: pointer; font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1e4f75; } .pg-practice[data-refresh] .pgbk2-back svg { width: 14px; height: 14px; } .pg-practice[data-refresh] .pgbk2-back:hover { border-color: #cdd4da; background: #f8fafc; } /* ── Band | Metronome: pick one; its ▾ (or a hover) opens its settings ─ */ .pg-practice[data-refresh] .pgbk2 [data-qb="band-btn"] { display: none; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcseg { display: inline-flex; align-items: stretch; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcseg + .pgbk2__srcseg { border-left: 1px solid #e5e7eb; } .pg-practice[data-refresh] .pgbk2__src button { height: 100%; margin: 0; border: 0; border-radius: 0; background: none; cursor: pointer; font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #6b7280; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcpick { padding: 0 4px 0 11px; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcset { padding: 0 8px 0 3px; display: inline-grid; place-items: center; color: #9aa1ab; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcset svg { width: 11px; height: 11px; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcseg:hover .pgbk2__srcpick { color: #111827; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcset:hover { color: #1e4f75; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcseg.is-on { background: #eef4f9; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcseg.is-on .pgbk2__srcpick, .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcseg.is-on .pgbk2__srcset { color: #1e4f75; } /* ── Backing on desktop: the modes as tabs along the blue bar ─────────── */ .pg-practice.pgbk2-tabs .pg-practice__topbar { grid-template-columns: minmax(0, 1fr) auto; } .pg-practice.pgbk2-tabs .pgtb__modepicker { border-right: 0; padding-right: 0; margin-right: 0; align-self: stretch; } .pg-practice.pgbk2-tabs .pgtb__modepicker-btn { display: none; } .pg-practice.pgbk2-tabs .pgtb__modepicker .pgtb__modepicker-pop { position: static; display: flex; flex-direction: row; align-items: stretch; gap: 2px; height: 100%; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; } .pg-practice.pgbk2-tabs .pgtb__mode { height: 100%; padding: 0 14px; margin: 0; border-radius: 0; gap: 8px; background: none; font-size: 14px; font-weight: 600; letter-spacing: 0; color: #b9c4d0; box-shadow: inset 0 -3px 0 transparent; } .pg-practice.pgbk2-tabs .pgtb__mode:hover { color: #fff; background: rgba(255, 255, 255, .06); } .pg-practice.pgbk2-tabs .pgtb__mode .pgtb__mode-icon { color: var(--pg-mode, #fff); opacity: .8; } .pg-practice.pgbk2-tabs .pgtb__mode.is-active { color: #fff; background: none; box-shadow: inset 0 -3px 0 var(--pg-mode, #f0a24a); } .pg-practice.pgbk2-tabs .pgtb__mode.is-active .pgtb__mode-icon { opacity: 1; } .pg-practice.pgbk2-tabs .pgtb__mode--soon .pgtb__mode-soon { margin-left: 6px; } /* ── The title block in the heading (click the title to search) ────────── */ .pg-practice.pgbk2-titled .pgbk2__title { display: none; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__title-block { min-width: 0; flex: 0 1 auto; height: auto; padding: 0; background: none; border: 0; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__title-line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; width: auto; white-space: normal; overflow: visible; cursor: pointer; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__title { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "Switch song" hint: a quiet chevron after the title, darker on hover. */ .pg-practice.pgbk2-titled .pgbk2__head .pgtb__title::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 4px; background: currentColor; opacity: .3; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__title-line:hover .pgtb__title::after { opacity: .7; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__keys { display: block; font-size: 14px; font-weight: 500; color: #6b7280; white-space: normal; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__keys::before { content: none; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__credit-lbl { color: #4b5563; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__credit-sep { color: #c3c8ce; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__search { min-width: 360px; } /* In the heading the keys / source line starts its own line: no leading dot. */ .pg-practice.pgbk2-titled[data-refresh][data-mode="backing"] .pgbk2__head .pgtb__keys::before { content: none; } /* ── Backing's bar: tabs pinned left, on white (trial, 2026-09-18) ────── Phil: pin the modes left; revisit the blue. White with a hairline, dark tabs, the active one underlined in its mode's colour. */ .pg-practice.pgbk2-tabs .pgtb__modepicker { justify-self: start; } .pg-practice.pgbk2-tabs .pg-practice__topbar { background: #fff; color: #1f2937; border-bottom: 1px solid #e5e7eb; box-shadow: none; } .pg-practice.pgbk2-tabs .pgtb__mode { color: #6b7280; } .pg-practice.pgbk2-tabs .pgtb__mode:hover { color: #111827; background: #f7f8fa; } .pg-practice.pgbk2-tabs .pgtb__mode.is-active { color: #111827; box-shadow: inset 0 -3px 0 var(--pg-mode-flat, var(--pg-mode, #f0a24a)); } .pg-practice.pgbk2-tabs .pgtb__mode .pgtb__mode-icon { color: var(--pg-mode-flat, var(--pg-mode)); } .pg-practice.pgbk2-tabs .pgtb__mode-soon { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; } .pg-practice.pgbk2-tabs .pgrec__toggle { color: #1f2937; border-color: #e5e7eb; background: #fff; } .pg-practice.pgbk2-tabs .pgrec__toggle:hover { border-color: #cdd4da; } .pg-practice.pgbk2-tabs .pgtb__actions > button, .pg-practice.pgbk2-tabs .pg-practice__close { color: #6b7280; } .pg-practice.pgbk2-tabs .pgtb__actions > button:hover, .pg-practice.pgbk2-tabs .pg-practice__close:hover { background: #f3f4f6; color: #1f2937; } /* Chords: Letters | Numbers in the chart gear. */ .pg-practice[data-refresh] .pgbk2-dseg { display: inline-flex; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; } .pg-practice[data-refresh] .pgbk2-dseg span { padding: 5px 9px; font-size: 12px; font-weight: 600; color: #6b7280; } .pg-practice[data-refresh] .pgbk2-dseg span + span { border-left: 1px solid #e5e7eb; } .pg-practice[data-refresh] .pgbk2-dseg span.is-on { background: #eef4f9; color: #1e4f75; } /* ── Lyrics panel (Backing): header + gear, chords over the words, the song page's spacing, the whole song on screen ─────────────────── */ .pg-practice[data-refresh] .pgbk__lyrics-tools { display: none !important; } .pg-practice[data-refresh] .pgbk2-lyrhead { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-end; height: 0; padding: 0 18px; overflow: visible; } .pg-practice[data-refresh] .pgbk2-lyrhead__lbl { font: 700 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #8a8078; } .pg-practice[data-refresh] .pgbk2-lyrhead__gearwrap { position: relative; top: 30px; } .pg-practice[data-refresh] .pgbk2-lyrhead__gear { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; margin: 0; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #374151; cursor: pointer; } .pg-practice[data-refresh] .pgbk2-lyrhead__gear svg { width: 16px; height: 16px; } .pg-practice[data-refresh] .pgbk2-lyrhead__gear:hover, .pg-practice[data-refresh] .pgbk2-lyrhead__gear[aria-expanded="true"] { border-color: #cdd4da; color: #1e4f75; } .pg-practice[data-refresh] .pgbk2-lyrhead__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 250px; padding: 8px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2937; } .pg-practice[data-refresh] .pgbk2-lyrhead__pop[hidden] { display: none; } .pg-practice[data-refresh] .pgbk2-lyrhead__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; } .pg-practice[data-refresh] .pgbk2-lyrhead__row .pgbk2-dseg span { cursor: pointer; } .pg-practice[data-refresh] .pgbk2-lyrhead__size { display: inline-flex; align-items: center; gap: 6px; } .pg-practice[data-refresh] .pgbk2-lyrhead__size b { min-width: 42px; text-align: center; font-size: 12px; color: #374151; font-variant-numeric: tabular-nums; } .pg-practice[data-refresh] .pgbk2-lyrhead__size button { width: 26px; height: 26px; padding: 0; margin: 0; border: 1px solid #e5e7eb; border-radius: 7px; background: #fff; font-size: 15px; line-height: 1; color: #374151; cursor: pointer; } .pg-practice[data-refresh] .pgbk2-lyrhead__size button:hover { border-color: #cdd4da; } /* The song page's spacing — Fit no longer squeezes the verses together. */ .pg-practice[data-refresh] .pgbk2-lyr { padding: 16px 58px 28px 18px; } /* room on the right for the gear */ .pg-practice[data-refresh] .pgbk2-lyr .pgch__lyrics p, .pg-practice[data-refresh] .pgbk__lyrics-body[data-fit="1"].pgbk2-lyr .pgch__lyrics p { margin: 0 0 0.9em; } .pg-practice[data-refresh] .pgbk2-lyr .pgch__lyrics .pg-cm-section, .pg-practice[data-refresh] .pgbk__lyrics-body[data-fit="1"].pgbk2-lyr .pgch__lyrics .pg-cm-section { margin-bottom: 0.9em; break-inside: avoid; } .pg-practice[data-refresh] .pgbk2-lyr .pgch__lyrics { column-gap: 2.2em; } /* The song page's inline lyrics, exactly: its serif, 1.55 line height, ink colour; chords stay inline in their brackets. */ .pg-practice[data-refresh] .pgbk2-lyr .pgch__lyrics { font-family: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif; font-weight: 400; line-height: 1.55; color: #3d3d3d; } /* Lyrics gear: the chart gear's rows — Chords, Fit, Zoom. */ .pg-practice[data-refresh] .pgbk2-lyrhead__pop { min-width: 290px; padding: 6px 14px; } .pg-practice[data-refresh] .pgbk2-lyrhead__row { padding: 9px 0; font-size: 14px; font-weight: 600; color: #1f2937; } .pg-practice[data-refresh] .pgbk2-lyrhead__row + .pgbk2-lyrhead__row { border-top: 1px solid #f0f2f4; } .pg-practice[data-refresh] .pgbk2-lyrhead__zoom { gap: 12px; } .pg-practice[data-refresh] .pgbk2-lyrhead__zoom input[type="range"] { flex: 1 1 auto; min-width: 110px; margin: 0; } .pg-practice[data-refresh] .pgbk2-lyrhead__zoom .pgbk__lyrics-zoom-popval { min-width: 40px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: #6b7280; } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-lyrhead__row { color: var(--n-ink); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-lyrhead__row + .pgbk2-lyrhead__row { border-top-color: var(--n-line); } /* Lines wrap when they must — a continuation hangs indented (.pgbk2-ln), so it reads as one line. No sideways scrolling (Phil, 2026-09-18). */ .pg-practice[data-refresh] .pgbk2-lyr .pgch__lyrics p, .pg-practice[data-refresh] .pgbk2-lyr .pgch__lyrics[data-fit="1"] p { white-space: normal; } .pg-practice[data-refresh] .pgbk__lyrics { overflow-x: hidden; } /* Record's settings chevron on the white bar. */ .pg-practice.pgbk2-tabs .pgrec__cfg { color: #6b7280; border-color: #e5e7eb; background: #fff; } .pg-practice.pgbk2-tabs .pgrec__cfg:hover { border-color: #cdd4da; color: #1f2937; } .pg-practice.pgbk2-tabs .pgrec__cfg:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* ══ Night mode (body.pg-app--dark) for the redesign ═══════════════════ The modal's night tokens carry the old surfaces; the redesign's pieces (the white bar, the heading, the shared strip, the boxed chart, the gears and panels) get the same palette here. */ body.pg-app--dark #pg-practice-shell[data-refresh] { --n-bg: #15181c; --n-card: #1e2328; --n-raised: #232930; --n-line: #343b43; --n-line-2: #2a3037; --n-ink: #e9e6e0; --n-ink-2: #c6ccd3; --n-muted: #98a1ab; --n-faint: #6b737d; --n-blue: #9cc4ec; --n-blue-soft: #20303f; --n-green-soft: #1f3326; --n-green-line: #2f5a3c; --n-green-d: #8fd3a3; } /* The strip's tokens and the chart's, re-pointed. */ body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2, body.pg-app--dark #pg-practice-shell[data-refresh] .pg-band-pop, body.pg-app--dark #pg-practice-shell[data-refresh] .pg-band-host { --pgb-ink: var(--n-ink); --pgb-ink-2: var(--n-ink-2); --pgb-muted: var(--n-muted); --pgb-faint: var(--n-faint); --pgb-line: var(--n-line); --pgb-line-2: var(--n-line-2); --pgb-soft: var(--n-raised); --pgb-green-soft: var(--n-green-soft); --pgb-green-line: var(--n-green-line); --pgb-green-d: var(--n-green-d); --pgb-blue: var(--n-blue); --pgb-blue-soft: var(--n-blue-soft); } body.pg-app--dark #pg-practice-shell[data-refresh] .pg-chart { --pgc-ink: var(--n-ink); --pgc-ink-2: var(--n-ink-2); --pgc-muted: var(--n-muted); --pgc-faint: var(--n-faint); --pgc-line: var(--n-line); --pgc-line-2: var(--n-line-2); --pgc-bar: #454d56; --pgc-soft: var(--n-raised); --pgc-green-soft: var(--n-green-soft); --pgc-green-line: var(--n-green-line); --pgc-green-d: var(--n-green-d); --pgc-blue: var(--n-blue); --pgc-blue-soft: var(--n-blue-soft); --pgc-blue-line: #2d4256; --pgc-hold: #5a626b; } body.pg-app--dark #pg-practice-shell[data-refresh] .pg-chart--boxed .pg-rt-chart__measure { background: var(--n-card); } /* The bar (white trial) and its tabs. */ body.pg-app--dark .pg-practice.pgbk2-tabs .pg-practice__topbar { background: var(--n-card); color: var(--n-ink); border-bottom-color: var(--n-line); } body.pg-app--dark .pg-practice.pgbk2-tabs .pgtb__mode { color: var(--n-muted); } body.pg-app--dark .pg-practice.pgbk2-tabs .pgtb__mode:hover { color: var(--n-ink); background: var(--n-raised); } body.pg-app--dark .pg-practice.pgbk2-tabs .pgtb__mode.is-active { color: var(--n-ink); } body.pg-app--dark .pg-practice.pgbk2-tabs .pgtb__mode-soon { background: var(--n-raised); color: var(--n-muted); border-color: var(--n-line); } body.pg-app--dark .pg-practice.pgbk2-tabs .pgrec__toggle, body.pg-app--dark .pg-practice.pgbk2-tabs .pgrec__cfg { color: var(--n-ink); border-color: var(--n-line); background: var(--n-raised); } body.pg-app--dark .pg-practice.pgbk2-tabs .pgtb__actions > button, body.pg-app--dark .pg-practice.pgbk2-tabs .pg-practice__close { color: var(--n-muted); } body.pg-app--dark .pg-practice.pgbk2-tabs .pgtb__actions > button:hover, body.pg-app--dark .pg-practice.pgbk2-tabs .pg-practice__close:hover { background: var(--n-raised); color: var(--n-ink); } body.pg-app--dark .pg-practice.pgbk2-tabs .pgtb__night-btn { color: #ffd76a; } /* The heading. */ body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__head .pgtb__title, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__title, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__val { color: var(--n-ink); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__head .pgtb__keys { color: var(--n-muted); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__head .pgtb__credit-lbl { color: var(--n-ink-2); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__lbl { color: var(--n-muted); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__sel { background-color: var(--n-raised); border-color: var(--n-line); color: var(--n-ink); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__form { color: var(--n-blue); } /* The strip card + everything that was white in it. */ body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__band { background: var(--n-card); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2 .pg-band-btn, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2 .pg-band-toggle, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2 .pg-band-tempo__step, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__src, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__view, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__gear .pgbk__display-btn, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-lyrhead__gear, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-melvol, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-own__btn, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-back { background: var(--n-raised); border-color: var(--n-line); color: var(--n-ink-2); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2 .pg-band-btn.is-on, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2 .pg-band-toggle.is-on { background: var(--n-green-soft); border-color: var(--n-green-line); color: var(--n-green-d); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__src button, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__view button { color: var(--n-muted); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__src .pgbk2__srcseg.is-on, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__view button[aria-pressed="true"] { background: var(--n-blue-soft); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__src .pgbk2__srcseg.is-on button, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__view button[aria-pressed="true"] { color: var(--n-blue); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__src .pgbk2__srcseg + .pgbk2__srcseg, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__view button:not([hidden]) ~ button:not([hidden]) { border-left-color: var(--n-line); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2 .pg-band-tempo__val { color: var(--n-ink); } /* Popovers: the band's, the chart gear's, the lyrics gear's, Your tabs. */ body.pg-app--dark #pg-practice-shell[data-refresh] .pg-band-pop, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-lyrhead__pop, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__gear .pgbk__display-pop, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-own__menu { background: var(--n-card); border-color: var(--n-line); color: var(--n-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } body.pg-app--dark #pg-practice-shell[data-refresh] .pg-band-seg, body.pg-app--dark #pg-practice-shell[data-refresh] .pg-band-pop__sel, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-dseg, body.pg-app--dark #pg-practice-shell[data-refresh] .pg-band-step { background: var(--n-raised); border-color: var(--n-line); color: var(--n-ink-2); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-dseg span + span { border-left-color: var(--n-line); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-dseg span.is-on { background: var(--n-blue-soft); color: var(--n-blue); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-own__menu button { color: var(--n-ink); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-own__menu button:hover { background: var(--n-raised); } /* Panels beside the chart. */ body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk__melody, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-lyrhead { background: transparent; border-color: var(--n-line); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-lyr .pgch__lyrics { color: var(--n-ink); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk__melody .pg-app__pill, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk__melody .pg-app__melody-seg { background-color: var(--n-raised); border-color: var(--n-line); color: var(--n-ink); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk__melody .pg-app__melody-seg button { color: var(--n-muted); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk__melody .pg-app__melody-seg button[aria-pressed="true"] { background: var(--n-blue-soft); color: var(--n-blue); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk__melody .pg-app__melody-stage svg { filter: invert(.88) hue-rotate(180deg); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__head .pgtb__title-block, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__head .pgtb__title-line { background: none; box-shadow: none; } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2 .pg-band__transport .pg-band-icon { color: var(--n-ink-2); } /* Band | Metronome carry their icons: a guitar and a metronome. */ .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcpick { display: inline-flex; align-items: center; gap: 6px; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srci { width: 15px; height: 15px; flex: none; } .pg-practice[data-refresh] .pgbk2__src .pgbk2__srcseg:not(.is-on) .pgbk2__srci { opacity: .7; } /* Fit no longer changes the panel's padding (it let a bigger size fit than 100% did); two-column fits keep verses whole. */ .pg-practice[data-refresh] .pgbk__lyrics-body.pgbk2-lyr[data-fit="1"] { padding: 16px 58px 28px 18px; } .pg-practice[data-refresh] .pgbk2-lyr .pgch__lyrics { column-gap: 2.4em; column-fill: balance; } /* ══ Phone (and the app): Backing, folded ═══════════════════════════════ One-row bar (the title moved to the heading), the song page's phone strip (⚙ opens Band | Metronome + the practice options), a full-width Chart | Lyrics | Melody switch, and the pick REPLACES the chart. */ @media (max-width: 1024px), (max-height: 500px) { .pg-practice.pgbk2-phone .pg-practice__shell { --pgtb-h: 52px; } .pg-practice.pgbk2-phone .pg-practice__topbar { display: flex; align-items: center; padding: 0 6px 0 8px; } .pg-practice.pgbk2-phone .pgtb__actions { flex: 1 1 auto; height: 52px; padding: 0; gap: 6px; } .pg-practice.pgbk2-phone .pgtb__actions .pgtb__modepicker { order: 0; margin-left: 0; margin-right: auto; } .pg-practice.pgbk2-phone .pgtb__modepicker .pgtb__modepicker-pop { left: 0; right: auto; } /* Room for the mode's name beside its icon. */ .pg-practice.pgbk2-phone .pgtb__modepicker-btn .pgtb__mode-label { display: inline; font-size: 13.5px; font-weight: 600; white-space: nowrap; } /* Record-yourself stays off the phone's Backing bar: a live mic sends iPhone playback to the earpiece, and the speaker bleeds into the take. */ .pg-practice.pgbk2-phone .pgrec { display: none; } .pg-practice.pgbk2-phone .pg-practice__topbar .pg-practice__close { position: static; order: 9; } .pg-practice.pgbk2-phone .pg-demo-tour-reopen { top: 26px; } /* Heading: title (tap to search), the line, the facts on one row. */ .pg-practice.pgbk2-titled .pgbk2 { margin: 0 12px; padding-top: 12px; gap: 8px; } .pg-practice.pgbk2-titled .pgbk2__head { gap: 8px; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__title-block { flex: 1 1 100%; height: auto; padding: 0; background: none; border: 0; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__title { font-size: 21px; } .pg-practice.pgbk2-titled .pgbk2__head .pgtb__keys { font-size: 13px; } .pg-practice.pgbk2-titled .pgbk2__meta { gap: 14px; flex-wrap: nowrap; } .pg-practice.pgbk2-titled .pgbk2__sel { height: 28px; min-width: 56px; font-size: 14px; } .pg-practice.pgbk2-titled .pgbk2__val, .pg-practice.pgbk2-titled .pgbk2__form { font-size: 15px; line-height: 28px; } /* The ⚙ open: the keys line steps aside for the room. */ .pg-practice.pgbk2-titled .pgbk2:has(.pg-band.is-gear-open) .pgtb__keys { display: none !important; } /* The strip: the song page's phone shape. */ .pg-practice[data-refresh] .pgbk2__band { padding: 8px 10px; } .pg-practice[data-refresh] .pgbk2 .pg-band { flex-wrap: wrap; align-items: center; gap: 8px 6px; } .pg-practice[data-refresh] .pgbk2 .pg-band__transport { order: 1; flex: none; } .pg-practice[data-refresh] .pgbk2 .pg-band-tempo { order: 2; flex: 1 1 60px; min-width: 0; max-width: none; gap: 4px; } .pg-practice[data-refresh] .pgbk2 .pg-band-tempo .pg-band-range { flex: 1 1 auto; width: auto; min-width: 40px; } .pg-practice[data-refresh] .pgbk2 .pg-band-tempo__unit { display: none; } .pg-practice[data-refresh] .pgbk2 .pg-band-metro { display: none; } .pg-practice[data-refresh] .pgbk2 .pg-band-gear { display: grid; order: 3; flex: none; } .pg-practice[data-refresh] .pgbk2 .pg-band-gear[aria-expanded="true"] { background: #eef4f9; color: #1e4f75; } .pg-practice[data-refresh] .pgbk2 .pg-band__opts { display: none; order: 4; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; } .pg-practice[data-refresh] .pgbk2 .pg-band.is-gear-open .pg-band__opts { display: flex; } .pg-practice[data-refresh] .pgbk2 .pg-band__opts .pgbk2__src { flex: 1 1 100%; margin: 0 0 2px; justify-content: stretch; } .pg-practice[data-refresh] .pgbk2 .pg-band__opts .pgbk2__src .pgbk2__srcseg { flex: 1 1 50%; } .pg-practice[data-refresh] .pgbk2 .pg-band__opts .pgbk2__src .pgbk2__srcpick { flex: 1 1 auto; justify-content: center; } .pg-practice[data-refresh] .pgbk2 .pg-band__opts .pg-band-btn { flex: 1 1 0; justify-content: center; height: 32px; padding: 0 6px; } .pg-practice[data-refresh] .pgbk2 .pg-band__opts .pg-band-sp { display: none; } /* Chart | Lyrics | Melody: a full-width row under the strip. */ .pg-practice[data-refresh] .pgbk2 > .pgbk2__view { display: flex; margin: 0; height: 34px; } .pg-practice[data-refresh] .pgbk2 > .pgbk2__view button { flex: 1 1 0; font-size: 13.5px; } .pg-practice[data-refresh] .pgbk2 > .pgbk2__view[hidden] { display: none; } /* The pick REPLACES the chart; the dots row hides with it. */ .pg-practice[data-refresh] .pgbk__chart-wrap.is-split, .pg-practice[data-refresh] .pgbk__chart-wrap.is-split-tab, .pg-practice[data-refresh] .pgbk__chart-wrap.is-split-mel { flex-direction: column; } .pg-practice[data-refresh] .pgbk__chart-wrap.is-split > .pgbk__chart, .pg-practice[data-refresh] .pgbk__chart-wrap.is-split-tab > .pgbk__chart, .pg-practice[data-refresh] .pgbk__chart-wrap.is-split-mel > .pgbk__chart { display: none; } .pg-practice[data-refresh] .pgbk__chart-wrap.is-split > .pgbk__lyrics, .pg-practice[data-refresh] .pgbk__chart-wrap.is-split-tab > .pgbk__tab, .pg-practice[data-refresh] .pgbk__chart-wrap.is-split-mel > .pgbk__melody { flex: 1 1 100%; width: 100%; border-left: 0; } .pg-practice[data-refresh] .pgbk2__metro-row:has(+ .pgbk__chart-wrap.is-split), .pg-practice[data-refresh] .pgbk2__metro-row:has(+ .pgbk__chart-wrap.is-split-tab), .pg-practice[data-refresh] .pgbk2__metro-row:has(+ .pgbk__chart-wrap.is-split-mel) { display: none; } .pg-practice[data-refresh] .pgbk2__metro-row { width: 100% !important; } .pg-practice[data-refresh] .pgbk2-lyr { padding: 12px 50px 24px 14px; } } /* 🔊 on Melody while the tune plays along. */ .pg-practice[data-refresh] .pgbk2__view button.is-hearing::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* The strip's ⚙ is the phone's (the media block above outranks this). */ .pgbk2 .pg-band-gear { display: none; } .pg-practice .pgtb__kb { white-space: nowrap; } @media (max-width: 1024px), (max-height: 500px) { /* Phone lyrics: lines wrap, a continuation hangs indented; the gear gets a row. */ .pg-practice[data-refresh] .pgbk2-lyr, .pg-practice[data-refresh] .pgbk__lyrics-body.pgbk2-lyr[data-fit="1"] { padding: 44px 14px 24px 14px; } .pg-practice[data-refresh] .pgbk2-lyr .pgch__lyrics p { white-space: normal; } /* The chart's gear opens its popover under it, as on desktop (the old phone drawer hid it). */ .pg-practice[data-refresh] .pgbk2__gear .pgbk__display-pop { position: absolute; top: calc(100% + 6px); right: 0; left: auto; bottom: auto; transform: none; width: auto; min-width: 230px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid #d1d5db; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; z-index: 40; } .pg-practice[data-refresh] .pgbk2__gear .pgbk__display-pop:not([hidden]) { display: flex; flex-direction: column; } } /* Lines wrap as on the song page: a continuation starts at the margin. */ .pg-practice[data-refresh] .pgbk2-lyr .pgbk2-ln { display: block; } /* The melody's settings gear is the phone's (desktop shows them all). */ .pg-practice[data-refresh] .pgbk2-melbar__gear { display: none; } @media (max-width: 1024px), (max-height: 500px) { /* Phone: the fader sits under Chart | Melody on both views; the melody's settings fold behind a gear on the Melody view, and the selects carry no labels (Phil, 2026-09-19). */ .pg-practice.pgbk2-phone .pgbk2 > .pgbk2-melbar { margin: 0; gap: 8px; } .pg-practice.pgbk2-phone .pgbk2 > .pgbk2-melbar .pgbk2-melvol { flex: 1 1 auto; min-width: 0; } .pg-practice.pgbk2-phone .pgbk2 > .pgbk2-melbar .pgbk2-melvol__range { flex: 1 1 auto; width: auto; min-width: 60px; } .pg-practice.pgbk2-phone.pgbk2-on-mel .pgbk2-melbar__gear { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; margin: 0; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #6b7280; cursor: pointer; } .pg-practice.pgbk2-phone .pgbk2-melbar__gear svg { width: 16px; height: 16px; } .pg-practice.pgbk2-phone .pgbk2-melbar__gear[aria-expanded="true"] { background: #eef4f9; color: #1e4f75; border-color: #cdd4da; } .pg-practice.pgbk2-phone:not(.pgbk2-melopts-open) .pgbk__melody .pg-app__melody-chips, .pg-practice.pgbk2-phone:not(.pgbk2-melopts-open) .pgbk2-own { display: none !important; } .pg-practice.pgbk2-phone .pgbk2-own { margin-left: 0; } .pg-practice.pgbk2-phone .pgbk2-own__menu { right: 0; left: auto; } .pg-practice.pgbk2-phone .pgbk__melody .pg-app__pill-lbl { display: none; } .pg-practice.pgbk2-phone .pgbk__melody .pg-app__melody-chips { margin-top: 2px; } } /* Night: every gear the same — the strip's, the chart's, the lyrics', the melody's — closed and open (the strip's opened light, Phil). */ body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2 .pg-band-gear, body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-melbar__gear { background: var(--n-raised); border-color: var(--n-line); color: var(--n-ink-2); } body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2 .pg-band-gear[aria-expanded="true"], body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-melbar__gear[aria-expanded="true"], body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2__gear .pgbk__display-btn[aria-expanded="true"], body.pg-app--dark #pg-practice-shell[data-refresh] .pgbk2-lyrhead__gear[aria-expanded="true"] { background: var(--n-blue-soft); border-color: var(--n-line); color: var(--n-blue); }