/* Wiki: /wiki (the almanac main page, categories, search, A-Z, recent changes), /wiki/<page>,
   /wiki/edit, /wiki/history, /wiki/items (wi-).
   An encyclopedia in the game's window language: a side navigation column, page tabs over the
   article, a display-font title, contents, an infobox on the right, a category bar at the foot.
   Colours come only from the helios.css tokens (var(--hx-*)), so the light theme follows. */

/* ---------------------------------------------------------------- item icons (36 px sprite cells) */
.wk-icon {
    --k: 1;
    display: inline-block;
    flex-shrink: 0;
    width: calc(36px * var(--k));
    height: calc(36px * var(--k));
    background: url(/resources/gamedata/Icon.png) no-repeat;
    background-size: calc(1024px * var(--k)) calc(1024px * var(--k));
    background-position: calc(var(--x, 0px) * var(--k)) calc(var(--y, 0px) * var(--k));
    border: 1px solid var(--hx-edge-faint);
    border-radius: 3px;
    box-sizing: content-box;
}
.wk-icon--s2 { background-image: url(/resources/gamedata/Icon2.png); }
.wk-icon--sm { --k: .62; }
.wk-icon--lg { --k: 1.6; border-color: var(--hx-edge-soft); }

/* ---------------------------------------------------------------- frame: side navigation + main column */
.wk-shell { padding: clamp(14px, 2.2vw, 26px) 0 clamp(36px, 5vw, 64px); }
.wk-frame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.wk-main { min-width: 0; }

.wk-nav {
    display: none;
    padding: 14px 10px 16px;
    background: var(--hx-card);
    border: 1px solid var(--hx-edge-faint);
    clip-path: var(--hx-shape-sm);
    font-size: .92rem;
}
.wk-frame.is-nav-open .wk-nav { display: block; }
@media (min-width: 992px) {
    .wk-frame:not(.is-compact) { grid-template-columns: 236px minmax(0, 1fr); gap: 22px; }
    .wk-frame:not(.is-compact) .wk-nav,
    .wk-frame.is-compact.is-nav-open .wk-nav {
        display: block;
        position: sticky;
        top: calc(var(--hx-topbar-h) + 14px);
        max-height: calc(100vh - var(--hx-topbar-h) - 28px);
        overflow: auto;
        scrollbar-width: thin;
    }
    .wk-frame:not(.is-compact) .wk-navtoggle { display: none; }
    .wk-frame.is-compact.is-nav-open { grid-template-columns: 236px minmax(0, 1fr); gap: 22px; }
}
.wk-nav__brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 12px; color: var(--hx-ice); border-bottom: 1px solid var(--hx-line); }
.wk-nav__brand:hover { color: var(--hx-ice); }
.wk-nav__brand b { display: block; font-family: var(--hx-font-display); font-size: 1rem; line-height: 1.2; }
.wk-nav__brand small { display: block; color: var(--hx-text-faint); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.wk-nav__seal { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; color: var(--hx-gold); background: var(--hx-inset); border: 1px solid var(--hx-gold-deep); clip-path: var(--hx-shape-sm); font-size: 1.05rem; }
.wk-nav__search { display: flex; margin: 12px 4px 4px; background: var(--hx-field-bg); border: 1px solid var(--hx-field-edge); clip-path: var(--hx-shape-sm); }
.wk-nav__search:focus-within { border-color: var(--hx-teal); }
.wk-nav__search input { flex: 1; min-width: 0; min-height: 36px; padding: 4px 10px; border: 0; background: none; color: var(--hx-ice); font: inherit; font-size: .9rem; outline: none; }
.wk-nav__search input::placeholder { color: var(--hx-text-faint); }
.wk-nav__search button { width: 38px; border: 0; background: none; color: var(--hx-accent); cursor: pointer; }
.wk-nav__group { margin-top: 14px; }
.wk-nav__label { margin: 0 6px 4px; color: var(--hx-text-faint); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wk-nav__link { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 8px; color: var(--hx-text-dim); border-radius: 3px; line-height: 1.3; }
.wk-nav__link i { width: 16px; text-align: center; color: var(--hx-accent); opacity: .85; font-size: .88em; }
.wk-nav__link span { min-width: 0; flex: 1; }
.wk-nav__link small { color: var(--hx-text-faint); font-size: .76rem; font-variant-numeric: tabular-nums; }
.wk-nav__link:hover { color: var(--hx-ice); background: var(--hx-inset); }
.wk-nav__link.is-on { color: var(--hx-ice); background: rgba(var(--hx-teal-rgb), .1); font-weight: 600; }
.wk-nav__link.is-on::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; background: var(--hx-teal); }

.wk-topline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; min-height: 32px; }
.wk-navtoggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--hx-chip);
    border: 1px solid var(--hx-edge-soft);
    clip-path: var(--hx-shape-sm);
    color: var(--hx-text);
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
}
.wk-navtoggle i { color: var(--hx-accent); }
.wk-navtoggle[aria-expanded="true"] { border-color: var(--hx-teal); color: var(--hx-ice); }
.wk-crumbs { min-width: 0; }
.wk-crumbs span { min-width: 0; overflow-wrap: anywhere; }

/* Read / Edit / History */
.wk-tabbar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; border-bottom: 1px solid var(--hx-edge-soft); }
.wk-tabs { display: flex; gap: 2px; margin-bottom: -1px; }
.wk-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px 9px;
    color: var(--hx-text-dim);
    font-size: .9rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-bottom: 0;
}
.wk-tab i { font-size: .85em; color: var(--hx-text-faint); }
.wk-tab:hover { color: var(--hx-ice); background: var(--hx-inset); }
.wk-tab.is-on { color: var(--hx-ice); background: var(--hx-card); border-color: var(--hx-edge-soft); box-shadow: inset 0 2px 0 var(--hx-teal); }
.wk-tab.is-on i { color: var(--hx-accent); }
.wk-tabbar__tools { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; font-size: .86rem; }
.wk-report { color: var(--hx-text-faint); font-size: .86rem; white-space: nowrap; }
.wk-report i { margin-right: 4px; }
.wk-report:hover { color: var(--hx-bad-text); }

