/*
 * coach-panel.css — Coach Workouts Stage Panel (client-facing)
 * All classes prefixed .coach-panel-*
 * Load after health-team.css in index.html.
 */

/* Panel height, body cap, and scroll clearance are all SHARED rules on
   .panel / .panel-body in panel.css. The coach panel has NO per-panel height
   code — it's the same height as every other panel. (Removed June 2026: the
   #coach-panel max-height: 92dvh override + a duplicated iOS scroll-clearance
   block, both ported from the food panel.) */

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.coach-panel-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.coach-panel-tab {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.coach-panel-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.coach-panel-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 60px 24px;
    color: var(--text-muted); font-size: 0.88rem;
}
.coach-panel-spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: coachPanelSpin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes coachPanelSpin { to { transform: rotate(360deg); } }

/* ── TODAY VIEW ──────────────────────────────────────────────────────────── */
.coach-panel-today-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
}

.coach-panel-today-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
}
.coach-panel-today-prog {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
}
.coach-panel-today-coach {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.coach-panel-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.coach-panel-progress-track {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}
.coach-panel-progress-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 2px;
    transition: width 0.6s ease;
}
.coach-panel-progress-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Today card ──────────────────────────────────────────────────────────── */
.coach-panel-today-card {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.coach-panel-today-card--done {
    background: color-mix(in srgb, #3cba6c 5%, transparent);
    border-color: color-mix(in srgb, #3cba6c 20%, transparent);
}
.coach-panel-today-card--rest {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
.coach-panel-today-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.coach-panel-today-day {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 2px;
}
.coach-panel-today-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
}
.coach-panel-today-done-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #3cba6c;
    background: rgba(60,186,108,0.12);
    border: 1px solid rgba(60,186,108,0.25);
    border-radius: 100px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Rest day content */
.coach-panel-rest-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
}
.coach-panel-rest-header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}
.coach-panel-rest-sprite {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    margin: 4px 0;
}
.coach-panel-rest-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.coach-panel-recovery-prompt { width: 100%; text-align: center; }
.coach-panel-recovery-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.coach-panel-recovery-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
}
.coach-recovery-star {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.12s, transform 0.1s;
    padding: 2px;
}
.coach-recovery-star.selected { opacity: 1; }
.coach-recovery-star:hover { transform: scale(1.2); }

/* Exercise list */
.coach-panel-exercise-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Bug #1+#2 polish: structural shell only. The toggle button below
   provides padding / background / border-radius for the visible row;
   leaving them on the row too created a "double background" margin
   around the toggle and forced flex layout that put the editor inline
   with the toggle instead of below it. */
.coach-panel-ex-row {
    display: block;
}
.coach-panel-ex-row--done { opacity: 0.5; }
.coach-panel-ex-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    color: var(--accent-color);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.coach-panel-ex-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-main);
}
.coach-panel-ex-detail {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Complete button */
.coach-panel-complete-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 8px;
    background: var(--accent-color);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}
.coach-panel-complete-btn:hover { opacity: 0.85; }
.coach-panel-complete-btn--done {
    background: rgba(60,186,108,0.2);
    color: #3cba6c;
    border: 1px solid rgba(60,186,108,0.3);
}

/* Skip link — secondary text-action below Mark Complete */
.coach-panel-skip-link {
    display: block;
    margin: 8px auto 0;
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}
.coach-panel-skip-link:hover {
    color: var(--text-main);
}

/* ── Next Up preview ─────────────────────────────────────────────────────── */
.coach-panel-next-up { margin-top: 4px; }
.coach-panel-next-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.coach-panel-next-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}
.coach-panel-next-day { font-size: 0.85rem; font-weight: 600; color: var(--text-main); }
.coach-panel-next-desc { font-size: 0.72rem; color: var(--text-muted); }

/* ── All done ────────────────────────────────────────────────────────────── */
.coach-panel-complete-all {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
}
.coach-panel-complete-all-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}
.coach-panel-complete-all-sub { font-size: 0.85rem; color: var(--text-muted); }

/* ── Full Plan view ──────────────────────────────────────────────────────── */
.coach-panel-plan-prog { margin-bottom: 16px; }
.coach-panel-plan-prog-header { margin-bottom: 10px; }
.coach-panel-plan-prog-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
}
.coach-panel-plan-prog-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* Week dividers — group plan rows into "Week N" sections. Even weeks (by
   display order — 2nd, 4th, …) get a subtle full-bleed tint band so finished
   weeks read at a glance. Deliberately NEUTRAL gray, not green: green is the
   app's "done" signal (checkmarks, "Completed"), so tinting alternating weeks
   green would imply completion the band doesn't actually encode.
   The band's top edge lands halfway in the gap above the "Week N" label
   because the label's padding-top (10px) matches the preceding row's
   padding-bottom (10px). */
