/**
 * Anarandian Dictionary — Frontend Styles
 * Designed to integrate with the Anarand'aris dark theme.
 *
 * Uses the site's CSS variables when available, with fallbacks for safety.
 */

.anarandian-dictionary {
    --ad-bg-deep: var(--bg-deep, #0a0a10);
    --ad-bg-mid: var(--bg-mid, #0f0f17);
    --ad-bg-surface: var(--bg-surface, #14141e);
    --ad-bg-elevated: var(--bg-elevated, #1a1a26);
    --ad-bg-hover: var(--bg-hover, #22222f);

    --ad-text-primary: var(--text-primary, #e2ded6);
    --ad-text-secondary: var(--text-secondary, #a8a49c);
    --ad-text-tertiary: var(--text-tertiary, #6e6b65);
    --ad-text-dim: var(--text-dim, #4a483f);

    --ad-accent-scarlet: var(--accent-scarlet, #9b1b1b);
    --ad-accent-scarlet-bright: var(--accent-scarlet-bright, #c42020);
    --ad-accent-scarlet-dim: var(--accent-scarlet-dim, #5a1111);

    --ad-accent-gold: var(--accent-gold, #b8944f);
    --ad-accent-gold-bright: var(--accent-gold-bright, #d4ad5e);
    --ad-accent-gold-dim: var(--accent-gold-dim, #7a6234);

    --ad-font-display: 'Cormorant SC', 'Cormorant Garamond', serif;
    --ad-font-body: 'Cormorant Garamond', serif;

    color: var(--ad-text-primary);
    font-family: var(--ad-font-body);
    line-height: 1.6;
}

/* ==================== CONTROLS ==================== */
.anarandian-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.anarandian-search-wrap {
    flex: 1;
    min-width: 240px;
}

.anarandian-search {
    width: 100%;
    background: var(--ad-bg-surface) !important;
    color: var(--ad-text-primary) !important;
    border: 1px solid rgba(184, 148, 79, 0.12) !important;
    border-radius: 0 !important;
    font-family: var(--ad-font-body) !important;
    font-size: 1rem !important;
    padding: 0.7rem 1rem !important;
    box-sizing: border-box;
}

.anarandian-search:focus {
    border-color: var(--ad-accent-gold-dim) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(184, 148, 79, 0.15) !important;
}

.anarandian-search::placeholder {
    color: var(--ad-text-dim) !important;
}

.anarandian-filter-wrap {
    flex: 0 0 auto;
}

.anarandian-role-filter {
    background: var(--ad-bg-surface) !important;
    color: var(--ad-text-secondary) !important;
    border: 1px solid rgba(184, 148, 79, 0.12) !important;
    border-radius: 0 !important;
    font-family: var(--ad-font-display) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em;
    padding: 0.7rem 1rem !important;
    cursor: pointer;
    min-width: 200px;
    height: 100%;
}

.anarandian-role-filter:focus {
    border-color: var(--ad-accent-gold-dim) !important;
    outline: none !important;
}

/* ==================== ALPHABET JUMPER ==================== */
.anarandian-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-top: 1px solid rgba(184, 148, 79, 0.06);
    border-bottom: 1px solid rgba(184, 148, 79, 0.06);
}

.anarandian-jump-label {
    font-family: var(--ad-font-display);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ad-text-tertiary);
    margin-right: 0.5rem;
}

.anarandian-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-family: var(--ad-font-display);
    font-size: 0.85rem;
    color: var(--ad-text-secondary);
    text-decoration: none !important;
    border: 1px solid rgba(184, 148, 79, 0.08);
    transition: all 0.2s ease;
}

.anarandian-letter:hover {
    color: var(--ad-accent-gold);
    border-color: var(--ad-accent-gold-dim);
    background: var(--ad-bg-hover);
}

.anarandian-letter.unavailable {
    color: var(--ad-text-dim);
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

/* ==================== STATS ==================== */
.anarandian-stats {
    margin-bottom: 1rem;
}

.anarandian-count {
    font-family: var(--ad-font-display);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ad-text-tertiary);
}

/* ==================== ENTRIES ==================== */
.anarandian-letter-group {
    margin-bottom: 1.5rem;
}

.anarandian-letter-header {
    font-family: var(--ad-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ad-accent-gold);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(184, 148, 79, 0.15);
}

.anarandian-entry {
    background: var(--ad-bg-elevated);
    border: 1px solid rgba(184, 148, 79, 0.06);
    margin-bottom: 0.4rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.anarandian-entry:hover {
    border-color: rgba(184, 148, 79, 0.15);
}

/* Paradigm-only entries: solid gold left border. */
.anarandian-entry.is-paradigm {
    border-left: 2px solid var(--ad-accent-gold-dim);
}

.anarandian-entry.is-expanded {
    border-color: rgba(184, 148, 79, 0.2);
    background: var(--ad-bg-surface);
}

.anarandian-entry-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 1fr) 2fr 30px;
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 1rem;
    cursor: pointer;
}

.anarandian-entry-row:focus {
    outline: 1px solid var(--ad-accent-gold-dim);
    outline-offset: -1px;
}

/* Headword. */
.anarandian-entry-headword .latin {
    font-family: var(--ad-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ad-text-primary);
    margin-right: 0.5rem;
}

.anarandian-entry-headword .cyrillic {
    font-family: var(--ad-font-body);
    font-style: italic;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ad-text-tertiary);
}

.anarandian-entry-headword .paradigm-marker {
    margin-left: 0.3rem;
    color: var(--ad-accent-gold);
    font-size: 0.85rem;
    cursor: help;
}

/* Role. */
.anarandian-entry-role {
    font-family: var(--ad-font-body);
    font-style: italic;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ad-text-tertiary);
    letter-spacing: 0.02em;
}

/* Meaning short. */
.anarandian-entry-meaning {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ad-text-secondary);
    line-height: 1.5;
}

/* Chevron. */
.anarandian-entry-chevron {
    font-size: 0.9rem;
    color: var(--ad-text-dim);
    text-align: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.anarandian-entry.is-expanded .anarandian-entry-chevron {
    transform: rotate(180deg);
    color: var(--ad-accent-gold);
}

/* Highlighting. */
mark {
    background: rgba(196, 32, 32, 0.25);
    color: var(--ad-accent-gold-bright);
    padding: 0 2px;
}

/* ==================== DETAILS (expanded) ==================== */
.anarandian-entry-details {
    padding: 0 1rem 1.2rem 1rem;
    border-top: 1px solid rgba(184, 148, 79, 0.08);
    margin-top: 0;
    color: var(--ad-text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.anarandian-entry-details .detail-line {
    margin-top: 0.8rem;
}

.anarandian-entry-details .detail-label {
    font-family: var(--ad-font-display);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ad-text-dim);
    margin-right: 0.5rem;
}

.anarandian-entry-details .ipa {
    font-family: monospace;
    color: var(--ad-text-secondary);
}

.anarandian-entry-details .detail-notes {
    margin-top: 0.8rem;
    padding: 0.8rem 1rem;
    background: var(--ad-bg-deep);
    border-left: 2px solid var(--ad-accent-scarlet-dim);
    color: var(--ad-text-secondary);
    font-style: italic;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
}

/* ==================== PARADIGM TABLE ==================== */
.detail-paradigm {
    margin-top: 1rem;
}

.detail-paradigm-note {
    font-family: var(--ad-font-display);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ad-text-tertiary);
    margin-bottom: 0.5rem;
}

.anarandian-paradigm {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
}

.anarandian-paradigm th,
.anarandian-paradigm td {
    border: 1px solid rgba(184, 148, 79, 0.1);
    padding: 0.5rem 0.8rem;
    text-align: left;
}

.anarandian-paradigm thead th {
    background: var(--ad-bg-deep);
    font-family: var(--ad-font-display);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ad-accent-gold);
    font-weight: 600;
}

.anarandian-paradigm .paradigm-row-label {
    background: var(--ad-bg-deep);
    font-family: var(--ad-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ad-text-tertiary);
    font-weight: 500;
    width: 110px;
}

.anarandian-paradigm tbody td {
    background: var(--ad-bg-elevated);
    font-family: var(--ad-font-body);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ad-text-primary);
}

/* ==================== EMPTY STATE ==================== */
.anarandian-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ad-text-tertiary);
    font-style: italic;
    background: var(--ad-bg-elevated);
    border: 1px solid rgba(184, 148, 79, 0.08);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .anarandian-controls {
        flex-direction: column;
    }

    .anarandian-search-wrap,
    .anarandian-filter-wrap {
        width: 100%;
    }

    .anarandian-role-filter {
        width: 100%;
    }

    .anarandian-entry-row {
        grid-template-columns: 1fr 30px;
        gap: 0.4rem;
    }

    .anarandian-entry-role,
    .anarandian-entry-meaning {
        grid-column: 1;
    }

    .anarandian-entry-chevron {
        grid-row: 1;
        grid-column: 2;
    }

    .anarandian-letter {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .anarandian-paradigm {
        font-size: 0.85rem;
    }

    .anarandian-paradigm th,
    .anarandian-paradigm td {
        padding: 0.3rem 0.5rem;
    }
}

/* ==================== COMPOUND MARKER ==================== */
.anarandian-entry-headword .compound-marker {
    margin-left: 0.3rem;
    color: var(--ad-accent-scarlet);
    font-size: 0.85rem;
    cursor: help;
}

/* Compound-only entries (standard + has components): solid scarlet left border. */
.anarandian-entry.is-compound {
    border-left: 2px solid var(--ad-accent-scarlet);
}

/* Paradigm + compound entries: vertical gold-to-scarlet gradient.
   border-image lets us paint a gradient as the left border. */
.anarandian-entry.is-paradigm.is-compound {
    border-left: 2px solid transparent;
    border-image: linear-gradient(
        to bottom,
        var(--ad-accent-gold-dim) 0%,
        var(--ad-accent-gold) 30%,
        var(--ad-accent-scarlet-bright) 70%,
        var(--ad-accent-scarlet) 100%
    ) 1;
}

/* ==================== COMPONENTS SECTION (in expanded view) ==================== */
.detail-components {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(184, 148, 79, 0.08);
}

.detail-components .detail-label {
    display: block;
    margin-bottom: 0.4rem;
}

.components-list {
    font-family: var(--ad-font-body);
    font-size: 1rem;
    color: var(--ad-text-primary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.component-link {
    color: var(--ad-accent-gold) !important;
    text-decoration: none !important;
    border-bottom: 1px dotted var(--ad-accent-gold-dim) !important;
    padding-bottom: 1px;
    font-style: italic;
    font-weight: 500;
    transition: color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.component-link:hover {
    color: var(--ad-accent-gold-bright) !important;
    border-bottom-color: var(--ad-accent-gold) !important;
    border-bottom-style: solid !important;
}

.component-form {
    font-style: italic;
    color: var(--ad-text-secondary);
    font-weight: 500;
}

.component-gloss {
    color: var(--ad-text-tertiary);
    font-size: 0.85rem;
    font-style: italic;
    margin-left: 0.2rem;
}

.component-separator {
    color: var(--ad-text-dim);
    font-weight: 600;
    margin: 0 0.2rem;
}

.component-note {
    margin-top: 0.8rem;
    padding: 0.6rem 0.9rem;
    background: var(--ad-bg-deep);
    border-left: 2px solid var(--ad-accent-gold-dim);
    color: var(--ad-text-secondary);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==================== FLASH HIGHLIGHT (navigation feedback) ==================== */
.anarandian-entry.flash-highlight {
    animation: anarandian-flash 1.5s ease-out;
}

@keyframes anarandian-flash {
    0%   { background: rgba(184, 148, 79, 0.25); border-color: var(--ad-accent-gold); }
    30%  { background: rgba(184, 148, 79, 0.15); }
    100% { background: var(--ad-bg-elevated); }
}

/* ==================== PARADIGM CELL: form + IPA ==================== */
.paradigm-cell-form {
    display: block;
    font-family: var(--ad-font-body);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ad-text-primary);
    line-height: 1.3;
}

.paradigm-cell-ipa {
    display: block;
    font-family: monospace;
    font-style: normal;
    font-size: 0.78rem;
    color: var(--ad-text-tertiary);
    margin-top: 0.15rem;
    line-height: 1.2;
}