/* ══ Real Band redesign (option pg_modal_rb2_open) ═════════════════════
The whole-song waveform IS the scrub: full width under the transport,
the section list under it, no Sections | Song toggle, no thin scrub
competing with it (Phil, 2026-09-19). */
/* The wave's row — the canvas's first row, across every column, so it
moves with the panes when the playlist sidebar opens. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pg-practice__canvas {
grid-template-rows: auto minmax(0, 1fr);
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave {
grid-column: 1 / -1;
grid-row: 1;
min-width: 0;
box-sizing: border-box;
/* Left edge lines up with the section cards below (24px in). */
padding: 8px 16px 2px 24px;
background: transparent;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__song {
display: block;
/* Use the viewport: the wave was 92px with air underneath it
(Phil, 2026-09-20). */
height: clamp(92px, 17vh, 190px);
border-top-left-radius: 0; border-top-right-radius: 0;
margin: 0;
border: 1px solid var(--pg-border, #e5e7eb);
border-radius: 10px;
overflow: hidden;
background: #fbfbfc;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__song-scroll,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__song-inner { height: 100%; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave-foot {
display: flex; align-items: center; gap: 10px;
margin-top: 5px; min-height: 22px;
font-size: 12.5px; color: var(--pg-text-muted, #6b7280);
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave-foot .pgps__zoomctl { margin-left: auto; }
/* The toggle has nothing to switch between any more. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__viewtoggle { display: none; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__viewbar.pgrb2-viewbar-off {
padding: 0; border: 0; min-height: 0;
}
/* One timeline: the thin scrub steps aside (the times stay — they read
as the clock, not as a control). */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgpt__scrub { display: none; }
/* ── The old console wrappers ──────────────────────────────────────────
One card under the heading: line 1 is everything you touch while
playing, line 2 everything you set once. rb2.js gathers the pieces
into it, so the nested console wrappers fall away. */
.pg-practice[data-rb2].pgrb2c .pg-practice__transport {
display: block; padding: 0; background: none; border: 0;
}
.pg-practice[data-rb2].pgrb2c .pgpt__playback,
.pg-practice[data-rb2].pgrb2c .pgpt__console,
.pg-practice[data-rb2].pgrb2c .pgpt__tempo-seg,
.pg-practice[data-rb2].pgrb2c .pgpt__console-left,
.pg-practice[data-rb2].pgrb2c .pgpt__console-pills,
.pg-practice[data-rb2].pgrb2c .pgpt__mixer-seg { display: none; }
/* Line 1: transport · clock · tempo · the two knobs · EQ. */
/* Line 2: key · capo · speed trainer · the loop readout and its pins
(rb2.js moves the first two in). */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgpt__row--secondary {
order: 7; flex: 1 1 100%; display: flex; align-items: center; gap: 10px;
}
.pg-practice[data-rb2].pgrb2c .pgpt__row--secondary .pgpt__console-key-wrap { flex: 0 0 auto; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgpt__row--secondary .pgpt__cluster { flex: 1 1 auto; min-width: 0; }
/* Night mode: the modal's own dark surfaces. */
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave {
background: #15181c; border-bottom-color: #2d343c;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__song {
background: #1b1f24; border-color: #343b43;
}
/* Phones: see the one phone block at the end of this file. */
/* ── The heading (Backing's shape) ────────────────────────────────────
The tabs bar carries the modes; the song's name, its record and its
key/capo sit here, over the wave (Phil, 2026-09-20). */
.pg-practice[data-rb2].pgrb2c .pgrb2__head {
grid-column: 1 / -1;
display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 30px;
padding: 12px 16px 2px;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__titles { min-width: 0; flex: 0 1 auto; }
.pg-practice[data-rb2].pgrb2c .pgrb2__title {
margin: 0; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; color: #111827;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__sub {
margin: 2px 0 0; font-size: 13.5px; color: #6b7280;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__sub:empty { display: none; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta { display: flex; align-items: flex-end; gap: 22px; flex: 0 0 auto; }
/* KEY / CAPO read as the heading's fields, not as console rows. */
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-wrap {
/* The console stacks KEY over CAPO; in the heading they sit side by
side as fields, like Backing's. */
display: flex; flex-direction: row; gap: 22px; flex: none; row-gap: 0;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-lbl {
font: 700 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: .13em; text-transform: uppercase; color: #8a8078;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-select {
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;
}
/* The topbar is tabs only — its title block moved here. */
.pg-practice[data-rb2].pgrb2c.pgbk2-tabs .pgtb__title-block { display: none; }
/* Line 2 sits under a hairline inside the card. */
/* The heading is the transport's first row, above the card. */
.pg-practice[data-rb2].pgrb2c .pgrb2__head { grid-column: auto; }
/* Night: the same tokens Backing's heading and card use (--pg-white is
remapped to the dark surface in night mode, so never lean on it here). */
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__title { color: var(--n-ink, #e9e6e0); }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__sub { color: var(--n-muted, #9aa3ad); }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-lbl { color: var(--n-muted, #9aa3ad); }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-select {
background-color: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0);
}
/* ── The transport rides the wave ──────────────────────────────────────
Play, the clock, the loop readout and the pins drive the timeline, so
they sit on it rather than in a strip two rows away (Phil, 2026-09-20). */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 8px 12px;
border: 1px solid var(--pg-border, #e5e7eb);
border-bottom: 0;
border-radius: 10px 10px 0 0;
background: #fff;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__row--primary {
display: flex; align-items: center; gap: 10px; margin: 0; padding: 0;
border: 0; background: none; flex: none; width: auto;
}
/* The clock reads as the clock — big enough to catch mid-tune. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__time--cur { font-size: 18px; font-weight: 800; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__time--dur { font-size: 14px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__cluster--loop { margin: 0; flex: 0 1 auto; min-width: 0; }
/* No pin button: a loop is a drag on the wave (Shift for between the
beats), and Delete clears it (Phil, 2026-09-20). */
.pg-practice[data-rb2][data-mode="play"] .pgpt__pins { display: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgps__zoomctl { margin-left: auto; flex: none; }
/* TIME sits with KEY and CAPO; the tuning rides the sub line. */
.pg-practice[data-rb2].pgrb2c .pgrb2__stats { display: flex; align-items: flex-end; gap: 22px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__stat { display: flex; flex-direction: column; gap: 4px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__stat-lbl {
font: 700 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: .13em; text-transform: uppercase; color: #8a8078;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__stat-val {
height: 30px; display: flex; align-items: center;
font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #111827;
}
/* The strip is the mix and the tempo now: nothing you touch mid-bar. */
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__tbar {
background: var(--n-card, #1e2328); border-color: var(--n-line, #2d343c);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__stat-lbl { color: var(--n-muted, #9aa3ad); }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__stat-val { color: var(--n-ink, #e9e6e0); }
/* ── The list is the section you're in ────────────────────────────────
The wave above is the map, so the column below it shows ONE card: the
section under the playhead, plus anything you have looped. The old
solo behaviour blew the open card up to fill the whole column, which
read as a billboard with a postage stamp inside it (Phil, 2026-09-20). */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list .pgps__card { display: none; }
/* Looping: only the looped sections, not the playhead's card too. */
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-rb2-loop="1"] .pgps__list .pgps__card.is-active:not(.pgrb2-in-loop):not(:has([data-pgps-action="loop"][aria-pressed="true"])) {
display: none !important;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list .pgps__card.is-active,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list .pgps__card:has([data-pgps-action="loop"][aria-pressed="true"]),
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list .pgps__card.pgrb2-in-loop {
display: grid;
}
/* Nothing playing yet: the first section stands in. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list:not(:has(.pgps__card.is-active)):not(:has(.pgps__card.is-soloed)):not(:has([data-pgps-action="loop"][aria-pressed="true"])) .pgps__card:first-child {
display: grid;
}
/* A card, not a billboard: in flow, one clear row of waveform. */
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-solo="1"] .pg-practice__sections { height: auto; }
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-solo="1"] .pgps__list { height: auto; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list .pgps__card,
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-solo="1"] .pgps__list .pgps__card.is-soloed {
position: static; inset: auto; margin: 0 0 10px; z-index: auto;
grid-template-columns: 48px 48px minmax(0, 1fr) 44px 44px;
grid-template-rows: auto auto auto;
/* Every name has to be a rectangle or the whole declaration is
dropped -- play/restart can't skip the waveform row. */
grid-template-areas:
"play restart label loop solo"
"bar bar bar bar bar"
"meta meta meta meta meta";
gap: 10px 14px;
padding: 16px 18px;
border: 1px solid var(--pg-border, #e5e7eb);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(16,24,40,.05);
transition: none;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-solo="1"] .pgps__list .pgps__card:not(.is-soloed) {
opacity: 1; filter: none; transform: none; pointer-events: auto;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list .pgps__card .pgps__bar,
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-solo="1"] .pgps__list .pgps__card.is-soloed .pgps__bar {
height: 108px; min-height: 108px; border-radius: 9px;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-solo="1"] .pgps__list .pgps__card.is-soloed .pgps__iconbtn {
width: 44px; height: 44px;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-solo="1"] .pgps__list .pgps__card.is-soloed .pgps__label { font-size: 19px; }
/* The strip's middle was a hole: the trainer hugs the tempo it changes. */
/* ── The mix row ──────────────────────────────────────────────────────
Tempo, the speed trainer and the two knobs, on the same block as the
transport and the wave: one control surface instead of a strip card
holding three things across 1400px (Phil, 2026-09-20). */
/* Everything on one row: transport, loop, the knobs, EQ, tempo, the
trainer, and the playlist parked on the right. The knobs come before
the tempo (Phil, 2026-09-20). */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__fader-block {
/* One line: the reading sits beside the slider, not under it, so
everything in the row shares a centre line (Phil: "speed up is
not aligned properly"). */
display: flex !important; flex-direction: row !important; align-items: center; gap: 10px;
flex: 0 1 300px; min-width: 220px; max-width: 320px; margin: 0;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__fader-readout {
flex: none; margin: 0; white-space: nowrap;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__speed { flex: none; margin: 0; align-self: center; }
/* Knobs sit with the loop chip, not pinned to the far edge (Phil). */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__knobs { margin: 0 0 0 18px; flex: none; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq { flex: none; align-self: center; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgrb2__plbtn { margin-left: 6px; }
/* The wave closes the block under one row, not two. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__song { border-top: 0; }
/* The wave closes the block. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__song { border-radius: 0 0 10px 10px; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgrb2__mix {
background: var(--n-card, #1e2328); border-color: var(--n-line, #2d343c);
}
/* ── The words follow the section you're in ───────────────────────────
The panel keeps the whole song -- you never lose your place -- and
lights the block you're playing; the rest step back. */
/* Only the section you're in (Phil, 2026-09-20). When the playhead is
in an instrumental there is nothing to follow, the class comes off,
and the whole song shows again. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__body.pgrb2-following .pg-cm-section {
display: none;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__body.pgrb2-following .pg-cm-section.pgrb2-lyr-on {
display: block;
}
/* The wave's zoom, said out loud: three bare buttons reading "- Fit +"
next to a lyrics pane that also says Fit was a riddle (Phil). "Wave"
named the thing, not the job -- it is a zoom, and Fit is its reset. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wavefoot .pgps__zoomctl::before {
content: 'Zoom';
font: 700 10.5px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: .13em; text-transform: uppercase; color: #8a8078;
margin-right: 8px; align-self: center;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgrb2__wavefoot .pgps__zoomctl::before {
color: var(--n-muted, #9aa3ad);
}
/* ── The pane's switcher ──────────────────────────────────────────────
The site's segmented pill (.pg-band-seg, from band.css) instead of a
fourth kind of tab row. Chart | Lyrics | Melody | Wave. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-views.pg-band-seg {
display: inline-flex; gap: 0; border: 1px solid var(--pg-border, #e5e7eb);
border-radius: 9px; overflow: hidden; background: #fff;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-views.pg-band-seg .pgch__rib-view {
height: 32px; padding: 0 12px; margin: 0; border: 0; border-radius: 0;
background: none; font-size: 13px; font-weight: 600; color: var(--pg-text-muted, #6b7280);
white-space: nowrap; cursor: pointer;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-views.pg-band-seg .pgch__rib-view + .pgch__rib-view {
border-left: 1px solid var(--pg-border, #e5e7eb);
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-views.pg-band-seg .pgch__rib-view.is-active,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-views.pg-band-seg .pgch__rib-view[aria-selected="true"] {
background: #eef4ff; color: var(--pg-blue, #1d4ed8);
}
/* Four views is enough: side-by-side lives in the layout, not a tab. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-view--both { display: none !important; }
/* The chart pane shows the section you're in -- the same rule as the
words. Looping across sections shows each of their charts. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] [data-pgch="chart-body"].pgrb2-following [data-pgch-chart-key] { display: none; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] [data-pgch="chart-body"].pgrb2-following [data-pgch-chart-key].pgrb2-chart-on { display: block; }
/* ── One gear ─────────────────────────────────────────────────────────
Fit and Display were two word-buttons in a pane whose job is reading
(Phil, 2026-09-20). Both fold behind a gear, the way Backing does it,
and the chart view's own options use the same slot. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-btn--fit { display: none !important; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__display-btn-lbl,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__display-btn-caret { display: none !important; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__display-btn {
width: 32px; height: 32px; padding: 0; display: inline-flex;
align-items: center; justify-content: center; border-radius: 9px;
/* The split button's style, so the pair match (Phil, 2026-09-21). */
border: 1px solid var(--pg-border, #e5e7eb); background: #fff; color: #6b7280;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__display-btn:hover { border-color: #cdd4da; background: #fcfcfd; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgch__display-btn {
background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0);
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pg-practice__chord { position: relative; }
/* Both Display buttons live at the right end of the pane's own top row,
which is the corner Backing puts its gear in. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__display-wrap {
/* Back in the row: absolute, it sat on top of the collapse chevron
and the chart view lost its minimise (Phil, 2026-09-20). The
bodies have their own flex container now, so it costs nothing. */
position: static; margin: 0; display: inline-flex; flex: none; order: 2;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__split { order: 1; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__display-btn--ribbon { order: 2; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-btn--collapse { order: 3; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__display-btn--ribbon { margin-left: 0; }
/* The switcher takes the width it needs, not the width it can get. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-views.pg-band-seg { flex: 0 0 auto; width: auto; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__ribbon { gap: 8px; justify-content: flex-start; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-btn--collapse { margin-left: 0; }
/* The popovers open under the gear, at the pane's right edge. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__ribbon .pgch__pop--more { top: 46px; right: 12px; left: auto; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__display-wrap .pgch__display-pop { top: 38px; right: 0; left: auto; }
/* The icon draws at its own size -- inside a 32px flex button it came
out 0x0. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__gear { width: 17px; height: 17px; flex: none; display: block; }
/* Whichever view is up owns the gear. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pg-practice__chord[data-pgch-view="chart"] .pgch__display-btn--ribbon { display: none !important; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pg-practice__chord:not([data-pgch-view="chart"]) .pgch__display-wrap { display: none !important; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgch__rib-views.pg-band-seg {
background: var(--n-card, #1e2328); border-color: var(--n-line, #2d343c);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgch__rib-views.pg-band-seg .pgch__rib-view.is-active {
background: rgba(59,130,246,.18); color: #9ec5ff;
}
/* ── The zoom, on the wave ────────────────────────────────────────────
The Instant Practice player's cluster: in the waveform's corner, the
factor between the buttons, Fit only once you have zoomed. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__song { position: relative; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__zoomctl {
position: absolute; top: 6px; right: 8px; z-index: 4;
display: inline-flex; align-items: center; gap: 4px; margin: 0;
padding: 2px 4px; border-radius: 8px;
background: rgba(255,255,255,.88); backdrop-filter: blur(2px);
border: 1px solid var(--pg-border, #e5e7eb);
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__zoomctl button {
width: 24px; height: 24px; padding: 0; border: 0; background: none;
font-size: 13px; font-weight: 700; color: #6b7280; border-radius: 6px; cursor: pointer;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__zoomctl button:hover { background: #eef0f3; color: #111827; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__zoomctl button[hidden] { display: none; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__zoomx {
min-width: 26px; text-align: center; font-size: 11.5px; font-weight: 700;
color: #6b7280; font-variant-numeric: tabular-nums;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__zoomctl::before { content: none; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__zoomctl {
background: rgba(30,35,40,.9); border-color: var(--n-line, #2d343c);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgrb2__wavefoot {
background: var(--n-card, #1e2328); border-color: var(--n-line, #2d343c);
}
/* ── Looping across sections ──────────────────────────────────────────
Every section in the loop keeps its card; they share the column and
shrink to fit rather than pushing each other off it (Phil,
2026-09-20). */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pg-practice__sections { display: flex; flex-direction: column; min-height: 0; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list {
display: flex; flex-direction: column; gap: 10px;
flex: 1 1 auto; min-height: 0; overflow: auto;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list .pgps__card {
/* Shrink to share the column, but never below what the card holds
(name, faces, wave, times) -- a fixed 132px floor let three looped
cards squash and spill into each other (Ars, i-411). Past that the
column scrolls. */
flex: 1 0 auto; min-height: 0; margin: 0;
grid-template-rows: auto minmax(56px, 1fr) auto;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list .pgps__card .pgps__bar,
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-solo="1"] .pgps__list .pgps__card.is-soloed .pgps__bar {
height: auto; min-height: 56px; align-self: stretch;
}
/* (2) Collapsed: the strip is the chevron, nothing else. The switcher and
the gear used to keep drawing inside the 44px rail (Phil, 2026-09-20). */
/* The bodies live in rb2's panes wrapper now, so the panel's own
"collapsed hides its direct children" rule no longer reaches them. */
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-chord-collapsed="true"] .pgrb2__panes,
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-chord-collapsed="true"] .pgch__rib-views,
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-chord-collapsed="true"] .pgrb2__split,
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-chord-collapsed="true"] .pgch__display-btn,
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-chord-collapsed="true"] .pgch__display-wrap {
display: none !important;
}
/* The playlist drawer: an icon, lit only while it is open. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__plbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0; margin-left: 2px;
border: 1px solid var(--pg-border, #e5e7eb); border-radius: 9px;
background: #fff; font-size: 12.5px; font-weight: 700;
color: var(--pg-text-2, #374151); cursor: pointer; flex: none;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__plbtn[aria-pressed="true"] {
background: #eef4ff; border-color: #c7d7fd; color: var(--pg-blue, #1d4ed8);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgrb2__plbtn {
background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0);
}
/* The record's cover, left of its name. */
.pg-practice[data-rb2].pgrb2c .pgrb2__art {
width: 62px; height: 62px; flex: none; object-fit: cover;
border-radius: 8px; border: 1px solid var(--pg-border, #e5e7eb);
align-self: center; margin-right: 2px;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__art[hidden] { display: none; }
@media (max-width: 1024px) {
.pg-practice[data-rb2].pgrb2c .pgrb2__art { width: 44px; height: 44px; }
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__art { border-color: var(--n-line, #3a424b); }
/* ── Two views at once ────────────────────────────────────────────────
Shift-click a tab and it opens beside the one that's up. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__panes {
display: flex; flex: 1 1 auto; min-height: 0; min-width: 0;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__panes > .pgch__body {
flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto;
}
/* Split: the pane becomes columns and the TABS say what is in them. */
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-rb2-split="1"] .pgch__body { display: none !important; }
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-rb2-split-views~="lyrics"] .pgch__body[data-pgch-view-target="lyrics"],
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-rb2-split-views~="chart"] .pgch__body[data-pgch-view-target="chart"],
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-rb2-split-views~="tab"] .pgch__body[data-pgch-view-target="tab"] {
display: block !important;
flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-rb2-split="1"] .pgch__body + .pgch__body {
border-left: 1px solid var(--pg-border-soft, #eef0f3);
}
/* A tab in the split stays lit. It has to out-rank the pill's own base
rule, which sets every button's background (Phil: "tabs have to
highlight when active or this gets real confusing"). */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-views.pg-band-seg .pgch__rib-view.pgrb2-on {
background: #eef4ff; color: var(--pg-blue, #1d4ed8);
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__split {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0; margin: 0 6px 0 auto;
border: 1px solid var(--pg-border, #e5e7eb); border-radius: 9px;
background: #fff; color: #6b7280; cursor: pointer;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__split:hover { border-color: #cdd4da; background: #fcfcfd; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__split[aria-pressed="true"] {
background: #eef4ff; border-color: #c7d7fd; color: var(--pg-blue, #1d4ed8);
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__split[hidden] { display: none; }
/* ── One transport vocabulary ─────────────────────────────────────────
Backing's buttons, at both scales: the same green circle for play, the
same bordered square for the rest, in the bar and on the section card
(Phil, 2026-09-20: "just mirror BT, same with the section, let's have
1 visual vocab"). Values are band.css's tokens, written out because
--pgb-* is declared on .pg-band roots, not in the modal. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__play,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn--play {
width: 52px; height: 52px; padding: 0;
border: 0; border-radius: 50%;
background: #53a96b; color: #fff;
box-shadow: 0 2px 6px rgba(83, 169, 107, .35);
display: grid; place-items: center;
transition: background .12s, transform .08s;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__play:hover,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn--play:hover { background: #4a9c60; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__play:active,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn--play:active { transform: scale(.96); }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__play svg,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn--play svg { width: 24px; height: 24px; }
/* On the card the same button, one size down. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn--play { width: 44px; height: 44px; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn--play svg { width: 20px; height: 20px; }
/* Restart and stop: Backing's .pg-band-icon exactly -- 34px, no border,
no fill, an 18px glyph, and a soft wash on hover. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__restart,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__stop,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn:not(.pgps__iconbtn--play) {
width: 34px; height: 34px; padding: 0;
border: 1px solid transparent; border-radius: 9px; background: transparent;
color: #374151; box-shadow: none;
display: inline-grid; place-items: center;
transition: background .12s, color .12s;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__restart svg,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__stop svg,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn:not(.pgps__iconbtn--play) svg {
width: 18px; height: 18px; color: inherit;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__restart:hover,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__stop:hover,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn:not(.pgps__iconbtn--play):hover {
background: #f6f7f8; color: #1f2937;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__tbar .pgpt__restart,
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__tbar .pgpt__stop,
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn:not(.pgps__iconbtn--play) {
background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0);
}
/* ── The tempo, Backing's drawing ─────────────────────────────────────
Same track, same thumb, same green; Real Band keeps its BPM and its
percent, which Backing has no use for (Phil, 2026-09-20). */
.pg-practice[data-rb2].pgrb2c [data-pgpt="tempo"] {
-webkit-appearance: none; appearance: none;
display: block; width: 100%; height: 22px; margin: 0; padding: 0;
border: 0; background: transparent; cursor: pointer;
}
.pg-practice[data-rb2].pgrb2c [data-pgpt="tempo"]::-webkit-slider-runnable-track {
height: 6px; border-radius: 3px;
background: linear-gradient(to right, #53a96b 0 var(--fill, 50%), #eef0f2 var(--fill, 50%) 100%);
}
.pg-practice[data-rb2].pgrb2c [data-pgpt="tempo"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
background: #fff; border: 2px solid #53a96b; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.pg-practice[data-rb2].pgrb2c [data-pgpt="tempo"]::-moz-range-track { height: 6px; border-radius: 3px; background: #eef0f2; }
.pg-practice[data-rb2].pgrb2c [data-pgpt="tempo"]::-moz-range-progress { height: 6px; border-radius: 3px; background: #53a96b; }
.pg-practice[data-rb2].pgrb2c [data-pgpt="tempo"]::-moz-range-thumb {
width: 14px; height: 14px; border-radius: 50%;
background: #fff; border: 2px solid #53a96b; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
/* The ± steppers and the speed trainer: Backing's button. */
.pg-practice[data-rb2].pgrb2c .pgpt__fader-step,
.pg-practice[data-rb2].pgrb2c .pgpt__speed-pill {
height: 34px; min-width: 34px; padding: 0 12px;
border: 1px solid #e5e7eb; border-radius: 9px;
background: #fff; box-shadow: none;
font-size: 13.5px; font-weight: 600; color: #374151;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
transition: border-color .12s, background .12s;
}
.pg-practice[data-rb2].pgrb2c .pgpt__fader-step:hover,
.pg-practice[data-rb2].pgrb2c .pgpt__speed-pill:hover { border-color: #cdd4da; background: #fcfcfd; }
.pg-practice[data-rb2].pgrb2c .pgpt__speed-pill[aria-pressed="true"],
.pg-practice[data-rb2].pgrb2c .pgpt__speed-pill.is-on {
background: #ecf6ef; border-color: #b3d4bd; color: #2c6b40;
}
.pg-practice[data-rb2].pgrb2c .pgpt__speed-pill-icon { color: inherit; width: 16px; height: 16px; }
/* The reading: "117 BPM · 90%" in the band's ink. */
.pg-practice[data-rb2].pgrb2c .pgpt__tempo-read,
.pg-practice[data-rb2].pgrb2c .pgpt__fader-read {
font-size: 15px; font-weight: 700; color: #1f2937; font-variant-numeric: tabular-nums;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgpt__fader-step,
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgpt__speed-pill {
background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0);
}
/* The chart gear's rows read like Backing's. */
.pg-practice[data-rb2].pgrb2c .pgch__display-row { display: flex; align-items: center; gap: 14px; }
.pg-practice[data-rb2].pgrb2c .pgch__display-row .pgbk2-dseg { margin-left: auto; }
/* ── The loop, as a chip ──────────────────────────────────────────────
It was a wide bordered field that read like something you could type
in, the same width whether it named a span or said "No loop"
(Phil, 2026-09-20). Backing uses a chip; so does this. */
.pg-practice[data-rb2].pgrb2c .pgpt__cluster--loop {
/* A readout, not a button: a rectangle, and a fixed slot so the row
doesn't shuffle every time a loop is set (Phil, 2026-09-20). */
display: inline-flex; align-items: center; gap: 4px;
height: 32px; padding: 0 6px 0 10px;
border: 1px solid transparent; border-radius: 9px;
background: #f6f7f8;
/* The name of what's looping, not a sentence about it: a much
smaller fixed slot (Phil, 2026-09-20). */
flex: 0 0 196px; width: 196px; max-width: 196px; min-width: 196px;
}
.pg-practice[data-rb2].pgrb2c .pgpt__loopstatus-frame {
border: 0; background: none; padding: 0; min-width: 0; width: auto; box-shadow: none;
}
.pg-practice[data-rb2].pgrb2c .pgpt__loopstatus {
font-size: 12.5px; font-weight: 700; color: #6b7280;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-practice[data-rb2].pgrb2c .pgpt__cluster--loop:has(.pgpt__loop-clear:not([hidden])) {
background: #eef4ff; border-color: #c7d7fd;
}
.pg-practice[data-rb2].pgrb2c .pgpt__cluster--loop:has(.pgpt__loop-clear:not([hidden])) .pgpt__loopstatus {
color: var(--pg-blue, #1d4ed8);
}
.pg-practice[data-rb2].pgrb2c .pgpt__loop-clear,
.pg-practice[data-rb2].pgrb2c .pgpt__loop-flag {
width: 24px; height: 24px; border-radius: 50%; border: 0; background: none;
display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.pg-practice[data-rb2].pgrb2c .pgpt__loop-clear:hover { background: rgba(29,78,216,.12); }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgpt__cluster--loop {
background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b);
}
/* ── The tempo, for real ──────────────────────────────────────────────
The input is invisible here; the drawing is track / fill / thumb, so
that is what has to become Backing's slider (my first pass styled the
range's pseudo-elements and nothing moved). */
.pg-practice[data-rb2].pgrb2c .pgpt__fader-track {
height: 6px; border-radius: 3px;
background: #eef0f2; box-shadow: none;
}
.pg-practice[data-rb2].pgrb2c .pgpt__fader-fill {
height: 6px; border-radius: 3px;
background: #53a96b; box-shadow: none;
}
.pg-practice[data-rb2].pgrb2c .pgpt__fader-thumb {
width: 18px; height: 18px; border-radius: 50%;
background: #fff; border: 2px solid #53a96b;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.pg-practice[data-rb2].pgrb2c .pgpt__fader-thumb::after { content: none; }
/* Speed up is a plain button until the trainer is actually on. */
.pg-practice[data-rb2].pgrb2c .pgpt__speed-pill .pgpt__speed-pill-svg { display: none; }
.pg-practice[data-rb2].pgrb2c .pgpt__speed-pill[aria-pressed="true"] .pgpt__speed-pill-svg { display: block; }
.pg-practice[data-rb2].pgrb2c .pgpt__speed-pill .pgpt__speed-pill-lbl { color: inherit; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgpt__fader-track { background: var(--n-line, #3a424b); }
/* ── The knobs say where they are ─────────────────────────────────────
The name becomes the number while you set it, a muted stem reads as
muted from across the room, and the soloed one is marked. */
.pg-practice[data-rb2].pgrb2c .pgpt__knob-label {
font-variant-numeric: tabular-nums; transition: color .12s;
}
.pg-practice[data-rb2].pgrb2c .pgpt__knob.pgrb2-knob-live .pgpt__knob-label {
color: var(--pg-blue, #1d4ed8);
}
.pg-practice[data-rb2].pgrb2c .pgpt__knob[data-muted="true"] .pgpt__knob-arc-fill { stroke: #c2c7ce; }
.pg-practice[data-rb2].pgrb2c .pgpt__knob[data-muted="true"] .pgpt__knob-label { color: #9aa1ab; }
/* The loop's "not sounding right" flag is retired here (Phil,
2026-09-20). */
.pg-practice[data-rb2].pgrb2c .pgpt__loop-flag { display: none !important; }
/* The gear draws in CSS, so it cannot go missing when the chart body
re-renders its own button (Phil: "the gear disappears on chart"). */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__display-btn::before {
content: ''; width: 17px; height: 17px; display: block;
background: currentColor;
-webkit-mask: var(--pgrb2-gear) center / 17px 17px no-repeat;
mask: var(--pgrb2-gear) center / 17px 17px no-repeat;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__gear { display: none; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] {
--pgrb2-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
/* The collapse chevron stays on the row, whichever view is up. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__rib-btn--collapse { display: inline-flex !important; flex: none; }
/* An instrumental stretch says so. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__nowords {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 34px 16px; color: #9aa1ab;
font-size: 13.5px; font-weight: 600; text-align: center;
}
/* One pane needs no gutter on its left. */
/* One gutter, the same on every view and on both sides of a split --
flush to the edge was too far (Phil, 2026-09-20). */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__panes > .pgch__body { padding-left: 18px; padding-right: 18px; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__panes > .pgch__body > .pgch__lyrics,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__panes > .pgch__body .pg-cm-section { margin-left: 0; padding-left: 0; }
/* Chorus indent sets a chorus apart from the verses around it; following
the active section there is only one on screen, so it is just a margin. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgch__body.pgrb2-following .chorus-indent { padding-left: 0; margin-left: 0; }
/* ── The section card is a readout ────────────────────────────────────
No play, no restart, no loop, no eye: the transport plays, the wave
jumps and loops, and solo is retired (Phil, 2026-09-20). */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__iconbtn,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__solo {
display: none !important;
}
/* The card keeps ONE control: loop this section (Phil, 2026-09-20 -- the
wave loops too, but the card is where you are looking). */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list .pgps__card,
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-solo="1"] .pgps__list .pgps__card.is-soloed {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label loop" "bar bar" "meta meta";
padding: 14px 16px;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__loop {
grid-area: loop; align-self: start;
width: 36px; height: 36px; padding: 0;
display: inline-grid; place-items: center;
border: 1px solid var(--pg-border, #e5e7eb); border-radius: 9px;
background: #fff; color: #6b7280; cursor: pointer;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__loop:hover { border-color: #c7d7fd; color: var(--pg-blue, #1d4ed8); }
/* On = the same blue as the wave's loop button, so "am I looping?" reads
the same in both places (Phil: "easily notice if you are looping"). */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__list .pgps__card .pgps__loop[aria-pressed="true"] {
background: #1d4ed8; border-color: #1d4ed8; color: #fff;
box-shadow: 0 0 0 3px rgba(29, 78, 216, .15);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__loop {
background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__loop[aria-pressed="true"] {
background: #3b82f6; border-color: #3b82f6; color: #fff;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card .pgps__label { text-align: left; }
/* "over 1st half of verse" belongs with the rest of the meta. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__card [data-pgps="over"] { display: inline; }
/* ── Looping, on the wave ─────────────────────────────────────────────
Hover a section: its column tints and its loop button appears, a
22px target however narrow the label is. The overlay stays
click-through so the wave keeps its own seek and drag-to-loop. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__song-hover {
position: absolute; top: 0; bottom: 0; z-index: 2;
background: rgba(37, 99, 235, .07);
border-left: 1px solid rgba(37, 99, 235, .25);
border-right: 1px solid rgba(37, 99, 235, .25);
pointer-events: none;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__song-hover[hidden] { display: none; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__song-looptoggle {
position: absolute; top: 30px; z-index: 5;
transform: translateX(-50%);
width: 26px; height: 26px; padding: 0;
display: inline-grid; place-items: center;
border: 1px solid var(--pg-border, #e5e7eb); border-radius: 8px;
background: rgba(255,255,255,.94); color: #6b7280;
cursor: pointer; pointer-events: auto;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__song-looptoggle:hover { border-color: #c7d7fd; color: var(--pg-blue, #1d4ed8); }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__song-looptoggle.is-on {
background: var(--pg-blue, #1d4ed8); border-color: var(--pg-blue, #1d4ed8); color: #fff;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__song-looptoggle[hidden] { display: none; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__song-looptoggle svg { width: 15px; height: 15px; }
/* The names are for reading: a taller strip, bigger type, clickable. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__song-sec span {
top: 5px; left: 5px; font-size: 11px; letter-spacing: .05em;
pointer-events: auto; cursor: pointer;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgps__song-sec span:hover { color: var(--pg-blue, #1d4ed8); }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave .pgps__song { padding-top: 6px; }
/* ── Who's playing this ───────────────────────────────────────────────
Faces in front of the names, the way a streaming app tells you who is
in the scene (Phil, 2026-09-20). */
.pg-practice[data-rb2][data-mode="play"] .pgps__faces {
display: inline-flex; margin-right: 10px;
}
/* Big enough to recognise a player (Phil, 2026-09-20: "the photo is so
small it's pointless"). */
.pg-practice[data-rb2][data-mode="play"] .pgps__face {
width: 44px; height: 44px; border-radius: 50%;
object-fit: cover; object-position: center 22%;
background: #eef0f3;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(16,24,40,.14);
}
.pg-practice[data-rb2][data-mode="play"] .pgps__face + .pgps__face { margin-left: -12px; }
.pg-practice[data-rb2][data-mode="play"] .pgps__label-perf { font-size: 14px; }
.pg-practice[data-rb2][data-mode="play"] .pgps__label-perf {
display: inline-flex; align-items: center; gap: 0;
}
body.pg-app--dark #pg-practice-shell[data-rb2][data-mode="play"] .pgps__face { border-color: var(--n-card, #1e2328); }
/* Nothing chosen yet: no stale wave, no stale controls. */
.pg-practice[data-rb2].pgrb2[data-mode="play"].pgrb2-nosong .pgrb2__wave,
.pg-practice[data-rb2].pgrb2c.pgrb2-nosong .pgrb2__tbar,
.pg-practice[data-rb2].pgrb2c.pgrb2-nosong .pgrb2__meta {
display: none !important;
}
/* Night: the split button was still wearing its daylight white, and the
section columns need to read on a dark wave (Phil, 2026-09-20). */
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgrb2__split {
background: var(--n-raised, #232930);
border-color: var(--n-line, #3a424b);
color: var(--n-ink, #e9e6e0);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgrb2__split[aria-pressed="true"] {
background: rgba(59,130,246,.22); border-color: rgba(59,130,246,.5); color: #9ec5ff;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgps__song-hover {
background: rgba(154, 200, 238, .10);
border-left-color: rgba(154, 200, 238, .35);
border-right-color: rgba(154, 200, 238, .35);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgps__song-looptoggle {
background: rgba(30,35,40,.92); border-color: var(--n-line, #3a424b); color: var(--n-muted, #9aa3ad);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgps__song-sec span { color: #9fb0c2; }
/* Our short readout stands in for transport-bar's long one. */
.pg-practice[data-rb2][data-mode="play"] .pgpt__cluster--loop .pgpt__loopstatus { display: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__loopname {
min-width: 0; flex: 1 1 auto;
font-size: 12.5px; font-weight: 700; color: #9aa1ab;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__looplbl {
flex: none; margin-right: 8px;
font: 700 10.5px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: .13em; text-transform: uppercase; color: #8a8078;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__loopname.is-on { color: var(--pg-blue, #1d4ed8); }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__plbtn { display: none !important; }
/* ── Tempo lives with the fields ──────────────────────────────────────
KEY · CAPO · TIME · TEMPO: the settings in one row, and the transport
row keeps play, the loop and the mix (Phil, 2026-09-20). */
.pg-practice[data-rb2].pgrb2c .pgrb2__tempo { display: flex; flex-direction: column; gap: 4px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tempo-row { display: flex; align-items: center; gap: 12px; height: 30px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tempo .pgpt__fader-block {
display: flex !important; flex-direction: row !important; align-items: center; gap: 10px;
width: 300px; min-width: 240px; max-width: 320px; margin: 0;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tempo .pgpt__fader-step { height: 30px; min-width: 30px; padding: 0 8px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tempo .pgpt__speed-pill { height: 30px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tempo .pgpt__fader-readout { white-space: nowrap; flex: none; }
/* Shortcuts sheet: Real Band's own rows replace the pin rows. */
.pgtb__kbd-row--rb { display: none; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgtb__kbd-row--rb { display: flex; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgtb__kbd-row--pin,
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgtb__kbd-row--seek { display: none; }
/* The short loop readout and its label are Real Band's; other modes keep transport-bar's own. */
.pgrb2__loopname, .pgrb2__looplbl { display: none; }
.pg-practice[data-rb2].pgrb2c .pgrb2__loopname,
.pg-practice[data-rb2].pgrb2c .pgrb2__looplbl { display: inline-block; }
/* EQ: an icon beside the Band knob, drawn like restart / stop -- the
word "EQ" made it a stray control in no man's land (Phil, 2026-09-20).
The dot still shows when the sound isn't flat. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq { margin-left: 4px; position: relative; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-btn {
position: relative;
width: 34px; height: 34px; min-width: 0; padding: 0;
border: 1px solid transparent; border-radius: 9px; background: transparent;
color: #374151; box-shadow: none;
display: inline-grid; place-items: center;
transition: background .12s, color .12s;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-btn svg { width: 18px; height: 18px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-txt { display: none; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-btn:hover,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-btn[aria-expanded="true"] { background: #f6f7f8; color: #1f2937; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-dot { position: absolute; top: 5px; right: 5px; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-btn {
background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0);
}
/* ── The mix panel ────────────────────────────────────────────────────
Vocal, Band and EQ read as one hardware strip: a soft tray behind the
knobs, EQ at its right end as a real button, and no divider or wide
gutters between them (Phil, 2026-09-20). Two boxes drawn as one, since
EQ is the knobs' sibling, not their child. Tray dropped: tight
spacing does the grouping. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__knobs {
margin-left: 18px; padding: 0; gap: 6px;
background: none; border: 0; border-radius: 0;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__knobs::before { display: none !important; content: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq {
align-self: stretch; display: flex; align-items: center;
/* Tight to the Band knob: the closeness is the grouping (the grey
tray read as a second slab beside the loop chip -- Phil). */
margin-left: -6px; padding: 0;
background: none; border: 0; border-radius: 0;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-btn {
background: #fff; border: 1px solid #d9dde2; border-radius: 9px;
box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-btn:hover,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-btn[aria-expanded="true"] {
background: #fff; border-color: #aeb5bd; color: #111827;
}
/* A tune has no singer. */
.pg-practice[data-rb2][data-pg-tune][data-mode="play"] [data-pgpt="knob-vocal"] { display: none; }
/* ── Karaoke: the same heading and control row ────────────────────────
Karaoke keeps its own lyrics; it takes the heading and the row (Phil,
2026-09-20). The row sits under the heading as a whole card -- there
is no wave beneath it to join -- and keeps the thin scrub, which is
Karaoke's only timeline. */
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar {
margin: 8px 16px 10px; border-bottom: 1px solid var(--pg-border, #e5e7eb); border-radius: 10px;
}
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__blur { flex: none; }
/* Blur: a pill in Backing's neutral button style, like Speed up. */
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__blur-pill {
height: 34px; padding: 0 14px; border-radius: 9px;
border: 1px solid #d9dde2; background: #fff; color: #1f2937;
font-size: 13px; font-weight: 700;
}
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__blur-pill[aria-pressed="true"] {
background: #eef6f0; border-color: #a9d3b5; color: #2f6b40;
}
body.pg-app--dark #pg-practice-shell[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__blur-pill {
background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0);
}
/* No song yet: the chart pane held the last song's chart. */
.pg-practice[data-rb2].pgrb2[data-mode="play"].pgrb2-nosong .pg-practice__chord { visibility: hidden; }
/* Karaoke's sheet: no wave, so no pins, drags or zoom -- and the arrows
step by section, as in Real Band. */
.pg-practice[data-rb2][data-mode="sing"] .pgtb__kbd-row--pin,
.pg-practice[data-rb2][data-mode="sing"] .pgtb__kbd-row--seek { display: none; }
.pg-practice[data-rb2][data-mode="sing"] .pgtb__kbd-row--sec { display: flex; }
/* Karaoke: the chip bar's settings live in the row's gear now. The bar
stays in the DOM (the chips carry the wiring) but takes no space. */
.pg-practice[data-rb2][data-mode="sing"] .pgsg-bar { display: none !important; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__singgear { position: relative; flex: none; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__singgear .pgbk2-lyrhead__pop { text-align: left; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__singgear .pgbk2-lyrhead__row.is-off { opacity: .45; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__singgear .pgbk2-lyrhead__row.is-off .pgbk2-dseg span { cursor: default; }
/* The scrub is Karaoke's timeline, but a bar the width of the screen
shouted (Phil). A calm, fixed length beside the clock. */
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__row--primary { flex: 0 1 auto; min-width: 0; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__scrub { flex: 0 1 320px; width: 320px; min-width: 140px; margin: 0 9px; } /* half the 18px thumb each side: at 0:00 it overhung into the clock (Phil) */
/* The mix sits by the scrub, as in Real Band; the lyrics' own controls
(Blur, the gear) keep the far end (Phil, 2026-09-20). */
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__knobs { margin-left: 18px; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__blur { margin-left: 6px; }
/* Blur and the gear are the lyrics' pair, together beside the mix --
a lone gear at the far end read as unrelated (Phil, 2026-09-20). */
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgrb2__singgear { margin-left: 4px; }
/* ── The control row wears Backing's band ─────────────────────────────
Backing's strip is a soft grey band with no border; ours had a hairline
box that clashed with the borderless pieces around it (Phil,
2026-09-20). Same values as refresh.css .pgbk2__band. In Real Band it
is its own band just above the wave rather than a lid on it. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar {
background: #f7f8fa; border: 0; border-radius: 12px; padding: 10px 14px;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__tbar { margin-bottom: 8px; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__tbar { background: var(--n-card, #1e2328); border: 0; }
/* The loop chip was a grey box on white; on the grey band it reads white. */
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__cluster--loop { background: #fff; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__cluster--loop { background: var(--n-raised, #232930); }
/* Karaoke: the words start close under the band -- the old chip bar's
clearance (16px) plus the band's margin left a gap over the first
section. */
.pg-practice[data-rb2][data-mode="sing"] .pgsg__inner { padding-top: 0; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar { margin-bottom: 6px; }
.pg-practice[data-rb2][data-mode="sing"] .pgsg__inner > .pgsg__section:first-child { margin-top: 10px; }
/* A break over a vamp: the chords it plays, in the chart's type. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__vamp { padding: 6px 0 12px; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__vamp-lbl {
font-size: 15px; font-weight: 700; color: var(--pg-blue, #1E4F75); margin-bottom: 10px;
}
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__vamp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__vamp-cell {
min-width: 76px; padding: 14px 18px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
font: 800 26px/1 "Fira Mono", ui-monospace, monospace; color: #111827;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2[data-mode="play"] .pgrb2__vamp-cell {
background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0);
}
/* ── One grey panel at the top ────────────────────────────────────────
On the song page the grey card is the player's first block; in the
modal it floated between the white heading and the content (Phil,
2026-09-20). The heading takes the same grey and meets the control
row, so title, fields and transport read as one panel -- nothing
moves, only the background extends. Desktop only (phones: below). */
@media (min-width: 1025px) and (min-height: 501px) {
.pg-practice[data-rb2].pgrb2c .pgrb2__head {
background: #f7f8fa; border-radius: 12px 12px 0 0;
padding: 14px 14px 8px;
}
/* Real Band: the row rides the wave, which starts right of an open
playlist sidebar -- the heading lines up with it. */
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__head { margin: 10px 16px 0 24px; }
.pg-practice[data-rb2].pgrb2[data-mode="play"][data-sidebar="expanded"] .pgrb2__head { margin-left: calc(280px + 24px); }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__wave { padding-top: 0; }
.pg-practice[data-rb2].pgrb2[data-mode="play"] .pgrb2__tbar { border-radius: 0 0 12px 12px; }
/* Karaoke: heading and row share the transport. */
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__head { margin: 10px 16px 0; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar { margin: 0 16px 10px; border-radius: 0 0 12px 12px; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__head { background: var(--n-card, #1e2328); }
}
/* ══ Phones ══════════════════════════════════════════════════════════
ONE block for every phone rule, both modes (Phil, 2026-09-20), in
Backing's phone shape. Top to bottom: the topbar (title, credit,
close; the modes as icon tabs), then one grey panel -- the fields
(KEY / CAPO / TIME as bordered selects) over the control band. The
band: row 1 is Backing's, play / restart / stop then tempo (− slider
+ BPM); row 2 the clock and the loop (Real Band) or the scrub
(Karaoke); row 3 the mix and the extras. Real Band then shows the
wave and the Chart / Lyrics pane filling the rest -- the section
cards step aside. rb2.js seats tempo in the band on phones; the
rest is the desktop seats, laid out small. */
@media (max-width: 1024px), (max-height: 500px) {
/* The song's own title block rides in the panel (rb2.js), styled as
Backing's phone heading: title with the switch-song chevron, then
"Source: … · Recorded in …". The copy rb2 draws on desktop stands
down. */
.pg-practice[data-rb2].pgrb2c .pgrb2__art,
.pg-practice[data-rb2].pgrb2c .pgrb2__titles { display: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__head { flex-wrap: wrap; row-gap: 10px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__title-block {
display: block; flex: 1 1 100%; min-width: 0; height: auto; padding: 0 0 4px; background: none; border: 0;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__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[data-rb2].pgrb2c .pgrb2__head .pgtb__title {
display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: #111827;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__title::after {
content: ""; flex: none; width: 13px; height: 13px; margin-top: 3px;
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[data-rb2].pgrb2c .pgrb2__head .pgtb__artist,
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__origkey,
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__waltz,
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__form,
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__tuning { display: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__keys { display: block !important; font-size: 13px; font-weight: 500; color: #6b7280; white-space: normal; }
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__keys::before { content: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__credit-lbl { color: #4b5563; font-weight: 600; }
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__credit-sep { color: #c3c8ce; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__head .pgtb__title { color: var(--n-ink, #e9e6e0); }
/* One grey panel: the fields on top, the band below, joined. */
.pg-practice[data-rb2].pgrb2c .pgrb2__head {
margin: 8px 10px 0; padding: 10px 12px 8px; gap: 0;
background: #f7f8fa; border-radius: 12px 12px 0 0;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar {
margin: 0 10px 8px; padding: 4px 12px 10px; gap: 8px 6px; flex-wrap: wrap;
border-radius: 0 0 12px 12px;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__head { background: var(--n-card, #1e2328); }
/* Fields: Backing's phone fields exactly -- labels on the left,
28px bordered selects, TIME at the same line height. */
.pg-practice[data-rb2].pgrb2c .pgrb2__meta { flex-wrap: nowrap; gap: 14px; width: 100%; align-items: flex-end; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-wrap { gap: 14px; align-items: flex-end; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key {
display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
background: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-lbl,
.pg-practice[data-rb2].pgrb2c .pgrb2__stat-lbl {
font: 700 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: .13em; text-transform: uppercase; color: #8a8078; text-align: left; margin: 0; padding: 0;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-select {
height: 28px; min-width: 56px; padding: 0 22px 0 10px; font-size: 14px; font-weight: 700;
border: 1px solid #e5e7eb !important; border-radius: 9px; background-color: #fff !important;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__stat-val { font-size: 15px; font-weight: 700; line-height: 28px; }
/* The band: three rows. Its pieces lay out as one flex set -- the
transport's own row and the tempo field fold open (display:
contents) -- and two invisible full-width items break the lines. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__row--primary,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgrb2__tempo,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgrb2__tempo-row { display: contents !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgrb2__tempo > .pgrb2__stat-lbl { display: none; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar::before,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar::after { content: ""; flex: 0 0 100%; height: 0; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar::before { order: 9; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar::after { order: 19; }
/* Row 1: play / restart / stop -- and the mix on the right. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__play { order: 1; width: 44px; height: 44px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__play svg { width: 20px; height: 20px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__restart { order: 2; width: 32px; height: 32px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__stop { order: 3; width: 32px; height: 32px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__knobs { order: 4; margin-left: auto; gap: 6px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__mix { display: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__knob-label { display: none; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__knob-body { width: 38px; height: 38px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq { order: 5; margin-left: 0; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__eq-btn { width: 32px; height: 32px; }
/* Row 2: the clock, then the loop readout (Real Band) or the scrub
(Karaoke). Real Band's cards carry their own waves, so no scrub. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__time--cur { order: 10; font-size: 15px; min-width: 58px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__time--dur { display: none; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__scrub { display: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__cluster--loop {
order: 11; flex: 1 1 auto; width: auto; max-width: none; min-width: 0;
}
/* Row 3: tempo, whole -- minus, slider, plus, BPM and %, and Speed up. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__fader-block {
order: 20; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important;
display: flex !important; align-items: center; gap: 6px; background: none !important;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__speed { order: 21; flex: none; }
/* The old phone tempo popover painted the stepper black with white
type; in the band it is the plain desktop control. */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar [data-pgpt="fader-group"] {
flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; gap: 6px;
background: none !important; width: auto !important; padding: 0 !important; box-shadow: none !important;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar [data-pgpt="fader-group"]::before,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar [data-pgpt="fader-group"]::after { content: none !important; display: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__fader-track-wrap { flex: 1 1 auto; min-width: 50px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__fader-step { width: 28px; height: 28px; min-width: 28px; padding: 0; flex: none; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__fader-readout { flex: none; white-space: nowrap; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__fader-bpm { color: #111827 !important; font-size: 14px; white-space: nowrap; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__fader-pct,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__fader-dot { color: #6b7280 !important; font-size: 12px; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__tbar .pgpt__fader-bpm { color: var(--n-ink, #e9e6e0) !important; }
/* The phone-only tempo pill and overflow button belonged to the old
phone strip; the band replaces them. */
.pg-practice[data-rb2].pgrb2c .pgpt__tempo-pill,
.pg-practice[data-rb2].pgrb2c .pgpt__sing-tempo-slot,
.pg-practice[data-rb2].pgrb2c .pg-practice__more-mobile { display: none !important; }
/* Karaoke: Blur and the lyrics gear finish row 1; the scrub fills row 2. */
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__blur { order: 6; margin-left: 0; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgrb2__singgear { order: 7; margin-left: 0; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__blur-pill { height: 32px; padding: 0 10px; font-size: 12.5px; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__scrub {
order: 11; flex: 1 1 auto; width: auto; min-width: 100px; height: 28px; background: none !important; margin: 0 9px;
}
/* Today's phone cards carry the faces too -- a size down. */
.pg-practice[data-rb2][data-mode="play"] .pgps__face { width: 34px; height: 34px; }
}
/* Karaoke's scrub in the band's flat style (every width): a soft track,
the blue fill, a white thumb ringed in blue -- the old strip drew it
with glossy gradients that read as a dark bar (Phil, 2026-09-20). */
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__scrub-track {
background: #e3e7ec !important; background-image: none !important; height: 4px; border-radius: 2px; box-shadow: none !important;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__scrub-fill {
background: var(--pg-blue, #1E4F75) !important; background-image: none !important; box-shadow: none !important;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__scrub-thumb {
width: 14px; height: 14px; background: #fff !important; background-image: none !important;
border: 2px solid var(--pg-blue, #1E4F75) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .18) !important;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__tbar .pgpt__scrub-track { background: var(--n-line, #3a424b) !important; }
/* ── Karaoke without a scrub ──────────────────────────────────────────
Tap a line to jump there, ← / → step by section: the scrub was a
second timeline nobody needed on a phone (Phil, 2026-09-21). Desktop
keeps it. */
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__scrub { display: none !important; }
}
/* Karaoke on phones (Phil, 2026-09-21), Backing's phone sizes (8/10
padding, a 36px play, 34px icon buttons):
- ONE fields row: KEY · CAPO · TIME · TEMPO (− slider + BPM), as on
desktop;
- ONE band row: play / restart / stop, then plain Vocal and Band MUTE
buttons (the level knobs take no room here), Blur, and one gear that
holds everything else -- the lyrics display and EQ & volume. */
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar { padding: 8px 10px; gap: 6px; flex-wrap: nowrap; align-items: center; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar::before,
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar::after { display: none; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__play { width: 36px; height: 36px; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__play svg { width: 18px; height: 18px; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__restart,
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__stop { width: 34px; height: 34px; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__restart svg,
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__stop svg { width: 18px; height: 18px; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__time--cur { display: none !important; }
/* Vocal / Band as mute buttons: the icon (with its slash when muted),
no level ring. A tap mutes, as on the knob. */
/* The mutes and Blur sit right after the transport; the gear keeps
the far end (Phil, 2026-09-21). */
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__knobs { margin-left: 8px; gap: 6px; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgrb2__singgear { margin-left: auto !important; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__knob-arc { display: none !important; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__knob-body {
width: 34px; height: 34px; display: inline-grid; place-items: center;
border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; box-shadow: none;
}
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__knob-icon { width: 18px; height: 18px; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__knob[data-muted="true"] .pgpt__knob-body { background: #f3f4f6; color: #9aa1ab; }
body.pg-app--dark #pg-practice-shell[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__knob-body { background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); }
/* EQ lives in the gear on phones: its button steps out of the row but
stays in the page, so the gear's "EQ & volume" can open its panel. */
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__eq { width: 0; margin: 0; overflow: visible; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__eq-btn {
position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none;
}
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgrb2__singgear .pgbk2-lyrhead__gear { width: 34px; height: 34px; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__blur-pill { width: 34px; height: 34px; padding: 0; justify-content: center; }
/* One fields row: KEY · CAPO · TIME · TEMPO. */
.pg-practice[data-rb2].pgrb2c .pgrb2__meta { flex-wrap: nowrap; gap: 12px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-wrap { gap: 12px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-select { min-width: 50px; padding: 0 20px 0 9px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgrb2__tempo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgrb2__tempo-row { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-block {
flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important;
display: flex !important; align-items: center; gap: 4px; background: none !important;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__meta [data-pgpt="fader-group"] {
flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; gap: 4px;
background: none !important; width: auto !important; padding: 0 !important; box-shadow: none !important;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__meta [data-pgpt="fader-group"]::before,
.pg-practice[data-rb2].pgrb2c .pgrb2__meta [data-pgpt="fader-group"]::after { content: none !important; display: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-track-wrap { flex: 1 1 auto; min-width: 24px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-step { width: 26px; height: 28px; min-width: 26px; padding: 0; flex: none; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-readout { flex: none; white-space: nowrap; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-bpm { color: #111827 !important; font-size: 14px; }
/* The percent stays; TIME gives way on phones so tempo has room
(Phil, 2026-09-21). */
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-pct,
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-dot { color: #6b7280 !important; font-size: 12px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgrb2__stats { display: none !important; }
/* "117 BPM · 100%" rides on the TEMPO label's line, right-aligned, so
the slider gets the row between − and +. */
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgrb2__tempo { position: relative; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgrb2__tempo-row,
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-block { position: static; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-readout {
position: absolute; top: -2px; right: 0; line-height: 14px;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-bpm { font-size: 12.5px !important; line-height: 14px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-track-wrap { min-width: 80px; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__meta .pgpt__fader-bpm { color: var(--n-ink, #e9e6e0) !important; }
}
/* The gear's Singer / Band levels are for phones; desktop has the knobs.
EQ isn't offered on phones -- two levels are the mix there. */
.pgrb2__sg-lvl { display: none !important; }
@media (max-width: 1024px), (max-height: 500px) {
.pgrb2__sg-lvl { display: flex !important; gap: 12px; }
.pgrb2__sg-lvl > span:first-child { flex: 0 0 52px; }
/* The band's slider: grey track, green fill, white thumb ringed in
green -- not the browser's dark default (Phil, 2026-09-21). */
.pgrb2__sg-lvl input[type="range"] {
flex: 1 1 auto; min-width: 0; height: 6px; margin: 0; border-radius: 3px;
-webkit-appearance: none; appearance: none; cursor: pointer;
background: linear-gradient(to right, #53a96b var(--fill, 100%), #e5e7eb var(--fill, 100%));
}
.pgrb2__sg-lvl input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
background: #fff; border: 2px solid #53a96b; box-shadow: 0 1px 2px rgba(16, 24, 40, .18);
}
.pgrb2__sg-lvl input[type="range"]::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #53a96b;
}
.pgrb2__sg-lvl input[type="range"]::-moz-range-track { background: transparent; }
.pgrb2__sg-val { flex: 0 0 38px; text-align: right; font-size: 12.5px; color: #6b7280; font-variant-numeric: tabular-nums; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__tbar .pgpt__eq { display: none !important; }
}
/* Night, phones: the fields' selects and the title block in the dark
surfaces (the phone rules force white for day). */
@media (max-width: 1024px), (max-height: 500px) {
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-select {
background-color: var(--n-raised, #232930) !important; border-color: var(--n-line, #3a424b) !important; color: var(--n-ink, #e9e6e0) !important;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__head .pgtb__title-block,
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__head .pgtb__title-line { background: none !important; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__head .pgtb__keys { color: var(--n-muted, #9aa3ad); }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__head .pgtb__credit-lbl { color: var(--n-ink, #e9e6e0); }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-lbl,
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__stat-lbl { color: var(--n-muted, #9aa3ad); }
}
/* Phones: Backing's header metrics, measured side by side (Phil,
2026-09-21) -- the panel's 12px sides and 12px top, the title's 1.1
line, 8px from subtitle to the fields, 56px selects padded 10/24, 12px
from the fields to the transport, and 30px restart / stop. */
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2].pgrb2c .pgrb2__head { margin: 12px 12px 0; padding: 10px 12px 4px; row-gap: 6px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar { margin-left: 12px; margin-right: 12px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__title { line-height: 1.1; }
.pg-practice[data-rb2].pgrb2c .pgrb2__head .pgtb__title-block { padding-bottom: 0; }
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-select { min-width: 56px; padding: 0 24px 0 10px; }
.pg-practice[data-rb2][data-mode="sing"] .pgrb2__meta .pgpt__console-key-select { min-width: 56px; padding: 0 24px 0 10px; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__restart,
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__stop { width: 30px !important; height: 30px !important; }
}
/* Karaoke's sweep on phones. modal.css turned it off there, reasoning
that on a wrapped line the edge would move through every row at once;
tested (2026-09-21): the gradient runs across the wrapped fragments as
one strip, row one then row two -- the reading order. Phil: "sweep is
not working". Longhands only, so the paused state still pauses; Line
mode keeps its own look. */
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2][data-mode="sing"]:not([data-sing-line-mode="1"]) .pgsg__line.is-current .pgsg__line-text {
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-image: linear-gradient(to right, var(--pg-text-primary, #222) 50%, var(--pg-gray-400, #9ca3af) 50%);
background-size: 200% 100%;
background-position: 100% 0;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
animation-name: pgsg-sweep;
animation-duration: var(--line-dur, 2s);
animation-timing-function: linear;
animation-fill-mode: forwards;
}
/* modal.css's phone "animation: none" shorthand reset the play state,
outranking the pause rule -- say it again here. */
.pg-practice[data-rb2][data-mode="sing"]:not([data-sing-playing="true"]) .pgsg__line.is-current .pgsg__line-text {
animation-play-state: paused;
}
}
/* ── Real Band on phones: Backing's band (Phil, 2026-09-21) ───────────
One row: play / restart / stop, the loop readout beside them, and a
gear at the end that opens a second row -- Speed up and one level each
for the vocal and the band. Tempo sits with the fields (above), TIME
gives way, as in Karaoke. */
.pgrb2__rbgear, .pgrb2__opts { display: none; }
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar { padding: 8px 10px; gap: 6px; flex-wrap: wrap; align-items: center; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar::before,
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar::after { display: none; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__play { width: 36px; height: 36px; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__play svg { width: 18px; height: 18px; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__time--cur { display: none !important; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__cluster--loop { order: 4; flex: 1 1 auto; min-width: 0; margin-left: 4px; }
/* Vocal / Band as mute buttons after the loop readout (they fit at
375px), as in Karaoke; their levels are in the gear's row. */
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__eq { display: none !important; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__knobs { order: 5; margin: 0; gap: 6px; flex: none; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__knob-arc { display: none !important; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__knob-body {
width: 34px; height: 34px; display: inline-grid; place-items: center;
border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; box-shadow: none;
}
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__knob-icon { width: 18px; height: 18px; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__knob[data-muted="true"] .pgpt__knob-body { background: #f3f4f6; color: #9aa1ab; }
body.pg-app--dark #pg-practice-shell[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__knob-body { background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgrb2__rbgear {
order: 6; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #374151; cursor: pointer;
}
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgrb2__rbgear svg { width: 17px; height: 17px; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgrb2__rbgear[aria-expanded="true"] { background: #eef4f9; color: #1e4f75; border-color: #cdd4da; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar.is-opts-open .pgrb2__opts {
order: 7; flex: 0 0 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
padding: 8px 2px 2px; border-top: 1px solid #e7e9ec; margin-top: 4px;
}
.pg-practice[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed { align-self: flex-start; margin: 0; }
.pgrb2__lvl { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; font-weight: 600; color: #1f2937; }
.pgrb2__lvl-lbl { flex: 0 0 48px; }
.pgrb2__lvl-val { flex: 0 0 40px; text-align: right; font-size: 12.5px; font-weight: 600; color: #6b7280; font-variant-numeric: tabular-nums; }
.pgrb2__lvl input[type="range"] {
flex: 1 1 auto; min-width: 0; height: 6px; margin: 0; border-radius: 3px;
-webkit-appearance: none; appearance: none; cursor: pointer;
background: linear-gradient(to right, #53a96b var(--fill, 100%), #e5e7eb var(--fill, 100%));
}
.pgrb2__lvl input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
background: #fff; border: 2px solid #53a96b; box-shadow: 0 1px 2px rgba(16, 24, 40, .18);
}
.pgrb2__lvl input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #53a96b; }
body.pg-app--dark #pg-practice-shell[data-rb2][data-mode="play"] .pgrb2__tbar .pgrb2__rbgear { background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0); }
body.pg-app--dark .pgrb2__lvl { color: var(--n-ink, #e9e6e0); }
}
/* KEY / CAPO wear Backing's chevron -- the small polyline 12px in from
the edge, not the old arrow tight against it (Phil, 2026-09-21). */
.pg-practice[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-select {
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: calc(100% - 12px) 50% !important;
background-size: auto !important;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c .pgrb2__meta .pgpt__console-key-select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23c3c8ce' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
/* Real Band's phone row: the loop readout takes what is left, so the
mutes and the gear stay on the line rather than wrapping. */
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__cluster--loop { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
}
@media (max-width: 1024px), (max-height: 500px) {
/* The readout's value gets the room: the frame and the name flex,
and the clear × shows only while something is looping. */
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__loopstatus-frame { flex: 1 1 auto; min-width: 0; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgrb2__loopname { flex: 1 1 auto; min-width: 0; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgrb2__looplbl { margin-right: 6px; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__tbar .pgpt__cluster--loop:not(:has(.pgrb2__loopname.is-on)) .pgpt__loop-clear { display: none !important; }
/* Speed up leads the gear's row, as a labelled button like Backing's. */
.pg-practice[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed { order: -1; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed-pill {
width: auto !important; height: 32px; padding: 0 12px !important; gap: 6px;
border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #1f2937;
font-size: 13px; font-weight: 600;
}
.pg-practice[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed-pill-lbl { display: inline !important; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed-pill-icon { display: none !important; }
}
/* Phones: the mute buttons are one rounded square, like the gear -- the
knob's round cap drew a circle inside the square (Phil, 2026-09-21). */
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__knob-cap {
background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
width: 100% !important; height: 100% !important; inset: 0 !important;
}
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__knob-body::before { display: none !important; }
.pg-practice[data-rb2].pgrb2c .pgrb2__tbar .pgpt__knob-body { overflow: hidden; }
}
/* Speed up in Real Band's phone gear row: Backing's .pg-band-btn exactly
-- off and on (Phil, 2026-09-21). The old phone strip drew it as a
dark green oval when on. */
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed-pill {
display: inline-flex !important; align-items: center; gap: 7px;
width: auto !important; height: 34px !important; padding: 0 12px !important; margin: 0 !important;
border: 1px solid #e5e7eb !important; border-radius: 9px !important; background: #fff !important;
box-shadow: none !important; font-size: 13.5px !important; font-weight: 600 !important; color: #374151 !important;
white-space: nowrap;
}
.pg-practice[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed-pill:hover { border-color: #cdd4da !important; background: #fcfcfd !important; }
.pg-practice[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed-pill[aria-pressed="true"],
.pg-practice[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed-pill.is-on {
background: #ecf6ef !important; border-color: #b3d4bd !important; color: #2c6b40 !important;
}
.pg-practice[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed-pill-lbl { color: inherit !important; font: inherit !important; }
body.pg-app--dark #pg-practice-shell[data-rb2][data-mode="play"] .pgrb2__opts .pgpt__speed-pill { background: var(--n-raised, #232930) !important; border-color: var(--n-line, #3a424b) !important; color: var(--n-ink, #e9e6e0) !important; }
}
/* ── Real Band phone cards (Phil, 2026-09-21) ─────────────────────────
The cards are the pane on a phone. Desktop's card, plus two things
only a phone needs: one switch for the whole list (Lyrics & chords,
the default, or Wave) and an enlarge button that gives one card the
pane without looping it. No per-card play/restart -- the band plays,
a tap starts the section. */
.pgps__phoneview { display: none; }
.pgps__ic-enlarge, .pgps__ic-shrink { display: none; }
@media (max-width: 1024px), (max-height: 500px) {
/* Sticky, and solid out to the pane's own padding (16 16 16 24,
modal.css) so cards scrolling under it don't show above or beside
it (Phil, 2026-09-21). The grey pill is the ::before inside that. */
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__phoneview {
display: flex; gap: 2px;
margin: -16px -16px 0 -24px; padding: 19px 19px 13px 27px;
position: sticky; top: -16px; z-index: 6;
background: var(--pg-white, #fff);
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__phoneview::before {
content: ""; position: absolute; inset: 16px 16px 10px 24px; z-index: -1;
background: #eef0f3; border-radius: 10px;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__phoneview button {
flex: 1 1 0; height: 32px; border: 0; border-radius: 8px; background: none;
font: 600 13px/1 inherit; color: #6b7280; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__phoneview button.is-active {
background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(16,24,40,.12);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgps__phoneview { background: var(--n-card, #1e2328); }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgps__phoneview::before { background: var(--n-raised, #232930); }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgps__phoneview button { color: #9aa3ad; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgps__phoneview button.is-active {
background: #2c333b; color: var(--n-ink, #e9e6e0);
}
/* The card: name and who's playing on the left, enlarge and loop on
the right, then the wave or the words, then the times. */
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__list .pgps__card,
.pg-practice[data-rb2].pgrb2c[data-mode="play"][data-solo="1"] .pgps__list .pgps__card.is-soloed {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-rows: auto auto auto;
grid-template-areas: "label solo loop" "bar bar bar" "meta meta meta";
gap: 10px 8px; padding: 12px 14px; min-height: 0;
border: 1px solid var(--pg-border, #e5e7eb); border-radius: 12px;
box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__iconbtn { display: none !important; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__label {
align-self: center; margin: 0; min-width: 0; text-align: left; font-size: 15px;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"][data-solo="1"] .pgps__card.is-soloed .pgps__label { font-size: 17px; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__label-name {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__label-perf {
display: flex; align-items: center; margin-top: 6px; min-width: 0;
font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__faces { flex: none; margin-right: 8px; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__face { width: 30px; height: 30px; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__face + .pgps__face { margin-left: -9px; }
/* Enlarge and loop: desktop's 36px square, blue when on. */
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__loop,
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__solo {
align-self: start; width: 36px; height: 36px; padding: 0;
display: inline-grid; place-items: center;
border: 1px solid var(--pg-border, #e5e7eb); border-radius: 9px;
background: #fff; color: #6b7280;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__loop[aria-pressed="true"],
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__solo[aria-pressed="true"] {
background: #1d4ed8; border-color: #1d4ed8; color: #fff;
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__loop,
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__solo {
background: var(--n-raised, #232930); border-color: var(--n-line, #3a424b); color: var(--n-ink, #e9e6e0);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__loop[aria-pressed="true"],
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__solo[aria-pressed="true"] {
background: #3b82f6; border-color: #3b82f6; color: #fff;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__solo .pgps__ic-eye { display: none; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__solo:not([aria-pressed="true"]) .pgps__ic-enlarge,
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__solo[aria-pressed="true"] .pgps__ic-shrink { display: block; }
/* The wave: desktop's height in the list. */
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__bar {
height: 64px; min-height: 64px; border-radius: 9px;
}
/* Words instead of the wave: the card grows to them; a thin line
along the bottom keeps the progress. */
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card.is-showing-words .pgps__bar {
height: auto; min-height: 0; background: none; cursor: pointer; padding-bottom: 4px;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card.is-showing-words .pgps__bar-wave,
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card.is-showing-words .pgps__bar-ticks,
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card.is-showing-words .pgps__bar-head,
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__words-toggle { display: none !important; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card.is-showing-words .pgps__bar-fill {
top: auto; bottom: 0; height: 3px; border-radius: 2px; background: var(--pg-blue, #1E4F75); opacity: .55;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card.is-showing-words .pgps__solo-words {
position: static; inset: auto; overflow: visible; padding: 0; background: none;
font-size: 15px; line-height: 1.55;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__solo-words .pg-cm-section:last-child { margin-bottom: 0; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__solo-chart {
margin-top: 0.9em; padding-top: 0.9em; border-top: 1px solid var(--pg-border, #e5e7eb);
}
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__solo-chart { border-top-color: var(--n-line, #3a424b); }
/* Footer: desktop's -- times, then "over …" whenever it applies. */
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__meta {
justify-content: flex-start; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 12px;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__over:not([hidden]) { display: inline; }
/* Enlarged: the card is the pane; the others step aside until it's
closed. */
.pg-practice[data-rb2].pgrb2c[data-mode="play"][data-solo="1"] .pg-practice__sections {
display: flex; flex-direction: column; height: auto;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"][data-solo="1"] .pgps__list {
flex: 1 1 auto; min-height: 0; height: auto; display: flex; flex-direction: column;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"][data-solo="1"] .pgps__list .pgps__card:not(.is-soloed) { display: none; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"][data-solo="1"] .pgps__list .pgps__card.is-soloed {
position: static; inset: auto; margin: 0; z-index: auto; flex: 1 1 auto; min-height: 0;
grid-template-rows: auto minmax(0, 1fr) auto;
border-color: var(--pg-blue, #1E4F75); box-shadow: 0 0 0 2px rgba(30, 79, 117, 0.12);
transition: none;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"][data-solo="1"] .pgps__card.is-soloed .pgps__bar {
height: auto; min-height: 120px; align-self: stretch;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"][data-solo="1"] .pgps__card.is-soloed.is-showing-words .pgps__bar {
min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
scrollbar-gutter: stable; padding-right: 6px;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"][data-solo="1"] .pgps__card.is-soloed.is-showing-words .pgps__solo-words {
font-size: 19px; line-height: 1.6;
}
}
@media (max-width: 1024px), (max-height: 500px) {
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgps__card.is-showing-words .pgps__bar-fill { background: #3b82f6; opacity: .8; }
}
/* A tap on the card's words drew the slider's focus ring round them
(Phil, 2026-09-21); keep it for the keyboard only. */
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgps__card .pgps__bar:focus:not(:focus-visible) { outline: none; }
}
/* Real Band on a phone: a scrub on its own row right under the transport
row -- elapsed, the bar, the length (Phil, 2026-09-21). The gear's row
opens below it. */
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__time--cur,
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__time--dur {
display: inline-block !important; order: 7; flex: 0 0 auto; min-width: 0;
font-size: 12px !important; font-weight: 600 !important; color: #6b7280; font-variant-numeric: tabular-nums;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__time--cur { color: #111827; }
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__scrub {
display: block !important; order: 7; flex: 1 1 0; width: auto; min-width: 0;
height: 24px; background: none !important; margin: 0 14px;
}
/* Rail, fill and thumb share the bar's middle line. */
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__scrub-track,
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__scrub-fill {
top: 50% !important; margin-top: -2px !important;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__scrub-thumb {
top: 50% !important; transform: translate(-50%, -50%) !important;
}
/* The line break: a zero-height full-width item ahead of the row. */
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar::before {
content: ""; display: block; order: 7; flex: 0 0 100%; height: 0;
}
.pg-practice[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar.is-opts-open .pgrb2__opts { order: 8; }
body.pg-app--dark #pg-practice-shell[data-rb2].pgrb2c[data-mode="play"] .pgrb2__tbar .pgpt__time--cur { color: var(--n-ink, #e9e6e0); }
}
/* Phones: the subtitle stays on one line -- the artist gives way with an
ellipsis, the key and tuning always show (Phil, 2026-09-21). */
@media (max-width: 1024px), (max-height: 500px) {
.pg-practice[data-rb2].pgrb2c .pgtb__title-line .pgtb__keys { min-width: 0; max-width: 100%; align-self: stretch; flex: 0 1 auto; overflow: hidden; }
.pg-practice[data-rb2].pgrb2c:not([data-mode="backing"]) .pgtb__keys-brief {
display: flex !important; flex-wrap: nowrap; align-items: baseline; gap: 0 .35em;
min-width: 0; max-width: 100%; white-space: nowrap;
}
.pg-practice[data-rb2].pgrb2c .pgtb__keys-brief > * { flex: none; }
.pg-practice[data-rb2].pgrb2c .pgtb__keys-brief > .pgtb__kb:first-child {
flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
}