/* ---------------------------------------------------------------- boxes (portal panels) */
.wk-box {
    display: block;
    background: var(--hx-card);
    border: 1px solid var(--hx-edge-faint);
    clip-path: var(--hx-shape-sm);
    color: var(--hx-text);
}
a.wk-box:hover { color: var(--hx-text); border-color: var(--hx-edge-soft); background: var(--hx-card-hover); }
.wk-box__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 16px;
    background: var(--hx-strip);
    border-bottom: 1px solid var(--hx-line);
    color: var(--hx-ice);
    font-family: var(--hx-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.wk-box__title > i { color: var(--hx-gold); font-size: .9em; }
.wk-box__more { margin-left: auto; font-family: var(--hx-font); font-size: .84rem; font-weight: 600; }
.wk-box__body { margin: 0; padding: 14px 16px; }
.wk-box__body > p:last-child { margin-bottom: 0; }
.wk-box__foot { display: block; padding: 0 16px 14px; }
.wk-box > .hx-empty, .wk-box > .hx-table-wrap { margin: 0; }
.wk-more-link { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--hx-accent); }
.wk-more-link:hover { color: var(--hx-teal-hot); }
.wk-section-title { margin: 8px 0 12px; font-family: var(--hx-font-display); font-size: 1.25rem; color: var(--hx-ice); }

/* ---------------------------------------------------------------- the almanac main page */
.wk-mast {
    position: relative;
    margin: 14px 0 18px;
    padding: clamp(18px, 3vw, 30px);
    background:
        radial-gradient(ellipse at 15% 0%, rgba(var(--hx-teal-rgb), .14), transparent 60%),
        linear-gradient(180deg, var(--hx-head-top), var(--hx-head-bottom));
    border: 1px solid var(--hx-edge-soft);
    clip-path: var(--hx-shape);
}
.wk-mast::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--hx-gold-deep), var(--hx-teal), transparent); opacity: .7; }
.wk-mast__top { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 22px); margin-bottom: 18px; }
.wk-mast__crest { flex-shrink: 0; width: clamp(58px, 9vw, 88px); height: auto; filter: drop-shadow(0 4px 10px rgba(var(--hx-shadow-rgb), .4)); }
.wk-mast__kicker { margin: 0 0 2px; color: var(--hx-gold); font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.wk-mast__title { margin: 0; font-family: var(--hx-font-display); font-size: clamp(1.55rem, 3.6vw, 2.5rem); font-weight: 700; line-height: 1.15; color: var(--hx-ice); }
.wk-mast__lead { margin: 6px 0 0; max-width: 70ch; color: var(--hx-text-dim); }
.wk-mast__lead b { color: var(--hx-ice); }
.wk-mast__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: .88rem; }
.wk-mast__quick span { color: var(--hx-text-faint); font-weight: 600; margin-right: 2px; }
.wk-mast__quick a { padding: 3px 10px; background: var(--hx-chip); border: 1px solid var(--hx-edge-faint); clip-path: var(--hx-shape-sm); color: var(--hx-text); }
.wk-mast__quick a:hover { border-color: var(--hx-teal); color: var(--hx-ice); }

.wk-search {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 6px 6px 16px;
    background: var(--hx-field-bg);
    border: 1px solid var(--hx-field-edge);
    clip-path: var(--hx-shape-sm);
}
.wk-search:focus-within { border-color: var(--hx-teal); box-shadow: inset 0 0 14px rgba(var(--hx-teal-rgb), .12); }
.wk-search > i { color: var(--hx-accent); }
.wk-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; color: var(--hx-ice); font: inherit; font-size: 1.02rem; outline: none; }
.wk-search input::placeholder { color: var(--hx-text-faint); }
.wk-search--big input { min-height: 50px; font-size: 1.08rem; }

