/* ============================================
   INPUT MODE SWITCHER STYLES
   Preeti / Unicode / English toggle in header
   ============================================ */

.input-mode-switcher {
    display: flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
}

.mode-btn-split-group {
    display: flex;
    gap: 1px;
    /* Subtle line between splits */
    background: var(--border);
    /* This creates the divider color */
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

.mode-btn-split-group .mode-btn {
    border-radius: 0;
    padding: 8px 10px;
}

.mode-btn-split-group .split-left {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.mode-btn-split-group .split-center {
    border-radius: 0;
}

.mode-btn-split-group .split-right {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.mode-btn:hover {
    background: var(--highlight);
    color: var(--text-primary);
}

.mode-btn.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px var(--primary-glow);
}

.mode-icon {
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.mode-btn[data-mode="preeti"] .mode-icon {
    font-family: 'Preeti', sans-serif;
    font-size: 1.1rem;
}

.mode-btn[data-mode="unicode"] .mode-icon,
.mode-btn[data-mode="traditional_std"] .mode-icon,
.mode-btn[data-mode="unicode_roman"] .mode-icon {
    font-family: 'Tiro Devanagari Hindi', serif;
}

.mode-label {
    font-family: 'Inter', sans-serif;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .input-mode-switcher {
        padding: 3px;
        gap: 2px;
    }

    .mode-btn {
        padding: 6px 8px;
        gap: 4px;
    }

    .mode-label {
        display: none;
    }

    .mode-icon {
        min-width: 20px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .input-mode-switcher {
        border-radius: 8px;
    }

    .mode-btn {
        padding: 5px 6px;
        border-radius: 6px;
    }
}

/* ============================================
   KEYBOARD DISPLAY MODES
   Different keyboard layouts for each mode
   ============================================ */

/* Unicode Mode Indicator */
body[data-input-mode="unicode"] .keyboard-container::before {
    content: 'Unicode Traditional';
    position: absolute;
    top: -24px;
    right: 10px;
    font-size: 0.7rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-input-mode="unicode_roman"] .keyboard-container::before {
    content: 'Unicode Romanized';
    position: absolute;
    top: -24px;
    right: 10px;
    font-size: 0.7rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-input-mode="traditional_std"] .keyboard-container::before {
    content: 'Standard Traditional';
    position: absolute;
    top: -24px;
    right: 10px;
    font-size: 0.7rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* English Mode Indicator */
body[data-input-mode="english"] .keyboard-container::before {
    content: 'English';
    position: absolute;
    top: -24px;
    right: 10px;
    font-size: 0.7rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Preeti Mode - Default, no indicator needed */
body[data-input-mode="preeti"] .keyboard-container::before {
    content: '';
}

/* Input field font switching */
body[data-input-mode="preeti"] #typing-input {
    font-family: 'Preeti', sans-serif;
}
body[data-input-mode="preeti"] #free-typing-area {
    /* Container must be Inter to keep markers (which inherit from parent) as English digits */
    font-family: 'Inter', 'Arial', sans-serif;
}

body[data-input-mode="unicode"] #typing-input,
body[data-input-mode="unicode"] #free-typing-area,
body[data-input-mode="unicode"] #free-typing-area font,
body[data-input-mode="traditional_std"] #typing-input,
body[data-input-mode="traditional_std"] #free-typing-area,
body[data-input-mode="traditional_std"] #free-typing-area font,
body[data-input-mode="unicode_roman"] #typing-input,
body[data-input-mode="unicode_roman"] #free-typing-area,
body[data-input-mode="unicode_roman"] #free-typing-area font {
    /* Override font tags made by execCommand before this fix. */
    font-family: 'Nirmala UI', 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', sans-serif;
}

body[data-input-mode="english"] #typing-input,
body[data-input-mode="english"] #free-typing-area {
    font-family: 'Inter', 'Arial', sans-serif;
}

/* Dynamic Typezone runs keep the font/encoding used when they were typed. */
#free-typing-area .free-text-run {
    line-height: 1.25;
    vertical-align: baseline;
}

#free-typing-area .free-text-preeti {
    font-family: 'Preeti', sans-serif !important;
    /* Preeti has a shorter visual x-height than Unicode/Inter at equal rem. */
    font-size: 1.08em;
    vertical-align: -0.035em;
}

