/* --- PASTE INTO gita.css --- */

/* 1. ROOT VARIABLES */
:root {
    --background: #0D0D0D;
    --primary: #A67B5B;
    --highlight: #C89F7B;
    --secondary: #555555;
    --mystic2: #00FF7F;
    --panel-bg: #111111;
    --border-color: #333;
}

body {
    background-color: var(--background);
    color: var(--primary);
    font-family: 'Source Code Pro', monospace;
    font-size: 14px;
    margin: 0;
    height: 100vh;
    padding: 0.75rem; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- INTRO OVERLAY --- */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--background);
    z-index: 9999; /* Sit on top of everything */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* THE FIX: Push the visual center up */
    padding-bottom: 30vh; /* Adds empty space at the bottom, pushing content up */
    box-sizing: border-box; /* Ensures padding doesn't break the 100vh height */
    
    /* Transition for the fade out */
    transition: opacity 1.5s ease-out, visibility 1.5s ease-out;
}

/* The state when it disappears */
#intro-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* The Mantra Text */
.intro-mantra {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.5em;
    color: var(--highlight); /* Gold */
    text-align: left;
    min-height: 1.5em;
    /* Ensure padding/borders don't mess up our JS measurements */
    box-sizing: border-box;
    
    /* Optional: Add a blinking cursor block style if you want */
    white-space: nowrap;
}

/* The "Click to Skip" hint */
.skip-hint {
    margin-top: 2rem;
    font-size: 0.8em;
    color: var(--secondary);
    opacity: 0; /* Starts invisible */
    animation: fadeIn 1s ease-in forwards 2s; /* Appears after 2 seconds */
    cursor: pointer;
}

/* --- 2. LAYOUT GRID --- */
.ide-container {
    display: grid;
    grid-template-columns: 280px 1fr 280px; 
    width: 100%;
    max-width: 1300px;
    height: 100%; 
    max-height: 803px;
    margin: 0 auto;
    overflow: hidden;
    gap: 0.75rem; 
}

/* --- 3. MODULE STYLES --- */
.module, .right-module, .foldable-section, .sanskrit-display, .translation-box, .ide-sidebar {
    border: 1px dashed var(--primary);
    background-color: var(--background);
    position: relative;
}

/* HEADERS */
.sidebar-header, .right-module-header, .source-header, .fold-header, .translation-header {
    font-size: 0.8em; 
    font-weight: 500; 
    color: var(--secondary);
    text-transform: uppercase;
    
    /* 1. LOCK HEIGHT: Use a fixed height so contents don't stretch it */
    height: 3.5em; 
    
    /* 2. REMOVE VERTICAL PADDING (Let Flex/Grid center it) */
    padding: 0; 
    
    margin: 0 0.8rem;
    border-bottom: 1px dashed var(--secondary);
    
    /* 3. CENTER CONTENT VERTICALLY */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- SOURCE HEADER LAYOUT (Left - Center - Right) --- */
.source-header {
    /* Override the default Flexbox from the shared class */
    display: grid !important;
    
    /* 3 Columns: [Flexible Space] [Auto-Width Content] [Flexible Space] */
    grid-template-columns: 1fr auto 1fr; 
    
    align-items: center;
    /* Inherit the fixed height from shared class */
    height: 3.5em; 
    padding: 0;
}
/* 1. LEFT GROUP (Status | Star) */
.header-left-group {
    justify-self: start; /* Push to far left */
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between text, line, and star */
    white-space: nowrap; /* Prevent text wrapping */
}

.header-divider {
    opacity: 0.3;
    font-size: 0.9em;
    color: var(--secondary);
}

/* 2. CENTER GROUP (Arrows) */
.source-header .nav-controls {
    justify-self: center; /* Force Center */
}

/* 2. Force Replay Button to the Right */
#replay-roman-btn {
    justify-self: end;
    white-space: nowrap; /* Prevent wrapping to next line */
}

/* 3. The Middle Arrows (nav-controls) are auto-centered by the Grid */

/* --- NAVIGATION CONTROLS ALIGNMENT FIX --- */

/* 1. The Container: Ensure vertical centering */
.nav-controls {
    display: flex;
    gap: 1rem;
    align-items: center; /* Forces all buttons to the same vertical center line */
}

/* 2. The Buttons: Standardize Layout */
.nav-btn, .module-refresh-btn {
    display: inline-flex !important; /* Force FLEX for everyone */
    justify-content: center;
    align-items: center;
    height: 1.5em; /* Give them a consistent height context */
    line-height: 1; /* Kill any font-specific spacing */
    vertical-align: middle;

    /* Base Style */
    color: var(--secondary);
    transition: all 0.2s ease;
}

/* --- HOVER EFFECT --- */
.nav-btn:hover, 
.module-refresh-btn:hover {
   background-color: var(--mystic2); 
    color: #000000; 
        
    /* The Structure */
    border-radius: 2px;
    text-decoration: none;
        
    /* Optional: A subtle glow to make it feel like a light source */
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
    border-color: var(--mystic2);
    cursor: pointer;
}

/* 3. Random Button Specifics */
/* We just need to ensure it keeps its animation properties */
.module-refresh-btn {
    transform-origin: center; /* Ensures it spins around its true center */
}