.wk-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1200px) { .wk-home { grid-template-columns: minmax(0, 1fr) 320px; } }
.wk-home__main, .wk-home__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.wk-box--feature .wk-box__body { padding: 16px 20px 18px; }
.wk-feature__cat { margin: 0 0 4px; color: var(--hx-text-faint); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wk-feature__cat i { color: var(--hx-accent); }
.wk-feature__title { margin: 0 0 6px; font-family: var(--hx-font-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.wk-feature__title a { color: var(--hx-ice); }
.wk-feature__title a:hover { color: var(--hx-accent); }
.wk-feature__lead { margin: 0 0 8px; color: var(--hx-text); font-weight: 600; }
.wk-feature__text { margin: 0 0 10px; color: var(--hx-text-dim); line-height: 1.7; }

.wk-facts { list-style: none; padding: 6px 16px 10px; }
.wk-facts li { position: relative; padding: 8px 0 8px 18px; border-bottom: 1px dashed var(--hx-line); line-height: 1.6; }
.wk-facts li:last-child { border-bottom: 0; }
.wk-facts li::before { content: ''; position: absolute; left: 2px; top: 1.05em; width: 6px; height: 6px; background: var(--hx-gold); transform: rotate(45deg); }
.wk-facts a { white-space: nowrap; font-weight: 600; font-size: .9rem; }

.wk-portals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.wk-portal { display: flex; flex-direction: column; padding: 14px 16px; background: var(--hx-card); border: 1px solid var(--hx-edge-faint); clip-path: var(--hx-shape-sm); }
.wk-portal:hover { border-color: var(--hx-edge-soft); }
.wk-portal__head { display: flex; align-items: center; gap: 12px; color: var(--hx-ice); }
.wk-portal__head:hover { color: var(--hx-accent); }
.wk-portal__head b { display: block; font-family: var(--hx-font-display); font-size: 1.02rem; line-height: 1.25; }
.wk-portal__head small { color: var(--hx-text-faint); font-size: .78rem; }
.wk-portal__icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; color: var(--hx-accent); background: var(--hx-inset); border: 1px solid var(--hx-edge-faint); clip-path: var(--hx-shape-sm); font-size: 1.15rem; }
.wk-portal p { margin: 10px 0 8px; color: var(--hx-text-dim); font-size: .88rem; }
.wk-portal ul { margin: 0 0 8px; padding: 0; list-style: none; font-size: .9rem; }
.wk-portal li { position: relative; padding: 3px 0 3px 14px; }
.wk-portal li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 4px; height: 4px; background: var(--hx-text-faint); }
.wk-portal li a { color: var(--hx-text); }
.wk-portal li a:hover { color: var(--hx-accent); }
.wk-portal .wk-more-link { margin-top: auto; font-size: .84rem; }

.wk-recent { list-style: none; padding: 6px 16px 10px; }
.wk-recent li { padding: 7px 0; border-bottom: 1px solid var(--hx-line); }
.wk-recent li:last-child { border-bottom: 0; }
.wk-recent a { display: block; color: var(--hx-text); font-weight: 600; }
.wk-recent a:hover { color: var(--hx-accent); }
.wk-recent small { color: var(--hx-text-faint); font-size: .78rem; }

.wk-itemdb p { color: var(--hx-text-dim); font-size: .9rem; margin-bottom: 10px; }
.wk-itemdb__groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.wk-itemdb__groups span { display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--hx-inset); border: 1px solid var(--hx-edge-faint); font-size: .85rem; }
.wk-itemdb__groups i { color: var(--hx-accent); width: 16px; text-align: center; }
.wk-itemdb__groups small { margin-left: auto; color: var(--hx-text-faint); }

/* A-Z index */
.wk-box--index { margin-top: 18px; }
.wk-letters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.wk-letters a, .wk-letters span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; font-weight: 700; font-size: .86rem; border: 1px solid var(--hx-edge-faint); }
.wk-letters a { color: var(--hx-ice); background: var(--hx-inset); }
.wk-letters a:hover { border-color: var(--hx-teal); color: var(--hx-accent); }
.wk-letters span { color: var(--hx-text-faint); opacity: .45; }
.wk-index { columns: 4 200px; column-gap: 26px; }
.wk-index--wide { columns: 3 240px; }
.wk-index__group { break-inside: avoid; margin-bottom: 14px; scroll-margin-top: calc(var(--hx-topbar-h) + 16px); }
.wk-index__group h3 { margin: 0 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--hx-line); color: var(--hx-gold); font-family: var(--hx-font-display); font-size: 1.05rem; }
.wk-index__group ul { margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.wk-index__group li { padding: 2px 0; }
.wk-index__group a { color: var(--hx-text); }
.wk-index__group a:hover { color: var(--hx-accent); }

/* category, search, changes */
.wk-catlist { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 26px; }
@media (min-width: 900px) { .wk-catlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wk-catlist li { padding: 9px 0; border-bottom: 1px solid var(--hx-line); }
.wk-catlist a { font-weight: 600; color: var(--hx-ice); }
.wk-catlist a:hover { color: var(--hx-accent); }
.wk-catlist span { display: block; color: var(--hx-text-dim); font-size: .86rem; }
.wk-pin { color: var(--hx-gold); font-size: .8em; }
.wk-results { margin: 0; padding: 6px 18px 8px; list-style: none; }
.wk-results li { padding: 12px 0; border-bottom: 1px solid var(--hx-line); }
.wk-results li:last-child { border-bottom: 0; }
.wk-results__title { font-family: var(--hx-font-display); font-size: 1.08rem; font-weight: 700; color: var(--hx-accent); }
.wk-results p { margin: 3px 0; color: var(--hx-text); font-size: .93rem; }
.wk-results small { color: var(--hx-text-faint); font-size: .8rem; overflow-wrap: anywhere; }
.wk-results mark, .wk-body mark { padding: 0 2px; background: rgba(var(--hx-teal-rgb), .18); color: var(--hx-ice); }
.wk-itemchips { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-catchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; background: var(--hx-chip); border: 1px solid var(--hx-edge-faint); color: var(--hx-text); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.wk-catchip i { color: var(--hx-accent); }
.wk-catchip:hover { border-color: var(--hx-teal); color: var(--hx-ice); }
.wk-changes td { vertical-align: middle; }
.wk-changes td a:not(.wk-catchip) { font-weight: 600; }

/* ---------------------------------------------------------------- article */
.wk-head { margin: 18px 0 14px; }
.wk-head__from { margin: 0 0 4px; color: var(--hx-text-faint); font-size: .8rem; font-style: italic; }
.wk-head__from i { color: var(--hx-gold); font-style: normal; margin-right: 3px; }
.wk-head__title {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hx-edge-soft);
    font-family: var(--hx-font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.35rem);
    font-weight: 700;
    line-height: 1.18;
    color: var(--hx-ice);
    overflow-wrap: anywhere;
}
.wk-head__lead { margin: 10px 0 0; max-width: 75ch; color: var(--hx-text-dim); font-size: 1.04rem; }
.wk-head--cat { display: flex; align-items: flex-start; gap: 16px; }
.wk-head--cat > div { min-width: 0; flex: 1; }
.wk-head__icon { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; margin-top: 4px; color: var(--hx-gold); background: var(--hx-inset); border: 1px solid var(--hx-gold-deep); clip-path: var(--hx-shape-sm); font-size: 1.5rem; }
.wk-head--tool .wk-head__title { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }

.wk-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 26px; align-items: start; }
@media (min-width: 1400px) {
    .wk-doc.has-toc, .wk-doc { grid-template-columns: minmax(0, 1fr) 250px; }
    .wk-toc--inline { display: none; }
    .wk-rail { position: sticky; top: calc(var(--hx-topbar-h) + 14px); max-height: calc(100vh - var(--hx-topbar-h) - 28px); overflow: auto; scrollbar-width: thin; padding-top: 18px; }
}
@media (max-width: 1399.98px) { .wk-toc--rail { display: none; } }
.wk-article { min-width: 0; }
.wk-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.wk-toc details { background: var(--hx-card); border: 1px solid var(--hx-edge-faint); clip-path: var(--hx-shape-sm); }
.wk-toc summary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; list-style: none; color: var(--hx-ice); font-family: var(--hx-font-display); font-weight: 700; font-size: .95rem; background: var(--hx-strip); }
.wk-toc summary::-webkit-details-marker { display: none; }
.wk-toc summary i { color: var(--hx-gold); font-size: .85em; }
.wk-toc summary::after { content: '\f078'; font: var(--fa-font-solid); font-size: .7em; margin-left: auto; color: var(--hx-text-faint); transition: transform .2s var(--hx-ease); }
.wk-toc details[open] summary::after { transform: rotate(180deg); }
.wk-toc details[open] summary { border-bottom: 1px solid var(--hx-line); }
.wk-toc ol { margin: 0; padding: 10px 14px 12px; list-style: none; font-size: .9rem; }
.wk-toc li { margin: 2px 0; }
.wk-toc li.is-h3 { margin-left: 18px; font-size: .86rem; }
.wk-toc a { display: flex; gap: 8px; color: var(--hx-text-dim); line-height: 1.4; padding: 1px 0; }
.wk-toc a:hover { color: var(--hx-accent); }
.wk-toc__n { flex-shrink: 0; min-width: 1.6em; color: var(--hx-text-faint); font-variant-numeric: tabular-nums; }
.wk-toc--inline { margin: 0 0 18px; max-width: 420px; }
.wk-morelist { padding: 10px 16px 12px 32px; font-size: .9rem; }
.wk-morelist li { margin: 3px 0; }
.wk-morelist a { color: var(--hx-text-dim); }
.wk-morelist a:hover { color: var(--hx-accent); }

