/* ============================================
   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="traditional_std"] #typing-input,
body[data-input-mode="traditional_std"] #free-typing-area,
body[data-input-mode="unicode_roman"] #typing-input,
body[data-input-mode="unicode_roman"] #free-typing-area {
    font-family: 'Inter', 'Arial', sans-serif;
}

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

/* 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: 'Inter', 'Arial', sans-serif;
}

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: 'Inter', 'Arial', sans-serif !important;
    font-size: 1rem;
}

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

.unicode-font {
    font-family: 'Inter', 'Tiro Devanagari Hindi', 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 {
    font-family: 'Inter', 'Arial', sans-serif !important;
}

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

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