/**
 * Jam Kham - Psychology-Driven Design System
 *
 * A research-backed design system for Thai language learning that:
 * - Minimizes cognitive load during learning sessions
 * - Supports active retrieval through clear visual hierarchies
 * - Creates calm confidence with warm, trustworthy colors
 * - Respects adult learners with sophisticated aesthetics
 * - Honors Thai cultural resonance without cliche imagery
 *
 * Design Philosophy:
 * - Deep Teal (primary): Trust, concentration, focus, sophisticated
 * - Gold (secondary): Achievement, wisdom, Thai temple gold
 * - Warm Coral (error): Informative, not punitive (NOT red)
 * - Jade Green (success): Growth, encouragement
 *
 * Typography:
 * - Sarabun: Thai script, excellent diacritics handling
 * - Source Serif 4: English headings, warm and distinguished
 * - Atkinson Hyperlegible: Body text, clarity and accessibility
 */

/* ============================================
   CSS CUSTOM PROPERTIES - JAM KHAM TOKENS
   ============================================ */

:root {
    /* ==========================================
       PRIMARY - Dark Teal (from logo #1a5362)
       Trust, concentration, focus, sophisticated
       Thai silk inspiration, culturally safe
       ========================================== */
    --jk-primary: #1a5362;
    --jk-primary-light: #2a7a8f;
    --jk-primary-dark: #134048;
    --jk-primary-50: #f0f7f9;
    --jk-primary-100: #d9eef2;
    --jk-primary-200: #b3dde5;
    --jk-primary-300: #80c5d2;
    --jk-primary-400: #4da8ba;
    --jk-primary-500: #2a8a9d;
    --jk-primary-600: #1a5362;
    --jk-primary-700: #164654;
    --jk-primary-800: #123945;
    --jk-primary-900: #0e2c36;

    /* ==========================================
       SECONDARY - Gold (from logo #daab2f)
       Achievement, warmth, wisdom, Thai temple gold
       ========================================== */
    --jk-secondary: #daab2f;
    --jk-secondary-light: #e4c05a;
    --jk-secondary-dark: #b08a24;
    --jk-secondary-50: #fefbf0;
    --jk-secondary-100: #fdf5d9;
    --jk-secondary-200: #faeab3;
    --jk-secondary-300: #f5da80;
    --jk-secondary-400: #efc54d;
    --jk-secondary-500: #daab2f;
    --jk-secondary-600: #b08a24;
    --jk-secondary-700: #8a6b1c;
    --jk-secondary-800: #6a5216;
    --jk-secondary-900: #4a3910;

    /* ==========================================
       ACCENT - Lotus Pink
       Cultural celebration, achievement moments
       ========================================== */
    --jk-accent: #E05A7C;
    --jk-accent-light: #ED849F;
    --jk-accent-dark: #CC3A5F;

    /* ==========================================
       BACKGROUNDS & SURFACES
       Warm cream foundation - reduces eye strain
       ========================================== */
    --jk-background: #FDF6E3;
    --jk-background-alt: #FAF8F5;
    --jk-surface: #FFFFFF;
    --jk-surface-elevated: #FFFFFF;
    --jk-surface-sunken: #F4F0E8;

    /* ==========================================
       TEXT COLORS
       Deep charcoal - readable, professional
       ========================================== */
    --jk-text: #2D3436;
    --jk-text-secondary: #52647E;
    --jk-text-muted: #677D98;
    --jk-text-inverse: #FAFAFA;

    /* ==========================================
       SEMANTIC COLORS
       Psychology-informed choices
       ========================================== */
    --jk-success: #22A06B;
    --jk-success-light: #36B37E;
    --jk-success-dark: #1B8356;
    --jk-success-bg: rgba(34, 160, 107, 0.15);

    --jk-warning: #E9A83B;
    --jk-warning-light: #F0C05E;
    --jk-warning-dark: #D4872A;
    --jk-warning-bg: rgba(233, 168, 59, 0.18);

    /* Error - Warm coral (NOT harsh red)
       Red triggers shame response, impairs learning */
    --jk-error: #C25D39;
    --jk-error-light: #E07A5F;
    --jk-error-dark: #A04B2E;
    --jk-error-bg: rgba(194, 93, 57, 0.15);

    --jk-info: #0D7377;
    --jk-info-light: #14B3AA;
    --jk-info-dark: #0F736F;
    --jk-info-bg: rgba(13, 115, 119, 0.15);

    /* ==========================================
       RATING BUTTON COLORS
       Again uses amber (not red) per psychology research
       ========================================== */
    --jk-rating-again: #C25D39;
    --jk-rating-again-hover: #D4704C;
    --jk-rating-hard: #E9A83B;
    --jk-rating-hard-hover: #F0C05E;
    --jk-rating-good: #0D7377;
    --jk-rating-good-hover: #14B3AA;
    --jk-rating-easy: #22A06B;
    --jk-rating-easy-hover: #36B37E;

    /* ==========================================
       TONE INDICATOR COLORS
       Visual system for Thai's 5 tones
       ========================================== */
    --jk-tone-mid: #677D98;
    --jk-tone-low: #3B5998;
    --jk-tone-falling: #8B4B6B;
    --jk-tone-high: #E9A83B;
    --jk-tone-rising: #22A06B;

    /* ==========================================
       BORDERS & DIVIDERS
       ========================================== */
    --jk-border: rgba(45, 52, 54, 0.12);
    --jk-border-light: rgba(45, 52, 54, 0.08);
    --jk-border-focus: var(--jk-primary);
    --jk-divider: rgba(45, 52, 54, 0.1);

    /* ==========================================
       SHADOWS
       ========================================== */
    --jk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --jk-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --jk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --jk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --jk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    /* ==========================================
       SPACING SYSTEM
       ========================================== */
    --jk-space-0: 0;
    --jk-space-1: 0.25rem;
    --jk-space-2: 0.5rem;
    --jk-space-3: 0.75rem;
    --jk-space-4: 1rem;
    --jk-space-5: 1.25rem;
    --jk-space-6: 1.5rem;
    --jk-space-8: 2rem;
    --jk-space-10: 2.5rem;
    --jk-space-12: 3rem;
    --jk-space-16: 4rem;

    /* ==========================================
       TYPOGRAPHY
       ========================================== */
    --jk-font-thai: 'Sarabun', 'Noto Sans Thai', sans-serif;
    --jk-font-heading: 'Source Serif 4', Georgia, serif;
    --jk-font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
    --jk-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Type Scale */
    --jk-text-xs: 0.75rem;
    --jk-text-sm: 0.875rem;
    --jk-text-base: 1rem;
    --jk-text-md: 1.125rem;
    --jk-text-lg: 1.25rem;
    --jk-text-xl: 1.5rem;
    --jk-text-2xl: 1.875rem;
    --jk-text-3xl: 2.25rem;
    --jk-text-4xl: 3rem;

    /* Thai Script Sizes (larger for complexity) */
    --jk-thai-sm: 0.9375rem;
    --jk-thai-base: 1.125rem;
    --jk-thai-md: 1.25rem;
    --jk-thai-lg: 1.5rem;
    --jk-thai-xl: 2rem;
    --jk-thai-2xl: 2.5rem;
    --jk-thai-3xl: 3rem;
    --jk-thai-display: clamp(2.5rem, 8vw, 4rem);

    /* Line Heights */
    --jk-leading-tight: 1.25;
    --jk-leading-normal: 1.5;
    --jk-leading-relaxed: 1.625;
    --jk-leading-thai: 1.8;
    --jk-leading-thai-display: 1.5;

    /* Letter Spacing */
    --jk-tracking-tight: -0.025em;
    --jk-tracking-normal: 0;
    --jk-tracking-wide: 0.025em;
    --jk-tracking-thai: 0.02em;

    /* Font Weights */
    --jk-font-normal: 400;
    --jk-font-medium: 500;
    --jk-font-semibold: 600;
    --jk-font-bold: 700;

    /* ==========================================
       ANIMATION
       ========================================== */
    --jk-duration-fast: 150ms;
    --jk-duration-normal: 300ms;
    --jk-duration-slow: 500ms;
    --jk-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --jk-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --jk-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --jk-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --jk-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ==========================================
       COMPONENT TOKENS
       ========================================== */
    --jk-card-radius-sm: 0.75rem;
    --jk-card-radius-md: 1rem;
    --jk-card-radius-lg: 1.25rem;
    --jk-btn-radius-sm: 0.375rem;
    --jk-btn-radius-md: 0.625rem;
    --jk-btn-radius-lg: 0.75rem;
    --jk-input-radius: 0.5rem;

    /* Pattern colors for light theme */
    --jk-pattern-color: rgba(13, 115, 119, 0.03);
    --jk-pattern-accent: rgba(212, 169, 58, 0.02);

    /* ==========================================
       MOBILE VIEWPORT - Set by mobile-viewport.js
       Use these instead of vh/vw for reliable mobile layouts
       ========================================== */
    --vh: 1vh; /* 1% of visual viewport height */
    --vvh: 100vh; /* Visual viewport height (fallback) */
    --vvw: 100vw; /* Visual viewport width (fallback) */
    --keyboard-height: 0px; /* Keyboard height when visible */
    --keyboard-visible: 0; /* 1 when keyboard showing */
    --safe-area-top: 0px; /* Notch safe area */
    --safe-area-bottom: 0px; /* Home indicator safe area */
    --safe-area-left: 0px; /* Left safe area */
    --safe-area-right: 0px; /* Right safe area */
}

/* ============================================
   MOBILE VIEWPORT UTILITIES
   Native-app-feel behaviors and layouts
   ============================================ */

/* Use --vh instead of vh for reliable full-height on mobile
   (CSS vh doesn't account for mobile browser chrome) */
.h-screen-safe {
    height: calc(var(--vh, 1vh) * 100);
}

.min-h-screen-safe {
    min-height: calc(var(--vh, 1vh) * 100);
}

.max-h-screen-safe {
    max-height: calc(var(--vh, 1vh) * 100);
}

/* Safe area padding utilities */
.pt-safe {
    padding-top: max(var(--safe-area-top), 0px);
}

.pb-safe {
    padding-bottom: max(var(--safe-area-bottom), 0px);
}

.px-safe {
    padding-left: max(var(--safe-area-left), 0px);
    padding-right: max(var(--safe-area-right), 0px);
}

.p-safe {
    padding-top: max(var(--safe-area-top), 0px);
    padding-bottom: max(var(--safe-area-bottom), 0px);
    padding-left: max(var(--safe-area-left), 0px);
    padding-right: max(var(--safe-area-right), 0px);
}

/* Bottom nav padding: accounts for fixed bottom nav (4rem = 64px) + safe area */
.pb-bottom-nav {
    padding-bottom: calc(4rem + max(0px, env(safe-area-inset-bottom, 0px)));
}

/* Desktop: no bottom nav, remove padding */
@media (min-width: 1024px) {
    .pb-bottom-nav {
        padding-bottom: 0;
    }
}

/* Above-keyboard positioning: adds padding when keyboard is visible */
.above-keyboard {
    padding-bottom: var(--keyboard-height, 0px);
    transition: padding-bottom 150ms ease-out;
}

/* Hide when keyboard is visible */
.hide-on-keyboard {
    transition: opacity 100ms ease-out, visibility 100ms ease-out;
}