.wk-catbar { clear: both; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; margin-top: 28px; padding: 12px 14px; background: var(--hx-inset); border: 1px solid var(--hx-edge-faint); font-size: .86rem; }
.wk-catbar__cats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wk-catbar__cats > span { color: var(--hx-text-faint); font-weight: 700; }
.wk-catbar__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; color: var(--hx-text-faint); }
.wk-catbar__meta i { margin-right: 3px; }

/* the article text (also the editor's preview and an old revision) */
.wk-body { font-size: 1.02rem; line-height: 1.75; color: var(--hx-text); overflow-wrap: anywhere; }
.wk-body::after { content: ''; display: table; clear: both; }
.wk-body > :first-child { margin-top: 0; }
.wk-body > p, .wk-body > ul, .wk-body > ol, .wk-body > blockquote { max-width: 92ch; }
.wk-body h2, .wk-body h3, .wk-body h4, .wk-body h5 { position: relative; color: var(--hx-ice); scroll-margin-top: calc(var(--hx-topbar-h) + 16px); }
.wk-body h2 { overflow: hidden; margin: 1.9em 0 .65em; padding-bottom: 6px; font-family: var(--hx-font-display); font-size: 1.5rem; border-bottom: 1px solid var(--hx-edge-soft); }
.wk-body h3 { margin: 1.5em 0 .5em; font-family: var(--hx-font-display); font-size: 1.2rem; color: var(--hx-accent); }
.wk-body h4 { margin: 1.3em 0 .4em; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .06em; }
.wk-body h5 { margin: 1.2em 0 .4em; font-size: .96rem; color: var(--hx-text-dim); }
.wk-anchor { margin-left: 8px; font-family: var(--hx-font); font-size: .7em; color: var(--hx-text-faint); opacity: 0; text-decoration: none; }
.wk-body h2:hover .wk-anchor, .wk-body h3:hover .wk-anchor, .wk-body h4:hover .wk-anchor, .wk-anchor:focus { opacity: 1; }
.wk-body p { margin: 0 0 1em; }
.wk-body ul, .wk-body ol { margin: 0 0 1em; padding-left: 1.4rem; }
.wk-body li { margin: .25em 0; }
.wk-body li > ul, .wk-body li > ol { margin: .25em 0 0; }
.wk-body ul li::marker { color: var(--hx-accent); }
.wk-body a { color: var(--hx-accent); text-decoration: underline; text-decoration-color: rgba(var(--hx-teal-rgb), .35); text-underline-offset: 3px; }
.wk-body a:hover { color: var(--hx-teal-hot); text-decoration-color: currentColor; }
.wk-body a.wk-ext::after { content: '\f35d'; font: var(--fa-font-solid); font-size: .62em; margin-left: 4px; vertical-align: 2px; opacity: .7; }
.wk-body a.wk-link.is-missing, .wk-body span.wk-link.is-missing { color: var(--hx-bad-text); text-decoration-color: currentColor; text-decoration-style: dotted; }
.wk-body strong { color: var(--hx-ice); }
.wk-body del { color: var(--hx-text-faint); }
.wk-body hr { margin: 2em 0; border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hx-edge), transparent); opacity: 1; }
.wk-body blockquote { margin: 0 0 1em; padding: 10px 16px; border-left: 3px solid var(--hx-edge-soft); background: var(--hx-inset); color: var(--hx-text-dim); }
.wk-body blockquote > :last-child { margin-bottom: 0; }
.wk-body code { padding: 1px 6px; background: var(--hx-inset); border: 1px solid var(--hx-edge-faint); border-radius: 3px; color: var(--hx-accent); font-size: .88em; }
.wk-code { margin: 0 0 1em; padding: 14px 16px; background: var(--hx-inset); border: 1px solid var(--hx-edge-faint); clip-path: var(--hx-shape-sm); overflow-x: auto; }
.wk-code code { padding: 0; border: 0; background: none; color: var(--hx-text); font-size: .86rem; white-space: pre; }
.wk-body .wk-img { display: block; max-width: 100%; height: auto; margin: 0 0 1em; border: 1px solid var(--hx-edge-faint); clip-path: var(--hx-shape-sm); }
.wk-body p > .wk-img:only-child { margin: 0 auto; }

