/**
 * Coach Planner — Custom Game Form
 *
 * Inline form inside library panel for creating/editing custom games.
 * Includes fields, skill chips, win condition row, system picker.
 */

/* ============================================================================
   Custom Game — Inline Form (inside library panel)
   ============================================================================ */

.cg-form {
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Discipline toggle — Grappling / Striking */
.cg-discipline-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}
.cg-discipline-btn {
    flex: 1;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cg-discipline-btn:hover {
    color: var(--text-secondary);
    background: var(--bg-hover);
}
.cg-discipline-btn.is-active {
    background: var(--accent);
    color: white;
}

/* Striking pre-built pills */
.cg-striking-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0.25rem 0;
}
.cg-striking-pill {
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.15s ease;
}
.cg-striking-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.cg-striking-pill.is-used {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}
.cg-striking-pills-field {
    margin-top: -0.5rem;
}

.cg-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cg-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* "🔒 N GrapplingU-hosted video(s) — not editable" note shown under the
   video field when a course/curriculum game carries protected Bunny
   videos (their URLs are never exposed in the editable field). */
.cg-video-locked-note {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}

/* Label row — used when a field needs an inline action button next to its
   label (e.g. Rules & Progression's "List" button). */
.cg-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cg-list-btn {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--gray-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.55rem;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}

.cg-list-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.cg-list-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Form-open state — when CP.FormState.enter('customGameForm') runs, it
   sets `body[data-form-open]`. CSS hides the footer CTA in response.
   Single source of truth — replaces N distributed `style.display = 'none'`
   writes that regressed twice. See web/js/coach-planner.js FormState. */
body[data-form-open] #btn-custom-game,
body[data-form-open] .lib-footer .btn-accent {
    display: none !important;
}

/* Traditional-mode static hide — distinct attribute keeps form-driven
   visibility and mode-driven visibility from corrupting each other. */
body[data-coach-mode="traditional"] #btn-custom-game,
body[data-coach-mode="traditional"] .lib-footer .btn-accent {
    display: none !important;
}

.cg-field input,
.cg-field select,
.cg-field textarea {
    width: 100%;
    background: var(--gray-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
}

.cg-field input:focus,
.cg-field select:focus,
.cg-field textarea:focus {
    border-color: var(--accent);
}

.cg-field textarea {
    resize: vertical;
    min-height: 48px;
}

/* Rules & Progression — tight line-height so consecutive numbered items
   read as a list (single newlines look adjacent, not double-spaced). The
   default textarea line-height inherits from the page and renders ~1.7x
   here, which made "1. foo\n2. bar" look like "1. foo\n\n2. bar" even
   though the text only has one newline. */
#cgRules {
    line-height: 1.4;
}

/* Skill chips — multi-select toggle chips */
.cg-skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cg-skill-chip {
    padding: 5px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.15s ease;
}

.cg-skill-chip:hover {
    border-color: var(--border-medium);
    color: var(--text-secondary);
}

.cg-skill-chip.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ============================================================================
   Win Condition Row
   ============================================================================ */

.cg-win-row {
    display: flex;
    gap: 0.4rem;
}

.cg-win-row input {
    flex: 1;
    min-width: 0;
}

.cg-win-row select {
    width: 110px;
    flex-shrink: 0;
}

/* ============================================================================
   System Picker — inline filterable list
   ============================================================================ */

.cg-system-picker {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cg-system-list {
    max-height: 200px;
    overflow-y: auto;
    background: var(--gray-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.cg-system-item {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
}

.cg-system-item:last-child {
    border-bottom: none;
}

.cg-system-item:hover {
    background: var(--gray-3);
    color: var(--text-primary);
}

.cg-system-item.selected {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent);
}

.cg-system-item.cg-system-top {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.875rem;
    background: var(--gray-1);
    /* NOT sticky: the picker has multiple depth-0 category headers, and several
       `position:sticky; top:0` siblings in one scroll box all pin to the same y
       and overlap/stack as you scroll (Guards/Passing + Leg Entanglements piling
       up, content bleeding through). Category headers scroll normally instead. */
}

.cg-system-item.cg-system-top:hover {
    background: var(--gray-3);
}

.cg-system-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--gray-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.cg-system-selected .btn-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.cg-system-selected .btn-link:hover {
    color: var(--text-primary);
}

.cg-system-empty {
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-quaternary);
    text-align: center;
    font-style: italic;
}
.cg-system-header {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    cursor: default;
    margin-top: 0.25rem;
}
.cg-system-header:hover {
    background: transparent;
}
.cg-system-custom {
    color: var(--accent);
    cursor: pointer;
    border-top: 1px solid var(--border-subtle);
}
.cg-system-custom:hover {
    background: rgba(59, 130, 246, 0.08);
}

/* ============================================================================
   Multi-entry rows (modular starting positions / win conditions)
   ============================================================================ */

.cg-label-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cg-multi-add {
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
}
.cg-multi-add:hover { background: rgba(59, 130, 246, 0.1); }

.cg-multi-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cg-multi-row {
    display: flex;
    gap: 0.3rem;
    align-items: flex-start;  /* textarea grows downward — anchor row to top so remove button + select stay aligned */
}
.cg-multi-row input { flex: 1; min-width: 0; }
.cg-multi-row textarea {
    flex: 1;
    min-width: 0;
    /* Auto-grow with content. field-sizing is Chrome/Safari/Edge 123+;
       Firefox falls back to a JS handler in addMultiRow() that sets
       height = scrollHeight on input. Either way, no horizontal clip. */
    field-sizing: content;
    min-height: 2.4rem;       /* ~2 line-heights at 0.875rem font */
    resize: none;             /* user resize would conflict with auto-grow */
    line-height: 1.4;
    overflow-y: auto;
}
.cg-multi-row select { width: 100px; flex-shrink: 0; margin-top: 1px; /* nudge to align with textarea baseline */ }
.cg-multi-row .cg-multi-remove { margin-top: 7px; /* align ×-button with first line of textarea */ }

.cg-multi-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-quaternary);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.cg-multi-remove:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