body.keyboard-open .hide-on-keyboard {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Show only when keyboard is visible */
.show-on-keyboard {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 100ms ease-out, visibility 100ms ease-out;
}

body.keyboard-open .show-on-keyboard {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Prevent scroll bounce/overscroll on iOS */
.no-overscroll {
    overscroll-behavior: none;
}

/* Enable momentum scrolling for scrollable areas */
.scroll-momentum {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Prevent pull-to-refresh on specific elements */
.no-pull-refresh {
    overscroll-behavior-y: none;
}

/* Fixed positioning that respects safe areas */
.fixed-safe-top {
    position: fixed;
    top: var(--safe-area-top, 0px);
    left: 0;
    right: 0;
}

.fixed-safe-bottom {
    position: fixed;
    bottom: var(--safe-area-bottom, 0px);
    left: 0;
    right: 0;
}

/* Native-feel tap highlight */
.tap-highlight-none {
    -webkit-tap-highlight-color: transparent;
}

.tap-highlight-subtle {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Prevent text selection on interactive elements (native-app feel) */
.select-none-touch {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Touch-optimized buttons - larger hit areas */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

.touch-target-lg {
    min-height: 48px;
    min-width: 48px;
}

/* Stable layout container - won't shift when keyboard appears */
.viewport-stable {
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Content area that adjusts for keyboard */
.viewport-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
}

/* Dark Mode Tokens */
[data-theme="jamkham-dark"] {
    --jk-background: #141B24;
    --jk-background-alt: #1E2836;
    --jk-surface: #1E2836;
    --jk-surface-elevated: #2A3544;
    --jk-surface-sunken: #0F141C;

    --jk-text: #ECF0F3;
    --jk-text-secondary: #B1BDCD;
    --jk-text-muted: #8799B1;
    --jk-text-inverse: #1E2836;

    --jk-primary: #2DD3C8;
    --jk-primary-light: #5FE8DF;
    --jk-primary-dark: #14B3AA;

    --jk-secondary: #F0C05E;
    --jk-secondary-light: #F6D88F;
    --jk-secondary-dark: #E9A83B;

    --jk-accent: #ED849F;
    --jk-accent-light: #F5B3C4;
    --jk-accent-dark: #E05A7C;

    --jk-success: #36B37E;
    --jk-success-light: #57D9A3;
    --jk-success-bg: rgba(54, 179, 126, 0.15);

    --jk-warning: #F0C05E;
    --jk-warning-light: #F6D88F;
    --jk-warning-bg: rgba(240, 192, 94, 0.15);

    --jk-error: #E07A5F;
    --jk-error-light: #F5A690;
    --jk-error-bg: rgba(224, 122, 95, 0.15);

    --jk-info: #2DD3C8;
    --jk-info-light: #5FE8DF;
    --jk-info-bg: rgba(45, 211, 200, 0.15);

    --jk-border: rgba(236, 240, 243, 0.15);
    --jk-border-light: rgba(236, 240, 243, 0.1);
    --jk-divider: rgba(236, 240, 243, 0.1);

    --jk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --jk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
    --jk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

    --jk-pattern-color: rgba(45, 211, 200, 0.02);
    --jk-pattern-accent: rgba(240, 192, 94, 0.015);
}

/* ============================================
   LIGHT THEME - DaisyUI Variables
   Define base colors for proper component rendering
   ============================================ */

[data-theme="jamkham-light"] {
    /* DaisyUI base backgrounds */
    --b1: 100% 0 0;           /* base-100: pure white #FFFFFF */
    --b2: 98% 0.005 85;       /* base-200: off-white #FAF8F5 */
    --b3: 95% 0.015 80;       /* base-300: warm cream #F4F0E8 */
    --bc: 25% 0.02 240;       /* base-content: dark text #2D3436 */
    color-scheme: light;
}

/* ============================================
   DARK THEME EXPLICIT OVERRIDES
   Force DaisyUI components to use dark colors
   ============================================ */

[data-theme="jamkham-dark"] {
    /* Override DaisyUI base backgrounds */
    --b1: 215 30% 12%;
    --b2: 215 28% 15%;
    --b3: 215 25% 20%;
    --bc: 38 15% 92%;
    color-scheme: dark;
}

/* Explicit background overrides for dark mode */
[data-theme="jamkham-dark"] .bg-base-100,
[data-theme="jamkham-dark"] .card {
    background-color: oklch(215 30% 12% / 1) !important;
}

[data-theme="jamkham-dark"] .bg-base-200 {
    background-color: oklch(215 28% 15% / 1) !important;
}

[data-theme="jamkham-dark"] .bg-base-300 {
    background-color: oklch(215 25% 20% / 1) !important;
}

/* Dark mode text colors - COMPREHENSIVE */
[data-theme="jamkham-dark"] {
    color: #ECF0F3 !important;
}

[data-theme="jamkham-dark"] body,
[data-theme="jamkham-dark"] .card-body,
[data-theme="jamkham-dark"] p,
[data-theme="jamkham-dark"] span,
[data-theme="jamkham-dark"] div,
[data-theme="jamkham-dark"] li,
[data-theme="jamkham-dark"] td,
[data-theme="jamkham-dark"] th,
[data-theme="jamkham-dark"] label {
    color: #ECF0F3;
}

[data-theme="jamkham-dark"] h1,
[data-theme="jamkham-dark"] h2,
[data-theme="jamkham-dark"] h3,
[data-theme="jamkham-dark"] h4,
[data-theme="jamkham-dark"] h5,
[data-theme="jamkham-dark"] h6,
[data-theme="jamkham-dark"] .font-bold,
[data-theme="jamkham-dark"] .font-semibold,
[data-theme="jamkham-dark"] .font-medium {
    color: #F8FAFC;
}

[data-theme="jamkham-dark"] .text-base-content {
    color: #ECF0F3 !important;
}

[data-theme="jamkham-dark"] .text-base-content\/40 {
    color: rgba(236, 240, 243, 0.4) !important;
}

[data-theme="jamkham-dark"] .text-base-content\/50 {
    color: rgba(236, 240, 243, 0.5) !important;
}

[data-theme="jamkham-dark"] .text-base-content\/60 {
    color: rgba(236, 240, 243, 0.6) !important;
}

[data-theme="jamkham-dark"] .text-base-content\/70 {
    color: rgba(236, 240, 243, 0.7) !important;
}

[data-theme="jamkham-dark"] .text-base-content\/80 {
    color: rgba(236, 240, 243, 0.8) !important;
}

/* Dark mode links */
[data-theme="jamkham-dark"] a {
    color: #5FE8DF;
}

[data-theme="jamkham-dark"] a:hover {
    color: #9AF5ED;
}

[data-theme="jamkham-dark"] .link {
    color: #5FE8DF !important;
}

[data-theme="jamkham-dark"] .link-hover:hover {
    color: #9AF5ED !important;
}

/* Keep primary/secondary/accent text colors bright */
[data-theme="jamkham-dark"] .text-primary {
    color: #2DD3C8 !important;
}

[data-theme="jamkham-dark"] .text-secondary {
    color: #F0C05E !important;
}

[data-theme="jamkham-dark"] .text-accent {
    color: #ED849F !important;
}

[data-theme="jamkham-dark"] .text-success {
    color: #36B37E !important;
}

[data-theme="jamkham-dark"] .text-warning {
    color: #F0C05E !important;
}

[data-theme="jamkham-dark"] .text-error {
    color: #E07A5F !important;
}

[data-theme="jamkham-dark"] .text-info {
    color: #2DD3C8 !important;
}

/* Dark mode button text */
[data-theme="jamkham-dark"] .btn {
    color: #ECF0F3;
}

[data-theme="jamkham-dark"] .btn-primary:not(.btn-outline) {
    color: #0F141C !important;
}

[data-theme="jamkham-dark"] .btn-secondary:not(.btn-outline) {
    color: #0F141C !important;
}

[data-theme="jamkham-dark"] .btn-outline.btn-primary {
    color: var(--jk-primary) !important;
    border-color: var(--jk-primary);
}

[data-theme="jamkham-dark"] .btn-outline.btn-primary:hover {
    color: var(--jk-text-inverse) !important;
}

[data-theme="jamkham-dark"] .btn-outline.btn-secondary {
    color: var(--jk-secondary) !important;
    border-color: var(--jk-secondary);
}

[data-theme="jamkham-dark"] .btn-outline.btn-secondary:hover {
    color: var(--jk-text-inverse) !important;
}

[data-theme="jamkham-dark"] .btn-ghost {
    color: #ECF0F3 !important;
}

[data-theme="jamkham-dark"] .btn-outline {
    color: #ECF0F3 !important;
}

/* Dark mode menu items */
[data-theme="jamkham-dark"] .menu li a,
[data-theme="jamkham-dark"] .menu li button {
    color: #ECF0F3 !important;
}

[data-theme="jamkham-dark"] .menu li a:hover,
[data-theme="jamkham-dark"] .menu li button:hover {
    color: #2DD3C8 !important;
}

/* Dark mode form labels and placeholders */
[data-theme="jamkham-dark"] .label-text {
    color: #B1BDCD !important;
}

[data-theme="jamkham-dark"] ::placeholder {
    color: #677D98 !important;
}

/* Dark mode table headers */
[data-theme="jamkham-dark"] .table th {
    color: #B1BDCD !important;
}

/* Dark mode breadcrumbs */
[data-theme="jamkham-dark"] .breadcrumbs li a {
    color: #8799B1 !important;
}

[data-theme="jamkham-dark"] .breadcrumbs li a:hover {
    color: #2DD3C8 !important;
}

/* Dark mode Thai script - keep it visible */
[data-theme="jamkham-dark"] .font-thai,
[data-theme="jamkham-dark"] .thai-display,
[data-theme="jamkham-dark"] .thai-display-medium,
[data-theme="jamkham-dark"] .thai-display-small {
    color: #2DD3C8 !important;
}

/* Dark mode opacity text utilities */
[data-theme="jamkham-dark"] .opacity-50,
[data-theme="jamkham-dark"] .opacity-60,
[data-theme="jamkham-dark"] .opacity-70 {
    color: #B1BDCD;
}

/* Dark mode borders */
[data-theme="jamkham-dark"] .border-base-300,
[data-theme="jamkham-dark"] .border-base-300\/30,
[data-theme="jamkham-dark"] .border-base-300\/50 {
    border-color: oklch(215 20% 30% / 0.5) !important;
}

/* Dark mode footer */
[data-theme="jamkham-dark"] .footer {
    background-color: oklch(215 28% 15% / 0.9) !important;
}

/* Dark mode drawer/sidebar */
[data-theme="jamkham-dark"] .drawer-side .menu {
    background-color: oklch(215 30% 12% / 1) !important;
}

/* Dark mode inputs */
[data-theme="jamkham-dark"] .input,
[data-theme="jamkham-dark"] .textarea,
[data-theme="jamkham-dark"] .select {
    background-color: oklch(215 25% 20% / 1) !important;
    border-color: oklch(215 20% 30% / 0.5) !important;
    color: oklch(38 15% 92% / 1) !important;
}

/* Dark mode buttons - ghost and outline variants */
[data-theme="jamkham-dark"] .btn-ghost:hover {
    background-color: oklch(215 25% 25% / 0.5) !important;
}

[data-theme="jamkham-dark"] .btn-outline {
    border-color: oklch(38 15% 70% / 0.3) !important;
}

/* Dark mode flashcard faces */
[data-theme="jamkham-dark"] .flashcard-front,
[data-theme="jamkham-dark"] .flashcard-back {
    background: var(--jk-surface) !important;
}

/* Dark mode collapse/accordion */
[data-theme="jamkham-dark"] .collapse {
    background-color: oklch(215 28% 15% / 1) !important;
}

/* Dark mode alerts */
[data-theme="jamkham-dark"] .alert {
    background-color: oklch(215 25% 20% / 1) !important;
}

/* Dark mode badges */
[data-theme="jamkham-dark"] .badge-ghost {
    background-color: oklch(215 25% 25% / 0.5) !important;
    color: oklch(38 15% 85% / 1) !important;
}

/* Dark mode tables */
[data-theme="jamkham-dark"] .table tr:hover,
[data-theme="jamkham-dark"] .hover\:bg-base-200\/20:hover {
    background-color: oklch(215 25% 18% / 0.5) !important;
}

[data-theme="jamkham-dark"] .divide-base-200\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: oklch(215 20% 25% / 0.3) !important;
}

/* Dark mode kbd (keyboard shortcuts) */
[data-theme="jamkham-dark"] .kbd {
    background-color: oklch(215 25% 20% / 1) !important;
    border-color: oklch(215 20% 30% / 0.5) !important;
    color: oklch(38 15% 85% / 1) !important;
}

/* Dark mode dividers */
[data-theme="jamkham-dark"] .divider::before,
[data-theme="jamkham-dark"] .divider::after {
    background-color: oklch(215 20% 30% / 0.3) !important;
}

/* Dark mode stat boxes */
[data-theme="jamkham-dark"] .stat {
    background: oklch(215 28% 15% / 1) !important;
    border-color: oklch(215 20% 30% / 0.5) !important;
}

/* ============================================
   ATMOSPHERIC BACKGROUND PATTERN
   Simplified: Single subtle gradient, no crosshatch
   Hand-crafted feel through restraint
   ============================================ */

.jamkham-bg-pattern {
    position: absolute;
    inset: 0;
    background-color: oklch(var(--b1));
    /* Single subtle gradient - elegant restraint */
    background-image:
        radial-gradient(
            ellipse 120% 80% at 80% 20%,
            rgba(13, 115, 119, 0.025) 0%,
            transparent 60%
        );
}

[data-theme="jamkham-dark"] .jamkham-bg-pattern {
    background-image:
        radial-gradient(
            ellipse 120% 80% at 80% 20%,
            rgba(45, 211, 200, 0.03) 0%,
            transparent 60%
        );
}

/* ============================================
   LOADING BAR
   Simplified: Single color, subtle animation
   ============================================ */

.jamkham-loading-bar {
    background: var(--jk-primary);
    animation: jk-loading-pulse 1.5s ease-in-out infinite;
}

@keyframes jk-loading-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ============================================
   LOGO ICON
   ============================================ */

.jamkham-logo-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("/static/brand/logo/jamkham-logo-icon.71fd282941db.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Smaller logo variant for tight spaces */
.jamkham-logo-icon-sm {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("/static/brand/logo/jamkham-logo-icon.71fd282941db.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Larger logo variant for hero sections */
.jamkham-logo-icon-lg {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url("/static/brand/logo/jamkham-logo-icon.71fd282941db.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ============================================
   THAI TYPOGRAPHY
   ============================================ */

.jk-thai-text,
.thai-text,
.font-thai {
    font-family: var(--jk-font-thai);
    line-height: var(--jk-leading-thai);
    letter-spacing: var(--jk-tracking-thai);
    font-feature-settings: "kern" 1;
}

.jk-thai-sm { font-size: var(--jk-thai-sm); }
.jk-thai-base { font-size: var(--jk-thai-base); }
.jk-thai-md { font-size: var(--jk-thai-md); }
.jk-thai-lg { font-size: var(--jk-thai-lg); }
.jk-thai-xl { font-size: var(--jk-thai-xl); }
.jk-thai-2xl { font-size: var(--jk-thai-2xl); }
.jk-thai-3xl { font-size: var(--jk-thai-3xl); }

/* Legacy class names for backwards compatibility */
.thai-text-sm {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-sm);
    line-height: 1.7;
}

.thai-text-md {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-base);
    line-height: var(--jk-leading-thai);
}

.thai-text-lg {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-lg);
    line-height: var(--jk-leading-thai);
}

.thai-text-xl {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-xl);
    line-height: var(--jk-leading-thai);
}

.thai-text-2xl {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-2xl);
    line-height: 1.6;
}

.thai-text-3xl {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-3xl);
    line-height: var(--jk-leading-thai-display);
}

/* Thai display for flashcards */
.jk-thai-display,
.thai-display {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-display);
    font-weight: var(--jk-font-semibold);
    line-height: 1.4;
    letter-spacing: 0.03em;
    color: var(--jk-primary);
}

.thai-display-small {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-md);
    font-weight: var(--jk-font-medium);
    line-height: var(--jk-leading-thai);
}

/* ============================================
   ENGLISH TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: var(--jk-font-heading);
    font-weight: var(--jk-font-semibold);
    letter-spacing: -0.01em;
}

.heading-display {
    font-family: var(--jk-font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--jk-font-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.heading-section {
    font-family: var(--jk-font-heading);
    font-size: var(--jk-text-xl);
    font-weight: var(--jk-font-semibold);
    line-height: 1.3;
}

/* ============================================
   CARD REVEAL LAYOUT
   ============================================ */

.card-reveal-container {
    display: grid;
    grid-template-areas: "content";
    min-height: 320px;
}

@media (min-width: 640px) {
    .card-reveal-container {
        min-height: 380px;
    }
}

.card-reveal-container > .card-reveal-panel {
    grid-area: content;
}

.card-reveal-panel {
    transition: opacity 200ms ease-out, visibility 200ms ease-out;
}

.card-reveal-panel[data-visible="false"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.card-reveal-panel[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

[x-cloak] {
    display: none !important;
}

/* Audio button icons: show default icons before Alpine initializes
   This prevents gray empty circles on mobile with slow connections */
.audio-icon-default {
    display: block;
}
.audio-icon-hidden {
    display: none !important;
}

/* ============================================
   FLASHCARD STYLES
   ============================================ */

.jk-flashcard-container,
.flashcard-container {
    perspective: 1200px;
    perspective-origin: center;
}

.jk-card-flashcard,
.flashcard {
    position: relative;
    width: 100%;
    min-height: min(280px, 45vh);
    transition: transform var(--jk-duration-slow) var(--jk-ease-default);
    transform-style: preserve-3d;
}

.flashcard.flipped {
    transform: rotateY(180deg);
}

.flashcard-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--jk-space-8);
    border-radius: var(--jk-card-radius-lg);
    border: 1px solid var(--jk-border);
    box-shadow: var(--jk-shadow-md);
    transition: box-shadow var(--jk-duration-normal) var(--jk-ease-default);
}

/* Flashcard faces: Clean, flat backgrounds
   Let the content (Thai script) be the visual focus */

.flashcard-front {
    background: var(--jk-surface);
}

.flashcard-back {
    background: var(--jk-surface);
    transform: rotateY(180deg);
}

.flashcard-face:hover {
    box-shadow: var(--jk-shadow-lg);
}

.jk-flashcard-word,
.flashcard-word {
    font-family: var(--jk-font-thai);
    font-size: clamp(2.5rem, 10vw, 4rem);
    font-weight: var(--jk-font-semibold);
    line-height: 1.4;
    text-align: center;
    margin-bottom: var(--jk-space-4);
    color: var(--jk-primary);
}

.jk-flashcard-romanization,
.flashcard-romanization {
    font-family: var(--jk-font-body);
    font-size: var(--jk-text-md);
    color: var(--jk-text-muted);
    font-style: italic;
    margin-bottom: var(--jk-space-2);
    letter-spacing: 0.01em;
}

.jk-flashcard-meaning,
.flashcard-meaning {
    font-family: var(--jk-font-heading);
    font-size: var(--jk-text-xl);
    font-weight: var(--jk-font-medium);
    text-align: center;
    color: var(--jk-text);
}

.flashcard-context {
    font-family: var(--jk-font-body);
    font-size: var(--jk-text-sm);
    opacity: 0.7;
    margin-top: var(--jk-space-4);
    text-align: center;
    max-width: 85%;
    line-height: 1.6;
}

/* ============================================
   CARD COMPONENT
   ============================================ */

.jk-card {
    background: var(--jk-surface);
    border-radius: var(--jk-card-radius-md);
    border: 1px solid var(--jk-border);
    box-shadow: var(--jk-shadow-md);
    transition:
        box-shadow var(--jk-duration-normal) var(--jk-ease-default),
        transform var(--jk-duration-fast) var(--jk-ease-default),
        border-color var(--jk-duration-normal) var(--jk-ease-default);
}

.jk-card:hover {
    box-shadow: var(--jk-shadow-lg);
    border-color: var(--jk-border);
}

.jk-card-interactive {
    cursor: pointer;
}

.jk-card-interactive:hover {
    transform: translateY(-2px);
}

.jk-card-interactive:active {
    transform: translateY(0);
    box-shadow: var(--jk-shadow-sm);
}

.jk-card-accent {
    border-left: 4px solid var(--jk-primary);
}

.jk-card-accent-secondary {
    border-left: 4px solid var(--jk-secondary);
}

/* ============================================
   BUTTON STYLES
   ============================================ */

/* Button styles: Solid colors, subtle hover
   Hand-crafted principle: Restraint creates sophistication */

.jk-btn-primary,
.btn-primary:not(.btn-outline) {
    background: var(--jk-primary);
    color: var(--jk-text-inverse);
    border: none;
    box-shadow: var(--jk-shadow-sm);
    transition:
        transform var(--jk-duration-fast) var(--jk-ease-default),
        box-shadow var(--jk-duration-fast) var(--jk-ease-default),
        background-color var(--jk-duration-fast) var(--jk-ease-default);
}

.jk-btn-primary:hover,
.btn-primary:not(.btn-outline):hover {
    background: var(--jk-primary-dark);
    box-shadow: var(--jk-shadow-md);
    transform: translateY(-1px);
}

.jk-btn-primary:active,
.btn-primary:not(.btn-outline):active {
    transform: translateY(0);
    box-shadow: var(--jk-shadow-xs);
}

/* Outline primary buttons: transparent bg with primary text/border.
   Must override the solid .btn-primary background above. */
.btn-outline.btn-primary {
    background: transparent;
    color: var(--jk-primary);
    border-color: var(--jk-primary);
    box-shadow: none;
}

.btn-outline.btn-primary:hover {
    background: var(--jk-primary);
    color: var(--jk-text-inverse);
    border-color: var(--jk-primary);
}

.jk-btn-secondary,
.btn-secondary:not(.btn-outline) {
    background: var(--jk-secondary);
    color: var(--jk-text);
    border: none;
    box-shadow: var(--jk-shadow-sm);
}

.jk-btn-secondary:hover,
.btn-secondary:not(.btn-outline):hover {
    background: var(--jk-secondary-dark);
    box-shadow: var(--jk-shadow-md);
    transform: translateY(-1px);
}

/* Outline secondary buttons */
.btn-outline.btn-secondary {
    background: transparent;
    color: var(--jk-secondary-dark);
    border-color: var(--jk-secondary);
    box-shadow: none;
}

.btn-outline.btn-secondary:hover {
    background: var(--jk-secondary);
    color: var(--jk-text);
    border-color: var(--jk-secondary);
}

.jk-btn-ghost,
.btn-ghost {
    transition:
        background-color var(--jk-duration-fast) var(--jk-ease-default),
        transform var(--jk-duration-fast) var(--jk-ease-default);
}

.jk-btn-ghost:hover,
.btn-ghost:hover {
    background-color: var(--jk-surface-sunken);
}

.btn-outline {
    border-width: 1.5px;
    transition:
        background-color var(--jk-duration-fast) var(--jk-ease-default),
        border-color var(--jk-duration-fast) var(--jk-ease-default),
        transform var(--jk-duration-fast) var(--jk-ease-default);
}

/* ============================================
   RATING BUTTONS - Psychology-Optimized
   Using amber instead of red for "Again" to
   reduce shame response and support learning
   ============================================ */

/* Rating Buttons: Solid colors, clear hierarchy
   Psychology-optimized: Warm coral for "Again" (not red) to reduce shame
   Hand-crafted: No gradients, no pseudo-element overlays */

.jk-rating-btn,
.quality-btn {
    position: relative;
    transition:
        transform var(--jk-duration-fast) var(--jk-ease-default),
        box-shadow var(--jk-duration-fast) var(--jk-ease-default),
        background-color var(--jk-duration-fast) var(--jk-ease-default);
    min-height: 60px;
    min-width: 70px;
    padding: var(--jk-space-3) var(--jk-space-4);
    border-radius: var(--jk-btn-radius-md);
    font-weight: var(--jk-font-semibold);
    border: none;
}

.jk-rating-btn:hover,
.quality-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--jk-shadow-md);
}

.jk-rating-btn:active,
.quality-btn:active {
    transform: translateY(0);
}

.jk-rating-btn:focus-visible,
.quality-btn:focus-visible {
    outline: 2px solid var(--jk-primary);
    outline-offset: 2px;
}

/* Again button - Warm coral (NOT red) */
.jk-rating-again,
.quality-btn[data-quality="1"] {
    background: var(--jk-rating-again);
    color: white;
}

.jk-rating-again:hover,
.quality-btn[data-quality="1"]:hover {
    background: var(--jk-rating-again-hover);
}

/* Hard button - Golden amber */
.jk-rating-hard,
.quality-btn[data-quality="2"] {
    background: var(--jk-rating-hard);
    color: var(--jk-text);
}

.jk-rating-hard:hover,
.quality-btn[data-quality="2"]:hover {
    background: var(--jk-rating-hard-hover);
}

/* Good button - Primary teal (default choice) */
.jk-rating-good,
.quality-btn[data-quality="4"] {
    background: var(--jk-rating-good);
    color: white;
    /* Subtle emphasis as the "recommended" choice */
    box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.2);
}

.jk-rating-good:hover,
.quality-btn[data-quality="4"]:hover {
    background: var(--jk-rating-good-hover);
}

/* Easy button - Success green */
.jk-rating-easy,
.quality-btn[data-quality="5"] {
    background: var(--jk-rating-easy);
    color: white;
}

.jk-rating-easy:hover,
.quality-btn[data-quality="5"]:hover {
    background: var(--jk-rating-easy-hover);
}

/* Rating interval text */
.quality-btn .text-xs.opacity-80 {
    opacity: 1;
    font-size: 0.8125rem;
    font-weight: var(--jk-font-medium);
}

.quality-consequence {
    font-size: 0.6875rem;
    opacity: 0.85;
    margin-top: 0.125rem;
    font-family: var(--jk-font-body);
}

/* ============================================
   TONE INDICATORS
   ============================================ */

.jk-tone-indicator,
.tone-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: var(--jk-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.jk-tone-mid,
.tone-mid {
    background: var(--jk-tone-mid);
    color: white;
}

.jk-tone-low,
.tone-low {
    background: var(--jk-tone-low);
    color: white;
}

.jk-tone-falling,
.tone-falling {
    background: var(--jk-tone-falling);
    color: white;
}

.jk-tone-high,
.tone-high {
    background: var(--jk-tone-high);
    color: var(--jk-text);
}

.jk-tone-rising,
.tone-rising {
    background: var(--jk-tone-rising);
    color: white;
}

.tone-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: var(--jk-font-semibold);
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

/* ============================================
   PROGRESS INDICATORS
   ============================================ */

/* Progress Indicators: Clean, static by default
   Animation only when value changes, not perpetually */

.jk-progress,
.session-progress {
    height: 0.5rem;
    background: var(--jk-surface-sunken);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.jk-progress-bar,
.session-progress-bar {
    height: 100%;
    background: var(--jk-primary);
    transition: width var(--jk-duration-slow) var(--jk-ease-default);
    /* No perpetual animation - clean and professional */
}

/* Streak indicator: Warm, subtle, earned feeling
   No gradient background - solid with subtle border */

.jk-streak,
.streak-fire {
    display: inline-flex;
    align-items: center;
    gap: var(--jk-space-2);
    padding: var(--jk-space-2) var(--jk-space-4);
    background: rgba(233, 168, 59, 0.1);
    border-radius: 9999px;
    border: 1px solid rgba(233, 168, 59, 0.25);
    font-weight: var(--jk-font-semibold);
}

/* Subtle pulse only - not distracting */
.streak-fire-icon {
    animation: jk-streak-pulse 3s ease-in-out infinite;
}

@keyframes jk-streak-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.interval-badge {
    font-size: 0.75rem;
    font-weight: var(--jk-font-semibold);
    font-family: var(--jk-font-body);
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--jk-surface-sunken);
    border: 1px solid var(--jk-border);
}

/* ============================================
   HTMX LOADING STATES
   ============================================ */

.htmx-indicator {
    opacity: 0;
    transition: opacity 100ms var(--jk-ease-default);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Hide content during HTMX request */
.htmx-hide-on-request {
    transition: opacity 100ms var(--jk-ease-default);
}

.htmx-request .htmx-hide-on-request {
    opacity: 0;
}

/* Show content during HTMX request (hidden by default) */
.htmx-show-on-request {
    display: none;
}

.htmx-request .htmx-show-on-request {
    display: inline;
}

.htmx-loading {
    position: relative;
}

.htmx-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(253, 246, 227, 0.8);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    animation: jk-fade-in var(--jk-duration-fast) var(--jk-ease-default);
}

.skeleton-loading {
    background: linear-gradient(90deg, var(--jk-surface-sunken) 25%, var(--jk-border) 50%, var(--jk-surface-sunken) 75%);
    background-size: 200% 100%;
    animation: jk-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
}

@keyframes jk-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   INPUT STYLES
   ============================================ */

.jk-input,
.answer-input {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-text-xl);
    text-align: center;
    padding: var(--jk-space-4) var(--jk-space-6);
    border-radius: var(--jk-input-radius);
    border: 2px solid var(--jk-border);
    background: var(--jk-surface);
    transition:
        border-color var(--jk-duration-fast) var(--jk-ease-default),
        box-shadow var(--jk-duration-fast) var(--jk-ease-default);
}

.jk-input:focus,
.answer-input:focus {
    outline: none;
    border-color: var(--jk-primary);
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.15);
}

.jk-input::placeholder,
.answer-input::placeholder {
    font-family: var(--jk-font-thai);
    color: var(--jk-text-muted);
}

.jk-input-error {
    border-color: var(--jk-error);
}

.jk-input-error:focus {
    border-color: var(--jk-error);
    box-shadow: 0 0 0 3px rgba(194, 93, 57, 0.15);
}

.jk-input-thai {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-base);
    line-height: var(--jk-leading-thai);
}

/* ============================================
   FEEDBACK ANIMATIONS
   ============================================ */

/* Correct feedback - satisfying pulse */
.jk-feedback-correct,
.feedback-correct {
    animation: jk-feedback-correct 0.6s var(--jk-ease-bounce);
}

