/* =========================================================================
   SHARED EXERCISE COMPONENTS
   =========================================================================
   Reusable UI patterns used across multiple exercise widgets.
   Each widget sets its own theme via CSS custom properties on its root.

   Required custom properties (set on widget root):
     --ex-primary          Main brand color
     --ex-primary-dark     Darker brand color (hover states)
     --ex-primary-light    Lighter brand color (backgrounds)
     --ex-primary-ring     Ring/pulse color (focus, animations)
     --ex-success          Success green
     --ex-success-light    Success background
     --ex-success-dark     Success text
     --ex-error            Error red
     --ex-error-light      Error background
     --ex-error-dark       Error text
     --ex-neutral-50       Lightest neutral
     --ex-neutral-100      Light neutral (backgrounds)
     --ex-neutral-200      Border neutral
     --ex-neutral-500      Muted text
     --ex-neutral-700      Body text
     --ex-neutral-800      Headings
     --ex-radius-sm        Small radius (6px)
     --ex-radius-md        Medium radius (10px)
     --ex-radius-lg        Large radius (14px)
     --ex-radius-full      Pill radius (9999px)
     --ex-shadow-sm        Small shadow
     --ex-transition       Transition timing (0.2s ease)
     --ex-font             Font family (optional, inherits)
   ========================================================================= */


/* =========================================================================
   1. MODE TABS — "Multiple Choice | Typing | Spatial" toggle bar
   =========================================================================
   Two visual variants:
     Default  = "outlined" (white bg + colored border on active)
     --filled = "filled"   (colored bg + white text on active)
   ========================================================================= */

.ex-mode-toggle {
    display: flex;
    gap: 4px;
    background: var(--ex-neutral-100);
    border-radius: var(--ex-radius-md);
    padding: 4px;
    margin-bottom: 16px;
}

.ex-mode-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    transition: all var(--ex-transition, 0.2s ease);
    background: transparent;
    color: var(--ex-neutral-500);
    text-align: center;
    min-height: 44px;
    font-family: var(--ex-font, inherit);
    line-height: 1.3;
}

/* Outlined variant (default) — white bg + colored border */
.ex-mode-btn.active {
    background: #fff;
    color: var(--ex-primary-dark);
    border-color: var(--ex-primary);
    box-shadow: var(--ex-shadow-sm);
}

/* Filled variant — colored bg + white text */
.ex-mode-toggle--filled .ex-mode-btn.active {
    background: var(--ex-primary);
    color: #fff;
    border-color: var(--ex-primary);
    font-weight: 600;
    box-shadow: var(--ex-shadow-sm);
}

.ex-mode-btn:hover:not(.active):not(.locked) {
    color: var(--ex-neutral-700);
    background: rgba(255, 255, 255, 0.5);
}

/* Filled variant hover */
.ex-mode-toggle--filled .ex-mode-btn:hover:not(.active):not(.locked) {
    color: var(--ex-neutral-700);
    background: var(--ex-neutral-50);
}

.ex-mode-btn.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.ex-mode-btn:focus-visible {
    outline: 3px solid var(--ex-primary);
    outline-offset: 2px;
}


/* =========================================================================
   2. PROGRESS BAR — counter row + thin bar
   =========================================================================
   Structure:
     .ex-progress-section
       .ex-progress-info        ← "1 / 10" + streak + score
         .ex-progress-count
         .ex-streak-badge
         .ex-score
       .ex-progress-track       ← thin bar container
         .ex-progress-fill      ← colored fill
   ========================================================================= */

.ex-progress-section {
    margin-bottom: 16px;
}

.ex-progress-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--ex-neutral-500);
}

.ex-progress-count {
    font-weight: 600;
    color: var(--ex-neutral-700);
    white-space: nowrap;
}

.ex-streak-badge {
    font-weight: 600;
    color: #f59e0b;
}

.ex-score {
    margin-left: auto;
    font-weight: 600;
    color: var(--ex-success-dark);
    white-space: nowrap;
}

.ex-progress-track {
    height: 6px;
    background: var(--ex-neutral-200);
    border-radius: var(--ex-radius-full);
    overflow: hidden;
}

.ex-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ex-primary), var(--ex-primary-dark));
    border-radius: var(--ex-radius-full);
    transition: width 0.4s ease;
}


/* =========================================================================
   3. FEEDBACK PANEL — correct / incorrect message
   =========================================================================
   Structure:
     .ex-feedback.ex-feedback--correct   OR  .ex-feedback.ex-feedback--incorrect
       p   ← message text

   Also provides utility classes for any element:
     .ex-feedback--correct   (border + bg)
     .ex-feedback--incorrect (border + bg)
   ========================================================================= */

