/* ============================================================================
   Coach Profile Editor — edit-mode-only styles
   Complements coach-profile.css and coach-profile-gato.css
   ============================================================================ */

/* ---- Publish bar ---- */
.cp-publish-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
}
.cp-publish-bar--active {
    border-color: rgba(59, 130, 246, 0.3);
}
.cp-publish-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.cp-publish-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.cp-publish-bar--active .cp-publish-label {
    color: var(--accent);
}
.cp-publish-sub {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}

/* ---- Brand bar (storefront customization) ---- */
.cp-brand-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}
.cp-brand-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 0 0 auto;
}
.cp-brand-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.cp-brand-sub {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}
.cp-brand-controls {
    display: flex;
    gap: 0.875rem;
    align-items: flex-end;
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: flex-end;
}
.cp-brand-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.cp-brand-field-label {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    font-weight: 500;
}
.cp-brand-field input[type="color"] {
    width: 48px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.cp-brand-text-input {
    width: 220px;
    height: 32px;
    padding: 0 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-elevated, #14141a);
    color: var(--text-primary, #f5f5f5);
    font-size: 0.8125rem;
    font-family: inherit;
}
.cp-brand-text-input:focus {
    outline: none;
    border-color: var(--accent);
}
.cp-brand-preview {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}
.cp-brand-preview-label {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    font-weight: 500;
}
.cp-brand-preview-btn {
    padding: 0.5rem 0.875rem;
    border: 0;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: default;
    background: #3b82f6;
    color: #fff;
    transition: background 0.15s, color 0.15s;
}

/* Toggle switch — matches coach-automations pattern */
.cp-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.cp-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.cp-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-elevated, #1e293b);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    transition: all 0.2s ease-out;
}
.cp-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--text-secondary, #94a3b8);
    border-radius: 50%;
    transition: all 0.2s ease-out;
}
.cp-toggle input:checked + .cp-toggle-slider {
    background: var(--accent);
    border-color: var(--accent);
}
.cp-toggle input:checked + .cp-toggle-slider::before {
    transform: translateX(20px);
    background: white;
}

/* ---- Loading ---- */
.cp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-tertiary);
}
.cp-loading-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: cp-spin 0.8s linear infinite;
    margin-bottom: 1rem;
}
@keyframes cp-spin {
    to { transform: rotate(360deg); }
}
.cp-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-tertiary);
}

/* ---- Edit buttons (visible in owner mode) ---- */
[data-cp-owner="true"] .cp-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-hover);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
[data-cp-owner="true"] .cp-edit-btn:hover {
    background: var(--bg-card);
    color: var(--accent);
}
[data-cp-owner="true"] .cp-edit-btn svg {
    width: 14px;
    height: 14px;
}

/* Bio wrap — clickable card for editing */
.cp-bio-wrap {
    margin-top: 0.75rem;
    position: relative;
}
.cp-bio-wrap .cp-bio {
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}
.cp-bio-wrap .cp-bio:hover {
    border-color: var(--border-medium);
    background: var(--bg-hover);
}
.cp-bio-wrap .cp-bio--empty {
    color: var(--text-tertiary);
    border: 1px dashed var(--border-subtle);
    font-style: italic;
}
.cp-bio-wrap .cp-edit-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* ---- Editable chips ---- */
.cp-chip--editable {
    position: relative;
    padding-right: 1.75rem;
}
.cp-chip-remove {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.cp-chip-remove:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}
.cp-chip--placeholder {
    color: var(--text-tertiary);
    border-style: dashed;
    background: transparent;
}

/* ---- Credential add button ---- */
.cp-cred--add {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem;
    border: 1px dashed var(--border-subtle);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.cp-cred--add:hover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.04);
}

/* ---- Placeholder cards ---- */
.cp-card--placeholder {
    border-style: dashed;
    opacity: 0.7;
    cursor: default;
}
.cp-card--placeholder .cp-card-icon {
    opacity: 0.5;
}
.cp-card--placeholder .cp-card-title {
    color: var(--text-secondary);
}
.cp-bundle--placeholder {
    border-style: dashed;
    opacity: 0.7;
}
.cp-bundle__cta {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent);
}