@keyframes jk-feedback-correct {
    0% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 160, 107, 0.3);
    }
    30% {
        background-color: var(--jk-success-bg);
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(34, 160, 107, 0);
    }
    100% {
        background-color: rgba(34, 160, 107, 0.05);
        transform: scale(1);
    }
}

/* Incorrect feedback - GENTLE, not punitive */
.jk-feedback-incorrect,
.feedback-incorrect {
    animation: jk-feedback-incorrect 0.4s var(--jk-ease-default);
}

@keyframes jk-feedback-incorrect {
    0%, 100% {
        transform: translateX(0);
        background-color: transparent;
    }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
    50% {
        /* Warm amber instead of red - less shame-inducing */
        background-color: rgba(194, 93, 57, 0.15);
    }
}

/* Alternative: no shake, just color pulse */
.feedback-incorrect-soft {
    animation: jk-feedback-incorrect-soft 0.5s var(--jk-ease-default);
}

@keyframes jk-feedback-incorrect-soft {
    0% { background-color: transparent; }
    40% { background-color: rgba(194, 93, 57, 0.2); }
    100% { background-color: rgba(194, 93, 57, 0.05); }
}

/* ============================================
   ANSWER REVEAL STYLES
   ============================================ */

.answer-thai-display {
    font-family: var(--jk-font-thai);
    font-size: clamp(2.75rem, 9vw, 4.5rem);
    font-weight: var(--jk-font-semibold);
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--jk-primary);
    text-shadow: 0 2px 4px rgba(13, 115, 119, 0.1);
}

.answer-english-display {
    font-family: var(--jk-font-heading);
    font-size: 1.375rem;
    font-weight: var(--jk-font-medium);
    color: var(--jk-text-secondary);
    margin-top: 0.75rem;
}

.answer-romanization {
    font-family: var(--jk-font-body);
    font-size: var(--jk-text-md);
    color: var(--jk-text-muted);
    font-style: italic;
    letter-spacing: 0.01em;
}

.card-answer-section {
    padding-top: var(--jk-space-6);
    margin-top: var(--jk-space-6);
    border-top: 1px solid var(--jk-border-light);
}

/* Answer area: Simple highlight, no gradient */
.answer-area-highlight {
    background: rgba(13, 115, 119, 0.02);
    border-radius: var(--jk-card-radius-sm);
    padding: var(--jk-space-6);
    margin: calc(var(--jk-space-2) * -1);
}

/* ============================================
   SYLLABLE BREAKDOWN
   ============================================ */

.syllable-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
}

.syllable {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--jk-surface-sunken);
    border-radius: var(--jk-btn-radius-md);
    border: 1px solid var(--jk-border);
    transition: transform var(--jk-duration-fast) var(--jk-ease-default);
}

.syllable:hover {
    transform: translateY(-2px);
}

.syllable-thai {
    font-family: var(--jk-font-thai);
    font-size: 1.625rem;
    font-weight: var(--jk-font-semibold);
    color: var(--jk-primary);
}

.syllable-romanization {
    font-size: 0.75rem;
    opacity: 0.65;
    font-family: var(--jk-font-body);
}