.ex-feedback {
    text-align: center;
    padding: 10px 16px;
    border-radius: var(--ex-radius-lg);
    margin-bottom: 16px;
    animation: exFadeIn 0.3s ease;
    border: 1px solid transparent;
}

.ex-feedback--correct {
    background: var(--ex-success-light);
    border-color: var(--ex-success);
}

.ex-feedback--incorrect {
    background: var(--ex-error-light);
    border-color: var(--ex-error);
}

.ex-feedback p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.ex-feedback--correct p {
    color: var(--ex-success-dark);
}

.ex-feedback--incorrect p {
    color: var(--ex-error-dark);
}


/* =========================================================================
   4. BUTTONS — primary & secondary action buttons
   =========================================================================
   Structure:
     button.ex-btn.ex-btn--primary   ← "Check" / "Next"
     button.ex-btn.ex-btn--secondary ← "Skip" / "Try Again"
   ========================================================================= */

.ex-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: var(--ex-radius-md);
    font-family: var(--ex-font, inherit);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ex-transition, 0.2s ease);
    text-decoration: none;
    line-height: 1.4;
    min-height: 44px;
}

.ex-btn--primary {
    background: var(--ex-primary);
    color: #fff;
    border-color: var(--ex-primary);
}

.ex-btn--primary:hover {
    background: var(--ex-primary-dark);
    border-color: var(--ex-primary-dark);
}

.ex-btn--secondary {
    background: #fff;
    color: var(--ex-primary-dark);
    border-color: var(--ex-primary);
}

.ex-btn--secondary:hover {
    background: var(--ex-primary-light);
}

.ex-btn:focus-visible {
    outline: 3px solid var(--ex-primary);
    outline-offset: 2px;
}

.ex-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* =========================================================================
   5. COMPLETE SCREEN — end-of-exercise summary
   =========================================================================
   Structure:
     .ex-complete-screen
       .ex-complete-emoji       ← "🎉"
       .ex-complete-title       ← "Great Job!"
       .ex-complete-stats       ← stat cards row
         .ex-stat
           .ex-stat-value
           .ex-stat-label
       .ex-complete-actions     ← buttons row
   ========================================================================= */

.ex-complete-screen {
    text-align: center;
    padding: 24px 16px;
}

.ex-complete-emoji {
    font-size: 48px;
    margin-bottom: 12px;
    line-height: 1;
}

.ex-complete-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ex-neutral-800);
    margin: 0 0 8px;
}

.ex-complete-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.ex-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ex-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--ex-primary-dark);
    line-height: 1;
}

.ex-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ex-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ex-complete-encouragement {
    font-size: 16px;
    color: var(--ex-neutral-700);
    margin: 0 0 20px;
}

.ex-complete-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}


/* =========================================================================
   6. LOADING SPINNER
   =========================================================================
   Usage:
     .ex-loading               ← centered container (padding, text-align)
       .ex-loading-spinner      ← the animated ring
       p                        ← optional "Loading…" text

   Inherits --ex-primary and --ex-neutral-200 from the widget root.
   ========================================================================= */

.ex-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
}

.ex-loading p {
    margin: 0;
    font-size: 14px;
    color: var(--ex-neutral-500);
}

.ex-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ex-neutral-200, #e5e7eb);
    border-top-color: var(--ex-primary, #3b82f6);
    border-radius: 50%;
    animation: exSpin 1s linear infinite;
    margin-bottom: 12px;
}


/* =========================================================================
   7. SHARED ANIMATIONS
   ========================================================================= */

@keyframes exSpin {
    to { transform: rotate(360deg); }
}

@keyframes exFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes exShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

@keyframes exPulse {
    0%, 100% { border-color: var(--ex-primary); }
    50%      { border-color: var(--ex-primary-ring); }
}

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


/* =========================================================================
   8. ACCESSIBILITY
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .ex-mode-btn,
    .ex-progress-fill,
    .ex-btn,
    .ex-feedback,
    .ex-loading-spinner {
        transition: none;
        animation: none;
    }
}

/* Screen reader only */
.ex-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* =========================================================================
   9. RESPONSIVE — TABLETS & SMALLER (768px)
   ========================================================================= */

@media (max-width: 768px) {
    .ex-mode-btn {
        font-size: 12px;
        padding: 7px 8px;
    }

    .ex-complete-stats {
        gap: 16px;
    }

    .ex-stat-value {
        font-size: 24px;
    }
}


/* =========================================================================
  10. RESPONSIVE — SMALL PHONES (360px)
   ========================================================================= */

@media (max-width: 360px) {
    .ex-mode-toggle {
        gap: 2px;
        padding: 3px;
    }

    .ex-mode-btn {
        padding: 6px 4px;
        font-size: 11px;
    }

    .ex-complete-stats {
        flex-direction: column;
        gap: 12px;
    }
}