/* ============================================================================
   OakTree Games: Catalog Explorer styles (pages/catalog.html only)
   ----------------------------------------------------------------------------
   Additive layer on top of main.css / pages.css / widgets.css. Reuses the
   existing tokens (--tier-*, --sp-*, --font-*, --bg-*, --line-*) and the
   .entity-card / .filter-chip / .tier-toggle / .flow-pill / .biome-modal
   class contracts. Loads after widgets.css so same-specificity rules here
   win where they overlap.
   ============================================================================ */

/* ─── sticky prerequisite ────────────────────────────────────────────────
   main.css puts overflow-x: hidden on BOTH html and body, which turns body
   into a (never-scrolling) scroll container and silently disables
   position: sticky for every descendant (see the NAVIGATION comment in
   main.css; the nav went position:fixed for the same reason). `clip`
   keeps the identical no-horizontal-scroll guarantee without creating a
   scroll box, so the controls bar below can actually stick. Browsers
   without `clip` support drop these declarations and keep `hidden` from
   main.css; the bar then simply scrolls with the page. Scoped to the
   catalog page only. */
html[data-page="catalog"] { overflow-x: clip; }
html[data-page="catalog"] body { overflow-x: clip; }

/* ─── sticky controls bar ──────────────────────────────────────────────── */
.explorer-controls {
    position: sticky;
    top: var(--nav-h, 68px);
    z-index: 90; /* under the fixed nav (100), over cards */
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border: 1px solid var(--line-faint);
    margin-bottom: var(--sp-5);
}

.explorer-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}

#explorer-search {
    flex: 1;
    min-width: 220px;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    color: var(--text-pri);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color 180ms ease, background 180ms ease;
}
#explorer-search:focus {
    outline: none;
    border-color: var(--accent-oak);
    background: var(--bg-panel-hi);
}
#explorer-search:focus-visible {
    outline: 2px solid var(--accent-oak);
    outline-offset: 2px;
}

.explorer-results {
    font-family: var(--font-pixel);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
    white-space: nowrap;
}

/* Type chips reuse .filter-chip (pages.css); the count is an accent. */
.explorer-type-chips .chip-count {
    color: var(--accent-cosmic);
    margin-left: 6px;
}
.explorer-type-chips .filter-chip.active .chip-count {
    color: var(--bg-void); /* active chip is oak-filled */
}

/* Tier chips reuse .tier-toggle (pages.css). Zero-count tiers under the
   active type get .is-empty + aria-disabled from explorer.js. */
.explorer-tier-chips { margin-bottom: 0; }
.tier-toggle.is-empty {
    opacity: 0.35;
    cursor: not-allowed;
}
.tier-toggle.is-empty:hover { color: var(--text-sec); }

/* Category select: hidden when type = All (or the type has no categories) */
.explorer-cat-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.explorer-cat-wrap.is-hidden { display: none; }
.explorer-cat-wrap label {
    font-family: var(--font-pixel);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.explorer-cat-wrap select {
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    color: var(--text-pri);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    min-width: 200px;
    transition: border-color 180ms ease, background 180ms ease;
}
.explorer-cat-wrap select:focus {
    outline: none;
    border-color: var(--accent-oak);
    background: var(--bg-panel-hi);
}
.explorer-cat-wrap select:focus-visible {
    outline: 2px solid var(--accent-oak);
    outline-offset: 2px;
}

/* ─── data-status banner ───────────────────────────────────────────────── */
.explorer-note {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.explorer-note-dismiss {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    color: var(--text-sec);
    font-family: var(--font-pixel);
    font-size: 10px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.explorer-note-dismiss:hover {
    background: var(--accent-oak);
    color: var(--bg-void);
}
.explorer-note-dismiss:focus-visible {
    outline: 2px solid var(--accent-oak);
    outline-offset: 2px;
}

/* ─── grid cards ─────────────────────────────────────────────────────────
   Cards are real <button type="button"> elements (keyboard-activatable by
   default); interiors are spans so the button stays phrasing-content-only.
   Rendering perf: off-screen cards skip layout/paint entirely. */
.explorer-grid .entity-card {
    text-align: left;
    width: 100%;
    cursor: pointer;
    content-visibility: auto;
    contain-intrinsic-size: 0 220px;
}
.explorer-grid .entity-card:focus-visible {
    outline: 2px solid var(--tier-color, var(--accent-oak));
    outline-offset: 2px;
}

/* span stand-ins for the h4/p/div interior the non-button cards use */
.explorer-card-main {
    display: block;
    flex: 1;
    min-width: 0;
}
.explorer-grid .entity-name {
    display: block;
    font-family: var(--font-pixel);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-pri);
    line-height: 1.4;
    margin-bottom: 6px;
}
.explorer-grid .entity-card .desc { display: block; }
.explorer-grid .entity-card .entity-card-head { width: 100%; }

/* small type badge, top-right of each card */
.type-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 6px;
    background: var(--bg-deep);
    border: 1px solid var(--line-faint);
    font-family: var(--font-pixel);
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
    pointer-events: none;
}
.type-badge-item        { color: var(--accent-oak); }
.type-badge-building    { color: var(--accent-amber); }
.type-badge-recipe      { color: var(--accent-aurora); }
.type-badge-research    { color: var(--accent-violet); }
.type-badge-achievement { color: var(--accent-cosmic); }
.type-badge-biome       { color: var(--accent-rose); }

/* empty-state note sits inside the grid container, so span every column */
.explorer-empty { grid-column: 1 / -1; }

/* recipe cards: compact input → output pill rows (reuses .flow-pill) */
.explorer-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0;
}
.explorer-flow .flow-pill {
    font-size: 12px;
    padding: 4px 8px;
}
.explorer-flow .flow-arrow { font-size: 14px; }

/* ─── modal additions ──────────────────────────────────────────────────── */
.explorer-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--line-faint);
}
.explorer-copylink {
    padding: 8px 12px;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    color: var(--text-sec);
    font-family: var(--font-pixel);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.explorer-copylink:hover {
    background: var(--accent-oak);
    border-color: var(--accent-oak);
    color: var(--bg-void);
}
.explorer-copylink:focus-visible {
    outline: 2px solid var(--accent-oak);
    outline-offset: 2px;
}

/* in-modal cross-reference links (item ↔ recipe ↔ building hops) */
.explorer-xref { color: var(--text-pri); }
.explorer-xref:hover { color: var(--accent-cosmic); }
a.flow-pill-link { text-decoration: none; }
a.flow-pill-link:hover {
    border-color: var(--accent-oak);
    color: var(--accent-oak);
}
a.flow-pill-link:focus-visible {
    outline: 2px solid var(--accent-oak);
    outline-offset: 2px;
}

/* ─── small screens ──────────────────────────────────────────────────────
   The full controls stack is tall; pinning it would eat most of a phone
   viewport, so it unsticks below 720px. */
@media (max-width: 720px) {
    .explorer-controls {
        position: static;
        padding: var(--sp-3);
    }
    #explorer-search { min-width: 140px; }
    .explorer-cat-wrap select { min-width: 140px; }
}