/**
 * Veda Prashna Styling - Taittirīya Saṃhitā Portal
 * 
 * Sacred, elegant, and readable styling for individual prashna pages.
 * Optimized for Devanagari text with Vedic accents.
 */

/* ========================================
   FONT DECLARATIONS
   ======================================== */

/* Krishna Sanskrit: Devanagari with Vedic accents + Gentium Latin for transliteration.
   SIL Open Font License 1.1. https://taittiriya.com/#font */
@font-face {
    font-family: 'Krishna Sanskrit';
    src: url('/css/fonts/KrishnaSanskrit-Regular.woff2?v=e557a75ff6') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+0000-036F, U+0900-097F, U+1AB0-1AFF, U+1CD0-1CFF, U+1D00-1EFF, U+2000-206F,
                   U+20A0-20C0, U+2122, U+2212, U+25CC, U+2C60-2C7F, U+A720-A7FF, U+A8E0-A8FF, U+AB30-AB6F;
}

/* Secondary font: Siddhanta - excellent Vedic accent support */
@font-face {
    font-family: 'Siddhanta';
    src: url('/css/fonts/siddhanta.ttf') format('truetype'),
         url('../fonts/siddhanta.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CFF, U+A8E0-A8FF, U+11300-1137F;
}

/* Fallback font: Noto Serif Devanagari */
@font-face {
    font-family: 'Noto Serif Devanagari';
    src: url('/css/fonts/NotoSerifDevanagari-Regular.ttf') format('truetype'),
         url('../fonts/NotoSerifDevanagari-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CFF, U+A8E0-A8FF;
}



/* ========================================
   ROOT VARIABLES & RESET
   ======================================== */

:root {
    /* Sacred Color Palette */
    --veda-parchment: #faf9f7;
    --veda-ink-dark: #2e2a26;
    --veda-ink-medium: #454039;
    --veda-ink-light: #5a5449;
    --veda-accent-gold: #b8956a;
    --veda-accent-gold-rgb: 184, 149, 106;
    --veda-accent-copper: #8b6f47;
    --veda-accent-copper-rgb: 139, 111, 71;
    --veda-accent-sage: #6b5849;
    --veda-divider: #a67c52;
    
    /* Typography Scale */
    /* Font stack: Krishna Sanskrit (primary), Siddhanta and Noto Serif Devanagari (fallbacks) */
    --veda-font-primary: 'Krishna Sanskrit', 'Siddhanta', 'Noto Serif Devanagari', 'Arial Unicode MS', serif;
    --veda-font-secondary: 'Georgia', 'Times New Roman', serif;
    
    /* Spacing Scale */
    --veda-space-xs: 0.5rem;
    --veda-space-sm: 1rem;
    --veda-space-md: 1.5rem;
    --veda-space-lg: 2.5rem;
    --veda-space-xl: 4rem;
    
    /* Layout */
    --veda-max-width: 1100px;
    --veda-reading-width: 100ch;
}

/* ========================================
   FONT LOADING STATE
   ======================================== */

/* Hide Devanagari content until fonts are ready to prevent FOUT */
.fonts-loading .script-devanagari,
.fonts-loading .devanagari-text {
    visibility: hidden;
}

.fonts-loaded .script-devanagari,
.fonts-loaded .devanagari-text {
    visibility: visible;
}

/* ========================================
   READING PROGRESS BAR
   ======================================== */

.reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(166, 124, 82, 0.1);
    z-index: 1000;
    pointer-events: none;
}

.reading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    width: 0%;
    transition: width 0.1s ease-out;
    border-radius: 0 2px 2px 0;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* ========================================
   BREADCRUMB NAVIGATION
   ======================================== */

.breadcrumb-nav {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(250, 249, 247, 0.95);
    backdrop-filter: blur(10px);
    border: 2px solid var(--veda-accent-gold);
    border-radius: 12px;
    padding: var(--veda-space-sm) var(--veda-space-md);
    z-index: 999;
    box-shadow: 0 4px 12px rgba(46, 42, 38, 0.1);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.breadcrumb-nav:hover {
    background: rgba(250, 249, 247, 0.98);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(46, 42, 38, 0.15);
}

.breadcrumb-link {
    color: var(--veda-accent-gold);
    text-decoration: underline;
    text-decoration-color: var(--veda-accent-gold);
    text-underline-offset: 2px;
    font-family: var(--veda-font-primary);
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.breadcrumb-link:hover {
    color: var(--veda-accent-copper);
    text-decoration-color: var(--veda-accent-copper);
    background: rgba(184, 149, 106, 0.1);
}

.breadcrumb-separator {
    color: var(--veda-accent-copper);
    margin: 0 0.125rem;
    font-weight: bold;
}

.breadcrumb-current {
    color: var(--veda-ink-dark);
    font-family: var(--veda-font-primary);
    font-weight: bold;
}

/* Pancashati text styling */
.pancashati-text {
    font-family: var(--veda-font-primary);
    font-size: 1.6rem;
    line-height: 2;
    color: var(--veda-ink-dark);
    /* Ensure Vedic accents render correctly */
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: justify;
    /* Ensure Vedic accents including dīrgha svarita (᳚) render correctly */
    unicode-bidi: embed;
}

/* Pancashati highlighting animation controlled by JavaScript */
.pancashati-text.highlight {
    background: rgba(184, 149, 106, 0.4);
    border-radius: 6px;
    padding: 4px 6px;
    margin: -4px -6px;
    box-shadow: 0 0 10px rgba(184, 149, 106, 0.3);
    animation: pancashati-highlight 3s ease-out forwards;
}

@keyframes pancashati-highlight {
    0% {
        background: rgba(184, 149, 106, 0.4);
        box-shadow: 0 0 10px rgba(184, 149, 106, 0.3);
    }
    70% {
        background: rgba(184, 149, 106, 0.25);
        box-shadow: 0 0 5px rgba(184, 149, 106, 0.2);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* ========================================
   FLOATING ANUVAKA NAVIGATION
   ======================================== */

.anuvaka-nav {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(250, 249, 247, 0.95);
    border: 1px solid rgba(166, 124, 82, 0.2);
    border-radius: 8px;
    padding: 16px 12px;
    max-height: 60vh;
    overflow-y: auto;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 1.3rem;
    width: 220px;
}

.anuvaka-nav-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--veda-accent-copper);
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(166, 124, 82, 0.2);
}

.anuvaka-nav-item {
    display: block;
    padding: 8px 12px;
    margin: 4px 0;
    color: var(--veda-ink-medium);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
    line-height: 1.4;
}

.anuvaka-nav-item:hover {
    background: rgba(184, 149, 106, 0.15);
    color: var(--veda-ink-dark);
    transform: translateX(2px);
}

.anuvaka-nav-item.active {
    background: rgba(184, 149, 106, 0.25);
    color: var(--veda-ink-dark);
    font-weight: 600;
    border-left: 3px solid var(--veda-accent-copper);
    padding-left: 5px;
}

.anuvaka-nav-preview {
    font-size: 1rem;
    color: var(--veda-ink-light);
    font-style: italic;
    display: block;
    margin-top: 3px;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hide navigation where the fixed rail (~266 px) would overlap or crowd the centred text column */
@media (max-width: 1360px) {
    .anuvaka-nav {
        display: none;
    }
}

/* ========================================
   BASE LAYOUT
   ======================================== */

.prashna-page {
    background: var(--veda-parchment);
    color: var(--veda-ink-dark);
    font-family: var(--veda-font-primary);
    line-height: 1.8;
    padding: var(--veda-space-lg);
    padding-top: calc(var(--veda-space-lg) + 90px);
    margin: 0;
    min-height: 100vh;
}

.prashna-container {
    max-width: var(--veda-max-width);
    margin: 0 auto;
    position: relative;
}

/* ========================================
   HEADER SECTION
   ======================================== */

.prashna-header {
    text-align: center;
    margin-bottom: var(--veda-space-md);
    padding-bottom: 0;
}

.prashna-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--veda-ink-dark);
    margin-bottom: var(--veda-space-xs);
    letter-spacing: 0.01em;
    word-spacing: -0.05em;
}

.prashna-subtitle {
    font-size: 1.5rem;
    color: var(--veda-ink-dark);
    font-weight: 600;
    font-family: var(--veda-font-primary);
    margin-bottom: var(--veda-space-xs);
}

.prashna-topic {
    font-size: 1.3rem;
    color: var(--veda-accent-copper);
    font-weight: 500;
    margin-bottom: 0 !important;
}

/* ========================================
   INVOCATION SECTION
   ======================================== */

.invocation-section {
    text-align: center;
    margin: 0 0 var(--veda-space-sm);
    padding: var(--veda-space-sm) 0;
    position: relative;
}

.invocation-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--veda-space-md) 0 0;
    gap: var(--veda-space-md);
}