/* --- TEXT BUTTON STYLING --- */
.text-btn {
    font-size: 0.9em; /* Slightly smaller than the icons */
    /* font-weight: 700; */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 2px; /* Visual alignment adjustment */
}

.text-btn:hover {
    background-color: var(--mystic2); 
    color: #000000; 
        
    /* The Structure */
    border-radius: 2px;
    text-decoration: none;
        
    /* Optional: A subtle glow to make it feel like a light source */
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
    border-color: var(--mystic2);
    cursor: pointer;
}

/* --- HEADER RIGHT GROUP --- */
.header-right-group {
    justify-self: end; /* Push to far right */
    display: flex;
    align-items: center;
    gap: 0.8rem; /* Matches left side gap */
    white-space: nowrap;
}

/* Audio Playing State (Gold Pulse Animation) */
.audio-active {
    color: var(--highlight) !important;
    text-shadow: 0 0 8px var(--highlight);
    font-weight: bold;
    animation: pulseAudio 1.5s infinite alternate;
}

@keyframes pulseAudio {
    from { text-shadow: 0 0 5px var(--highlight); opacity: 0.7; }
    to { text-shadow: 0 0 15px var(--highlight); opacity: 1; }
}

/* Update Translation Header to ensure right-alignment */
.translation-header {
    display: flex;
    justify-content: space-between; /* Pushes button to the right */
    align-items: center;
}

/* --- 4. MAIN STAGE --- */
.ide-main {
    border: none;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: hidden;
}

.code-block {
    width: 100%;
    margin: 0;
    padding: 0;
    align-items: stretch;
    text-align: left; 
    display: flex;
    flex-direction: column;
    gap: 0.75rem; 
    height: 100%; 
    overflow: hidden; 
}

/* --- COLUMN 1: RESTORED SUTRA STYLE --- */

.ide-sidebar {
    border: 1px dashed var(--primary);
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0; /* Remove generic padding so we can control it internally */
}

/* 1. Header (Floating Inset) */
.sidebar-header {
    /* 1. INTERNAL LAYOUT (Keep these!) */
    height: auto !important;      /* Let it grow naturally */
    padding: 0.8rem 0 !important; /* Enforce internal space (Text <-> Border) */
    display: flex;       /* Centers content */
    align-items: center; /* Vertically centers text */
    justify-content: space-between;

    /* 2. EXTERNAL SPACING (The Floating Look) */
    /* Pushes the box away from the top/bottom borders */
    margin-top: 0 !important; 
    margin-bottom: 0.8rem !important;
    
    /* Keeps the side gaps */
    margin-left: 0.8rem;
    margin-right: 0.8rem;

    /* 3. VISUALS */
    border-bottom: 1px dashed var(--secondary);
    font-size: 0.8em;
    font-weight: 500;
    color: var(--secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.sidebar-header:hover {
    color: var(--highlight);
}

/* --- SIDEBAR INDEX (Desktop Defaults) --- */
.file-tree {
    display: block;      /* Always visible */
    overflow-y: auto;    /* Internal scrolling if list is long */
    max-height: 100%;    /* Fill the container */
    /* THE FIX: Remove Bullets & Add Spacing */
    list-style: none;    /* Kills the dot */
    /* Top: 0 */
    /* Left/Right: 0.8rem (Matches your header margin) */
    /* Bottom: 1.5rem (Creates the gap you want) */
    padding: 0 0.8rem 1.5rem 0.8rem !important; /* top, right, botom, left */
    margin: 0;           /* Reset margin */
}

/* Hide the [+] button on desktop */
#sidebar-toggle .toggle-icon {
    display: none;
}

/* Remove pointer cursor on desktop header */
#sidebar-toggle {
    cursor: default;
}

/* 3. The List Items */
.file-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    
    /* The Signature "Sutra" Look: Dashed lines between items */
    border-bottom: 1px dashed var(--secondary); 
    
    font-size: 0.8em;
    color: var(--soft-white);
    transition: background 0.2s, color 0.2s;
}

.file-item:hover {
    color: var(--mystic2); /* Text glows green */
    background-color: rgba(0, 255, 127, 0.05); /* Faint green terminal wash */
}

/* 4. The Active State (Left Border Marker) */
.file-item.active {
    background-color: transparent;
    color: var(--highlight);
    font-weight: bold;
    
    /* This is the key visual marker you likely missed */
    border-left: 3px solid var(--highlight); 
    
    /* Adjust padding slightly so text doesn't jump */
    padding-left: calc(1rem - 3px); 
}

/* --- MODULE: SPLIT VIEW (Sanskrit | Roman) --- */
.split-view-container {
    display: flex;
    flex-direction: column;
    flex-grow: 0; /* Compact height */
    min-height: auto;
    /* Border is handled by the generic .module class in theme.css */
}

.split-content-wrapper {
    display: flex;
    flex-direction: row; /* Side-by-Side Layout */
    align-items: stretch;
    padding: 0;
}

/* --- FAVORITE STAR BUTTON --- */
.fav-star {
    cursor: pointer;
    color: var(--secondary); /* Default: Grey (Inactive) */
    font-weight: bold;
    transition: all 0.2s ease;
    user-select: none;
}

