/* ============================================================================
   Codex Wiki — INDEX grid (the searchable/sortable list of every record)
   Shares the grimoire-dark, gold-accent palette with codex-entry.css.
   No em/en dashes anywhere in this file (brand binding).
   ============================================================================ */

:root {
    --cwk-gold:        #C8A14A;
    --cwk-gold-soft:   #8a6e2e;
    --cwk-paper:       #1a1714;
    --cwk-leather:     #14110d;
    --cwk-ink:         #f3ead4;
    --cwk-ink-soft:    #c8bda1;
    --cwk-rule:        #3a2e1a;
    --cwk-shadow:      0 8px 32px rgba(0,0,0,.55);

    --cwk-page-bg:     var(--cwk-paper);
    --cwk-text:        var(--cwk-ink);
    --cwk-text-mute:   var(--cwk-ink-soft);
    --cwk-heading:     var(--cwk-gold);
    --cwk-accent:      var(--cwk-gold);
    --cwk-card-bg:     rgba(255,255,255,0.02);
    --cwk-card-border: var(--cwk-rule);
    --cwk-card-hover:  rgba(200,161,74,0.08);
    --cwk-lock:        #5a5147;
}

/* Light-mode: re-bind the surface tokens (matches codex-entry.css). */
[data-theme="light"],
body.codex-theme-grimoire-light {
    --cwk-page-bg:     #f5e8c2;
    --cwk-text:        #2a2114;
    --cwk-text-mute:   #6a5a3a;
    --cwk-heading:     #7a5c1e;
    --cwk-accent:      #7a5c1e;
    --cwk-card-bg:     rgba(0,0,0,0.03);
    --cwk-card-border: #cbb98a;
    --cwk-card-hover:  rgba(122,92,30,0.10);
    --cwk-lock:        #b7a578;
}

/* Shell */
.codex-wiki-shell {
    background: var(--cwk-page-bg);
    color: var(--cwk-text);
    min-height: 100vh;
    padding: 1.5rem 1rem 4rem;
    font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
}

/* Header */
.codex-wiki-header {
    max-width: 1200px;
    margin: 0 auto 1.25rem;
    text-align: center;
}
.codex-wiki-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--cwk-text-mute);
    text-decoration: none;
    font-size: .9rem;
    margin-bottom: 1rem;
    transition: color .15s ease;
}
.codex-wiki-back:hover { color: var(--cwk-accent); }
.codex-wiki-title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: var(--cwk-heading);
    letter-spacing: .04em;
    margin: 0;
    font-weight: 700;
}
.codex-wiki-subtitle {
    color: var(--cwk-text-mute);
    font-size: 1.05rem;
    margin: .35rem 0 0;
    font-style: italic;
}
.codex-wiki-creator-note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .75rem 0 0;
    padding: .3rem .7rem;
    border: 1px solid var(--cwk-gold-soft);
    border-radius: 999px;
    color: var(--cwk-accent);
    font-size: .82rem;
}

/* Controls bar (sticky) */
.codex-wiki-controls {
    position: sticky;
    top: 0;
    z-index: 20;
    max-width: 1200px;
    margin: 0 auto 1rem;
    padding: .85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    background: color-mix(in srgb, var(--cwk-leather) 92%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--cwk-card-border);
    border-radius: 12px;
    box-shadow: var(--cwk-shadow);
}
[data-theme="light"] .codex-wiki-controls,
body.codex-theme-grimoire-light .codex-wiki-controls {
    background: color-mix(in srgb, #f5e8c2 92%, transparent);
}

/* Search */
.codex-wiki-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 180px;
}
.codex-wiki-search > i {
    position: absolute;
    left: .7rem;
    color: var(--cwk-text-mute);
    pointer-events: none;
    font-size: .85rem;
}
.codex-wiki-search-input {
    width: 100%;
    padding: .55rem .7rem .55rem 2rem;
    background: var(--cwk-card-bg);
    border: 1px solid var(--cwk-card-border);
    border-radius: 8px;
    color: var(--cwk-text);
    font-size: .95rem;
    font-family: inherit;
}
.codex-wiki-search-input:focus {
    outline: none;
    border-color: var(--cwk-accent);
    box-shadow: 0 0 0 2px rgba(200,161,74,.25);
}

