/* ============================================================================
   Coach First-Run Wizard — Spotlight Overlay + Guided Tour
   ============================================================================ */

/* Restart button on coach dashboard */
.wizard-restart-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 0.75rem;
    transition: all 0.15s ease;
}
.wizard-restart-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(59, 130, 246, 0.05);
}
.wizard-restart-btn svg { color: inherit; }

/* 4-panel overlay (top, bottom, left, right around the spotlighted element) */
.wizard-overlay {
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    transition: all 0.3s ease;
    pointer-events: auto;
}
.wizard-overlay--top    { top: 0; left: 0; right: 0; }
.wizard-overlay--bottom { bottom: 0; left: 0; right: 0; }
.wizard-overlay--left   { left: 0; }
.wizard-overlay--right  { right: 0; }

/* The spotlighted element gets boosted above the overlay.
   pointer-events: auto ensures it's clickable even when surrounded. */
.wizard-spotlight {
    position: relative !important;
    z-index: 10001 !important;
    box-shadow: 0 0 0 4px var(--accent), 0 0 20px rgba(59, 130, 246, 0.3) !important;
    border-radius: 12px;
    pointer-events: auto !important;
}
/* All children of the spotlight must also be clickable */
.wizard-spotlight * {
    pointer-events: auto !important;
}

/* Tooltip positioned near the spotlighted element */
.wizard-tooltip {
    position: fixed;
    z-index: 10002;
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--accent);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    max-width: 380px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    animation: wizardFadeIn 0.25s ease;
}

@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.wizard-tooltip-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.wizard-tooltip-body {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 1rem;
}

.wizard-tooltip-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.wizard-tooltip-step {
    font-size: 0.75rem;
    color: var(--text-quaternary);
    font-weight: 500;
}

/* Overlay-owned persistent escape (2026-07-24). A force-click step's tooltip
   renders no Next/Skip until the coach performs the required click — this
   control is mounted by createOverlay() (the fn that arms the 4-panel dim
   lock) and removed by clearOverlay() (the fn that releases it), so a coach
   is never dim-locked with no way out. z-index sits above the spotlit
   element (10001) and the tooltip (10002) so it is always reachable. */
.wizard-escape-dock {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10003;
}
.wizard-escape {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--accent);
    color: var(--text-secondary, #aaa);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.wizard-escape:hover { filter: brightness(1.25); }

.wizard-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.15s ease;
}

.wizard-btn--primary {
    background: var(--accent);
    color: #fff;
}
.wizard-btn--primary:hover { background: #2563eb; }
/* Disabled primary (today: Full game with every phase stepper at 0). No
   opacity — an alpha-composited accent fill is the documented WCAG-contrast
   trap; swap to explicit muted tokens instead, same discipline as the stepper
   glyph below. `:hover` is overridden too or the accent fill returns on hover. */
.wizard-btn--primary:disabled,
.wizard-btn--primary:disabled:hover {
    background: var(--bg-hover);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.wizard-btn--ghost {
    background: transparent;
    color: var(--text-tertiary);
    border: 1px solid var(--border-subtle);
}
.wizard-btn--ghost:hover {
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.wizard-btn--link {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
}
.wizard-btn--link:hover { color: var(--text-primary); }

/* Highlighted system chips in library during guided walkthrough */
.wizard-chip-highlight {
    box-shadow: 0 0 0 3px var(--accent), 0 0 12px rgba(59, 130, 246, 0.4) !important;
    animation: wizardChipPulse 1.5s ease infinite;
}

@keyframes wizardChipPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 12px rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 0 3px var(--accent), 0 0 20px rgba(59, 130, 246, 0.6); }
}

/* Floating tooltip — positioned bottom-LEFT so it doesn't overlap the library panel on the right */
.wizard-floating-tip {
    position: fixed !important;
    bottom: 24px !important;
    left: 260px !important;
    right: auto !important;
    top: auto !important;
    max-width: 340px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    z-index: 10002;
}

/* Wizard hints inside the library detail view */
.wizard-detail-hint {
    position: relative;
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 500;
    animation: wizardFadeIn 0.25s ease;
}

.wizard-card-hint {
    margin-bottom: 0.75rem;
}

/* Drag animation cue — bouncing arrow */
.wizard-drag-cue {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0;
}

.wizard-drag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: white;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    animation: wizardDragBounce 1.5s ease infinite;
}

@keyframes wizardDragBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(16px); }
}

/* ============================================================================
   Teaching Style Survey — fullscreen modal over the planner
   ============================================================================ */

.wizard-survey-overlay {
    position: fixed;
    inset: 0;
    z-index: 10003;
    /* Strong backdrop so the Plan-My-Week sheet (incl. the Custom build after
       Continue) is the only lit thing — darken everything else to focus the coach. */
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wizardFadeIn 0.2s ease;
}