.fav-star:hover {
    background-color: var(--mystic2); 
    color: #000000; 
        
    /* The Structure */
    border-radius: 2px;
    text-decoration: none;
        
    /* Optional: A subtle glow to make it feel like a light source */
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
    border-color: var(--mystic2);
    cursor: pointer;
}

/* Active State (Saved) */
.fav-star.active {
    color: var(--highlight); /* Gold */
    text-shadow: 0 0 8px var(--highlight);
}

.split-half {
    flex: 1; /* 50/50 Split */
    padding: 1.5rem; /* Breathing room */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the text */
}

/* LEFT SIDE (Roman) -> Centered */
.left-half {
    align-items: center; /* Center the block horizontally */
    text-align: center;  /* Center the text within the lines */
    padding: 1rem;       /* Even padding */
}

/* RIGHT SIDE (Sanskrit) -> Centered */
.right-half {
    align-items: center; 
    text-align: center; 
    padding: 1rem;
}

.vertical-divider {
    /* 1. The Structure (Dashed, Gold) */
    border-right: 1px dashed var(--highlight);
    width: 0; /* It's just a border now */
    background: transparent; /* Remove the gradient background */
    
    /* 2. The Glow (This makes the dashes bloom) */
    filter: drop-shadow(0 0 2px var(--highlight));
    
    /* 3. Positioning */
    opacity: 0.5; 
    margin: 3rem 0;
}

/* --- SANSKRIT ANIMATION (The "Nuclear" Fix) --- */

/* --- SANSKRIT HERO TEXT (Restored Sutra Logic) --- */
#sanskrit-text {
    font-family: 'Noto Sans Devanagari', sans-serif;
    font-size: 1.3em;
    line-height: 1.5;
    color: var(--soft-white);
    text-align: center;
    width: 100%;
    opacity: 0; 
    /* 1. ENABLE TRANSITION (Crucial for the fade) */
    transition: 
        opacity 1s ease-in, 
        color 1.5s ease-out, 
        text-shadow 1.5s ease-out;
    cursor: pointer;
}

/* Utility: Force instant change (no fade) */
.no-transition {
    transition: none !important;
}

/* Utility: The Glow Effect */
#sanskrit-text.hot {
    /* Force White/Brightest Gold */
    color: #FFF !important; 
    text-shadow: /* 0 0 20px var(--highlight), 0 0 40px var(--primary); */
        0 0 5px #FFF, 
        0 0 15px var(--highlight), 
        0 0 30px var(--primary);
    transition: 
        opacity 1s ease-in,
        color 0.05s ease-out, 
        text-shadow 0.05s ease-out !important;
}

/* Simple Glow Animation Class */
.glow-pulse {
    animation: pulseGlow 1.5s ease-out;
}

@keyframes pulseGlow {
    0% { color: var(--highlight); text-shadow: 0 0 15px var(--highlight); }
    100% { color: var(--primary); text-shadow: none; }
}

/* Minimal Fade-In Animation */
@keyframes simpleFadeGlow {
    /* Add !important to 0% to ensure it starts invisible */
    0% { 
        opacity: 0 !important; 
        color: var(--highlight); 
        text-shadow: 0 0 15px var(--highlight); 
    }
    100% { 
        opacity: 1 !important; 
        color: var(--primary); 
        text-shadow: none; 
    }
}

/* Utility class to trigger it */
.fade-in-glow {
    animation: simpleFadeGlow 2s ease-out forwards;
}

#roman-display {
    font-size: 1em;
    line-height: 2;
    font-family: 'Source Code Pro', monospace;
    font-weight: 600; /* Bump up from normal (400) */
    text-shadow: 0 1px 1px rgba(0,0,0,0.8); /* 2. Add a specialized shadow (Sharp, not blurry) */
    color: var(--highlight);
    font-style: italic;
    transition: filter 0.3s ease;
    text-align: center; /* Override the previous 'right' */
    width: 100%;
    /* Adds space above the first line and below the last line */
    padding-top: 0;
    padding-bottom: 0;
}

/* --- LINE-BY-LINE TYPING (Fixed Dimensions) --- */

/* 1. The Container */
#roman-display {
    display: flex;
    flex-direction: column;
    gap: 0; /* The gap is the only flexible part */
    justify-content: center;
    align-items: center; 
    
    /* Ensure the container itself has a minimum presence */
    min-height: 6em; 
}

/* 2. Individual Lines (The Locked Boxes) */
.roman-line {
    display: block;
    
    /* We remove min-height here because JS will set exact height */
    /* min-height: 1.5em; <-- REMOVED */
    
    cursor: pointer;
    border-radius: 4px;
    padding: 0.2rem 0.5rem; /* Keep padding for the hover effect */
    transition: background-color 0.2s ease, color 1.5s ease-out, text-shadow 1.5s ease;
    
    text-align: left; 
    white-space: nowrap; 
    
    /* Layout Safety: content-box ensures padding adds to width, not eats it */
    box-sizing: content-box; 
    min-height: 1.5em; /* Reserve vertical space */
}

.roman-line:hover {
    background-color: rgba(166, 123, 91, 0.1); /* Subtle highlight on hover */
}

