/**
 * Veda Brahmana Styling - Taittirīya Brāhmaṇam Portal
 * 
 * Sacred, elegant, and readable styling for individual prapathaka pages.
 * Based on veda-prashna.css with Brahmana-specific customizations.
 * 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;
}

/* ========================================
   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);
    display: inline;
    white-space: normal;
    word-spacing: normal;
    letter-spacing: normal;
    margin: 0 0.35em 0 0;
    /* 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: left; /* Avoid stretched spacing between sentences */
    /* Ensure Vedic accents including dīrgha svarita (᳚) render correctly */
    unicode-bidi: embed;
}

.pancashati-text .script-devanagari,
.pancashati-text .script-kannada,
.pancashati-text .script-telugu {
    white-space: normal;
    word-spacing: normal;
    letter-spacing: normal;
}

/* 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
   ======================================== */

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

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

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

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

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

.prapathaka-ordinal {
    font-size: 2.3rem;
    font-weight: 600;
    color: var(--veda-ink-dark);
    margin-bottom: var(--veda-space-xs);
}

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

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

/* ========================================
   ANUVAKA TOPIC (Brahmana-specific)
   ======================================== */

.anuvaka-topic {
    font-size: 1.1rem;
    color: var(--veda-accent-sage);
    font-style: italic;
    text-align: center;
    margin: var(--veda-space-sm) 0;
    padding: var(--veda-space-xs) var(--veda-space-sm);
    background: rgba(184, 149, 106, 0.08);
    border-radius: 6px;
    max-width: var(--veda-reading-width);
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   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;
}

/* Compact invocation for Aranyaka */
.invocation-compact {
    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 600;
}

.invocation-compact .invocation-line {
    margin: 0.1rem 0;
}

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

.prapathaka-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;
    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: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    word-spacing: normal;
    max-width: 75ch;
    margin-left: auto;
    margin-right: auto;
}

.anuvaka-content.first-in-prapathaka {
    text-indent: 0;
}

.anuvaka-content:not(.first-in-prapathaka) {
    text-indent: 0;
}

/* ========================================
   ANUVAKA INSTRUCTION (पाठ-निर्देशः)
   ======================================== */

.anuvaka-instruction {
    display: block;
    background: linear-gradient(135deg, rgba(184, 149, 106, 0.08) 0%, rgba(166, 124, 82, 0.12) 100%);
    border: 1px solid rgba(166, 124, 82, 0.25);
    border-left: 3px solid var(--veda-accent-copper);
    border-radius: 6px;
    padding: var(--veda-space-sm) var(--veda-space-md);
    margin: 0 auto var(--veda-space-md);
    max-width: var(--veda-reading-width);
    font-family: var(--veda-font-primary);
}

.anuvaka-instruction .instruction-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--veda-accent-copper);
    margin-bottom: var(--veda-space-xs);
    letter-spacing: 0.05em;
}

.anuvaka-instruction .instruction-text {
    display: block;
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--veda-ink-medium);
}

/* Inline instruction style (parenthesized at start of anuvaka) */
.anuvaka-instruction-inline {
    display: inline;
    font-size: 0.85em;
    font-style: italic;
    color: var(--veda-accent-copper);
    opacity: 0.85;
}

/* ========================================
   VARIANT READING (पाठभेदः)
   ======================================== */

.variant-reading {
    display: block;
    background: linear-gradient(135deg, rgba(139, 164, 139, 0.08) 0%, rgba(108, 133, 108, 0.12) 100%);
    border: 1px solid rgba(108, 133, 108, 0.25);
    border-left: 3px solid var(--veda-accent-sage);
    border-radius: 6px;
    padding: var(--veda-space-sm) var(--veda-space-md);
    margin: var(--veda-space-md) auto 0;
    max-width: var(--veda-reading-width);
    font-family: var(--veda-font-primary);
}

.variant-reading .variant-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--veda-accent-sage);
    margin-bottom: var(--veda-space-xs);
    letter-spacing: 0.05em;
}

.variant-reading .variant-text {
    display: block;
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--veda-ink-medium);
}

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

/* Sentence count indicator (Brahmana-specific) */
.pancashati-sentence-count {
    font-size: 1rem;
    color: var(--veda-ink-light);
    font-weight: normal;
    margin-left: 0.3em;
}

.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
   ======================================== */