#free-typing-area .free-text-unicode {
    font-family: 'Nirmala UI', 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', sans-serif !important;
    font-size: 1em;
    vertical-align: -0.015em;
}

/* Visual-only base for a newly typed ZWNJ. The stored text remains U+200C. */
#free-typing-area .free-text-unicode.zwnj-pending::after {
    content: "◌";
    color: var(--text-secondary);
    pointer-events: none;
}

#free-typing-area .free-text-english {
    font-family: 'Inter', 'Arial', sans-serif !important;
    font-size: 0.97em;
    vertical-align: 0.01em;
}

/* Target text display switching */
body[data-input-mode="preeti"] .target-text {
    font-family: 'Preeti', sans-serif;
}

body[data-input-mode="unicode"] .target-text,
body[data-input-mode="traditional_std"] .target-text,
body[data-input-mode="unicode_roman"] .target-text {
    font-family: 'Nirmala UI', 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', sans-serif !important;
}

body[data-input-mode="english"] .target-text {
    font-family: 'Inter', 'Arial', sans-serif;
}

/* ============================================
   KEYBOARD KEY DISPLAY CLASSES
   ============================================ */

/* Unicode Devanagari display on keys */
.unicode-display {
    font-family: 'Nirmala UI', 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', sans-serif !important;
    font-size: 1rem;
}

/* English display on keys */
.english-font {
    font-family: 'Inter', 'Arial', sans-serif !important;
}

.unicode-font {
    font-family: 'Nirmala UI', 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', sans-serif !important;
}

/* Ghost/Target layer font switching */
body[data-input-mode="unicode"] .ghost-layer,
body[data-input-mode="unicode"] .typed-layer,
body[data-input-mode="unicode"] .layers-container,
body[data-input-mode="unicode"] #text-display,
body[data-input-mode="unicode"] .char,
body[data-input-mode="traditional_std"] .ghost-layer,
body[data-input-mode="traditional_std"] .typed-layer,
body[data-input-mode="traditional_std"] .layers-container,
body[data-input-mode="traditional_std"] #text-display,
body[data-input-mode="traditional_std"] .char,
body[data-input-mode="unicode_roman"] .ghost-layer,
body[data-input-mode="unicode_roman"] .typed-layer,
body[data-input-mode="unicode_roman"] .layers-container,
body[data-input-mode="unicode_roman"] #text-display,
body[data-input-mode="unicode_roman"] .char {
    /* Inter does not shape every Devanagari conjunct/matra consistently. */
    font-family: 'Nirmala UI', 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', sans-serif !important;
}

/* The progress overlay divides lesson text into nested typed/current/ghost spans.
   Give those spans the same shaping font as their parent so standalone matras
   cannot fall back to Inter and appear taller or misaligned. */
body[data-input-mode="unicode"] .ghost-layer span,
body[data-input-mode="unicode"] .typed-layer span,
body[data-input-mode="traditional_std"] .ghost-layer span,
body[data-input-mode="traditional_std"] .typed-layer span,
body[data-input-mode="unicode_roman"] .ghost-layer span,
body[data-input-mode="unicode_roman"] .typed-layer span {
    font-family: 'Nirmala UI', 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', sans-serif !important;
    font-synthesis: none;
}

/* Keep a clear, natural blank between Unicode words even when the lesson
   renderer splits text at the current cursor position. */
body[data-input-mode="unicode"] .lesson-space,
body[data-input-mode="traditional_std"] .lesson-space,
body[data-input-mode="unicode_roman"] .lesson-space {
    display: inline-block;
    width: 0.42em;
    min-width: 0.42em;
    white-space: pre;
}