.wizard-survey {
    background: var(--bg-elevated, #1e2028);
    border: 1px solid var(--border-color, #2a2e38);
    border-radius: 16px;
    padding: 2.25rem 2.5rem 2rem;
    max-width: 680px;
    width: 92%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
}

.wizard-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-quaternary, #666);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.wizard-close-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary, rgba(255,255,255,0.06));
}

.wizard-survey-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.wizard-survey-sub {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

/* Option cards for teaching style */
.wizard-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.wizard-survey-sub + .wizard-survey-sub {
    margin-top: -0.25rem;
}

.wizard-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
    text-align: left;
    font-family: inherit;
    width: 100%;
}

.wizard-option:hover {
    border-color: var(--border-medium);
    background: rgba(255, 255, 255, 0.04);
}

.wizard-option.is-selected {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.08);
}

.wizard-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.wizard-option-text {
    flex: 1;
}

.wizard-option-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.wizard-option-desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    line-height: 1.45;
}

/* Greg whole-game framing line (teaching-style step). Accent-toned so it
   reads as a callout, not body copy. --accent is theme-aware (WCAG-safe in
   both themes); never the -bright variant. */
.wizard-option-note {
    font-size: 0.8125rem;
    color: var(--accent);
    line-height: 1.45;
    margin-top: 0.375rem;
    font-weight: 500;
}

