:root {
            /* Royal Thai Gold Palette */
            --royal-gold: #D4AF37;
            --deep-gold: #B8860B;
            --antique-gold: #C9B037;
            --gold-shimmer: #FFD700;
            
            /* Royal Purple & Burgundy */
            --royal-purple: #4A1A6B;
            --deep-purple: #2D1B4E;
            --royal-burgundy: #800020;
            
            /* Buddhist Saffron & Temple Colors */
            --monk-saffron: #FF9933;
            --temple-red: #8B0000;
            --temple-orange: #FF6B35;
            
            /* Lotus & Natural Pinks */
            --lotus-pink: #E75480;
            --pale-lotus: #FFE5EC;
            --lotus-white: #FFF5F7;
            
            /* Tropical Green Palette */
            --bodhi-green: #228B22;
            --bamboo-green: #6B8E23;
            --palm-green: #355E3B;
            --rice-green: #8FBC8F;
            --jungle-green: #2D5016;
            
            /* Isan Earth Tones */
            --isan-clay: #A0522D;
            --isan-earth: #8B7355;
            --terracotta: #CD853F;
            --sandstone: #D2B48C;
            
            /* Sky & Water */
            --thai-sky: #87CEEB;
            --mekong-blue: #4682B4;
            --monsoon-grey: #708090;
            
            /* Silk & Fabric */
            --silk-cream: #FFF8DC;
            --silk-ivory: #FFFFF0;
            --raw-silk: #F5E6D3;
            
            /* Tropical Accents */
            --orchid-purple: #9370DB;
            --hibiscus-red: #DC143C;
            --frangipani: #FFF9E6;
            --coconut-white: #FFFEF7;
            
            /* Wood & Natural */
            --teak-wood: #654321;
            --dark-text: #2C1810;
            --bamboo-beige: #E3DAC9;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* Body - Thai script font */
        body {
            font-family: 'Noto Serif Thai', 'Cormorant Garamond', 'Sarabun', Georgia, serif;
            background: 
                linear-gradient(135deg, rgba(255, 248, 220, 0.9) 0%, rgba(245, 230, 211, 0.9) 100%),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="bamboo" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="0.5" fill="%23228B22" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23bamboo)"/></svg>');
            /* `background-attachment: fixed` was removed: on iOS Safari it forces
               the whole background to be re-composited against the entire scroll
               height every frame, which crashed the renderer — a blank page with
               no JS error and nothing in the server logs. Short pages stayed
               under the threshold; tall ones did not. Default `scroll` is safe
               and the faint pattern looks the same in practice.

               This fix has now been made twice; it was lost once when main was
               rewound on 2026-07-22. Please do not put it back. */
            min-height: 100vh;
            color: var(--dark-text);
            position: relative;
        }
        
        /* Romanization text - FIXED WIDTH SOLUTION */
        .paiboon, .romanized, .paiboon-text, 
        [class*="paiboon"], [class*="romaniz"] {
            font-family: 'Roboto Mono', 'Consolas', 'Monaco', monospace !important;
            font-weight: 400 !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            line-height: 2.5 !important;
            display: inline-block;
            vertical-align: baseline;
            letter-spacing: 0.15em;
            word-spacing: 0.3em;
        }
        
        /* Fix for title romanization specifically */
        .romanized-title {
            line-height: 2.8 !important;
            letter-spacing: 0.2em;
        }

        /* Tropical Nature Background Elements */
        body::before {
            content: '';
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 200px;
            background: linear-gradient(to top, rgba(107, 142, 35, 0.15) 0%, transparent 100%);
            pointer-events: none;
            z-index: 0;
        }
        
        body::after {
            content: '🌴 🦚 🐘 🌺 🦎 🌿 🍃';
            position: fixed;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 1.5rem;
            opacity: 0.2;
            pointer-events: none;
            letter-spacing: 2rem;
            z-index: 0;
        }
        
        /* Navigation - Royal Thai with Gold Filigree */
        nav {
            background: linear-gradient(90deg, var(--royal-purple) 0%, var(--royal-burgundy) 50%, var(--deep-purple) 100%);
            padding: 1rem 2rem;
            box-shadow: 
                0 4px 15px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(212, 175, 55, 0.3),
                inset 0 -1px 0 rgba(212, 175, 55, 0.3);
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 2px solid var(--royal-gold);
            /* Two layers: the faint gold pinstripes sit ON TOP of the solid
               royal-purple gradient. Keeping the purple gradient here (rather
               than only in the `background` shorthand above, which this
               property would otherwise override) makes the nav fully opaque,
               so page content no longer shows through when you scroll. */
            background-image:
                repeating-linear-gradient(90deg,
                    transparent,
                    transparent 50px,
                    rgba(212, 175, 55, 0.1) 50px,
                    rgba(212, 175, 55, 0.1) 51px),
                linear-gradient(90deg, var(--royal-purple) 0%, var(--royal-burgundy) 50%, var(--deep-purple) 100%);
        }

        
        nav .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        nav .logo {
            font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
            color: var(--royal-gold);
            text-decoration: none;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
            /* Simplified text shadow - fewer layers */
            text-shadow: 
                0 0 3px var(--deep-purple),
                0 1px 0 var(--deep-purple),
                2px 2px 4px rgba(0,0,0,0.5);
            font-family: 'Cormorant Garamond', serif;
            letter-spacing: 0.05em;
            /* GPU acceleration */
            transform: translateZ(0);
        }
        
        nav .logo::before {
            content: '👑';
            font-size: clamp(1.3rem, 1.0rem + 1.0vw, 1.8rem);
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
        }

        nav .logo span {
            font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
        }
        
        nav ul {
            list-style: none;
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        
        nav a {
            color: #FFFFFF; /* Pure white for maximum contrast */
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother easing */
            font-size: 0.95rem;
            font-weight: 600; /* Bolder for visibility */
            position: relative;
            border: 1px solid transparent;
            /* Clear, strong text shadow for readability */
            text-shadow: 
                0 1px 3px rgba(0, 0, 0, 0.8),
                0 0 8px rgba(0, 0, 0, 0.4);
            /* GPU acceleration */
            transform: translateZ(0);
            will-change: transform, background-color;
            letter-spacing: 0.03em;
        }
        
        nav a:hover {
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            color: var(--deep-purple);
            border: 2px solid var(--deep-purple);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
            transform: translateY(-3px) translateZ(0);
            /* Subtle gold glow on hover */
            text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
        }
        
        /* Dropdown Navigation */
        .nav-menu {
            position: relative;
        }
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-toggle {
            background: transparent;
            border: 1px solid rgba(212, 175, 55, 0.4);
            color: #FFFFFF; /* Pure white for maximum contrast */
            padding: 0.5rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 600; /* Bolder for visibility */
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother easing */
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: inherit;
            /* Clear, strong text shadow for readability */
            text-shadow: 
                0 1px 3px rgba(0, 0, 0, 0.8),
                0 0 8px rgba(0, 0, 0, 0.4);
            /* GPU acceleration */
            transform: translateZ(0);
            will-change: transform, background-color;
            letter-spacing: 0.03em;
        }
        
        .dropdown-toggle:hover {
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            color: var(--deep-purple);
            border: 2px solid var(--deep-purple);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
            transform: translateY(-3px) translateZ(0);
            /* Subtle gold glow on hover */
            text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
        }

        .dropdown-toggle:hover {
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            color: var(--deep-purple);
            border: 2px solid var(--deep-purple);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
            transform: translateY(-2px) translateZ(0);
            /* Simple gold glow */
            text-shadow: 0 0 2px rgba(212, 175, 55, 0.5);
        }
        
        .dropdown-toggle::after {
            content: '▼';
            font-size: 0.7em;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .dropdown.active .dropdown-toggle::after {
            transform: rotate(180deg);
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background: linear-gradient(135deg, var(--deep-purple) 0%, var(--royal-burgundy) 100%);
            min-width: 220px;
            box-shadow: 
                0 10px 30px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(212, 175, 55, 0.5);
            border-radius: 10px;
            z-index: 1001;
            margin-top: 0.5rem;
            padding: 0.75rem 0;
            max-height: 400px;
            overflow-y: auto;
            border: 2px solid var(--royal-gold);
            background-image: 
                repeating-linear-gradient(90deg, 
                    transparent, 
                    transparent 40px, 
                    rgba(212, 175, 55, 0.08) 40px, 
                    rgba(212, 175, 55, 0.08) 41px);
            backdrop-filter: blur(10px);
        }
        
        .dropdown.active .dropdown-content {
            display: block;
            animation: dropdownFade 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes dropdownFade {
            from {
                opacity: 0;
                transform: translateY(-15px) translateZ(0);
            }
            to {
                opacity: 1;
                transform: translateY(0) translateZ(0);
            }
        }
        
        .dropdown-content a {
            color: #FFFFFF; /* Pure white for maximum contrast */
            padding: 0.85rem 1.5rem;
            text-decoration: none;
            display: block;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 0;
            border-left: 3px solid transparent;
            font-weight: 600; /* Bolder for visibility */
            /* Clear, strong text shadow */
            text-shadow: 
                0 1px 3px rgba(0, 0, 0, 0.8),
                0 0 8px rgba(0, 0, 0, 0.4);
            letter-spacing: 0.02em;
        }
        
        .dropdown-content a:hover {
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0.15) 100%);
            color: var(--gold-shimmer);
            padding-left: 2rem;
            border-left: 3px solid var(--royal-gold);
            box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.3);
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
        }

        .dropdown-divider {
            height: 1px;
            background: rgba(212, 175, 55, 0.4);
            margin: 0.5rem 0;
        }
        
        /* Collapsible Sections */
        .collapsible-section {
            margin-bottom: 1rem;
        }
        
        .section-header {
            background: linear-gradient(135deg, var(--royal-purple) 0%, #6B2D5C 100%);
            color: white;
            padding: 1rem 1.5rem;
            cursor: pointer;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        
        .section-header:hover {
            background: linear-gradient(135deg, #5A2480 0%, #7B3D6C 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        
        .section-header h2,
        .section-header h3 {
            margin: 0;
            color: white;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .section-toggle {
            font-size: 1.5rem;
            transition: transform 0.3s ease;
            font-weight: bold;
        }
        
        .collapsible-section.active .section-toggle {
            transform: rotate(180deg);
        }
        
        .section-content {
            display: none;
            padding: 1.5rem;
            background: white;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-top: -10px;
        }
        
        .collapsible-section.active .section-content {
            display: block;
        }
        
        .collapsible-section.active .section-header {
            border-radius: 10px 10px 0 0;
        }
        
        /* Mobile Navigation Toggle */
        .mobile-menu-toggle {
            display: none;
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            border: 2px solid var(--deep-purple);
            color: var(--deep-purple);
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.3rem;
            font-weight: 700;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
        }
        
        .mobile-menu-toggle:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
        }
        
        @media (max-width: 768px) {
            .mobile-menu-toggle {
                display: block;
            }
            
            nav ul {
                display: none;
                flex-direction: column;
                width: 100%;
                gap: 0;
            }
            
            nav ul.active {
                display: flex;
            }
            
            nav .dropdown-content {
                position: static;
                box-shadow: none;
                background: rgba(74, 26, 107, 0.95);
                margin-left: 1rem;
            }
            
            .gender-selector {
                width: 100%;
                justify-content: center;
            }
        }
        
        /* Main Content - Silk Fabric Texture */
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2.5rem;
            position: relative;
            z-index: 1;
        }
        
        /* Decorative Thai Pattern Border */
        main::before {
            content: '◆ ❖ ◆ ❖ ◆ ❖ ◆ ❖ ◆ ❖ ◆ ❖ ◆ ❖ ◆';
            display: block;
            text-align: center;
            color: var(--royal-gold);
            font-size: 0.9rem;
            margin-bottom: 2rem;
            opacity: 0.6;
            letter-spacing: 0.5rem;
        }
        
        /* Headers - Royal Thai Elegance */
        /* Fluid sizing: font scales smoothly with screen width between a
           phone-friendly minimum and the original desktop maximum, so every
           device (320px phone → 4K monitor) gets a sensible size with no
           breakpoint "jumps". Desktop is unchanged (max = original value). */
        h1 {
            color: var(--royal-purple);
            font-size: clamp(1.6rem, 1.05rem + 2.6vw, 2.8rem);
            margin-bottom: 1.5rem;
            text-align: center;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.15);
            font-family: 'Cormorant Garamond', serif;
            font-weight: 700;
            letter-spacing: 0.02em;
            position: relative;
            padding-bottom: 1rem;
        }
        
        h1::after {
            content: '';
            display: block;
            width: 200px;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--royal-gold), transparent);
            margin: 1rem auto 0;
        }
        
        h1 .thai {
            display: block;
            font-size: 1.8rem;
            color: var(--deep-gold);
            margin-top: 0.75rem;
            font-weight: 600;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }
        
        h2 {
            color: var(--temple-red);
            font-size: clamp(1.35rem, 1.0rem + 1.7vw, 2rem);
            margin: 2.5rem 0 1.5rem;
            border-bottom: none;
            padding-bottom: 0.75rem;
            font-family: 'Cormorant Garamond', serif;
            font-weight: 700;
            position: relative;
            padding-left: 2rem;
        }
        
        h2::before {
            content: '🌺';
            position: absolute;
            left: 0;
            top: 0;
            font-size: 1.8rem;
        }
        
        h2::after {
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--royal-gold) 0%, var(--lotus-pink) 50%, transparent 100%);
            margin-top: 0.5rem;
        }
        
        h3 {
            color: var(--royal-purple);
            font-size: clamp(1.15rem, 1.0rem + 0.75vw, 1.5rem);
            margin: 1.75rem 0 1rem;
            font-family: 'Cormorant Garamond', serif;
            font-weight: 600;
        }
        
        /* Cards - Isan Clay & Royal Silk Blend */
        .card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 252, 245, 0.95) 100%);
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 
                0 8px 25px rgba(0,0,0,0.12),
                inset 0 1px 0 rgba(255,255,255,0.8);
            border: 2px solid transparent;
            border-image: linear-gradient(135deg, var(--royal-gold) 0%, var(--lotus-pink) 50%, var(--bamboo-green) 100%) 1;
            position: relative;
            overflow: hidden;
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(107, 142, 35, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }
        
        .card::after {
            content: '🍃';
            position: absolute;
            bottom: 10px;
            right: 15px;
            font-size: 2rem;
            opacity: 0.15;
            pointer-events: none;
        }
        
        .card:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 12px 35px rgba(0,0,0,0.18),
                inset 0 1px 0 rgba(255,255,255,0.9);
            border-image: linear-gradient(135deg, var(--gold-shimmer) 0%, var(--orchid-purple) 50%, var(--bodhi-green) 100%) 1;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            margin: 2.5rem 0;
        }
        
        /* Tables - Teak Wood & Royal Silk */
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 1.5rem 0;
            background: var(--silk-ivory);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 
                0 5px 20px rgba(0,0,0,0.12),
                inset 0 1px 0 rgba(255,255,255,0.5);
            border: 2px solid var(--royal-gold);
        }
        
        th {
            background: linear-gradient(135deg, var(--deep-purple) 0%, var(--royal-burgundy) 100%);
            color: var(--royal-gold);
            padding: 1.25rem;
            text-align: left;
            font-weight: 700;
            font-size: 1.05rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 3px solid var(--royal-gold);
            position: relative;
        }
        
        th::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--gold-shimmer), transparent);
        }
        
        td {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(107, 142, 35, 0.15);
            transition: all 0.3s ease;
        }
        
        tr {
            transition: all 0.3s ease;
        }
        
        tbody tr:nth-child(odd) {
            background: rgba(255, 252, 245, 0.5);
        }
        
        tbody tr:hover {
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(107, 142, 35, 0.08) 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        tbody tr:last-child td {
            border-bottom: none;
        }

        td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #eee;
        }
        
        tr:hover {
            background: #f9f5f0;
        }
        
        .thai-text {
            font-size: 1.3rem;
            color: var(--temple-red);
        }
        
        .paiboon {
            color: var(--bodhi-green);
            font-style: italic;
        }
        
        /* Buttons - Royal Gold with Tropical Accents */
        .btn {
            display: inline-block;
            padding: 0.85rem 2rem;
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            color: var(--deep-purple);
            text-decoration: none;
            border-radius: 25px;
            transition: all 0.3s ease;
            border: 2px solid var(--deep-gold);
            font-weight: 700;
            cursor: pointer;
            box-shadow: 
                0 4px 15px rgba(212, 175, 55, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.95rem;
            position: relative;
            overflow: hidden;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s ease;
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 8px 25px rgba(212, 175, 55, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            border-color: var(--gold-shimmer);
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, var(--deep-purple) 0%, var(--royal-burgundy) 100%);
            color: var(--silk-cream);
            border: 2px solid var(--royal-purple);
            box-shadow: 
                0 4px 15px rgba(74, 26, 107, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        
        .btn-secondary:hover {
            box-shadow: 
                0 8px 25px rgba(74, 26, 107, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
        
        .btn-saffron {
            background: linear-gradient(135deg, var(--monk-saffron) 0%, var(--temple-orange) 100%);
            color: white;
            border: 2px solid var(--temple-orange);
            box-shadow: 
                0 4px 15px rgba(255, 153, 51, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
        
        .btn-saffron:hover {
            box-shadow: 
                0 8px 25px rgba(255, 153, 51, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        /* Tags/Badges */
        .tag {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.8rem;
            margin: 0.25rem;
        }
        
        .tag-beginner { background: #90EE90; color: #006400; }
        .tag-intermediate { background: #FFD700; color: #8B4513; }
        .tag-advanced { background: #FF6B6B; color: white; }
        
        /* Example boxes */
        .example-box {
            background: #f8f4e8;
            border-left: 4px solid var(--saffron);
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 0 10px 10px 0;
        }
        
        /* Example boxes - Isan Clay & Bamboo */
        .example-box {
            background: linear-gradient(135deg, var(--frangipani) 0%, var(--coconut-white) 100%);
            border-left: 5px solid var(--monk-saffron);
            padding: 1.5rem;
            margin: 1.5rem 0;
            border-radius: 0 15px 15px 0;
            box-shadow: 0 3px 15px rgba(0,0,0,0.08);
            position: relative;
            overflow: hidden;
        }
        
        .example-box::before {
            content: '🌾';
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 2.5rem;
            opacity: 0.1;
        }
        
        .example-box .thai-text {
            font-size: 1.6rem;
            margin-bottom: 0.5rem;
            color: var(--deep-purple);
            font-weight: 600;
        }
        
        /* Footer - Royal Thai with Isan Earth */
        footer {
            background: linear-gradient(135deg, var(--deep-purple) 0%, var(--royal-burgundy) 50%, var(--isan-clay) 100%);
            color: var(--silk-cream);
            text-align: center;
            padding: 3rem 2rem;
            margin-top: 4rem;
            border-top: 3px solid var(--royal-gold);
            box-shadow: 
                inset 0 1px 0 rgba(212, 175, 55, 0.3),
                0 -5px 20px rgba(0,0,0,0.1);
            position: relative;
        }
        
        footer::before {
            content: '🌴 🦚 🐘 🌺 🦎 🌿';
            display: block;
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
            opacity: 0.6;
            letter-spacing: 1.5rem;
        }
        
        footer a {
            color: var(--gold-shimmer);
            text-decoration: none;
            border-bottom: 1px dotted var(--royal-gold);
            transition: all 0.3s ease;
        }
        
        footer a:hover {
            color: var(--royal-gold);
            border-bottom: 2px solid var(--royal-gold);
        }

        .footer-locked-link {
            position: relative;
            display: inline-block;
            color: var(--gold-shimmer);
            border-bottom: 1px dotted rgba(212, 175, 55, 0.5);
            cursor: not-allowed;
            opacity: 0.65;
        }

        .footer-locked-link .footer-tooltip {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: rgba(20, 0, 40, 0.92);
            color: var(--silk-cream);
            border: 1px solid rgba(212, 175, 55, 0.4);
            padding: 0.35rem 0.7rem;
            border-radius: 6px;
            /* Wrap + cap width to the viewport so the (hidden) tooltip never
               pokes past the screen edge and creates a sideways scroll. */
            white-space: normal;
            width: max-content;
            max-width: min(260px, 88vw);
            font-size: 0.78rem;
            pointer-events: none;
            transition: opacity 0.2s ease;
            z-index: 10;
        }

        .footer-locked-link .footer-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: rgba(20, 0, 40, 0.92);
        }

        .footer-locked-link:hover .footer-tooltip {
            visibility: visible;
            opacity: 1;
        }
        
        /* Decorative lotus - Enhanced with tropical flair */
        .lotus-divider {
            text-align: center;
            font-size: 2.5rem;
            margin: 3rem 0;
            color: var(--lotus-pink);
            position: relative;
            padding: 1rem 0;
        }
        
        .lotus-divider::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--lotus-pink), transparent);
            transform: translateY(-50%);
            z-index: -1;
        }
        
        .lotus-divider::after {
            content: '🌸 🪷 🌸';
            display: block;
            background: linear-gradient(135deg, var(--silk-cream) 0%, var(--frangipani) 100%);
            padding: 0.5rem 2rem;
            display: inline-block;
            border-radius: 50px;
            box-shadow: 0 3px 10px rgba(231, 84, 128, 0.3);
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            nav .nav-container {
                flex-direction: column;
            }

            nav ul {
                justify-content: center;
            }

            /* h1/h2/h3 sizes are handled fluidly by clamp() above — no fixed
               overrides here, so there are no size "jumps" at the breakpoint. */
            h1 .thai {
                font-size: 1.4rem;
            }

            main {
                padding: 1.5rem;
            }
            
            main::before {
                font-size: 0.7rem;
                letter-spacing: 0.3rem;
            }
            
            .card {
                padding: 1.5rem;
            }
            
            body::after {
                font-size: 1.2rem;
                letter-spacing: 1.5rem;
            }
        }
        
        /* Toggle switch for beginner mode */
        .toggle-container {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 1rem 0;
        }
        
        .toggle {
            position: relative;
            width: 60px;
            height: 30px;
        }
        
        .toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #ccc;
            transition: 0.4s;
            border-radius: 30px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 4px;
            bottom: 4px;
            background: white;
            transition: 0.4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background: var(--bodhi-green);
        }
        
        input:checked + .slider:before {
            transform: translateX(30px);
        }
        
        /* Gender Selector */
        .gender-selector {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255,255,255,0.1);
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-size: 0.9rem;
        }
        
        .gender-selector label {
            color: var(--gold);
            font-weight: 600;
            margin-right: 0.5rem;
        }
        
        .gender-btn {
            background: transparent;
            border: 2px solid var(--cream);
            color: var(--cream);
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        .gender-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }
        
        .gender-btn.active {
            background: var(--gold);
            color: var(--royal-purple);
            border-color: var(--gold);
        }
        
        .gender-indicator {
            font-size: 1.2rem;
        }
        
        /* ============================================
           FIX: Remove Dark Purple Border on Dropdown Hover
           ============================================ */
        
        /* Remove border from dropdown toggle buttons */
        .dropdown-toggle {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }
        
        /* Remove border on hover state */
        .dropdown-toggle:hover,
        .dropdown-toggle:focus,
        .dropdown-toggle:active {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }
        
        /* Remove any borders from dropdown content containers */
        .dropdown-content {
            border: none !important;
            outline: none !important;
        }
        
        /* Remove borders from dropdown menu items */
        .dropdown-content a {
            border: none !important;
            outline: none !important;
        }
        
        /* Remove borders on dropdown item hover */
        .dropdown-content a:hover,
        .dropdown-content a:focus {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }
        
        /* Remove purple border from logo and navigation links (Home button, etc.) */
        nav .logo:hover,
        nav a:hover {
            border: none !important;
        }
        
        /* Keep the gold background and other hover effects, just remove border */
        nav a:hover {
            background: linear-gradient(135deg, var(--royal-gold) 0%, var(--antique-gold) 100%);
            color: var(--deep-purple);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
            transform: translateY(-3px) translateZ(0);
            text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
        }
        
        /* Remove black box trim that appears when leaving hover state */
        nav .logo,
        nav a {
            border: none !important;
            outline: none !important;
        }
        
        /* Ensure no borders in any state - default, hover, focus, active */
        nav .logo:hover,
        nav .logo:focus,
        nav .logo:active,
        nav a:hover,
        nav a:focus,
        nav a:active {
            border: none !important;
            outline: none !important;
        }

/* ============================================
   WIREFRAME LAYOUT (sidebar | main | right column)
   The .layout wrapper is a plain block by default, so a page that provides
   no sidebar/right column keeps <main>'s original centered max-width and
   looks unchanged. It only becomes a multi-column grid when a page fills
   the optional .layout-sidebar / .layout-rightcol regions.
   ============================================ */
.layout:has(.layout-sidebar):has(.layout-rightcol) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 280px;
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
    align-items: start;
}
.layout:has(.layout-sidebar):not(:has(.layout-rightcol)) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 1500px;
    margin: 0 auto;
    align-items: start;
}
.layout:not(:has(.layout-sidebar)):has(.layout-rightcol) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.5rem;
    max-width: 1500px;
    margin: 0 auto;
    align-items: start;
}
/* Inside the grid, main fills its cell instead of self-centering at 1200px.
   min-width:0 lets the column shrink so wide children scroll/wrap rather than
   forcing the whole layout wider. */
.layout:has(.layout-sidebar) > main,
.layout:has(.layout-rightcol) > main {
    max-width: none;
    margin: 0;
    width: auto;
    min-width: 0;
}
/* Wide tables sit in a horizontal-scroll wrapper (added by base.js): the table
   keeps width:100% so it FILLS the column when there's room and adjusts as you
   zoom, and the wrapper scrolls sideways only when the content is genuinely
   wider than the column — no clipping, no dead space. */
.table-scroll { overflow-x: auto; }
/* Medium screens (laptops): three columns get cramped. Drop the right column
   to a full-width strip below main — its cards flow in a row — so the main
   reading area gets the width it needs. */
@media (max-width: 1200px) {
    .layout:has(.layout-sidebar):has(.layout-rightcol) {
        grid-template-columns: 210px minmax(0, 1fr);
    }
    .layout:has(.layout-sidebar):has(.layout-rightcol) > .layout-rightcol {
        grid-column: 1 / -1;
    }
    .layout:has(.layout-rightcol) > .layout-rightcol {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .layout-rightcol .card { flex: 1 1 220px; }
}
/* Stack to a single column on narrow screens.
   IMPORTANT: these selectors must MATCH the specificity of the desktop
   multi-column rules above (each uses three .layout/:has() classes). A media
   query adds no specificity of its own, so the lower-specificity selectors
   `.layout:has(.layout-sidebar)` (2 classes) could NOT override the
   3-class desktop rules — the grid stayed multi-column on phones. Listing the
   same three full selectors here gives equal specificity, and because these
   come later in the file they win. This is what makes pages stack on mobile. */
@media (max-width: 900px) {
    .layout:has(.layout-sidebar):has(.layout-rightcol),
    .layout:has(.layout-sidebar):not(:has(.layout-rightcol)),
    .layout:not(:has(.layout-sidebar)):has(.layout-rightcol) {
        grid-template-columns: 1fr;
    }
    .layout:has(.layout-sidebar):has(.layout-rightcol) > .layout-rightcol {
        grid-column: auto;
    }

    /* CONTENT FIRST ON A PHONE.

       Stacking in source order put the sidebar above <main>, and the Learn
       sidebar is 644px of links. On a 390px-wide iPhone that pushed the page's
       own heading 1.4 screens down and the first piece of real content 2.6
       screens down — so opening a Learn page showed nothing but a column of
       navigation. It reads exactly like a page that failed to load, and it is
       what made the Alphabet page look broken on mobile through three separate
       rebuilds of a page that was never the problem.

       `order` only affects the visual order of grid items; the DOM keeps
       nav-before-content, which is the conventional document order and what a
       screen reader will still follow. */
    .layout > main { order: -1; }
    .layout-sidebar { order: 1; }
    .layout-rightcol { order: 2; }
}
/* ============================================
   WIREFRAME COMPONENTS — sidebar nav + right column
   Shared, reusable pieces used by any page that fills
   {% block sidebar %} / {% block rightcol %}.
   ============================================ */
.layout-sidebar {
    position: sticky;
    top: 90px;
    align-self: start;
}
.sidebar-title {
    color: var(--royal-purple);
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.sidebar-nav a {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    color: var(--deep-purple);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.2s, border-color 0.2s;
}
.sidebar-nav a:hover { background: rgba(74, 26, 107, 0.07); }
.sidebar-nav a.active {
    background: rgba(212, 175, 55, 0.15);
    border-left-color: var(--royal-gold);
    font-weight: 600;
}
.layout-rightcol { display: flex; flex-direction: column; gap: 1rem; }
.layout-rightcol .card { margin: 0; }
.rightcol-visual { font-size: 3.5rem; line-height: 1; padding: 0.5rem 0 1rem; }
@media (max-width: 900px) {
    .layout-sidebar { position: static; }
}

/* ============================================
   PHASE 1 — GLOBAL MOBILE HARDENING  (added 2026-06-10)
   One stylesheet, every device. These rules stop page
   content from spilling off the side of a phone screen and
   make wide tables scroll cleanly instead of squashing text
   into one-word-per-line strips.
   ============================================ */

/* 1. Media can never be wider than its column — the single
      most common cause of a page drifting sideways on mobile. */
img, svg, video, iframe, canvas {
    max-width: 100%;
    height: auto;
}

/* 2. Long unbroken words / URLs wrap instead of forcing the
      whole page wider than the screen. */
body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Hidden hover-tooltips (footer "locked" tooltip, chat mode tooltips) are
       absolutely positioned and can poke a few px past the screen edge,
       creating an unwanted sideways scroll. Clip that horizontal sliver at the
       page level. overflow-x on <body> (not a height-constrained ancestor)
       does not break the sticky nav — verified across all device widths. */
    overflow-x: hidden;
}

/* 3. Wide tables scroll sideways with a readable minimum width
      rather than cramming columns into unreadable slivers.
      (base.js already wraps every <main> table in .table-scroll.) */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}
@media (max-width: 768px) {
    /* Keep columns legible; the reader swipes to see the rest. */
    .table-scroll table {
        min-width: 480px;
        margin: 1rem 0;
    }
    /* Trim the chunky desktop cell padding so more fits on screen. */
    .table-scroll th,
    .table-scroll td {
        padding: 0.85rem 0.9rem;
        font-size: 0.95rem;
    }
}

/* 4. On small phones, trim outer spacing and oversized headings
      so content isn't crushed into a thin central strip. */
@media (max-width: 480px) {
    main {
        padding: 1.1rem 1rem;
    }
    main::before {
        font-size: 0.6rem;
        letter-spacing: 0.2rem;
    }
    /* h1/h2 sizing left to the fluid clamp() rules above. */
    nav { padding: 0.85rem 1rem; }
}

/* ============================================
   MONK MODE — free, all-content-unlocked toggle
   for Buddhist monks & the Thai diaspora.
   Uses the saffron robe colour so it reads as
   a warm, welcoming gift rather than a paywall.
   ============================================ */
.monk-mode-toggle {
    font: inherit;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 2px solid var(--monk-saffron);
    background: transparent;
    color: var(--monk-saffron);
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.monk-mode-toggle:hover {
    background: rgba(255, 153, 51, 0.12);
}
.monk-mode-toggle.active {
    background: var(--monk-saffron);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.25);
}

/* "Free" on the progress dashboard while Monk Mode is on, in place of a plan
   name a monastic will never be charged for. */
.monk-free {
    color: var(--palm-green);
    font-weight: 700;
}

.monk-mode-banner {
    background: linear-gradient(90deg, var(--monk-saffron), var(--temple-orange));
    color: #fff;
    text-align: center;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
.monk-mode-banner strong { font-weight: 700; }

/* The /monk-mode access page */
.monk-card {
    border-left: 4px solid var(--monk-saffron);
    max-width: 640px;
}
.monk-card--active {
    background: rgba(255, 153, 51, 0.08);
}
.monk-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.25rem 0;
    max-width: 380px;
}
.monk-form label {
    font-weight: 600;
}
.monk-form input {
    font: inherit;
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--sandstone);
    border-radius: 0.5rem;
}
.monk-form input:focus {
    outline: none;
    border-color: var(--monk-saffron);
    box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.2);
}
.monk-form .monk-mode-toggle {
    align-self: flex-start;
}
.monk-error {
    color: var(--temple-red);
    font-weight: 600;
}
.monk-note {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Monk lessons — direction switch */
.monk-direction-switch {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.monk-dir-btn {
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 1rem;
    border-radius: 0.6rem;
    border: 2px solid var(--monk-saffron);
    background: transparent;
    color: inherit;
    font-weight: 600;
}
.monk-dir-btn .monk-dir-sub {
    font-weight: 400;
    font-size: 0.78rem;
    opacity: 0.75;
}
.monk-dir-btn.active {
    background: var(--monk-saffron);
    color: #fff;
}
.monk-dir-btn.active .monk-dir-sub { opacity: 0.9; }

/* Monk lessons — English accent switch (British / American).
   Deliberately lighter than the direction switch above it: direction changes
   which language you are learning, accent only changes how one side is shown,
   so it should read as the smaller of the two choices. */
.monk-accent-switch {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
.monk-accent-label {
    font-size: 0.8rem;
    opacity: 0.75;
    margin-right: 0.15rem;
}
.monk-accent-btn {
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--monk-saffron);
    background: transparent;
    color: inherit;
}
.monk-accent-btn.active {
    background: var(--monk-saffron);
    color: #fff;
    font-weight: 600;
}
/* Marks a play button that is about to sound British audio to a learner who
   asked for American, because that US file has not been generated yet. */
.monk-audio-fallback {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 0.15rem;
    cursor: help;
}

/* Monk lessons — topic grid */
.monk-topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.monk-topic-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--sandstone);
    border-left: 4px solid var(--monk-saffron);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.monk-topic-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.monk-topic-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--monk-saffron);
}
.monk-topic-title { font-size: 1.1rem; font-weight: 700; }
.monk-topic-sub { opacity: 0.75; }
.monk-topic-pali { font-style: italic; opacity: 0.7; font-size: 0.85rem; }
.monk-topic-count { font-size: 0.8rem; opacity: 0.6; margin-top: 0.25rem; }

