/* ============================================================
   PersonalStudy — Priority 1: UX Foundations (2025-2026 Best Practices)
   Fluid Typography · 4px Spacing · Accessibility · Skeleton Loading
   
   Add this AFTER style_fun.css in index.php:
   <link href="assets/ux_foundations.css" rel="stylesheet">
   ============================================================ */

/* ============================================================
   1. FLUID TYPOGRAPHY — clamp() Scale
   Source: Duolingo, Khan Academy, Brilliant.org
   
   Uses CSS clamp() for responsive text that scales smoothly
   between mobile (320px) and desktop (1200px) without breakpoints.
   ============================================================ */

:root {
    /* --- Fluid Type Scale (Minor Third 1.2 ratio) --- */
    --fs-xs:    clamp(0.6875rem, 0.65rem + 0.12vw, 0.75rem);     /* 11–12px */
    --fs-sm:    clamp(0.75rem, 0.7rem + 0.16vw, 0.8125rem);      /* 12–13px */
    --fs-base:  clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);    /* 13–15px */
    --fs-md:    clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);   /* 15–17px */
    --fs-lg:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);         /* 17–20px */
    --fs-xl:    clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);        /* 20–24px */
    --fs-2xl:   clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);        /* 24–30px */
    --fs-3xl:   clamp(1.875rem, 1.65rem + 0.85vw, 2.5rem);       /* 30–40px */

    /* --- Font Weights (explicit for Inter) --- */
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-extrabold: 800;

    /* --- Line Heights --- */
    --lh-tight:    1.2;
    --lh-snug:     1.35;
    --lh-normal:   1.5;
    --lh-relaxed:  1.65;
}

/* Apply base fluid font size */
body {
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
}

/* Headings */
h1, .h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: var(--fw-extrabold); }
h2, .h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
h3, .h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug);  font-weight: var(--fw-bold); }
h4, .h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug);  font-weight: var(--fw-semibold); }
h5, .h5 { font-size: var(--fs-md);  line-height: var(--lh-snug);  font-weight: var(--fw-semibold); }
h6, .h6 { font-size: var(--fs-base); line-height: var(--lh-normal); font-weight: var(--fw-semibold); }

/* Stat values — prominent numbers */
.stat-value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
}

.stat-label {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
}

/* Small/helper text */
.text-sm, .stat-sub, .ps-course-badge span, .ai-badge {
    font-size: var(--fs-sm);
}


/* ============================================================
   2. 4px SPACING SYSTEM
   Source: Duolingo (4px grid), Brilliant.org, Khan Academy
   
   All spacing is multiples of 4px for visual consistency.
   Maps to common usage patterns.
   ============================================================ */

:root {
    /* --- Spacing Tokens (4px base unit) --- */
    --space-0:   0;
    --space-1:   0.25rem;   /* 4px */
    --space-2:   0.5rem;    /* 8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */

    /* --- Component-Level Spacing --- */
    --card-padding:     var(--space-5);    /* 20px — card internal padding */
    --card-gap:         var(--space-4);    /* 16px — gap between cards */
    --section-gap:      var(--space-8);    /* 32px — gap between page sections */
    --inline-gap:       var(--space-2);    /* 8px  — gap between inline items */
    --button-padding-x: var(--space-5);    /* 20px — button horizontal padding */
    --button-padding-y: var(--space-3);    /* 12px — button vertical padding */
    --input-padding-x:  var(--space-4);    /* 16px */
    --input-padding-y:  var(--space-3);    /* 12px */
}

/* Apply spacing system to key components */
.mq-card .card-body,
.mq-card .card-header {
    padding: var(--card-padding);
}

.stats-row {
    gap: var(--card-gap);
}

.panel-buttons {
    gap: var(--inline-gap);
}

/* Section spacing */
.row.g-4 {
    --bs-gutter-y: var(--section-gap);
}

/* Button rhythm */
.panel-btn {
    padding: var(--button-padding-y) var(--button-padding-x);
}


/* ============================================================
   3. ACCESSIBILITY — Focus-Visible & Reduced Motion
   Sources: WCAG 2.2, European Accessibility Act 2025,
   Khan Academy, Duolingo, Codecademy
   
   - :focus-visible for keyboard-only focus rings
   - prefers-reduced-motion for motion sensitivity
   - Minimum touch targets (44×44px on mobile)
   - High-contrast focus indicators
   ============================================================ */

/* --- Focus-Visible Ring (only on keyboard navigation) --- */
:focus-visible {
    outline: 3px solid var(--fun-primary, #7C4DFF);
    outline-offset: 2px;
    border-radius: inherit;
}

/* Remove default outlines for mouse/touch interactions */
:focus:not(:focus-visible) {
    outline: none;
}

/* Buttons & Interactive Elements — enhanced focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--fun-primary, #7C4DFF);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(124, 77, 255, 0.15);
}

/* Skill tree nodes — specific focus ring */
.skill-node:focus-visible {
    outline: 3px solid var(--fun-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--fun-primary-glow);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep essential transforms but remove motion */
    .stat-card:hover {
        transform: none;
    }

    .xp-bar-fill,
    .wt-progress-fill {
        transition: none;
    }

    /* Disable mascot bobbing */
    #fun-mascot .mascot-body {
        animation: none;
    }

    /* Disable particle/confetti effects */
    .particle,
    .emoji-reaction,
    .confetti-piece {
        display: none !important;
    }
}

/* --- Minimum Touch Targets (WCAG 2.2 Level AAA: 44×44px) --- */
@media (pointer: coarse) {
    .panel-btn,
    .ps-nav-item,
    .skill-node,
    .wt-option,
    .ps-lang-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Ensure clickable areas are not too close together */
    .panel-buttons {
        gap: var(--space-3);
    }

    .ps-nav-center {
        gap: var(--space-1);
    }
}

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

/* --- High Contrast Mode Support --- */
@media (forced-colors: active) {
    .stat-card,
    .mq-card,
    .panel-btn {
        border: 2px solid CanvasText;
    }

    .xp-bar-fill,
    .wt-progress-fill {
        background: Highlight;
    }

    .skill-node.mastered {
        border-color: Highlight;
    }
}


/* ============================================================
   4. SKELETON LOADING STATES
   Source: Duolingo, Coursera, Khan Academy, DataCamp
   
   Replaces "Loading..." text with animated shimmer placeholders
   that hint at the content structure. Reduces perceived load time.
   ============================================================ */

/* --- Shimmer Animation --- */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* --- Base Skeleton Element --- */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-input, #f3f4f8) 25%,
        rgba(124, 77, 255, 0.05) 50%,
        var(--bg-input, #f3f4f8) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm, 8px);
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

/* Remove any child content visibility in skeleton state */
.skeleton * {
    visibility: hidden;
}

/* --- Skeleton Shapes --- */
.skeleton-text {
    height: 0.9em;
    width: 100%;
    border-radius: 4px;
    margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
    width: 70%;
}

.skeleton-circle {
    border-radius: 50%;
    aspect-ratio: 1;
}

.skeleton-card {
    height: 120px;
    border-radius: var(--fun-radius, 16px);
}

.skeleton-stat {
    height: 80px;
    border-radius: var(--fun-radius, 16px);
}

/* --- Stat Card Skeleton --- */
.stat-card.skeleton {
    min-height: 100px;
}

.stat-card.skeleton .stat-icon,
.stat-card.skeleton .stat-value,
.stat-card.skeleton .stat-label,
.stat-card.skeleton .stat-sub,
.stat-card.skeleton .xp-bar {
    visibility: hidden;
}

/* --- Skill Tree Skeleton --- */
.skeleton-tree {
    display: grid;
    grid-template-columns: repeat(auto-fill, 64px);
    gap: var(--space-4);
    justify-content: center;
    padding: var(--space-6);
}

.skeleton-node {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        var(--bg-input, #f3f4f8) 25%,
        rgba(124, 77, 255, 0.05) 50%,
        var(--bg-input, #f3f4f8) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-node:nth-child(odd) {
    animation-delay: 0.15s;
}

.skeleton-node:nth-child(3n) {
    animation-delay: 0.3s;
}

/* --- Quest/Badge Panel Skeleton --- */
.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.skeleton-list-item::before {
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        var(--bg-input, #f3f4f8) 25%,
        rgba(124, 77, 255, 0.05) 50%,
        var(--bg-input, #f3f4f8) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-list-item::after {
    content: '';
    flex: 1;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--bg-input, #f3f4f8) 25%,
        rgba(124, 77, 255, 0.05) 50%,
        var(--bg-input, #f3f4f8) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    animation-delay: 0.1s;
}

/* --- Dark Mode Skeleton Colors --- */
[data-theme="dark"] .skeleton,
[data-theme="dark"] .skeleton-text,
[data-theme="dark"] .skeleton-node,
[data-theme="dark"] .skeleton-list-item::before,
[data-theme="dark"] .skeleton-list-item::after {
    background: linear-gradient(
        90deg,
        var(--bg-input, #252836) 25%,
        rgba(124, 77, 255, 0.08) 50%,
        var(--bg-input, #252836) 75%
    );
    background-size: 200% 100%;
}

/* --- Pulse Variation (for individual elements like stat values) --- */
@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.skeleton-pulse {
    animation: skeletonPulse 1.5s ease-in-out infinite;
    color: transparent !important;
    background: var(--bg-input, #f3f4f8);
    border-radius: 4px;
    display: inline-block;
    min-width: 3ch;
}