/* Games per class selector */
.wizard-count-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.wizard-count-btn {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.wizard-count-btn:hover {
    border-color: var(--border-medium);
}

.wizard-count-btn.is-selected {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}

/* Inline number input row (time + games) */
.wizard-inline-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.wizard-num-input {
    width: 90px;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color, #2a2e38);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    outline: none;
}
.wizard-num-input:focus { border-color: var(--accent); }

.wizard-inline-label {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Live calculation display */
.wizard-game-calc {
    margin-top: 0.875rem;
    padding: 0.625rem 1rem;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 10px;
    font-size: 0.9375rem;
    color: var(--accent);
    font-weight: 600;
    text-align: center;
}

/* Quick presets row */
.wizard-quick-presets {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.wizard-preset-label {
    font-size: 0.75rem;
    color: var(--text-quaternary);
    font-weight: 500;
}

.wizard-preset-btn {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s ease;
}
.wizard-preset-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Position picker chips (for position_focus coaches) */
.wizard-position-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.wizard-position-chip {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.wizard-position-chip:hover {
    border-color: var(--border-medium);
}

.wizard-position-chip.is-selected {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}

/* Category breakdown card */
.wizard-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.wizard-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.wizard-breakdown-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

.wizard-breakdown-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wizard-breakdown-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}
.wizard-breakdown-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}
.wizard-breakdown-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.wizard-breakdown-count {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 20px;
    text-align: center;
}

/* Progress checklist (floating, inside wizard-checklist) */
.wizard-progress {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0.75rem 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.wizard-progress-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.wizard-progress-item.current {
    color: var(--accent);
    font-weight: 600;
}

.wizard-progress-item.done {
    color: #86efac;
}

.wizard-progress-icon {
    width: 18px;
    text-align: center;
    font-size: 0.875rem;
}

.wizard-checklist {
    max-width: 340px;
}

/* Sub-system toggle chips — uniform grid */
.wizard-subsystem-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
    width: 100%;
}

.wizard-subsystem-chip {
    padding: 0.4rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s ease;
    text-align: center;
}

.wizard-subsystem-hint { display: none; }
.wizard-subsystem-chip:hover {
    border-color: var(--border-medium);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
}
.wizard-subsystem-chip.is-active {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}

/* Breakdown cards */
.wizard-breakdown {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.wizard-breakdown-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 0.875rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.wizard-breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wizard-breakdown-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-quaternary);
}
.wizard-breakdown-badge.has-games {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}

.wizard-subsystem-hint {
    font-size: 0.6875rem;
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Final screen after auto-populate */
.wizard-final-info {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.wizard-final-item {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    padding-left: 1rem;
    border-left: 3px solid var(--accent);
}

.wizard-final-item strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.125rem;
}

/* ────────────────────────────────────────────────────────────────────────
   Curriculum picker (3-way per row, GrapplingU / Greg / None)
   Stripe/Linear pattern (research call, commit a1b534ba):
   - Each row is its own card with 12px radius + 1px border on white
     (over the dark wizard surface, the rows still pop as panels)
   - Selected pill = subtle blue WASH + 1px blue border, NOT a saturated
     fill (the fill makes the screen feel toy-like in a coach-facing tool)
   - Default/Changed badge on the row header right (earns its weight as a
     pill rather than floating as microcopy under the pills)
   - Pills carry brand marks (24px) so the choices read at a glance
   ──────────────────────────────────────────────────────────────────────── */
.wizard-curriculum-row {
    margin-bottom: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-medium, #3a3e48);
    border-radius: 12px;
    background: var(--bg-card-elevated, var(--bg-card, #1a1d24));
    transition: opacity 0.12s, border-color 0.12s;
}
.wizard-curriculum-row.is-none { opacity: 0.7; }
.wizard-curriculum-row:last-of-type { margin-bottom: 0.25rem; }

.wizard-curriculum-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}
.wizard-curriculum-row__namecol { min-width: 0; flex: 1; }
.wizard-curriculum-row__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wizard-curriculum-row__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.3;
}

.wizard-curriculum-row__badge {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.wizard-curriculum-row__badge.is-default {
    background: rgba(255,255,255,0.06);
    color: var(--text-tertiary);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.wizard-curriculum-row__badge.is-changed {
    background: rgba(59,130,246,0.15);
    color: var(--accent, #3b82f6);
    border: 1px solid rgba(59,130,246,0.3);
}

.wizard-curriculum-pills {
    display: flex;
    flex-wrap: wrap;        /* 4 lanes (Leave as-is/Custom/Greg week/None) wrap 2×2 on narrow screens */
    gap: 0.375rem;
    background: transparent;
}
.wizard-curriculum-pills__pill {
    flex: 1 1 auto;
    min-width: 104px;       /* forces a 2×2 wrap below ~440px instead of squishing 4 across */
    min-height: 48px;       /* generous touch target — over WCAG 2.2 AA floor */
    padding: 0.4rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid var(--border-medium, #3a3e48);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.wizard-curriculum-pills__pill:hover {
    color: var(--text-primary);
    border-color: var(--border-strong, #4a4e58);
}
.wizard-curriculum-pills__pill:focus-visible {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 1px;
    z-index: 1;
}
.wizard-curriculum-pills__pill.is-selected {
    background: rgba(59,130,246,0.12);
    border-color: var(--accent, #3b82f6);
    color: var(--text-primary);
}

.wizard-curriculum-pills__icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wizard-curriculum-pills__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
.wizard-curriculum-pills__icon--glyph {
    color: var(--text-quaternary, var(--text-tertiary));
    font-size: 1.1rem;
    font-weight: 600;
}
.wizard-curriculum-pills__pill.is-selected .wizard-curriculum-pills__icon--glyph {
    color: var(--accent, #3b82f6);
}

.wizard-curriculum-pills__label {
    line-height: 1;
}

/* Inline Greg-Foundations-week selector — shown only on greg-routed
   rows so the coach explicitly sees + picks which week auto-populates.
   Token vocabulary copied verbatim from .wizard-num-input /
   .wizard-inline-label above (no invented tokens). */
/* "Leave as-is" read-only status — Greg's drip already handles this class. Uses
   the theme-aware success token (passes WCAG in both themes; never -bright). */
.wizard-curriculum-row__asis {
    margin-top: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-success, #10b981);
    line-height: 1.4;
}
.wizard-curriculum-row__week {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
/* label + <select> stay on one line — this is the pre-existing layout,
   pulled into its own row so an optional program-pill row (above) can sit
   on its own line without squeezing onto the label's baseline. */
.wizard-curriculum-row__week-inline {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.wizard-curriculum-row__week-label {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.wizard-week-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #2a2e38);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}
.wizard-week-select:focus-visible { border-color: var(--accent); }
.wizard-week-select:disabled { opacity: 0.6; cursor: progress; }

/* GREG lane program-pill sub-row (Foundations / All Levels / Competition
   Prep / any future named program) — sits directly above the week-inline
   row (label + <select>). Smaller/quieter than the lane pills above it
   since it's a secondary, in-context choice. */
.wizard-plan-program-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.wizard-plan-program-pills__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;          /* secondary control — the primary 44px+ touch target is the lane pill above it */
    padding: 0.3rem 0.65rem;
    background: transparent;
    border: 1px solid var(--border-medium, #3a3e48);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.wizard-plan-program-pills__pill:hover {
    color: var(--text-primary);
    border-color: var(--border-strong, #4a4e58);
}
.wizard-plan-program-pills__pill:focus-visible {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 1px;
}
.wizard-plan-program-pills__pill.is-selected {
    background: rgba(59,130,246,0.12);
    border-color: var(--accent, #3b82f6);
    color: var(--text-primary);
}
/* Locked (no full Greg access) — visible + dimmed + lock icon, never
   opacity-only (opacity on a parent caps contrast below WCAG regardless of
   the source colour — see quality-checks.md). Mirrors the
   .cp-section-card--locked / [data-locked="true"] FOMO precedent in
   coach-planner-library-cards.js: shown, not hidden, non-interactive. */
.wizard-plan-program-pills__pill--locked {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-quaternary);   /* WCAG-verified "disabled" token — see variables.css */
    cursor: default;
}
.wizard-plan-program-pills__pill--locked:hover {
    color: var(--text-quaternary);
    border-color: var(--border-subtle);
}
.wizard-plan-program-pills__lock-icon {
    width: 12px;
    height: 12px;
    display: inline-flex;
    flex-shrink: 0;
    color: inherit;
}
.wizard-plan-program-pills__lock-icon svg { width: 100%; height: 100%; display: block; }
.wizard-plan-program-pills__label { line-height: 1; }

/* ---- Per-type drill-in (LOCKED design — see coach-plan-week.js file header)
   A class-group row whose classes span 2+ `cls.type` values (gi/nogi/open/
   competition) grows a caret + a small type chip; expanding renders one
   sub-row per type, each a miniature copy of the row above (own pills +
   Greg-week controls). A single-type row never renders any of this. -------- */
.pw-group-nameline { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.pw-group-caret {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s, color 0.12s;
}
.pw-group-caret:hover { color: var(--text-primary); }
.pw-group-caret:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-group-caret.is-open { transform: rotate(90deg); }

.pw-type-chip {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    white-space: nowrap;
}
.pw-type-chip--mixed {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: rgba(59,130,246,0.12);
}

.pw-type-subrow {
    margin-top: 0.75rem;
    padding: 0.75rem 0.875rem 0.5rem;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
}
.pw-type-subrow.is-none { opacity: 0.7; }
.pw-type-subrow__head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.pw-type-subrow__label { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.pw-type-subrow__meta { font-size: 0.72rem; color: var(--text-tertiary); }

/* Quiet "ghost pill" escape hatch — matches the segmented option buttons
   around it (Leave as-is / Custom / …) instead of reading as a raw blue
   hyperlink. Muted by default, brightens toward the primary text on hover. The
   ›  chevron hints "go deeper" without shouting. */
.pw-type-perclass-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.32rem 0.72rem;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
    border-radius: 999px;
    background: rgba(255,255,255,0.02);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.pw-type-perclass-link::after {
    content: '\203a'; /* › */
    font-size: 0.95em;
    line-height: 1;
    opacity: 0.7;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.pw-type-perclass-link:hover {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}
.pw-type-perclass-link:hover::after { opacity: 1; transform: translateX(1px); }
.pw-type-perclass-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pw-type-byclass-row {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border-subtle, rgba(255,255,255,0.08));
}
.pw-type-byclass-row:first-of-type { border-top: none; padding-top: 0; }
.pw-type-byclass-row__label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; }

/* Greg Auto-Drip opt-in row (greg-routed rows only). Text on the left,
   the switch on the right — matches the head-row's name/badge layout. */
.wizard-curriculum-row__drip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}
.wizard-curriculum-row__drip-text { min-width: 0; }
.wizard-curriculum-row__drip-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}
.wizard-curriculum-row__drip-help {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

/* Accessible switch: a real <input type=checkbox role=switch> visually
   hidden behind a track/thumb. Keyboard + screen-reader native. */
.wizard-switch {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    width: 44px;
    height: 26px;
    cursor: pointer;
}
.wizard-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.wizard-switch__slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--border-medium, #3a3f4b);
    transition: background 0.15s ease;
    /* Decorative (aria-hidden) — let clicks fall through to the real
       checkbox beneath, or it intercepts the toggle's pointer events. */
    pointer-events: none;
}
.wizard-switch__slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}
.wizard-switch input:checked + .wizard-switch__slider {
    background: var(--accent);
}
.wizard-switch input:checked + .wizard-switch__slider::before {
    transform: translateX(18px);
}
/* Visible focus ring for keyboard users (the input itself is transparent). */
.wizard-switch input:focus-visible + .wizard-switch__slider {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Mobile (< 480px): stack pills vertically below the head row.
   Three pills side-by-side at 320px crushes the labels — Apple HIG
   list-row pattern keeps each pill scannable. */
@media (max-width: 480px) {
    .wizard-curriculum-pills {
        flex-direction: column;
        gap: 0.4rem;
    }
    .wizard-curriculum-pills__pill {
        justify-content: flex-start;
        padding-left: 0.875rem;
        gap: 0.625rem;
    }
}

/* Student level picker */
.wizard-level-section {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    transition: opacity 0.15s;
}
.wizard-level-section:last-of-type { border-bottom: none; margin-bottom: 0.5rem; }
.wizard-level-section.is-disabled { opacity: 0.4; }

.wizard-level-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.wizard-level-name-col { flex: 1; }

.wizard-level-toggle {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid var(--border-medium, #3a3e48);
    background: transparent;
    color: transparent;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
}
.wizard-level-toggle.is-on {
    border-color: var(--accent, #3b82f6);
    background: var(--accent, #3b82f6);
    color: #fff;
}
.wizard-level-toggle:hover {
    border-color: var(--accent, #3b82f6);
}

.wizard-level-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.wizard-level-days {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-bottom: 0;
}

.wizard-level-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.375rem;
    padding: 0 0.25rem;
}

.wizard-level-btns {
    display: flex;
    gap: 0.25rem;
}

.wizard-level-btn {
    flex: 1;
    height: 36px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s ease;
}
.wizard-level-btn:hover {
    border-color: var(--border-medium);
    color: var(--text-secondary);
}
.wizard-level-btn.is-selected {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent);
}

/* Game count row — +/- stepper */
.wizard-game-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    background: var(--bg-tertiary, rgba(255,255,255,0.04));
    border-radius: 10px;
}
.wizard-game-count-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}
.wizard-game-count-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.wizard-count-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-medium, #3a3e48);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wizard-count-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(59, 130, 246, 0.08);
}
.wizard-count-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent, #3b82f6);
    min-width: 1.5rem;
    text-align: center;
}

/* Per-sub-system stepper rows */
.wizard-sub-steppers {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.5rem;
}
.wizard-sub-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    background: transparent;
    transition: background 0.15s;
}
.wizard-sub-stepper.is-active {
    background: rgba(59, 130, 246, 0.06);
}
.wizard-sub-stepper-label {
    font-size: 0.8125rem;
    color: var(--text-secondary, #bbb);
}
.wizard-sub-stepper.is-active .wizard-sub-stepper-label {
    color: var(--text-primary);
    font-weight: 500;
}
.wizard-sub-stepper-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wizard-sub-stepper-value {
    min-width: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-quaternary, #666);
}
.wizard-sub-stepper-value.has-value {
    color: var(--accent, #3b82f6);
}
.wizard-count-btn--small {
    width: 26px;
    height: 26px;
    font-size: 0.875rem;
    border-radius: 6px;
}

/* Survey actions */
.wizard-survey-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

/* ============================================================================
   Auto-populate prompt
   ============================================================================ */

.wizard-populate-overlay {
    position: fixed;
    inset: 0;
    z-index: 10003;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wizardFadeIn 0.2s ease;
}

.wizard-populate-card {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--accent);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 16px 48px rgba(59, 130, 246, 0.15);
    text-align: center;
}

.wizard-populate-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.wizard-populate-body {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

.wizard-populate-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

/* =========================================================================
   "Plan my week" diagnostic flow (coach-plan-week.js)
   Reuses the wizard shell (.wizard-survey*, .wizard-curriculum*, .wizard-btn*)
   and adds the scope / question / results pieces below. Tokens only.
   ========================================================================= */

/* Scope screen — which Custom groups share one set */
.pw-scope-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.pw-scope-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0.9rem; border: 1px solid var(--border-subtle);
    border-radius: 10px; background: var(--bg-card); cursor: pointer;
}
.pw-scope-check { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.pw-scope-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.pw-scope-name { font-weight: 600; color: var(--text-primary); }
.pw-scope-meta { font-size: 0.8rem; color: var(--text-secondary); }

/* Question option buttons (mode / bucket / invariant) */
.pw-opt {
    display: block; width: 100%; text-align: left;
    padding: 0.85rem 1rem; margin-top: 0.5rem; border-radius: 10px;
}
.pw-opt__head { display: flex; align-items: center; gap: 0.5rem; }
.pw-opt__title { font-weight: 600; color: var(--text-primary); }
.pw-opt__tag {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-on-accent); background: var(--accent);
    padding: 0.12rem 0.45rem; border-radius: 999px;
}
.pw-opt__help { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.2rem; }
/* Selected option (select-then-Next; multi-select barriers). */
.pw-opt.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
/* A pointer click leaves the option button :focus'd, and reset.css's global
   `button:focus { outline: 2px solid }` then rings it identically to .is-selected
   — so a just-deselected option still LOOKS selected. Suppress the ring on
   pointer focus; keep it for keyboard users via :focus-visible (WCAG 2.4.7). */
.pw-opt:focus { outline: none; }
.pw-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-multi-hint { font-size: 0.82rem; color: var(--text-secondary); margin: 0.25rem 0 0.35rem; }
/* Bucket-step async states. The taxonomy is fetched on open(); a coach can
   reach "Which position?" before it lands, so that step renders a loading
   line and (on failure) a retryable error instead of an empty, unadvanceable
   list. --text-secondary / --accent-danger are both theme-aware and clear AA
   in light and dark. */
.pw-loading { font-size: 0.9rem; color: var(--text-secondary); margin: 0.75rem 0; }
/* Replace cleanup notice. The modal is held open on this while the old games
   are deleted, so the coach never lands on the planner mid-swap and watches
   each class's game count sit inflated then drop. */
.pw-finishing { font-size: 0.9rem; color: var(--text-secondary); margin: 0.75rem 0; }
.pw-error { font-size: 0.9rem; color: var(--accent-danger); margin: 0.75rem 0; line-height: 1.4; }

/* Optional note */
.pw-note {
    width: 100%; min-height: 84px; margin-top: 0.5rem; resize: vertical;
    padding: 0.7rem 0.85rem; border: 1px solid var(--border-subtle);
    border-radius: 10px; background: var(--bg-card); color: var(--text-primary);
    font: inherit;
}
.pw-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Compact, secondary "say more" box shown on every question step. */
.pw-note--inline { min-height: 46px; margin-top: 0.85rem; font-size: 0.9rem; border-style: dashed; }

/* Results — hero + alternates */
.pw-results { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.pw-game {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.85rem 0.9rem; border: 1px solid var(--border-subtle);
    border-radius: 10px; background: var(--bg-card); cursor: pointer;
}
.pw-game--hero { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pw-game__check { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; margin-top: 0.1rem; cursor: pointer; }
.pw-game__body { min-width: 0; }
.pw-game__namerow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pw-game__name { font-weight: 600; color: var(--text-primary); }
.pw-game__badge {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-on-accent); background: var(--accent);
    padding: 0.1rem 0.4rem; border-radius: 999px;
}
.pw-game__meta { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.15rem; }
.pw-game__wc { font-size: 0.85rem; color: var(--text-primary); margin-top: 0.25rem; }
.pw-game__wc-lbl { color: var(--text-tertiary, var(--text-secondary)); font-weight: 600; }
/* Continuous / Terminal win-type pill next to a win condition */
.pw-game__wc-type { display: inline-block; margin-left: 0.45rem; vertical-align: middle;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0.08rem 0.45rem; border-radius: 999px; border: 1px solid var(--border-subtle);
    color: var(--text-secondary); }
.pw-game__wc-type--continuous { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pw-game__wc-type--terminal { color: var(--accent-success); border-color: color-mix(in srgb, var(--accent-success) 45%, transparent); }
.pw-game__video { margin-top: 0.45rem; }
/* Inline video preview — the player's .cg-video-stage is width/height:100% with
   NO aspect of its own, so the CONTAINER must carry aspect-ratio:16/9 (like
   .lib-video-container) or the iframe renders a wrong aspect → side black bars.
   Capped width so the stage isn't full-modal-huge. */
.pw-game__player { margin: 0.5rem auto 0; max-width: 460px; aspect-ratio: 16 / 9; overflow: hidden; position: relative;
    border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
/* Week divider in a multi-week full-game block */
.pw-week__banner { font-weight: 700; font-size: 0.95rem; color: var(--text-primary);
    margin: 1rem 0 0.35rem; padding-top: 0.6rem; border-top: 1px solid var(--border-subtle); }
.pw-week__banner:first-child { border-top: none; padding-top: 0; margin-top: 0.25rem; }
/* Week tabs (multi-week block) — switch weeks instead of scrolling */
.pw-weektabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 0.75rem; }
.pw-weektab { font: inherit; font-size: 0.85rem; padding: 0.35rem 0.85rem; border-radius: 999px;
    border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.pw-weektab:hover { border-color: var(--accent); }
.pw-weektab.is-on { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
/* Gym-level drip-day picker (which weekday new Greg weeks land) */
/* ── Plan-my-week settings cluster ──────────────────────────────────────────
   The three planning controls live in ONE recessed/tinted panel so they read as
   "setup" distinct from the actionable class cards below (no hard border — a
   subtle surface tint + the 8/16/24/32 spacing ladder do the grouping).
   Research 2026-06-19: M3 layout, Polaris space tokens, Apple HIG segmented. */
.pw-settings {
    display: flex; flex-direction: column; gap: 1rem;        /* 16px between fields */
    margin: 0 0 2rem;                                         /* 32px → class cards */
    padding: 1rem;                                            /* 16px inset */
    border-radius: 12px;
    background: var(--bg-elevated, rgba(255,255,255,0.03));   /* ~3% tint, no border */
}
.pw-field { display: flex; flex-direction: column; gap: 0.5rem; }   /* 8px label→control */
.pw-field__label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
/* drip-day field: label + select on one line, matched height, label can shrink */
.pw-field--inline { flex-direction: row; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pw-field--inline .pw-field__label { flex: 0 1 auto; }
.pw-dripday__label { font-size: 0.85rem; color: var(--text-secondary); }
.pw-dripday__select { flex: 0 1 auto; }   /* visual style shared below with .pw-weekpick__weeksel */
/* Replace-or-Add confirm (when target classes already have games) */
.pw-confirm-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0 0.25rem; }
.pw-confirm-btn { flex: 1 1 auto; min-width: 140px; }
/* Destructive "Replace" — red TEXT/border (not a red fill, which fails WCAG on
   white text); fills red only on hover/focus where the contrast is transient. */
.pw-confirm-btn--danger { color: var(--accent-danger, #ef4444); border-color: var(--accent-danger, #ef4444); }
.pw-confirm-btn--danger:hover,
.pw-confirm-btn--danger:focus-visible { background: var(--accent-danger, #ef4444); color: #fff; }
/* Plan-for-week segmented control — equal-width segments on one row, no outer
   margin (the .pw-field gap owns the spacing now). */
.pw-weekpick { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.pw-weekpick__btn { flex: 1 1 0; min-width: 96px; font: inherit; font-size: 0.88rem; font-weight: 600;
    min-height: 40px; padding: 0.45rem 0.55rem; white-space: nowrap;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
    border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-card);
    color: var(--text-secondary); cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease; }
.pw-weekpick__btn:hover { border-color: var(--accent); color: var(--text-primary); }
.pw-weekpick__btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
/* Stacked label: "This week" / date range / Greg week chip */
.pw-weekpick__lbl { font-weight: 700; }
.pw-weekpick__dates { font-size: 0.78rem; font-weight: 600; opacity: 1; }
.pw-weekpick__btn:not(.is-on) .pw-weekpick__dates { color: var(--text-tertiary, var(--text-secondary)); }
.pw-weekpick__greg { font-size: 0.72rem; font-weight: 700; letter-spacing: .01em;
    padding: 0.05rem 0.4rem; border-radius: 999px; margin-top: 0.1rem;
    background: var(--accent-subtle, rgba(37,99,235,.12)); color: var(--accent); }
.pw-weekpick__btn.is-on .pw-weekpick__greg { background: rgba(255,255,255,.22); color: var(--text-on-accent); }
/* "Pick a week" escape hatch — its own full-width row BELOW the two segments
   (never inline a differently-shaped control into the segment group — Apple HIG).
   A quiet inline label + full-width dropdown, no competing box. */
.pw-weekpick__pick { display: flex; align-items: center; gap: 0.5rem; margin: 0; flex-wrap: wrap; }
.pw-weekpick__pick-lbl { font-size: 0.8125rem; color: var(--text-tertiary, var(--text-secondary)); flex: 0 0 auto; }
/* App-consistent dropdown style shared by the "pick a week" + drip-day selects:
   custom chevron (no raw OS arrow), rounded, accent hover/focus — matches the
   .pw-weekpick__btn segments above. */
.pw-weekpick__weeksel,
.pw-dripday__select {
    appearance: none; -webkit-appearance: none;
    font: inherit; font-size: 0.85rem; font-weight: 600;
    min-height: 40px; padding: 0.4rem 2.1rem 0.4rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background-color: var(--bg-card); color: var(--text-primary); cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 0.9rem;
    transition: border-color .12s ease, background-color .12s ease;
}
.pw-weekpick__weeksel { flex: 1 1 180px; }
.pw-weekpick__weeksel:hover,
.pw-dripday__select:hover { border-color: var(--accent); }
.pw-weekpick__weeksel:focus-visible,
.pw-dripday__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.pw-weekpick__weeksel option,
.pw-dripday__select option { background: var(--bg-elevated, #1e2028); color: var(--text-primary); }
/* Consecutive-block hint under "Plan how many weeks" (sits inside the field, 8px below) */
.pw-weekrow__hint { font-size: 0.8125rem; color: var(--text-secondary); margin: 0; line-height: 1.45; }
/* Free-tier: multi-week locked (clickable → upgrade). Muted + dashed, not opacity. */
.pw-weekpick__btn.is-locked { color: var(--text-tertiary, var(--text-secondary)); border-style: dashed; }
.pw-weekpick__btn.is-locked:hover { border-color: var(--accent); color: var(--text-secondary); }
.pw-weekpick__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Spinner */
.pw-spinner {
    width: 28px; height: 28px; margin: 1.5rem auto; border-radius: 50%;
    border: 3px solid var(--border-subtle); border-top-color: var(--accent);
    animation: pw-spin 0.8s linear infinite;
}
@keyframes pw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pw-spinner { animation-duration: 2s; } }

/* Block review (coach-plan-week.js block path) — weeks + new/callback tags */
.pw-week { margin-top: 1rem; }
.pw-week__head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.pw-week__num { font-weight: 700; color: var(--text-primary); }
.pw-week__inv { font-size: 0.9rem; color: var(--text-secondary); }
.pw-game--callback { border-style: dashed; }
.pw-game__tag {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem; border-radius: 999px; white-space: nowrap;
}
.pw-tag--new { color: var(--text-on-accent); background: var(--accent); }
.pw-tag--callback { color: var(--text-secondary); background: var(--bg-elevated, var(--bg-card)); border: 1px solid var(--border-subtle); }

/* ---- Plan-my-week: inline-editable result fields ------------------------- */
/* The win-condition / focus / rules / name values read EXACTLY like the old
   read-only card — no box, no fill, no focus ring. Clicking just drops a text
   caret (editing in place); a faint underline-on-hover is the only affordance. */
.pw-game__wc-val,
.pw-game__name--edit {
    outline: none;
    cursor: text;
    transition: box-shadow 0.12s ease;
}
.pw-game__wc-val { display: inline; }
.pw-game__name--edit { font-weight: 600; color: var(--text-primary); }
.pw-game__wc-val:hover,
.pw-game__name--edit:hover {
    box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--text-secondary) 45%, transparent);
}
/* On focus: caret only — no fill, no ring (matches the original read-only look). */
.pw-game__wc-val:focus,
.pw-game__name--edit:focus { box-shadow: none; }
.pw-game__wc-val[data-empty]::before {
    content: '+ add';
    color: var(--text-tertiary, var(--text-secondary));
    font-style: italic;
}

/* "Keep video" toggle on an edited course game. */
.pw-game__keepvid {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer;
}
.pw-game__keepvid input { accent-color: var(--accent); width: 1rem; height: 1rem; }

/* ---- Plan-my-week: per-game side-arrow carousel ------------------------- */
/* A clean card flanked by ‹ › arrows; whatever option is showing is the pick. */
.pw-carousel { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.7rem; }
.pw-slot__card {
    flex: 1 1 auto; min-width: 0;
    border: 1px solid var(--border-subtle); border-radius: 10px;
    background: var(--bg-elevated, var(--bg-card)); padding: 0.7rem 0.85rem;
}
.pw-slot__arrow {
    flex: 0 0 auto;
    appearance: none; border: 1px solid var(--border-subtle); background: var(--bg-card);
    color: var(--accent); font-size: 1.25rem; line-height: 1; font-weight: 700;
    width: 2.1rem; height: 2.1rem; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.pw-slot__arrow:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.pw-slot__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-slot__arrow.is-hidden { visibility: hidden; }
.pw-phase-empty { font-size: 0.85rem; color: var(--text-secondary); font-style: italic; padding: 0.3rem 0 0.5rem; }

/* Plan-my-week modal is wider than the generic wizard so the side-by-side video
   has real room (the lane picker / question screens just centre in the extra). */
.wizard-survey.pw-survey { max-width: 940px; }

/* Two-column card body: editable fields LEFT, video BESIDE on the right. */
.pw-card__cols { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-top: 0.15rem; }
.pw-card__text { flex: 1 1 260px; min-width: 0; }
.pw-card__media { flex: 0 0 auto; width: 360px; max-width: 100%; }
.pw-card__media:empty { display: none; }   /* no video → text column takes full width */

/* Editable Continuous/Terminal toggle — a clickable pill set off to the right of
   the win condition with breathing room (own line, top margin). */
button.pw-game__wc-type {
    display: flex; align-items: center; gap: 0.3rem; width: fit-content;
    margin: 0.4rem 0 0.1rem auto;   /* margin-left:auto → sits to the right */
    appearance: none; cursor: pointer; background: transparent;
}
button.pw-game__wc-type::before { content: '⇄'; font-size: 0.85em; opacity: 0.75; }
button.pw-game__wc-type:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

/* Mode-screen "games per class" count stepper (renderMode / countStepper in
   coach-plan-week.js). Sits INSIDE the .pw-opt option card, below the
   clickable "choose" area — visually part of the card, but a tap on the
   stepper must never advance the wizard (the JS handlers stopPropagation +
   preventDefault; this block is pure presentation). */
.pw-opt__choose {
    cursor: pointer;
    border-radius: 8px;
}
.pw-opt__choose:focus { outline: none; }
.pw-opt__choose:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-opt__count {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-top: 0.75rem; padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}
.pw-opt__count-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.pw-opt__stepper { display: inline-flex; align-items: center; gap: 0.6rem; }
.pw-opt__count-value {
    min-width: 1.4rem; text-align: center;
    font-size: 0.9rem; font-weight: 700; color: var(--text-primary);
}
.pw-opt-stepper-btn {
    width: 1.9rem; height: 1.9rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700; line-height: 1;
    background: transparent; color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pw-opt-stepper-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: var(--accent);
}
/* No opacity on the disabled glyph (WCAG contrast trap) — swap to explicit
   muted tokens instead; disabled controls are exempt from SC 1.4.3 but the
   codebase avoids opacity-on-text as a house rule regardless. */
.pw-opt-stepper-btn:disabled { color: var(--text-tertiary); border-color: var(--border-subtle); cursor: not-allowed; background: transparent; }
/* Same reset.css button:focus footgun as .pw-opt / the row-action kebab —
   suppress the ring on pointer focus, keep it for keyboard (WCAG 2.4.7). */
.pw-opt-stepper-btn:focus { outline: none; }
.pw-opt-stepper-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.pw-game__wc-type:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Plan-my-week mode screen — reveal-on-select (State B) --------------
   renderModeDetail (coach-plan-week.js) shows the chosen mode's counter
   panel: full game = one .pw-phasecount row per phase (Standing / Passing &
   Guard / Pins), position = a single "Games" row. Reuses the existing
   .pw-opt__stepper / .pw-opt-stepper-btn / .pw-opt__count-value stepper
   controls (defined above) — only the row/label wrapper is new. */
.pw-phasecounts { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.75rem 0 0.25rem; }
.pw-phasecount {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.65rem 0.85rem; border-radius: 10px;
    border: 1px solid var(--border-subtle); background: var(--bg-card);
}
.pw-phasecount__label { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }