/* The tab transport — the one strip of controls for playing a tab, on
   the song page, in the app and in the editor. Its look is the melody
   player's, which is the site's: a round green play button, a tempo
   slider that reads in BPM, and pill-shaped chips under it.

   The colours come from the page when it sets them (the app's --pgb-*),
   and fall back to the same values so the strip looks right on a page
   that knows nothing about them — the data-entry tool, for one. */
.pg-tt {
    --tt-line: var(--pgb-line, #e5e7eb);
    --tt-line-2: var(--pgb-line-2, #eef0f2);
    --tt-green: var(--pgb-green, #53a96b);
    --tt-blue: var(--pgb-blue, #1e4f75);
    --tt-blue-soft: var(--pgb-blue-soft, #eef4f9);
    --tt-muted: var(--pgb-muted, #6b7280);
    --tt-ink: var(--pgb-ink, #1f2937);
}
.pg-tt * { box-sizing: border-box; }
/* ONE GREY CARD round the transport AND its pickers, as the chart's band
   strip holds its tempo and its chips: the grey round the play row alone
   ran across the pane with nothing in it (Phil). */
.pg-tt { padding: 8px 12px; border-radius: 12px; background: #f7f8fa; }
.pg-tt__strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
/* The `hidden` attribute has to beat EVERY display below — a Songbook
   member keeps the pills and loses the play/tempo half of the strip, and
   the Tab Builder's own `body.pg-tb .pg-tt__strip { display: contents }`
   outranks a plain class rule. !important is the only honest way to say
   "hidden means hidden" from here. */
.pg-tt__strip[hidden] { display: none !important; }
.pg-tt__play {
    flex: none; width: 36px; height: 36px; padding: 0; margin: 0; border: 0; border-radius: 50%;
    background: var(--tt-green); color: #fff; cursor: pointer;
    box-shadow: 0 2px 6px rgba(83, 169, 107, .35);
    display: inline-flex; align-items: center; justify-content: center;
}
.pg-tt__play svg { margin-left: 1px; }
.pg-tt__play.is-on svg { margin-left: 0; }
/* Back to the top · stop — the band's quiet icon buttons. */
.pg-tt__icon {
    flex: none; display: inline-grid; place-items: center;
    width: 34px; height: 34px; padding: 0; margin: 0;
    border: 1px solid transparent; border-radius: 9px; background: transparent;
    color: var(--tt-muted); cursor: pointer;
}
.pg-tt__icon:hover:not(:disabled) { background: var(--tt-blue-soft); color: var(--tt-blue); }
.pg-tt__icon:disabled { opacity: .4; cursor: default; }
.pg-tt__loop.is-on, .pg-tt__loop.is-on:hover { background: #ecf6ef; color: #2c6b40; box-shadow: inset 0 0 0 1px #b3d4bd; }
/* The tempo slider is a control, not a rule across the page: it stops
   at a comfortable width and the rest of the strip stays put. */
.pg-tt__tempo { display: flex; align-items: center; gap: 6px; flex: 0 1 260px; min-width: 120px; }
.pg-tt__read { display: inline-flex; align-items: baseline; gap: 4px; flex: none; white-space: nowrap; }
.pg-tt__val {
    width: 38px; padding: 0; font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--tt-ink); text-align: right;
}
.pg-tt__unit { font-size: 12px; font-weight: 600; color: var(--tt-muted); }
/* The slider: a thin track filled to the thumb (--fill set by the JS). */
.pg-tt__range {
    -webkit-appearance: none; appearance: none;
    display: block; flex: 1 1 auto; min-width: 40px; height: 22px; margin: 0; padding: 0;
    border: 0; background: transparent; cursor: pointer; --fill: 50%;
}
.pg-tt__range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px;
    background: linear-gradient(to right, var(--tt-green) 0 var(--fill), var(--tt-line-2) var(--fill) 100%);
}
.pg-tt__range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--tt-line-2); }
.pg-tt__range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--tt-green); }
.pg-tt__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
    background: #fff; border: 2px solid var(--tt-green); box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.pg-tt__range::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--tt-green); box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.pg-tt__range:focus, .pg-tt__range:focus-visible { outline: none; border: 0; box-shadow: none; }
.pg-tt__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(83, 169, 107, .25); }
/* The chips under the strip. */
.pg-tt__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.pg-tt__chips[hidden] { display: none; }
.pg-tt__pill {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 12px;
    border: 1px solid var(--tt-line); border-radius: 999px; background: #fff;
    font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; color: var(--tt-ink);
}
.pg-tt__pill[hidden] { display: none; }
.pg-tt__pill-lbl {
    font: 700 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted);
}
.pg-tt__pill-sel {
    height: 30px; margin: 0; padding: 0 22px 0 4px; border: 0; background: transparent;
    font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; color: var(--tt-ink); cursor: pointer;
}
.pg-tt__seg {
    display: inline-flex; height: 32px; border: 1px solid var(--tt-line); border-radius: 999px;
    overflow: hidden; background: #fff;
}
.pg-tt__seg[hidden] { display: none; }
.pg-tt__seg button {
    height: 30px; padding: 0 11px; margin: 0; border: 0; border-radius: 0; background: none;
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
    color: var(--tt-muted); white-space: nowrap; cursor: pointer;
}
.pg-tt__seg button + button { border-left: 1px solid var(--tt-line); }
.pg-tt__seg button[aria-pressed="true"] { background: var(--tt-blue-soft); color: var(--tt-blue); }
.pg-tt__seg button:disabled { opacity: .45; cursor: default; }
/* WHERE PLAY WILL START (the song page's start marker, carried over):
   an OUTLINE, not a fill — the fill means "sounding now", and the two
   can be on screen at once. */
.pg-app__melody-stage [data-pg-tab-note][data-pg-start] rect { stroke: var(--pgb-blue, #1e4f75); stroke-width: 1.6; fill: #fff; }
.pg-app__melody-stage [data-pg-tab-note][data-pg-start] text { fill: var(--pgb-blue, #1e4f75); font-weight: 700; }
.pg-app__melody-stage [data-pg-staff-note][data-pg-start] ellipse,
.pg-app__melody-stage [data-pg-staff-note][data-pg-start] circle { fill: #fff; stroke: var(--pgb-blue, #1e4f75); stroke-width: 2; }
.pg-app__melody-stage [data-pg-staff-note][data-pg-start] line { stroke: var(--pgb-blue, #1e4f75); }
.pg-app__melody-stage [data-pg-jp-note][data-pg-start] text { fill: var(--pgb-blue, #1e4f75); font-weight: 700; }
.pg-app__melody-stage [data-pg-jp-note][data-pg-start] circle { fill: var(--pgb-blue, #1e4f75); }
/* THE SECTION NAME, one style on every surface that draws a melody —
   the song page's and the chord chart's: 14px bold blue, as written
   (Phil: the Backing Track's grey small caps were the same element in a
   second style). Hosts set only margins. */
.pg-app__melody-part {
    font: 700 14px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0; text-transform: none; color: #1e4f75;
}
body.pg-app--dark .pg-app__melody-part { color: #8bb8dc; }
/* Loop, on the section label it loops (melody pane). */
/* The chart's section loop exactly (chart.css .pgc-icon): 28px, a 15px
   glyph in the faint grey, 8px from the name, the same hover and the same
   green when on (Phil: the two read slightly different). */
.pg-app__melody-loop {
    display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 8px; padding: 0;
    border: 1px solid transparent; border-radius: 8px; background: transparent;
    color: #9aa1ab; cursor: pointer; vertical-align: middle;
}
.pg-app__melody-loop svg { width: 15px; height: 15px; }
.pg-app__melody-loop:hover { background: #f6f7f8; color: #374151; }
.pg-app__melody-loop.is-on,
.pg-app__melody-loop.is-on:hover { background: #ecf6ef; border-color: transparent; color: #2c6b40; }
/* WHAT IS GOING ROUND, as the chord chart shows it: its green wash over
   the bars (multiplied, so the music stays black), a dashed outline while
   a drag is choosing them, and its "Looping … ✕" chip on the last bar. */
.pg-app__melody-line { position: relative; }
.pg-app__melody-looptint, .pg-app__melody-looppre {
    position: absolute; top: 0; bottom: 0; border-radius: 5px;
    background: #ecf6ef; mix-blend-mode: multiply; pointer-events: none;
}
.pg-app__melody-looppre { outline: 1px dashed #b3d4bd; outline-offset: -1px; }
.pg-app__melody-stage.is-dragging { user-select: none; -webkit-user-select: none; cursor: col-resize; }
.pg-app__melody-loopchip {
    position: absolute; bottom: 2px; z-index: 3; transform: translateX(-100%);
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 3px 0 8px; margin: 0;
    border: 0; border-radius: 999px; background: #53a96b; color: #fff; cursor: pointer;
    font: 700 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    white-space: nowrap; box-shadow: 0 2px 6px rgba(44, 107, 64, .3);
}
.pg-app__melody-loopchip svg { width: 11px; height: 11px; }
.pg-app__melody-loopchip b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.pg-app__melody-loopchip b svg { width: 9px; height: 9px; }
.pg-app__melody-loopchip:hover b { background: rgba(255, 255, 255, .38); }
/* COMPACT, ON A PHONE (a host opts in with compact: true; the song page
   does): the song page's own phone strip — play, tempo and a gear on one
   row, the pickers side by side on the next with their labels dropped,
   Sound behind the gear. One block; nothing here reaches a wider screen. */
.pg-tt__gear { display: none; }
@media (max-width: 768px) {
    .pg-tt--compact { padding: 8px 10px; }
    .pg-tt--compact .pg-tt__strip { flex-wrap: nowrap; gap: 4px; }
    .pg-tt--compact .pg-tt__icon { width: 30px; }
    .pg-tt--compact .pg-tt__tempo { flex: 1 1 auto; min-width: 0; }
    .pg-tt--compact .pg-tt__gear { display: inline-grid; border-color: var(--tt-line); background: #fff; }
    .pg-tt--compact .pg-tt__gear[hidden] { display: none; }
    .pg-tt--compact.is-open .pg-tt__gear { background: var(--tt-blue-soft); color: var(--tt-blue); }
    .pg-tt--compact .pg-tt__sound { display: none; }
    .pg-tt--compact.is-open .pg-tt__sound:not([hidden]) { display: inline-flex; }
    .pg-tt--compact .pg-tt__pill { flex: 1 1 auto; min-width: 0; padding-left: 10px; }   /* sized by their words: "Mid octave" was cut */
    .pg-tt--compact .pg-tt__pill-sel { flex: 1 1 auto; min-width: 0; width: 100%; text-overflow: ellipsis; }
    .pg-tt--compact .pg-tt__pill-lbl { display: none; }
    .pg-tt--compact .pg-tt__seg { flex: none; }
    .pg-tt--compact .pg-tt__sound { order: 9; }   /* opened, it takes the next row */
}
/* THE CHIP LOOK (option pg_songpage_toolbar_open → body.pg-tb; Phil,
   2026-09-23): the song page's toolbar chips, for every host of this
   strip — song page, app, Tab Builder, data entry. Pickers are 9px chips
   with a hairline, no label, the value in bold and a small chevron; they
   are as wide as what they show; no browser focus box inside a rounded
   chip. The segmented controls take the same corners. */
body.pg-tb .pg-tt__pill {
    height: 30px; padding: 0 8px 0 10px; border: 1px solid var(--tt-line); border-radius: 9px; background: #fff;
}
body.pg-tb .pg-tt__pill:hover { border-color: #cdd4da; }
body.pg-tb .pg-tt__pill:focus-within { border-color: #b9cddd; box-shadow: 0 0 0 3px rgba(30, 79, 117, .12); }
body.pg-tb .pg-tt__pill-lbl { display: none; }
body.pg-tb .pg-tt__pill-sel {
    -webkit-appearance: none; appearance: none; height: 28px; padding: 0 18px 0 2px;
    field-sizing: content; width: auto; min-width: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239aa1ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0 center / 12px 12px;
    /* The band strip's Count in / Speed up / Drop out type, exactly
       (Phil: one font and weight across both strips). */
    font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #374151;
}
body.pg-tb .pg-tt__pill-sel:focus,
body.pg-tb .pg-tt__pill-sel:focus-visible { outline: none; box-shadow: none; }
body.pg-tb .pg-tt__seg { border-radius: 9px; }
/* The gear and its menu (Sound), at the row's end — the Display menu's
   look: white card, a small caps head, the choice ticked. */
.pg-tt__menuwrap { position: relative; display: inline-flex; margin-left: auto; order: 99; }   /* last, whatever was built after it */
.pg-tt__menuwrap[hidden] { display: none; }
.pg-tt__menubtn { width: 30px; height: 30px; border: 1px solid var(--tt-line); border-radius: 9px; background: #fff; }
.pg-tt__menubtn[aria-expanded="true"] { background: var(--tt-blue-soft); color: var(--tt-blue); border-color: #dbe7f2; }
.pg-tt__menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 240px; padding: 0; overflow: hidden;
    background: #fff; border: 1px solid #d4d6d9; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
}
.pg-tt__menu[hidden] { display: none; }
.pg-tt__menu-head {
    padding: 9px 14px; background: #f6f7f8; border-bottom: 1px solid #eceef1;
    font: 700 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: .6px; text-transform: uppercase; color: var(--tt-muted);
}
.pg-tt__menu-body { padding: 4px; }
.pg-tt__menu-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    min-height: 36px; padding: 7px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
    font: 500 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pg-tt__menu-row:hover:not(:disabled) { background: #f3f4f6; }
.pg-tt__menu-row:disabled { cursor: default; }
.pg-tt__menu-lbl { color: #1f2937; }
.pg-tt__menu-val { font-size: 12px; font-weight: 600; color: var(--tt-muted); }
.pg-tt__menu-row:hover:not(:disabled) .pg-tt__menu-val { color: #1f2937; }
body.pg-app--dark .pg-tt__menu { background: #232930; border-color: #3a424b; }
body.pg-app--dark .pg-tt__menu-head { background: #1d2126; border-color: #3a424b; }
body.pg-app--dark .pg-tt__menu-lbl { color: #e5e7eb; }
body.pg-app--dark .pg-tt__menu-row:hover:not(:disabled) { background: #2b3138; }
body.pg-tb .pg-tt__gear { border-radius: 9px; }
body.pg-tb .pg-tt button:focus:not(:focus-visible) { outline: none; }
/* WIDER THAN A PHONE: one row — play · tempo · the pickers — wrapping
   only when the host runs out of room. The slider takes what is left,
   from 160px. */
@media (min-width: 769px) {
    body.pg-tb .pg-tt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
    /* The pickers wrap as ONE group: short of room, all of them take the
       second row together, never one straggler. */
    body.pg-tb .pg-tt__strip { display: contents; }
    body.pg-tb .pg-tt__chips { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; margin: 0; }
    body.pg-tb .pg-tt__icon { width: 30px; }
    body.pg-tb .pg-tt__tempo { flex: 1 1 160px; min-width: 150px; max-width: 280px; margin-right: 4px; }
    body.pg-tb .pg-tt__range { min-width: 36px; }
    body.pg-tb .pg-tt__pill { flex: none; }
    body.pg-tb .pg-tt__seg button { padding-left: 9px; padding-right: 9px; }
}
/* A phone's compact strip shares the row out between the pickers: the
   select fills its chip so the chevron sits at the chip's edge. */
@media (max-width: 768px) {
    body.pg-tb .pg-tt--compact .pg-tt__pill-sel { field-sizing: fixed; width: 100%; background-position: right 0 center; }
}
/* SOUND ON THE NOTATION (melody pane, cfg.soundOnStage): a small quiet
   Acoustic | Synth at the stage's top-right, level with the first
   section's name. */
.pg-app__melody-stage { position: relative; }
.pg-app__melody-sound {
    position: absolute; top: 0; right: 0; z-index: 4;
    display: inline-flex; align-items: stretch; box-sizing: border-box; height: 28px;
    border: 1px solid var(--pgb-line, #e5e7eb); border-radius: 8px; overflow: hidden; background: #fff;
}
.pg-app__melody-sound[hidden] { display: none; }
.pg-app__melody-sound button {
    /* Fill the chip top to bottom, so the lit half's tint meets the
       border (it stopped 2px short — Phil). */
    height: auto; min-height: 0; padding: 0 9px; margin: 0; border: 0; border-radius: 0; background: none; cursor: pointer; line-height: 1;
    font: 600 12px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #6b7280;
}
.pg-app__melody-sound button + button { border-left: 1px solid var(--pgb-line, #e5e7eb); }
.pg-app__melody-sound button:hover { color: #1f2937; }
.pg-app__melody-sound button[aria-pressed="true"] { background: var(--pgb-blue-soft, #eef4f9); color: var(--pgb-blue, #1e4f75); }
.pg-app__melody-sound button:focus:not(:focus-visible) { outline: none; }
body.pg-app--dark .pg-app__melody-sound { background: #232930; border-color: #3a424b; }
body.pg-app--dark .pg-app__melody-sound button { color: #c6ccd3; }
body.pg-app--dark .pg-app__melody-sound button[aria-pressed="true"] { background: #2b3947; color: #8bb8dc; }
/* The app's night mode, for the chip look. */
body.pg-tb.pg-app--dark .pg-tt__pill { background: #232930; border-color: #3a424b; }
body.pg-tb.pg-app--dark .pg-tt__pill-sel {
    color: #e5e7eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238b95a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.pg-tb.pg-app--dark .pg-tt__pill-sel option { color: #1f2937; }

/* The app's night mode. */
body.pg-app--dark .pg-tt { background: #1d2126; }
body.pg-app--dark .pg-tt__loop,
body.pg-app--dark .pg-tt__pill,
body.pg-app--dark .pg-tt__seg { background: #232930; border-color: #3a424b; }
body.pg-app--dark .pg-tt__seg button { color: #c6ccd3; }
body.pg-app--dark .pg-tt__seg button[aria-pressed="true"] { background: #2b3947; color: #8bb8dc; }
body.pg-app--dark .pg-tt__val,
body.pg-app--dark .pg-tt__pill,
body.pg-app--dark .pg-tt__pill-sel { color: #e5e7eb; }

/* A tune in another tuning says so above the melody (the song page's
   amber note). */
.pg-app__melody-tuning {
  display: inline-block; margin: 2px 0 8px; padding: 3px 9px; border-radius: 6px;
  background: #FFF4D6; color: #7A5A00; font: 600 12px/1.4 system-ui, sans-serif;
}

/* Pickers only (Backing's melody settings): no play row. */
.pg-tt--pickers > .pg-tt__strip { display: none !important; }
.pg-tt--pickers .pg-tt__chips { margin: 0; }

/* Acoustic | Synth in a host's row (setSoundHost): in the flow, at its right edge. */
.pg-app__melody-sound.is-hosted { position: static; margin-left: auto; }

/* No Stop (Phil, 2026-09-25). */
.pg-tt__stop { display: none !important; }

/* LOOP = GOLD (Phil, 2026-09-26): the tab's loop wash and buttons take the
   pins' gold, as the chord chart's do. */
.pg-tt__loop.is-on, .pg-tt__loop.is-on:hover { background: #FFD700; color: #3d3200; box-shadow: none; }
.pg-app__melody-looptint, .pg-app__melody-looppre { background: #fff4c2; }
.pg-app__melody-looppre { outline-color: #ecd27a; }
.pg-app__melody-loopchip { background: #FFD700; color: #3d3200; box-shadow: 0 2px 6px rgba(160, 120, 0, .3); }
.pg-app__melody-loopchip b { background: rgba(61, 50, 0, .12); }
.pg-app__melody-loopchip:hover b { background: rgba(61, 50, 0, .22); }
/* ONE GOLD (Phil, 2026-09-26). */
.pg-tt__loop.is-on, .pg-tt__loop.is-on:hover { background: #F4C430; color: #3d3200; }
.pg-app__melody-looptint, .pg-app__melody-looppre { background: rgba(244, 196, 48, .22); mix-blend-mode: multiply; }
.pg-app__melody-looppre { outline-color: #F4C430; }
.pg-app__melody-loopchip { background: #F4C430; color: #3d3200; }