.invocation-separator::before,
.invocation-separator::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--veda-divider), var(--veda-divider), transparent);
}

.om-symbol {
    font-size: 2.5rem;
    color: var(--veda-accent-copper);
    font-weight: bold;
    font-family: var(--veda-font-primary);
}

.invocation-text {
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--veda-ink-medium);
    max-width: var(--veda-reading-width);
    margin: 0 auto;
    text-align: center;
}

.invocation-text p {
    margin: var(--veda-space-xs) 0;
}

/* ========================================
   MAIN CONTENT
   ======================================== */

.prashna-content {
    max-width: var(--veda-reading-width);
    margin: var(--veda-space-xs) auto 0;
}

/* ========================================
   ANUVAKA SECTIONS
   ======================================== */

.anuvaka-section {
    margin: var(--veda-space-md) 0;
    position: relative;
}

.anuvaka-separator {
    text-align: center;
    margin: var(--veda-space-lg) 0 var(--veda-space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.anuvaka-separator::before,
.anuvaka-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--veda-divider), transparent);
    margin: 0 var(--veda-space-md);
    opacity: 0.5;
}

.anuvaka-separator .anuvaka-separator-icon::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--veda-divider), transparent);
    opacity: 0.3;
}

.anuvaka-separator .anuvaka-separator-icon::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--veda-divider), transparent);
    opacity: 0.3;
}