/* Vertical alignment helper for all modes when keyboard is hidden */
body[data-input-mode="preeti"] #text-display,
body[data-input-mode="unicode"] #text-display,
body[data-input-mode="traditional_std"] #text-display,
body[data-input-mode="unicode_roman"] #text-display,
body[data-input-mode="english"] #text-display {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body[data-input-mode="preeti"] .layers-container,
body[data-input-mode="unicode"] .layers-container,
body[data-input-mode="traditional_std"] .layers-container,
body[data-input-mode="unicode_roman"] .layers-container,
body[data-input-mode="english"] .layers-container {
    padding: 0.5rem 2rem;
    margin: 0 auto;
}

body[data-input-mode="english"] .ghost-layer,
body[data-input-mode="english"] .typed-layer,
body[data-input-mode="english"] .layers-container,
body[data-input-mode="english"] #text-display,
body[data-input-mode="english"] .char {
    font-family: 'Inter', 'Arial', sans-serif !important;
}

body[data-input-mode="preeti"] .char {
    font-family: 'Preeti', sans-serif !important;
}

/* BROAD FIX: Force ALL list items and markers in free zone to use standard font 
   This ensures standard 1. and a. markers even in Preeti mode. 
   Individually typed text inside (wrapped in font tags) will still follow the mode. */
#free-typing-area li,
#free-typing-area li::marker,
#free-typing-area ol li,
#free-typing-area ul li {
    font-family: 'Inter', 'Arial', sans-serif !important;
}

body[data-input-mode="unicode"] #free-typing-area li,
body[data-input-mode="unicode"] #free-typing-area li::marker,
body[data-input-mode="unicode"] #free-typing-area ol,
body[data-input-mode="unicode"] #free-typing-area ol li,
body[data-input-mode="unicode"] #free-typing-area ul,
body[data-input-mode="unicode"] #free-typing-area ul li,
body[data-input-mode="traditional_std"] #free-typing-area li,
body[data-input-mode="traditional_std"] #free-typing-area li::marker,
body[data-input-mode="traditional_std"] #free-typing-area ol,
body[data-input-mode="traditional_std"] #free-typing-area ol li,
body[data-input-mode="traditional_std"] #free-typing-area ul,
body[data-input-mode="traditional_std"] #free-typing-area ul li,
body[data-input-mode="unicode_roman"] #free-typing-area li,
body[data-input-mode="unicode_roman"] #free-typing-area li::marker,
body[data-input-mode="unicode_roman"] #free-typing-area ol,
body[data-input-mode="unicode_roman"] #free-typing-area ol li,
body[data-input-mode="unicode_roman"] #free-typing-area ul,
body[data-input-mode="unicode_roman"] #free-typing-area ul li {
    font-family: 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', sans-serif !important;
}

/* SPECIAL CASE: Devanagari lists (१. २. ३.) should use Nepali font */
#free-typing-area ol[style*="devanagari"] li,
#free-typing-area ol[style*="devanagari"] li::marker {
    font-family: 'Tiro Devanagari Hindi', 'Inter', serif !important;
}

/* Ensure nested markers also follow this */
#free-typing-area ol ol li::marker,
#free-typing-area ol ol ol li::marker {
    font-family: 'Inter', 'Arial', sans-serif !important;
}

/* Ensure the list container itself doesn't force Preeti */
#free-typing-area ol, 
#free-typing-area ul {
    font-family: 'Inter', 'Arial', sans-serif !important;
}

/* Fluid List Styles: Nested numbering transformations */
#free-typing-area ol ol {
    list-style-type: lower-alpha !important;
}

#free-typing-area ol ol ol {
    list-style-type: lower-roman !important;
}

/* Ensure markers follow the font fix even when nested */
#free-typing-area ol ol li::marker,
#free-typing-area ol ol ol li::marker {
    font-family: 'Inter', 'Arial', sans-serif !important;
}

/* ============================================
   GLOBAL SYMBOL BUTTON VISIBILITY
   Only show Alt-Code/Symbol helper in Preeti Mode
   (Universal change: Desktop & Mobile)
   ============================================ */
body:not([data-input-mode="preeti"]) #learn-mode-alt-trigger,
body:not([data-input-mode="preeti"]) .alt-helper-btn,
body:not([data-input-mode="preeti"]) #alt-helper-trigger {
    display: none !important;
}