/* ══════════════════════════════════════════════════════════════════
   PianoMode Coach, "The Professor" panel + page layout
   Uses the design-system semantic tokens (--pm-surface*, --pm-text*,
   --pm-border, --pm-accent) so dark/light theming is automatic.
   ══════════════════════════════════════════════════════════════════ */

/* ── page shell ──
   flow-root + bottom padding: child margins must never collapse out of
   <main>, or a strip of body background appears between the page and the
   footer (user: "never a gap with the footer"). */
.pm-coach-page {
    background: var(--pm-surface, #0B0B0B);
    display: flow-root;
    margin: 0;
    padding-bottom: var(--pm-space-12, 48px);
    -webkit-tap-highlight-color: transparent;
}

/* ── hero (premium 2026, theme-aware) ── */
.pm-coach-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    color: var(--pm-text, #F5EFE3);
    padding: clamp(48px, 8vh, 96px) var(--pm-space-4, 16px) clamp(36px, 5vh, 64px);
    background:
        radial-gradient(120% 80% at 50% -10%, var(--pm-gold-a08, rgba(215,191,129,.08)) 0%, transparent 60%),
        var(--pm-surface, #0B0B0B);
    border-bottom: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
}
/* soft moving gold aurora behind the copy, pure CSS, no external asset */
.pm-coach-hero__aurora {
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 130%;
    z-index: -1;
    background:
        radial-gradient(40% 60% at 22% 30%, var(--pm-gold-a15, rgba(215,191,129,.15)), transparent 70%),
        radial-gradient(40% 60% at 78% 20%, var(--pm-gold-a08, rgba(215,191,129,.08)), transparent 70%);
    filter: blur(10px);
    opacity: .9;
    animation: pm-coach-aurora 14s ease-in-out infinite alternate;
}
@keyframes pm-coach-aurora {
    0%   { transform: translateY(0) scale(1); }
    100% { transform: translateY(14px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .pm-coach-hero__aurora { animation: none; } }
.pm-coach-hero__toggle {
    position: absolute;
    top: clamp(12px, 2vh, 20px);
    right: clamp(12px, 2vw, 24px);
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    /* Clear, always-visible chip: a brighter gold glyph and a stronger ring
       so the toggle never sinks into the dark hero (user: "you cannot see
       anything, it is too dark"). Bright gold reads on both the dark hero and the
       light paper theme. */
    border: 1.5px solid rgba(215, 191, 129, .5);
    background: rgba(215, 191, 129, .12);
    color: #E6D4A8;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
html[data-theme="light"] .pm-coach-hero__toggle { color: var(--pm-gold-deep, #A0894A); background: rgba(160, 137, 74, .12); border-color: rgba(160, 137, 74, .5); }
.pm-coach-hero__toggle:hover { border-color: var(--pm-accent, #D7BF81); background: rgba(215, 191, 129, .2); transform: scale(1.06); }
.pm-coach-hero__toggle svg { width: 19px; height: 19px; stroke-width: 2.2; }
.pm-coach-hero__toggle .pm-theme-toggle__moon { display: none; }
html[data-theme="light"] .pm-coach-hero__toggle .pm-theme-toggle__moon { display: block; }
html[data-theme="light"] .pm-coach-hero__toggle .pm-theme-toggle__sun { display: none; }
.pm-coach-hero__inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }

.pm-coach-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pm-accent, #D7BF81);
    background: var(--pm-hero-badge-bg, rgba(215, 191, 129, .12));
    border: 1px solid var(--pm-hero-badge-border, rgba(215, 191, 129, .32));
    border-radius: 999px;
    padding: 8px 16px;
    margin: 0 0 var(--pm-space-5, 20px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pm-coach-hero-badge__icon {
    display: inline-flex;
    color: var(--pm-accent, #D7BF81);
}
.pm-coach-hero-badge__icon svg { width: 16px; height: 16px; display: block; }
.pm-coach-hero-title {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-weight: 700;
    font-size: clamp(2.1rem, 5vw + .6rem, 3.6rem);
    line-height: 1.08;
    letter-spacing: -.01em;
    margin: 0 0 var(--pm-space-4, 16px);
}
.pm-coach-hero-title__main { display: block; color: var(--pm-text, #F5EFE3); }
.pm-coach-hero-title__accent {
    display: block;
    background: var(--pm-hero-title-accent, linear-gradient(135deg, #E6D4A8 0%, #D7BF81 40%, #BEA86E 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 3px 10px var(--pm-gold-a25, rgba(215, 191, 129, .25)));
}
.pm-coach-hero-sub {
    font-size: clamp(1rem, .6vw + .9rem, 1.12rem);
    line-height: 1.7;
    color: var(--pm-text-soft, rgba(245, 239, 227, .72));
    max-width: 640px;
    margin: 0 auto;
}
.pm-coach-hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: var(--pm-space-6, 24px);
}
.pm-coach-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 13px 24px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.pm-coach-btn svg { width: 18px; height: 18px; }
.pm-coach-btn--primary {
    background: var(--pm-grad-gold, linear-gradient(135deg, #E6D4A8, #D7BF81 45%, #BEA86E));
    color: var(--pm-text-on-gold, #1b1505);
    box-shadow: var(--pm-shadow-gold-md, 0 8px 28px rgba(215, 191, 129, .35));
}
.pm-coach-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-gold-lg, 0 16px 40px rgba(215, 191, 129, .5)); }
.pm-coach-btn--ghost {
    background: var(--pm-gold-a08, rgba(215, 191, 129, .08));
    border-color: var(--pm-border, rgba(215, 191, 129, .15));
    color: var(--pm-text, #F5EFE3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pm-coach-btn--ghost:hover { border-color: var(--pm-accent, #D7BF81); transform: translateY(-2px); }
.pm-coach-hero__stats {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(20px, 5vw, 48px);
    margin: var(--pm-space-8, 32px) 0 0;
    padding: 0;
}
.pm-coach-hero__stats li { display: flex; flex-direction: column; gap: 2px; }
.pm-coach-hero__stats strong {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--pm-accent, #D7BF81);
}
.pm-coach-hero__stats span {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pm-text-muted, rgba(245, 239, 227, .45));
}

/* ── page layout: trainer + professor side by side ── */
.pm-coach-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    gap: var(--pm-space-6, 24px);
    align-items: start;
    margin: var(--pm-space-8, 32px) auto;
    max-width: 1480px;
    padding: 0 var(--pm-space-4, 16px);
    scroll-margin-top: 80px;
}
@media (max-width: 1100px) {
    .pm-coach-layout { grid-template-columns: 1fr; }
}

/* Desktop: the coach column's bottom edge lands EXACTLY on the Practice
   drills bottom border. The aside contributes no height of its own to the
   grid row (height: 0), so the row is sized by the trainer column alone;
   min-height then stretches the aside to that exact height and the second
   panel flexes + scrolls inside it. Mobile (stacked) is untouched. */
@media (min-width: 1101px) {
    .pm-coach-layout:not(.pm-coach-layout--locked) { align-items: stretch; }
    .pm-coach-layout:not(.pm-coach-layout--locked) .pm-coach-aside {
        height: 0;
        min-height: 100%;
    }
    .pm-coach-aside .pm-coach-split {
        height: 100%;
        min-height: 0;
    }
    .pm-coach-aside .pm-coach-split .pm-coach-panel:last-child {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--pm-gold-a25, rgba(215, 191, 129, .25)) transparent;
    }
}

/* ── Two-panel split of the coach aside (Feedback + Practice) ── */
.pm-coach-split { display: flex; flex-direction: column; gap: 16px; }
.pm-coach-panel {
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .18));
    border-radius: 18px;
    padding: 16px;
    background: var(--pm-surface, #0B0B0B);
}
.pm-coach-panel-head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--pm-text-muted, rgba(245,239,227,.5));
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pm-border, rgba(215, 191, 129, .16));
}
.pm-coach-panel-head svg { width: 15px; height: 15px; color: var(--pm-accent, #D7BF81); fill: none; stroke: currentColor; }
/* Inside the Practice panel the drills / duet are SUB-sections of the one
   panel, so drop their own card chrome to avoid an ugly card-in-card, and
   separate them with a hairline instead. */
.pm-coach-panel--practice .pm-coach-drills,
.pm-coach-panel--practice .pm-coach-duet--feature {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.pm-coach-panel--practice > .pm-coach-drills + .pm-coach-duet--feature,
.pm-coach-panel--practice > .pm-coach-duet--feature ~ .pm-coach-studio,
.pm-coach-panel--practice > .pm-coach-chord {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pm-border, rgba(215, 191, 129, .14));
}

.pm-coach-trainer { min-width: 0; }
/* rounded, themed frame around the inline sight-reading trainer so it
   never sits as a raw bright/dark rectangle on the page */
.pm-coach-trainer__frame {
    border-radius: var(--pm-r-card, 18px);
    overflow: hidden;
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    background: var(--pm-surface-2, #161616);
    box-shadow: var(--pm-shadow-md, 0 8px 24px rgba(11, 11, 11, .10));
}
.pm-coach-trainer__frame .pm-srt-inline-host,
.pm-coach-trainer__frame .srt-container { border-radius: inherit; }

/* ── panel shell ── */
.pm-coach {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: var(--pm-space-4, 16px);
    background: var(--pm-surface-2, #161616);
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    border-radius: var(--pm-r-card, 18px);
    padding: var(--pm-space-5, 20px);
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    color: var(--pm-text, #F5EFE3);
    max-height: calc(100vh - 108px);
    overflow-y: auto;
}
@media (max-width: 1100px) {
    .pm-coach { position: static; max-height: none; }
}

/* ── professor header ── */
.pm-coach-prof {
    display: flex;
    align-items: center;
    gap: var(--pm-space-3, 12px);
}
.pm-coach-avatar {
    position: relative;
    width: 54px; height: 54px;
    flex: 0 0 54px;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    /* transparent fill, gold ring, gold-stroke professor icon, no logo,
       no gold-on-gold disc (user request) */
    background: var(--pm-gold-a08, rgba(215, 191, 129, .08));
    border: 1.5px solid var(--pm-border-strong, var(--pm-gold-a35, rgba(215, 191, 129, .35)));
    color: var(--pm-accent, #D7BF81);
    display: grid;
    place-items: center;
    animation: pm-coach-breathe 5s ease-in-out infinite;
}
.pm-coach-avatar svg {
    width: 58%;
    height: 58%;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
    user-select: none;
}
@keyframes pm-coach-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}
.pm-coach.is-speaking .pm-coach-avatar,
.is-speaking .pm-coach-avatar {
    animation: pm-coach-talk .9s ease-in-out infinite;
}
@keyframes pm-coach-talk {
    0%, 100% { box-shadow: 0 0 0 2px var(--pm-gold-a25, rgba(215,191,129,.25)), 0 6px 18px rgba(0,0,0,.28); }
    50%      { box-shadow: 0 0 0 7px var(--pm-gold-a15, rgba(215,191,129,.15)), 0 6px 22px rgba(0,0,0,.34); }
}

/* speaking equalizer bars */
.pm-coach-eq {
    position: absolute;
    bottom: -3px; left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 2px;
    align-items: flex-end;
    height: 12px;
}
.is-speaking .pm-coach-eq { display: inline-flex; }
.pm-coach-eq i {
    width: 3px;
    border-radius: 2px;
    background: var(--pm-accent, #D7BF81);
    animation: pm-coach-eq .7s ease-in-out infinite;
}
.pm-coach-eq i:nth-child(1) { height: 6px; animation-delay: 0s; }
.pm-coach-eq i:nth-child(2) { height: 11px; animation-delay: .15s; }
.pm-coach-eq i:nth-child(3) { height: 8px; animation-delay: .3s; }
@keyframes pm-coach-eq {
    0%, 100% { transform: scaleY(.5); }
    50%      { transform: scaleY(1.1); }
}

.pm-coach-id { min-width: 0; flex: 1; }
.pm-coach-name {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .01em;
}
.pm-coach-status {
    font-size: .82rem;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
    margin-top: 2px;
}
.pm-coach-voice-btn {
    background: transparent;
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    border-radius: 999px;
    width: 38px; height: 38px;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.pm-coach-voice-btn:hover { border-color: var(--pm-accent, #D7BF81); transform: scale(1.06); }

/* ── live HUD ── */
.pm-coach-hud {
    background: var(--pm-surface-3, #1F1F1F);
    border-radius: 12px;
    padding: 12px 14px;
}
.pm-coach-hud-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: .95rem;
    font-weight: 600;
}
.pm-coach-hud-stat.is-good { color: var(--pm-success, #10B981); }
.pm-coach-hud-stat.is-bad  { color: var(--pm-error, #DC2626); }
.pm-coach-hud-progress-label {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 500;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
}
.pm-coach-hud-bar {
    margin-top: 8px;
    height: 5px;
    border-radius: 3px;
    background: var(--pm-gold-a15, rgba(215, 191, 129, .15));
    overflow: hidden;
}
.pm-coach-hud-bar i {
    display: block;
    height: 100%;
    background: var(--pm-grad-gold, linear-gradient(135deg, #E6D4A8, #D7BF81, #BEA86E));
    border-radius: 3px;
    transition: width .25s ease;
}

/* ── grade banner ── */
.pm-coach-grade {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--pm-space-4, 16px);
    row-gap: 10px;
    background: var(--pm-surface-3, #1F1F1F);
    border: 1px solid var(--pm-gold-a25, rgba(215, 191, 129, .25));
    border-radius: 14px;
    padding: 14px 16px;
}
.pm-coach-grade-letter {
    flex: 0 0 auto;
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
    background: var(--pm-hero-title-accent, linear-gradient(135deg, #E6D4A8, #D7BF81 40%, #BEA86E));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    min-width: 52px;
    text-align: center;
}
/* facts share row 1 with the letter; the replay button drops to its own
   full-width row (flex-basis 100%), so nothing ever squishes into a
   vertical column (the "97% accura cy" wrap bug) */
.pm-coach-grade-facts { flex: 1 1 150px; min-width: 0; }
.pm-coach-grade-line { font-size: .95rem; line-height: 1.35; }
.pm-coach-grade-sub {
    font-size: .8rem;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
    margin-top: 3px;
}
.pm-coach-replay {
    flex: 1 1 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--pm-gold-a08, rgba(215, 191, 129, .08));
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    color: var(--pm-accent, #D7BF81);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: .8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}
.pm-coach-replay:hover {
    border-color: var(--pm-accent, #D7BF81);
    background: var(--pm-gold-a08, rgba(215, 191, 129, .08));
}

/* ── measure heat bar ── */
.pm-coach-heat-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
    margin-bottom: 6px;
}
.pm-coach-heat-bar {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.pm-coach-heat-cell {
    flex: 1 1 0;
    min-width: 10px;
    max-width: 26px;
    height: 10px;
    border-radius: 3px;
    background: var(--pm-gold-a15, rgba(215, 191, 129, .15));
}
.pm-coach-heat-cell.is-hot { background: var(--pm-error, #DC2626); opacity: .85; }

/* ── cards ── */
.pm-coach-cards {
    display: flex;
    flex-direction: column;
    gap: var(--pm-space-3, 12px);
}
.pm-coach-card {
    background: var(--pm-surface-3, #1F1F1F);
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    border-radius: 12px;
    padding: 12px 14px;
}
.pm-coach-card-title {
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: 5px;
}
.pm-coach-card-text {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--pm-text-soft, var(--pm-gray-300, #D1D5DB));
}
.pm-coach-card-text a { color: var(--pm-accent, #D7BF81); }
.pm-coach-card-strength { border-left: 3px solid var(--pm-success, #10B981); }
.pm-coach-card-issue    { border-left: 3px solid var(--pm-warning, #F59E0B); }
.pm-coach-card-plan     { border-left: 3px solid var(--pm-accent, #D7BF81); }
.pm-coach-card-quota    { border-left: 3px solid var(--pm-info, #3B82F6); }

/* ── practice plan buttons ── */
.pm-coach-plan {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pm-coach-plan-btn {
    flex: 1 1 auto;
    font-size: .82rem;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--pm-gold-a35, rgba(215, 191, 129, .35));
    background: var(--pm-gold-a08, rgba(215, 191, 129, .08));
    color: var(--pm-text, #F5EFE3);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.pm-coach-plan-btn:hover:not(:disabled) {
    background: var(--pm-gold-a15, rgba(215, 191, 129, .15));
    border-color: var(--pm-accent, #D7BF81);
}
.pm-coach-plan-btn:disabled { opacity: .65; cursor: default; }

/* ── design-system icons inside the coach (srt_icon registry) ── */
.pm-coach .srt-icon,
.pm-coach-seo .srt-icon,
.pm-coach-stage .srt-icon {
    width: var(--pm-icon-md, 20px);
    height: var(--pm-icon-md, 20px);
    vertical-align: -5px;
}
.pm-coach-card-title .srt-icon,
.pm-coach-hud-stat .srt-icon,
.pm-coach-chord-speak .srt-icon,
.pm-coach-replay .srt-icon {
    width: var(--pm-icon-sm, 16px);
    height: var(--pm-icon-sm, 16px);
    vertical-align: -3px;
}
.pm-coach-voice-btn .srt-icon {
    width: var(--pm-icon-md, 20px);
    height: var(--pm-icon-md, 20px);
    vertical-align: middle;
}
.pm-coach-card-title .srt-icon { color: var(--pm-accent, #D7BF81); }
.pm-coach-stage-icon .srt-icon {
    width: var(--pm-icon-xl, 28px);
    height: var(--pm-icon-xl, 28px);
    color: var(--pm-accent, #D7BF81);
}
.pm-coach-stage-arrow .srt-icon {
    width: var(--pm-icon-md, 20px);
    height: var(--pm-icon-md, 20px);
}

/* ── duet section ── */
.pm-coach-duet {
    border-top: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    padding-top: var(--pm-space-4, 16px);
}
/* Play-with-me is the headline interaction: give it a framed, gold-accented
   card so it reads as THE thing to try, not a buried control. */
.pm-coach-duet--feature {
    border: 1px solid var(--pm-border-strong, rgba(215, 191, 129, .3));
    border-radius: 16px;
    padding: 16px;
    margin-top: var(--pm-space-4, 16px);
    background:
        radial-gradient(120% 90% at 0% 0%, var(--pm-gold-a08, rgba(215,191,129,.08)), transparent 60%),
        var(--pm-surface-2, #161616);
}
.pm-coach-duet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pm-coach-duet-title {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: 1.12rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pm-text, #F5EFE3);
}
.pm-coach-duet-title .srt-icon { color: var(--pm-accent, #D7BF81); }
.pm-coach-duet-lead {
    font-size: .86rem;
    line-height: 1.55;
    color: var(--pm-text-soft, rgba(245, 239, 227, .72));
    margin: 8px 0 12px;
}
.pm-coach-duet-arm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: .95rem;
    padding: 13px 18px;
    border-radius: 14px;
    border: 0;
    background: var(--pm-grad-gold, linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E));
    color: var(--pm-text-on-gold, #1b1505);
    font-family: inherit;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 8px 22px var(--pm-gold-a25, rgba(215, 191, 129, .25));
    transition: filter .15s ease, transform .12s ease;
}
.pm-coach-duet-arm:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pm-coach-duet-arm .srt-icon { width: 16px; height: 16px; color: currentColor; }
.pm-coach-duet.is-armed .pm-coach-duet-arm {
    background: rgba(196, 85, 77, .18);
    color: var(--pm-text, #F5EFE3);
    border: 1px solid rgba(196, 85, 77, .5);
    box-shadow: none;
}
.pm-coach-duet-hands {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.pm-coach-duet-hand {
    flex: 1 1 0;
    font-size: .78rem;
    font-weight: 600;
    font-family: inherit;
    padding: 9px 10px;
    border-radius: 999px;
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    background: transparent;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pm-coach-duet-hand.is-active {
    border-color: var(--pm-accent, #D7BF81);
    color: var(--pm-text, #F5EFE3);
    background: var(--pm-gold-a08, rgba(215, 191, 129, .08));
}
.pm-coach-duet-touch {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.pm-coach-duet-touchbtn {
    flex: 1 1 0;
    font-size: .72rem;
    font-weight: 600;
    font-family: inherit;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    background: transparent;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.pm-coach-duet-touchbtn.is-active {
    border-color: var(--pm-accent, #D7BF81);
    color: var(--pm-accent, #D7BF81);
}
.pm-coach-duet-status {
    font-size: .8rem;
    line-height: 1.55;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
    margin: 10px 0 0;
}
.pm-coach-duet.is-armed .pm-coach-duet-status { color: var(--pm-text, #F5EFE3); }

/* ── the Professor's Studio ── */
.pm-coach-studio {
    border-top: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    padding-top: var(--pm-space-4, 16px);
}
.pm-coach-studio-title {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pm-coach-studio-title .srt-icon { color: var(--pm-accent, #D7BF81); }
.pm-coach-studio-empty {
    font-size: .82rem;
    color: var(--pm-text-muted, rgba(245, 239, 227, .45));
    margin: 0;
}
.pm-coach-studio-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.pm-coach-studio-stats span {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--pm-surface-3, #1F1F1F);
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    border-radius: 10px;
    padding: 8px 4px;
}
.pm-coach-studio-stats strong {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: 1.15rem;
    color: var(--pm-accent, #D7BF81);
    line-height: 1.1;
}
.pm-coach-studio-stats em {
    font-style: normal;
    font-size: .62rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pm-text-muted, rgba(245, 239, 227, .45));
    margin-top: 2px;
    text-align: center;
}
.pm-coach-studio-spark {
    width: 100%;
    height: 44px;
    color: var(--pm-accent, #D7BF81);
    display: block;
}
.pm-coach-studio-trend {
    font-size: .74rem;
    color: var(--pm-text-soft, rgba(245, 239, 227, .72));
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pm-coach-studio-trend .srt-icon { width: 14px; height: 14px; }

/* error fingerprint: 12-key strip */
.pm-coach-fingerprint { margin-top: 12px; }
.pm-coach-fingerprint-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pm-text-soft, rgba(245, 239, 227, .72));
    margin-bottom: 6px;
}
.pm-coach-fingerprint-keys {
    display: flex;
    gap: 2px;
    height: 46px;
}
.pm-coach-fpkey {
    position: relative;
    flex: 1 1 0;
    border-radius: 0 0 4px 4px;
    background: var(--pm-surface-3, #1F1F1F);
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
}
.pm-coach-fpkey.is-black {
    background: var(--pm-surface, #0B0B0B);
    height: 65%;
}
.pm-coach-fpkey.is-hot {
    background: color-mix(in srgb, var(--pm-error, #DC2626) calc(var(--fp, .5) * 100%), var(--pm-surface-3, #1F1F1F));
    border-color: var(--pm-error, #DC2626);
}
.pm-coach-fpkey-label {
    position: absolute;
    bottom: 2px;
    left: 0; right: 0;
    text-align: center;
    font-style: normal;
    font-size: .58rem;
    color: var(--pm-text-muted, rgba(245, 239, 227, .45));
}

/* studio buttons (report card, quiz play) */
.pm-coach-studio-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: .8rem;
    font-weight: 600;
    font-family: inherit;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--pm-gold-a35, rgba(215, 191, 129, .35));
    background: var(--pm-gold-a08, rgba(215, 191, 129, .08));
    color: var(--pm-accent, #D7BF81);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.pm-coach-studio-btn:hover { border-color: var(--pm-accent, #D7BF81); background: var(--pm-gold-a15, rgba(215, 191, 129, .15)); }
.pm-coach-studio-btn .srt-icon { width: 15px; height: 15px; }

/* the Professor's quiz */
.pm-coach-quiz {
    margin-top: 14px;
    background: var(--pm-surface-3, #1F1F1F);
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    border-radius: 12px;
    padding: 12px 14px;
}
.pm-coach-quiz-head { font-size: .84rem; line-height: 1.5; }
.pm-coach-quiz-head .srt-icon { color: var(--pm-accent, #D7BF81); }
.pm-coach-quiz-q {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pm-text-muted, rgba(245, 239, 227, .45));
    margin: 10px 0 0;
}
.pm-coach-quiz-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.pm-coach-quiz-opt {
    flex: 1 1 30%;
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: .95rem;
    font-weight: 700;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    background: transparent;
    color: var(--pm-text, #F5EFE3);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.pm-coach-quiz-opt:hover:not(:disabled) { border-color: var(--pm-accent, #D7BF81); }
.pm-coach-quiz-opt.is-right { border-color: var(--pm-success, #10B981); color: var(--pm-success, #10B981); }
.pm-coach-quiz-opt.is-wrong { border-color: var(--pm-error, #DC2626); color: var(--pm-error, #DC2626); }
.pm-coach-quiz-result { font-size: .88rem; margin: 12px 0 0; }
.pm-coach-quiz-result .srt-icon { color: var(--pm-accent, #D7BF81); }

/* guided drill chip */
.pm-coach-drill-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    background: var(--pm-gold-a08, rgba(215, 191, 129, .08));
    border: 1px solid var(--pm-gold-a35, rgba(215, 191, 129, .35));
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--pm-text, #F5EFE3);
}
.pm-coach-drill-chip .srt-icon { color: var(--pm-accent, #D7BF81); flex: 0 0 auto; }
.pm-coach-drill-chip strong { color: var(--pm-accent, #D7BF81); }
.pm-coach-drill-chip em {
    font-style: normal;
    color: var(--pm-text-muted, rgba(245, 239, 227, .45));
}

/* prescription card */
.pm-coach-card-rx { border-left: 3px solid var(--pm-accent, #D7BF81); }
.pm-coach-rx-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: .82rem;
    font-weight: 700;
    font-family: inherit;
    padding: 10px 18px;
    border-radius: 999px;
    border: 0;
    background: var(--pm-grad-gold, linear-gradient(135deg, #E6D4A8, #D7BF81 45%, #BEA86E));
    color: var(--pm-text-on-gold, #1b1505);
    cursor: pointer;
    box-shadow: var(--pm-shadow-gold-sm, 0 4px 16px rgba(215, 191, 129, .25));
    transition: transform .15s ease, box-shadow .15s ease;
}
.pm-coach-rx-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--pm-shadow-gold-md, 0 8px 28px rgba(215, 191, 129, .35)); }
.pm-coach-rx-btn:disabled { opacity: .75; cursor: default; }
.pm-coach-rx-btn .srt-icon { width: 15px; height: 15px; }

/* ── chord ID widget ── */
.pm-coach-chord {
    border-top: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    padding-top: var(--pm-space-4, 16px);
}
.pm-coach-chord-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pm-coach-chord-title {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}
.pm-coach-chord-arm {
    font-size: .78rem;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--pm-gold-a35, rgba(215, 191, 129, .35));
    background: transparent;
    color: var(--pm-accent, #D7BF81);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.pm-coach-chord.is-armed .pm-coach-chord-arm {
    background: var(--pm-grad-gold, linear-gradient(135deg, #E6D4A8, #D7BF81, #BEA86E));
    color: var(--pm-text-on-gold, #1b1505);
    border-color: transparent;
}
.pm-coach-chord-hint {
    font-size: .82rem;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
    margin: 10px 0 0;
    animation: pm-coach-hint-pulse 2s ease-in-out infinite;
}
@keyframes pm-coach-hint-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
.pm-coach-chord-result { margin-top: 10px; }
.pm-coach-chord-symbol {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    background: var(--pm-hero-title-accent, linear-gradient(135deg, #E6D4A8, #D7BF81 40%, #BEA86E));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pm-coach-chord-name { font-size: .95rem; font-weight: 600; margin-top: 2px; }
.pm-coach-chord-notes {
    font-family: var(--pm-font-mono, 'JetBrains Mono', monospace);
    font-size: .82rem;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
    margin-top: 4px;
}
.pm-coach-chord-extra {
    font-size: .78rem;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
    margin-top: 3px;
}
.pm-coach-chord-speak {
    margin-top: 10px;
    background: transparent;
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    color: var(--pm-accent, #D7BF81);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .76rem;
    font-family: inherit;
    cursor: pointer;
}
.pm-coach-chord-speak:hover { border-color: var(--pm-accent, #D7BF81); }

/* ── Practice drills the Professor coaches (all trainer generators) ── */
.pm-coach-drills {
    border: 1px solid var(--pm-border-strong, rgba(215, 191, 129, .3));
    border-radius: 16px;
    padding: 16px;
    margin-bottom: var(--pm-space-4, 16px);
    background:
        radial-gradient(120% 90% at 100% 0%, var(--pm-gold-a08, rgba(215,191,129,.08)), transparent 60%),
        var(--pm-surface-2, #161616);
}
.pm-coach-drills-title {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: 1.1rem; font-weight: 700; margin: 0;
    color: var(--pm-text, #F5EFE3);
}
.pm-coach-drills-title svg { width: 17px; height: 17px; color: var(--pm-accent, #E6D4A8); fill: none; stroke: currentColor; }
.pm-coach-drills-lead { font-size: .85rem; line-height: 1.5; color: var(--pm-text-soft, rgba(245,239,227,.72)); margin: 6px 0 12px; }
.pm-coach-drills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.pm-coach-drill-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .18));
    background: var(--pm-surface, #0B0B0B);
    color: var(--pm-text-soft, rgba(245,239,227,.82));
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    font-size: .82rem; font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease;
    text-align: left;
}
.pm-coach-drill-btn svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--pm-accent, #D7BF81); fill: none; stroke: currentColor; }
.pm-coach-drill-btn:hover { border-color: var(--pm-border-strong, rgba(215,191,129,.4)); color: var(--pm-text, #F5EFE3); transform: translateY(-1px); }
.pm-coach-drill-btn.is-active {
    color: var(--pm-text-on-gold, #1b1505);
    background: var(--pm-grad-gold, linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E));
    border-color: transparent;
}
.pm-coach-drill-btn.is-active svg { color: currentColor; }
.pm-coach-drills-levels {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pm-border, rgba(215, 191, 129, .14));
}
.pm-coach-drills-levels-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pm-text-muted, rgba(245,239,227,.5)); margin-right: 2px; }
.pm-coach-level-btn {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .18));
    background: transparent;
    color: var(--pm-text-soft, rgba(245,239,227,.72));
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    font-size: .72rem; font-weight: 600; cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pm-coach-level-btn:hover { color: var(--pm-text, #F5EFE3); border-color: var(--pm-border-strong, rgba(215,191,129,.4)); }
.pm-coach-level-btn.is-active { color: var(--pm-accent, #E6D4A8); border-color: rgba(215,191,129,.55); background: var(--pm-gold-a08, rgba(215,191,129,.1)); }

/* ── Practice drills docked UNDER the keyboard (full trainer width) ── */
.pm-coach-practice { margin-top: 10px; }
.pm-coach-practice .pm-coach-drills { margin-bottom: 0; }
.pm-coach-practice .pm-coach-drills-grid {
    grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1100px) {
    .pm-coach-practice .pm-coach-drills-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .pm-coach-practice .pm-coach-drills-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── "What am I playing?" live bar under the keyboard (full trainer width) ── */
.pm-coach-whatami {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background:
        radial-gradient(120% 100% at 0% 0%, var(--pm-gold-a08, rgba(215,191,129,.08)), transparent 60%),
        var(--pm-surface-2, #161616);
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .18));
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    min-height: 54px;
}
.pm-coach-whatami-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--pm-accent, #E6D4A8);
    white-space: nowrap;
}
.pm-coach-whatami-label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.pm-coach-whatami-result {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.pm-coach-whatami-result em { color: var(--pm-text-muted, rgba(245,239,227,.45)); font-style: italic; font-size: .88rem; }
.pm-coach-whatami-result strong {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-text, #F5EFE3);
    white-space: nowrap;
}
.pm-coach-whatami-notes {
    font-size: .82rem;
    color: var(--pm-text-soft, rgba(245,239,227,.72));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 640px) {
    .pm-coach-whatami { flex-wrap: wrap; gap: 6px 12px; }
    .pm-coach-whatami-result strong { font-size: 1.1rem; }
}

/* ── Early-access eyebrow (hero) + gate badge ── */
/* Now sits at the BOTTOM of the hero copy (under the description, above the
   CTA), as its own centered line, not beside the badge. */
.pm-coach-hero-eyebrow {
    margin: 14px auto 0;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--pm-accent, #E6D4A8);
}
.pm-coach-gate__badge {
    display: inline-block;
    margin: 0 auto 16px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pm-text-on-gold, #1b1505);
    background: var(--pm-grad-gold, linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E));
}

/* ── Members-only gate (coach closed to the public) ──
   The gate is a self-sizing centered card (NOT absolute), so the container
   grows to contain it and overflow:hidden only clips the decorative teaser,
   never the card (that clipping was the "modale passe dessous / buttons cut"
   bug). A high stacking context keeps it above sibling sections and chrome. */
.pm-coach-layout--locked {
    position: relative;
    z-index: 20;
    display: grid;
    place-items: center;
    min-height: min(72vh, 560px);
    padding: clamp(28px, 5vw, 56px) 16px;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
}
/* Blurred decorative teaser behind the gate. */
.pm-coach-locked-teaser {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(60% 80% at 50% 0%, var(--pm-gold-a08, rgba(215,191,129,.08)), transparent 70%),
        var(--pm-surface-2, #161616);
    filter: blur(3px);
}
.pm-coach-locked-staff {
    position: absolute;
    left: 8%; right: 8%; top: 22%;
    display: grid;
    gap: 18px;
}
.pm-coach-locked-staff span { display: block; height: 2px; background: var(--pm-border-strong, rgba(215,191,129,.28)); border-radius: 2px; }
.pm-coach-locked-keys {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 30%;
    background: repeating-linear-gradient(90deg, rgba(245,239,227,.9) 0 3.2%, rgba(0,0,0,.35) 3.2% 3.6%);
    opacity: .35;
}
.pm-coach-gate {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    place-items: center;
}
.pm-coach-gate__card {
    max-width: 460px;
    width: 100%;
    text-align: center;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 20px;
    /* Lifted, high-contrast card so it clearly reads as a panel above the page
       in BOTH themes (the page and surface tokens were near-identical tones). */
    background: #17150f;
    border: 1.5px solid var(--pm-border-strong, rgba(215,191,129,.45));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
html[data-theme="light"] .pm-coach-gate__card {
    background: #ffffff;
    border-color: rgba(160, 137, 74, .5);
    box-shadow: 0 30px 80px rgba(60, 48, 20, .22);
}
/* Icon sits on its OWN line at the top of the card (block-level grid so the
   auto margins centre it), with the badge centred directly beneath it, then
   the title. A clean vertical stack, not the icon and badge sharing a row. */
.pm-coach-gate__icon {
    display: grid;
    place-items: center;
    width: 60px; height: 60px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--pm-gold-a08, rgba(215,191,129,.1));
    border: 1.5px solid var(--pm-border-strong, rgba(215,191,129,.4));
    color: var(--pm-accent, #E6D4A8);
}
/* Explicit size: the coach page does not load the .srt-icon sizing rules, so
   without this the professor glyph rendered at its intrinsic (huge) size. */
.pm-coach-gate__icon svg,
.pm-coach-gate__icon .srt-icon { width: 30px !important; height: 30px !important; fill: none; stroke: currentColor; }
.pm-coach-gate__title {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    color: var(--pm-text, #F5EFE3) !important; /* beat a possible Blocksy h2!important */
    margin: 0 0 10px;
}
.pm-coach-gate__sub {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--pm-text-soft, rgba(245,239,227,.72));
    margin: 0 0 20px;
}
.pm-coach-gate__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pm-coach-gate__cta .pm-coach-btn { justify-content: center; }

/* ── SEO content sections under the tool ── */
.pm-coach-seo {
    max-width: 880px;
    margin: var(--pm-space-10, 40px) auto;
    padding: 0 var(--pm-space-4, 16px);
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    color: var(--pm-text, #F5EFE3);
}
.pm-coach-seo h2 {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: var(--pm-fs-h3, 1.5rem);
    margin: var(--pm-space-8, 32px) 0 var(--pm-space-3, 12px);
    /* Explicit theme-aware color: without it these headings inherit the
       zero-specificity page color and lose to Blocksy's global h2 rule,
       which is a fixed dark tone (and it may be !important). That is the
       "Frequently asked questions title black-on-black in dark mode" bug.
       --pm-text flips to near-white on dark and near-black on light, so it
       reads in both themes; !important guarantees it wins the theme rule. */
    color: var(--pm-text, #F5EFE3) !important;
}
.pm-coach-seo p, .pm-coach-seo li {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--pm-text-soft, var(--pm-gray-300, #D1D5DB));
}
.pm-coach-faq details {
    border: 1px solid var(--pm-border, rgba(215, 191, 129, .15));
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--pm-surface-2, #161616);
}
.pm-coach-faq summary {
    font-weight: 600;
    cursor: pointer;
    font-size: .95rem;
    color: var(--pm-text, #F5EFE3);
}
.pm-coach-faq details p { margin: 10px 0 0; }

/* ── Stage CTA card ──
   Full available width on desktop: same max-width + padding as
   .pm-coach-layout, so the card runs from the trainer's left border to the
   Professor column's right border. */
.pm-coach-stage {
    max-width: 1480px;
    margin: var(--pm-space-8, 32px) auto 0;
    padding: 0 var(--pm-space-4, 16px);
}
.pm-coach-stage-card {
    display: flex;
    align-items: center;
    gap: var(--pm-space-5, 20px);
    background: var(--pm-surface-2, #161616);
    border: 1px solid var(--pm-gold-a25, rgba(215, 191, 129, .25));
    border-radius: var(--pm-r-card, 18px);
    padding: var(--pm-space-5, 20px) var(--pm-space-6, 24px);
    color: var(--pm-text, #F5EFE3);
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}
.pm-coach-stage-card:hover { border-color: var(--pm-accent, #D7BF81); transform: translateY(-2px); }
.pm-coach-stage-icon { font-size: 2rem; line-height: 1; }
.pm-coach-stage-copy { flex: 1; min-width: 0; }
.pm-coach-stage-title {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0 0 4px;
}
.pm-coach-stage-sub {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--pm-text-soft, var(--pm-gray-400, #9CA3AF));
    margin: 0;
}
.pm-coach-stage-arrow { color: var(--pm-accent, #D7BF81); font-size: 1.4rem; }

/* ── Collapsed pill: the ONLY coach chrome shown by default in the hall.
   Discreet but visible bottom-left; opening it reveals the full panel. ── */
.pm-stage-fab {
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px 9px 11px;
    border-radius: 999px;
    background: rgba(15, 14, 11, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(215, 191, 129, .3);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .38);
    color: #F5EFE3;
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pm-stage-fab:hover { border-color: rgba(215, 191, 129, .55); background: rgba(20, 18, 13, .82); transform: translateY(-1px); }
.pm-stage-fab.is-open { display: none; }
.pm-stage-fab-logo {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: rgba(215, 191, 129, .1);
    border: 1.5px solid rgba(215, 191, 129, .5);
    color: #E6D4A8;
    display: grid; place-items: center;
}
.pm-stage-fab-logo svg { width: 56%; height: 56%; stroke: currentColor; fill: none; }
.pm-stage-fab-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.pm-stage-fab-text strong { font-size: .82rem; font-weight: 700; color: #FFE7A6; }
.pm-stage-fab-text span { font-size: .68rem; color: rgba(245, 239, 227, .62); letter-spacing: .01em; }
.pm-stage-fab.pm-stage--top { bottom: auto; top: calc(16px + env(safe-area-inset-top, 0px)); }
/* Mobile: the collapsed pill is SLIM and sits just above the control bar
   (user: "when collapsed/hidden it has to be slim, just above the control
   bar"). Portrait pins it above the bottom bar; when the bar
   docks top, the pill follows. */
@media (max-width: 720px) {
    .pm-stage-fab {
        left: 8px;
        padding: 6px 12px 6px 8px;
        gap: 7px;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
    .pm-stage-fab-logo { width: 26px; height: 26px; flex-basis: 26px; }
    .pm-stage-fab-text strong { font-size: .74rem; }
    .pm-stage-fab-text span { display: none; }
    .pm-stage-fab.pm-stage--top { bottom: auto; top: calc(88px + env(safe-area-inset-top, 0px)); }
}
/* Phone landscape: even slimmer, hugging the bottom bar on the left. */
@media (max-height: 500px) and (orientation: landscape) {
    .pm-stage-fab {
        left: 8px;
        padding: 5px 11px 5px 7px;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
    .pm-stage-fab-logo { width: 24px; height: 24px; flex-basis: 24px; }
    .pm-stage-fab-text span { display: none; }
    .pm-stage-fab.pm-stage--top { bottom: auto; top: calc(70px + env(safe-area-inset-top, 0px)); }
}

/* The Professor's sight-reading now lives ON the music-stand tablet itself
   (drawn by concert-hall.js on the same 3D panel as the Repertoire), not in a
   floating overlay. There is intentionally no .pm-stage-tablet CSS any more. */

/* Sign-in gate inside the Concert Hall (members-only Professor). */
.pm-stage-gate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(6, 6, 12, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pm-stage-gate[hidden] { display: none; }
.pm-stage-gate-card {
    position: relative;
    max-width: 420px;
    width: 100%;
    text-align: center;
    padding: 32px 26px 26px;
    border-radius: 20px;
    background: #14120d;
    border: 1.5px solid rgba(215, 191, 129, .42);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    color: #F5EFE3;
    font-family: var(--pm-font, 'Montserrat', sans-serif);
}
.pm-stage-gate-logo {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(215, 191, 129, .1);
    border: 1.5px solid rgba(215, 191, 129, .45);
    color: #E6D4A8;
}
.pm-stage-gate-logo svg { width: 28px; height: 28px; fill: none; stroke: currentColor; }
.pm-stage-gate-title { font-family: var(--pm-font-display, 'Fraunces', serif); font-size: 1.4rem; font-weight: 700; margin: 0 0 8px; color: #FFE7A6; }
.pm-stage-gate-sub { font-size: .9rem; line-height: 1.55; color: rgba(245, 239, 227, .72); margin: 0 0 18px; }
.pm-stage-gate-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pm-stage-gate-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 18px; border-radius: 999px;
    font-weight: 700; font-size: .86rem; text-decoration: none;
    color: #F5EFE3; border: 1px solid rgba(215, 191, 129, .4); background: transparent;
}
.pm-stage-gate-btn--primary { color: #1b1505; background: linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E); border-color: transparent; }
.pm-stage-gate-btn:hover { filter: brightness(1.05); }
.pm-stage-gate-close {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 50%; background: transparent; border: 1px solid rgba(215, 191, 129, .25);
    color: rgba(245, 239, 227, .7); cursor: pointer; font-size: 16px; line-height: 1;
}
.pm-stage-gate-close:hover { color: #FFE7A6; border-color: rgba(215, 191, 129, .5); }
.pm-stage-gate-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }

/* ── Stage page overlay (Professor strip in the 3D hall) ── */
/* the [hidden] attribute must beat the .pm-stage-prof display:flex below,
   otherwise the collapsed panel stays painted over the pill */
.pm-stage-prof[hidden], .pm-stage-fab[hidden] { display: none !important; }
/* ── The Professor panel, rebuilt A to Z ──
   head:    [logo] THE PROFESSOR ............ [voice] [minimize] [close]
   body:    one big line + one detail line
   tabs:    Name it | Repeat after me (two equal segments)
   display: caption + four aligned toggles
   game:    level pills + Start (game mode only)
   BOTTOM-ALIGNED with the control bar (same 14px baseline), tight spacing,
   zero wasted room; minimize collapses everything but head + main line. */
.pm-stage-prof {
    position: fixed;
    left: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    /* the 3D section is fixed & opaque at z-index 9999, so the coach strip
       must sit above it or it is painted behind the scene and never seen */
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: min(330px, calc(100vw - 28px));
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 10px 12px 12px;
    border-radius: 16px;
    background: rgba(15, 14, 11, .84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(215, 191, 129, .32);
    box-shadow: 0 10px 36px rgba(0, 0, 0, .4);
    color: #F5EFE3;
    font-family: var(--pm-font, 'Montserrat', sans-serif);
}
/* dock to the top edge together with the control bar (same 14px baseline) */
.pm-stage-prof.pm-stage--top {
    bottom: auto;
    top: calc(14px + env(safe-area-inset-top, 0px));
}
/* Top dock: the BACK breadcrumb yields the top-left to the Professor. */
body.pm-stage-top .pm-breadcrumb {
    left: auto;
    right: 16px;
}
/* head row */
.pm-stage-prof-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(215, 191, 129, .16);
}
.pm-stage-prof-eyebrow {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(230, 212, 168, .85);
}
.pm-stage-iconbtn {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(215, 191, 129, .22);
    color: rgba(245, 239, 227, .72);
    cursor: pointer;
    font-size: 15px; line-height: 1;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pm-stage-iconbtn:hover { color: #FFE7A6; border-color: rgba(215, 191, 129, .5); background: rgba(215, 191, 129, .08); }
.pm-stage-iconbtn[aria-pressed="true"] { color: #FFE48A; border-color: rgba(215, 191, 129, .55); }
.pm-stage-iconbtn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.pm-stage-minbtn svg { transition: transform .18s ease; }
.pm-stage-minbtn.is-flipped svg { transform: rotate(180deg); }

/* Professor voice VOLUME popover (independent of the piano volume). The
   Sound button opens it; a mute toggle + a slider set the Professor's own
   level. Positioned under the button, stays inside the panel head. */
.pm-stage-voicewrap { position: relative; flex: 0 0 auto; display: inline-flex; }
.pm-stage-voicepop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(18, 15, 9, .98);
    border: 1px solid rgba(215, 191, 129, .32);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.pm-stage-voicewrap.is-open .pm-stage-voicepop { display: inline-flex; }
.pm-stage-voicemute {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(215, 191, 129, .22);
    color: rgba(245, 239, 227, .8);
    cursor: pointer;
}
.pm-stage-voicemute svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.pm-stage-voicemute:hover { color: #FFE7A6; border-color: rgba(215, 191, 129, .5); }
.pm-stage-voicerange {
    -webkit-appearance: none;
    appearance: none;
    width: 96px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--pm-gold, #D4AF37), rgba(215, 191, 129, .25));
    cursor: pointer;
    touch-action: none;
}
.pm-stage-voicerange::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 38%, #F0D870, #C8A040);
    border: 2px solid rgba(255, 255, 255, .35);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.pm-stage-voicerange::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 38%, #F0D870, #C8A040);
    border: 2px solid rgba(255, 255, 255, .35);
}
.pm-stage-voiceval {
    flex: 0 0 auto;
    min-width: 2.4ch;
    text-align: right;
    font-family: var(--pm-font-body, inherit);
    font-size: 11px;
    font-weight: 700;
    color: rgba(245, 239, 227, .7);
    font-variant-numeric: tabular-nums;
}
/* minimized: only head + the main/sub lines remain */
.pm-stage-prof.is-min .pm-stage-prof-tools,
.pm-stage-prof.is-min .pm-stage-prof-display,
.pm-stage-prof.is-min .pm-stage-choose,
.pm-stage-prof.is-min .pm-stage-game { display: none; }
/* Choose exercise: full-width gold-outline button under the Display grid. */
.pm-stage-choose {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px 12px;
    font: 700 .74rem/1 var(--pm-font, 'Montserrat', sans-serif);
    letter-spacing: .02em;
    color: #1b1505;
    background: linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: filter .15s ease;
}
.pm-stage-choose:hover { filter: brightness(1.05); }
.pm-stage-choose:active { transform: scale(0.98); }
.pm-stage-choose svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.pm-stage-prof-logo {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: rgba(215, 191, 129, .10);
    border: 1.5px solid rgba(215, 191, 129, .5);
    color: #E6D4A8;
    display: grid;
    place-items: center;
}
.pm-stage-prof-logo svg { width: 58%; height: 58%; stroke: currentColor; fill: none; }
.pm-stage-prof-body { min-width: 0; }
/* Mobile portrait: panel and control bar stack VERTICALLY, panel above the
   bottom bar (or under the top-docked bar), full width, never overlapping. */
@media (max-width: 720px) {
    .pm-stage-prof {
        left: 8px;
        right: 8px;
        width: auto;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        max-height: min(46dvh, calc(100dvh - 170px));
    }
    .pm-stage-prof.pm-stage--top {
        bottom: auto;
        top: calc(92px + env(safe-area-inset-top, 0px));
    }
}
/* Phone landscape: short viewport, keep the panel compact on the left and
   clear of the bottom bar. */
@media (max-height: 500px) and (orientation: landscape) {
    .pm-stage-prof {
        left: 8px;
        right: auto;
        width: min(300px, 44vw);
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 90px);
        padding: 8px 10px 10px;
        gap: 6px;
    }
    .pm-stage-prof.pm-stage--top {
        bottom: auto;
        top: calc(74px + env(safe-area-inset-top, 0px));
    }
}
.pm-stage-prof-chord {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-weight: 700;
    font-size: 1.18rem;
    line-height: 1.22;
    color: #FFE48A;
    margin: 1px 0 0;
    /* NEVER truncated (user: "EVERYTHING absolutely has to show"): long chord
       names wrap onto the next line instead of ellipsizing. */
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
}
.pm-stage-prof-sub {
    font-size: .72rem;
    color: rgba(245, 239, 227, .68);
    margin: 1px 0 0;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
}
.pm-stage-prof-back {
    flex: 0 0 auto;
    font-size: .74rem;
    font-weight: 600;
    color: #1b1505;
    background: linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E);
    border-radius: 999px;
    padding: 8px 13px;
    text-decoration: none;
    white-space: nowrap;
}
/* ── the Professor's stage tools (mode tabs, exercise game bar) ── */
.pm-stage-prof-tools {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.pm-stage-tab {
    appearance: none;
    /* Two EQUAL segments filling the row: nothing floats, nothing wraps. */
    flex: 1 1 0;
    text-align: center;
    font: 600 .72rem/1 var(--pm-font, 'Montserrat', sans-serif);
    letter-spacing: .02em;
    color: rgba(245, 239, 227, .72);
    background: rgba(245, 239, 227, .06);
    border: 1px solid rgba(215, 191, 129, .22);
    border-radius: 999px;
    padding: 8px 10px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.pm-stage-tab:hover { color: #F5EFE3; border-color: rgba(215, 191, 129, .45); }
.pm-stage-tab.is-active {
    color: #1b1505;
    background: linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E);
    border-color: transparent;
}
.pm-stage-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font: 600 .7rem/1 var(--pm-font, 'Montserrat', sans-serif);
    color: rgba(245, 239, 227, .72);
    background: transparent;
    border: 1px solid rgba(215, 191, 129, .22);
    border-radius: 999px;
    padding: 7px 11px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.pm-stage-toggle:hover { color: #F5EFE3; border-color: rgba(215, 191, 129, .45); }
.pm-stage-toggle[aria-pressed="true"] { color: #FFE48A; border-color: rgba(215, 191, 129, .6); }
.pm-stage-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
/* Only the first toggle floats right; controls that follow stay grouped. */
.pm-stage-toggle ~ .pm-stage-toggle { margin-left: 0; }

/* Display row: caption on its own line, then a 2x2 GRID of equal toggles
   (Note names / Fingering / Counting / Keyboard) so everything aligns with
   zero wasted room. Each switch drives the tablet staff AND the 3D keys. */
.pm-stage-prof-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(215, 191, 129, .14);
}
.pm-stage-prof-caption {
    grid-column: 1 / -1;
    font: 700 .6rem/1 var(--pm-font, 'Montserrat', sans-serif);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245, 239, 227, .45);
}
.pm-stage-toggle--sm {
    margin-left: 0;
    justify-content: center;
    padding: 7px 8px;
    font-size: .66rem;
}
.pm-stage-game {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(215, 191, 129, .14);
}
.pm-stage-game-pills { display: inline-flex; gap: 4px; }
.pm-stage-pill {
    appearance: none;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    font: 700 .74rem/1 var(--pm-font, 'Montserrat', sans-serif);
    color: rgba(245, 239, 227, .72);
    background: rgba(245, 239, 227, .06);
    border: 1px solid rgba(215, 191, 129, .22);
    border-radius: 50%;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.pm-stage-pill:hover { color: #F5EFE3; border-color: rgba(215, 191, 129, .45); }
.pm-stage-pill[aria-pressed="true"] {
    color: #1b1505;
    background: linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E);
    border-color: transparent;
}
.pm-stage-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 700 .74rem/1 var(--pm-font, 'Montserrat', sans-serif);
    color: #1b1505;
    background: linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E);
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(215, 191, 129, .25);
}
.pm-stage-btn:hover { filter: brightness(1.05); }
.pm-stage-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.pm-stage-btn.is-live {
    color: #F5EFE3;
    background: rgba(196, 85, 77, .22);
    border: 1px solid rgba(196, 85, 77, .55);
    box-shadow: none;
}

@media (max-width: 560px) {
    /* full-width layout handled by the 720px block above */
    .pm-stage-prof-back { display: none; }
}

/* ── mobile polish ── */
@media (max-width: 640px) {
    .pm-coach-hero { padding: clamp(36px, 6vh, 56px) var(--pm-space-4, 16px) var(--pm-space-6, 24px); }
    .pm-coach-hero__cta { flex-direction: column; align-items: stretch; }
    .pm-coach-btn { justify-content: center; }
    .pm-coach-hero__stats { gap: 20px; }
    .pm-coach-layout { gap: var(--pm-space-4, 16px); margin-top: var(--pm-space-4, 16px); }
    .pm-coach { padding: var(--pm-space-4, 16px); }
    .pm-coach-grade-letter { font-size: 2rem; min-width: 44px; }
    .pm-coach-plan-btn { flex: 1 1 100%; }
    .pm-coach-chord-symbol { font-size: 1.7rem; }
    .pm-coach-stage-card { flex-wrap: wrap; }
}

/* ── [pm_coach_cta] reusable call-to-action (LMS lessons, articles, pages) ── */
.pm-coach-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 880px;
    margin: var(--pm-space-6, 24px) auto;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid var(--pm-border-strong, rgba(215, 191, 129, .3));
    background:
        radial-gradient(120% 90% at 0% 0%, var(--pm-gold-a08, rgba(215,191,129,.08)), transparent 60%),
        var(--pm-surface-2, #161616);
    font-family: var(--pm-font, 'Montserrat', sans-serif);
}
.pm-coach-cta-icon {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: var(--pm-gold-a08, rgba(215, 191, 129, .1));
    border: 1.5px solid var(--pm-border-strong, rgba(215, 191, 129, .4));
    color: var(--pm-accent, #E6D4A8);
}
.pm-coach-cta-icon svg { width: 26px !important; height: 26px !important; fill: none; stroke: currentColor; }
.pm-coach-cta-copy { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-coach-cta-title {
    font-family: var(--pm-font-display, 'Fraunces', serif);
    font-size: 1.15rem; font-weight: 700;
    color: var(--pm-text, #F5EFE3) !important;
}
.pm-coach-cta-sub { font-size: .85rem; line-height: 1.5; color: var(--pm-text-soft, rgba(245,239,227,.72)) !important; }
.pm-coach-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pm-coach-cta-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: .84rem; font-weight: 700;
    text-decoration: none !important;
    color: var(--pm-accent, #D7BF81) !important;
    border: 1px solid var(--pm-gold-a35, rgba(215, 191, 129, .4));
    background: transparent;
    transition: filter .15s ease, transform .12s ease, background .15s ease;
    white-space: nowrap;
}
.pm-coach-cta-btn:hover { transform: translateY(-1px); background: var(--pm-gold-a08, rgba(215,191,129,.08)); }
.pm-coach-cta-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }
.pm-coach-cta-btn--primary {
    color: var(--pm-text-on-gold, #1b1505) !important;
    background: var(--pm-grad-gold, linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E));
    border-color: transparent;
    box-shadow: 0 6px 18px var(--pm-gold-a25, rgba(215, 191, 129, .25));
}
.pm-coach-cta-btn--primary:hover { filter: brightness(1.05); background: var(--pm-grad-gold, linear-gradient(135deg, #E6D4A8, #D7BF81 55%, #BEA86E)); }
.pm-coach-cta--compact { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════
   CONTRAST GUARANTEE (final word in the cascade)
   The parent theme (Blocksy customizer) and the child style.css keep
   winning heading/text colors with palette values that read as BROWN
   on the dark body (the recurring "titres marron sur fond sombre").
   coach.css is enqueued LAST on the coach page, so this block, with
   !important and hex fallbacks, is the definitive answer for EVERY
   textual element of the coach UI, in BOTH themes. No coach text can
   ever inherit a dark tone on a dark surface again.
   ══════════════════════════════════════════════════════════════════ */
/* Primary titles and strong text: near-white on dark, ink on light. */
.pm-coach-page .pm-coach-name,
.pm-coach-page .pm-coach-drills-title,
.pm-coach-page .pm-coach-duet-title,
.pm-coach-page .pm-coach-chord-title,
.pm-coach-page .pm-coach-card-title,
.pm-coach-page .pm-coach-stage-title,
.pm-coach-page .pm-coach-grade-letter,
.pm-coach-page .pm-coach-whatami-result strong,
.pm-coach-page .pm-coach-studio h3,
.pm-coach-page .pm-coach-studio h4,
.pm-coach-page h2, .pm-coach-page h3, .pm-coach-page h4 {
    color: var(--pm-text, #F5EFE3) !important;
}
/* Secondary / soft text: readable cream on dark, soft ink on light. */
.pm-coach-page .pm-coach-status,
.pm-coach-page .pm-coach-card-text,
.pm-coach-page .pm-coach-drills-lead,
.pm-coach-page .pm-coach-duet-lead,
.pm-coach-page .pm-coach-duet-status,
.pm-coach-page .pm-coach-stage-sub,
.pm-coach-page .pm-coach-whatami-notes,
.pm-coach-page .pm-coach-seo p,
.pm-coach-page .pm-coach-seo li {
    color: var(--pm-text-soft, rgba(245, 239, 227, .74)) !important;
}
/* Muted labels (uppercase section heads): visible, never mud. */
.pm-coach-page .pm-coach-panel-head,
.pm-coach-page .pm-coach-heat-label,
.pm-coach-page .pm-coach-drills-levels-label {
    color: var(--pm-text-muted, rgba(245, 239, 227, .55)) !important;
}
/* The trainer's own score title inside the inline embed follows the SRT
   theme; guarantee it too (it was reading as dark olive on dark). */
.pm-coach-page .pm-srt-inline-host .srt-score-title {
    color: var(--srt-text, #F5EFE3) !important;
}