.prapathaka-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;
    }
    
    .prapathaka-page {
        padding: var(--veda-space-md);
        padding-top: 106px;
    }
    
    .prapathaka-header {
        margin-bottom: var(--veda-space-md);
    }
    
    .prapathaka-title {
        font-size: 1.8rem;
        line-height: 1.3;
        margin-bottom: var(--veda-space-sm);
    }
    
    .prapathaka-subtitle {
        font-size: 1.2rem;
        margin-bottom: var(--veda-space-sm);
    }
    
    .prapathaka-topic {
        font-size: 1rem;
    }
    
    .anuvaka-topic {
        font-size: 0.95rem;
    }
    
    .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) {
    .prapathaka-page {
        padding: var(--veda-space-sm);
        padding-top: 106px;
    }
    
    .prapathaka-header {
        margin-bottom: var(--veda-space-sm);
    }
    
    .prapathaka-title {
        font-size: 1.5rem;
        line-height: 1.4;
        margin-bottom: var(--veda-space-xs);
    }
    
    .prapathaka-subtitle {
        font-size: 1rem;
        margin-bottom: var(--veda-space-xs);
    }
    
    .prapathaka-topic {
        font-size: 0.9rem;
    }
    
    .anuvaka-topic {
        font-size: 0.85rem;
    }
    
    .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.8rem;
        padding: 0.2rem 0.4rem;
        text-decoration: underline;
        text-decoration-color: var(--veda-accent-gold);
        cursor: pointer;
    }
    
    .breadcrumb-current {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
    
    .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 {
    .prapathaka-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;
    }
}

/* ============================================================================
   Expansion Markers & Appendix Section
   ============================================================================ */

/* Inline expansion marker (§ section sign + number link) */
.expansion-marker {
    display: inline;
    font-size: 0.85em;
    margin-left: 0.15em;
    white-space: nowrap;
    vertical-align: super;
    line-height: 0;
}

.expansion-marker a.expansion-link {
    color: #8b4513;
    text-decoration: none;
    font-weight: 600;
    font-family: system-ui, 'Krishna Sanskrit', sans-serif;
    padding: 0 0.1em;
}

.expansion-marker a.expansion-link:hover {
    color: #c0392b;
    text-decoration: underline;
}

/* Appendix section */
.appendix-section {
    margin-top: 3rem;
    padding-top: 2rem;
}

.appendix-title {
    font-family: system-ui, -apple-system, 'Krishna Sanskrit', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #8b4513;
    text-align: center;
    margin-bottom: 2rem;
}

.appendix-entries {
    max-width: 800px;
    margin: 0 auto;
}

.expansion-entry {
    border-left: 3px solid #d4a76a;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
    background: rgba(212, 167, 106, 0.06);
    border-radius: 0 6px 6px 0;
}

.expansion-entry:target {
    background: rgba(212, 167, 106, 0.18);
    border-left-color: #8b4513;
}

.expansion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-family: system-ui, -apple-system, 'Krishna Sanskrit', sans-serif;
    font-size: 0.9rem;
}

.expansion-markers {
    color: #8b4513;
    font-weight: 700;
}

.expansion-tb-ref {
    color: #666;
    font-style: italic;
}

.expansion-content {
    font-size: 1.15rem;
    line-height: 2;
}

.expansion-alias {
    font-family: system-ui, -apple-system, 'Krishna Sanskrit', sans-serif;
    font-size: 0.95rem;
    color: #666;
    font-style: italic;
}

.expansion-alias a.expansion-link {
    color: #8b4513;
    text-decoration: none;
    font-weight: 600;
}

.expansion-alias a.expansion-link:hover {
    text-decoration: underline;
}

.expansion-cross-refs {
    margin-top: 0.4rem;
    font-family: system-ui, -apple-system, 'Krishna Sanskrit', sans-serif;
    font-size: 0.85rem;
    color: #777;
}

.expansion-cross-refs a.cross-ref-link {
    color: #2e6da4;
    text-decoration: none;
}

.expansion-cross-refs a.cross-ref-link:hover {
    text-decoration: underline;
}

.expansion-note {
    margin-top: 0.4rem;
    font-family: system-ui, -apple-system, 'Krishna Sanskrit', sans-serif;
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

@media (max-width: 768px) {
    .expansion-entry {
        padding: 0.8rem 1rem;
    }
    
    .expansion-content {
        font-size: 1.05rem;
    }
}


/* ════════════════════════════════════════════════════════════════
   REDESIGN 2026 LAYER — scholarly modern manuscript (veda-brahmana)
   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 */
.reading-progress-container { background: #efe7d2; }
.reading-progress-bar { background: linear-gradient(90deg, #b8952f, #7a2a17); }

/* Breadcrumb 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; }

/* Anuvāka rail */
.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; }

/* Script selector (overrides page-inline styles) */
body .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 .script-selector label { color: #8a6a2f; font-weight: 600; }
body .script-selector select { border: 1px solid #d8c9a8; border-radius: 8px; background: #fffdf7; color: #3d2317; }
body .script-selector select:hover { border-color: #b8952f; }

/* 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; }
.om-symbol { color: #b8952f; }
.anuvaka-separator-icon { color: #c9a961; }
.cross-ref { color: #2f6db8; text-decoration: none; border-bottom: 1px dotted #2f6db8; }
.cross-ref:hover { color: #1e4f8f; border-bottom-style: solid; }

/* Stats 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; }


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

/* Woven top border on reading pages (matches portal home) */
body::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; }
}