/* ============================================================================
   Tag Picker — suggestions from existing tags
   ============================================================================ */

/* Collapsible section toggle (skills, existing tags) */
.cg-section-toggle {
    margin-bottom: 0.25rem;
}

.cg-section-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0;
    font-family: inherit;
}

.cg-section-toggle-btn:hover { color: var(--text-primary); }

.cg-section-chev {
    font-size: 0.625rem;
    color: var(--text-quaternary);
}

/* Tag input — chips + inline text inside a bordered container */
.cg-tag-active {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 10px;
    margin-bottom: 0.25rem;
}

.cg-tag-active:empty { margin-bottom: 0; }

.cg-tag-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    border-radius: 16px;
    background: var(--accent);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
}

.cg-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.12s ease;
}
.cg-tag-remove:hover { background: rgba(255,255,255,0.4); }

.cg-tag-hint {
    font-size: 0.6875rem;
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

.cg-tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.375rem;
}

.cg-tag-chip {
    padding: 5px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.15s ease;
}

.cg-tag-chip:hover {
    border-color: var(--border-medium);
    color: var(--text-secondary);
}

.cg-tag-chip.is-active {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent);
    border-color: var(--accent);
}

/* ============================================================================
   Feature 1 — Sibling fan-out section (edit-of-assigned-game)
   ============================================================================
   Shown ONLY when editing an assigned game AND that game has matching
   siblings (same name+system) on OTHER class slots in the current week.
   Coaches opt IN per sibling — default OFF, only-changed-fields propagated. */

.cg-fanout-section {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-hover, rgba(255,255,255,0.02));
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cg-fanout-header {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}
.cg-fanout-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.cg-fanout-row,
.cg-fanout-all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    transition: background 120ms ease;
    /* Comfortable target — WCAG 2.2 SC 2.5.8 minimum target size is 24px;
       this gets us 32+px including the row text. */
    min-height: 32px;
}
.cg-fanout-row:hover,
.cg-fanout-all:hover {
    background: var(--bg-hover, rgba(255,255,255,0.04));
}
.cg-fanout-row input[type="checkbox"],
.cg-fanout-all input[type="checkbox"] {
    /* Larger than the browser default so it doesn't feel like a chore to click. */
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.cg-fanout-row-text,
.cg-fanout-all-text {
    color: var(--text-primary);
    font-size: 0.875rem;
}

/* ============================================================================
   Form Actions
   ============================================================================ */

.cg-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
}

/* Keyboard-shortcut hint inside the Save button (e.g. "Create Game ⌘ ↵").
   Small + muted so it sits behind the label visually. GitHub-style.
   Platform-aware glyph is set by the JS (⌘ on Mac, Ctrl elsewhere). */
.btn-accent .btn-shortcut-hint {
    margin-left: 0.5rem;
    opacity: 0.7;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* Striking structured fields — chip selectors (Role / Defense / Stance)
   and the weapons grid (categorized chips with section headers). Reuses
   .cg-striking-pill base styles from earlier in this file. */
.cg-striking-chip-field {
    /* inherits .cg-field column layout */
}
.cg-striking-chip-row {
    /* inherits .cg-striking-pills flex-wrap layout */
}
.cg-striking-pill.is-active {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.18);
    color: var(--accent);
}
.cg-striking-weapons-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.cg-striking-weapon-group-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}
.cg-striking-weapons-global {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border-subtle);
}
.cg-striking-collapsible {
    /* uses existing .cg-section-toggle-btn style */
}

/* Weapons collapsible summary header: chevron + label + selection summary */
.cg-striking-weapons-summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.cg-striking-weapons-summary-label {
    font-weight: 600;
    color: var(--text-secondary);
}
.cg-striking-weapons-summary-text {
    color: var(--text-tertiary);
    font-weight: 400;
    font-size: 0.8125rem;
}
.cg-striking-weapons-content {
    padding-top: 0.4rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Player B "Same as Player A" toggle row */
.cg-player-b-sameas-toggle {
    background: var(--gray-1, rgba(255,255,255,0.03));
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
}
.cg-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}
.cg-label-inline input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}
.cg-player-b-sameas-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}

/* Symmetric win-conditions toggle (BJJ) — same visual treatment as the
   striking "Same as Player A" toggle row above; kept as its own class pair
   (rather than reusing .cg-player-b-sameas-* directly) since it is a
   different field with its own semantics. */
.cg-symmetric-toggle {
    background: var(--gray-1, rgba(255,255,255,0.03));
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
}
.cg-symmetric-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}

/* Stages authoring — collapsible section + per-stage editor cards */
.cg-stages-section {
    margin-top: 0.5rem;
}
.cg-stages-content {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.cg-stages-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.45;
    padding: 0.5rem 0.6rem;
    background: var(--gray-1, rgba(255,255,255,0.03));
    border-radius: var(--radius-md, 8px);
}
.cg-stages-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.cg-stage-card {
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md, 8px);
    background: var(--gray-1, rgba(255,255,255,0.03));
    overflow: hidden;
}
.cg-stage-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    background: var(--gray-2, rgba(255,255,255,0.04));
    border-bottom: 1px solid var(--border-subtle);
}
.cg-stage-card-num {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.cg-stage-delete {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.cg-stage-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.cg-stage-card-body {
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cg-stage-add {
    align-self: flex-start;
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
}