.anuvaka-separator-icon {
    width: 32px;
    height: 32px;
    opacity: 0.5;
    color: var(--veda-divider);
    position: relative;
}

/* ========================================
   PANCASHATI (VERSE) STYLING
   ======================================== */

.anuvaka-content {
    font-family: var(--veda-font-primary);
    font-size: 1.6rem;
    line-height: 2.2;
    text-align: left;
    margin: var(--veda-space-lg) 0;
    color: var(--veda-ink-dark);
    /* Ensure Vedic accents render correctly */
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Ensure Vedic accents including dīrgha svarita (᳚) render correctly */
    unicode-bidi: embed;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    word-spacing: 0;
    max-width: 75ch;
    margin-left: auto;
    margin-right: auto;
}

.anuvaka-content.first-in-prashna {
    text-indent: 4em;
}

.anuvaka-content:not(.first-in-prashna) {
    text-indent: 4em;
}

.pancashati-number {
    font-weight: 600;
    color: var(--veda-ink-dark);
    font-size: 1.6rem;
    margin-left: 0.2em;
    white-space: nowrap;
}

.pancashati-formula {
    display: inline;
    font-size: 1.2rem;
    color: var(--veda-ink-light);
    font-style: normal;
    margin-left: 0.5em;
}

/* ========================================
   KORVAI (SUMMARY) STYLING
   ======================================== */

.anuvaka-korvai {
    font-size: 1.2rem;
    color: var(--veda-ink-light);
    font-style: normal;
    display: inline;
    margin-left: 0.5em;
}

.anuvaka-number {
    font-weight: 600;
    color: var(--veda-ink-dark);
    font-size: 1.6rem;
    white-space: nowrap;
}

/* ========================================
   CONCLUDING SECTIONS
   ======================================== */

.concluding-korvai-section {
    margin: var(--veda-space-lg) 0 var(--veda-space-xs);
    padding: var(--veda-space-sm) 0 var(--veda-space-xs);
    text-align: center;
}

.concluding-korvai {
    font-size: 1.2rem;
    line-height: 2;
    color: var(--veda-ink-medium);
    margin: var(--veda-space-sm) 0;
    max-width: var(--veda-reading-width);
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   CONCLUSION
   ======================================== */

.prashna-conclusion {
    text-align: center;
    margin: var(--veda-space-sm) 0;
    padding: var(--veda-space-md) 0;
}

/* Lotus separator before conclusion text */
.lotus-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--veda-space-md) 0 var(--veda-space-xs);
    gap: var(--veda-space-sm);
}

.lotus-separator::before,
.lotus-separator::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--veda-divider), var(--veda-divider), transparent);
    max-width: 200px;
}