/* ---- Modal ---- */
.cp-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-modal, rgba(0, 0, 0, 0.7));
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.cp-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.cp-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}
.cp-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}
.cp-modal-close {
    border: none;
    background: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
}
.cp-modal-body {
    padding: 1.5rem;
}
.cp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-subtle);
}

/* Modal form elements */
.cp-modal-textarea {
    width: 100%;
    min-height: 160px;
    padding: 0.75rem;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: vertical;
    background: var(--bg-base);
    color: var(--text-primary);
}
.cp-modal-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.cp-modal-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    background: var(--bg-base);
    color: var(--text-primary);
}
.cp-modal-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.cp-modal-field {
    margin-bottom: 1rem;
}
.cp-modal-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.cp-modal-field--row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Credential rows in modal */
.cp-modal-cred-row {
    display: grid;
    grid-template-columns: 1fr 2fr 32px;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}
.cp-modal-remove-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 6px;
    cursor: pointer;
    color: #dc2626;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-modal-remove-btn:hover {
    background: rgba(239, 68, 68, 0.15);
}
.cp-modal-add-btn {
    border: none;
    background: none;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0;
}
.cp-modal-add-btn:hover {
    text-decoration: underline;
}

/* Modal buttons */
.cp-modal-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.cp-modal-btn--cancel {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.cp-modal-btn--cancel:hover {
    background: var(--bg-card);
}
.cp-modal-btn--save {
    background: var(--accent);
    color: white;
}
.cp-modal-btn--save:hover {
    opacity: 0.9;
}

/* ---- Photo upload area ---- */
.cp-photo-upload {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 2px dashed var(--border-medium);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
    position: relative;
    background: var(--bg-card);
}
.cp-photo-upload:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}
.cp-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.cp-photo-upload:has(.cp-photo-preview[style*="display: none"]) {
    /* placeholder visible */
}
.cp-photo-upload:has(.cp-photo-preview:not([style*="display: none"])) {
    border-style: solid;
    border-color: var(--border-subtle);
}
.cp-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-tertiary);
}
.cp-photo-placeholder svg {
    width: 24px;
    height: 24px;
}
.cp-photo-placeholder span {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cp-photo-uploading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}


/* ── Video Library ──────────────────────────────────────────────────── */