/* tables: a framed grid, zebra rows, numbers kept whole */
.wk-body .hx-table-wrap { margin: 0 0 1.2em; border: 1px solid var(--hx-edge-faint); background: var(--hx-card); }
.wk-table { margin: 0; font-size: .93rem; line-height: 1.5; overflow-wrap: normal; word-break: normal; }
.wk-table td, .wk-table th { min-width: 3.5em; }
.table.wk-table > thead th { padding: 9px 12px; font-size: .72rem; color: var(--hx-ice) !important; white-space: normal; }
.table.wk-table > tbody td { padding: 8px 12px; border-bottom-color: var(--hx-line); vertical-align: top; }
.table.wk-table > tbody tr:nth-child(even) > td { background-color: rgba(var(--hx-teal-rgb), .045); }
.table.wk-table > tbody tr:hover > td { background-color: rgba(var(--hx-teal-rgb), .09); }
.table.wk-table > tbody tr:last-child > td { border-bottom: 0; }

.wk-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 8px 1px 3px;
    vertical-align: middle;
    background: var(--hx-inset);
    border: 1px solid var(--hx-edge-faint);
    border-radius: 4px;
    color: var(--hx-gold);
    font-weight: 600;
    line-height: 1.5;
}
.wk-body a.wk-item, .wk-itemchips a.wk-item { text-decoration: none; color: var(--hx-gold); }
.wk-item:hover { border-color: var(--hx-gold-deep); color: var(--hx-gold); background: var(--hx-card-hover); }
.wk-item .wk-icon { border: 0; }

.wk-callout { margin: 0 0 1em; padding: 12px 16px; background: rgba(var(--hx-teal-rgb), .07); border: 1px solid var(--hx-edge-faint); border-left: 3px solid var(--hx-teal); clip-path: var(--hx-shape-sm); }
.wk-callout > :last-child { margin-bottom: 0; }
.wk-callout__title { margin-bottom: 6px; font-weight: 700; color: var(--hx-accent); }
.wk-callout--tip { background: color-mix(in srgb, var(--hx-good) 8%, transparent); border-left-color: var(--hx-good); }
.wk-callout--tip .wk-callout__title { color: var(--hx-good-text); }
.wk-callout--warning { background: color-mix(in srgb, var(--hx-warn) 9%, transparent); border-left-color: var(--hx-warn); }
.wk-callout--warning .wk-callout__title { color: var(--hx-warn-text); }
.wk-callout--danger { background: color-mix(in srgb, var(--hx-bad) 8%, transparent); border-left-color: var(--hx-bad); }
.wk-callout--danger .wk-callout__title { color: var(--hx-bad-text); }

/* the map view (:::map, WikiMarkup::mapView): the in-game map picture with pins by kind, a legend that
   shows / hides a kind (wiki.js), and every pin as a list. The picture keeps the game's own colours. */