/* Monk lessons — entry cards */
.monk-back { text-decoration: none; opacity: 0.8; }
.monk-entry-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    margin: 1rem 0 2rem;
}
.monk-entry {
    padding: 0.9rem 1rem;
    border-radius: 0.7rem;
    border: 1px solid var(--sandstone);
    background: rgba(255, 153, 51, 0.04);
}
.monk-entry-prompt { font-size: 1.15rem; font-weight: 700; }
.monk-entry-prompt .thai { font-size: 1.5rem; }
.monk-entry-target { margin-top: 0.35rem; }
.monk-entry-target .thai { font-size: 1.4rem; font-weight: 600; }
.monk-entry-word { font-size: 1.15rem; }
.monk-entry-pron {
    display: block;
    font-family: "Roboto Mono", monospace;
    font-size: 0.9rem;
    color: var(--mekong-blue);
}
/* Must come after the display:block above, or it loses to it and the browser's
   own [hidden] rule never gets a look in. */
.monk-entry-pron[hidden] { display: none; }
.monk-entry-meta {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
}
.monk-entry-pali { font-style: italic; opacity: 0.8; }
.monk-entry-note { opacity: 0.7; }

/* ── English pronunciation (direction = learn_english) ────────────────────
   Read the respelling, then the Thai instruction. IPA sits below both and only
   appears when the learner asks for it. (Audio to follow later — it is meant to
   be the real anchor, with the respelling as the memory aid.) */