/* 3. SUPER-HOT TORCHLIGHT (The Active Typing State) */
.typing-active {
    /* Force White/Brightest Gold */
    color: #FFF !important; 
    
    /* Double Shadow: Inner White Glow + Outer Gold Flare */
    text-shadow: 
        0 0 5px #FFF, 
        0 0 15px var(--highlight), 
        0 0 30px var(--primary);
        
    /* Ensure opacity is full */
    opacity: 1;
    /* 0.05s ensures it snaps to white instantly */
    transition: color 0.05s ease-out, text-shadow 0.05s ease-out !important;
}

/* --- FOCUS MODE BLUR --- */
#verse-container, 
#translation-container {
    transition: filter 0.5s ease, opacity 0.5s ease;
}

/* --- MEMORIZATION BLUR --- */
.blurred {
    filter: blur(5px);
    /* pointer-events: none;*/ /* Optional: Prevent clicking while blurred */
    user-select: none; /* Prevent cheating by highlighting */
}
.blurred:hover {
    filter: blur(2px); /* Peek on hover */
    opacity: 0.9;
    cursor: help;
}

/* --- REPLAYABLE INTERACTION --- */
.replayable-box {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.replayable-box:hover {
    background-color: rgba(166, 123, 91, 0.1);
}

/* --- SYNTAX & PURPORT --- */
/* --- 2. TRANSLATION SENTENCE STYLING --- */
.translation-sentence {
    /* 1. Layout: Flow like a paragraph */
    display: inline;
    
    /* 2. Interaction */
    cursor: pointer;
    transition: 
        background-color 0.2s ease,
        color 1.5s ease-out, 
        text-shadow 1.5s ease-out;
    border-radius: 3px;
    padding: 0 2px;
}
.translation-sentence:hover {
    background-color: rgba(166, 123, 91, 0.1);
    color: var(--highlight);
}
/* THE TORCHLIGHT EFFECT (Active Typing) */
.translation-sentence.typing-active {
    color: #FFF !important; /* Force White */
    text-shadow: 0 0 5px #FFF, 0 0 15px var(--highlight);
    opacity: 1;
    /* 0.05s ensures it snaps to white instantly */
    transition: color 0.05s ease-out, text-shadow 0.05s ease-out !important;
}

.fold-content.open { display: block; animation: accordionFade 0.3s ease-out; }

/* --- MODULE: DEEP DIVE TABS (Synonyms & Purport) --- */
.tab-module {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* CRITICAL: This fills all remaining vertical space */
    min-height: 0; /* Allows flex-shrink if needed */
    overflow: hidden; /* Contains the internal scrollbar */
}

/* --- TAB HEADER (Fixed & Floating) --- */
.tab-header {
    /* 1. THE FIX: Stop it from getting squashed */
    flex-shrink: 0 !important; 
    
    /* 2. LAYOUT: Restore natural height & internal padding */
    height: auto !important; 
    padding: 0.8rem 0 !important;
    
    display: flex;
    align-items: center;
    gap: 1.5rem; 
    
    /* 3. EXTERNAL SPACING (Matches Gita Index Style) */
    margin-top: 0 !important; 
    margin-bottom: 0.8rem !important;
    margin-left: 0.8rem;
    margin-right: 0.8rem;

    /* 4. Visuals */
    border-bottom: 1px dashed var(--secondary);
    font-size: 0.8em;
    font-weight: 500;
    color: var(--secondary);
}

.tab-btn {
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    user-select: none;
}
.tab-btn:hover {
    background-color: var(--mystic2); 
    color: #000000 !important; 
        
    /* The Structure */
    border-radius: 2px;
    text-decoration: none;
        
    /* Optional: A subtle glow to make it feel like a light source */
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
    border-color: var(--mystic2);
    cursor: pointer;
}

/* The Active Tab State */
.tab-btn.active {
    color: var(--highlight);
    text-shadow: 0 0 5px rgba(200, 159, 123, 0.4);
    /* Optional: A subtle indicator dot or underline could go here */
}

.tab-separator { opacity: 0.3; user-select: none; }

.tab-content-wrapper {
    flex-grow: 1;
    position: relative;
    overflow-y: auto; /* ENABLE SCROLLING HERE */
    padding: 1rem;
    
    /* Scrollbar styling for Webkit (Chrome/Safari) to make it subtle */
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) var(--background);
}

.tab-pane {
    display: none; /* Hidden */
    animation: fadeIn 0.4s ease-out;
}
.tab-pane.active { display: block; } /* Visible */

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* --- PURPORT TEXT COLOR --- */
#purport-display {
    color: var(--soft-white); /* Grey */
    
    /* Ensure it's readable */
    font-size: 0.9em;
    line-height: 1.7;
}

/* --- TERMINAL DIVIDER (For Multi-Commentary) --- */
.terminal-divider {
    border-bottom: 1px dashed var(--secondary);

    /* Top: 1.5rem (Space from Prabhupada) */
    /* Bottom: 0 (Space to Ramanuja) */
    margin: 1.5rem 0 0 0; /* Generous spacing */
    padding-bottom: 0.5rem;
    color: var(--secondary);
    font-size: 0.8em;
    font-weight: 700;
    opacity: 0.7;
    letter-spacing: 0.05em;
}

/* --- PRACTICE CANVAS TAB --- */
.practice-canvas {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    resize: none; /* Disable drag handle */
    
    /* Typography */
    font-family: 'Source Code Pro', monospace;
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--highlight); /* Type in Gold */
    font-weight: 500; 
    text-shadow: 0 0 5px var(--highlight); /* Matches Torchlight */
    
    /* Cursor color */
    caret-color: var(--highlight);
    
    padding: 0;
    box-sizing: border-box;
}

.practice-canvas::placeholder {
    color: var(--secondary);
    opacity: 0.9;
    font-style: italic;
}

/* Ensure the pane fills the height so the textarea can grow */
#practice-display {
    height: 100%;
    display: none; /* Hidden by default via tab logic */
}
#practice-display.active {
    display: block; /* Flex/Block depending on parent, block is fine here */
}

/* --- RESTORED MICRO-INTERACTIONS --- */

/* 1. The Tactile "Press" Effect */
.nav-btn, 
.memory-control, 
.toggle-icon, 
.replayable-box {
    transition: all 0.1s ease; /* Fast transition for snappiness */
}

.nav-btn:active, 
.memory-control:active,
.toggle-icon:active,
.sidebar-header:active,
.fold-header:active,
.replayable-box:active {
    transform: scale(0.96); /* The button shrinks slightly */
    color: var(--highlight);
}

/* 2. The "Glow" on Hover */
.memory-control:hover span {
    text-shadow: 0 0 8px rgba(200, 159, 123, 0.5);
}

/* 3. Ensure cursor interaction on the text boxes */
.replayable-box:hover {
    background-color: rgba(166, 123, 91, 0.1);
    border-radius: 4px;
}

/* Syntax Styling */
.syntax-flow { font-size: 0.9em; line-height: 1.8; color: var(--primary); }
.syntax-word { color: var(--highlight); font-weight: 500; }
.syntax-meaning { color: var(--soft-white); }
.syntax-separator { color: var(--secondary); opacity: 0.6; margin: 0 0.3rem; }

/* --- TRANSLATION --- */
.translation-box {
    display: flex;
    flex-direction: column;
}
#translation-display {
    padding: 1rem;
    font-size: .95em;
    line-height: 1.6;
    color: var(--soft-white);
    overflow-y: auto;
    transition: filter 0.3s ease;
}

/* --- RIGHT SIDEBAR & WIDGETS --- */
.ide-sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
}

.right-module {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
}

/* MEMORY MATRIX CONTROLS */
.dashed-divider {
    border: 0;
    border-top: 1px dashed var(--primary);
    margin: 0.3rem 0;
    opacity: 0.7;
}
.memory-control {
    padding: 0.3rem 0;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--soft-white);
    transition: color 0.2s ease;
}
.memory-control:hover { 
    background-color: var(--mystic2); 
    color: #000000; 
        
    /* The Structure */
    border-radius: 2px;
    text-decoration: none;
        
    /* Optional: A subtle glow to make it feel like a light source */
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
    border-color: var(--mystic2);
    cursor: pointer;
}
.memory-control.active { color: var(--highlight); font-weight: bold; }

/* --- MEMORY MATRIX SPACING --- */
#memory-matrix .right-module-content {
    /* 1. Add Breathing Room */
    /* Top: Separates content from the dashed header line */
    /* Sides: Separates content from the gold borders */
    padding: 0.5rem 1rem;
    
    /* 2. Ensure layout consistency */
    display: flex;
    flex-direction: column;
    /* gap: 0.2rem; */ /*now controlled with margins-  Slight gap between the buttons themselves */
}
/* --- MEMORY MATRIX GRID LAYOUT --- */

/* The Header Label ("// view:") */
.memory-label {
    font-size: 0.8em;
    color: var(--secondary);
    margin-bottom: 0.5rem;
    /* THE FIX: Add space above the label */
    padding-top: 0.5rem;
    opacity: 0.7;
}

/* The 2x2 Grid Container */
.memory-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 0.5rem; /* Space between buttons */
    margin-bottom: 0.2rem;
}

/* Button Tweaks for Grid Context (Terminal Style) */
#memory-matrix .memory-control {
    text-align: left;
    
    /* 1. Remove "Button" Look */
    background-color: transparent;
    border: 1px solid transparent; /* Keep transparent border to prevent layout jumping */
    border-radius: 0; /* Square corners */
    
    /* 2. Typography */
    font-size: 0.85em;
    color: var(--soft-white);
    padding: 0.4rem 0;
    transition: color 0.2s ease;
}

/* Hover State (Link Style) */
#memory-matrix .memory-control:hover {
    background-color: var(--mystic2); 
    color: #000000 !important; 
        
    /* The Structure */
    border-radius: 2px;
    text-decoration: none;
        
    /* Optional: A subtle glow to make it feel like a light source */
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
    border-color: var(--mystic2);
    cursor: pointer;
}

/* Active State (Selected) */
#memory-matrix .memory-control.active {
    color: var(--highlight);
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 4px;
    
    /* Optional: Add a subtle text shadow to imply "Selected" energy */
    text-shadow: 0 0 5px rgba(200, 159, 123, 0.3);
}

/* --- DESKTOP: MEMORY MATRIX STATIC HEADER --- */
#memory-matrix .right-module-header {
    cursor: default; /* Don't show the "Click Hand" cursor */
}

#memory-matrix .toggle-icon {
    display: none; /* Hide the [+] button on desktop */
}

/* Chant Counter */
.counter-control {
    text-align: left;
    padding: 0.1rem;
    margin-bottom: 0.1rem;
    /* THE FIX: Switch Solid -> Dashed & Lower Opacity */
    border: 1px dashed var(--secondary); 
    color: var(--secondary);
    opacity: 0.8; /* Makes the border/text sit back slightly */

    cursor: pointer;
    transition: all 0.2s ease;
    
    /* THE FIX: Remove the ugly browser click border */
    outline: none; 
    user-select: none;
    
}
.counter-control:hover {
    background-color: var(--mystic2); 
    color: #000000; 
        
    /* The Structure */
    border-radius: 2px;
    text-decoration: none;
        
    /* Optional: A subtle glow to make it feel like a light source */
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
    border-color: var(--mystic2);
    cursor: pointer;
}

/* NEW: State when Chants > 0 */
.counter-control.has-chants {
    color: var(--primary); /* Brown */
    border-color: var(--primary); /* Brown Dashed */
    opacity: 1; /* Fully visible */
}

/* --- MODULE: SYSTEM LINKS (The Spacer) --- */
#system-links-module {
    /* 1. Fill all available vertical space */
    flex-grow: 1; 
    
    /* 2. Layout failsafes */
    min-height: 0; /* Allows it to shrink if window is tiny */
    display: flex;
    flex-direction: column;
}

#system-links-module .right-module-content {
    /* 3. Push links to the bottom of this space? */
    /* Optional: If you want links at the bottom of the gap, un-comment next line */
    /* justify-content: flex-end; */
    
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* justify-content: center;  <-- Or center them vertically */

    /* --- THE FIX: BREATHING ROOM --- */
    /* Top: 1rem (pushes away from title line) */
    /* Left/Right: 1rem (pushes away from side borders) */
    /* Bottom: 0 (or 1rem if you want space there too) */
    padding: 1rem;
}

/* --- SYSTEM LINKS STYLING --- */
.feedback-link {
    /* 1. Layout: Stack them vertically */
    display: block; 
    margin-bottom: 0.5rem; /* Spacing between links */

    /* 2. Typography & Color */
    text-decoration: none; /* Remove default underline */
    color: var(--highlight); /* Brown/Gold Base */
    font-size: 0.8em;
    transition: color 0.2s ease;
}

/* 3. Hover Interaction */
.feedback-link:hover {
    background-color: var(--mystic2); 
    color: #000000; 
        
    /* The Structure */
    border-radius: 2px;
    text-decoration: none;
        
    /* Optional: A subtle glow to make it feel like a light source */
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
    border-color: var(--mystic2);
    cursor: pointer;
}

/* --- SECONDARY LINK STYLE --- */
.link-secondary {
    color: var(--secondary) !important; /* Grey base */
    /* THE FIX: Pushes this link to the very bottom of the flex container */
    margin-top: auto !important; 
    
    /* Optional: Add a little extra top breathing room */
    padding-top: 0;
}

/* Optional: Ensure it still glows gold on hover */
.link-secondary:hover {
    background-color: var(--mystic2); 
    color: #000000 !important; 
        
    /* The Structure */
    border-radius: 2px;
    text-decoration: none;
        
    /* Optional: A subtle glow to make it feel like a light source */
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
    border-color: var(--mystic2);
    cursor: pointer;
}

/* SYSTEM ID */
#system-id-module {
    margin-top: auto;
    min-height: 14em;
}

/* --- Graphic Logo Alignment & Glow --- */
        .sys-logo-img {
            max-width: 80%;       
            max-height: 10em;     
            width: auto;
            height: auto;
            display: block;
            
            /* --- THE STATIC GLOW --- */
            /* This creates a soft, ambient light behind the transparent pixels */
            filter: drop-shadow(0 0 5px var(--primary));
            
            /* NOTE: If using var(--primary) makes the glow too intense or solid, 
            swap it for a custom rgba value to lower the opacity, like this:
            filter: drop-shadow(0 0 15px rgba(166, 123, 91, 0.4)); */
        }