.wk-map { clear: both; margin: 0 0 20px; padding: 0; background: var(--hx-card); border: 1px solid var(--hx-edge-soft); clip-path: var(--hx-shape-sm); }
.wk-map__title { padding: 10px 14px; font-family: var(--hx-font-display); font-weight: 700; color: var(--hx-ice); background: var(--hx-strip); border-bottom: 1px solid var(--hx-edge-soft); box-shadow: inset 0 2px 0 var(--hx-gold-deep); }
.wk-map__title i { color: var(--hx-gold); margin-right: 4px; }
.wk-map__viewport { margin: 12px; overflow: auto; overscroll-behavior: contain; }
.wk-map__frame { position: relative; width: min(100%, 620px); margin: 0 auto; background: radial-gradient(circle, color-mix(in srgb, var(--hx-teal) 8%, transparent), transparent 70%); }
/* Zoom: the picture at twice the width inside a scrolling box (the town crowds read apart) */
.wk-map.is-zoomed .wk-map__viewport { max-height: min(78vh, 900px); border: 1px solid var(--hx-edge-faint); background: var(--hx-inset); }
.wk-map.is-zoomed .wk-map__frame { width: max(200%, 1024px); max-width: none; }
.wk-map__zoom { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: .78rem; font-weight: 700; color: var(--hx-accent); background: var(--hx-inset); border: 1px solid var(--hx-edge-soft); clip-path: var(--hx-shape-sm); cursor: pointer; }
.wk-map__zoom[aria-pressed="true"] { color: var(--hx-ice); border-color: var(--hx-edge); }
.wk-map__pin.is-npc { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; font-size: .45rem; }
.wk-map__frame > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(0, 0, 0, .35)); }
.wk-map__pin {
    --pin: var(--hx-teal);
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    font-size: .58rem;
    color: var(--hx-void);
    background: var(--pin);
    border: 1px solid color-mix(in srgb, var(--hx-void) 70%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pin) 35%, transparent), 0 1px 4px rgba(0, 0, 0, .5);
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s;
}
.wk-map__pin.is-monster { --pin: color-mix(in srgb, var(--hx-hp) 80%, var(--hx-text)); width: 14px; height: 14px; margin: -7px 0 0 -7px; font-size: .48rem; }
.wk-map__pin.is-elite { --pin: var(--hx-elite); }
.wk-map__pin.is-boss { --pin: var(--hx-boss); width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: .68rem; }
.wk-map__pin.is-npc { --pin: var(--hx-good); }
.wk-map__pin.is-quest { --pin: var(--hx-gold); }
.wk-map__pin.is-portal { --pin: var(--hx-mp); width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.wk-map__pin.is-poi { --pin: var(--hx-warn); }
.wk-map__pin:hover, .wk-map__pin:focus-visible { z-index: 3; transform: scale(1.35); outline: none; }
.wk-map__pin[hidden] { display: none; }
.wk-map__tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    padding: 4px 8px;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--hx-ice);
    background: var(--hx-popup, var(--hx-card));
    border: 1px solid var(--hx-edge);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
}
.wk-map__pin:hover .wk-map__tip, .wk-map__pin:focus-visible .wk-map__tip { opacity: 1; }
.wk-map__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 12px 12px; }
.wk-map__key { --pin: var(--hx-teal); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: .78rem; font-weight: 700; color: var(--hx-text); background: var(--hx-inset); border: 1px solid color-mix(in srgb, var(--pin) 55%, transparent); clip-path: var(--hx-shape-sm); cursor: pointer; }
.wk-map__key i { color: var(--pin); }
.wk-map__key b { color: var(--hx-text-faint); font-weight: 600; }
.wk-map__key[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.wk-map__key.is-monster { --pin: color-mix(in srgb, var(--hx-hp) 80%, var(--hx-text)); }
.wk-map__key.is-elite { --pin: var(--hx-elite); }
.wk-map__key.is-boss { --pin: var(--hx-boss); }
.wk-map__key.is-npc { --pin: var(--hx-good); }
.wk-map__key.is-quest { --pin: var(--hx-gold); }
.wk-map__key.is-portal { --pin: var(--hx-mp); }
.wk-map__key.is-poi { --pin: var(--hx-warn); }
.wk-map__list { padding: 0 14px 12px; font-size: .86rem; }
.wk-map__list summary { cursor: pointer; color: var(--hx-accent); font-weight: 700; }
.wk-map__list ul { columns: 2 220px; margin: 8px 0 0; padding-left: 4px; list-style: none; }
.wk-map__list li { break-inside: avoid; padding: 2px 0; color: var(--hx-text-dim); }
.wk-map__list li i { width: 16px; text-align: center; color: var(--hx-text-faint); }
.wk-map__list li[hidden] { display: none; }
.wk-map__missing { color: var(--hx-text-faint); font-style: italic; }
@media (max-width: 575.98px) {
    .wk-map__pin { width: 12px; height: 12px; margin: -6px 0 0 -6px; font-size: 0; }
    .wk-map__pin.is-boss, .wk-map__pin.is-portal { width: 16px; height: 16px; margin: -8px 0 0 -8px; font-size: .5rem; }
}

/* the effect preview (:::glow, WikiMarkup::glowView): the game's effect texture (an atlas: the ring glow on the left
   ~70 %, flares / sparks / wings in the right column) drawn additively ("screen": black is see-through) around an
   item icon. The stage stays dark in both themes (--wk-stage-*), as the game's effects are made for it. */
.wk-glow { --wk-stage-1: #0b1222; --wk-stage-2: #02050c; --wk-stage-ink: #e8f4ff; --wk-stage-gold: #ffcc60; --wk-stage-veil: rgba(2, 5, 12, .7); clear: both; margin: 0 0 20px; background: var(--hx-card); border: 1px solid var(--hx-edge-soft); clip-path: var(--hx-shape-sm); }
.wk-glow__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100% - 24px, 420px);
    aspect-ratio: 1;
    margin: 12px auto;
    overflow: hidden;
    background: radial-gradient(circle at 50% 55%, var(--wk-stage-1), var(--wk-stage-2) 75%);
    border: 1px solid var(--hx-edge-faint);
    clip-path: var(--hx-shape-sm);
    isolation: isolate;
}
.wk-glow__ring, .wk-glow__flare { position: absolute; pointer-events: none; background-image: var(--glow); background-repeat: no-repeat; mix-blend-mode: screen; image-rendering: auto; }
/* the ring: the atlas' left 70 % filling a circle */
.wk-glow__ring { inset: 10%; background-size: 152% 100%; background-position: 0 0; border-radius: 50%; filter: blur(.4px) saturate(1.3) brightness(1.5); animation: wk-glow-turn 14s linear infinite, wk-glow-pulse 2.6s ease-in-out infinite; }
/* the flares: the atlas' right column, rising on both sides (the right one mirrored) */
.wk-glow__flare { top: 6%; bottom: 6%; width: 26%; background-size: 385% 100%; background-position: 100% 0; filter: saturate(1.4) brightness(1.6); animation: wk-glow-rise 3.2s ease-in-out infinite; }
.wk-glow__flare.is-l { left: 6%; }
.wk-glow__flare.is-r { right: 6%; transform: scaleX(-1); animation-delay: -1.6s; }
.wk-glow__stage[data-n="0"] .wk-glow__ring, .wk-glow__stage[data-n="0"] .wk-glow__flare { opacity: 0; }
/* look hints: plume = the left part stands upright and only pulses; noflare = no side flares */
.wk-glow__stage[data-look~="plume"] .wk-glow__ring { inset: 4% 26% 14%; border-radius: 0; background-size: 215% 100%; animation: wk-glow-pulse 2.6s ease-in-out infinite; }
.wk-glow__stage[data-look~="noflare"] .wk-glow__flare { display: none; }
@keyframes wk-glow-turn { to { rotate: 360deg; } }
@keyframes wk-glow-pulse { 0%, 100% { opacity: .75; scale: .96; } 50% { opacity: 1; scale: 1.04; } }
@keyframes wk-glow-rise { 0%, 100% { opacity: .55; translate: 0 4%; } 50% { opacity: 1; translate: 0 -4%; } }
@media (prefers-reduced-motion: reduce) { .wk-glow__ring, .wk-glow__flare { animation: none; } }
.wk-glow__item { position: relative; z-index: 2; display: grid; place-items: center; text-decoration: none; filter: drop-shadow(0 0 14px rgba(0, 0, 0, .7)); }
.wk-glow__item .wk-icon { --k: 2.2; }
.wk-glow__badge { position: absolute; z-index: 2; left: 50%; bottom: 10px; translate: -50% 0; padding: 3px 12px; font-family: var(--hx-font-display); font-size: .8rem; letter-spacing: .06em; color: var(--wk-stage-ink); background: var(--wk-stage-veil); border: 1px solid color-mix(in srgb, var(--wk-stage-gold) 45%, transparent); }
.wk-glow__badge b { color: var(--wk-stage-gold); font-size: 1.05rem; }
.wk-glow__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 0 12px; }
.wk-glow__step { min-width: 36px; height: 34px; padding: 0 8px; font-weight: 700; color: var(--hx-text-dim); background: var(--hx-inset); border: 1px solid var(--hx-edge-faint); clip-path: var(--hx-shape-sm); cursor: pointer; }
.wk-glow__step:hover { color: var(--hx-ice); border-color: var(--hx-edge); }
.wk-glow__step[aria-pressed="true"] { color: var(--hx-void); background: linear-gradient(180deg, var(--hx-gold), var(--hx-gold-deep)); border-color: var(--hx-gold); }
.wk-glow__cap { min-height: 2.6em; margin: 10px 14px 12px; text-align: center; color: var(--hx-text-dim); font-size: .9rem; }

