/* Shared browse chrome for the wiki list pages
 * (/wiki/guides, /wiki/features, /wiki/items).
 *
 * Everything /wiki/guides, /wiki/features and /wiki/items share: the sticky
 * filter panel, its pills and search box, the empty state, and the content card
 * with its per-category header tints. Items brings its own grid and pager in
 * wiki-items.css; the other two need nothing further.
 *
 * Colour tokens (--color-primary, --border-subtle, ...) come from :root in base.html. */

/* -------------------------------------------------------------- filter panel */

/* Search, category and map in one sticky panel. Sticky so the controls stay
   reachable while scrolling a long grid; opaque because cards scroll underneath. */
.wiki-panel {
    position: sticky;
    top: 4rem;                 /* the navbar is h-16 and sticky at top:0 */
    z-index: 30;               /* under the navbar's z-50 */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 0.75rem;
    background: #12182a;       /* opaque: the grid scrolls behind this */
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.wiki-panel__search-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ------------------------------------------------------------------- search */

.wiki-search {
    position: relative;
    flex: 1 1 auto;            /* full width of the panel */
    min-width: 0;
}

.wiki-search__icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7c8899;
    font-size: 0.85rem;
    pointer-events: none;
}

.wiki-search__input {
    width: 100%;
    background: rgba(8, 12, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    /* The clear button and the `/` hint are mutually exclusive -- one shows when
       there is a query, the other when there is not -- so the field only has to
       clear one of them. */
    padding: 0.7rem 2.6rem 0.7rem 2.4rem;
    color: #fff;
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.wiki-search__input:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.wiki-search__input::placeholder { color: #7c8899; }

.wiki-search__input:focus {
    outline: none;
    background: rgba(8, 12, 24, 1);
    border-color: var(--color-primary, #00d4ff);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

/* Every other control in this sheet has a :focus-visible and the input did not,
   while also setting outline:none — so keyboard focus was the one state with no
   indicator of its own. The ring above already reads well, so this just makes it
   survive a UA stylesheet that would otherwise draw its own outline. */
.wiki-search__input:focus-visible {
    outline: none;
    border-color: var(--color-primary, #00d4ff);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.25);
}

/* The native search affordances differ per browser; we draw our own clear button. */
.wiki-search__input::-webkit-search-decoration,
.wiki-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* `/` focuses the search box from anywhere on the page — wiki-common.js has done
   this for a long time and nothing ever said so. Hidden once there is a query,
   because the clear button takes that corner, and on touch, where there is no
   keyboard to press it with. */
.wiki-search__hint {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.1rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.04);
    color: #7c8899;
    font-size: 0.75rem;
    line-height: 1.4;
    pointer-events: none;
}

.wiki-search__input:focus ~ .wiki-search__hint,
.wiki-search__hint[hidden] { display: none; }

@media (hover: none) {
    .wiki-search__hint { display: none; }
}

/* Live result count, beside the box rather than in the page subtitle. */
.wiki-count {
    flex: 0 0 auto;
    color: #cbd5e1;
    font-size: 0.8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wiki-search__clear {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.wiki-search__clear:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.wiki-search__clear:focus-visible { outline: 2px solid var(--color-primary, #00d4ff); outline-offset: 1px; }
.wiki-search__clear[hidden] { display: none; }

.wiki-clear-all {
    flex: 0 0 auto;
    padding: 0.3rem 0.15rem;
    border: none;
    background: none;
    color: var(--color-primary, #00d4ff);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.wiki-clear-all:hover { text-decoration: underline; }
.wiki-clear-all:focus-visible { outline: 2px solid var(--color-primary, #00d4ff); outline-offset: 2px; border-radius: 3px; }
.wiki-clear-all[hidden] { display: none; }

/* --------------------------------------------------------------- filter rows */

/* Both rows share a fixed-width label column, so the CATEGORY pills and the MAP
   pills start at exactly the same x position. */
.wiki-filter-line {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.wiki-filter-line__label {
    flex: 0 0 4.5rem;
    padding-top: 0.3rem;
    color: #7c8899;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.wiki-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.wiki-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: #cbd5e1;
    font-size: 0.8125rem;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
}

.wiki-pill:hover {
    color: #fff;
    border-color: rgba(0, 212, 255, 0.5);
}

.wiki-pill.is-active {
    background: rgba(0, 212, 255, 0.14);
    border-color: rgba(0, 212, 255, 0.65);
    color: #a5f3fc;
    font-weight: 500;
}

.wiki-pill:focus-visible {
    outline: 2px solid var(--color-primary, #00d4ff);
    outline-offset: 2px;
}

/* Category glyph, matching the one on that category's cards. Fixed 1em box so the
   labels still line up despite Font Awesome's variable glyph widths. Pages whose
   pills carry no icon (e.g. /wiki/items) are unaffected. */
.wiki-pill__icon {
    width: 1em;
    font-size: 0.8125em;
    text-align: center;
    opacity: .8;
}

.wiki-pill:hover .wiki-pill__icon,
.wiki-pill.is-active .wiki-pill__icon { opacity: 1; }

/* Readable at a glance rather than a dim afterthought. */
.wiki-pill__count {
    color: #9fb0c4;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.wiki-pill:hover .wiki-pill__count { color: #cbd5e1; }
.wiki-pill.is-active .wiki-pill__count { color: #7dd3fc; }

/* ------------------------------------------------------------ empty state */

.wiki-empty {
    background: #161c2e;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 0.75rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.wiki-empty__title { margin: 0 0 .4rem; color: #e2e8f0; font-weight: 600; }
.wiki-empty__hint  { margin: 0; color: #94a3b8; font-size: .875rem; }
.wiki-empty__hint a { color: var(--color-primary, #00d4ff); }

.wiki-empty__hint--sub { margin-top: .75rem; font-size: .8125rem; }

.wiki-empty__btn {
    margin-top: 1rem;
    padding: 0.45rem 1.1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 212, 255, 0.55);
    background: rgba(0, 212, 255, 0.12);
    color: #a5f3fc;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.wiki-empty__btn:hover { background: rgba(0, 212, 255, 0.22); color: #fff; }
.wiki-empty__btn:focus-visible { outline: 2px solid var(--color-primary, #00d4ff); outline-offset: 2px; }



/* ============================================================================
   Content cards and category groups — shared by /wiki/guides and /wiki/features.
   Both render the same object: a 16/9 header (hero image if one exists, otherwise
   a category-tinted gradient behind the category glyph), chips overlaying its
   top-left, then title and clamped summary. The per-category tints key off the
   category name, which both surfaces share, so they live here rather than in
   either page's own sheet.
   ============================================================================ */
/* ---------------------------------------------------------------- sections */

.wiki-group { margin-bottom: 1.75rem; }
.wiki-group.is-hidden { display: none; }

/* Not .wiki-section-title: that one is 1.75rem and is already being fought with
   `text-base` overrides wherever it is reused. */
.wiki-group__title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin: 0 0 0.625rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.wiki-group__count {
    color: #64748b;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Search collapses the grouping — headers would lie about what is on screen.
   Class, not id: wiki-common.js toggles `is-flat` on the element it was handed,
   whose ids are `guide-sections` and `feature-sections`. Nothing has ever had
   id="wiki-groups", so as an id selector this rule never once matched. */
.wiki-groups.is-flat .wiki-group__title { display: none; }
.wiki-groups.is-flat .wiki-group { margin-bottom: 0; }

/* ------------------------------------------------------------------- grid */

.wiki-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: stretch;
    gap: 1rem;
}

/* ------------------------------------------------------------------- card */

.wiki-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.75rem;
    /* ~4% lift over the #0a0f1e page so the card reads as an object */
    background: #161c2e;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    text-decoration: none;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

.wiki-card.is-hidden { display: none; }

.wiki-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, 0.55);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 212, 255, .12);
}

.wiki-card:focus-visible {
    outline: 2px solid var(--color-primary, #00d4ff);
    outline-offset: 3px;
}

.wiki-card:hover .wiki-card__title { color: #67e8f9; }

/* --------------------------------------------------------------- thumbnail */

.wiki-card__thumb {
    position: relative;
    display: block;
    /* 2.5:1. Hero uploads are stored at whatever size they arrive and cropped by
       object-fit, so 1600x640 is the size to author them at. */
    aspect-ratio: 1600 / 640;
    overflow: hidden;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

.wiki-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top scrim. 8 of the 18 guides carry a real screenshot, and the chip sits
   exactly where one can be brightest. Painted above the image (z-index 1) and
   below the chips (z-index 2). */
.wiki-card__thumb::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 45%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Sits UNDER the image; revealed when there is no hero, or when onerror drops a
   hero whose file has gone missing from disk. */
.wiki-card__thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.42);
}

.wiki-card__thumb-fallback i { font-size: 2.25rem; opacity: .5; }

/* Per-category tint. A category with no rule here keeps the neutral slate
   default above, which is why a new content folder cannot break the grid. */
.wiki-card__thumb--bunkers       { background: linear-gradient(135deg, #334155, #0f172a); }
.wiki-card__thumb--base-building { background: linear-gradient(135deg, #78350f, #1c1207); }
.wiki-card__thumb--crafting      { background: linear-gradient(135deg, #7c2d12, #1a0b05); }
.wiki-card__thumb--events         { background: linear-gradient(135deg, #7e22ce, #24073f); }
.wiki-card__thumb--loot          { background: linear-gradient(135deg, #854d0e, #241505); }
.wiki-card__thumb--maps          { background: linear-gradient(135deg, #155e75, #06202b); }
.wiki-card__thumb--namalsk       { background: linear-gradient(135deg, #1e4d6b, #071822); }
.wiki-card__thumb--player        { background: linear-gradient(135deg, #065f46, #04211a); }
.wiki-card__thumb--quests        { background: linear-gradient(135deg, #5b21b6, #1e1035); }
.wiki-card__thumb--travel        { background: linear-gradient(135deg, #075985, #05202f); }
.wiki-card__thumb--vehicles      { background: linear-gradient(135deg, #9f1239, #2b0512); }

/* ------------------------------------------------------------------- body */

.wiki-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 1.15rem 1.15rem;
}

.wiki-card__chips {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;                      /* above both the image and the scrim */
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    max-width: calc(100% - 1rem);    /* a long category can never overflow */
}

.wiki-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    /* Solid dark base rather than a tint: these now sit over photographs, where
       a 10%-opacity wash disappeared entirely. */
    background: rgba(2, 6, 16, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.wiki-chip__icon { font-size: .9em; opacity: .9; }

/* Colour comes from the text and border; the dark base above carries contrast. */
.wiki-chip--category { color: #67e8f9; border-color: rgba(0, 212, 255, .45); }
.wiki-chip--map      { color: #5eead4; border-color: rgba(45, 212, 191, .45); }
.wiki-chip--draft    { color: #fcd34d; border-color: rgba(245, 158, 11, .50); }
.wiki-chip--recent   { color: #86efac; border-color: rgba(34, 197, 94, .45); }

.wiki-card__title {
    margin: 0;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color .2s;
}

/* Two lines, hard stop. The full sentence is the subtitle on the guide page. */
/* Feature cards only: linked-item count and "since" date under the summary. */
.wiki-card__meta {
    margin: .15rem 0 0;
    color: #7c8899;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

.wiki-card__desc {
    margin: 0;
    color: #b6c0cd;            /* clears WCAG AA on the card surface */
    font-size: 0.875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 640px) {
    .wiki-panel { padding: 0.75rem; gap: 0.625rem; }

    /* Search keeps the full width of the panel, on its own line above the pills. */
    .wiki-panel__search-row { flex-wrap: wrap; }
    .wiki-search { flex: 1 1 100%; }
    .wiki-clear-all { margin-left: auto; }

    /* Both pill rows become a single horizontally scrolling line rather than
       stacking three rows of wrapped pills above the first card. */
    .wiki-filter-line { align-items: center; gap: 0.5rem; }
    .wiki-filter-line__label { flex-basis: 3.75rem; padding-top: 0; }

    .wiki-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 1px;
    }

    .wiki-pills::-webkit-scrollbar { display: none; }

    .wiki-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .wiki-card, .wiki-card__title, .wiki-pill,
    .wiki-search__clear, .wiki-empty__btn { transition: none; }
    .wiki-card:hover { transform: none; }
}

/* Tighter page header on the guides index only — the shared .wiki-page-header in
   wiki-unified.css is a touch airy, and the sticky panel below it has to leave
   the first row of cards above the fold on a 1080p screen. */

/* ------------------------------------------------------- page header & count */

/* Tighter than the wiki-unified.css default: these pages carry a sticky filter
   panel between the header and the first card, and the first row still has to
   clear a 1080p fold. */
.wiki-page-header {
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.wiki-page-header h1 { margin-bottom: 0.1rem; }
.wiki-page-header p { font-size: 0.875rem; }

/* The live "Showing N of M" count that replaces a static total in the subtitle. */
.wiki-result-summary { color: #cbd5e1; font-weight: 500; }