.lotus-separator-icon {
    width: 60px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(30,30)'%3E%3C!-- 16 outer petals --%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(0)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(22.5)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(45)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(67.5)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(90)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(112.5)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(135)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(157.5)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(180)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(202.5)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(225)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(247.5)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(270)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(292.5)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(315)'/%3E%3Cpath d='M0 -25 C-6 -20, -10 -10, 0 0 C10 -10, 6 -20, 0 -25' fill='%23a67c52' opacity='0.5' transform='rotate(337.5)'/%3E%3C!-- 8 inner petals --%3E%3Cpath d='M0 -15 C-5 -12, -6 -6, 0 0 C6 -6, 5 -12, 0 -15' fill='%23b8956a' opacity='0.6' transform='rotate(11.25)'/%3E%3Cpath d='M0 -15 C-5 -12, -6 -6, 0 0 C6 -6, 5 -12, 0 -15' fill='%23b8956a' opacity='0.6' transform='rotate(56.25)'/%3E%3Cpath d='M0 -15 C-5 -12, -6 -6, 0 0 C6 -6, 5 -12, 0 -15' fill='%23b8956a' opacity='0.6' transform='rotate(101.25)'/%3E%3Cpath d='M0 -15 C-5 -12, -6 -6, 0 0 C6 -6, 5 -12, 0 -15' fill='%23b8956a' opacity='0.6' transform='rotate(146.25)'/%3E%3Cpath d='M0 -15 C-5 -12, -6 -6, 0 0 C6 -6, 5 -12, 0 -15' fill='%23b8956a' opacity='0.6' transform='rotate(191.25)'/%3E%3Cpath d='M0 -15 C-5 -12, -6 -6, 0 0 C6 -6, 5 -12, 0 -15' fill='%23b8956a' opacity='0.6' transform='rotate(236.25)'/%3E%3Cpath d='M0 -15 C-5 -12, -6 -6, 0 0 C6 -6, 5 -12, 0 -15' fill='%23b8956a' opacity='0.6' transform='rotate(281.25)'/%3E%3Cpath d='M0 -15 C-5 -12, -6 -6, 0 0 C6 -6, 5 -12, 0 -15' fill='%23b8956a' opacity='0.6' transform='rotate(326.25)'/%3E%3C!-- Sacred center --%3E%3Ccircle r='6' fill='%23b8956a' opacity='0.4'/%3E%3Ccircle r='3' fill='%23b8956a' opacity='0.6'/%3E%3Ccircle r='1' fill='%23b8956a'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.conclusion-text {
    font-size: 1.2rem;
    line-height: 2.2;
    color: var(--veda-ink-medium);
    margin: var(--veda-space-sm) 0;
    font-weight: 600;
}

.conclusion-text:last-child {
    font-weight: 700;
    color: var(--veda-ink-dark);
}

.conclusion-completion {
    font-size: 1rem;
    color: var(--veda-ink-light);
    font-style: italic;
    font-family: var(--veda-font-secondary);
    margin-top: var(--veda-space-md);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1200px) {
    .anuvaka-content {
        max-width: 70ch;
    }
}

@media (max-width: 768px) {
    :root {
        /* Mobile: Krishna Sanskrit renders correctly on iOS (CoreText) and Android (HarfBuzz) too */
        --veda-font-primary: 'Krishna Sanskrit', 'Siddhanta', 'Noto Serif Devanagari', 'Arial Unicode MS', serif;
    }
    
    .prashna-page {
        padding: var(--veda-space-md);
        padding-top: calc(var(--veda-space-md) + 70px);
    }
    
    .prashna-header {
        margin-bottom: var(--veda-space-md);
    }
    
    .prashna-title {
        font-size: 1.8rem;
        line-height: 1.3;
        margin-bottom: var(--veda-space-sm);
    }
    
    .prashna-subtitle {
        font-size: 1.2rem;
        margin-bottom: var(--veda-space-sm);
    }
    
    .prashna-topic {
        font-size: 1rem;
    }
    
    .prashna-page {
        padding-top: 106px;
    }
    
    .breadcrumb-nav {
        top: 56px;
        left: 2.5%;
        right: 2.5%;
        font-size: 0.82rem;
        padding: 6px 10px;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        align-items: center;
        justify-content: flex-start;
        gap: var(--veda-space-xs);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .breadcrumb-nav::-webkit-scrollbar { display: none; }
    .breadcrumb-container { flex-wrap: nowrap; }
    
    .breadcrumb-link {
        font-size: 0.82rem;
        padding: 0.3rem 0.5rem;
        white-space: nowrap;
        text-decoration: underline;
        text-decoration-color: var(--veda-accent-gold);
        cursor: pointer;
    }
    
    .breadcrumb-current {
        font-size: 0.82rem;
        padding: 0.3rem 0.5rem;
        white-space: nowrap;
    }
    
    .anuvaka-content {
        font-size: 1.3rem;
        line-height: 2.2;
        max-width: 60ch;
        text-align: left;
        hyphens: auto;
    }
    
    .anuvaka-separator::before,
    .anuvaka-separator::after {
        margin: 0 var(--veda-space-sm);
    }
    
    :root {
        --veda-reading-width: 95%;
    }
}

@media (max-width: 480px) {
    .prashna-page {
        padding: var(--veda-space-sm);
        padding-top: 106px;
    }
    
    .prashna-header {
        margin-bottom: var(--veda-space-sm);
    }
    
    .prashna-title {
        font-size: 1.5rem;
        line-height: 1.4;
        margin-bottom: var(--veda-space-xs);
    }
    
    .prashna-subtitle {
        font-size: 1rem;
        margin-bottom: var(--veda-space-xs);
    }
    
    .prashna-topic {
        font-size: 0.9rem;
    }
    
    .breadcrumb-nav {
        top: 56px;
        left: 2.5%;
        right: 2.5%;
        font-size: 0.78rem;
        padding: 6px 8px;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--veda-space-xs);
    }
    
    .breadcrumb-link {
        font-size: 0.78rem;
        padding: 0.2rem 0.4rem;
        white-space: nowrap;
        text-decoration: underline;
        text-decoration-color: var(--veda-accent-gold);
        cursor: pointer;
    }
    
    .breadcrumb-current {
        font-size: 0.78rem;
        padding: 0.2rem 0.4rem;
        white-space: nowrap;
    }
    
    .anuvaka-content {
        font-size: 1.1rem;
        line-height: 2.2;
        max-width: 55ch;
        text-align: left;
        hyphens: auto;
    }
    
    .invocation-text {
        font-size: 1.1rem;
    }
    
    .anuvaka-separator::before,
    .anuvaka-separator::after {
        margin: 0 var(--veda-space-xs);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --veda-ink-dark: #000;
        --veda-parchment: #fff;
        --veda-divider: #666;
    }
}

/* ========================================
   STATS TABLE
   ======================================== */

.stats-table-section {
    margin: 2.5rem auto 1rem;
    max-width: 420px;
    text-align: center;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--veda-font-primary, 'Krishna Sanskrit', 'Noto Serif Devanagari', serif);
    font-size: 1rem;
    color: var(--veda-ink, #3a2a1a);
    border: 1px solid var(--veda-divider, #d4c5a9);
    border-radius: 6px;
    overflow: hidden;
}

.stats-table thead tr {
    background: linear-gradient(135deg, #f5e6d0, #eddcc5);
}

.stats-table th {
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #6b4c2a;
    border-bottom: 2px solid #d4a574;
}

.stats-table td {
    padding: 0.6rem 1rem;
    font-size: 1.15rem;
    font-weight: 500;
    background: rgba(245, 230, 208, 0.3);
}

.stats-table th + th,
.stats-table td + td {
    border-left: 1px solid var(--veda-divider, #d4c5a9);
}

@media (max-width: 480px) {
    .stats-table-section {
        max-width: 90%;
    }
    .stats-table th,
    .stats-table td {
        padding: 0.5rem 0.6rem;
        font-size: 0.9rem;
    }
    .stats-table td {
        font-size: 1rem;
    }
}

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

@media print {
    .prashna-page {
        background: white;
        padding: 1cm;
        font-size: 12pt;
        line-height: 1.6;
    }
    
    .anuvaka-separator-icon {
        display: none;
    }
    
    .pancashati {
        page-break-inside: avoid;
    }
    
    .anuvaka-section {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   Pāṭha Switcher - Navigate between Saṃhitā/Pada/Krama
   ========================================================================== */
.patha-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 auto;
    max-width: 900px;
    background: linear-gradient(135deg, #fef9ef 0%, #fff7e6 100%);
    border-bottom: 1px solid #e8d5b0;
    font-family: var(--veda-font-primary, 'Krishna Sanskrit', 'Siddhanta', 'Noto Serif Devanagari', serif);
}

.patha-switcher-label {
    font-size: 0.85rem;
    color: #8b6914;
    margin-right: 4px;
    white-space: nowrap;
}

.patha-switch-btn {
    display: inline-block;
    padding: 5px 14px;
    font-size: 0.95rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid #d4b87a;
    color: #6b4c1a;
    background: #fff;
}

.patha-switch-btn:hover {
    background: #f0e4cc;
    border-color: #b8952e;
    color: #4a3510;
}

.patha-switch-btn.active {
    background: linear-gradient(135deg, #c87533 0%, #a0522d 100%);
    color: #fff;
    border-color: #8b4513;
    cursor: default;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(139, 69, 19, 0.3);
}

@media (max-width: 480px) {
    .patha-switcher {
        gap: 5px;
        padding: 8px 10px;
    }
    .patha-switcher-label {
        font-size: 0.75rem;
    }
    .patha-switch-btn {
        padding: 4px 10px;
        font-size: 0.85rem;
    }
}

/* ── Praśna Navigation (prev/next) ────────────────────────── */
.prashna-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 3rem auto 2rem;
    padding: 0 1rem;
    gap: 1rem;
}

.prashna-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid #d4c5a9;
    border-radius: 6px;
    background: #faf8f3;
    color: #5d4037;
    text-decoration: none;
    font-family: 'Krishna Sanskrit', 'Noto Serif Devanagari', serif;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.prashna-nav-link:hover {
    background: #f0ebe0;
    border-color: #8b4513;
    color: #8b4513;
}

.prashna-nav-link.disabled {
    visibility: hidden;
}

.prashna-nav-portal {
    font-size: 0.85rem;
    color: #8b4513;
    border-color: #8b4513;
}

.prashna-nav-portal:hover {
    background: #8b4513;
    color: #fff;
}

.prashna-nav-arrow {
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .prashna-nav {
        padding: 0 0.5rem;
        gap: 0.5rem;
    }
    .prashna-nav-link {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }
    .prashna-nav-label {
        display: none;
    }
    .prashna-nav-prev:not(.disabled)::after {
        content: 'पूर्वम्';
        font-family: 'Krishna Sanskrit', 'Noto Serif Devanagari', serif;
    }
    .prashna-nav-next:not(.disabled)::before {
        content: 'अग्रिमम्';
        font-family: 'Krishna Sanskrit', 'Noto Serif Devanagari', serif;
    }
}

/* ════════════════════════════════════════════════════════════════
   REDESIGN 2026 LAYER — scholarly modern manuscript (reading pages)
   Appended override layer; original rules above untouched.
   ════════════════════════════════════════════════════════════════ */

:root {
  --veda-parchment: #f9f5ec;
  --veda-ink-dark: #2b2016;
  --veda-ink-medium: #4d3c2a;
  --veda-ink-light: #6b5d4a;
  --veda-accent-gold: #b8952f;
  --veda-accent-copper: #7a2a17;
  --veda-accent-sage: #8a6a2f;
  --veda-divider: #d8c9a8;
}

/* Progress bar: green → manuscript gold-to-madder */
.reading-progress-container { background: #efe7d2; }
.reading-progress-bar { background: linear-gradient(90deg, #b8952f, #7a2a17); }

/* Breadcrumb: heavy gold outline → quiet cream card */
.breadcrumb-nav {
  background: #fffdf7;
  border: 1px solid #e2d6b8;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(46, 42, 38, 0.06);
  padding: 0.6rem 1rem;
}
.breadcrumb-nav:hover { transform: none; box-shadow: 0 4px 14px rgba(46, 42, 38, 0.1); }
.breadcrumb-link {
  color: #8a6a2f;
  font-weight: 600;
  text-decoration-style: dotted;
  text-decoration-color: #c9b98e;
}
.breadcrumb-link:hover { color: #7a2a17; background: none; }
.breadcrumb-separator { color: #c9b98e; }
.breadcrumb-current { color: #3d2317; font-weight: 700; }

/* Pāṭha switcher: soft gold band with pill buttons */
.patha-switcher {
  background: linear-gradient(180deg, #f6efdc, #f2e8cf);
  border: 1px solid #e2d6b8;
  border-radius: 999px;
  padding: 7px 18px;
  box-shadow: 0 2px 8px rgba(46, 42, 38, 0.05);
}
.patha-switcher-label { color: #8a6a2f; }
.patha-switch-btn {
  border-radius: 999px;
  border: 1px solid #d8c9a8;
  background: #fffdf7;
  color: #5c4a33;
}
.patha-switch-btn:hover { background: #f4eedd; border-color: #b8952f; }
.patha-switch-btn.active {
  background: #7a2a17;
  border-color: #7a2a17;
  color: #f7f0e2;
  box-shadow: 0 2px 8px rgba(92, 26, 14, 0.25);
}

/* Anuvāka rail: floating manuscript card */
.anuvaka-nav {
  background: #fffdf7;
  border: 1px solid #e2d6b8;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(46, 42, 38, 0.08);
}
.anuvaka-nav-title {
  color: #3d2317;
  border-bottom: 1px solid #efe7d2;
  padding-bottom: 8px;
}
.anuvaka-nav-item { color: #5c4a33; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; }
.anuvaka-nav-item:hover { background: #f4eedd; color: #3d2317; }
.anuvaka-nav-item.active {
  background: linear-gradient(90deg, rgba(122, 42, 23, 0.07), transparent);
  border-left-color: #7a2a17;
  color: #7a2a17;
  font-weight: 700;
}
.anuvaka-nav-preview { color: #a08e6e; font-style: italic; }

/* Text accents */
.pancashati-number, .pancashati-number strong { color: #b8952f; }
.pancashati-text.highlight { background: rgba(184, 149, 47, 0.28); }
.anuvaka-korvai { color: #8a6a2f; }
.anuvaka-number { color: #7a2a17; }
.prashna-topic { color: #9a5f2a; }
.om-symbol { color: #b8952f; }
.anuvaka-separator-icon { color: #c9a961; }
.invocation-separator::before, .invocation-separator::after,
.anuvaka-separator::before, .anuvaka-separator::after,
.lotus-separator::before, .lotus-separator::after {
  background: linear-gradient(90deg, transparent, #c9a961, transparent);
  height: 1px;
}

/* Stats table: framed manuscript table */
.stats-table {
  border: 1px solid #e2d6b8;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(46, 42, 38, 0.06);
}
.stats-table thead tr { background: linear-gradient(180deg, #f6efdc, #f2e8cf); }
.stats-table th { color: #5c4a33; border-bottom: 1px solid #d8c9a8; }
.stats-table td { color: #7a2a17; }
.stats-table th + th, .stats-table td + td { border-left-color: #e2d6b8; }

/* Prev / portal / next praśna nav */
.prashna-nav { border-top: 1px solid #e2d6b8; padding-top: 1rem; }
.prashna-nav-link {
  background: #fffdf7;
  border: 1px solid #d8c9a8;
  border-radius: 999px;
  color: #8a6a2f;
}
.prashna-nav-link:hover { background: #f4eedd; border-color: #b8952f; color: #7a2a17; }
.prashna-nav-next:not(.disabled) {
  background: #7a2a17;
  border-color: #7a2a17;
  color: #f7f0e2;
  box-shadow: 0 4px 14px rgba(92, 26, 14, 0.22);
}
.prashna-nav-next:not(.disabled):hover { background: #5c1a0e; color: #f7f0e2; }
.prashna-nav-portal:hover { background: #7a2a17; border-color: #7a2a17; }

/* Cross-references */
.cross-ref { color: #2f6db8; text-decoration: none; border-bottom: 1px dotted #2f6db8; }
.cross-ref:hover { color: #1e4f8f; border-bottom-style: solid; }


/* ── V1.5 additions ─────────────────────────────────────────── */

/* Script selector: plain white box → cream manuscript card.
   Higher specificity to override the page's inline <style>. */
body.prashna-page .script-selector {
  background: #fffdf7;
  border: 1px solid #e2d6b8;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(46, 42, 38, 0.08);
  padding: 8px 14px;
}
body.prashna-page .script-selector label { color: #8a6a2f; font-weight: 600; }
body.prashna-page .script-selector select {
  border: 1px solid #d8c9a8;
  border-radius: 8px;
  background: #fffdf7;
  color: #3d2317;
}
body.prashna-page .script-selector select:hover { border-color: #b8952f; }

/* Title stack — 7a hierarchy */
.prashna-title { color: #3d2317; font-weight: 600; }
.prashna-subtitle { color: #5c4a33; }
.prashna-topic {
  display: inline-block;
  padding: 0.2rem 1.6rem;
  border-top: 1px solid #e9dfc4;
  border-bottom: 1px solid #e9dfc4;
  color: #9a5f2a;
}
.prashna-header { margin-bottom: 1rem; }
.invocation-text { color: #4d3c2a; }


/* ── V2.2: pāṭha band hugs content like mock 7a ── */
.patha-switcher { width: fit-content; margin-left: auto; margin-right: auto; padding: 7px 22px; }


/* ── V2.3: 7a header fidelity ── */

/* Woven top border on reading pages (matches portal home) */
body.prashna-page::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, #7a2a17 0 22px, #b8952f 22px 26px);
  z-index: 1002;
  pointer-events: none;
}

/* Progress line: fixed below the nav/search header row */
.reading-progress-container { top: 84px; z-index: 997; }
@media (max-width: 768px) {
  .reading-progress-container { top: 6px; }
}

/* ========================================================================
   V3 STRUCTURAL — items 1-3 (append-only, within REDESIGN 2026 LAYER)
   ======================================================================== */

/* Item 1: prev/next praśna chips next to the breadcrumb (top-left) */
.prashna-topnav { position: fixed; top: 26px; left: 300px; display: flex; gap: 6px; z-index: 999; }
.prashna-topnav-link { font-size: 0.85rem; color: #8a6a2f; background: #fffdf7; border: 1px solid #d8c9a8; border-radius: 8px; padding: 6px 11px; text-decoration: none; white-space: nowrap; }
.prashna-topnav-link:hover { color: #7a2a17; border-color: #b8952f; background: #f4eedd; }
@media (max-width: 1200px) { .prashna-topnav { display: none; } }

/* Item 2: pāṭha band PDF chip + sticky */
.patha-switcher-divider { width: 1px; height: 22px; background: #ddd0ab; margin: 0 6px; }
.patha-pdf-link { font-size: 0.8rem; color: #8a6a2f; text-decoration: none; padding: 4px 10px; border-radius: 999px; }
.patha-pdf-link:hover { color: #7a2a17; background: #f4eedd; }
.patha-switcher { position: sticky; top: 96px; z-index: 900; }
/* Avoid sticky band colliding with the fixed search on narrow widths */
@media (max-width: 1199px) { .patha-switcher { position: static; } }

/* Item 3: user font-size control (A− / A+) — scale reading text.
   Mirrors the existing reading-text breakpoints so mobile sizes stay correct. */
:root { --veda-user-font-scale: 1; }
.pancashati-text { font-size: calc(1.6rem * var(--veda-user-font-scale)); }
.anuvaka-content { font-size: calc(1.6rem * var(--veda-user-font-scale)); }
.invocation-text { font-size: calc(1.3rem * var(--veda-user-font-scale)); }
@media (max-width: 768px) {
  .anuvaka-content { font-size: calc(1.3rem * var(--veda-user-font-scale)); }
}
@media (max-width: 480px) {
  .anuvaka-content { font-size: calc(1.1rem * var(--veda-user-font-scale)); }
  .invocation-text { font-size: calc(1.1rem * var(--veda-user-font-scale)); }
}
.font-size-control { display: inline-flex; gap: 4px; margin-left: 4px; }
.font-size-control button { border: 1px solid #d8c9a8; background: #fffdf7; color: #8a6a2f; border-radius: 8px; padding: 4px 9px; font-size: 12px; cursor: pointer; }
.font-size-control button:hover { border-color: #b8952f; color: #7a2a17; }

/* V3.1-1: top prev/next chips — breathing room from breadcrumb and each other */
.prashna-topnav { gap: 8px; margin-left: 14px; }
.prashna-topnav-link { padding: 8px 14px; }

/* Pada/Krama pause between the parts of a split word (veda/vedic_transliterator.py
   PADA_BREAK_MARKS): a tight dash, and a star in Grantha. Drawn from Krishna Sanskrit,
   which has both glyphs (the Grantha and Indic fonts do not all have them). */
.pada-break { font-family: 'Krishna Sanskrit', 'Noto Serif Devanagari', serif; }
.pada-break--star { font-size: 1.15em; line-height: 1; position: relative; top: 0.22em; } /* inline: inline-block balloons in justified text */