.syllable-tone {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
    font-weight: var(--jk-font-semibold);
    opacity: 0.8;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes jk-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jk-scale-up {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jk-success-pop {
    0% { transform: scale(1); }
    30% { transform: scale(1.05); }
    60% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

@keyframes jk-success-glow {
    0% { box-shadow: 0 0 0 0 rgba(34, 160, 107, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(34, 160, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 160, 107, 0); }
}

/* Animation utilities */
.jk-animate-fade-in,
.animate-fade-in {
    animation: jk-fade-in var(--jk-duration-normal) var(--jk-ease-default);
}

.jk-animate-scale-up,
.animate-scale-up {
    animation: jk-scale-up var(--jk-duration-normal) var(--jk-ease-bounce);
}

.jk-animate-success,
.animate-success {
    animation: jk-success-pop 0.6s var(--jk-ease-bounce);
}

.jk-animate-success-glow,
.animate-success-glow {
    animation: jk-success-glow 0.8s var(--jk-ease-default);
}

/* Staggered animations */
.jk-animate-stagger > *,
.animate-stagger > * {
    animation: jk-fade-in var(--jk-duration-normal) var(--jk-ease-default) backwards;
}

.jk-animate-stagger > *:nth-child(1),
.animate-stagger > *:nth-child(1) { animation-delay: 0ms; }
.jk-animate-stagger > *:nth-child(2),
.animate-stagger > *:nth-child(2) { animation-delay: 50ms; }
.jk-animate-stagger > *:nth-child(3),
.animate-stagger > *:nth-child(3) { animation-delay: 100ms; }
.jk-animate-stagger > *:nth-child(4),
.animate-stagger > *:nth-child(4) { animation-delay: 150ms; }
.jk-animate-stagger > *:nth-child(5),
.animate-stagger > *:nth-child(5) { animation-delay: 200ms; }
.jk-animate-stagger > *:nth-child(6),
.animate-stagger > *:nth-child(6) { animation-delay: 250ms; }

/* Slide in from right */
.animate-slide-in-right {
    animation: jk-slide-in-right var(--jk-duration-normal) var(--jk-ease-default);
}

@keyframes jk-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Streak pulse */
.animate-streak-pulse {
    animation: jk-streak-pulse 2s ease-in-out infinite;
}

/* ============================================
   AUDIO PLAYER
   ============================================ */

.audio-btn {
    position: relative;
    transition:
        transform var(--jk-duration-fast) var(--jk-ease-default),
        background-color var(--jk-duration-fast) var(--jk-ease-default);
}

.audio-btn:hover {
    transform: scale(1.1);
}

.audio-btn:active {
    transform: scale(0.95);
}

.audio-btn.playing {
    animation: audio-ripple 1s ease-out infinite;
}

.audio-btn.playing::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(13, 115, 119, 0.5);
    border-radius: inherit;
    animation: audio-ring 1s ease-out infinite;
}

@keyframes audio-ripple {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes audio-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

.animate-audio-wave-1 {
    animation: audio-wave 0.6s ease-in-out infinite;
    animation-delay: 0s;
}

.animate-audio-wave-2 {
    animation: audio-wave 0.6s ease-in-out infinite;
    animation-delay: 0.15s;
}

.animate-audio-wave-3 {
    animation: audio-wave 0.6s ease-in-out infinite;
    animation-delay: 0.3s;
}

@keyframes audio-wave {
    0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.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;
}

:focus-visible {
    outline: 2px solid var(--jk-primary);
    outline-offset: 2px;
}

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

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 639px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 640px) {
    .hide-desktop {
        display: none !important;
    }
}

.table-scroll-wrapper {
    position: relative;
}

.table-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem;
    background: linear-gradient(to left, var(--jk-background), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--jk-duration-normal) var(--jk-ease-default);
}

@media (max-width: 767px) {
    .table-scroll-wrapper::after {
        opacity: 0.8;
    }
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */

html, body {
    max-width: 100vw;
}

/* overflow-x on body only (NOT html).
   Per CSS spec, when html has non-visible overflow, both the viewport AND html
   become scroll containers, creating nested scrolling that breaks touch/wheel
   scrolling on many pages. By setting overflow-x only on body, the spec's
   propagation rule kicks in: body's overflow propagates to the viewport, and
   body's own used overflow becomes 'visible' — resulting in a single scroll
   container (the viewport). */
body {
    overflow-x: hidden;
}

/* Fix: DaisyUI drawer-side is position:fixed covering the full viewport by default
   (width:100%; height:100dvh) with overflow:hidden, even when the drawer is closed.
   This invisible overlay can intercept scroll events and prevent mouse wheel scrolling
   on the underlying page content. By setting visibility:hidden on the unchecked state,
   the overlay is removed from the rendering tree entirely. DaisyUI already sets
   visibility:visible when .drawer-toggle:checked, so the drawer still works when opened. */
.drawer-side {
    visibility: hidden;
}

@media (max-width: 640px) {
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
    }

    .jk-rating-btn,
    .quality-btn {
        min-height: 48px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Mobile-optimized cards - cap height to leave room for buttons */
    .jk-card-flashcard,
    .flashcard {
        min-height: 180px;
        max-height: min(240px, 35vh);
    }

    .flashcard-face {
        padding: var(--jk-space-3) var(--jk-space-4);  /* 0.75rem 1rem */
    }

    /* Smaller flashcard word on mobile */
    .jk-flashcard-word,
    .flashcard-word {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    /* Tighter container padding on mobile */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Prevent zoom on input focus (iOS Safari) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

@media (max-width: 1023px) {
    .drawer-side .menu a,
    .drawer-side .menu button {
        min-height: 52px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .no-print {
        display: none !important;
    }

    .flashcard {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .jamkham-bg-pattern {
        display: none;
    }
}

/* ============================================
   COMPONENT ENHANCEMENTS
   ============================================ */

.stat {
    background: var(--jk-surface);
    border: 1px solid var(--jk-border-light);
    transition: transform var(--jk-duration-fast) var(--jk-ease-default);
}

.stat:hover {
    transform: translateY(-2px);
}

.stat-value {
    font-family: var(--jk-font-heading);
    font-weight: var(--jk-font-bold);
}

.stat-title {
    font-family: var(--jk-font-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6875rem;
    opacity: 0.7;
}

.stat-desc {
    font-family: var(--jk-font-body);
    opacity: 0.6;
}

/* Hero section: Clean, let content speak
   No complex layered gradients */

.hero-gradient {
    background: var(--jk-background);
}

/* Navbar: White background for clear contrast with warm page
   Hand-crafted: Intentional contrast, not blending */

.navbar {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="jamkham-dark"] .navbar {
    background: rgba(30, 40, 54, 0.97);
}

.navbar-brand {
    font-family: var(--jk-font-heading);
    font-weight: var(--jk-font-bold);
    letter-spacing: -0.02em;
}

/* Dropdown menus: Solid background, proper stacking */
.dropdown-content {
    background-color: var(--jk-surface) !important;
    z-index: 100 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* Modal z-index fix: Ensure modal-box appears above backdrop */
.modal {
    z-index: 9999 !important;
    isolation: isolate;
}

.modal .modal-box {
    z-index: 10 !important;
    position: relative;
    background-color: var(--jk-surface, oklch(var(--b1)));
}

.modal .modal-backdrop,
.modal > label.modal-backdrop {
    z-index: 1 !important;
    position: absolute;
    inset: 0;
}

/* Alternative: Use the ~ selector in case structure is different */
.modal-toggle:checked ~ .modal .modal-box,
.modal:has(.modal-toggle:checked) .modal-box {
    z-index: 10 !important;
}

/* Ensure modal toggle checkbox works correctly */
.modal-toggle:checked + .modal,
.modal:target,
.modal[open] {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

/* Force modal-box to be above everything when modal is visible */
.modal-toggle:checked + .modal .modal-box {
    position: relative;
    z-index: 10 !important;
}

[data-theme="jamkham-dark"] .dropdown-content {
    background-color: oklch(var(--b2)) !important;
}

/* Feature cards */
.feature-card {
    background: var(--jk-surface);
    border: 1px solid var(--jk-border-light);
    border-radius: var(--jk-card-radius-md);
    padding: var(--jk-space-8);
    text-align: center;
    transition:
        transform var(--jk-duration-normal) var(--jk-ease-default),
        box-shadow var(--jk-duration-normal) var(--jk-ease-default),
        border-color var(--jk-duration-normal) var(--jk-ease-default);
}

/* Feature card hover: Subtle, professional */
.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--jk-shadow-md);
}

/* Feature icon: Simple tinted background, no gradient */
.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--jk-card-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--jk-space-6);
    background: rgba(13, 115, 119, 0.08);
}

/* Alerts/Toast */
.alert {
    border-radius: var(--jk-card-radius-sm);
    border-width: 1px;
}

.alert-success {
    background: var(--jk-success-bg);
    border-color: rgba(34, 160, 107, 0.4);
    color: var(--jk-success-dark);
}

.alert-success svg {
    color: var(--jk-success);
}

.alert-warning {
    background: var(--jk-warning-bg);
    border-color: rgba(233, 168, 59, 0.4);
    color: var(--jk-warning-dark);
}

.alert-warning svg {
    color: var(--jk-warning);
}

.alert-error {
    background: var(--jk-error-bg);
    border-color: rgba(194, 93, 57, 0.4);
    color: var(--jk-error-dark);
}

.alert-error svg {
    color: var(--jk-error);
}

.alert-info {
    background: var(--jk-info-bg);
    border-color: rgba(13, 115, 119, 0.4);
    color: var(--jk-info-dark);
}

.alert-info svg {
    color: var(--jk-info);
}

/* Dark mode alert overrides for better visibility */
[data-theme="jamkham-dark"] .alert-success,
[data-theme="jamkham-dark"] .alert-warning,
[data-theme="jamkham-dark"] .alert-error,
[data-theme="jamkham-dark"] .alert-info {
    color: var(--jk-text);
}

[data-theme="jamkham-dark"] .alert-success {
    background: rgba(34, 160, 107, 0.2);
}

[data-theme="jamkham-dark"] .alert-warning {
    background: rgba(233, 168, 59, 0.2);
}

[data-theme="jamkham-dark"] .alert-error {
    background: rgba(194, 93, 57, 0.2);
}

[data-theme="jamkham-dark"] .alert-info {
    background: rgba(13, 115, 119, 0.2);
}

/* Badges: Solid colors, no gradients */
.badge-primary {
    background: var(--jk-primary);
    color: var(--jk-text-inverse);
}

.badge-secondary {
    background: var(--jk-secondary);
    color: var(--jk-text);
}

.badge-accent {
    background: var(--jk-accent);
    color: var(--jk-text-inverse);
}

/* Divider */
.divider {
    font-family: var(--jk-font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
}

.divider::before,
.divider::after {
    background: linear-gradient(90deg, transparent, var(--jk-border), transparent);
    height: 1px;
}

/* Tooltip */
.tooltip::before {
    font-family: var(--jk-font-body);
    font-size: 0.8125rem;
}

/* ============================================
   AUTH PAGES
   ============================================ */

.auth-input {
    transition:
        border-color var(--jk-duration-fast) var(--jk-ease-default),
        box-shadow var(--jk-duration-fast) var(--jk-ease-default);
}

.auth-input:focus {
    outline: none;
    border-color: var(--jk-primary);
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.15);
}

.auth-input:focus-visible {
    outline: none;
}

.auth-input.input-error:focus {
    border-color: var(--jk-error);
    box-shadow: 0 0 0 3px rgba(194, 93, 57, 0.15);
}

.social-provider-btn {
    transition:
        transform var(--jk-duration-fast) var(--jk-ease-default),
        box-shadow var(--jk-duration-fast) var(--jk-ease-default),
        background-color var(--jk-duration-fast) var(--jk-ease-default);
}

.social-provider-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--jk-border);
}

.social-provider-btn:active {
    transform: translateY(0);
}

/* Auth card: Clean with single color accent
   Hand-crafted: Intentional simplicity */

.auth-card {
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--jk-primary);
    border-radius: var(--jk-card-radius-md) var(--jk-card-radius-md) 0 0;
}

/* Auth page background: Simple, clean, focused
   Let users concentrate on the task at hand */

.auth-page-bg {
    background: var(--jk-background);
    min-height: 100vh;
}

.password-strength {
    height: 4px;
    border-radius: 2px;
    background: var(--jk-surface-sunken);
    overflow: hidden;
    margin-top: var(--jk-space-2);
}

.password-strength-bar {
    height: 100%;
    transition: width var(--jk-duration-normal) var(--jk-ease-default),
                background-color var(--jk-duration-normal) var(--jk-ease-default);
}

.password-strength-bar.weak { width: 25%; background: var(--jk-error); }
.password-strength-bar.fair { width: 50%; background: var(--jk-warning); }
.password-strength-bar.good { width: 75%; background: var(--jk-info); }
.password-strength-bar.strong { width: 100%; background: var(--jk-success); }

@keyframes auth-fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-card-animate {
    animation: auth-fade-in var(--jk-duration-slow) var(--jk-ease-default);
}

/* Removed floating animation - too distracting
   Static decorations are more professional */

.auth-decoration {
    /* No animation - static is more professional */
}

/* ============================================
   DEMO MODE STYLES
   Clean, professional preview
   ============================================ */

/* Demo feature preview: Simple, no shimmer animation */
.demo-feature-preview {
    position: relative;
}

.demo-audio-btn {
    position: relative;
}

.demo-audio-btn::after {
    content: 'Demo';
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

.demo-badge-pulse {
    animation: demo-badge-pulse 2s ease-in-out infinite;
}

@keyframes demo-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.demo-progress-header {
    background: var(--jk-surface-sunken);
}

.demo-rating-btn {
    transition: all var(--jk-duration-fast) var(--jk-ease-default);
}

.demo-rating-btn:hover {
    transform: translateY(-2px);
}

.demo-rating-btn:active {
    transform: translateY(0);
}

/* ============================================
   REVIEW SESSION - ZONE-BASED LAYOUT

   The viewport is divided into 4 fixed zones:
   1. STATUS BAR (40px) - card count, progress dots, timer
   2. PROMPT ZONE (40-45%) - Thai/English display + audio
   3. INPUT/INFO ZONE (flex) - The ONLY dynamic zone
   4. RATING ZONE (80px mobile) - Always at bottom

   This guarantees rating buttons are ALWAYS visible.
   ============================================ */

/* Main container - anchored between navbar and bottom nav
   Uses 100dvh (dynamic viewport height) which DOES change with Safari's address bar.
   This ensures content is always visible regardless of browser chrome state.
   Fallback to 100vh for browsers without dvh support. */
.review-session-container {
    display: flex;
    flex-direction: column;
    max-width: 32rem;
    margin: 0 auto;
    overflow: hidden;
    background: oklch(var(--b1));
    /* Default: full dynamic viewport (fallback first, then override) */
    height: 100vh; /* fallback for browsers without dvh support */
    height: 100dvh;
}

/* Mobile: anchor between navbar (3rem) and bottom nav (4rem) */
@media (max-width: 1023px) {
    .review-session-container {
        /* 100dvh = dynamic viewport height (adjusts with Safari address bar)
           Subtract navbar (3rem/48px) + bottom nav (4rem/64px)
           Fallback first, then override with modern value */
        height: calc(100vh - 3rem - 4rem); /* fallback */
        height: calc(100dvh - 3rem - 4rem);
    }
}

/* Desktop: no bottom nav, just subtract navbar (4rem) */
@media (min-width: 1024px) {
    .review-session-container {
        height: calc(100vh - 4rem); /* fallback */
        height: calc(100dvh - 4rem);
        max-width: 36rem;
        padding: 1rem;
    }
}

/* ============================================
   ZONES WRAPPER (#review-zones)
   Contains Zones 2-4, loaded via HTMX
   P0-001 Fix: Keep overflow hidden on outer wrapper,
   but Zone 3 inside handles its own scrolling.
   ============================================ */

#review-zones {
    /* Override Tailwind overflow-hidden - keep it for the wrapper */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Critical for flex children to shrink below content size */
    overflow: hidden; /* Prevent page-level scroll; Zone 3 handles internal scroll */
}

/* When session complete content is present, allow scrolling for results */
#review-zones:has([data-session-complete]) {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   ZONE 1: STATUS BAR - Fixed 40px
   ============================================ */

.review-status-bar {
    flex-shrink: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    background: var(--jk-surface-sunken, oklch(var(--b2)));
    border-bottom: 1px solid var(--jk-border-light, oklch(var(--b3)));
    font-size: 0.8125rem;
    gap: 0.75rem;
}

.status-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.status-progress .card-count {
    color: oklch(var(--bc));
}

.status-progress .card-total {
    color: oklch(var(--bc) / 0.5);
}

.status-dots {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.status-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: oklch(var(--b3));
}

.status-dots .dot-correct {
    background: var(--jk-success, oklch(var(--su)));
}

.status-dots .dot-incorrect {
    background: var(--jk-warning, oklch(var(--wa)));
}

.status-timer {
    font-family: var(--jk-font-mono, ui-monospace, monospace);
    color: var(--jk-warning, oklch(var(--wa)));
    font-size: 0.75rem;
}

.status-end-btn {
    padding: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: oklch(var(--bc) / 0.5);
    border-radius: 0.25rem;
}

.status-end-btn:hover {
    color: oklch(var(--bc));
    background: oklch(var(--b3));
}

@media (min-width: 640px) {
    .review-status-bar {
        height: 44px;
        padding: 0 1rem;
        font-size: 0.875rem;
    }
}

/* ============================================
   ZONE 2: PROMPT DISPLAY - Flex-based sizing
   Shows Thai script OR English prompt + audio
   Note: Using flex instead of percentage height (percentages don't resolve in flex containers)
   ============================================ */

.review-prompt-zone {
    /* flex-grow: 2 means this zone takes 2 parts of available space */
    flex: 2 0 auto;
    min-height: 120px;
    /* Phase 1.2: Reduced from 260px to leave more space for Zone 3 (input/info) on mobile */
    max-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--jk-border-light, oklch(var(--b3)));
}

.prompt-thai-display {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: clamp(2.25rem, 10vw, 4rem);
    font-weight: 600;
    color: var(--jk-primary, oklch(var(--p)));
    line-height: 1.2;
    word-break: keep-all;
}

.prompt-english-display {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    font-weight: 500;
    color: oklch(var(--bc));
    line-height: 1.3;
    /* P1-003: Constrain English prompts to prevent horizontal overflow */
    max-width: 280px;
    word-break: break-word;
    /* P2-001: Enhanced word-break for long text */
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.prompt-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.prompt-audio-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.prompt-audio-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--jk-surface-sunken, oklch(var(--b2)));
    border: 1px solid var(--jk-border, oklch(var(--b3)));
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.15s ease;
    color: oklch(var(--bc) / 0.7);
}

.prompt-audio-btn:hover {
    background: var(--jk-primary-50, oklch(var(--p) / 0.1));
    color: var(--jk-primary, oklch(var(--p)));
}

.prompt-audio-btn:active {
    transform: scale(0.95);
}

.prompt-context {
    font-size: 0.8125rem;
    color: oklch(var(--bc) / 0.6);
    font-style: italic;
    max-width: 280px;
}

@media (min-width: 640px) {
    .review-prompt-zone {
        min-height: 140px;
        /* Phase 1.2: Reduced from 300px on desktop */
        max-height: 220px;
        padding: 1rem 1.5rem;
        gap: 0.75rem;
    }

    /* P1-003: Wider max-width for English prompts on desktop */
    .prompt-english-display {
        max-width: 360px;
    }
}

/* ============================================
   ZONE 3: INPUT/INFO DISPLAY - The only dynamic zone
   Shows: Show Answer btn, text input, or answer/feedback
   ============================================ */

.review-input-zone {
    /* flex-grow: 3 means this zone takes 3 parts of available space (larger than prompt zone) */
    flex: 3 1 0%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* P0-001 Fix: Change from center to flex-start so content scrolls naturally from top */
    justify-content: flex-start;
    padding: 0.75rem;
    /* P0-001 Fix: Allow Zone 3 to scroll when content exceeds available space.
       This ensures rating buttons (Zone 4) stay visible on small screens.
       The "scroll to see prompt" issue is avoided because Zone 2 (prompt) is separate. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Traveller reveal zone: block layout so position:sticky works on rating zone.
   Flex layout prevents sticky from pinning the last child at bottom. */
.traveller-reveal-zone {
    display: block;
}

/* Show Answer button */
.show-answer-btn {
    width: 100%;
    max-width: 280px;
    min-height: 52px;
    font-size: 1rem;
    font-weight: 600;
}

/* Hint toggle link */
.hint-toggle-btn {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: oklch(var(--bc) / 0.5);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
}

.hint-toggle-btn:hover {
    color: oklch(var(--bc) / 0.7);
}

.hint-content {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: oklch(var(--bc) / 0.6);
    font-style: italic;
}

/* Answer display (after reveal) */
.answer-display {
    text-align: center;
    width: 100%;
    max-width: 320px;
    /* P0-001 Fix: Removed max-height and overflow:hidden constraints.
       Zone 3 now handles scrolling, so answer content can be as tall as needed. */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.answer-thai {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    font-weight: 600;
    color: var(--jk-primary, oklch(var(--p)));
    margin-bottom: 0.375rem;
    line-height: 1.2;
}

.answer-romanization {
    font-size: 0.9375rem;
    color: oklch(var(--bc) / 0.6);
    font-style: italic;
    margin-bottom: 0.25rem;
    /* P2-001: Prevent romanization overflow */
    word-break: break-word;
    overflow-wrap: anywhere;
}

.answer-english {
    font-size: 1.125rem;
    font-weight: 500;
    color: oklch(var(--bc));
    margin-bottom: 0.5rem;
}

.answer-badges {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.375rem;
    /* P1-003: Constrain answer badges to prevent Zone 3 overflow */
    max-height: 120px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   P1-003: Content Overflow Constraints
   Bounded scrollable areas within Zone 3 to prevent
   content from pushing Zone 4 (rating buttons) off-screen
   ============================================ */

/* Feedback zones for production, cloze, and listening cards */
#production-feedback-zone,
#cloze-feedback-zone,
#listening-feedback-zone {
    max-height: 250px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* ============================================
   Phase 1.3: Progressive Content Hiding
   Hide less important content on small viewports
   to ensure core content + rating buttons fit
   ============================================ */

/* P2-004: iPhone SE and similar small phones (667px viewport height)
   This breakpoint provides moderate optimization for iPhone SE/8.
   Must come BEFORE 600px and 550px breakpoints for proper cascade. */
@media (max-height: 670px) {
    /* Hide example sentences by default - can be toggled via .force-show */
    .example-content:not(.force-show) {
        display: none;
    }

    /* Reduce padding for more content space */
    .review-prompt-zone {
        padding: 0.5rem 0.75rem;
    }

    .review-input-zone {
        padding: 0.5rem;
    }

    /* Slightly smaller answer display */
    .answer-thai {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .answer-romanization {
        font-size: 0.8125rem;
    }

    /* Compact answer badges */
    .answer-badges {
        gap: 0.25rem;
    }

    .answer-badges .badge {
        padding: 0.125rem 0.375rem;
        font-size: 0.625rem;
    }
}

/* Small screens - hide secondary content (must come BEFORE 550px for cascade) */
@media (max-height: 600px) {
    .example-content,
    .example-section {
        display: none !important;
    }
}

/* Very small screens (iPhone SE landscape, small phones) */
@media (max-height: 550px) {
    .example-content,
    .example-section,
    .answer-badges,
    .additional-glosses {
        display: none !important;
    }

    .answer-thai {
        font-size: 1.5rem;
    }

    .answer-english {
        font-size: 1rem;
    }
}

/* Feedback badges */
.feedback-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.feedback-correct {
    background: rgba(34, 160, 107, 0.15);
    border: 1px solid rgba(34, 160, 107, 0.3);
    color: #166534;
}

[data-theme="dark"] .feedback-correct {
    color: #86efac;
}

.feedback-incorrect {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #92400e;
}

[data-theme="dark"] .feedback-incorrect {
    color: #fcd34d;
}

/* ============================================
   ANSWER COMPARISON & DIFF HIGHLIGHTING
   ============================================ */

/* User answer display container */
.user-answer-section {
    margin-top: 1rem;
    width: 100%;
    max-width: 320px;
}

.user-answer-display {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    padding: 0.5rem 0.75rem;
    background: var(--jk-surface-sunken, #F4F0E8);
    border-radius: 0.375rem;
    border: 1px solid var(--jk-border-light, oklch(var(--bc) / 0.15));
    text-align: center;
    margin: 0.5rem 0;
    line-height: 1.4;
}

/* Diff segment base styling */
.diff-segment {
    display: inline;
    padding: 0 0.125rem;
    border-radius: 0.125rem;
    position: relative;
}

/* Tone error highlighting - Amber background with wavy underline */
.diff-tone-error {
    background: var(--jk-warning-bg, rgba(245, 158, 11, 0.2));
    border-bottom: 2px wavy var(--jk-warning, #f59e0b);
    color: var(--jk-warning-dark, #92400e);
}

[data-theme="dark"] .diff-tone-error {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

/* Same-sound consonant error - Blue background with dotted underline */
.diff-consonant-error {
    background: var(--jk-info-bg, rgba(59, 130, 246, 0.15));
    border-bottom: 2px dotted var(--jk-info, #3b82f6);
    color: var(--jk-info-dark, #1e40af);
}

[data-theme="dark"] .diff-consonant-error {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}

/* Completely wrong character - Red background with strikethrough */
.diff-wrong {
    background: var(--jk-error-bg, rgba(239, 68, 68, 0.15));
    text-decoration: line-through;
    opacity: 0.7;
    color: var(--jk-error-dark, #991b1b);
}

[data-theme="dark"] .diff-wrong {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

/* Correct character (for context) - no special styling */
.diff-correct {
    /* No special styling - just normal text */
}

/* Pedagogical hint message */
.diff-hint {
    font-size: 0.8125rem;
    color: var(--jk-text-muted, #677D98);
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--jk-surface-sunken, #F4F0E8);
    border-radius: 0.25rem;
    line-height: 1.4;
}

[data-theme="dark"] .diff-hint {
    background: oklch(var(--b2));
}

/* Error type badge */
.diff-error-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 600;
}

.diff-error-badge-tone {
    background: var(--jk-warning-bg, rgba(245, 158, 11, 0.2));
    color: var(--jk-warning-dark, #92400e);
}

[data-theme="dark"] .diff-error-badge-tone {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

.diff-error-badge-consonant {
    background: var(--jk-info-bg, rgba(59, 130, 246, 0.15));
    color: var(--jk-info-dark, #1e40af);
}

[data-theme="dark"] .diff-error-badge-consonant {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}

/* Thai input field */
.thai-input-wrapper {
    width: 100%;
    max-width: 280px;
    margin-bottom: 0.75rem;
}

.thai-input-label {
    display: block;
    font-size: 0.8125rem;
    color: oklch(var(--bc) / 0.6);
    margin-bottom: 0.5rem;
    text-align: center;
}

.thai-input-field {
    width: 100%;
    height: 48px;
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: 1.25rem;
    text-align: center;
    border: 2px solid var(--jk-border, oklch(var(--b3)));
    border-radius: 0.5rem;
    background: oklch(var(--b1));
    padding: 0 1rem;
    color: oklch(var(--bc));
}

.thai-input-field:focus {
    outline: none;
    border-color: var(--jk-primary, oklch(var(--p)));
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.15);
}

.thai-input-hint {
    font-size: 0.6875rem;
    color: oklch(var(--bc) / 0.4);
    margin-top: 0.25rem;
    text-align: center;
}

.check-answer-btn {
    width: 100%;
    max-width: 280px;
    min-height: 48px;
}

.skip-btn {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: oklch(var(--bc) / 0.5);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.skip-btn:hover {
    color: oklch(var(--bc) / 0.7);
    text-decoration: underline;
}

/* Example sentence toggle */
.example-toggle-btn {
    font-size: 0.75rem;
    color: oklch(var(--bc) / 0.5);
    text-decoration: underline;
    margin-top: 0.75rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
}

.example-content {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--jk-surface-sunken, oklch(var(--b2)));
    border-radius: 0.5rem;
    text-align: left;
    font-size: 0.875rem;
    width: 100%;
    max-width: 320px;
}

.example-thai {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: 1rem;
    color: oklch(var(--bc));
    margin-bottom: 0.25rem;
    /* P1-003: Truncate long Thai sentences to prevent horizontal overflow */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* P2-001: Thai has no word boundaries, break at container edge */
    word-break: break-all;
    line-height: 1.6;
}

.example-romanization {
    font-size: 0.8125rem;
    color: oklch(var(--bc) / 0.6);
    font-style: italic;
    margin-bottom: 0.25rem;
    /* P2-001: Prevent romanization overflow */
    word-break: break-word;
    overflow-wrap: anywhere;
}

.example-english {
    font-size: 0.8125rem;
    color: oklch(var(--bc) / 0.7);
}

@media (min-width: 640px) {
    .review-input-zone {
        padding: 1rem;
    }
}

/* ============================================
   ZONE 4: RATING BUTTONS - Fixed at bottom
   Hidden until answer revealed, then appears

   P0-001 Fix: Removed position:sticky (doesn't work with overflow:hidden parent).
   Instead, Zone 4 stays at bottom via flexbox: flex-shrink:0 ensures it never
   shrinks, and Zone 3's overflow-y:auto allows scrolling within Zone 3 only.
   ============================================ */

.review-rating-zone {
    /* P0-001 Fix: flex-shrink:0 ensures this zone NEVER shrinks.
       Combined with Zone 3's overflow-y:auto, rating buttons always stay visible. */
    flex-shrink: 0;
    padding: 0.5rem;
    /* Always include safe area padding for devices with home indicator/address bar */
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    background: oklch(var(--b1));
    border-top: 1px solid var(--jk-border-light, oklch(var(--b3)));
    /* P0-001 Fix: Ensure Zone 4 is always painted on top if anything overlaps */
    z-index: 20;
}

/* Hidden state */
.review-rating-zone[data-state="hidden"] {
    display: none;
}

/* Visible state - no longer needs sticky positioning (P0-001 fix) */
.review-rating-zone[data-state="visible"] {
    /* Flexbox handles positioning now. Zone 4 stays at bottom because:
       1. Parent is flex-direction: column
       2. Zone 3 has flex: 3 1 0% (grows to fill space)
       3. Zone 4 has flex-shrink: 0 (never shrinks)
       4. Zone 3 has overflow-y: auto (scrolls internally if content exceeds space) */
}

.rating-button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
}

@media (min-width: 640px) {
    .review-rating-zone {
        padding: 0.5rem 0.75rem;
    }

    .rating-button-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }
}

/* Rating buttons */
.rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.375rem 0.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.rating-btn:hover {
    transform: translateY(-1px);
}

.rating-btn:active {
    transform: translateY(0);
}

.rating-btn-label {
    font-size: 0.8125rem;
    line-height: 1;
}

.rating-btn-interval {
    font-size: 0.6875rem;
    font-family: var(--jk-font-mono, ui-monospace, monospace);
    opacity: 0.85;
    margin-top: 0.125rem;
}

/* Rating button colors */
.rating-btn-again {
    background: var(--jk-rating-again, #f59e0b);
    color: white;
}

.rating-btn-hard {
    background: var(--jk-rating-hard, #fcd34d);
    color: #78350f;
}

.rating-btn-good {
    background: var(--jk-rating-good, #0d7377);
    color: white;
    box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.2);
}

.rating-btn-easy {
    background: var(--jk-rating-easy, #10b981);
    color: white;
}

/* ============================================
   INTRODUCTION CARD STYLES
   Passive learning card for traveller mode.
   Shows all info upfront, no testing.
   ============================================ */

/* Introduction prompt zone - visual distinction from test cards.
   Override max-height so romanization + meaning + audio fit without overflow. */
.introduction-card .review-prompt-zone {
    border-left: 4px solid var(--jk-primary, oklch(var(--p)));
    background: linear-gradient(135deg, oklch(var(--p) / 0.04), transparent);
    padding-left: 1.25rem;
    max-height: 220px;
}

/* Romanization - PRIMARY element (largest, most prominent) */
.intro-romanization {
    font-family: var(--jk-font-heading, system-ui);
    font-size: clamp(1.75rem, 8vw, 2.75rem);
    font-weight: 700;
    color: var(--jk-primary, oklch(var(--p)));
    line-height: 1.2;
    margin: 0.5rem 0 0.25rem;
    text-align: center;
}

/* English meaning - PROMINENT but secondary to romanization */
.intro-english {
    font-family: var(--jk-font-body, system-ui);
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    font-weight: 600;
    color: oklch(var(--bc));
    text-align: center;
    margin: 0.25rem 0;
}

/* Audio section */
.intro-audio {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 0;
}

/* Thai script - shown in Zone 3, de-emphasized */
.intro-thai {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: 1.125rem;
    color: oklch(var(--bc) / 0.5);
    text-align: center;
}

/* Context/info section */
.introduction-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

/* Example sentence */
.intro-example {
    text-align: center;
    padding: 0.5rem 0;
}

/* Usage/cultural tip */
.intro-tip {
    background: oklch(var(--b2));
    border-radius: var(--jk-radius, 0.5rem);
    padding: 0.625rem 0.875rem;
    text-align: center;
}

/* Transition hint - primes user for upcoming test */
.intro-transition-hint {
    font-size: 0.8125rem;
    color: oklch(var(--bc) / 0.45);
    font-style: italic;
    text-align: center;
    margin-top: 0.25rem;
}

/* Got it button - full width, prominent, always visible */
.introduction-action {
    padding: 0.5rem 0;
}

.introduction-got-it-btn {
    font-size: 1.125rem;
    min-height: 3.25rem;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .intro-romanization {
        font-size: clamp(1.5rem, 7vw, 2.25rem);
    }

    .intro-english {
        font-size: clamp(1.125rem, 4.5vw, 1.5rem);
    }

    .introduction-card .review-prompt-zone {
        padding-left: 1rem;
        max-height: 180px;
    }
}



/* ============================================
   TRAVELLER MODE VISUAL HIERARCHY
   Reverses display priority for all card types:
   Romanization > English > Thai script
   Applied via .traveller-mode class on session container.
   ============================================ */

/* Prompt zone: show romanization prominently, de-emphasize Thai */
.traveller-mode .prompt-thai-display {
    font-size: clamp(1rem, 4vw, 1.25rem);
    font-weight: 400;
    color: oklch(var(--bc) / 0.45);
    order: 3;
}

.traveller-mode .prompt-romanization-display {
    font-family: var(--jk-font-heading, system-ui);
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 600;
    color: var(--jk-primary, oklch(var(--p)));
    line-height: 1.2;
    order: 1;
    display: block;
}

/* Answer zone: same reversal */
.traveller-mode .answer-romanization {
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 600;
    color: var(--jk-primary, oklch(var(--p)));
    font-style: normal;
    order: 1;
}

.traveller-mode .answer-english {
    font-size: 1.375rem;
    font-weight: 600;
    order: 2;
}

.traveller-mode .answer-thai {
    font-size: 1rem;
    font-weight: 400;
    color: oklch(var(--bc) / 0.45);
    order: 3;
}

/* Traveller mobile adjustments */
@media (max-width: 480px) {
    .traveller-mode .prompt-romanization-display {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .traveller-mode .answer-romanization {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
}

/* ============================================
   Phase 1.5: Tone Button Grid
   3-over-2 layout on mobile for larger touch targets
   5 columns on desktop
   ============================================ */

.tone-button-grid {
    display: grid;
    /* Base/fallback: 3 columns. Mobile centering handled in @media below */
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    justify-items: center;
}

.tone-btn {
    min-height: 48px;
    min-width: 0;
    width: 100%;
}

/* Last two buttons (High, Rise) span the bottom row centered */
.tone-button-grid .tone-btn:nth-child(4),
.tone-button-grid .tone-btn:nth-child(5) {
    grid-column: span 1;
}

/* On mobile, center the last row with 2 buttons */
@media (max-width: 639px) {
    .tone-button-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    /* First 3 buttons take 2 columns each (full width) */
    .tone-button-grid .tone-btn:nth-child(1),
    .tone-button-grid .tone-btn:nth-child(2),
    .tone-button-grid .tone-btn:nth-child(3) {
        grid-column: span 2;
    }

    /* Last 2 buttons span 3 columns each, centered */
    .tone-button-grid .tone-btn:nth-child(4),
    .tone-button-grid .tone-btn:nth-child(5) {
        grid-column: span 3;
    }
}

/* Desktop: 5 columns in a single row */
@media (min-width: 640px) {
    .tone-button-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .tone-button-grid .tone-btn {
        grid-column: span 1;
    }
}

/* ============================================
   CLASSIFIER OPTION GRID
   2x2 layout for 4 multiple choice classifier options
   Designed for touch-friendly selection without typing
   ============================================ */

.classifier-option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    justify-items: center;
    padding: 0 0.5rem;
}

.classifier-option {
    min-height: 64px;
    min-width: 0;
    width: 100%;
    padding: 0.75rem 0.5rem;
    border-radius: var(--jk-card-radius-sm, 0.75rem);
    transition: all var(--jk-duration-fast, 150ms) var(--jk-ease-default);
    border: 2px solid var(--jk-border, rgba(45, 52, 54, 0.12));
    background: var(--jk-surface, #ffffff);
}

/* Thai script styling within classifier options */
.classifier-option .font-thai {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--jk-text, #2d3436);
    line-height: 1.3;
}

/* Romanization hint */
.classifier-option .text-xs {
    color: var(--jk-text-muted, #677d98);
    font-size: 0.75rem;
}

/* Hover state for desktop */
.classifier-option:hover {
    border-color: var(--jk-primary, #1a5362);
    background: var(--jk-primary-50, #f0f7f9);
    transform: translateY(-1px);
    box-shadow: var(--jk-shadow-sm);
}

/* Active/pressed state */
.classifier-option:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Focus state for accessibility */
.classifier-option:focus-visible {
    outline: 2px solid var(--jk-primary, #1a5362);
    outline-offset: 2px;
}

/* Mobile: Slightly larger touch targets */
@media (max-width: 639px) {
    .classifier-option-grid {
        gap: 0.5rem;
        padding: 0;
    }

    .classifier-option {
        min-height: 60px;
        padding: 0.625rem 0.5rem;
    }

    .classifier-option .font-thai {
        font-size: 1.375rem;
    }
}

/* Desktop: Can accommodate slightly more spacing */
@media (min-width: 640px) {
    .classifier-option-grid {
        max-width: 320px;
        margin: 0 auto;
    }

    .classifier-option {
        min-height: 72px;
    }
}

/* Dark mode adjustments */
[data-theme="jamkham-dark"] .classifier-option {
    background: var(--jk-surface, #1e2836);
    border-color: var(--jk-border, rgba(236, 240, 243, 0.15));
}

[data-theme="jamkham-dark"] .classifier-option .font-thai {
    color: var(--jk-text, #ecf0f3);
}

[data-theme="jamkham-dark"] .classifier-option:hover {
    background: var(--jk-surface-elevated, #2a3544);
    border-color: var(--jk-primary, #2dd3c8);
}

/* ============================================
   MOBILE-SPECIFIC ADJUSTMENTS
   ============================================ */

@media (max-width: 639px) {
    .review-prompt-zone {
        /* Use flex-based sizing, not percentage height */
        /* Phase 1.2: Reduced from 200px to match base max-height constraint */
        min-height: 100px;
        max-height: 180px;
        padding: 0.5rem 0.75rem;
    }

    .prompt-thai-display {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    /* Phase 1.6: Ensure audio buttons meet WCAG 44px minimum touch target */
    .prompt-audio-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .answer-thai {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .rating-btn {
        min-height: 40px;
    }

    .rating-btn-label {
        font-size: 0.75rem;
    }

    .rating-btn-interval {
        font-size: 0.625rem;
    }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .review-status-bar {
        height: 32px;
        padding: 0 0.5rem;
        font-size: 0.75rem;
    }

    .review-prompt-zone {
        /* Use flex-based sizing, not percentage height */
        min-height: 60px;
        max-height: 100px;
        padding: 0.25rem 0.5rem;
    }

    .prompt-thai-display {
        font-size: 1.5rem;
    }

    /* Phase 1.6: WCAG 2.5.5 minimum touch target (44x44px) */
    .prompt-audio-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .review-input-zone {
        padding: 0.5rem;
    }

    .review-rating-zone {
        padding: 0.25rem 0.5rem;
    }

    .rating-btn {
        min-height: 32px;
    }
}

/* ============================================
   KEYBOARD-ACTIVE COMPACT MODE
   Restructures layout when mobile keyboard is visible.
   Uses Visual Viewport API detection from review-session.js.

   Design philosophy: Instead of scrolling content (unreliable on iOS),
   we restructure the layout to fit in the available space above keyboard.
   Key: Use FIXED heights, not flex proportions, for predictable layout.
   ============================================ */

/* CSS custom properties set by JavaScript */
.review-session-container {
    --keyboard-height: 0px;
    --visible-height: 100%;
}

/* When keyboard is active, JS sets the exact height via inline styles.
   CSS here handles positioning and prevents any scrolling. */
.review-session-container.keyboard-active {
    /* Position below the sticky navbar using measured value from JS */
    position: fixed;
    top: var(--navbar-height, 48px);
    left: 0;
    right: 0;
    bottom: auto;
    /* Height is set directly by JS via inline style for precision
       The JS calculates: visualViewport.height - navbarHeight */
    /* Prevent any scrolling - layout MUST fit exactly */
    overflow: hidden !important;
    /* iOS: Prevent rubber-band scrolling and touch-based scroll */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    touch-action: none;
    /* Center the container */
    margin: 0 auto;
    /* Ensure flexbox children don't overflow */
    display: flex;
    flex-direction: column;
}

/* Prevent ALL scroll-related behaviors on keyboard-active children */
.keyboard-active #review-zones {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: manipulation;
}

.keyboard-active .review-prompt-zone,
.keyboard-active .review-input-zone {
    overscroll-behavior: none;
}

/* ============================================
   ULTRA-COMPACT KEYBOARD MODE
   Goal: Fit prompt + input + button in visible area
   with ZERO scrolling required.

   Budget breakdown (targeting ~180px content):
   - Status bar: 28px
   - Prompt zone: 52px
   - Input zone: ~100px (label 12px + input 36px + btn 36px + gaps 16px)
   Total: 180px, leaving margin for ~200-250px visible height
   ============================================ */

/* Status bar: Minimal height */
.keyboard-active .review-status-bar {
    flex-shrink: 0;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
}

/* Zone 2: Ultra-compact prompt */
.keyboard-active .review-prompt-zone {
    flex: 0 1 auto; /* Allow shrinking but not growing beyond max-height */
    height: auto;
    min-height: 40px;
    max-height: 80px; /* Increased from 52px to prevent clipping */
    padding: 0.25rem 0.5rem;
    gap: 0;
    overflow-y: auto; /* Allow scrolling if prompt is EXCEPTIONALLY long */
    border-bottom: none;
}

/* Smaller Thai text in compact mode */
.keyboard-active .prompt-thai-display {
    font-size: clamp(1.125rem, 4.5vw, 1.375rem); /* Slightly smaller max to save space */
    line-height: 1.1;
    margin: 0;
}

/* Smaller English prompt in compact mode */
.keyboard-active .prompt-english-display {
    font-size: clamp(0.875rem, 3vw, 1rem);
    line-height: 1.1;
    margin: 0;
}

/* Hide everything non-essential in compact mode, but KEEP audio buttons */
.keyboard-active .prompt-badges,
.keyboard-active .prompt-context {
    display: none !important;
}

/* Audio buttons in compact mode - make them smaller but visible */
.keyboard-active .prompt-audio-buttons {
    display: flex !important;
    margin-top: 2px;
}

.keyboard-active .prompt-audio-btn {
    /* WCAG 2.5.5: Minimum touch target even in compact mode */
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0.25rem;
    font-size: 0.875rem;
}

/* For listening cards specifically - audio is essential, maintain full WCAG compliance */
.keyboard-active [data-card-type="listening_script"] .prompt-audio-btn,
.keyboard-active [data-card-type="listening_meaning"] .prompt-audio-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

/* Zone 3: Input zone - ultra tight layout */
.keyboard-active .review-input-zone {
    flex: 1 1 0%;
    min-height: 0;
    padding: 0.25rem 0.5rem;
    justify-content: flex-start;
    align-items: center;
    /* CRITICAL: Override default overflow-y: auto to prevent iOS scroll */
    overflow: hidden !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    gap: 0.25rem;
}

/* Input wrapper - minimal margins */
.keyboard-active .thai-input-wrapper {
    margin: 0;
    width: 100%;
    max-width: 300px;
}

/* Hide label in ultra-compact - use placeholder instead */
.keyboard-active .thai-input-label {
    display: none;
}

/* Hide "Use Thai keyboard" hint */
.keyboard-active .thai-input-hint {
    display: none;
}

/* Compact input field - still touch-friendly (36px min) */
.keyboard-active .thai-input-field {
    height: 36px;
    min-height: 36px;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
}

/* Check Answer button - compact but accessible */
.keyboard-active .check-answer-btn {
    min-height: 36px;
    height: 36px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    margin: 0;
}

/* Hide skip button when keyboard is active - saves space */
.keyboard-active .skip-btn {
    display: none !important;
}

/* Zone 4: Hide rating zone when keyboard active */
.keyboard-active .review-rating-zone {
    display: none !important;
}

/* Introduction "Got it" button must always be visible — override keyboard-active hide */
.keyboard-active .introduction-card .introduction-action {
    display: block !important;
}

/* Show Answer button - compact */
.keyboard-active .show-answer-btn {
    min-height: 36px;
    height: 36px;
    max-width: 180px;
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
}

/* Hide hint toggle when keyboard active */
.keyboard-active .hint-toggle-btn {
    display: none !important;
}

/* ============================================
   TRANSITION SMOOTHING
   Prevent jarring layout shifts during keyboard
   open/close animations
   ============================================ */

.review-prompt-zone,
.review-input-zone {
    transition:
        flex 150ms ease-out,
        padding 150ms ease-out,
        height 150ms ease-out,
        max-height 150ms ease-out,
        min-height 150ms ease-out;
}

.prompt-thai-display,
.prompt-english-display {
    transition: font-size 150ms ease-out;
}

/* Disable transitions during keyboard animation to prevent jank */
.keyboard-transitioning .review-prompt-zone,
.keyboard-transitioning .review-input-zone,
.keyboard-transitioning .prompt-thai-display,
.keyboard-transitioning .prompt-english-display {
    transition: none !important;
}

/* ============================================
   LANDSCAPE KEYBOARD MODE
   Even more aggressive compaction for landscape
   where vertical space is extremely limited (~150px)
   ============================================ */

@media (max-height: 450px) and (orientation: landscape) {
    .keyboard-active .review-status-bar {
        height: 24px;
        min-height: 24px;
        max-height: 24px;
        font-size: 0.6875rem;
    }

    .keyboard-active .review-prompt-zone {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 0.125rem 0.25rem;
    }

    .keyboard-active .prompt-thai-display {
        font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    }

    .keyboard-active .prompt-english-display {
        font-size: clamp(0.75rem, 2.5vw, 0.875rem);
    }

    .keyboard-active .review-input-zone {
        padding: 0.125rem 0.25rem;
        gap: 0.125rem;
    }

    .keyboard-active .thai-input-field {
        height: 32px;
        min-height: 32px;
        font-size: 0.9375rem;
    }

    .keyboard-active .check-answer-btn,
    .keyboard-active .show-answer-btn {
        min-height: 32px;
        height: 32px;
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ============================================
   RATING ZONE ANCHORING
   Ensure rating buttons stay properly anchored
   at bottom when keyboard closes
   ============================================ */

.review-rating-zone {
    flex-shrink: 0;
    /* Use sticky positioning within flex container */
    position: sticky;
    bottom: 0;
    /* Ensure it paints on top of other content */
    z-index: 10;
    /* Solid background to cover any overflow */
    background: oklch(var(--b1));
    /* Subtle shadow for visual separation */
    box-shadow: 0 -2px 8px oklch(var(--bc) / 0.05);
}

/* Note: Safe area padding for .review-rating-zone is now in the base definition (line ~2965) */

/* ============================================
   GPU ACCELERATION & PERFORMANCE
   Promote key elements to GPU layers for
   smoother transitions
   ============================================ */

.review-session-container {
    /* Create stacking context */
    isolation: isolate;
}

.review-prompt-zone,
.review-input-zone,
.review-rating-zone {
    /* GPU acceleration for transitions */
    will-change: transform;
    /* Prevent subpixel rendering issues */
    transform: translateZ(0);
}

/* Remove will-change after transitions complete to save memory */
.review-session-container:not(.keyboard-active):not(.keyboard-transitioning) .review-prompt-zone,
.review-session-container:not(.keyboard-active):not(.keyboard-transitioning) .review-input-zone,
.review-session-container:not(.keyboard-active):not(.keyboard-transitioning) .review-rating-zone {
    will-change: auto;
}

/* Optimize input field rendering */
.thai-input-field {
    /* Prevent iOS zoom on focus (font-size must be >= 16px) */
    font-size: max(1rem, 16px);
    /* Hardware acceleration */
    transform: translateZ(0);
}

/* Input focus state indicator */
.thai-input-wrapper.input-focused .thai-input-field {
    border-color: var(--jk-primary, oklch(var(--p)));
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.2);
}

/* ============================================
   UNDO TOAST - Subtle, non-blocking notification
   ============================================ */

.undo-toast {
    position: fixed;
    top: 3.5rem; /* Below status bar (40px) + small gap */
    right: 0.75rem;
    z-index: 40;
    animation: undo-slide-in 0.25s ease-out;
}

@media (min-width: 640px) {
    .undo-toast {
        top: 4rem;
        right: 1rem;
    }
}

.undo-toast-content {
    display: flex;
}

.undo-toast-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(var(--bc) / 0.7);
    background: oklch(var(--b2));
    border: 1px solid oklch(var(--b3));
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.undo-toast-btn:hover {
    color: oklch(var(--wa));
    border-color: oklch(var(--wa) / 0.5);
    background: oklch(var(--wa) / 0.1);
}

.undo-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    background: oklch(var(--b3));
    border-radius: 50%;
    color: oklch(var(--bc) / 0.6);
}

.undo-toast-hide {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.2s ease-out;
}

@keyframes undo-slide-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   LEGACY SUPPORT - Map old classes
   ============================================ */

.review-viewport-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.review-card-area {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Keep these for backwards compatibility during transition */
.review-card-fixed-footer,
.review-card-viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ============================================
   QUICK MODE SELECTOR - Bottom Sheet
   Mobile-first design for contextual mode selection
   ============================================ */

.mode-selector-page {
    position: fixed;
    inset: 0;
    z-index: 50;
}

/* When mode selector children are hidden (Alpine x-show=false), prevent blocking */
.mode-selector-page:has([style*="display: none"]) {
    pointer-events: none;
}

.quick-mode-selector {
    position: relative;
    z-index: 50;
}

/* Backdrop */
.quick-mode-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Bottom Sheet Container */
.quick-mode-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--jk-surface);
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: var(--jk-shadow-xl);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

[data-theme="jamkham-dark"] .quick-mode-sheet {
    background: var(--jk-surface-elevated);
}

/* Drag Handle */
.quick-mode-handle {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0 0.5rem;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
}

.quick-mode-handle-bar {
    width: 2.5rem;
    height: 0.25rem;
    background: var(--jk-border);
    border-radius: 9999px;
}

/* Header */
.quick-mode-header {
    padding: 0 1.25rem 1rem;
    text-align: center;
}

.quick-mode-title {
    font-family: var(--jk-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--jk-text);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}

.quick-mode-subtitle {
    font-size: 0.875rem;
    color: var(--jk-text-muted);
    margin: 0;
}

/* Mode Options Container */
.quick-mode-options {
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Individual Mode Option */
.quick-mode-option {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--jk-surface-sunken);
    border: 2px solid transparent;
    border-radius: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.quick-mode-option:hover {
    background: var(--jk-primary-50);
    border-color: var(--jk-primary-200);
}

.quick-mode-option:focus-visible {
    outline: 2px solid var(--jk-primary);
    outline-offset: 2px;
}

.quick-mode-option--selected {
    background: var(--jk-primary-50);
    border-color: var(--jk-primary);
}

[data-theme="jamkham-dark"] .quick-mode-option {
    background: var(--jk-surface-sunken);
}

[data-theme="jamkham-dark"] .quick-mode-option:hover {
    background: rgba(45, 211, 200, 0.1);
    border-color: rgba(45, 211, 200, 0.3);
}

[data-theme="jamkham-dark"] .quick-mode-option--selected {
    background: rgba(45, 211, 200, 0.15);
    border-color: var(--jk-primary);
}

/* Mode Option Icon */
.quick-mode-option-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

.quick-mode-option-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

/* Icon color variants */
.quick-mode-option-icon--primary {
    background: var(--jk-primary-100);
    color: var(--jk-primary);
}

.quick-mode-option-icon--warning {
    background: var(--jk-warning-bg);
    color: var(--jk-warning-dark);
}

.quick-mode-option-icon--info {
    background: var(--jk-info-bg);
    color: var(--jk-info);
}

.quick-mode-option-icon--success {
    background: var(--jk-success-bg);
    color: var(--jk-success);
}

.quick-mode-option-icon--secondary {
    background: var(--jk-secondary-100);
    color: var(--jk-secondary-dark);
}

.quick-mode-option-icon--accent {
    background: var(--jk-accent-100);
    color: var(--jk-accent-dark);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--primary {
    background: rgba(45, 211, 200, 0.15);
    color: var(--jk-primary);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--warning {
    background: rgba(240, 192, 94, 0.15);
    color: var(--jk-warning);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--info {
    background: rgba(45, 211, 200, 0.15);
    color: var(--jk-info);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--success {
    background: rgba(54, 179, 126, 0.15);
    color: var(--jk-success);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--secondary {
    background: rgba(240, 192, 94, 0.15);
    color: var(--jk-secondary);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--accent {
    background: rgba(237, 132, 159, 0.15);
    color: var(--jk-accent);
}

/* Mode Option Content */
.quick-mode-option-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.quick-mode-option-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--jk-text);
}

.quick-mode-option-desc {
    font-size: 0.8125rem;
    color: var(--jk-text-muted);
}

/* Mode Option Badge/Check */
.quick-mode-option-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
}

.quick-mode-check {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--jk-primary);
}

/* Footer */
.quick-mode-footer {
    padding: 1rem 1.25rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.quick-mode-remember {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--jk-text-secondary);
    cursor: pointer;
}

.quick-mode-footer-hint {
    font-size: 0.75rem;
    color: var(--jk-text-muted);
    margin: 0;
}

/* ============================================
   MODE BADGE - Status Bar Indicator
   Compact badge showing current quick mode
   ============================================ */

.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem 0.125rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    text-decoration: none;
    background: var(--jk-surface-sunken);
    border: 1px solid var(--jk-border-light);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--jk-text-secondary);
}

.mode-badge:hover {
    background: var(--jk-primary-50);
    border-color: var(--jk-primary-200);
    color: var(--jk-primary);
}

.mode-badge:focus-visible {
    outline: 2px solid var(--jk-primary);
    outline-offset: 1px;
}

[data-theme="jamkham-dark"] .mode-badge {
    background: var(--jk-surface-sunken);
    border-color: var(--jk-border);
    color: var(--jk-text-secondary);
}

[data-theme="jamkham-dark"] .mode-badge:hover {
    background: rgba(45, 211, 200, 0.1);
    border-color: rgba(45, 211, 200, 0.3);
    color: var(--jk-primary);
}

.mode-badge-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.mode-badge-label {
    white-space: nowrap;
}

/* Mode-specific badge colors */
.mode-badge--one_hand {
    background: var(--jk-warning-bg);
    border-color: rgba(233, 168, 59, 0.3);
    color: var(--jk-warning-dark);
}

.mode-badge--one_hand:hover {
    background: var(--jk-warning-bg);
    border-color: var(--jk-warning);
}

.mode-badge--silent {
    background: var(--jk-info-bg);
    border-color: rgba(13, 115, 119, 0.3);
    color: var(--jk-info);
}

.mode-badge--silent:hover {
    background: var(--jk-info-bg);
    border-color: var(--jk-info);
}

.mode-badge--quick {
    background: var(--jk-success-bg);
    border-color: rgba(34, 160, 107, 0.3);
    color: var(--jk-success);
}

.mode-badge--quick:hover {
    background: var(--jk-success-bg);
    border-color: var(--jk-success);
}

.mode-badge--full {
    background: var(--jk-secondary-100);
    border-color: rgba(218, 171, 47, 0.3);
    color: var(--jk-secondary-dark);
}

.mode-badge--full:hover {
    background: var(--jk-secondary-100);
    border-color: var(--jk-secondary);
}

[data-theme="jamkham-dark"] .mode-badge--one_hand {
    background: rgba(240, 192, 94, 0.12);
    border-color: rgba(240, 192, 94, 0.25);
    color: var(--jk-warning);
}

[data-theme="jamkham-dark"] .mode-badge--silent {
    background: rgba(45, 211, 200, 0.12);
    border-color: rgba(45, 211, 200, 0.25);
    color: var(--jk-info);
}

[data-theme="jamkham-dark"] .mode-badge--quick {
    background: rgba(54, 179, 126, 0.12);
    border-color: rgba(54, 179, 126, 0.25);
    color: var(--jk-success);
}

[data-theme="jamkham-dark"] .mode-badge--full {
    background: rgba(240, 192, 94, 0.12);
    border-color: rgba(240, 192, 94, 0.25);
    color: var(--jk-secondary);
}

/* Hide mode badge label on very small screens */
@media (max-width: 359px) {
    .mode-badge-label {
        display: none;
    }

    .mode-badge {
        padding: 0.25rem;
    }

    .mode-badge-icon {
        width: 1rem;
        height: 1rem;
    }
}

/* ===================================================================
   Dashboard V2 - Card Type Breakdown & Lesson Progress Bars
   Added: December 12, 2025
   =================================================================== */

/* Practice Type Card Grid */
.practice-type-card {
    transition: all 0.2s ease;
}

.practice-type-card:hover {
    transform: translateY(-2px);
}

/* Lesson Progress Bar Styles */
.lesson-progress-bar {
    height: 8px;
    background-color: oklch(var(--b2));
    border-radius: 9999px;
    overflow: hidden;
    display: flex;
}

.lesson-progress-mastered {
    background-color: oklch(var(--su));
    transition: width 0.3s ease;
}

.lesson-progress-familiar {
    background-color: oklch(var(--su) / 0.6);
    transition: width 0.3s ease;
}

.lesson-progress-learning {
    background-color: oklch(var(--su) / 0.3);
    transition: width 0.3s ease;
}

.lesson-progress-unseen {
    background-color: oklch(var(--b2));
}

/* Compact lesson list item */
.lesson-compact-item {
    transition: all 0.2s ease;
}

.lesson-compact-item:hover {
    background-color: oklch(var(--b2));
}

/* Progress percentage badge */
.progress-badge {
    font-variant-numeric: tabular-nums;
}

/* Ensure smooth animations respect user preferences */
@media (prefers-reduced-motion: reduce) {
    .practice-type-card,
    .lesson-progress-mastered,
    .lesson-progress-familiar,
    .lesson-progress-learning,
    .lesson-compact-item {
        transition: none;
    }
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
    .lesson-progress-bar {
        height: 6px;
    }
}

/* ============================================
   PHASE 1 MOBILE UX IMPROVEMENTS
   Added: December 16, 2025
   ============================================ */

/* ============================================
   HIDE BOTTOM NAV DURING REVIEW SESSIONS
   When body has .review-session-active, the bottom
   nav is hidden to maximize viewport for learning.
   ============================================ */

/* Hide bottom nav during review sessions */
body.review-session-active [data-bottom-nav] {
    transform: translateY(100%);
    pointer-events: none;
    visibility: hidden;
    transition: transform 0s, visibility 0s;
}

/* Update review session container height when bottom nav is hidden.
   Since bottom nav is hidden, we get an extra 4rem of space.
   Uses 100dvh for Safari compatibility with dynamic address bar.
   Must also account for safe-area-inset-bottom on notch devices.
   Fallback first, then override with modern value. */
body.review-session-active .review-session-container {
    /* Mobile: Subtract navbar (3rem) + safe area for home indicator/address bar */
    height: calc(100vh - 3rem - env(safe-area-inset-bottom, 0px)); /* fallback */
    height: calc(100dvh - 3rem - env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
    /* Desktop: Subtract navbar (4rem) + safe area for consistency */
    body.review-session-active .review-session-container {
        height: calc(100vh - 4rem - env(safe-area-inset-bottom, 0px)); /* fallback */
        height: calc(100dvh - 4rem - env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================
   TOUCH TARGET UTILITIES (WCAG 2.5.5)
   Minimum 44x44px for all interactive elements
   ============================================ */

/* Base touch target class */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Touch target for inline elements (maintains layout) */
.touch-target-inline {
    position: relative;
}

.touch-target-inline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
    height: max(100%, 44px);
}

/* On touch devices, enforce minimum touch targets */
@media (pointer: coarse) {
    /* All buttons should meet touch target requirements */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .btn-xs {
        min-height: 36px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Audio button touch optimization */
    .audio-btn-touch,
    [data-bottom-nav] a,
    .quality-btn,
    .rating-btn {
        min-height: 48px;
        min-width: 48px;
    }

    /* Form inputs on touch devices */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        min-height: 44px;
    }
}

/* ============================================
   VIEWPORT-LOCKED REVIEW SESSION ENHANCEMENTS
   Ensure rating buttons are ALWAYS visible
   ============================================ */

/* Note: Safe area padding for .review-rating-zone consolidated into base definition (line ~2965) */

/* Ensure rating buttons have adequate touch targets */
.rating-btn {
    min-height: 52px;
    min-width: 64px;
}

@media (max-width: 639px) {
    /* On small mobile, make buttons even more tappable */
    .rating-btn {
        min-height: 56px;
    }

    .rating-button-grid {
        gap: 0.5rem;
    }
}

/* ============================================
   IMPROVED KEYBOARD HANDLING
   When keyboard is active during review session
   ============================================ */

/* Lock html and body scrolling when keyboard is active (CSS backup for JS) */
html:has(.keyboard-active),
body:has(.keyboard-active) {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Ensure input zone has proper spacing from keyboard */
body.review-session-active .keyboard-active .review-input-zone {
    padding-bottom: 0.5rem;
}

/* Hide rating zone completely when keyboard is active */
body.review-session-active .keyboard-active .review-rating-zone {
    display: none !important;
}

/* Introduction "Got it" button visible even with keyboard active */
body.review-session-active .keyboard-active .introduction-card .introduction-action {
    display: block !important;
}

/* ============================================
   BOTTOM NAVIGATION COMPONENT
   Consistent mobile navigation styling
   ============================================ */

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.25rem;
    gap: 0.125rem;
    color: var(--jk-text-muted, oklch(var(--bc) / 0.5));
    transition: color var(--jk-duration-fast, 150ms) var(--jk-ease-default, ease);
    text-decoration: none;
}

.bottom-nav-item:hover {
    color: var(--jk-primary, oklch(var(--p)));
}

.bottom-nav-item:active {
    transform: scale(0.95);
}

.bottom-nav-item.active {
    color: var(--jk-primary, oklch(var(--p)));
}

/* Primary action (Review) gets secondary color */
.bottom-nav-item.bottom-nav-primary {
    color: var(--jk-text-muted, oklch(var(--bc) / 0.5));
}

.bottom-nav-item.bottom-nav-primary:hover {
    color: var(--jk-secondary, oklch(var(--s)));
}

.bottom-nav-item.bottom-nav-primary.active {
    color: var(--jk-secondary, oklch(var(--s)));
}

.bottom-nav-label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1;
}

/* ============================================
   BUTTON STANDARDIZATION
   Consistent button sizing system
   ============================================ */

/* Primary action buttons (main CTAs) */
.btn-lg {
    min-height: 52px;
}

/* Default buttons */
.btn {
    min-height: 44px;
}

/* On mobile, enforce larger touch targets */
@media (max-width: 639px) {
    .btn-lg {
        min-height: 56px;
    }
}

/* ============================================
   CARD PADDING CONSISTENCY
   Standardized card-body padding
   ============================================ */

/* Default card-body uses p-4 on mobile, p-6 on desktop via utility classes */
/* This is a fallback for cards without explicit padding */
.card-body {
    padding: 1rem;
}

@media (min-width: 640px) {
    .card-body {
        padding: 1.5rem;
    }
}

/* ============================================
   THAI TEXT DISPLAY SYSTEM
   Consistent typography for Thai script
   ============================================ */

/* Main Thai word display (flashcards, vocabulary detail) */
.thai-display-lg {
    font-family: var(--jk-font-thai);
    font-size: clamp(2rem, 6vw, 3.5rem);
    line-height: var(--jk-leading-thai-display, 1.3);
    font-weight: var(--jk-font-semibold, 600);
    letter-spacing: var(--jk-tracking-thai, 0.02em);
}

/* Medium Thai display (card headers, list items) */
.thai-display-md {
    font-family: var(--jk-font-thai);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: var(--jk-leading-thai, 1.5);
    font-weight: var(--jk-font-medium, 500);
}

/* Thai body text (romanization, examples) */
.thai-body-lg {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-lg, 1.5rem);
    line-height: var(--jk-leading-thai, 1.8);
}

.thai-body {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-base, 1.125rem);
    line-height: var(--jk-leading-thai, 1.8);
}

/* Minimum Thai text size for readability */
.thai-min {
    font-family: var(--jk-font-thai);
    font-size: max(1rem, var(--jk-thai-sm, 0.9375rem));
    line-height: var(--jk-leading-thai, 1.8);
}

/* ============================================
   SCROLLBAR UTILITIES
   Hide scrollbars while maintaining scroll functionality
   ============================================ */

.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* ============================================
   MOBILE-FIRST RESPONSIVE UTILITIES
   Additional helper classes for mobile UX
   ============================================ */

/* Safe area padding for bottom navigation clearance */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Full viewport height accounting for mobile browser chrome */
.min-h-dvh {
    min-height: 100dvh;
}

.h-dvh {
    height: 100dvh;
}

/* ============================================
   PHASE 3: MOBILE UX IMPROVEMENTS
   ============================================ */

/* ============================================
   COLLAPSIBLE FILTER BARS
   Mobile-first filters that collapse by default
   ============================================ */

.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    min-height: 44px;
    background: var(--jk-surface, oklch(var(--b1)));
    border: 1px solid var(--jk-border, oklch(var(--bc) / 0.12));
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: oklch(var(--bc) / 0.8);
    cursor: pointer;
    transition: all var(--jk-duration-fast, 150ms) var(--jk-ease-default, ease);
}

.filter-toggle-btn:hover {
    background: var(--jk-surface-sunken, oklch(var(--b2)));
    border-color: var(--jk-primary, oklch(var(--p)));
}

.filter-toggle-btn:active {
    transform: scale(0.98);
}

.filter-toggle-btn .filter-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: oklch(var(--bc) / 0.6);
}

.filter-toggle-btn .filter-chevron {
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    transition: transform var(--jk-duration-fast, 150ms) var(--jk-ease-default, ease);
}

.filter-toggle-btn[aria-expanded="true"] .filter-chevron {
    transform: rotate(180deg);
}

/* Filter badge count */
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 0.625rem;
    background: var(--jk-primary, oklch(var(--p)));
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* Collapsible filter panel */
.filter-panel {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out, padding 0.3s ease-out;
    background: var(--jk-surface-sunken, oklch(var(--b2)));
    border-radius: 0.75rem;
    border: 1px solid var(--jk-border-light, oklch(var(--bc) / 0.08));
}

.filter-panel[hidden] {
    display: none;
}

.filter-panel-content {
    padding: 1rem;
}

/* Filter controls layout */
.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.filter-controls .form-control {
    flex: 1 1 auto;
    min-width: 140px;
}

/* Desktop: filters always visible inline */
@media (min-width: 640px) {
    .filter-toggle-btn.mobile-only {
        display: none;
    }

    .filter-panel.desktop-visible {
        display: block !important;
        background: transparent;
        border: none;
        padding: 0;
    }

    .filter-panel.desktop-visible .filter-panel-content {
        padding: 0;
    }

    .filter-controls {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .filter-controls .form-control {
        flex: 0 1 auto;
        min-width: auto;
    }
}

/* ============================================
   STICKY CTA BARS
   Bottom-fixed action bars for detail pages
   ============================================ */

.sticky-cta-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 1rem;
    background: linear-gradient(
            to top,
            var(--jk-surface, oklch(var(--b1))) 0%,
            var(--jk-surface, oklch(var(--b1))) 85%,
            transparent 100%
    );
    border-top: 1px solid var(--jk-border-light, oklch(var(--bc) / 0.08));
    box-shadow: 0 -4px 16px -4px rgba(0, 0, 0, 0.1);
}

/* Account for bottom navigation on mobile */
@media (max-width: 1023px) {
    .sticky-cta-bar {
        bottom: 4rem; /* Height of bottom nav */
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* Hide sticky CTA if it's marked as mobile-hidden */
    .sticky-cta-bar.lg-only {
        display: none;
    }
}

/* On desktop, make sticky CTA more subtle */
@media (min-width: 1024px) {
    .sticky-cta-bar {
        position: static;
        background: transparent;
        border-top: none;
        box-shadow: none;
        padding: 1.5rem 0 0 0;
    }
}

/* Sticky CTA button styles */
.sticky-cta-bar .btn-primary {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
    font-weight: 600;
}

@media (min-width: 640px) {
    .sticky-cta-bar .btn-primary {
        width: auto;
        min-width: 200px;
    }
}

/* Auto-hide sticky CTA on scroll (requires JS) */
.sticky-cta-bar.auto-hide {
    transition: transform 0.3s var(--jk-ease-out, ease-out);
}

.sticky-cta-bar.auto-hide.scrolled-up {
    transform: translateY(100%);
}

/* ============================================
   PULL-TO-REFRESH INDICATORS (CSS prep)
   Visual feedback for pull-to-refresh gesture
   ============================================ */

.ptr-container {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.ptr-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    padding: 1rem;
    transition: transform 0.3s var(--jk-ease-out, ease-out);
    z-index: 10;
}

.ptr-indicator.pulling {
    transform: translateX(-50%) translateY(0);
}

.ptr-indicator.refreshing {
    transform: translateX(-50%) translateY(1rem);
}

.ptr-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--jk-border, oklch(var(--bc) / 0.12));
    border-top-color: var(--jk-primary, oklch(var(--p)));
    border-radius: 50%;
    animation: ptr-spin 0.8s linear infinite;
}

@keyframes ptr-spin {
    to {
        transform: rotate(360deg);
    }
}

.ptr-arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--jk-primary, oklch(var(--p)));
    transition: transform 0.2s ease;
}

.ptr-indicator.ready .ptr-arrow {
    transform: rotate(180deg);
}

/* ============================================
   LOADING STATES - Skeleton Loaders
   Animated placeholder content during loading
   ============================================ */

/* Base skeleton shimmer animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
            90deg,
            oklch(var(--bc) / 0.06) 25%,
            oklch(var(--bc) / 0.12) 37%,
            oklch(var(--bc) / 0.06) 63%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.25rem;
}

/* Skeleton text line */
.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text:last-child {
    margin-bottom: 0;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-text.medium {
    width: 80%;
}

.skeleton-text.long {
    width: 100%;
}

/* Skeleton heading */
.skeleton-heading {
    height: 1.5rem;
    width: 70%;
    margin-bottom: 0.75rem;
}

/* Skeleton Thai text (larger) */
.skeleton-thai {
    height: 2rem;
    width: 50%;
    margin-bottom: 0.5rem;
}

/* Skeleton badge */
.skeleton-badge {
    display: inline-block;
    height: 1.25rem;
    width: 4rem;
    border-radius: 0.625rem;
}

/* Skeleton card */
.skeleton-card {
    background: var(--jk-surface, oklch(var(--b1)));
    border: 1px solid var(--jk-border-light, oklch(var(--bc) / 0.08));
    border-radius: 1rem;
    padding: 1rem;
}

.skeleton-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Skeleton avatar/icon */
.skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.skeleton-avatar.circle {
    border-radius: 50%;
}

/* Skeleton button */
.skeleton-button {
    height: 2.5rem;
    width: 100%;
    max-width: 8rem;
    border-radius: 0.5rem;
}

/* Loading spinner for buttons */
.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.625rem;
    margin-left: -0.625rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

/* Restore color for spinner visibility */
.btn-loading::after {
    border-color: oklch(var(--bc) / 0.3);
    border-top-color: oklch(var(--bc));
}

.btn-primary.btn-loading::after {
    border-color: oklch(var(--pc) / 0.3);
    border-top-color: oklch(var(--pc));
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   EMPTY STATES
   Visually appealing empty state patterns
   ============================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    min-height: 280px;
}

/* Compact empty state for mobile */
@media (max-width: 639px) {
    .empty-state {
        padding: 2rem 1rem;
        min-height: 220px;
    }
}

.empty-state-icon {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
            135deg,
            var(--jk-primary-50, oklch(var(--p) / 0.1)) 0%,
            var(--jk-secondary-50, oklch(var(--s) / 0.1)) 100%
    );
    margin-bottom: 1.5rem;
}

.empty-state-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--jk-primary, oklch(var(--p)));
    opacity: 0.8;
}

.empty-state-title {
    font-family: var(--jk-font-heading, 'Source Serif 4', serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: oklch(var(--bc));
    margin-bottom: 0.5rem;
}

.empty-state-description {
    font-size: 0.9375rem;
    color: oklch(var(--bc) / 0.6);
    max-width: 280px;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.empty-state-action {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 280px;
}

.empty-state-action .btn {
    width: 100%;
}

@media (min-width: 640px) {
    .empty-state-action {
        flex-direction: row;
        justify-content: center;
        max-width: none;
    }

    .empty-state-action .btn {
        width: auto;
    }
}

/* Inline empty state (for smaller areas) */
.empty-state-inline {
    padding: 1.5rem 1rem;
    min-height: auto;
}

.empty-state-inline .empty-state-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.empty-state-inline .empty-state-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.empty-state-inline .empty-state-title {
    font-size: 1rem;
}

.empty-state-inline .empty-state-description {
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* ============================================
   CARD TOUCH STATES
   Native app-like feedback for tappable cards
   ============================================ */

.card-touchable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.card-touchable:hover {
    box-shadow: var(--jk-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.07));
}

.card-touchable:active {
    transform: scale(0.98);
}

/* Touch-optimized audio button */
.audio-btn-touch {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--jk-surface-sunken, oklch(var(--b2)));
    border: 1px solid var(--jk-border, oklch(var(--bc) / 0.12));
    transition: all 0.15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.audio-btn-touch:hover {
    background: var(--jk-primary-50, oklch(var(--p) / 0.1));
    border-color: var(--jk-primary, oklch(var(--p)));
}

.audio-btn-touch:active {
    transform: scale(0.95);
    background: var(--jk-primary-100, oklch(var(--p) / 0.15));
}

.audio-btn-touch svg {
    width: 1.25rem;
    height: 1.25rem;
    color: oklch(var(--bc) / 0.7);
}

.audio-btn-touch:hover svg,
.audio-btn-touch:active svg {
    color: var(--jk-primary, oklch(var(--p)));
}

/* ============================================
   MOBILE LIST OPTIMIZATION
   Full-width cards and optimized touch targets
   ============================================ */

@media (max-width: 639px) {
    /* Full-width cards on mobile */
    .grid-mobile-full {
        grid-template-columns: 1fr !important;
    }

    /* Increase tap targets in lists */
    .list-item-touch {
        min-height: 56px;
        padding: 0.875rem 1rem;
    }

    /* Optimize dropdown menus for mobile */
    .dropdown-content {
        min-width: 200px;
    }

    .dropdown-content .menu li > * {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
}

/* ============================================
   PHASE 4 POLISH - MOBILE UX ANIMATIONS
   Premium interaction feedback that makes the
   app feel crafted by a top-tier design team
   ============================================ */

/* --------------------------------------------
   VIEW TRANSITIONS (Modern Browsers)
   Smooth page-to-page navigation feel
   -------------------------------------------- */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.2s;
    animation-timing-function: var(--jk-ease-default);
}

/* HTMX Content Swap Animations */
.htmx-added {
    animation: jk-fade-slide-in 0.2s ease-out;
}

.htmx-settling {
    opacity: 1;
}

.htmx-swapping {
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

@keyframes jk-fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------
   BUTTON PRESS STATES
   Satisfying tactile feedback on interaction
   -------------------------------------------- */
.btn {
    transition: transform 0.1s var(--jk-ease-default),
    background-color var(--jk-duration-fast) var(--jk-ease-default),
    box-shadow var(--jk-duration-fast) var(--jk-ease-default);
    -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled) {
    transform: scale(0.97);
}

.btn-primary:active:not(:disabled) {
    transform: scale(0.97);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-secondary:active:not(:disabled) {
    transform: scale(0.97);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Rating buttons get special treatment */
.jk-rating-btn:active:not(:disabled),
.quality-btn:active:not(:disabled) {
    transform: scale(0.96);
    transition: transform 0.08s var(--jk-ease-default);
}

/* --------------------------------------------
   CARD REVEAL ANIMATIONS
   Smooth answer reveals that feel natural
   -------------------------------------------- */
.answer-reveal {
    animation: jk-answer-reveal 0.3s var(--jk-ease-out);
}

@keyframes jk-answer-reveal {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel reveal for multi-section answers */
.panel-reveal {
    animation: jk-panel-reveal 0.35s var(--jk-ease-out);
}

@keyframes jk-panel-reveal {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --------------------------------------------
   SUCCESS/ERROR FEEDBACK ANIMATIONS
   Clear but non-distracting response to actions
   -------------------------------------------- */
.feedback-success {
    animation: jk-success-pulse 0.4s var(--jk-ease-out);
}

@keyframes jk-success-pulse {
    0% {
        transform: scale(1);
        background-color: inherit;
    }
    50% {
        transform: scale(1.02);
        background-color: var(--jk-success-bg, rgba(34, 160, 107, 0.1));
    }
    100% {
        transform: scale(1);
        background-color: inherit;
    }
}

.feedback-error {
    animation: jk-error-shake 0.4s var(--jk-ease-out);
}

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

/* Softer feedback for "try again" (not wrong, just needs practice) */
.feedback-retry {
    animation: jk-retry-nudge 0.35s var(--jk-ease-default);
}

@keyframes jk-retry-nudge {
    0%, 100% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(2px);
        opacity: 0.9;
    }
}

/* --------------------------------------------
   PROGRESS BAR ANIMATIONS
   Smooth, satisfying progress fills
   -------------------------------------------- */
.progress-bar-animated,
.progress-animated {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Progress increment animation */
.progress-increment {
    animation: jk-progress-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes jk-progress-grow {
    from {
        transform: scaleX(0.98);
    }
    to {
        transform: scaleX(1);
    }
}

/* Milestone celebration - subtle glow effect */
.progress-milestone {
    animation: jk-progress-milestone 0.6s var(--jk-ease-out);
}

@keyframes jk-progress-milestone {
    0% {
        box-shadow: 0 0 0 0 var(--jk-success-bg);
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

/* Session progress bar shine effect */
.progress-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 100%
    );
    transform: translateX(-100%);
    animation: jk-progress-shine 2s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes jk-progress-shine {
    0% {
        transform: translateX(-100%);
    }
    50%, 100% {
        transform: translateX(100%);
    }
}

/* --------------------------------------------
   AUDIO BUTTON PLAYING STATE
   Visual feedback during audio playback
   -------------------------------------------- */
.audio-playing {
    animation: jk-audio-pulse 1s ease-in-out infinite;
}

@keyframes jk-audio-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.85;
    }
}

/* Sound wave visualization for active audio */
.audio-waves-active .wave-bar {
    animation: jk-wave-bar 0.6s ease-in-out infinite;
}

.audio-waves-active .wave-bar:nth-child(1) {
    animation-delay: 0s;
}

.audio-waves-active .wave-bar:nth-child(2) {
    animation-delay: 0.15s;
}

.audio-waves-active .wave-bar:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes jk-wave-bar {
    0%, 100% {
        transform: scaleY(0.4);
    }
    50% {
        transform: scaleY(1);
    }
}

/* --------------------------------------------
   STREAK/ACHIEVEMENT ANIMATIONS
   Celebratory but tasteful milestone moments
   -------------------------------------------- */
.streak-celebration {
    animation: jk-streak-pop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes jk-streak-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Achievement unlock animation */
.achievement-unlock {
    animation: jk-achievement-reveal 0.6s var(--jk-ease-spring);
}

@keyframes jk-achievement-reveal {
    0% {
        transform: translateY(20px) scale(0.9);
        opacity: 0;
    }
    60% {
        transform: translateY(-4px) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Daily goal completion */
.goal-complete {
    animation: jk-goal-glow 0.8s var(--jk-ease-default);
}

/* Session complete card must always be interactive (defensive rule)
   Uses !important to override .htmx-request { pointer-events: none !important } */
.goal-complete,
.goal-complete *,
[data-session-complete],
[data-session-complete] * {
    pointer-events: auto !important;
}

@keyframes jk-goal-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 160, 107, 0.4);
    }
    40% {
        box-shadow: 0 0 0 12px rgba(34, 160, 107, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 160, 107, 0);
    }
}

/* Streak counter increment */
.streak-increment {
    animation: jk-number-pop 0.35s var(--jk-ease-bounce);
}

@keyframes jk-number-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* --------------------------------------------
   MILESTONE CELEBRATION MODAL
   Celebratory achievement celebration overlay
   with CSS-only confetti animation
   -------------------------------------------- */

/* Modal backdrop - full screen overlay */
.milestone-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--jk-space-4);
    animation: milestone-backdrop-enter 0.3s var(--jk-ease-default);
}

@keyframes milestone-backdrop-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal card - centered content container */
.milestone-modal-card {
    position: relative;
    background: var(--jk-surface, #ffffff);
    border-radius: var(--jk-card-radius-lg, 1.25rem);
    padding: var(--jk-space-8) var(--jk-space-6);
    max-width: 24rem;
    width: 100%;
    text-align: center;
    box-shadow: var(--jk-shadow-xl),
    0 0 60px rgba(218, 171, 47, 0.15);
    border: 1px solid var(--jk-border, rgba(45, 52, 54, 0.12));
    z-index: 10;
    overflow: hidden;
}

/* Subtle golden gradient border effect */
.milestone-modal-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
            135deg,
            var(--jk-secondary-300, #f5da80) 0%,
            var(--jk-secondary, #daab2f) 50%,
            var(--jk-secondary-600, #b08a24) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
    pointer-events: none;
}

/* Icon wrapper with glow effect */
.milestone-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: var(--jk-space-4);
}

.milestone-icon {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: milestone-icon-pop 0.6s var(--jk-ease-spring);
}

@keyframes milestone-icon-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

/* Icon variants - color-coded by milestone type */
.milestone-icon-words {
    background: linear-gradient(135deg, var(--jk-primary-100, #d9eef2) 0%, var(--jk-primary-200, #b3dde5) 100%);
    color: var(--jk-primary, #1a5362);
    box-shadow: 0 8px 24px rgba(26, 83, 98, 0.2);
}

.milestone-icon-streak {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.25);
}

.milestone-icon-category {
    background: linear-gradient(135deg, var(--jk-secondary-100, #fdf5d9) 0%, var(--jk-secondary-200, #faeab3) 100%);
    color: var(--jk-secondary-700, #8a6b1c);
    box-shadow: 0 8px 24px rgba(218, 171, 47, 0.25);
}

.milestone-icon-first {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

.milestone-icon-perfect {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    color: #db2777;
    box-shadow: 0 8px 24px rgba(219, 39, 119, 0.2);
}

.milestone-icon-accuracy {
    background: linear-gradient(135deg, var(--jk-success-bg, rgba(34, 160, 107, 0.15)) 0%, rgba(34, 160, 107, 0.25) 100%);
    color: var(--jk-success, #22A06B);
    box-shadow: 0 8px 24px rgba(34, 160, 107, 0.2);
}

.milestone-icon-default {
    background: linear-gradient(135deg, var(--jk-secondary-100, #fdf5d9) 0%, var(--jk-secondary-200, #faeab3) 100%);
    color: var(--jk-secondary-600, #b08a24);
    box-shadow: 0 8px 24px rgba(218, 171, 47, 0.2);
}

/* Title styling */
.milestone-title {
    font-family: var(--jk-font-heading, 'Source Serif 4', Georgia, serif);
    font-size: var(--jk-text-2xl, 1.875rem);
    font-weight: var(--jk-font-bold, 700);
    color: var(--jk-text, #2D3436);
    margin-bottom: var(--jk-space-2);
    line-height: var(--jk-leading-tight, 1.25);
    animation: milestone-text-reveal 0.5s var(--jk-ease-default) 0.1s backwards;
}

@keyframes milestone-text-reveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtitle styling */
.milestone-subtitle {
    font-size: var(--jk-text-sm, 0.875rem);
    color: var(--jk-secondary-600, #b08a24);
    font-weight: var(--jk-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--jk-space-4);
    animation: milestone-text-reveal 0.5s var(--jk-ease-default) 0.15s backwards;
}

/* Message styling */
.milestone-message {
    font-size: var(--jk-text-base, 1rem);
    color: var(--jk-text-secondary, #52647E);
    line-height: var(--jk-leading-relaxed, 1.625);
    margin-bottom: var(--jk-space-6);
    animation: milestone-text-reveal 0.5s var(--jk-ease-default) 0.2s backwards;
}

.milestone-message p {
    margin: 0;
}

/* Dismiss button */
.milestone-dismiss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--jk-space-3) var(--jk-space-6);
    background: linear-gradient(135deg, var(--jk-primary, #1a5362) 0%, var(--jk-primary-dark, #134048) 100%);
    color: white;
    font-weight: var(--jk-font-semibold, 600);
    font-size: var(--jk-text-base, 1rem);
    border: none;
    border-radius: var(--jk-btn-radius-lg, 0.75rem);
    cursor: pointer;
    transition: all var(--jk-duration-fast, 150ms) var(--jk-ease-default);
    box-shadow: 0 4px 12px rgba(26, 83, 98, 0.3);
    animation: milestone-text-reveal 0.5s var(--jk-ease-default) 0.25s backwards;
}

.milestone-dismiss-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26, 83, 98, 0.4);
}

.milestone-dismiss-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(26, 83, 98, 0.3);
}

.milestone-dismiss-btn:focus-visible {
    outline: 2px solid var(--jk-secondary, #daab2f);
    outline-offset: 2px;
}

/* Achievement badge - shows value */
.milestone-badge {
    position: absolute;
    top: var(--jk-space-4);
    left: var(--jk-space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--jk-space-2) var(--jk-space-3);
    background: var(--jk-secondary-50, #fefbf0);
    border: 1px solid var(--jk-secondary-200, #faeab3);
    border-radius: var(--jk-btn-radius-md, 0.625rem);
    color: var(--jk-secondary-700, #8a6b1c);
    animation: milestone-badge-pop 0.5s var(--jk-ease-spring) 0.3s backwards;
}

@keyframes milestone-badge-pop {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --------------------------------------------
   CSS-ONLY CONFETTI ANIMATION
   Celebratory particle effects using pseudo-elements
   -------------------------------------------- */

.milestone-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: confetti-fall 3s ease-out forwards;
}

/* Confetti shapes and colors */
.confetti-piece::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
}

/* Varied confetti colors using Jam Kham palette */
.confetti-piece:nth-child(4n+1)::before {
    background: var(--jk-secondary, #daab2f);
}

.confetti-piece:nth-child(4n+2)::before {
    background: var(--jk-primary, #1a5362);
}

.confetti-piece:nth-child(4n+3)::before {
    background: var(--jk-accent, #E05A7C);
}

.confetti-piece:nth-child(4n)::before {
    background: var(--jk-success, #22A06B);
}

/* Circle confetti variant */
.confetti-piece:nth-child(3n)::before {
    border-radius: 50%;
}

/* Rectangle confetti variant */
.confetti-piece:nth-child(5n)::before {
    width: 14px;
    height: 6px;
    border-radius: 1px;
}

/* Individual confetti positions and animations */
.confetti-piece-1 {
    left: 10%;
    animation-delay: 0s;
}

.confetti-piece-2 {
    left: 20%;
    animation-delay: 0.1s;
}

.confetti-piece-3 {
    left: 30%;
    animation-delay: 0.05s;
}

.confetti-piece-4 {
    left: 40%;
    animation-delay: 0.15s;
}

.confetti-piece-5 {
    left: 50%;
    animation-delay: 0.08s;
}

.confetti-piece-6 {
    left: 60%;
    animation-delay: 0.2s;
}

.confetti-piece-7 {
    left: 70%;
    animation-delay: 0.03s;
}

.confetti-piece-8 {
    left: 80%;
    animation-delay: 0.12s;
}

.confetti-piece-9 {
    left: 90%;
    animation-delay: 0.07s;
}

.confetti-piece-10 {
    left: 15%;
    animation-delay: 0.18s;
}

.confetti-piece-11 {
    left: 25%;
    animation-delay: 0.02s;
}

.confetti-piece-12 {
    left: 35%;
    animation-delay: 0.22s;
}

.confetti-piece-13 {
    left: 45%;
    animation-delay: 0.09s;
}

.confetti-piece-14 {
    left: 55%;
    animation-delay: 0.16s;
}

.confetti-piece-15 {
    left: 65%;
    animation-delay: 0.04s;
}

.confetti-piece-16 {
    left: 75%;
    animation-delay: 0.19s;
}

.confetti-piece-17 {
    left: 85%;
    animation-delay: 0.11s;
}

.confetti-piece-18 {
    left: 95%;
    animation-delay: 0.06s;
}

.confetti-piece-19 {
    left: 5%;
    animation-delay: 0.14s;
}

.confetti-piece-20 {
    left: 12%;
    animation-delay: 0.21s;
}

.confetti-piece-21 {
    left: 38%;
    animation-delay: 0.01s;
}

.confetti-piece-22 {
    left: 58%;
    animation-delay: 0.17s;
}

.confetti-piece-23 {
    left: 72%;
    animation-delay: 0.13s;
}

.confetti-piece-24 {
    left: 88%;
    animation-delay: 0.23s;
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        top: -10%;
        transform: translateX(0) rotate(0deg) scale(1);
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateX(calc(var(--confetti-drift, 20px) * (0.5 - var(--confetti-direction, 0)))) rotate(360deg) scale(0.9);
    }
    100% {
        opacity: 0;
        top: 100%;
        transform: translateX(calc(var(--confetti-drift, 40px) * (0.5 - var(--confetti-direction, 0)))) rotate(720deg) scale(0.5);
    }
}

/* Confetti drift variations */
.confetti-piece:nth-child(odd) {
    --confetti-direction: 1;
    --confetti-drift: 30px;
}

.confetti-piece:nth-child(even) {
    --confetti-direction: 0;
    --confetti-drift: 25px;
}

.confetti-piece:nth-child(3n) {
    --confetti-drift: 45px;
}

.confetti-piece:nth-child(5n) {
    --confetti-drift: 35px;
}

/* Dark theme adjustments */
[data-theme="jamkham-dark"] .milestone-modal-card {
    background: var(--jk-surface, #1a1a2e);
    border-color: var(--jk-border, rgba(255, 255, 255, 0.1));
    box-shadow: var(--jk-shadow-xl),
    0 0 80px rgba(240, 192, 94, 0.1);
}

[data-theme="jamkham-dark"] .milestone-modal-card::before {
    background: linear-gradient(
            135deg,
            rgba(240, 192, 94, 0.4) 0%,
            rgba(240, 192, 94, 0.6) 50%,
            rgba(240, 192, 94, 0.3) 100%
    );
}

[data-theme="jamkham-dark"] .milestone-title {
    color: var(--jk-text, #e0e0e0);
}

[data-theme="jamkham-dark"] .milestone-subtitle {
    color: var(--jk-secondary-light, #F0C05E);
}

[data-theme="jamkham-dark"] .milestone-message {
    color: var(--jk-text-secondary, #a0a0a0);
}

[data-theme="jamkham-dark"] .milestone-badge {
    background: rgba(240, 192, 94, 0.1);
    border-color: rgba(240, 192, 94, 0.2);
    color: var(--jk-secondary-light, #F0C05E);
}

[data-theme="jamkham-dark"] .milestone-dismiss-btn {
    background: linear-gradient(135deg, var(--jk-primary, #2DD3C8) 0%, var(--jk-primary-dark, #20a89f) 100%);
    box-shadow: 0 4px 12px rgba(45, 211, 200, 0.3);
}

[data-theme="jamkham-dark"] .milestone-dismiss-btn:hover {
    box-shadow: 0 6px 16px rgba(45, 211, 200, 0.4);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .milestone-modal-backdrop,
    .milestone-icon,
    .milestone-title,
    .milestone-subtitle,
    .milestone-message,
    .milestone-dismiss-btn,
    .milestone-badge,
    .confetti-piece {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .confetti-piece {
        display: none;
    }

    .milestone-modal-card {
        transition: none;
    }
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .milestone-modal-card {
        padding: var(--jk-space-6) var(--jk-space-4);
        margin: var(--jk-space-2);
    }

    .milestone-icon {
        width: 4rem;
        height: 4rem;
    }

    .milestone-icon svg {
        width: 2.5rem;
        height: 2.5rem;
    }

    .milestone-title {
        font-size: var(--jk-text-xl, 1.5rem);
    }

    .milestone-message {
        font-size: var(--jk-text-sm, 0.875rem);
    }

    .milestone-badge {
        top: var(--jk-space-3);
        left: var(--jk-space-3);
        padding: var(--jk-space-1) var(--jk-space-2);
    }

    .milestone-badge span.text-lg {
        font-size: var(--jk-text-base, 1rem);
    }
}

/* --------------------------------------------
   FOCUS STATES FOR ACCESSIBILITY
   Beautiful, visible focus indicators
   -------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--jk-primary, #1a5362);
    outline-offset: 2px;
    border-radius: var(--jk-btn-radius-sm, 0.375rem);
}

.btn:focus-visible {
    outline: 2px solid var(--jk-primary, #1a5362);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(26, 83, 98, 0.15);
}

.btn-primary:focus-visible {
    outline-color: var(--jk-secondary, #daab2f);
    box-shadow: 0 0 0 4px rgba(218, 171, 47, 0.2);
}

/* Dark mode focus states */
[data-theme="jamkham-dark"] :focus-visible {
    outline-color: var(--jk-primary, #2DD3C8);
}

[data-theme="jamkham-dark"] .btn:focus-visible {
    outline-color: var(--jk-primary, #2DD3C8);
    box-shadow: 0 0 0 4px rgba(45, 211, 200, 0.2);
}

[data-theme="jamkham-dark"] .btn-primary:focus-visible {
    outline-color: var(--jk-secondary, #F0C05E);
    box-shadow: 0 0 0 4px rgba(240, 192, 94, 0.2);
}

/* Input focus states */
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
    outline: none;
    border-color: var(--jk-primary, #1a5362);
    box-shadow: 0 0 0 3px rgba(26, 83, 98, 0.1);
}

[data-theme="jamkham-dark"] .input:focus-visible,
[data-theme="jamkham-dark"] .textarea:focus-visible,
[data-theme="jamkham-dark"] .select:focus-visible {
    border-color: var(--jk-primary, #2DD3C8);
    box-shadow: 0 0 0 3px rgba(45, 211, 200, 0.15);
}

/* Card focus states */
.card:focus-visible,
.card-touchable:focus-visible {
    outline: 2px solid var(--jk-primary);
    outline-offset: 2px;
    box-shadow: var(--jk-shadow-lg);
}

/* --------------------------------------------
   REDUCED MOTION - RESPECT USER PREFERENCES
   Override all animations for accessibility
   -------------------------------------------- */
@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 make instant */
    .btn:active:not(:disabled) {
        transform: scale(0.97);
        transition: none;
    }

    /* Disable view transitions */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    /* Progress bars still show value, just no animation */
    .progress-bar-animated,
    .progress-animated {
        transition: none;
    }
}

/* --------------------------------------------
   HAPTIC FEEDBACK DATA ATTRIBUTES
   Hooks for JavaScript haptic triggers
   -------------------------------------------- */
[data-haptic] {
    /* Elements with haptic feedback get optimized touch handling */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Visual micro-feedback for haptic buttons */
[data-haptic="light"]:active {
    filter: brightness(0.98);
}

[data-haptic="medium"]:active {
    filter: brightness(0.96);
}

[data-haptic="success"]:active {
    filter: brightness(1.02);
}

[data-haptic="error"]:active {
    filter: brightness(0.94);
}

/* ============================================
   MOBILE TAP RESPONSIVENESS SYSTEM
   Every tap must produce instant visual change
   ============================================ */

/* Universal instant tap feedback - fires in 16ms (1 frame) */
.btn:active,
.rating-btn:active,
.bottom-nav-item:active,
.prompt-audio-btn:active,
.show-answer-btn:active,
.hint-toggle-btn:active {
    transform: scale(0.95) !important;
    opacity: 0.85 !important;
    transition: transform 0ms, opacity 0ms !important;
}

/* Smooth release animation after tap */
.btn,
.rating-btn,
.bottom-nav-item,
.prompt-audio-btn,
.show-answer-btn,
.hint-toggle-btn {
    transition: transform 150ms var(--jk-ease-out, ease-out),
    opacity 150ms var(--jk-ease-out, ease-out);
}

/* ============================================
   HTMX REQUEST LOADING STATES
   ============================================ */

/* HTMX request loading states
   IMPORTANT: Only disable pointer-events on interactive elements, NOT containers.
   Applying to containers like #review-zones causes the entire card area to become
   non-interactive during requests, creating a "frozen UI" perception if requests stall.
*/
.htmx-request.rating-btn,
.htmx-request.btn,
.htmx-request button,
.htmx-request input,
.htmx-request a,
form.htmx-request button,
form.htmx-request input {
    pointer-events: none !important;
}

.rating-btn.htmx-request,
.btn.htmx-request {
    opacity: 0.7;
    position: relative;
}

/* Inline spinner for buttons during HTMX request */
.rating-btn.htmx-request::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-loading-spin 600ms linear infinite;
}

@keyframes btn-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   DELAYED LOADING SPINNER
   Only show after 150ms for fast loads
   ============================================ */

.card-loading-delayed {
    opacity: 0;
    animation: delayed-fade-in 0s ease-out 150ms forwards;
}

@keyframes delayed-fade-in {
    to {
        opacity: 1;
    }
}

/* ============================================
   CARD TRANSITION ANIMATIONS
   ============================================ */

/* Card swap transition */
#review-zones {
    transition: opacity 120ms ease-out;
}

#review-zones.htmx-swapping {
    opacity: 0.4;
}

/* Card exit animation for optimistic feedback */
#review-zones.card-exiting > * {
    animation: card-quick-exit 150ms ease-out forwards;
}

@keyframes card-quick-exit {
    to {
        opacity: 0.3;
        transform: scale(0.98);
    }
}

/* ============================================
   RATING BUTTON STAGGER ENTRANCE
   ============================================ */

.review-rating-zone[data-state="visible"] .rating-btn {
    animation: rating-btn-enter 200ms var(--jk-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;
}

.review-rating-zone[data-state="visible"] .rating-btn:nth-child(1) {
    animation-delay: 0ms;
}

.review-rating-zone[data-state="visible"] .rating-btn:nth-child(2) {
    animation-delay: 30ms;
}

.review-rating-zone[data-state="visible"] .rating-btn:nth-child(3) {
    animation-delay: 60ms;
}

.review-rating-zone[data-state="visible"] .rating-btn:nth-child(4) {
    animation-delay: 90ms;
}

@keyframes rating-btn-enter {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   ANSWER REVEAL ANIMATION
   ============================================ */

.answer-reveal {
    animation: answer-reveal 250ms var(--jk-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

@keyframes answer-reveal {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   OPTIMISTIC RATING SUBMITTED STATE
   ============================================ */

.rating-submitted {
    pointer-events: none;
}

.rating-btn.rating-selected {
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   CLOZE BLANK INDICATOR
   Visual blank for fill-in-the-blank exercises
   ============================================ */

/* Container for cloze sentences - ensures proper Thai font inheritance */
.cloze-sentence-container {
    text-align: center;
}

.cloze-sentence-thai {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    line-height: var(--jk-leading-thai, 1.8);
    letter-spacing: var(--jk-tracking-thai, 0.02em);
    /* P2-001: Thai has no word boundaries, break at container edge */
    word-break: break-all;
}

/* The blank indicator itself */
.cloze-blank {
    display: inline-block;
    position: relative;
    min-width: 3em;
    padding: 0 0.25em;
    margin: 0 0.125em;
    color: transparent;
    vertical-align: baseline;

    /* Dashed underline - distinctive but not harsh */
    border-bottom: 2px dashed var(--jk-primary, #1a5362);

    /* Slight background tint to make it pop */
    background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 85%,
            var(--jk-primary-50, rgba(26, 83, 98, 0.08)) 85%,
            var(--jk-primary-50, rgba(26, 83, 98, 0.08)) 100%
    );

    /* Subtle rounded corners */
    border-radius: 2px 2px 0 0;

    /* Smooth transition for any state changes */
    transition: border-color var(--jk-duration-fast, 150ms) ease,
    background var(--jk-duration-fast, 150ms) ease;
}

/* Subtle pulse animation to draw attention */
.cloze-blank::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--jk-primary, #1a5362);
    opacity: 0;
    animation: cloze-pulse 2s ease-in-out infinite;
}

@keyframes cloze-pulse {
    0%, 100% {
        opacity: 0;
        transform: scaleX(0.5);
    }
    50% {
        opacity: 0.6;
        transform: scaleX(1);
    }
}

/* Dark mode adjustments */
[data-theme="jamkham-dark"] .cloze-blank {
    border-bottom-color: var(--jk-primary, #2DD3C8);
    background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 85%,
            rgba(45, 211, 200, 0.1) 85%,
            rgba(45, 211, 200, 0.1) 100%
    );
}

[data-theme="jamkham-dark"] .cloze-blank::after {
    background: var(--jk-primary, #2DD3C8);
}

/* Keyboard active mode - reduce animation for focus */
.keyboard-active .cloze-blank::after {
    animation: none;
    opacity: 0;
}

/* Reduced motion preference - disable animation */
@media (prefers-reduced-motion: reduce) {
    .cloze-blank::after {
        animation: none;
        opacity: 0.4;
        transform: scaleX(1);
    }
}

/* Mobile adjustments - slightly larger touch targets */
@media (max-width: 480px) {
    .cloze-blank {
        min-width: 2.5em;
        padding: 0 0.375em;
        margin: 0 0.1875em;
    }

    .cloze-sentence-thai {
        font-size: 1.125rem;
        line-height: 1.6;
    }
}

/* ============================================
   TONE CONTOUR SVG VISUALIZATIONS
   Phase 3.5: Visual tone contour icons
   ============================================ */

/* Base tone contour SVG styling */
.tone-contour {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Tone-specific colors using semantic palette */
.tone-contour-mid {
    color: var(--jk-tone-mid, #677D98);
}

.tone-contour-low {
    color: var(--jk-tone-low, #3B5998);
}

.tone-contour-falling {
    color: var(--jk-tone-falling, #8B4B6B);
}

.tone-contour-high {
    color: var(--jk-tone-high, #E9A83B);
}

.tone-contour-rising {
    color: var(--jk-tone-rising, #22A06B);
}

/* Primary tone contour (used in answers) - uses primary color */
.tone-contour-primary {
    color: var(--jk-primary, #1a5362);
}

/* Tone button contour container */
.tone-btn-contour {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
}

.tone-btn-contour .tone-contour {
    opacity: 0.7;
    transition: opacity var(--jk-duration-fast) var(--jk-ease-default);
}

.tone-btn:hover .tone-btn-contour .tone-contour,
.tone-btn:focus .tone-btn-contour .tone-contour {
    opacity: 1;
}

/* Tone answer display - prominent contour with label */
.tone-answer-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jk-space-2);
    margin-bottom: var(--jk-space-3);
}

.tone-answer-contour {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
}

.tone-answer-contour .tone-contour {
    width: 40px;
    height: 24px;
}

/* Labeled contour (icon + text) */
.tone-contour-labeled {
    display: inline-flex;
    align-items: center;
    gap: var(--jk-space-2);
}

.tone-contour-label {
    font-size: var(--jk-text-sm);
    font-weight: var(--jk-font-medium);
    text-transform: capitalize;
}

/* ============================================
   TONE ANALYSIS PANEL
   Phase 3.1: Word-specific syllable analysis
   ============================================ */

.tone-analysis-panel {
    background: var(--jk-surface-sunken, #F4F0E8);
    border-radius: var(--jk-card-radius-sm, 0.75rem);
    padding: var(--jk-space-4);
    text-align: left;
    width: 100%;
}

[data-theme="jamkham-dark"] .tone-analysis-panel {
    background: var(--jk-surface, #1E2836);
}

/* Analysis header */
.tone-analysis-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--jk-space-2);
    margin-bottom: var(--jk-space-3);
    padding-bottom: var(--jk-space-2);
    border-bottom: 1px solid var(--jk-border-light);
}

.tone-analysis-title {
    font-size: var(--jk-text-sm);
    font-weight: var(--jk-font-semibold);
    color: var(--jk-text-secondary);
}

.tone-analysis-word {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-lg);
    font-weight: var(--jk-font-bold);
    color: var(--jk-text);
}

.tone-analysis-romanization {
    font-size: var(--jk-text-sm);
    color: var(--jk-text-muted);
    font-style: italic;
}

/* Analysis details list */
.tone-analysis-details {
    display: flex;
    flex-direction: column;
    gap: var(--jk-space-2);
    margin: 0;
    padding: 0;
}

.tone-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jk-space-3);
    font-size: var(--jk-text-sm);
}

.tone-detail-row dt {
    color: var(--jk-text-muted);
    flex-shrink: 0;
}

.tone-detail-row dd {
    color: var(--jk-text);
    font-weight: var(--jk-font-medium);
    text-align: right;
    margin: 0;
}

/* Thai character display in analysis */
.thai-char {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-md);
    font-weight: var(--jk-font-bold);
    color: var(--jk-primary);
    margin-right: var(--jk-space-1);
}

.detail-annotation {
    font-size: var(--jk-text-xs);
    color: var(--jk-text-muted);
    font-weight: var(--jk-font-normal);
}

/* Tone result row - emphasized */
.tone-result-row {
    margin-top: var(--jk-space-2);
    padding-top: var(--jk-space-2);
    border-top: 1px solid var(--jk-border-light);
}

.tone-result {
    display: flex;
    align-items: center;
    gap: var(--jk-space-2);
}

.tone-result .tone-contour {
    color: var(--jk-primary);
}

.tone-name {
    font-weight: var(--jk-font-semibold);
    color: var(--jk-primary);
}

/* ============================================
   TONE RULE FORMULA - Key Educational Element
   Shows the derivation formula prominently
   ============================================ */

.tone-rule-formula {
    display: flex;
    align-items: center;
    gap: var(--jk-space-2);
    margin-top: var(--jk-space-3);
    padding: var(--jk-space-3);
    background: linear-gradient(135deg,
    color-mix(in srgb, var(--jk-primary) 8%, transparent),
    color-mix(in srgb, var(--jk-secondary) 5%, transparent)
    );
    border-radius: var(--jk-btn-radius-md);
    border-left: 3px solid var(--jk-primary);
}

.rule-formula-label {
    font-size: var(--jk-text-xs);
    font-weight: var(--jk-font-semibold);
    color: var(--jk-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.rule-formula-text {
    font-size: var(--jk-text-sm);
    font-weight: var(--jk-font-bold);
    color: var(--jk-primary);
    font-family: var(--jk-font-body);
}

[data-theme="jamkham-dark"] .tone-rule-formula {
    background: linear-gradient(135deg,
    color-mix(in srgb, var(--jk-primary) 15%, transparent),
    color-mix(in srgb, var(--jk-secondary) 10%, transparent)
    );
}

/* Tone rule explanation - full educational text */
.tone-rule-explanation {
    margin-top: var(--jk-space-3);
    padding: var(--jk-space-3);
    background: var(--jk-surface);
    border-radius: var(--jk-btn-radius-md);
    font-size: var(--jk-text-xs);
    color: var(--jk-text-secondary);
    line-height: var(--jk-leading-relaxed);
}

[data-theme="jamkham-dark"] .tone-rule-explanation {
    background: var(--jk-surface-sunken);
}

/* ============================================
   SYLLABLE TYPE LABELS
   Visual distinction between live/dead syllables
   ============================================ */

.syllable-type-label {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--jk-btn-radius-sm);
    font-size: var(--jk-text-xs);
    font-weight: var(--jk-font-medium);
    text-transform: capitalize;
}

.syllable-type-label.live {
    background: color-mix(in srgb, var(--jk-success) 15%, transparent);
    color: var(--jk-success);
}

.syllable-type-label.dead {
    background: color-mix(in srgb, var(--jk-warning) 15%, transparent);
    color: var(--jk-warning);
}

[data-theme="jamkham-dark"] .syllable-type-label.live {
    background: color-mix(in srgb, var(--jk-success) 25%, transparent);
}

[data-theme="jamkham-dark"] .syllable-type-label.dead {
    background: color-mix(in srgb, var(--jk-warning) 25%, transparent);
}

/* Vowel length badge */
.vowel-length-badge {
    font-size: var(--jk-text-xs);
    color: var(--jk-text-muted);
    font-style: italic;
    margin-left: var(--jk-space-1);
}

/* ============================================
   SYLLABLE ANALYSIS DETAILS (within cards)
   Compact detail display for multi-syllable view
   ============================================ */

.syllable-analysis-details {
    display: flex;
    flex-direction: column;
    gap: var(--jk-space-1);
    margin-bottom: var(--jk-space-2);
    font-size: var(--jk-text-xs);
}

.syllable-detail-item {
    display: flex;
    align-items: center;
    gap: var(--jk-space-1);
    flex-wrap: wrap;
    justify-content: center;
}

.syllable-detail-item .detail-label {
    color: var(--jk-text-muted);
    font-weight: var(--jk-font-medium);
}

.syllable-detail-item .detail-value {
    color: var(--jk-text-secondary);
}

/* Syllable rule formula (compact, within card) */
.syllable-rule-formula {
    margin-top: var(--jk-space-2);
    padding: var(--jk-space-1) var(--jk-space-2);
    background: color-mix(in srgb, var(--jk-primary) 10%, transparent);
    border-radius: var(--jk-btn-radius-sm);
    font-size: 0.625rem;
    font-weight: var(--jk-font-medium);
    color: var(--jk-primary);
    text-align: center;
}

/* Multi-syllable educational note */
.multi-syllable-note {
    margin-top: var(--jk-space-3);
    padding: var(--jk-space-2) var(--jk-space-3);
    background: var(--jk-surface);
    border-radius: var(--jk-btn-radius-sm);
    font-size: var(--jk-text-xs);
    color: var(--jk-text-muted);
    font-style: italic;
    text-align: center;
    border-left: 2px solid var(--jk-border);
}

[data-theme="jamkham-dark"] .multi-syllable-note {
    background: var(--jk-surface-sunken);
}

/* ============================================
   ANALYSIS UNAVAILABLE - Enhanced Fallback
   Provides generic tone rule reminders
   ============================================ */

.tone-analysis-unavailable {
    padding: var(--jk-space-4);
}

.tone-analysis-unavailable .unavailable-message {
    font-size: var(--jk-text-sm);
    color: var(--jk-text-muted);
    font-style: italic;
    text-align: center;
    margin-bottom: var(--jk-space-3);
}

.generic-tone-info {
    background: var(--jk-surface);
    border-radius: var(--jk-btn-radius-md);
    padding: var(--jk-space-3);
}

[data-theme="jamkham-dark"] .generic-tone-info {
    background: var(--jk-surface-sunken);
}

.generic-tone-header {
    font-size: var(--jk-text-xs);
    font-weight: var(--jk-font-semibold);
    color: var(--jk-text-secondary);
    margin-bottom: var(--jk-space-2);
}

.generic-tone-rules {
    font-size: var(--jk-text-xs);
    color: var(--jk-text-muted);
    line-height: var(--jk-leading-relaxed);
    padding-left: var(--jk-space-3);
    margin: 0;
}

.generic-tone-rules li {
    margin-bottom: var(--jk-space-1);
}

.generic-tone-rules li:last-child {
    margin-bottom: 0;
}

.generic-tone-rules strong {
    color: var(--jk-text-secondary);
    font-weight: var(--jk-font-semibold);
}

/* Analysis confidence note */
.analysis-confidence-note {
    margin-top: var(--jk-space-2);
    font-size: var(--jk-text-xs);
    color: var(--jk-text-muted);
    font-style: italic;
    text-align: center;
}

/* ============================================
   SYLLABLE BREAKDOWN GRID
   For multi-syllable words
   ============================================ */

.syllable-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--jk-space-2);
    margin-top: var(--jk-space-2);
}

.syllable-card {
    background: var(--jk-surface);
    border-radius: var(--jk-btn-radius-md);
    padding: var(--jk-space-3);
    text-align: center;
    border: 1px solid var(--jk-border-light);
}

[data-theme="jamkham-dark"] .syllable-card {
    background: var(--jk-surface-elevated);
}

.syllable-index {
    display: block;
    font-size: var(--jk-text-xs);
    color: var(--jk-text-muted);
    margin-bottom: var(--jk-space-1);
}

.syllable-text {
    display: block;
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-lg);
    font-weight: var(--jk-font-bold);
    color: var(--jk-text);
    margin-bottom: var(--jk-space-2);
}

.syllable-details {
    display: flex;
    justify-content: center;
    gap: var(--jk-space-1);
    font-size: var(--jk-text-xs);
    color: var(--jk-text-muted);
    margin-bottom: var(--jk-space-2);
}

.syllable-onset {
    color: var(--jk-primary);
    font-weight: var(--jk-font-medium);
}

.syllable-vowel {
    color: var(--jk-secondary);
    font-weight: var(--jk-font-medium);
}

.syllable-coda {
    color: var(--jk-text-secondary);
    font-weight: var(--jk-font-medium);
}

.syllable-tone-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--jk-space-1);
}

.syllable-tone-name {
    font-size: var(--jk-text-xs);
    font-weight: var(--jk-font-medium);
    text-transform: capitalize;
    color: var(--jk-text-secondary);
}

/* Responsive adjustments for tone analysis */
@media (max-width: 480px) {
    .tone-analysis-panel {
        padding: var(--jk-space-3);
    }

    .tone-analysis-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--jk-space-1);
    }

    .tone-detail-row {
        font-size: var(--jk-text-xs);
    }

    .syllable-breakdown-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Reduced motion preference for tone contours */
@media (prefers-reduced-motion: reduce) {
    .tone-btn-contour .tone-contour {
        transition: none;
    }
}


/* ============================================
   FEEDBACK FAB - Floating Action Button
   ============================================ */

/* Mobile positioning with safe area handling */
.feedback-fab {
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

/* Desktop positioning - lower and to the right */
@media (min-width: 1024px) {
    .feedback-fab {
        bottom: 2rem;
    }
}

/* Hide FAB during review sessions to avoid distraction */
body.review-session-active .feedback-fab {
    display: none;
}

/* Feedback sentiment badges - visual feedback on selection */
.feedback-sentiment-badge {
    transition: all 0.15s ease;
    cursor: pointer;
}

.feedback-sentiment-badge:hover {
    transform: scale(1.05);
}

/* ============================================
   WORD CONTEXT BOTTOM SHEET
   Shows source context for user-extracted words
   ============================================ */

/* Backdrop - semi-transparent overlay */
.context-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 50;
}

/* Bottom sheet container */
.context-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--jk-surface, oklch(var(--b1)));
    border-radius: 1.25rem 1.25rem 0 0;
    z-index: 51;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] .context-sheet,
[data-theme="jamkham-dark"] .context-sheet {
    background: var(--jk-surface-elevated, oklch(var(--b2)));
}

/* Drag handle indicator */
.context-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0 0.25rem;
}

.context-sheet-handle-bar {
    width: 2.5rem;
    height: 0.25rem;
    background: var(--jk-border, oklch(var(--bc) / 0.2));
    border-radius: 9999px;
}

/* Header with title and close button */
.context-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--jk-border-light, oklch(var(--bc) / 0.1));
}

.context-sheet-title {
    font-family: var(--jk-font-heading, inherit);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--jk-text, oklch(var(--bc)));
    margin: 0;
}

.context-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--jk-text-muted, oklch(var(--bc) / 0.6));
    cursor: pointer;
    transition: all 0.15s ease;
}

.context-sheet-close:hover {
    background: var(--jk-surface-sunken, oklch(var(--bc) / 0.08));
    color: var(--jk-text, oklch(var(--bc)));
}

/* Body content */
.context-sheet-body {
    padding: 1.25rem;
}

/* Context sentence display */
.context-sentence {
    margin-bottom: 1rem;
}

.context-sentence label,
.context-source label {
    font-size: 0.75rem;
    color: var(--jk-text-muted, oklch(var(--bc) / 0.6));
    margin-bottom: 0.375rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 500;
}

.context-sentence p {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--jk-text, oklch(var(--bc)));
    background: var(--jk-surface-sunken, oklch(var(--bc) / 0.04));
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border-left: 3px solid var(--jk-primary, oklch(var(--p)));
    margin: 0;
}

[data-theme="dark"] .context-sentence p,
[data-theme="jamkham-dark"] .context-sentence p {
    background: oklch(var(--b2));
}

/* Source info (lesson title and page) */
.context-source {
    margin-bottom: 1rem;
}

.context-source-text {
    margin: 0;
    color: var(--jk-text, oklch(var(--bc)));
}

.context-source-title {
    font-weight: 500;
}

.context-source-page {
    color: var(--jk-text-muted, oklch(var(--bc) / 0.6));
    font-size: 0.875rem;
}

/* Confidence section */
.context-confidence-section {
    padding-top: 0.75rem;
    border-top: 1px solid var(--jk-border-light, oklch(var(--bc) / 0.1));
}

.context-confidence-help {
    font-size: 0.75rem;
    color: var(--jk-text-muted, oklch(var(--bc) / 0.6));
    margin: 0.5rem 0 0;
    line-height: 1.4;
}

/* Actions footer */
.context-sheet-actions {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--jk-border-light, oklch(var(--bc) / 0.1));
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ============================================
   CONTEXT INFO BUTTON
   Small (i) button in prompt badges area
   ============================================ */

.context-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--jk-surface-sunken, oklch(var(--bc) / 0.06));
    color: var(--jk-text-muted, oklch(var(--bc) / 0.5));
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 0.25rem;
}

.context-info-btn:hover {
    background: var(--jk-primary-100, oklch(var(--p) / 0.15));
    color: var(--jk-primary, oklch(var(--p)));
}

.context-info-btn:focus-visible {
    outline: 2px solid var(--jk-primary, oklch(var(--p)));
    outline-offset: 2px;
}

.context-info-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* ============================================
   CONFIDENCE INDICATORS
   Visual cues for extraction confidence level
   ============================================ */

.confidence-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.375rem;
}

/* Medium confidence - subtle amber dot */
.confidence-indicator--medium .confidence-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jk-warning, oklch(var(--wa)));
}

/* Low confidence - warning icon */
.confidence-indicator--low {
    color: var(--jk-error, oklch(var(--er)));
}

.confidence-indicator--low svg {
    width: 0.75rem;
    height: 0.75rem;
}

/* Confidence badges in sheet */
.confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-weight: 500;
}

.confidence-badge--medium {
    background: var(--jk-warning-bg, rgba(233, 168, 59, 0.15));
    color: var(--jk-warning-dark, #92400e);
}

[data-theme="dark"] .confidence-badge--medium,
[data-theme="jamkham-dark"] .confidence-badge--medium {
    background: rgba(233, 168, 59, 0.2);
    color: #fcd34d;
}

.confidence-badge--low {
    background: var(--jk-error-bg, rgba(194, 93, 57, 0.15));
    color: var(--jk-error-dark, #a04b2e);
}

[data-theme="dark"] .confidence-badge--low,
[data-theme="jamkham-dark"] .confidence-badge--low {
    background: rgba(194, 93, 57, 0.2);
    color: #fca5a5;
}

.confidence-badge svg {
    width: 0.75rem;
    height: 0.75rem;
}