.coach-panel-plan-week {
    margin: 0 -16px;   /* cancel .panel-body 16px side padding → edge-to-edge band */
    padding: 0 16px;   /* restore the content inset for the label + rows */
}
.coach-panel-plan-week--tinted {
    background: rgba(255,255,255,0.035);
}
.coach-panel-plan-week-label {
    padding: 10px 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.coach-panel-plan-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.coach-panel-plan-row:last-child { border-bottom: none; }
.coach-panel-plan-status {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}
.coach-panel-plan-status--completed { background: rgba(60,186,108,0.15); color: #3cba6c; }
.coach-panel-plan-status--skipped   { background: rgba(224,82,82,0.12);  color: #e05252; }
.coach-panel-plan-status--scheduled { background: color-mix(in srgb, var(--accent-color) 15%, transparent); color: var(--accent-color); }
/* Missed is a display-only state derived from the calendar — the row's
   status column is still 'queued'/'scheduled' in the data. Amber, not the
   red used for skipped: the client didn't choose this, they just ran late. */
.coach-panel-plan-status--missed    { background: rgba(224,122,46,0.14);  color: #e07a2e; }
.coach-panel-plan-info { flex: 1; min-width: 0; }
.coach-panel-plan-day {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.coach-panel-plan-day-label { flex: 0 0 auto; }

/* "Missed" rides the day line rather than the right column — see the Sept 6
   2026 note in coachPanelBuildPlanRow. Amber, not the red used for skipped:
   the client didn't choose this, they just ran late. */
.coach-panel-plan-missed-tag {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #e07a2e;
}
.coach-panel-plan-detail { font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }
.coach-panel-plan-do-btn {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.12s;
}
.coach-panel-plan-do-btn:hover { background: color-mix(in srgb, var(--accent-color) 18%, transparent); }

/* Reschedule — deliberately subordinate to Do Today. No fill or border, so the
   row reads as one primary action plus an escape hatch rather than two
   competing choices. Inline on the day line (Sept 6 2026): stacked under the
   button it made every pending row three lines tall. margin: -4px 0 keeps the
   tap padding without pushing the day line taller than the rows around it. */
.coach-panel-plan-resched-btn {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 4px 2px;
    margin: -4px 0;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.12s;
}
.coach-panel-plan-resched-btn:hover { color: var(--text-main); }

/* Full Plan right-column status badges — plain text, stacked */
.coach-panel-plan-right {
    flex: 0 0 96px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 32px;
}
.coach-panel-plan-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: inherit;
    line-height: 1.15;
    min-height: 30px;
    min-width: 75px;
}
.coach-panel-plan-badge-word {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.coach-panel-plan-badge-date {
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.9;
}
.coach-panel-plan-badge--completed .coach-panel-plan-badge-word,
.coach-panel-plan-badge--completed .coach-panel-plan-badge-date {
    color: var(--green, #3cba6c);
}
.coach-panel-plan-badge--skipped .coach-panel-plan-badge-word {
    color: #e07a2e;
}

.coach-panel-plan-badge--today .coach-panel-plan-badge-word,
.coach-panel-plan-badge--today .coach-panel-plan-badge-date {
    color: var(--accent-color, #46a5ce);
}

/* ── Full Plan — coaching history block (Bug #2) ─────────────────────────── */
/* Aggregate completed-days + completed-programs across every coach the user
   has ever had. Lives between the last program's rows and the Remove Coach
   Plan button in the Full Plan view. Renders only when there is history to
   show — see coachPanelBuildHistoryBlock() in coach-panel.js.                */

.coach-panel-history {
    margin-top: 24px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 15%, transparent);
    border-radius: 10px;
}

.coach-panel-history-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* Totals row — big numbers, two columns */
.coach-panel-history-totals {
    display: flex;
    gap: 24px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.coach-panel-history-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.coach-panel-history-total-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
}

.coach-panel-history-total-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Per-coach rows */
.coach-panel-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.coach-panel-history-row:last-child { border-bottom: none; }

.coach-panel-history-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    min-width: 0;
}
.coach-panel-history-cred {
    font-weight: 400;
    color: var(--text-muted);
}

.coach-panel-history-stat {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Full Plan — Remove Coach Plan zone ──────────────────────────────────── */
/* Moved from inline styles in coach-panel.js. Lives at the very bottom of
   the Full Plan scroll so it requires deliberate intent to find.
   When a user has multiple active coaches the zone renders one button per
   coach, so we give it flex + gap to space stacked buttons cleanly. With a
   single coach the gap is a no-op.                                          */

.coach-panel-plan-delete-zone {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Full Plan — Pending invites from other coaches (Bug #5) ─────────────── */
/* When a user has an active program AND a second coach has sent an invite,
   the invite renders inline here — between coaching history and the delete
   zone. Reuses the .coach-panel-invite-card markup so the card itself looks
   identical to the top-of-panel banner variant, but with a labelled section
   wrapper so the user understands these are additional/optional coaches.    */
.coach-panel-invites-inline {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.coach-panel-invites-inline-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
/* Inline variant reuses the base .coach-panel-invite-card layout — no
   overrides needed right now; the modifier class exists so we can diverge
   later (e.g. make the inline variant more compact) without touching the
   top-of-panel banner.                                                     */
.coach-panel-invite-card--inline { /* reserved for future overrides */ }

.coach-panel-delete-plan-btn {
    width: 100%;
    padding: 11px;
    background: transparent;
    border: 1px solid color-mix(in srgb, #e05252 40%, transparent);
    border-radius: 8px;
    color: #e05252;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.coach-panel-delete-plan-btn:hover,
.coach-panel-delete-plan-btn:active {
    background: color-mix(in srgb, #e05252 10%, transparent);
}

/* ── Empty / Discovery ───────────────────────────────────────────────────── */
.coach-panel-empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 48px 16px; gap: 8px;
}
.coach-panel-empty-icon  { font-size: 2.5rem; opacity: 0.4; margin-bottom: 8px; }
.coach-panel-empty-title { font-size: 1rem; font-weight: 700; color: var(--text-main); }
.coach-panel-empty-desc  { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; max-width: 240px; }
.coach-panel-find-section { width: 100%; margin-top: 24px; }
.coach-panel-find-label  { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.coach-panel-find-cards  { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.coach-panel-find-card   { background: color-mix(in srgb, var(--accent-color) 5%, transparent); border: 1px solid color-mix(in srgb, var(--accent-color) 15%, transparent); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.coach-panel-find-card-icon { font-size: 1.4rem; margin-bottom: 4px; }
.coach-panel-find-card-name { font-size: 0.9rem; font-weight: 700; color: var(--text-main); }
.coach-panel-find-card-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 8px; }
.coach-panel-find-btn { align-self: flex-start; padding: 7px 14px; background: var(--accent-color); border: none; border-radius: 6px; color: #fff; font-size: 0.78rem; font-weight: 700; font-family: inherit; cursor: pointer; }
.coach-panel-find-hint { font-size: 0.72rem; color: var(--text-muted); text-align: center; line-height: 1.4; }

/* ── Sprite icon helpers ──────────────────────────────────────────────────── */
.coach-panel-btn-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
    image-rendering: pixelated;
}
/* Status column in Full Plan — icon fills the circle.
   Bug #1: Size was 14×14 while uiIconImg renders its atlas background scaled
   for 16×16, so icons showed clipped at 87.5%. The JS now passes a class
   (not a duplicate style="..." attribute, which the browser drops), and the
   rule below matches the 16px background scale 1:1.                          */
.coach-panel-plan-status-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}
/* Tint the atlas icon to match the status color. Atlas sprites are near-white
   so a hue-rotate filter takes them to green / red / accent.                 */
.coach-panel-plan-status--completed .coach-panel-plan-status-icon {
    filter: brightness(0) saturate(100%)
            invert(62%) sepia(56%) saturate(468%)
            hue-rotate(96deg) brightness(0.95);
}
.coach-panel-plan-status--skipped .coach-panel-plan-status-icon {
    filter: brightness(0) saturate(100%)
            invert(40%) sepia(80%) saturate(600%)
            hue-rotate(330deg) brightness(1.1);
}
.coach-panel-plan-status--scheduled .coach-panel-plan-status-icon {
    filter: brightness(0) saturate(100%)
            invert(62%) sepia(63%) saturate(468%)
            hue-rotate(162deg) brightness(1.15);
}
/* Queued rows show the day number — ui_queued_icon (vertical bars) read
   like a drag handle, which is the wrong affordance on a static row.        */
.coach-panel-plan-day-num {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-muted);
}

/* ── Celebration state ───────────────────────────────────────────────────── */
.coach-panel-celebrate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px 16px;
    gap: 8px;
}
.coach-panel-celebrate-icon {
    margin-bottom: 8px;
    opacity: 0.9;
}
.coach-panel-celebrate-icon img {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
}
.coach-panel-celebrate-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-main);
}
.coach-panel-celebrate-sub {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.coach-panel-celebrate-next {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.5;
}
.coach-panel-celebrate-next strong {
    color: var(--accent-color);
    font-weight: 700;
}

/* ── Review toggle ───────────────────────────────────────────────────────── */
.coach-panel-review {
    width: 100%;
    margin-top: 4px;
}
.coach-panel-review-toggle {
    width: 100%;
    padding: 11px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
    text-align: center;
}
.coach-panel-review-toggle:hover { background: rgba(255,255,255,0.07); }
.coach-panel-review-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.coach-panel-review-list.hidden { display: none; }

/* ── Focus label tag in today card header ────────────────────────────────── */
.coach-panel-today-focus-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    border-radius: 100px;
    padding: 1px 8px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Focus label in Up Next row */
.coach-panel-next-focus {
    font-size: 0.78rem;
    color: var(--accent-color);
    font-weight: 600;
}

/* Focus label in Full Plan rows */
.coach-panel-plan-focus {
    color: var(--accent-color);
    font-weight: 600;
}

/* ── Pending invite cards ────────────────────────────────────────────────── */
.coach-panel-invite-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, #e05252 6%, transparent);
    border: 1px solid color-mix(in srgb, #e05252 25%, transparent);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.coach-panel-invite-icon { font-size: 1.3rem; flex-shrink: 0; }
.coach-panel-invite-info { flex: 1; min-width: 0; }
.coach-panel-invite-title { font-size: 0.85rem; font-weight: 700; color: var(--text-main); }
.coach-panel-invite-desc  { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.coach-panel-invite-actions { display: flex; gap: 6px; flex-basis: 100%; }
.coach-panel-invite-accept {
    flex: 2; padding: 9px; border: none; border-radius: 6px;
    background: var(--accent-color); color: #fff;
    font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.coach-panel-invite-decline {
    flex: 1; padding: 9px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
    background: transparent; color: var(--text-muted);
    font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}

/* ── Drag handle ─────────────────────────────────────────────────────────── */
.coach-panel-drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    touch-action: none;
    z-index: 10;
    /* Extend tap target without affecting layout */
    padding-top: 6px;
}
.coach-panel-drag-pill {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    transition: background 0.15s;
}
.coach-panel-drag-handle:hover .coach-panel-drag-pill,
.coach-panel-drag-handle:active .coach-panel-drag-pill {
    background: rgba(255,255,255,0.45);
}
/* Make room for drag handle above the header */
#coach-panel .stage-panel-header {
    padding-top: 20px;
}

/* ── Bug #2 (April 27 2026): Schedule on calendar bar + picker ──────────── */
.coach-panel-schedule-bar {
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 0.78rem;
}
.coach-panel-schedule-bar--filled {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
}
.coach-panel-schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.coach-panel-schedule-text {
    color: var(--text-main);
    font-weight: 600;
    flex: 1;
    min-width: 0;
}
.coach-panel-schedule-btn,
.coach-panel-schedule-change {
    background: none;
    border: none;
    color: var(--accent-color);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.12s;
}
.coach-panel-schedule-btn:hover,
.coach-panel-schedule-change:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}
/* Bug #1 (April 29 2026): picker switched from row to column to fit the
   date drawer above the hour select + buttons. The .coach-panel-schedule-
   controls inner row keeps hour+confirm+cancel inline. The date drawer
   itself uses .em-datetime-row + .em-drawer + .em-date-input from
   events.css — see the cross-surface comment in events.css around the
   .em-datetime-row block. */
.coach-panel-schedule-picker {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
.coach-panel-schedule-picker[hidden] { display: none; }
.coach-panel-schedule-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.coach-panel-schedule-hour {
    background: rgba(0,0,0,0.25);
    color: var(--text-main);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 4px 8px;
    font: inherit;
    font-size: 0.78rem;
}
.coach-panel-schedule-confirm {
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.coach-panel-schedule-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
    padding: 4px 8px;
}

/* ── Bug #1 (April 27 2026): Per-exercise toggle + inline set editor ────── */
/* Editor markup itself reuses spotlight-more.css class names verbatim
   (.spotlight-more-set-pills, .spotlight-more-set-btn, .spotlight-more-
   val-input, .spotlight-more-unit-btn, .spotlight-more-set-confirm, etc.)
   so we only need wrapper rules here for the row toggle and the editor's
   visual attachment to the row above it. */
.coach-panel-ex-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.coach-panel-ex-toggle:hover { background: rgba(255,255,255,0.06); }
.coach-panel-ex-row--expanded .coach-panel-ex-toggle {
    background: rgba(255,255,255,0.06);
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.coach-panel-ex-chevron { color: var(--text-muted); font-size: 0.85rem; }
.coach-panel-ex-logged {
    font-size: 0.7rem;
    color: var(--accent-color);
    margin-top: 3px;
    font-weight: 600;
}
.coach-panel-set-editor {
    background: rgba(0,0,0,0.18);
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 12px;
    margin-top: -1px;
}

/* ── Bug #3 (April 27 2026): Full Plan past-sessions toggle ──────────────── */
.coach-panel-past-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.coach-panel-past-toggle:hover {
    background: rgba(255,255,255,0.06);
}
.coach-panel-past-list {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.05);
    opacity: 0.85;
}
.coach-panel-past-list.hidden {
    display: none;
}