.cp-card--clickable {
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.cp-card--clickable:hover {
    border-color: var(--accent-primary, #3b82f6);
    transform: translateY(-1px);
}

.cp-video-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-subtle, #e4e4e7);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.cp-video-card:hover {
    border-color: var(--border-default, #d4d4d8);
}

.cp-video-thumb {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: #18181b;
    position: relative;
}
.cp-video-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
}
.cp-video-thumb--placeholder svg {
    width: 40px;
    height: 40px;
}

.cp-video-meta {
    padding: 0.75rem 0.875rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cp-video-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.cp-video-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary, #1a1a1a);
    word-break: break-word;
    flex: 1 1 auto;
}

.cp-video-action {
    background: transparent;
    border: 0;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-tertiary, #a1a1aa);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.cp-video-action:hover {
    background: var(--surface-subtle, #f4f4f5);
    color: var(--text-error, #dc2626);
}
.cp-video-action svg {
    width: 16px;
    height: 16px;
}

.cp-video-sub {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary, #71717a);
}

.cp-video-duration {
    font-variant-numeric: tabular-nums;
}

.cp-video-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--surface-subtle, #f4f4f5);
    color: var(--text-secondary, #52525b);
}
.cp-video-pill--uploading {
    background: #dbeafe;
    color: #1e40af;
}
.cp-video-pill--processing {
    background: #fef3c7;
    color: #92400e;
}
.cp-video-pill--ready {
    background: #dcfce7;
    color: #166534;
}
.cp-video-pill--failed {
    background: #fee2e2;
    color: #991b1b;
}
/* Slice 3 batch upload: synthetic 'queued' card waiting for a concurrency
   slot. Visually neutral — not as eye-catching as a live upload so the
   creator's attention stays on the rows that are actually moving. */
.cp-video-pill--queued {
    background: #f4f4f5;
    color: #71717a;
}

/* Drag-and-drop highlight on the video library grid. The whole card grid
   is the drop target (Thinkific/Kajabi/YouTube pattern — the content area
   the creator is already looking at, not a separate overlay). */
.cp-grid--dragover {
    outline: 2px dashed var(--accent, #2563eb);
    outline-offset: -4px;
    background: rgba(37, 99, 235, 0.04);
    border-radius: 12px;
}

/* Edit button (next to delete) on video cards */
.cp-video-action--danger:hover {
    color: var(--text-error, #dc2626);
    background: var(--surface-subtle, #f4f4f5);
}

/* Visibility pills (shown on `ready` cards next to status pill) */
.cp-video-pill--draft {
    background: #f4f4f5;
    color: #52525b;
}
.cp-video-pill--published {
    background: #e0e7ff;
    color: #3730a3;
}

/* Edit-modal radio group for visibility */
.cp-visibility-radios {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.cp-radio-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-subtle, #e4e4e7);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.4;
}
.cp-radio-row:has(input:checked) {
    border-color: var(--accent-primary, #2563eb);
    background: var(--surface-subtle-hover, #f8fafc);
}
.cp-radio-row input[type="radio"] {
    margin-top: 0.125rem;
    flex-shrink: 0;
}


/* Courses (paid packages) styles moved to coach-profile-edit-courses.css */

/* ── Payouts (Stripe Express) ───────────────────────────────────────────── */

.cp-payouts {
    margin-top: 40px;
}

.cp-payouts-card {
    background: var(--bg-elevated, #1a1a1a);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 12px;
    padding: 24px;
}

.cp-payouts-state {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cp-payouts-state--loading {
    color: var(--text-tertiary, #777);
    font-size: 0.95rem;
}

.cp-payouts-body h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    color: var(--text-primary, #fff);
}

.cp-payouts-body p {
    margin: 0 0 8px;
    color: var(--text-secondary, #ccc);
    font-size: 0.95rem;
    line-height: 1.5;
}

.cp-payouts-bullets {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--text-secondary, #ccc);
    font-size: 0.92rem;
    line-height: 1.6;
}

.cp-payouts-badge {
    display: inline-block;
    background: var(--accent-success, #22c55e);
    color: #000;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-left: 8px;
    vertical-align: middle;
}

.cp-payouts-state--error {
    color: var(--text-error, #ef4444);
}

.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    align-self: flex-start;
}

.cp-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cp-btn--primary {
    background: var(--accent, #3b82f6);
    color: #fff;
}

.cp-btn--primary:hover:not(:disabled) {
    filter: brightness(1.1);
}

.cp-btn--secondary {
    background: transparent;
    color: var(--text-primary, #fff);
    border-color: var(--border, #2a2a2a);
}

.cp-btn--secondary:hover:not(:disabled) {
    border-color: var(--accent, #3b82f6);
}

/* ── Slice 4: + New Week CTA + week-grouped LEFT pane ─────────────────── */

/* Slice 4c — defensive box-sizing on EVERY Slice 4 element. Without this,
   the chip button (width:100% + padding) overflows its overflow:hidden
   parent and the LEFT edge (chevron + "Week ") gets clipped → user sees
   "20 9" instead of "▸ Week 20 [9]". */
.cp-course-detail-week-actions,
.cp-course-detail-week-actions button,
.cp-course-detail-week-groups,
.cp-course-detail-week-group,
.cp-course-detail-week-group-head,
.cp-course-detail-week-group-head *,
.cp-course-detail-week-group-label,
.cp-course-detail-week-group-count,
.cp-week-caret {
    box-sizing: border-box;
}

/* Action bar: + New Week + Expand-all toggle (Slice 4b) */
.cp-course-detail-week-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Sticky toolbar — the left pane (.cp-course-detail-pane-left) is the
       scroll container, so '+ New Week' / Expand-all follow the coach down the
       30-week list. Negative margins cover the pane's 0.5rem/0.75rem padding so
       the bar spans full width and pins flush; solid bg hides content beneath. */
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -0.75rem;          /* span the pane's side padding for a full-width bar */
    padding: 12px 16px;
    background: var(--bg-elevated, #15161a);
    border-bottom: 1px solid var(--border-subtle);
}
.cp-new-week-cta {
    flex: 1;
    padding: 10px 14px;
    background: var(--accent, #2563eb);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.cp-new-week-cta:hover {
    filter: brightness(1.08);
}
.cp-week-expand-toggle {
    padding: 9px 12px;
    background: transparent;
    color: var(--text-secondary, #a1a1aa);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 8px;
    font-size: 0.8125rem;
    cursor: pointer;
}
.cp-week-expand-toggle:hover {
    border-color: var(--accent, #2563eb);
    color: var(--text-primary, #fff);
}

.cp-course-detail-week-groups {
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;  /* tight gap when collapsed — 25 chips scroll cleanly */
}
.cp-course-detail-week-group {
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface, #0a0a0a);
}
.cp-course-detail-week-group--open {
    background: var(--surface-subtle, #1a1a1a);
}

/* Header is now a button (whole row clickable) — Slice 4b */
.cp-course-detail-week-group-head {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;       /* density bump — substantial, scannable rows */
    background: transparent;
    border: 0;
    color: var(--text-primary, #fff);
    font-weight: 600;
    font-size: 0.9375rem;     /* 15px — was 14px */
    text-align: left;
    cursor: pointer;
}
.cp-course-detail-week-group-head:hover {
    background: var(--surface-subtle, #1a1a1a);
}
.cp-course-detail-week-group--open .cp-course-detail-week-group-head:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Head row = toggle button + sibling rename affordance (2026-06-01). The
   rename ✎ reuses .cp-section-rename-* styling (coach-profile.css, scoped to
   body.coach-profile-page — which the editor body carries). flex-wrap lets the
   inline edit input drop to a second line on a narrow pane. */
.cp-course-detail-week-group-headrow {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cp-course-detail-week-group-headrow .cp-course-detail-week-group-head {
    flex: 1 1 auto;    /* fills remaining space; title truncates via ellipsis */
    width: auto;       /* override the standalone width:100% inside the flex row */
    min-width: 0;
}
.cp-course-detail-week-group__rename {
    flex: 0 0 auto;    /* fixed slot at the right — never wraps below the title */
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
}
.cp-course-detail-week-group__rename .cp-section-rename-input {
    flex: 1 1 160px;
}

/* Course-detail takeover (weeks + library split) uses the FULL main width.
   The 1040px cap on body.coach-profile-page .ds-main (coach-profile.css) is
   for the normal profile forms — comfortable reading width. The two-pane
   editor needs room, so when #courseDetailView is open, lift the cap. Scoped
   via :has() so the normal profile/form views keep the 1040px column. */
body.coach-profile-page:has(#courseDetailView:not([hidden])) .ds-main {
    max-width: none;
}

/* Return-flash: when the coach hits Back from the course editor, briefly ring
   the course card they drilled in from so "where was I?" is answered instantly
   (paired with scroll restoration in coach-profile-edit-course-detail.js). */
@keyframes cpCourseReturnFlash {
    0%   { box-shadow: 0 0 0 2px var(--accent, #2563eb); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.cp-course-card--return-flash {
    animation: cpCourseReturnFlash 1.5s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .cp-course-card--return-flash { animation: none; }
}

.cp-course-detail-week-group-label {
    flex: 1 1 auto;
    min-width: 0;  /* allow truncation in narrow panes */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #fff);
}
.cp-course-detail-week-group-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-secondary, #71717a);
    font-weight: 500;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

/* Slice 4c: Unicode caret (▸) — rotates 90° when expanded. Replaced the
   SVG version after Slice 4b's prod render showed the SVG vanishing
   inside the button (UA / parent CSS suppression). Unicode is bulletproof. */
.cp-week-caret {
    flex-shrink: 0;
    display: inline-block;
    width: 14px;
    text-align: center;
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.875rem;
    line-height: 1;
    transition: transform 0.15s ease;
}
.cp-course-detail-week-group--open .cp-week-caret {
    transform: rotate(90deg);
}

.cp-course-detail-week-group .cp-course-detail-levels {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border, #2a2a2a);
}

/* Slice 4d — narrow LEFT pane fix for week-grouped mode. The level row
   crams 7 elements (grip + # + title + meta + Change-video btn + edit +
   ×) into ~300px → the TITLE gets squeezed to "C..." / "G..." (the user's
   load-bearing complaint). Within week groups ONLY, hide the noisy meta
   cluster + collapse the video button to icon-only so the title gets
   the lion's share of horizontal space. Full detail (discipline / video
   pills / Change-video CTA at full size) is still accessible by tapping
   the title → opens the level's detail view in the right pane. */
.cp-course-detail-week-group .cp-course-level-meta {
    display: none;
}
.cp-course-detail-week-group .cp-course-level-video-btn {
    /* Hide the "Change video" / "Upload video" text via font-size:0 —
       button stays clickable but compact. The ::before glyph below
       carries the visual affordance. */
    font-size: 0;
    padding: 4px;
    width: 28px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cp-course-detail-week-group .cp-course-level-video-btn::before {
    content: '\1F4CE';  /* 📎 paperclip — same hint as the popover */
    font-size: 0.875rem;
}
/* Title becomes the dominant element — min-width:0 so it can shrink
   gracefully and let the actions stay full-size; flex 1 0 100% so it
   takes ALL remaining space (was 1 1 auto which let actions hog
   non-shrinkable width). */
.cp-course-detail-week-group .cp-course-level-title {
    min-width: 0;
    flex: 1 1 0;
}

/* ── Slice 4: + New Week MODAL ────────────────────────────────────────── */

.cp-new-week-overlay {
    /* Reuses .cp-modal-overlay base styles for backdrop */
    z-index: 1300;  /* above the regular course-detail modal */
}
.cp-new-week-modal {
    max-width: 720px;
    width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.cp-new-week-modal .cp-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 16px 24px;
}
.cp-new-week-row {
    margin-bottom: 16px;
}
.cp-new-week-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #a1a1aa);
}
.cp-new-week-row input[type="number"] {
    width: 96px;
    padding: 8px 10px;
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 6px;
    background: var(--surface, #0a0a0a);
    color: var(--text-primary, #fff);
    font-size: 1rem;
}

.cp-new-week-dropzone {
    border: 2px dashed var(--border, #2a2a2a);
    border-radius: 12px;
    padding: 32px 16px;
    text-align: center;
    color: var(--text-secondary, #71717a);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.cp-new-week-dropzone:hover,
.cp-new-week-dropzone--over {
    border-color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.04);
    color: var(--text-primary, #fff);
}
.cp-new-week-dropzone svg {
    display: block;
    margin: 0 auto 8px;
    opacity: 0.7;
}
.cp-new-week-dropzone strong {
    color: var(--accent, #2563eb);
}
.cp-new-week-hint {
    font-size: 0.75rem;
    margin-top: 6px;
    color: var(--text-secondary, #71717a);
}

.cp-new-week-games {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cp-new-week-game {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface-subtle, #1a1a1a);
    border-radius: 8px;
}
.cp-new-week-game-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cp-new-week-game-name {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 6px;
    background: var(--surface, #0a0a0a);
    color: var(--text-primary, #fff);
    font-size: 0.9375rem;
}
.cp-new-week-game-name:focus {
    outline: 1px solid var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
}
.cp-new-week-game-remove {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--text-secondary, #71717a);
    cursor: pointer;
    font-size: 1.25rem;
    border-radius: 4px;
}
.cp-new-week-game-remove:hover {
    background: var(--surface, #0a0a0a);
    color: var(--accent-error, #dc2626);
}

.cp-new-week-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--surface, #0a0a0a);
    color: var(--text-secondary, #71717a);
    align-self: flex-start;
}
.cp-new-week-pill--queued { background: #f4f4f5; color: #71717a; }
.cp-new-week-pill--uploading { background: #dbeafe; color: #1e40af; }
.cp-new-week-pill--processing { background: #fef3c7; color: #92400e; }
.cp-new-week-pill--ready { background: #dcfce7; color: #166534; }
.cp-new-week-pill--failed { background: #fee2e2; color: #991b1b; }

.cp-new-week-status-line {
    margin-top: 12px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary, #71717a);
}