/* the infobox: a side card on the right of the text from tablet width */
.wk-infobox { margin: 0 0 16px; background: var(--hx-card); border: 1px solid var(--hx-edge-soft); clip-path: var(--hx-shape-sm); font-size: .9rem; line-height: 1.5; }
@media (min-width: 768px) { .wk-infobox { float: right; clear: right; width: 300px; margin: 0 0 16px 24px; } }
.wk-infobox__title { padding: 10px 14px; font-family: var(--hx-font-display); font-weight: 700; color: var(--hx-ice); text-align: center; background: var(--hx-strip); border-bottom: 1px solid var(--hx-edge-soft); box-shadow: inset 0 2px 0 var(--hx-gold-deep); }
.wk-infobox img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--hx-line); }
.wk-infobox dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.wk-infobox dt, .wk-infobox dd { padding: 6px 12px; border-bottom: 1px solid var(--hx-line); }
.wk-infobox dl > :nth-last-child(-n + 2) { border-bottom: 0; }
.wk-infobox dt { color: var(--hx-text-dim); font-weight: 600; background: var(--hx-inset); }
.wk-infobox dd { margin: 0; color: var(--hx-ice); text-align: right; }

/* ---------------------------------------------------------------- editor */
.wk-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1200px) { .wk-editor { grid-template-columns: minmax(0, 1fr) 300px; } }
.wk-frame.is-nav-open .wk-editor { grid-template-columns: minmax(0, 1fr); }
.wk-editor__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1200px) { .wk-editor__help { position: sticky; top: calc(var(--hx-topbar-h) + 16px); } }
.wk-fields { display: grid; gap: 0 16px; }
@media (min-width: 768px) { .wk-fields { grid-template-columns: 1fr 240px; } }
.wk-slug { display: flex; align-items: stretch; }
.wk-slug span { display: flex; align-items: center; padding: 0 10px; background: var(--hx-inset); border: 1px solid var(--hx-field-edge); border-right: 0; color: var(--hx-text-faint); font-size: .9rem; }
.wk-slug input { flex: 1; min-width: 0; }
.wk-slug input[readonly] { color: var(--hx-text-dim); }
.wk-pad .hx-tabs { margin: -6px 0 -7px -8px; border-bottom: 0; }
.wk-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--hx-line); background: var(--hx-inset); }
.wk-toolbar.is-off { opacity: .35; pointer-events: none; }
.wk-toolbar button { display: grid; place-items: center; width: 36px; height: 34px; border: 1px solid transparent; background: none; color: var(--hx-text-dim); border-radius: 3px; cursor: pointer; }
.wk-toolbar button:hover, .wk-toolbar button:focus-visible { color: var(--hx-accent); border-color: var(--hx-edge-faint); background: var(--hx-card); }
.wk-toolbar__sep { width: 1px; margin: 4px 6px; background: var(--hx-line); }
.wk-picker { padding: 10px; border-bottom: 1px solid var(--hx-line); background: var(--hx-inset); }
.wk-picker input { width: 100%; min-height: 40px; padding: 6px 12px; background: var(--hx-field-bg); border: 1px solid var(--hx-field-edge); color: var(--hx-ice); font: inherit; }
.wk-picker__list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow: auto; margin-top: 8px; color: var(--hx-text-faint); font-size: .88rem; }
.wk-picker__list button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: var(--hx-card); border: 1px solid var(--hx-edge-faint); color: var(--hx-text); font: inherit; font-size: .86rem; cursor: pointer; }
.wk-picker__list button:hover { border-color: var(--hx-gold-deep); color: var(--hx-gold); }
.wk-pane textarea {
    display: block;
    width: 100%;
    min-height: 60vh;
    padding: 16px 18px;
    border: 0;
    background: var(--hx-field-bg);
    color: var(--hx-ice);
    font: .94rem/1.65 ui-monospace, 'Cascadia Mono', Consolas, monospace;
    resize: vertical;
    outline: none;
    tab-size: 2;
}
.wk-preview { min-height: 60vh; padding: clamp(18px, 3vw, 32px); }
.wk-savebar { display: grid; gap: 14px; align-items: end; }
@media (min-width: 992px) { .wk-savebar { grid-template-columns: 1fr auto auto; } }
.wk-cheat dl { margin: 0 0 12px; font-size: .86rem; }
.wk-cheat dt { margin-top: 8px; }
.wk-cheat dt:first-child { margin-top: 0; }
.wk-cheat dd { margin: 2px 0 0; color: var(--hx-text-faint); }
.wk-cheat code { padding: 1px 5px; background: var(--hx-inset); border: 1px solid var(--hx-edge-faint); border-radius: 3px; color: var(--hx-accent); font-size: .85em; }

