@layer reset, base, components, themes, utilities;

@layer components {
    /* ========================================
   DICTIONARY — PAGE-SPECIFIC STYLES
   Matches the design system in base.css
   ======================================== */

    .dict-body {
        background-color: var(--color-parchment, #F9F8F6);
        color: #1d2d44;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .dict-body::selection {
        background-color: var(--color-gold-500, #C5A059);
        color: white;
    }

    html.dark-mode.dict-body {
        background-color: #09090b !important;
        color: #f5f5f5 !important;
    }

    /* --- Header --- */
    .dict-header {
        padding: 6rem 0 3rem 0;
        background-color: var(--color-parchment, #F9F8F6);
        transition: background-color 0.3s ease;
        text-align: center;
    }

    html.dark-mode .dict-header {
        background-color: #09090b;
    }

    .dict-header-inner {
        max-width: 56rem;
        margin: 0 auto;
        padding: 0 1rem;
    }

    @media (min-width: 640px) {
        .dict-header-inner {
            padding: 0 1.5rem;
        }
    }

    .dict-subtitle {
        display: block;
        color: var(--color-gold-500, #C5A059);
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    .dict-title {
        font-family: 'Playfair Display', serif;
        font-size: 3rem;
        line-height: 1;
        font-weight: 700;
        color: var(--color-indigo-900, #1D2D44);
        margin-bottom: 1.5rem;
    }

    @media (min-width: 768px) {
        .dict-title {
            font-size: 3.75rem;
        }
    }

    html.dark-mode .dict-title {
        color: #ffffff;
    }

    .dict-description {
        font-size: 1.125rem;
        color: #475569;
        max-width: 42rem;
        margin: 0 auto;
        line-height: 1.625;
    }

    html.dark-mode .dict-description {
        color: #94a3b8;
    }

    /* --- Main Layout --- */
    .dict-main {
        min-height: 100vh;
        background-color: #ffffff;
        transition: background-color 0.3s ease;
        padding-bottom: 6rem;
    }

    html.dark-mode .dict-main {
        background-color: #121214;
    }

    /* --- Search Bar Container --- */
    .dict-search-area {
        border-bottom: 1px solid #f3f4f6;
    }

    html.dark-mode .dict-search-area {
        border-bottom-color: #1e293b;
    }

    .dict-search-inner {
        max-width: 80rem;
        margin: 0 auto;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    @media (min-width: 640px) {
        .dict-search-inner {
            flex-direction: row;
            padding: 1rem 1.5rem;
        }
    }

    /* Breadcrumb */
    .dict-breadcrumb {
        display: flex;
        font-size: 0.875rem;
        color: #64748b;
        font-weight: 500;
    }

    html.dark-mode .dict-breadcrumb {
        color: #94a3b8;
    }

    .dict-breadcrumb-link {
        transition: color 0.2s ease;
        text-decoration: none;
        color: inherit;
    }

    .dict-breadcrumb-link:hover {
        color: var(--color-indigo-600, #4f46e5);
    }

    html.dark-mode .dict-breadcrumb-link:hover {
        color: #818cf8;
    }

    .dict-breadcrumb-separator {
        margin: 0 0.5rem;
        color: #d1d5db;
    }

    html.dark-mode .dict-breadcrumb-separator {
        color: #475569;
    }

    .dict-breadcrumb-active {
        color: var(--color-indigo-900, #1D2D44);
        font-weight: 600;
    }

    html.dark-mode .dict-breadcrumb-active {
        color: #ffffff;
    }

    /* Search Input */
    .dict-search-wrapper {
        position: relative;
        width: 100%;
    }

    @media (min-width: 640px) {
        .dict-search-wrapper {
            width: 16rem;
        }
    }

    .dict-search-input {
        width: 100%;
        background-color: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 9999px;
        padding: 0.5rem 1rem 0.5rem 2.5rem;
        font-size: 0.875rem;
        transition: all 0.2s ease;
        color: #111827;
    }

    .dict-search-input:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--color-indigo-500, #6366f1);
    }

    html.dark-mode .dict-search-input {
        background-color: #0f172a;
        border-color: #334155;
        color: #ffffff;
    }

    .dict-search-icon {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1rem;
        height: 1rem;
        color: #9ca3af;
        pointer-events: none;
    }

    /* --- Content Container --- */
    .dict-container {
        max-width: 80rem;
        margin: 0 auto;
        padding: 3rem 1rem;
    }

    @media (min-width: 640px) {
        .dict-container {
            padding: 3rem 1.5rem;
        }
    }

    .hidden {
        display: none !important;
    }

    /* Loading State */
    .dict-loading-spinner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5rem 0;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    .spinner-circle {
        width: 3rem;
        height: 3rem;
        border: 4px solid #e0e7ff;
        border-top-color: var(--color-indigo-600, #4f46e5);
        border-radius: 9999px;
        animation: spin 1s linear infinite;
        margin-bottom: 1rem;
    }

    html.dark-mode .spinner-circle {
        border-color: #312e81;
        border-top-color: var(--color-indigo-600, #4f46e5);
    }

    .loading-text {
        color: #64748b;
        font-weight: 500;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    html.dark-mode .loading-text {
        color: #94a3b8;
    }

    /* --- Term Grid --- */
    .dict-term-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        column-gap: 2rem;
        row-gap: 1rem;
    }

    @media (min-width: 768px) {
        .dict-term-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1024px) {
        .dict-term-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* Letter Grid View */
    .dict-letter-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    @media (min-width: 640px) {
        .dict-letter-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 768px) {
        .dict-letter-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .dict-letter-grid {
            grid-template-columns: repeat(6, 1fr);
        }
    }

    /* Letter Title */
    .dict-letter-header {
        margin-bottom: 2rem;
        display: flex;
        align-items: flex-end;
        gap: 1rem;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 1rem;
    }

    html.dark-mode .dict-letter-header {
        border-bottom-color: #1e293b;
    }

    .dict-letter-title {
        font-family: 'Playfair Display', serif;
        font-size: 3.75rem;
        font-weight: 700;
        color: var(--color-indigo-900, #1D2D44);
        line-height: 1;
        margin: 0;
    }

    html.dark-mode .dict-letter-title {
        color: #ffffff;
    }

    .dict-term-count {
        color: #64748b;
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }

    html.dark-mode .dict-term-count {
        color: #94a3b8;
    }

    /* View Term Single */
    .dict-term-view {
        max-width: 56rem;
        margin: 0 auto;
    }

    .dict-btn-back {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border-radius: 9999px;
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        color: #334155;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        margin-top: 2rem;
    }

    .dict-btn-back:hover {
        background-color: #f9fafb;
    }

    html.dark-mode .dict-btn-back {
        background-color: #1e293b;
        border-color: #334155;
        color: #cbd5e1;
    }

    html.dark-mode .dict-btn-back:hover {
        background-color: #334155;
    }

    /* "View on Map" — indigo surface with gold accent (DESIGN.md palette) */
    .dict-map-link-row {
        margin-top: 1.5rem;
        text-align: center;
    }

    .dict-btn-map {
        margin-top: 0;
        background-color: #1d2d44;
        border-color: #1d2d44;
        color: #ffffff;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 0.9375rem;
        font-weight: 600;
        transition: background-color 0.2s ease, border-color 0.2s ease,
            transform 0.2s ease, box-shadow 0.2s ease;
    }

    .dict-btn-map:hover {
        background-color: #243756;
        border-color: #c5a059;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(29, 45, 68, 0.25);
    }

    .dict-btn-map:active {
        transform: scale(0.95);
    }

    .dict-btn-map:focus-visible {
        outline: 2px solid #c5a059;
        outline-offset: 2px;
    }

    .dict-btn-map .dict-btn-icon {
        width: 1rem;
        height: 1rem;
        color: #c5a059;
        flex-shrink: 0;
    }

    html.dark-mode .dict-btn-map {
        background-color: #121214;
        border-color: #26262a;
        color: #e5e7eb;
    }

    html.dark-mode .dict-btn-map:hover {
        background-color: #18181b;
        border-color: #c5a059;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    }

    /* No Results */
    .dict-no-results {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5rem 0;
        text-align: center;
    }

    .dict-no-results-icon {
        width: 4rem;
        height: 4rem;
        background-color: #f3f4f6;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        color: #9ca3af;
    }

    html.dark-mode .dict-no-results-icon {
        background-color: #1e293b;
    }

    .dict-no-results-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 0.5rem 0;
    }

    html.dark-mode .dict-no-results-title {
        color: #ffffff;
    }

    .dict-no-results-text {
        color: #64748b;
        max-width: 24rem;
        margin: 0;
    }

    html.dark-mode .dict-no-results-text {
        color: #94a3b8;
    }

    /* Dictionary specific styles extracted from dictionary.html */
    .term-link {
        display: flex;
        align-items: center;
        min-width: 0;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(249, 250, 251, 1);
        transition: color 0.2s ease, transform 0.2s ease;
        text-decoration: none;
        color: #334155;
        font-weight: 500;
        /* Skip layout/paint of off-screen rows (letter grids hold up to hundreds of
       entries). `auto` remembers the real height once a row has been rendered. */
        content-visibility: auto;
        contain-intrinsic-size: auto 2.75rem;
    }

    html.dark-mode .term-link {
        border-bottom-color: rgba(30, 41, 59, 0.5);
        color: #cbd5e1;
    }

    .term-link:last-child {
        border-bottom: 0;
    }

    .term-link:hover {
        color: var(--color-gold-500, #c5a059);
        transform: translateX(4px);
    }

    .term-link .indicator {
        flex-shrink: 0;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 9999px;
        background-color: var(--color-gold-500, #c5a059);
        opacity: 0;
        margin-right: 0.75rem;
        transition: opacity 0.2s ease;
    }

    .term-link:hover .indicator {
        opacity: 1;
    }

    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease-out;
    }

    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

    /* Error State */
    .dict-error-card {
        background-color: #fef2f2;
        border: 1px solid #fee2e2;
        border-radius: 0.75rem;
        padding: 1.5rem;
        text-align: center;
        max-width: 28rem;
        margin: 0 auto;
    }

    html.dark-mode .dict-error-card {
        background-color: rgba(127, 29, 29, 0.2);
        border-color: rgba(127, 29, 29, 0.3);
    }

    .dict-error-card h3 {
        font-weight: 700;
        font-size: 1.125rem;
        color: #991b1b;
        margin: 0 0 0.5rem 0;
    }

    html.dark-mode .dict-error-card h3 {
        color: #fca5a5;
    }

    .dict-error-card p {
        font-size: 0.875rem;
        color: #b91c1c;
        opacity: 0.8;
        margin: 0 0 1rem 0;
    }

    html.dark-mode .dict-error-card p {
        color: #fecaca;
    }

    .dict-btn-error {
        background-color: #ef4444;
        color: #ffffff;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .dict-btn-error:hover {
        background-color: #dc2626;
    }

    /* ========================================
   HEBREW LEXICON MODE (Strong's)
   ======================================== */
    :root {
        --font-hebrew: 'Noto Serif Hebrew', 'SBL Hebrew', 'Ezra SIL', 'Times New Roman', serif;
        --font-greek: 'Noto Serif', 'GFS Didot', 'Palatino Linotype', 'Times New Roman', serif;
    }

    /* Mode toggle (segmented control in the header) */
    .dict-mode-toggle {
        display: inline-flex;
        gap: 0.25rem;
        margin-top: 2rem;
        padding: 0.25rem;
        border-radius: 9999px;
        background-color: #f3f4f6;
        border: 1px solid #e5e7eb;
    }

    html.dark-mode .dict-mode-toggle {
        background-color: #171719;
        border-color: #26262a;
    }

    .dict-mode-link {
        padding: 0.5rem 1.25rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
        color: #64748b;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .dict-mode-link:hover {
        color: #1d2d44;
    }

    html.dark-mode .dict-mode-link:hover {
        color: #ffffff;
    }

    .dict-mode-link.is-active {
        background-color: #ffffff;
        color: var(--color-indigo-900, #1D2D44);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    html.dark-mode .dict-mode-link.is-active {
        background-color: #26262a;
        color: #ffffff;
    }

    .dict-mode-link:focus-visible {
        outline: 2px solid var(--color-gold-500, #C5A059);
        outline-offset: 2px;
    }

    /* Hebrew index: number ranges + section labels */
    .dict-section-label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: #94a3b8;
        margin: 0 0 1rem 0;
    }

    .dict-section-label--spaced {
        margin-top: 3rem;
    }

    .dict-range-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .dict-range-chip {
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        border: 1px solid #e5e7eb;
        background-color: #f9fafb;
        color: #334155;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .dict-range-chip:hover {
        border-color: var(--color-gold-500, #c5a059);
        color: var(--color-gold-500, #c5a059);
        transform: translateY(-1px);
    }

    html.dark-mode .dict-range-chip {
        background-color: #171719;
        border-color: #26262a;
        color: #cbd5e1;
    }

    /* Hebrew / Greek big title on letter pages */
    .dict-letter-title.is-hebrew {
        font-family: var(--font-hebrew);
        font-weight: 400;
        line-height: 1.3;
    }

    .dict-letter-title.is-greek {
        font-family: var(--font-greek);
        font-weight: 400;
        line-height: 1.3;
    }

    /* Strong's list rows (letter, range and search results) */
    .dict-term-grid.dict-term-grid--strongs {
        grid-template-columns: minmax(0, 1fr);
    }

    @media (min-width: 1024px) {
        .dict-term-grid.dict-term-grid--strongs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .strongs-row {
        padding: 0.6rem 0;
        min-width: 0;
        /* Taller than a plain term row: lemma + transliteration + definition line */
        contain-intrinsic-size: auto 3.5rem;
    }

    .strongs-row-lemma {
        flex: 0 0 5.5rem;
        margin-right: 1rem;
        text-align: left;
        font-family: var(--font-hebrew);
        font-size: 1.5rem;
        line-height: 1.4;
        color: var(--color-indigo-900, #1D2D44);
    }

    html.dark-mode .strongs-row-lemma {
        color: #ffffff;
    }

    .strongs-row-lemma[lang="el"] {
        font-family: var(--font-greek);
    }

    .strongs-row-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .strongs-row-xlit {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .strongs-row-def {
        font-size: 0.8125rem;
        font-weight: 400;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html.dark-mode .strongs-row-def {
        color: #94a3b8;
    }

    .strongs-row-id {
        flex-shrink: 0;
        margin-left: 0.75rem;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: var(--color-gold-500, #c5a059);
    }

    /* Animations */
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }
    }

}