/* Type chips */
.codex-wiki-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 2 1 auto;
}
.codex-wiki-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    background: var(--cwk-card-bg);
    border: 1px solid var(--cwk-card-border);
    border-radius: 999px;
    color: var(--cwk-text-mute);
    font-size: .82rem;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.codex-wiki-chip:hover {
    color: var(--cwk-text);
    border-color: var(--cwk-gold-soft);
}
.codex-wiki-chip.is-active {
    background: var(--cwk-accent);
    border-color: var(--cwk-accent);
    color: #1a1714;
    font-weight: 600;
}

/* Sort */
.codex-wiki-sort {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.codex-wiki-sort-label {
    color: var(--cwk-text-mute);
    font-size: .82rem;
}
.codex-wiki-sort-select {
    padding: .45rem .6rem;
    background: var(--cwk-card-bg);
    border: 1px solid var(--cwk-card-border);
    border-radius: 8px;
    color: var(--cwk-text);
    font-size: .88rem;
    font-family: inherit;
    cursor: pointer;
}
.codex-wiki-sort-select:focus {
    outline: none;
    border-color: var(--cwk-accent);
}
/* The native dropdown popup renders on an OS-white background; without an
   explicit dark option background the light gold text was unreadable. */
.codex-wiki-sort-select option,
#codex-wiki-title-select option {
    background: #14110d;
    color: #E8E0D0;
}

/* Count */
.codex-wiki-count {
    max-width: 1200px;
    margin: 0 auto .75rem;
    color: var(--cwk-text-mute);
    font-size: .85rem;
}

/* Grid */
.codex-wiki-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .9rem;
}

/* Card (shared base for <a> and locked <div>) */
.codex-wiki-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem 1.05rem 1.1rem;
    background: var(--cwk-card-bg);
    border: 1px solid var(--cwk-card-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--cwk-text);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
    min-height: 96px;
}
a.codex-wiki-card:hover {
    transform: translateY(-3px);
    border-color: var(--cwk-accent);
    background: var(--cwk-card-hover);
}
a.codex-wiki-card:focus-visible {
    outline: 2px solid var(--cwk-accent);
    outline-offset: 2px;
}

.codex-wiki-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.codex-wiki-card-type {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--cwk-accent);
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.codex-wiki-card-title {
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--cwk-text);
    font-weight: 600;
}

/* Title-number badge sitting beside the type label. The title NUMBER is
   already public via the "Released after T#" hint, so this is not a leak.
   Uses --cwk-accent (gold in dark, deep gold in light) so it reads in both. */
.codex-wiki-tnum {
    display: inline-flex;
    align-items: center;
    padding: .08rem .42rem;
    background: rgba(200,161,74,.14);
    border: 1px solid var(--cwk-gold-soft);
    border-radius: 999px;
    color: var(--cwk-accent);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
}
.codex-wiki-card.is-locked .codex-wiki-tnum {
    color: var(--cwk-accent);
}

/* Locked card */
.codex-wiki-card.is-locked {
    cursor: default;
    opacity: .82;
    border-style: dashed;
}
.codex-wiki-card.is-locked .codex-wiki-card-type,
.codex-wiki-card.is-locked .codex-wiki-card-title {
    color: var(--cwk-text-mute);
}
.codex-wiki-lock {
    color: var(--cwk-lock);
    font-size: .85rem;
}
.codex-wiki-lock-chip {
    align-self: flex-start;
    padding: .25rem .6rem;
    background: rgba(90,81,71,.25);
    border: 1px solid var(--cwk-lock);
    border-radius: 999px;
    color: var(--cwk-text-mute);
    font-size: .72rem;
    letter-spacing: .02em;
}

/* Empty state */
.codex-wiki-empty {
    max-width: 1200px;
    margin: 2.5rem auto 0;
    text-align: center;
    color: var(--cwk-text-mute);
}
.codex-wiki-empty > i {
    font-size: 2.4rem;
    color: var(--cwk-lock);
    margin-bottom: .6rem;
}
.codex-wiki-empty p {
    font-size: 1.05rem;
    font-style: italic;
}

/* Cards hidden by the client filter */
.codex-wiki-card[hidden] { display: none !important; }

@media (max-width: 520px) {
    .codex-wiki-controls { padding: .7rem; }
    .codex-wiki-sort { width: 100%; justify-content: space-between; }
    .codex-wiki-sort-select { flex: 1; }
}