/* ---------------------------------------------------------------- history */
.wk-warnbox { border-color: color-mix(in srgb, var(--hx-warn) 40%, transparent); }
.wk-warnbox i { color: var(--hx-warn); }
.wk-danger .hx-panel__body { padding: 14px 18px; }
.wk-revs td { vertical-align: middle; }
.wk-revs tr.is-current td { background: color-mix(in srgb, var(--hx-good) 6%, transparent); }
.wk-revs form { margin: 0; }
.wk-size small.is-add { color: var(--hx-good-text); }
.wk-size small.is-del { color: var(--hx-bad-text); }
.wk-diffnote { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--hx-line); font-size: .9rem; }
.wk-diffnote del { color: var(--hx-bad-text); }
.wk-diffnote ins { color: var(--hx-good-text); text-decoration: none; }
.wk-diff { font-size: .86rem; overflow-x: auto; }
.wk-diff__line { display: flex; min-width: max-content; }
.wk-diff__line span { flex-shrink: 0; width: 28px; text-align: center; color: var(--hx-text-faint); user-select: none; }
.wk-diff__line code { padding: 1px 12px 1px 0; color: var(--hx-text-dim); white-space: pre; font-size: inherit; }
.wk-diff__line.is-add { background: color-mix(in srgb, var(--hx-good) 12%, transparent); }
.wk-diff__line.is-add span, .wk-diff__line.is-add code { color: var(--hx-good-text); }
.wk-diff__line.is-del { background: color-mix(in srgb, var(--hx-bad) 11%, transparent); }
.wk-diff__line.is-del span, .wk-diff__line.is-del code { color: var(--hx-bad-text); }
.wk-diff__gap { padding: 2px 28px; color: var(--hx-text-faint); background: var(--hx-inset); }

/* ---------------------------------------------------------------- item database */
.wk-cats--bar { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--hx-chip);
    border: 1px solid var(--hx-edge-faint);
    color: var(--hx-text-dim);
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    clip-path: var(--hx-shape-sm);
    cursor: pointer;
}
.wk-chip i { color: var(--hx-accent); }
.wk-chip small { color: var(--hx-text-faint); font-weight: 500; }
.wk-chip:hover { color: var(--hx-ice); border-color: var(--hx-edge-soft); }
.wk-chip.is-on { color: var(--hx-ice); border-color: var(--hx-teal); background: rgba(var(--hx-teal-rgb), .12); }
.wi-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1200px) { .wi-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.wi-pager { gap: 6px; }
.wi-pager .hx-btn { padding: 6px 10px; }
.wi-pager .hx-btn:disabled { opacity: .35; }
.wi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; transition: opacity .2s; }
.wi-grid.is-loading { opacity: .5; }
.wi-grid .hx-empty { grid-column: 1 / -1; }
.wi-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    text-align: left;
    background: var(--hx-inset);
    border: 1px solid var(--hx-edge-faint);
    clip-path: var(--hx-shape-sm);
    color: var(--hx-text);
    font: inherit;
    cursor: pointer;
}
.wi-card:hover { border-color: var(--hx-edge-soft); background: var(--hx-card-hover); }
.wi-card.is-on { border-color: var(--hx-gold-deep); background: color-mix(in srgb, var(--hx-gold) 10%, transparent); }
.wi-card__text { min-width: 0; }
.wi-card__text b { display: block; color: var(--hx-ice); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-card__text small { color: var(--hx-text-faint); font-size: .78rem; }
@media (min-width: 1200px) { .wi-detail { position: sticky; top: calc(var(--hx-topbar-h) + 16px); } }
.wi-detail__top { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--hx-strip); border-bottom: 1px solid var(--hx-line); }
.wi-detail__top h2 { margin: 0; font-family: var(--hx-font-display); font-size: 1.15rem; color: var(--hx-gold); }
.wi-detail__top small { color: var(--hx-text-dim); }
.wi-desc { color: var(--hx-text); line-height: 1.6; }
.wi-stats { margin: 0; font-size: .9rem; }
.wi-stats td:not(:first-child), .wi-stats th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.wi-code { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; font-size: .86rem; }
.wi-code code { padding: 2px 6px; background: var(--hx-inset); border: 1px solid var(--hx-edge-faint); color: var(--hx-accent); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 575.98px) {
    .wk-search { padding-left: 12px; }
    .wk-search .hx-btn { padding-left: 14px; padding-right: 14px; }
    .wk-tab { padding: 7px 11px 8px; }
    .wk-tabbar__tools { width: 100%; padding: 6px 0 8px; }
    .wk-mast__top { align-items: flex-start; }
    .wk-index { columns: 2 140px; }
    .wk-head--cat { gap: 12px; }
    .wk-head__icon { width: 44px; height: 44px; font-size: 1.2rem; }
    .wk-catbar { flex-direction: column; }
    .wk-toolbar button { width: 34px; }
    .wi-grid { grid-template-columns: 1fr 1fr; }
    .wi-card { flex-direction: column; text-align: center; }
    .wi-card__text b { white-space: normal; }
}

/* the almanac's search and quick links inside the main page's in-game banner (PageBanner) */
.wk-search--banner { margin-top: 20px; max-width: 760px; box-shadow: 0 10px 30px rgba(var(--hx-shadow-rgb), .45); }
.wk-mast__quick--banner { max-width: 760px; }
.wk-mast__quick--banner a { background: color-mix(in srgb, var(--hx-void) 55%, transparent); backdrop-filter: blur(4px); }