/* ==========================================================================
   CoptAra Kids Bible Study - Scoped Stylesheet (v=6)
   Joyful storybook card UI designed especially for children.
   Uses scoped palette variables mixed with canonical tokens for seamless light/dark mode.
   Ensures accessible contrast (no rainbow text), chunky warm touch targets (>=44px),
   RTL logical properties, and respect for prefers-reduced-motion.
   ========================================================================== */

:root {
    --kids-study-nav-height: 5.5rem;
    --kids-study-deck-height: 0px;
    --kids-study-sticky-offset: 5.5rem;
}

.kids-study-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-md, 20px);
    color: var(--color-text);
    font-family: inherit;
    box-sizing: border-box;

    /* Scoped child-specific palette variables */
    --kids-blue: #236FA8;
    --kids-teal: #0D8383;
    --kids-purple: #78428F;
    --kids-coral: #C04733;
    --kids-amber: #B27600;
    --kids-green: #2B7A4B;

    /* Mixed with canonical surfaces for robust dark mode readability and contrast */
    --kids-blue-surface: color-mix(in srgb, var(--kids-blue) 12%, var(--color-surface, #F0EBE3));
    --kids-blue-badge: color-mix(in srgb, var(--kids-blue) 22%, var(--color-surface-2, #E8E0D5));
    --kids-teal-surface: color-mix(in srgb, var(--kids-teal) 12%, var(--color-surface, #F0EBE3));
    --kids-teal-badge: color-mix(in srgb, var(--kids-teal) 22%, var(--color-surface-2, #E8E0D5));
    --kids-purple-surface: color-mix(in srgb, var(--kids-purple) 12%, var(--color-surface, #F0EBE3));
    --kids-purple-badge: color-mix(in srgb, var(--kids-purple) 22%, var(--color-surface-2, #E8E0D5));
    --kids-coral-surface: color-mix(in srgb, var(--kids-coral) 12%, var(--color-surface, #F0EBE3));
    --kids-coral-badge: color-mix(in srgb, var(--kids-coral) 22%, var(--color-surface-2, #E8E0D5));
    --kids-amber-surface: color-mix(in srgb, var(--kids-amber) 12%, var(--color-surface, #F0EBE3));
    --kids-amber-badge: color-mix(in srgb, var(--kids-amber) 22%, var(--color-surface-2, #E8E0D5));
    --kids-green-surface: color-mix(in srgb, var(--kids-green) 12%, var(--color-surface, #F0EBE3));
    --kids-green-badge: color-mix(in srgb, var(--kids-green) 22%, var(--color-surface-2, #E8E0D5));
}

/* Allow catalog grid and chapter reader to expand up to 1080px for desktop layouts */
.kids-study-catalog-container,
.kids-study-chapter-container {
    max-width: 1080px;
}

.kids-study-chapter-container {
    overflow: visible;
    transform: none;
}

.kids-study-container *,
.kids-study-container *::before,
.kids-study-container *::after {
    box-sizing: inherit;
}

.kids-study-container h1,
.kids-study-container h2,
.kids-study-container h3,
.kids-study-container h4 {
    color: var(--color-text);
    margin-top: 0;
}

/* ==========================================================================
   Header & Back Navigation Button
   ========================================================================== */
.kids-study-catalog-header,
.kids-study-lesson-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-xl, 28px);
    gap: var(--space-sm, 12px);
    text-align: center;
}

.kids-study-container .kids-study-back-btn {
    align-self: flex-start;
    text-decoration: none;
    color: var(--color-text);
    background-color: var(--color-surface, #F0EBE3);
    border: 2px solid var(--color-border, #D9CFC3);
    border-radius: var(--radius-md, 10px);
    padding: 8px 16px;
    font-weight: 700;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(44, 36, 22, 0.05);
    transition: background-color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease;
}

.kids-study-container .kids-study-back-btn:hover {
    background-color: var(--color-surface-2, #E8E0D5);
    border-color: var(--color-accent);
    text-decoration: none;
}

.kids-study-container .kids-study-back-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.kids-study-header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.8em;
    background-color: var(--kids-teal-badge);
    border: 2px solid var(--kids-teal);
    line-height: 1;
}

.kids-study-title {
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    margin-bottom: var(--space-xs, 6px);
    line-height: 1.25;
}

.kids-study-reference {
    font-size: 1.1em;
    margin: 4px 0 0 0;
}
.kids-study-reference a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 700;
}
.kids-study-reference a:hover {
    text-decoration: underline;
}
.kids-study-translation-label {
    font-size: 0.9em;
    color: var(--color-text-muted, #6B5A45);
    margin-inline-start: 6px;
}

/* ==========================================================================
   Joyful Storybook Hero Banner (Catalog)
   ========================================================================== */
.kids-study-hero-banner {
    position: relative;
    width: 100%;
    background: linear-gradient(140deg, color-mix(in srgb, var(--kids-amber) 14%, var(--color-surface, #F0EBE3)), color-mix(in srgb, var(--kids-teal) 10%, var(--color-surface, #F0EBE3)));
    border: 2.5px solid color-mix(in srgb, var(--kids-amber) 35%, var(--color-border, #D9CFC3));
    border-radius: var(--radius-lg, 20px);
    padding: var(--space-xl, 28px) var(--space-lg, 24px);
    box-shadow: 0 4px 18px rgba(44, 36, 22, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.kids-study-hero-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.kids-study-hero-star {
    position: absolute;
    font-size: 1.5em;
    opacity: 0.85;
    line-height: 1;
    user-select: none;
}
.kids-star-1 { top: 12px; inset-inline-start: 18px; font-size: 1.4em; }
.kids-star-2 { top: 16px; inset-inline-end: 22px; font-size: 1.6em; }
.kids-star-3 { bottom: 14px; inset-inline-start: 24px; font-size: 1.3em; }
.kids-star-4 { bottom: 12px; inset-inline-end: 20px; font-size: 1.5em; }

.kids-study-hero-media {
    max-width: 640px;
    width: 100%;
    margin-bottom: var(--space-sm, 12px);
}

.kids-study-hero-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 14px);
    box-shadow: 0 3px 12px rgba(44, 36, 22, 0.1);
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.kids-study-hero-body {
    position: relative;
    z-index: 1;
    max-width: 660px;
    margin: 0 auto;
}

.kids-study-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: var(--color-surface, #F0EBE3);
    border: 1.5px solid var(--kids-amber);
    color: var(--color-text);
    font-size: 0.88em;
    font-weight: 700;
    margin-bottom: var(--space-sm, 10px);
    box-shadow: 0 2px 5px rgba(44, 36, 22, 0.05);
}

.kids-study-hero-headline {
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text);
    margin-bottom: var(--space-sm, 12px);
}

.kids-study-luna-desc {
    max-width: 620px;
    margin: 0 auto;
    color: var(--color-text-muted, #6B5A45);
    font-size: 1.05em;
    line-height: 1.6;
}

/* ==========================================================================
   6 Starter Lessons Section (Playful Themed Cards)
   ========================================================================== */
.kids-study-starter-section {
    margin-top: var(--space-xl, 28px);
}

.kids-study-starter-header {
    text-align: center;
    margin-bottom: var(--space-md, 16px);
}

.kids-study-starter-title {
    font-size: 1.35em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.kids-study-starter-badge {
    font-size: 1.2em;
    line-height: 1;
}

.kids-study-starter-desc {
    margin: 0;
    font-size: 0.95em;
    color: var(--color-text-muted, #6B5A45);
}

.kids-study-lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-md, 16px);
}

/* Warm Rounded Chunky Touch Cards */
.kids-study-container .kids-study-lesson-card {
    background-color: var(--color-surface, #F0EBE3);
    border: 2.5px solid var(--color-border, #D9CFC3);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-md, 16px);
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 96px;
    box-shadow: 0 3px 8px rgba(44, 36, 22, 0.06);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, background-color var(--duration-fast, 150ms) ease;
}

@media (prefers-reduced-motion: no-preference) {
    .kids-study-container .kids-study-lesson-card {
        transition: transform var(--duration-fast, 150ms) var(--ease-out, ease), box-shadow var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, background-color var(--duration-fast, 150ms) ease;
    }
    .kids-study-container .kids-study-lesson-card:hover {
        transform: translateY(-3px);
    }
}

.kids-study-container .kids-study-lesson-card:hover {
    box-shadow: 0 6px 18px rgba(44, 36, 22, 0.12);
    border-color: var(--lesson-accent, var(--color-accent));
    background-color: var(--lesson-surface, var(--color-surface));
}

.kids-study-container .kids-study-lesson-card:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.kids-study-lesson-icon-badge {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background-color: var(--lesson-badge-bg, var(--color-surface-2));
    border: 2px solid var(--lesson-accent, var(--color-border));
    font-size: 1.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.kids-study-lesson-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kids-study-lesson-title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
}

.kids-study-lesson-verse {
    margin: 0;
    font-size: 0.85em;
    color: var(--color-text-muted, #6B5A45);
    font-weight: 600;
}

/* Individual Lesson Theming via Scoped Palette */
.kids-study-lesson-creation-light {
    --lesson-accent: var(--kids-amber);
    --lesson-badge-bg: var(--kids-amber-badge);
    --lesson-surface: var(--kids-amber-surface);
}
.kids-study-lesson-let-children-come {
    --lesson-accent: var(--kids-blue);
    --lesson-badge-bg: var(--kids-blue-badge);
    --lesson-surface: var(--kids-blue-surface);
}
.kids-study-lesson-be-kind {
    --lesson-accent: var(--kids-teal);
    --lesson-badge-bg: var(--kids-teal-badge);
    --lesson-surface: var(--kids-teal-surface);
}
.kids-study-lesson-love-neighbor {
    --lesson-accent: var(--kids-coral);
    --lesson-badge-bg: var(--kids-coral-badge);
    --lesson-surface: var(--kids-coral-surface);
}
.kids-study-lesson-god-is-good {
    --lesson-accent: var(--kids-purple);
    --lesson-badge-bg: var(--kids-purple-badge);
    --lesson-surface: var(--kids-purple-surface);
}
.kids-study-lesson-good-shepherd {
    --lesson-accent: var(--kids-green);
    --lesson-badge-bg: var(--kids-green-badge);
    --lesson-surface: var(--kids-green-surface);
}

/* ==========================================================================
   Catalog: Bible Books Section (Section Color Identity + Playful Cards)
   ========================================================================== */
.kids-study-books-section {
    margin-top: var(--space-2xl, 36px);
    border-top: 2.5px solid var(--color-border, #D9CFC3);
    padding-top: var(--space-xl, 26px);
}

.kids-study-section-title {
    text-align: center;
    font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
    margin-bottom: var(--space-xs, 6px);
    font-weight: 800;
}

.kids-study-section-desc {
    text-align: center;
    color: var(--color-text-muted, #6B5A45);
    font-size: 1em;
    margin-bottom: var(--space-xl, 26px);
    line-height: 1.5;
}

.kids-study-section-group {
    margin-bottom: var(--space-xl, 30px);
}

.kids-study-section-subtitle {
    font-size: 1.25em;
    font-weight: 800;
    margin: var(--space-lg, 20px) 0 var(--space-md, 14px) 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2.5px solid var(--section-color, var(--color-border));
    color: var(--section-color, var(--color-accent));
}

.kids-study-section-icon {
    font-size: 1.2em;
    line-height: 1;
}

/* Section Color Identities */
.kids-study-section-ot {
    --section-color: var(--kids-coral);
    --section-surface: var(--kids-coral-surface);
    --section-badge: var(--kids-coral-badge);
}
.kids-study-section-deutero {
    --section-color: var(--kids-purple);
    --section-surface: var(--kids-purple-surface);
    --section-badge: var(--kids-purple-badge);
}
.kids-study-section-nt {
    --section-color: var(--kids-teal);
    --section-surface: var(--kids-teal-surface);
    --section-badge: var(--kids-teal-badge);
}

/* Books Grid: Responsive child-friendly cards
   - Mobile 320px: 2 compact cards across (minmax(0, 1fr)), no overflow
   - Desktop: 3-4 cards across (minmax(210px, 1fr)) */
.kids-study-books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

@media (max-width: 520px) {
    .kids-study-books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

/* Full Clickable Book Card with Chunky Warm Corners & Top-Left Accent */
.kids-study-container .kids-study-book-card-link {
    background-color: var(--color-surface, #F0EBE3);
    border: 2px solid var(--color-border, #D9CFC3);
    border-radius: var(--radius-md, 14px);
    padding: 12px 14px;
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 98px;
    box-shadow: 0 2px 6px rgba(44, 36, 22, 0.05);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, background-color var(--duration-fast, 150ms) ease;
}

/* Top-Left / Inline-Start Accent Bar */
.kids-study-book-card-accent {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 28px;
    height: 4px;
    background-color: var(--card-accent, var(--kids-teal));
    border-start-start-radius: 12px;
}

/* Top-Left Accent indicator via border */
.kids-study-container .kids-study-book-card-link::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 4px;
    height: 100%;
    background-color: var(--card-accent, var(--kids-teal));
}

@media (prefers-reduced-motion: no-preference) {
    .kids-study-container .kids-study-book-card-link {
        transition: transform var(--duration-fast, 150ms) var(--ease-out, ease), box-shadow var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, background-color var(--duration-fast, 150ms) ease;
    }
    .kids-study-container .kids-study-book-card-link:hover {
        transform: translateY(-2px);
    }
}

.kids-study-container .kids-study-book-card-link:hover {
    border-color: var(--card-accent, var(--color-accent));
    box-shadow: 0 6px 16px rgba(44, 36, 22, 0.12);
    background-color: color-mix(in srgb, var(--card-accent) 8%, var(--color-surface));
}

.kids-study-container .kids-study-book-card-link:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.kids-study-book-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-inline-start: 4px;
}

/* Playful Distinct Colored Icon Badges (Blue, Teal, Purple, Warm Coral) */
.kids-study-book-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md, 10px);
    background-color: var(--card-badge-bg, var(--kids-teal-badge));
    border: 1.5px solid var(--card-accent, var(--kids-teal));
    font-size: 1.3em;
    flex-shrink: 0;
    line-height: 1;
}

/* Alternating Playful Badge / Accent Colors */
.kids-study-books-grid .kids-study-book-card-link:nth-child(4n+1) {
    --card-accent: var(--kids-blue);
    --card-badge-bg: var(--kids-blue-badge);
}
.kids-study-books-grid .kids-study-book-card-link:nth-child(4n+2) {
    --card-accent: var(--kids-teal);
    --card-badge-bg: var(--kids-teal-badge);
}
.kids-study-books-grid .kids-study-book-card-link:nth-child(4n+3) {
    --card-accent: var(--kids-purple);
    --card-badge-bg: var(--kids-purple-badge);
}
.kids-study-books-grid .kids-study-book-card-link:nth-child(4n+4) {
    --card-accent: var(--kids-coral);
    --card-badge-bg: var(--kids-coral-badge);
}

.kids-study-book-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kids-study-book-name {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    word-break: break-word;
}

.kids-study-chapter-count {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--color-text-muted, #6B5A45);
}

.kids-study-book-cta {
    font-size: 0.84em;
    font-weight: 700;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding-top: 6px;
    border-top: 1px dashed var(--color-border, #D9CFC3);
    width: 100%;
}

@media (max-width: 420px) {
    .kids-study-container .kids-study-book-card-link {
        padding: 10px 8px;
        min-height: 88px;
        gap: 6px;
    }
    .kids-study-book-card-header {
        gap: 6px;
    }
    .kids-study-book-icon-badge {
        width: 32px;
        height: 32px;
        font-size: 1.15em;
    }
    .kids-study-book-name {
        font-size: 0.95em;
    }
    .kids-study-chapter-count {
        font-size: 0.76em;
    }
    .kids-study-book-cta {
        font-size: 0.78em;
    }
}

.kids-study-books-unavailable {
    text-align: center;
    padding: var(--space-lg, 20px);
    background-color: var(--color-surface, #F0EBE3);
    border: 2px dashed var(--color-border, #D9CFC3);
    border-radius: var(--radius-md, 12px);
    color: var(--color-text-muted, #6B5A45);
    font-size: 0.95em;
    margin: var(--space-md, 16px) 0;
}

/* ==========================================================================
   Chapter Chooser: Larger Labeled Chapter Tiles (Book View)
   ========================================================================== */
.kids-study-book-chooser {
    margin: var(--space-md, 20px) 0;
}

.kids-study-chapters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 10px;
    padding: 0;
}

.kids-study-book-page-grid {
    max-width: 800px;
    margin: var(--space-md, 20px) auto;
}

.kids-study-chapter-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    min-width: 52px;
    padding: 8px 6px;
    border: 2px solid var(--color-border, #D9CFC3);
    border-radius: var(--radius-md, 12px);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 700;
    background-color: var(--color-surface, #F0EBE3);
    box-shadow: 0 2px 5px rgba(44, 36, 22, 0.05);
    transition: background-color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
}

.kids-study-ch-prefix {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--color-text-muted, #6B5A45);
    line-height: 1;
    margin-bottom: 2px;
}

.kids-study-ch-num {
    font-size: 1.3em;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text);
}

.kids-study-chapter-link:hover,
.kids-study-chapter-link:focus-visible {
    background-color: var(--color-accent, #7A5900);
    color: var(--color-on-accent, #FFFFFF);
    border-color: var(--color-accent, #7A5900);
    outline: none;
}

.kids-study-chapter-link:hover .kids-study-ch-prefix,
.kids-study-chapter-link:hover .kids-study-ch-num,
.kids-study-chapter-link:focus-visible .kids-study-ch-prefix,
.kids-study-chapter-link:focus-visible .kids-study-ch-num {
    color: var(--color-on-accent, #FFFFFF);
}

.kids-study-chapter-link:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .kids-study-chapters-grid {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        gap: 8px;
    }
    .kids-study-chapter-link {
        min-height: 56px;
        padding: 6px 4px;
    }
    .kids-study-ch-prefix {
        font-size: 0.68em;
    }
    .kids-study-ch-num {
        font-size: 1.15em;
    }
}

/* ==========================================================================
   Chapter Reader Navigation Bar
   ========================================================================== */
.kids-study-chapter-nav-bar,
.kids-study-chapter-bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-md, 18px);
    flex-wrap: wrap;
}

.kids-study-chapter-bottom-nav {
    margin-top: var(--space-xl, 30px);
    padding-top: var(--space-md, 18px);
    border-top: 2px solid var(--color-border, #D9CFC3);
}

.kids-study-chapter-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    border-radius: var(--radius-sm, 8px);
    background-color: var(--color-surface, #F0EBE3);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 700;
    border: 2px solid var(--color-border, #D9CFC3);
    box-shadow: 0 1px 3px rgba(44, 36, 22, 0.06);
    transition: background-color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
}

.kids-study-chapter-nav-btn:hover,
.kids-study-chapter-nav-btn:focus-visible {
    background-color: var(--color-surface-2, #E8E0D5);
    border-color: var(--color-accent, #7A5900);
    color: var(--color-accent, #7A5900);
}

.kids-study-chapter-nav-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.kids-study-chapter-nav-book {
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    font-size: 1.05em;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.kids-study-chapter-nav-book:hover {
    text-decoration: underline;
}

.kids-study-chapter-nav-placeholder {
    width: 80px;
}

.kids-study-real-reader-link {
    display: inline-block;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92em;
}

.kids-study-real-reader-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Kids Study Audio Cards & Transcripts
   ========================================================================== */
.kids-study-welcome-audio-card,
.kids-study-lesson-audio-card {
    background-color: color-mix(in srgb, var(--kids-teal) 10%, var(--color-surface, #F0EBE3));
    border: 2px solid color-mix(in srgb, var(--kids-teal) 30%, var(--color-border, #D9CFC3));
    border-radius: var(--radius-md, 14px);
    padding: var(--space-md, 16px);
    margin-bottom: var(--space-lg, 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kids-study-audio-header,
.kids-study-audio-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.kids-study-audio-title {
    font-size: 1.15em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
}

.kids-study-audio-badge {
    font-size: 1.25em;
    line-height: 1;
}

.kids-study-audio-label {
    display: inline-block;
    font-size: 0.82em;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: var(--kids-teal-badge);
    border: 1px solid var(--kids-teal);
    color: var(--color-text);
}

.kids-study-audio-player {
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-sm, 8px);
}

.kids-study-welcome-transcript-wrap {
    margin-top: 4px;
}

.kids-study-audio-transcript {
    margin: 0;
    font-size: 0.92em;
    line-height: 1.6;
    color: var(--color-text-muted, #6B5A45);
    background-color: var(--color-surface, #F0EBE3);
    border: 1px solid var(--color-border, #D9CFC3);
    border-radius: var(--radius-sm, 8px);
    padding: 10px 14px;
}

/* Localized Lesson Audio Transcript in <details> */
details.kids-study-lesson-transcript-details {
    margin-top: 4px;
    background-color: transparent;
    border: 1px dashed var(--color-border, #D9CFC3);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
}

details.kids-study-lesson-transcript-details summary {
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 700;
    color: var(--color-text);
    min-height: 44px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
    list-style: none;
    background-color: var(--color-surface, #F0EBE3);
    transition: background-color var(--duration-fast, 150ms) ease;
}

details.kids-study-lesson-transcript-details summary::-webkit-details-marker {
    display: none;
}

details.kids-study-lesson-transcript-details summary:hover {
    background-color: var(--color-surface-2, #E8E0D5);
}

details.kids-study-lesson-transcript-details summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

details.kids-study-lesson-transcript-details summary::after {
    content: '▾';
    font-size: 0.9em;
    color: var(--color-text-muted, #6B5A45);
    transition: transform var(--duration-fast, 150ms) ease;
}

details.kids-study-lesson-transcript-details[open] summary::after {
    transform: rotate(180deg);
}

details.kids-study-lesson-transcript-details .kids-study-audio-transcript {
    border: none;
    border-top: 1px dashed var(--color-border, #D9CFC3);
    border-radius: 0;
    background-color: var(--color-surface-2, #E8E0D5);
}

.kids-study-transcript-line {
    margin: 4px 0;
    line-height: 1.5;
}

.kids-study-transcript-line strong {
    color: var(--color-accent);
}

/* ==========================================================================
   Guidance Card & Collapsible Teacher Note
   ========================================================================== */
.kids-study-guidance-card {
    background-color: color-mix(in srgb, var(--kids-teal) 10%, var(--color-surface, #F0EBE3));
    border: 2px solid color-mix(in srgb, var(--kids-teal) 30%, var(--color-border, #D9CFC3));
    border-radius: var(--radius-md, 14px);
    padding: var(--space-md, 16px) var(--space-lg, 20px);
    margin-bottom: var(--space-md, 18px);
}

.kids-study-guidance-card h2 {
    font-size: 1.15em;
    margin-top: 0;
    margin-bottom: 6px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kids-study-guidance-icon {
    font-size: 1.2em;
    line-height: 1;
}

.kids-study-guidance-card p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--color-text-muted, #6B5A45);
}

.kids-study-grownup-brief {
    margin-top: 10px !important;
    padding-top: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--kids-teal) 35%, var(--color-border, #D9CFC3));
    font-size: 0.9em !important;
    font-weight: 600;
    color: var(--color-text-muted, #6B5A45) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.45;
}

.kids-study-grownup-brief-icon {
    font-size: 1.15em;
    flex-shrink: 0;
    line-height: 1;
}

/* Accessible Collapsible Teacher Note */
.kids-study-trusted-grownup-note {
    margin: var(--space-lg, 20px) 0;
    background-color: var(--color-surface, #F0EBE3);
    border: 2px dashed var(--color-border, #D9CFC3);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
}

.kids-study-trusted-grownup-note summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
    background-color: transparent;
    transition: background-color var(--duration-fast, 150ms) ease;
}

.kids-study-trusted-grownup-note summary::-webkit-details-marker {
    display: none;
}

.kids-study-trusted-grownup-note summary:hover {
    background-color: var(--color-surface-2, #E8E0D5);
}

.kids-study-trusted-grownup-note summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.kids-study-grownup-title {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--color-text-muted, #6B5A45);
    margin: 0;
}

.kids-study-trusted-grownup-note summary::after {
    content: '▾';
    font-size: 0.9em;
    color: var(--color-text-muted, #6B5A45);
    transition: transform var(--duration-fast, 150ms) ease;
}

.kids-study-trusted-grownup-note[open] summary::after {
    transform: rotate(180deg);
}

.kids-study-grownup-content {
    padding: 0 16px 14px 16px;
    border-top: 1px dashed var(--color-border, #D9CFC3);
}

.kids-study-grownup-content p {
    margin: 10px 0 0 0;
    font-size: 0.9em;
    line-height: 1.55;
    color: var(--color-text-muted, #6B5A45);
}

/* ==========================================================================
   Chapter Reader Layout: Full Scripture Main Column + Sticky Side Actions (Desktop)
   ========================================================================== */
.kids-study-reader-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-xl, 28px);
    align-items: start;
    position: relative;
    overflow: visible;
    transform: none;
}

.kids-study-chapter-verses {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.kids-study-interaction-deck {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--kids-study-nav-height, 5.5rem);
    z-index: 40; /* Below .nav (100) and #cw-root */
    max-height: calc(100vh - var(--kids-study-nav-height, 5.5rem) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-surface, #F0EBE3);
    border: 2px solid var(--color-border, #D9CFC3);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-md, 16px);
    box-shadow: 0 4px 14px rgba(44, 36, 22, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 12px);
    margin-bottom: var(--space-xl, 28px);
}

/* Selected Verse Toolbar (wraps cleanly to fit 340px desktop rail) */
.kids-study-focus-toolbar {
    background-color: var(--color-surface, #F0EBE3);
    border: 2px solid var(--color-accent, #7A5900);
    border-radius: var(--radius-md, 14px);
    box-shadow: 0 3px 10px rgba(44, 36, 22, 0.08);
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap; /* wraps to fit 340px rail */
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}

.kids-study-focus-indicator {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.05em;
    color: var(--color-text);
    flex: 1 1 auto;
    min-width: 0;
}

.kids-study-focus-label {
    color: var(--color-text-muted, #6B5A45);
    font-size: 0.9em;
    font-weight: 600;
}

.kids-study-focus-indicator strong {
    color: var(--color-accent, #7A5900);
    font-size: 1.15em;
}

.kids-study-focus-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.kids-study-nav-arrow {
    font-size: 1.1em;
    line-height: 1;
}

.kids-study-nav-btn-text {
    display: inline;
}

/* Explicit Verse Nav Buttons */
.kids-study-container button.kids-study-nav-verse-btn {
    width: auto;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 14px;
    font-size: 0.92em;
    font-weight: 700;
    background-color: var(--color-surface-2, #E8E0D5);
    color: var(--color-text);
    border: 1px solid var(--color-border, #D9CFC3);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
}

.kids-study-container button.kids-study-nav-verse-btn:hover:not(:disabled) {
    background-color: var(--color-accent, #7A5900);
    color: var(--color-on-accent, #FFFFFF);
    border-color: var(--color-accent, #7A5900);
}

.kids-study-container button.kids-study-nav-verse-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.kids-study-container button.kids-study-nav-verse-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background-color: var(--color-surface, #F0EBE3);
    color: var(--color-text-muted, #6B5A45);
    border-color: var(--color-border, #D9CFC3);
}

/* Device Voice Verse Speech Controls */
.kids-study-verse-device-speech {
    background-color: color-mix(in srgb, var(--kids-blue) 10%, var(--color-surface, #F0EBE3));
    border: 1.5px solid color-mix(in srgb, var(--kids-blue) 30%, var(--color-border, #D9CFC3));
    border-radius: var(--radius-md, 12px);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kids-study-device-voice-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kids-study-btn-device-voice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    background-color: var(--color-surface, #F0EBE3);
    color: var(--color-text);
    border: 1.5px solid var(--color-border, #D9CFC3);
    transition: background-color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
}

.kids-study-btn-device-voice:hover:not(:disabled) {
    background-color: var(--color-surface-2, #E8E0D5);
    border-color: var(--kids-blue, var(--color-accent));
    color: var(--color-text); /* Canonical var(--color-text), not blue low-contrast */
}

.kids-study-btn-device-voice:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.kids-study-btn-device-voice:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-surface, #F0EBE3);
    border-color: var(--color-border, #D9CFC3);
    color: var(--color-text-muted, #6B5A45);
}

.kids-study-btn-device-stop {
    background-color: color-mix(in srgb, var(--kids-coral) 12%, var(--color-surface, #F0EBE3));
    border-color: color-mix(in srgb, var(--kids-coral) 35%, var(--color-border, #D9CFC3));
    color: var(--color-text); /* Canonical var(--color-text), not coral low-contrast */
}

.kids-study-btn-device-stop:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--kids-coral) 20%, var(--color-surface, #F0EBE3));
    border-color: var(--kids-coral);
    color: var(--color-text); /* Canonical var(--color-text) */
}

.kids-verse-device-status {
    font-size: 0.82em;
    min-height: 1.2em;
    color: var(--color-text-muted, #6B5A45);
    line-height: 1.4;
}

/* Luna Interaction Block */
.kids-study-luna-interaction {
    background-color: color-mix(in srgb, var(--kids-purple) 12%, var(--color-surface, #F0EBE3));
    padding: var(--space-md, 18px);
    border-radius: var(--radius-md, 16px);
    border: 2px solid color-mix(in srgb, var(--kids-purple) 35%, var(--color-border, #D9CFC3));
    box-shadow: 0 3px 10px rgba(44, 36, 22, 0.05);
}

.kids-study-luna-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 1.05em;
    color: var(--color-text);
}

.kids-study-luna-badge {
    font-size: 1.25em;
    line-height: 1;
}

/* Prompt Allowance Disclosure (Collapsed Native Details) */
details.kids-study-luna-disclosure {
    margin: 4px 0 10px 0;
    background-color: transparent;
    border-radius: var(--radius-sm, 8px);
}

details.kids-study-luna-disclosure summary {
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--color-text-muted, #6B5A45);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    list-style: none;
}

details.kids-study-luna-disclosure summary::-webkit-details-marker {
    display: none;
}

details.kids-study-luna-disclosure summary::after {
    content: '▾';
    font-size: 0.85em;
    transition: transform var(--duration-fast, 150ms) ease;
}

details.kids-study-luna-disclosure[open] summary::after {
    transform: rotate(180deg);
}

details.kids-study-luna-disclosure summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

details.kids-study-luna-disclosure .kids-study-disclosure-text,
details.kids-study-luna-disclosure p {
    margin: 4px 0 8px 0;
    font-size: 0.82em;
    line-height: 1.5;
    color: var(--color-text-muted, #6B5A45);
    font-style: italic;
    padding: 6px 10px;
    background-color: color-mix(in srgb, var(--color-surface-2) 60%, transparent);
    border-radius: var(--radius-sm, 6px);
    border-inline-start: 3px solid var(--kids-purple);
}

.kids-study-luna-disclosure {
    font-size: 0.85em;
    color: var(--color-text-muted, #6B5A45);
    margin: 0 0 var(--space-md, 14px) 0;
    font-style: italic;
    line-height: 1.5;
}

.kids-btn-label-short {
    display: none;
}

.kids-btn-label-long {
    display: inline;
}

.kids-study-luna-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* In desktop 340px rail, stack Luna buttons for comfortable full touch targets */
.kids-study-interaction-deck .kids-study-luna-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Action Buttons with Icon + Label and Primary / Secondary Distinction */
.kids-study-container button.kids-study-btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    min-width: 44px;
    padding: 10px 16px;
    border-radius: var(--radius-md, 10px);
    font-size: 0.95em;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.25;
    text-align: center;
    border: 2px solid transparent;
    transition: transform var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease, background-color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease;
}

.kids-study-btn-icon {
    font-size: 1.25em;
    line-height: 1;
    flex-shrink: 0;
}

/* Primary Action: Explain this verse (High contrast, clearly emphasized) */
.kids-study-container button.kids-study-btn-action-primary {
    background-color: var(--color-accent, #7A5900);
    color: var(--color-on-accent, #FFFFFF);
    border-color: var(--color-accent, #7A5900);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.kids-study-container button.kids-study-btn-action-primary:hover {
    background-color: color-mix(in srgb, var(--color-accent) 88%, black);
    border-color: color-mix(in srgb, var(--color-accent) 88%, black);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* Secondary Action: How can I apply it? */
.kids-study-container button.kids-study-btn-action-secondary {
    background-color: var(--color-surface, #F0EBE3);
    color: var(--color-text);
    border-color: var(--color-accent, #7A5900);
    box-shadow: 0 2px 4px rgba(44, 36, 22, 0.06);
}

.kids-study-container button.kids-study-btn-action-secondary:hover {
    background-color: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface));
    border-color: var(--color-accent, #7A5900);
}

/* Tertiary Action: Ask a question */
.kids-study-container button.kids-study-btn-action-tertiary {
    background-color: var(--color-surface-2, #E8E0D5);
    color: var(--color-text);
    border-color: var(--color-border, #D9CFC3);
    box-shadow: 0 1px 3px rgba(44, 36, 22, 0.05);
}

.kids-study-container button.kids-study-btn-action-tertiary:hover {
    background-color: var(--color-surface, #F0EBE3);
    border-color: var(--color-accent, #7A5900);
}

.kids-study-container button.kids-study-btn-action:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Standard Buttons (Lesson Flow: Read, Think, Practice) */
.kids-study-container button.kids-study-btn-primary,
.kids-study-container button.kids-study-next-btn,
.kids-study-container button.kids-study-done-btn {
    background-color: var(--color-accent, #7A5900);
    color: var(--color-on-accent, #FFFFFF);
    border: 2px solid var(--color-accent, #7A5900);
    min-height: 48px;
    padding: 12px 24px;
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    font-size: 1.05em;
    font-weight: 700;
    width: 100%;
    margin-top: var(--space-md, 16px);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--color-accent) 25%, transparent);
    transition: background-color var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease, opacity var(--duration-fast, 150ms) ease;
}

.kids-study-container button.kids-study-btn-primary:hover,
.kids-study-container button.kids-study-next-btn:hover,
.kids-study-container button.kids-study-done-btn:hover {
    background-color: color-mix(in srgb, var(--color-accent) 88%, black);
    border-color: color-mix(in srgb, var(--color-accent) 88%, black);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.kids-study-container button.kids-study-btn-primary:focus-visible,
.kids-study-container button.kids-study-next-btn:focus-visible,
.kids-study-container button.kids-study-done-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Chapter Reader: Distinct Readable Verse Cards (NOT a text list)
   ========================================================================== */
.kids-study-chapter-verses {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--space-xl, 30px);
}

.kids-study-verse-item {
    background-color: var(--color-surface, #F0EBE3);
    border: 2px solid var(--color-border, #D9CFC3);
    border-radius: var(--radius-md, 14px);
    padding: 14px 18px;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1.7;
    min-height: 48px;
    box-shadow: 0 2px 5px rgba(44, 36, 22, 0.05);
    user-select: text;
    position: relative;
    scroll-margin-top: calc(var(--kids-study-nav-height, 5.5rem) + 16px);
    transition: transform var(--duration-fast, 150ms) ease, background-color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease;
}

.kids-study-verse-item:hover {
    background-color: var(--color-surface-2, #E8E0D5);
    border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
    box-shadow: 0 4px 10px rgba(44, 36, 22, 0.09);
}

.kids-study-verse-item:focus-visible {
    outline: 3px solid var(--color-accent, #7A5900);
    outline-offset: 2px;
}

/* Unmistakable Selected State */
.kids-study-verse-item.kids-verse-selected {
    background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface, #F0EBE3));
    border-color: var(--color-accent, #7A5900);
    border-width: 2.5px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-accent) 22%, transparent);
    font-weight: 500;
}

.kids-study-verse-item.kids-verse-selected::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    inset-inline-start: 4px;
    width: 6px;
    border-radius: 4px;
    background-color: var(--color-accent, #7A5900);
}

.kids-study-verse-num {
    font-weight: 800;
    color: var(--color-accent, #7A5900);
    margin-inline-end: 8px;
    font-size: 0.88em;
    vertical-align: baseline;
    display: inline-block;
}

.kids-study-verse-body {
    color: var(--color-text);
}

/* ==========================================================================
   Detail Lesson Views
   ========================================================================== */
.kids-study-lesson-section {
    background: var(--color-surface, #F0EBE3);
    border: 2px solid var(--color-border, #D9CFC3);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-lg, 24px);
    margin-bottom: var(--space-md, 20px);
    box-shadow: 0 2px 8px rgba(44, 36, 22, 0.05);
}

.kids-study-hidden {
    display: none !important;
}

.kids-study-scripture-box {
    background-color: var(--color-surface-2, #E8E0D5);
    padding: var(--space-md, 18px);
    border-radius: var(--radius-md, 12px);
    border-inline-start: 5px solid var(--color-accent, #7A5900);
    margin-bottom: var(--space-md, 18px);
    font-size: 1.2em;
    font-style: italic;
    color: var(--color-text);
}

.kids-study-explanation-box,
.kids-study-reflection-box,
.kids-study-activity-box {
    background-color: var(--color-surface-2, #E8E0D5);
    color: var(--color-text);
    padding: var(--space-md, 16px);
    border-radius: var(--radius-sm, 10px);
    margin-bottom: var(--space-md, 18px);
}

.kids-study-explanation-box h3,
.kids-study-lesson-section h2 {
    margin-top: 0;
}

.kids-study-completion-msg {
    margin-top: var(--space-md, 20px);
    padding: var(--space-md, 16px);
    background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
    border: 2px solid var(--color-accent);
    color: var(--color-text);
    border-radius: var(--radius-md, 10px);
    font-weight: 700;
    font-size: 1.1em;
    text-align: center;
}

.kids-study-prayer-link {
    text-align: center;
    margin: var(--space-xl, 28px) 0 var(--space-md, 16px) 0;
}

.kids-study-container .kids-study-prayer-link a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05em;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.kids-study-container .kids-study-prayer-link a:hover {
    text-decoration: underline;
}

.kids-study-catalog-actions,
.kids-study-detail-actions {
    margin-top: var(--space-xl, 28px);
    text-align: center;
}

.kids-study-container .kids-study-reset-btn {
    background-color: transparent;
    color: var(--color-text-muted, #6B5A45);
    border: 1px solid var(--color-border, #D9CFC3);
    min-height: 44px;
    width: auto;
    padding: 8px 18px;
    font-size: 0.9em;
    font-weight: 600;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
}

.kids-study-container .kids-study-reset-btn:hover {
    background-color: var(--color-surface-2, #E8E0D5);
    color: var(--color-text);
}

.kids-study-container .kids-study-reset-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Mobile Responsive Adjustments
   ========================================================================== */
.kids-study-interaction-deck > * {
    flex-shrink: 0;
    min-width: 0;
}

.kids-study-focus-actions {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.kids-study-container button.kids-study-nav-verse-btn,
.kids-study-container button.kids-study-btn-action {
    flex-wrap: wrap;
    max-width: 100%;
    height: auto;
}

.kids-btn-label-long,
.kids-btn-label-short,
.kids-study-nav-btn-text {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 800px) {
    .kids-study-reader-layout {
        display: flex;
        flex-direction: column;
        gap: var(--space-md, 16px);
        overflow: visible;
        transform: none;
    }

    /* Mobile Compact Sticky TOP Deck under actual .nav */
    .kids-study-interaction-deck {
        position: sticky;
        top: var(--kids-study-nav-height, 60px);
        z-index: 40; /* Below .nav (100) and #cw-root */
        max-height: none; /* No 230px height clip */
        overflow: visible; /* No scroll clipping inside panel */
        overscroll-behavior: auto;
        background-color: var(--color-surface, #F0EBE3);
        border: 2px solid var(--color-border, #D9CFC3);
        border-radius: var(--radius-md, 14px);
        padding: 8px 10px;
        box-shadow: 0 4px 12px rgba(44, 36, 22, 0.12);
        margin-bottom: var(--space-md, 16px);
        gap: 6px;
    }

    /* Hide redundant heading in mobile sticky deck */
    .kids-study-interaction-deck .kids-study-luna-header {
        display: none;
    }

    /* Row 1: Selected Verse Toolbar (Ref + prevnext 44px icon buttons) */
    .kids-study-focus-toolbar {
        padding: 4px 8px;
        min-height: 44px;
        gap: 6px;
        border-radius: var(--radius-sm, 10px);
        flex-wrap: nowrap;
    }

    .kids-study-focus-indicator {
        font-size: 0.9em;
    }

    .kids-study-focus-actions {
        gap: 6px;
    }

    .kids-study-container button.kids-study-nav-verse-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0 10px;
        font-size: 1.15em;
        line-height: 1;
    }

    .kids-study-nav-btn-text {
        display: none; /* Icon only for clean 44px button */
    }

    /* Row 2: 3 Clear Luna Actions */
    .kids-study-luna-interaction {
        padding: 6px 8px;
        border-radius: var(--radius-sm, 10px);
    }

    .kids-study-interaction-deck .kids-study-luna-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .kids-btn-label-long {
        display: none;
    }

    .kids-btn-label-short {
        display: inline;
    }

    .kids-study-container button.kids-study-btn-action {
        min-height: 44px;
        min-width: 44px;
        padding: 6px 6px;
        font-size: 0.88rem; /* Clear readable text, no tiny .76em */
        gap: 4px;
        line-height: 1.2;
    }

    /* Row 3: Device Listen + Stop Controls */
    .kids-study-verse-device-speech {
        padding: 6px 8px;
        gap: 4px;
        border-radius: var(--radius-sm, 10px);
    }

    .kids-study-device-voice-controls {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }

    #kids-verse-device-play {
        flex: 1 1 0;
        min-width: 0;
    }

    #kids-verse-device-play-text {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #kids-verse-device-stop {
        flex: 0 0 auto;
    }

    .kids-study-btn-device-voice {
        min-height: 44px;
        min-width: 44px;
        padding: 6px 12px;
        font-size: 0.88rem;
    }

    .kids-verse-device-status {
        font-size: 0.82em;
        min-height: 1.1em;
    }

    /* Verse scroll-margin-top ensures focused first line is not under sticky dock */
    .kids-study-verse-item {
        scroll-margin-top: calc(var(--kids-study-nav-height, 60px) + var(--kids-study-deck-height, 0px) + 16px);
    }
}

@media (max-width: 600px) {
    .kids-study-container {
        padding: var(--space-sm, 12px);
    }

    .kids-study-hero-banner {
        padding: var(--space-lg, 20px) var(--space-sm, 14px);
        border-radius: var(--radius-md, 16px);
    }

    .kids-study-chapter-nav-bar {
        font-size: 0.92em;
    }

    .kids-study-chapter-nav-placeholder {
        display: none;
    }

    .kids-study-verse-item {
        padding: 12px 14px;
        font-size: 1.05em;
    }
}

@media (max-width: 420px) {
    .kids-study-interaction-deck {
        max-height: none;
        padding: 6px 6px;
        gap: 5px;
    }

    .kids-study-focus-toolbar {
        padding: 4px 6px;
        min-height: 44px;
    }

    .kids-study-focus-indicator strong {
        font-size: 0.95em;
    }

    .kids-study-container button.kids-study-btn-action {
        font-size: 0.85rem; /* No tiny .76em text; accessible touch reading */
        padding: 6px 4px;
    }
}