/* --- CURSOR & TYPING --- */
.cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background-color: var(--highlight);
    animation: blink 2s steps(2) infinite;
    vertical-align: middle;
    box-shadow: 0 0 5px var(--highlight);
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes accordionFade { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* --- MODULE ENTRANCE ANIMATION --- */

/* 1. The Target Elements */
/* We target the Left Sidebar, every Center Module, and every Right Widget */
.ide-sidebar, 
.module, 
.right-module, 
.system-id-link {
    /* Start State: Invisible & Pushed Down */
    opacity: 0; 
    transform: translateY(15px);
    
    /* The Physics: Smooth easing like a heavy blast door opening */
    transition: 
        opacity 0.8s ease-out, 
        transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. The Trigger State */
.pop-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* =========================================
   MOBILE RESPONSIVE STACK (Phase 1: The Interleave)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. THE CANVAS */
    /* Reset the body padding to match your preference */
    body {
        padding: 0.2rem !important;
        height: auto !important;
        overflow-x: hidden;
    }

    /* --- MOBILE INTRO ADJUSTMENTS --- */
    #intro-overlay {
        /* 1. Vertical Placement */
        /* A smaller value (e.g. 30vh) keeps it visually centered on tall phones */
        /* Increase this number to push text HIGHER up the screen */
        padding-bottom: 50vh !important; 
        
        box-sizing: border-box !important;
    }

    .intro-mantra {
        /* 2. Smaller Text Size */
        /* Desktop is 1.5em, Mobile needs to be smaller to fit width */
        font-size: 1.1em !important; 
        
        /* 3. Ensure Left-to-Right Typing */
        text-align: left !important;
        
        /* Safety to prevent wrapping on very small screens */
        white-space: nowrap !important;
    }

    /* 2. THE CONTAINER (Vertical Stack) */
    .ide-container {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important; /* Let body handle the edge padding */
        gap: 0.75rem;
    }

    /* 3. THE UNWRAP TRICK (CRITICAL) */
    /* This visually "deletes" the column divs so their children 
       can be sorted individually in the main stack */
    .ide-main, 
    .ide-sidebar-right,
    .code-block {
        display: contents !important;
    }

    /* 4. THE RE-ORDERING (Your New Sequence) */
    
    /* Position 0: Index (Hidden by default, toggles open) */
    #sidebar { order: 0; }

    /* Position 1: Verse (Sanskrit/Roman) */
    #verse-container { order: 1; }

    /* Position 2: Translation */
    #translation-container { order: 2; }

    /* Position 3: Memory Matrix (The Tools) */
    #memory-matrix { order: 3; }

    /* Position 4: Purport / Practice Tabs */
    #deep-dive-module { order: 4; }

    /* Position 5: System Links */
    #system-links-module { order: 5; }

    /* Position 6: System ID */
    #system-id-module { order: 6; }


    /* 5. MODULE RESET (Full Width & Borders) */
    .module, 
    .right-module, 
    .ide-sidebar,
    .sanskrit-display,
    .translation-box,
    .foldable-section {
        /* Force full width */
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        
        /* Reset heights so they grow naturally */
        height: auto !important;
        min-height: auto !important;
        flex-grow: 0 !important;
        margin: 0 !important;

        /* Ensure padding doesn't break width */
        box-sizing: border-box !important;
        
        /* User Request: Show full dashed borders for debugging/layout - option 1 */
        /* border: 1px dashed var(--primary) !important; */

        /* OPTION B: EDGE-TO-EDGE MODE (Clean Mobile Look) */
        border: none !important;
        border-bottom: 1px dashed var(--primary) !important;
    }

    /* --- MOBILE: REMOVE HOVER LAG --- */
    .sidebar-header:hover,
    .right-module-header:hover,
    .fold-header:hover {
        /* Force it to look normal even when tapped */
        color: var(--secondary) !important; 
        border-bottom-color: var(--secondary) !important;
        
        /* Optional: Remove transform if you had a scale effect */
        transform: none !important;
    }

    /* Ensure the Toggle Icon itself stays Gold */
    .toggle-icon {
        color: var(--highlight) !important;
    }

    /* --- MOBILE: SIDEBAR INDEX COLLAPSE --- */
    
    /* 1. Hide List by Default */
    .file-tree {
        display: none; /* Hidden start */
        /* Format: Top | Right | Bottom | Left */
        padding: 0 1rem 1rem 1rem !important;
        border-top: none; /* Remove any top borders if present */

        /* THE FIX: Max Height & Scroll */
        /* 1. Limit height to 40% of screen */
        max-height: 40vh !important; 
        
        /* 2. Allow scrolling INSIDE the list if it gets too long */
        overflow-y: auto !important; 
        
        /* Optional: Smooth scroll for the list itself */
        scroll-behavior: smooth;
    }

    /* 2. Show List when Open */
    /* Note: JS toggles '.open' on the PARENT (#sidebar), so we target that */
    .ide-sidebar.open .file-tree {
        display: block;
        animation: accordionFade 0.3s ease-out;
    }

    /* 3. Header Styling (Match Memory Matrix Spacing) */
    #sidebar-toggle {
        cursor: pointer; /* Restore hand cursor */
        border-bottom: 1px dashed var(--secondary);
        
        /* THE FIX: Match Memory Matrix Margins (Top | Sides | Bottom) */
        margin: 0.4rem 0.7rem 1rem !important;
    }

    /* 4. Show the [+] Button */
    #sidebar-toggle .toggle-icon {
        display: inline-block !important;
    }

    /* 6. VISUAL TWEAKS (Verse Module) */

    /* --- MOBILE: HEADER SPACING FIX --- */
    .header-left-group {
        /* Tighten the gap between [BG 2.1], |, and [*] */
        /* Desktop is 0.8rem -> Mobile becomes 0.3rem */
        gap: 0.1rem !important; 
    }

    .header-right-group {
        /* Tighten the gap between [BG 2.1], |, and [*] */
        /* Desktop is 0.8rem -> Mobile becomes 0.3rem */
        gap: 0.1rem !important; 
    }

    /* Optional: Shorten button text on mobile */
    #audio-chant-btn { content: "[♫]"; } /* (Requires more complex CSS to swap text) */
    
    /* Easier way: Just reduce font size slightly for the right group */
    .header-right-group .text-btn {
        font-size: 0.8em !important;
    }
    /* --- MOBILE: SANSKRIT ON TOP --- */
    
    .split-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 1. The Sanskrit Container (Right Half on Desktop -> Top on Mobile) */
    .right-half {
        order: 1 !important; /* Force to Top */
        padding: 1.5rem 0.5rem !important;
        /* REMOVE OLD BORDER */
        border-bottom: none !important; 
        
        /* Enable positioning for the custom line */
        position: relative;
    }

    /* DRAW CUSTOM DIVIDER LINE */
    .right-half::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        
        /* THE LOOK: Dashed Line */
        border-bottom: 1px dashed var(--secondary);
        
        /* THE FIX: Add Padding (Margin) on sides */
        /* This shrinks the line so it doesn't touch the module edges */
        margin: 0 2rem; 
        opacity: 0.5;
    }

    /* 2. The Roman Container (Left Half on Desktop -> Bottom on Mobile) */
    .left-half {
        order: 2 !important; /* Force to Bottom */
        padding: 1.5rem 0.5rem !important;
        border: none !important;
    }

    /* 3. Typography Adjustments */
    #sanskrit-text {
        font-size: 1.2em; 
        text-align: center;
        margin: 0; /* Clean up spacing */
    }
    
    #roman-display {
        font-size: 1.1em;
        text-align: center;
    }
    
    /* Hide the desktop vertical divider */
    .vertical-divider { display: none; }


    /* 7. MEMORY MATRIX TWEAKS */
    #memory-matrix .right-module-content {
        padding: 1rem !important;
    }

    /* --- MOBILE: MEMORY MATRIX COLLAPSE --- */
    
    /* 1. Default: Content Hidden on Mobile */
    #memory-matrix .right-module-content {
        display: none; /* Hidden Start */
        /* THE FIX: Reduce Top padding from 1rem to 0.5rem */
        /* Top: 0.5rem */
        /* Sides: 1rem */
        /* Bottom: 1rem */
        padding: 0 1rem 1rem 1rem !important;
    }

    /* 2. Open State: Visible */
    /* Reuse the existing .open class logic from your global toggleFold */
    #memory-matrix .right-module-content.open {
        display: block;
        animation: accordionFade 0.3s ease-out;
    }
    
    /* 3. Header Styling */
    #memory-matrix .right-module-header {
        /* Ensure the header itself looks clickable */
        cursor: pointer;
        /* Maintain the spacing we dialed in earlier */
        border-bottom: 1px dashed var(--secondary); /* Keep the divider */

        /* THE FIX: Asymmetric Vertical Margins */
        /* 0.4rem Top (Smaller) */
        /* 0.5rem Sides (Unchanged) */
        /* 1.0rem Bottom (Larger) */
        margin: 0 1rem 1.5rem !important;
    }

    /* --- MOBILE: MEMORY MATRIX ACTIVATION --- */
    #memory-matrix .right-module-header {
        cursor: pointer !important; /* Restore "Click Hand" cursor */
    }

    #memory-matrix .toggle-icon {
        display: inline-block !important; /* Show the [+] button */
    }

    /* --- MOBILE: TAB HEADER TIGHTENING --- */
    .tab-header {
        /* 1. Distribute items evenly across the width */
        justify-content: space-between !important; 
        
        /* 2. Reduce font size to ensure they fit */
        font-size: 0.8em !important;
        
        /* 3. Remove the gap so space-between handles all spacing */
        gap: 0 !important;
    }

    /* --- MOBILE: PURPORT/TAB SCROLL FIX --- */
    
    /* 1. The Container (Restore the Box) */
    #deep-dive-module {
        /* Override the edge-to-edge style */
        border: 1px dashed var(--highlight) !important; /* Gold Border */
        
        /* Add margin so it doesn't touch other modules */
        margin-bottom: 0.75rem !important; 
        
        /* Optional: Add a background tint to emphasize it's a "Reader" */
        background: rgba(166, 123, 91, 0.03) !important;
    }

    /* 2. The Content (The Scroll Window) */
    #deep-dive-module .tab-content-wrapper {
        /* Limit height to 50% of screen height */
        max-height: 50vh !important; 
        
        /* Enable internal scrolling */
        overflow-y: auto !important; 
        
        /* Ensure padding stays nice */
        padding: 1rem !important; 
        
        /* Smooth scrolling for touch */
        -webkit-overflow-scrolling: touch;
    }

    /* Optional: Hide the separator bars to save even more space? */
    /* .tab-separator { display: none; } */

    /* --- ACTIVE STATE: GOLD BORDERS --- */
    
    /* 1. Sidebar (Class is on the container) */
    .ide-sidebar.open {
        /* We must re-state the FULL border to undo 'border: none' */
        border: 1px dashed var(--highlight) !important;
    }

    /* 2. Memory Matrix (Class is on the content inside) */
    /* This selects the #memory-matrix box IF it contains an .open element */
    #memory-matrix:has(.open) {
        /* Re-state FULL border */
        border: 1px dashed var(--highlight) !important;
    }

    /* SYSTEM ID CONTENT (Mobile Spacing) */
    #system-id-module .right-module-content {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
        
        /* THE FIX: Equal Top/Bottom Spacing */
        padding-top: 2rem !important;    /* Add space above logo */
        padding-bottom: 2rem !important; /* Keep space below logo */
        
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* --- MOBILE: TOGGLE BUTTON COLOR --- */
    .toggle-icon {
        color: var(--highlight) !important; /* Force Gold */
        font-weight: bold; /* Optional: Makes the [+] crisper */
    }





}