.monk-entry-respell {
    display: block;
    font-family: "Roboto Mono", monospace;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--mekong-blue);
}
.monk-entry-tip {
    margin: 0.45rem 0 0;
    padding: 0.4rem 0.6rem;
    border-left: 3px solid var(--mekong-blue);
    background: rgba(0, 0, 0, 0.03);
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.9;
}
/* The play button sits inline next to the English word, so it reads as part of
   the word rather than as a separate control to hunt for. */
.monk-audio-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    border-radius: 6px;
    /* Comfortably tappable on a phone without making the row taller. */
    min-width: 2rem;
    min-height: 2rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.monk-audio-btn:hover { background: var(--bamboo-beige); }
.monk-audio-btn:focus-visible { outline: 2px solid var(--monk-saffron); }
.monk-audio-btn.is-playing {
    background: var(--monk-saffron);
    transform: scale(1.1);
}

.monk-ipa-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.monk-ipa-toggle-sub { opacity: 0.6; font-size: 0.8rem; }

.monk-pron-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

/* Tables scroll inside their own box so the page never scrolls sideways on a
   phone, which is how most of these learners will read it. */
.monk-pron-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.monk-pron-table {
    width: 100%;
    min-width: 340px;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.monk-pron-table th,
.monk-pron-table td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}
.monk-pron-table th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}
.monk-pron-table code {
    font-family: "Roboto Mono", monospace;
    font-weight: 600;
    color: var(--mekong-blue);
}
.monk-pron-table td.thai { line-height: 1.7; }

/* ── Drill sections & reading passages (lessons 11–12) ──────────────────── */
.monk-drill-subtitle {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.7;
}
.monk-passage h3 { margin-bottom: 0.25rem; }
.monk-passage-title-th {
    display: block;
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.75;
}
/* Long-form reading wants book-like line spacing, not list-item spacing. */
.monk-passage-text { line-height: 1.8; margin: 0.75rem 0; }
.monk-passage-source {
    font-style: italic;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.75rem;
}
/* The passage play button carries a text label, so it reads as a button. */
.monk-passage-audio {
    border: 1px solid var(--monk-saffron);
    font-size: 0.95rem;
    padding: 0.4rem 0.8rem;
}
.monk-pron-warn { border-left: 4px solid #c9772f; }

/* ── Word choices & reading guide (lesson 12) ───────────────────────────── */
.monk-wordchoice h3 {
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
}
.monk-wordchoice-pali {
    font-size: 0.82rem;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7;
}

/* Numbered so a teacher can say "point 3" out loud in class. */
.monk-reading-tips {
    margin: 0.75rem 0 0;
    padding-left: 1.3rem;
}
.monk-reading-tips li { margin-bottom: 0.7rem; }
/* Thai carries the real instruction here, so it gets the normal size and the
   English sits above it as the short heading version. */
.monk-reading-tip-en {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
}
.monk-reading-tip-th { display: block; line-height: 1.7; }

/* Thai leads, English follows as a quieter gloss — the reader here is Thai, and
   equal weight made the two languages run into each other. */
.monk-pron-guide .card p.thai { margin-bottom: 0.5rem; }
.monk-pron-guide .card p:not(.thai) {
    font-size: 0.88rem;
    opacity: 0.7;
    line-height: 1.55;
}
.monk-pron-howto {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Site-wide 🔊 audio button (paired with the .th-audio handler in base.js).
   Small, round, and unobtrusive so it can sit beside any Thai word without
   dominating it. Turns green while its clip is playing. */
.th-audio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0.3rem 0.55rem;
    border: 2px solid var(--bodhi-green);
    background: #fff;
    color: var(--bodhi-green);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    vertical-align: middle;
}

.th-audio:hover { background: var(--frangipani); }
.th-audio.is-playing { background: var(--bodhi-green); color: #fff; }

.th-audio:focus-visible {
    outline: 3px solid var(--royal-gold);
    outline-offset: 2px;
}

/* ==========================================================================
   Reading Support (accessibility)
   ==========================================================================
   Three independent, learner-controlled toggles that make text easier to read
   for people who find reading harder (e.g. dyslexia), plus a read-aloud tool
   where the learner picks what gets spoken. Each toggle is switched on by an
   "rs-<name>" class added to the <html> element by base.js. The panel markup is
   in base.html's nav; the button reuses the site's .dropdown pattern.

   Design note: the easy-read font only replaces the LATIN text. Thai script and
   Paiboon romanization keep their own fonts (Thai needs Noto Serif Thai to
   render its stacked vowels/tones; romanization stays monospace via its own
   !important rule earlier in this file), so switching fonts never breaks them.
   ------------------------------------------------------------------------- */

/* --- The panel (dropdown contents) ---
   Taller than a normal dropdown so the "who this is for" note at the bottom is
   visible without scrolling; still capped so it can't run off a short screen. */
.reading-support-panel {
    min-width: 240px;
    padding: 0.5rem 0.4rem;
    max-height: min(85vh, 560px);
}
.reading-support-panel .rs-heading {
    margin: 0;
    padding: 0.2rem 0.6rem 0.45rem;
    font-weight: 700;
    color: var(--gold-shimmer);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.reading-support-panel .rs-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    cursor: pointer;
    white-space: nowrap;
    font: inherit;
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.reading-support-panel .rs-option:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0.15) 100%);
    color: var(--gold-shimmer);
}
.reading-support-panel .rs-option input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--royal-gold);
    cursor: pointer;
    flex: none;
}
.reading-support-panel .rs-reset {
    display: block;
    width: calc(100% - 1.2rem);
    margin: 0.5rem 0.6rem 0.2rem;
    padding: 0.4rem 0.6rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid var(--royal-gold);
    border-radius: 0.4rem;
    cursor: pointer;
}
.reading-support-panel .rs-reset:hover {
    background: rgba(212, 175, 55, 0.25);
    color: var(--gold-shimmer);
}
.reading-support-panel .rs-note {
    margin: 0;
    padding: 0.35rem 0.6rem 0.2rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

/* --- Effect 1: easy-to-read font ---
   Swap the decorative serif for Atkinson Hyperlegible (designed for maximum
   legibility). Thai glyphs fall through to Noto Serif Thai automatically. No
   !important, so the earlier monospace romanization rule still wins. */
html.rs-font body,
html.rs-font h1, html.rs-font h2, html.rs-font h3,
html.rs-font h4, html.rs-font h5, html.rs-font h6 {
    font-family: 'Atkinson Hyperlegible', 'Noto Serif Thai', Georgia, sans-serif;
}

/* --- Effect 2: bigger text ---
   Scale the root font size up. Everything sized in rem/em grows with it. */
html.rs-large {
    font-size: 115%;
}

/* --- Effect 3: extra spacing ---
   Loosen line height and word/letter spacing — the best-evidenced change for
   dyslexic readers. Kept gentle so Thai's stacked marks stay attached. */
html.rs-spacing body {
    line-height: 1.9;
    letter-spacing: 0.05em;
    word-spacing: 0.16em;
}
html.rs-spacing p,
html.rs-spacing li {
    margin-bottom: 0.8em;
}

/* --- Read aloud (inside the panel) ---
   A chooser ("what should I read?") sits above the button so the learner
   decides what gets spoken before starting. */
.reading-support-panel .rs-read-group {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}
.reading-support-panel .rs-read-label {
    display: block;
    padding: 0 0.6rem 0.3rem;
    max-width: 15rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    color: rgba(255, 255, 255, 0.9);
}
.reading-support-panel .rs-read-scope {
    display: block;
    width: calc(100% - 1.2rem);
    margin: 0 0.6rem;
    padding: 0.35rem 0.4rem;
    font: inherit;
    font-size: 0.85rem;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--royal-gold);
    border-radius: 0.4rem;
    cursor: pointer;
}
/* Native dropdown lists render on the OS layer, so force readable colours. */
.reading-support-panel .rs-read-scope option {
    color: #1a1a1a;
    background: #FFFFFF;
}
.reading-support-panel .rs-read {
    display: block;
    width: calc(100% - 1.2rem);
    margin: 0.4rem 0.6rem 0;
    padding: 0.45rem 0.6rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--royal-purple);
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
}
.reading-support-panel .rs-read:hover {
    background: var(--deep-purple);
}
.reading-support-panel .rs-read.is-speaking {
    background: var(--temple-red);
}
.reading-support-panel .rs-read-hint {
    margin: 0;
    padding: 0.3rem 0.6rem 0;
    max-width: 15rem;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: normal;
    color: rgba(255, 255, 255, 0.75);
}

/* --- "Pick a part to read" mode ---
   While the learner is choosing, every readable block highlights on hover so
   it is obvious what will be spoken when they click. */
html.rs-picking main p:hover,
html.rs-picking main li:hover,
html.rs-picking main h1:hover,
html.rs-picking main h2:hover,
html.rs-picking main h3:hover,
html.rs-picking main h4:hover,
html.rs-picking main h5:hover,
html.rs-picking main h6:hover,
html.rs-picking main blockquote:hover,
html.rs-picking main td:hover,
html.rs-picking main th:hover,
html.rs-picking main dd:hover,
html.rs-picking main dt:hover,
html.rs-picking main figcaption:hover {
    outline: 2px dashed var(--royal-gold);
    outline-offset: 2px;
    background: rgba(212, 175, 55, 0.15);
    cursor: pointer;
}