/* Guides, guide pages, features, feature pages and the changelog in the Expedition theme (2026-10-22).
 *
 * Loaded after wiki-theme.css (`_wiki_theme_head.html`) by wiki_guides / wiki_guide / wiki_features /
 * wiki_feature_detail / wiki_changelog. Everything is scoped under `.dzw-page`, like wiki-theme.css, and only adds
 * what those pages need on top of it: the sticky filter panel and the content cards of the two indexes, the guide's
 * picture head + reading column + rail, the feature facts and the changelog timeline.
 */

/* ------------------------------------------------------------------ the two indexes (/wiki/guides, /wiki/features) */
.dzw-page .dzg-index { padding-top: 26px; }

/* the filter panel stays reachable while scrolling a long grid (wiki-theme.css makes .wiki-panel static) */
.dzw-page .wiki-panel.dzg-filters {
    position: sticky; top: 4rem; z-index: 30;
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; padding: 14px 16px;
    background: var(--dz-surface); box-shadow: 0 10px 24px rgba(0, 0, 39, .55);
}
/* base.html slides the navbar away while scrolling down (inline translateY(-100%)): follow it up */
body:has(#navbar[style*="-100%"]) .dzw-page .wiki-panel.dzg-filters { top: 10px; }
.dzw-page .wiki-panel.dzg-filters { transition: top .3s ease-in-out; }
.dzw-page .dzg-filters .wiki-panel__search-row { gap: 14px; }
.dzw-page .dzg-filters .wiki-count { font: 500 12px/1 var(--dzw-mono); white-space: nowrap; }
.dzw-page .dzg-filters .wiki-pill__icon { color: var(--dz-muted); }
.dzw-page .dzg-filters .wiki-pill.is-active .wiki-pill__icon { color: var(--dz-accent); }
.dzw-page .dzg-filters .wiki-filter-line__label {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.dzw-page .wiki-group { margin-bottom: 40px; }
.dzw-page .wiki-group__title {
    gap: 12px; margin: 0 0 16px; padding: 0 0 10px; border-bottom: 1px solid var(--dz-line);
}
.dzw-page .wiki-group__title::before {
    content: ''; align-self: center; width: 4px; height: 16px; border-radius: 2px; background: var(--dz-accent);
}
.dzw-page .wiki-group__count { font: 500 12px/1 var(--dzw-mono); }
.dzw-page .wiki-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

/* content card: picture fading into the card, icon fallback in the theme's navy, Oswald title */
.dzw-page .wiki-card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--dz-ease); }
.dzw-page .wiki-card:hover { transform: translateY(-2px); }
.dzw-page .wiki-card__thumb,
.dzw-page .wiki-card__thumb[class*="wiki-card__thumb--"] {
    border-bottom: 0;
    background:
        radial-gradient(ellipse 60% 90% at 78% 30%, rgba(250, 204, 21, .10), rgba(250, 204, 21, 0) 70%),
        linear-gradient(160deg, #151b2e, #0a0e1c 75%);
}
.dzw-page .wiki-card__thumb::after {                      /* the top scrim keeps the chips readable on photos */
    height: 50%; background: linear-gradient(to bottom, rgba(0, 0, 39, .55), transparent);
}
.dzw-page .wiki-card__thumb::before {                     /* ... and the bottom fades the picture into the card */
    content: ''; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, var(--dz-surface), rgba(10, 14, 28, 0));
}
.dzw-page .wiki-card__img { transition: transform .4s var(--dz-ease); }
.dzw-page .wiki-card:hover .wiki-card__img { transform: scale(1.035); }
.dzw-page .wiki-card__thumb-fallback { color: var(--dz-accent); }
.dzw-page .wiki-card__thumb-fallback i { font-size: 40px; opacity: .45; }
.dzw-page .wiki-chip { font-size: 10px; letter-spacing: .07em; border-radius: 6px; padding: 3px 8px; }
.dzw-page .wiki-chip--draft  { color: #fcd34d; border-color: rgba(245, 158, 11, .5); }
.dzw-page .wiki-chip--recent { color: #86efac; border-color: rgba(34, 197, 94, .45); }
.dzw-page .wiki-chip--map    { color: var(--dz-text); border-color: var(--dz-line-strong); }
.dzw-page .wiki-card__body { flex: 1; gap: 8px; padding: 6px 20px 20px; }
.dzw-page .wiki-card__title { font: 600 20px/1.18 var(--dzw-display); text-transform: uppercase; letter-spacing: .01em; }
.dzw-page .wiki-card__desc { color: var(--dz-text-2); font-size: 14px; }
.dzw-page .wiki-card__meta { color: var(--dz-muted); font: 500 11px/1.4 var(--dzw-mono); }
.dzw-page .wiki-card__go { margin-top: auto; padding-top: 6px; font-size: 12px; }

/* feature cards carry no picture: a short strip with the glyph on the right instead of a 2.5:1 slot */
.dzw-page .wiki-card--feature .wiki-card__thumb { aspect-ratio: auto; height: 74px; }
.dzw-page .wiki-card--feature .wiki-card__thumb::before { display: none; }
.dzw-page .wiki-card--feature .wiki-card__thumb-fallback { justify-content: flex-end; padding-right: 20px; }
.dzw-page .wiki-card--feature .wiki-card__thumb-fallback i { font-size: 30px; }
.dzw-page .wiki-card--feature .wiki-card__body { padding-top: 14px; }

/* ------------------------------------------------------------------ guide page: picture head */
.dzw-page .dzg-hero { position: relative; overflow: hidden; }
.dzw-page .dzg-hero__media { position: absolute; inset: 0; z-index: 0; }
.dzw-page .dzg-hero__media img {                         /* also wiki-edit.js's preview img (max-h-72 rounded-xl mb-6) */
    position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0;
    object-fit: cover; object-position: center 42%;
}
.dzw-page .dzg-hero.has-hero .dzg-hero__media::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 39, .94), rgba(0, 0, 39, .66) 42%, rgba(0, 0, 39, .12) 82%),
        linear-gradient(0deg, #000027 3%, rgba(0, 0, 39, .55) 30%, rgba(0, 0, 39, 0) 62%),
        linear-gradient(180deg, rgba(0, 0, 39, .7), rgba(0, 0, 39, 0) 26%);
}
.dzw-page .dzg-hero__inner { position: relative; z-index: 1; pointer-events: none; }
/* the text block covers the picture; clicks between the words reach it, so wiki-lightbox.js still opens it big */
.dzw-page .dzg-hero__inner :is(a, h1, p, [contenteditable]) { pointer-events: auto; }
.dzw-page .dzg-hero.has-hero .dzg-hero__media img { cursor: zoom-in; }
.dzw-page .dzg-hero.has-hero .dzg-hero__inner { padding-top: 250px; padding-bottom: 40px; }
.dzw-page .dzg-hero h1 { max-width: 920px; font-size: 54px; line-height: 1.02; }
.dzw-page .dzg-hero .dzw-band__desc { font-size: 17px; max-width: 720px; }

/* draft banner, both detail pages */
.dzw-page .wiki-draft-banner {
    margin: 24px 0 0; padding: 12px 16px; border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); color: #fcd34d; font-size: 14px;
}

/* ------------------------------------------------------------------ guide page: reading column */
.dzw-page .dzg-article {
    min-width: 0; padding: 40px 48px 44px;
    border: 1px solid var(--dz-line); border-radius: 14px; background: var(--dz-surface);
}
.dzw-page .dzg-adminbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: -8px 0 28px; padding-bottom: 16px; border-bottom: 1px solid var(--dz-line);
}
.dzw-page .dzg-origin--local { color: #86efac; border-color: rgba(34, 197, 94, .45); }
.dzw-page .dzg-origin--overridden { color: var(--dz-accent-glass-ink); border-color: var(--dz-accent-glass-line); }

.dzw-page .dzg-article .wiki-prose { font-size: 16.5px; line-height: 1.78; color: var(--dz-text-2); }
/* a comfortable measure for running text; tables, figures and pictures keep the full column */
.dzw-page .dzg-article .wiki-prose > :is(p, ul, ol, blockquote, h2, h3, h4, dl, pre) { max-width: 76ch; }
.dzw-page .dzg-article .wiki-prose > :first-child { margin-top: 0; }
.dzw-page .wiki-prose h2 { margin: 2.6rem 0 1rem; font-size: 30px; }
.dzw-page .wiki-prose h3 { margin: 1.9rem 0 .6rem; font-size: 19px; font-weight: 700; letter-spacing: .005em; }
.dzw-page .wiki-prose p { margin: .85rem 0; }
.dzw-page .wiki-prose li { margin: .4rem 0; padding-left: .2rem; }
.dzw-page .wiki-prose li::marker { color: var(--dz-accent); }
.dzw-page .wiki-prose ol > li::marker { font: 600 .9em var(--dzw-mono); }
.dzw-page .wiki-prose a { text-decoration: none; text-underline-offset: 3px; }
.dzw-page .wiki-prose a:hover { text-decoration: underline; }
.dzw-page .wiki-prose hr { border-top-color: var(--dz-line); margin: 2.4rem 0; }
.dzw-page .wiki-prose code { color: var(--dz-accent-glass-ink); }
.dzw-page .wiki-prose pre { background: var(--dz-field); border-color: var(--dz-line); border-radius: 10px; }
.dzw-page .wiki-prose pre code { color: var(--dz-text); border: 0; background: none; padding: 0; }
.dzw-page .wiki-prose blockquote {
    margin: 1.4rem 0; padding: .75rem 1.1rem; border-left: 3px solid var(--dz-accent); border-radius: 0 10px 10px 0;
    background: var(--dz-accent-soft); color: var(--dz-text);
}
.dzw-page .wiki-prose blockquote p { margin: .3rem 0; }
.dzw-page .wiki-prose img { border-radius: 10px; border: 1px solid var(--dz-line); }
.dzw-page .wiki-prose a .dz-item-icon { border: 0; border-radius: 2px; }
.dzw-page .wiki-prose figcaption { color: var(--dz-muted); font-size: 13px; }

/* prose tables: the same look as .wikitable */
.dzw-page .wiki-prose table {
    border-collapse: separate; border-spacing: 0; margin: 1.4rem 0; font-size: 14px;
    border: 1px solid var(--dz-line); border-radius: 10px; overflow: hidden; background: var(--dz-surface);
}
.dzw-page .wiki-prose th {
    background: var(--dz-field); color: var(--dz-muted); border: 0; border-bottom: 1px solid var(--dz-line-strong);
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .65rem .8rem;
}
.dzw-page .wiki-prose tbody th {
    color: var(--dz-text); font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 600;
    background: transparent; border-bottom: 1px solid var(--dz-line);
}
.dzw-page .wiki-prose td { border: 0; border-bottom: 1px solid var(--dz-line); padding: .6rem .8rem; color: var(--dz-text-2); }
.dzw-page .wiki-prose tbody tr:last-child td, .dzw-page .wiki-prose tbody tr:last-child th { border-bottom: 0; }
.dzw-page .wiki-prose tbody tr:hover { background: var(--dz-hover); }
.dzw-page .wiki-prose .dz-recipe thead th, .dzw-page .wiki-prose .dz-computed thead th {
    background: var(--dz-raised); color: #fff; font-size: 12px;
}
.dzw-page .wiki-prose .dz-recipe tbody th { background: var(--dz-field); color: var(--dz-muted); }
.dzw-page .wiki-prose .dz-computed thead small { color: var(--dz-accent-glass-ink); }

/* inline values */
.dzw-page .dz-setting { color: var(--dz-accent); }
.dzw-page .wiki-prose .dz-cfg { color: var(--dz-accent-glass-ink); }
.dzw-page .wiki-prose .dz-action {
    color: var(--dz-text); background: var(--dz-field); border-color: var(--dz-line-strong); border-radius: 5px;
}
.dzw-page .dz-map-find { color: var(--dz-accent); }
.dzw-page a.dz-map-find:hover { color: var(--dz-accent-hover); }

/* ------------------------------------------------------------------ rail (_wiki_rail.html, feature facts) */
.dzw-page .dzg-rail { max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
.dzw-page .dzg-rail::-webkit-scrollbar { width: 6px; }
.dzw-page .dzg-rail::-webkit-scrollbar-track { background: transparent; }
.dzw-page .dzg-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }

/* the "On this page" list: wiki-prose.css shows it from lg up once buildToc() has filled it */
.dzw-page .wiki-toc { background: var(--dz-surface); border: 1px solid var(--dz-line); border-radius: var(--dzw-radius); padding: 18px; backdrop-filter: none; }
.dzw-page .wiki-toc__title { color: var(--dz-muted); }
.dzw-page .wiki-toc .toc-link {
    padding: 5px 10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
    color: var(--dz-text-2); font-size: 13px; line-height: 1.35;
}
.dzw-page .wiki-toc .toc-link:hover { background: var(--dz-hover); color: #fff; }
.dzw-page .wiki-toc .toc-link.active { background: var(--dz-accent-soft); color: #fff; border-left-color: var(--dz-accent); font-weight: 500; }
.dzw-page .wiki-toc .toc-link--h3 { padding-left: 22px; font-size: 12.5px; color: var(--dz-muted); }

.dzw-page .dzg-rail-maps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dzw-page .dzg-rail-map { display: flex; align-items: center; gap: 12px; color: var(--dz-text); font-size: 14px; font-weight: 500; }
.dzw-page .dzg-rail-map:hover { color: var(--dz-accent); }
.dzw-page .dzg-rail-map img, .dzw-page .dzg-rail-map__ph {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; border: 1px solid var(--dz-line-strong); object-fit: cover;
}
.dzw-page .dzg-rail-map__ph { display: grid; place-content: center; color: var(--dz-muted); background: var(--dz-field); }
.dzw-page .dzg-rail-map__loot { margin: 6px 0 0 56px; font-size: 12px; }

.dzw-page .dzg-rail-thumb {
    display: inline-grid; place-content: center; width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 6px; background: var(--dz-field); border: 1px solid var(--dz-line);
}
.dzw-page .dzg-rail-thumb img { max-width: 30px; max-height: 30px; object-fit: contain; }
.dzw-page .dzg-rail-thumb img.is-placeholder { opacity: .35; }
.dzw-page .dzg-rail-items a { padding-top: 4px; padding-bottom: 4px; }
.dzw-page .dzg-rail-arrow { color: var(--dz-accent); font-size: 11px; }
.dzw-page .dzg-draft-note { color: #fcd34d; font-size: 12px; }
.dzw-page .dzg-rail-back { padding: 0 4px; font-size: 12px; }
.dzw-page .dzg-rail .dzw-kv dd { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ feature page */
.dzw-page .dzg-guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dzw-page .dzg-guide-link {
    position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 44px 14px 16px;
    border: 1px solid var(--dz-line); border-radius: 10px; background: var(--dz-field);
    transition: border-color .16s ease, background-color .16s ease;
}
.dzw-page .dzg-guide-link:hover { border-color: var(--dz-accent-glass-line); background: var(--dz-raised); }
.dzw-page .dzg-guide-link__title { color: #fff; font-weight: 600; font-size: 15px; }
.dzw-page .dzg-guide-link__desc { color: var(--dz-muted); font-size: 13.5px; }
.dzw-page .dzg-guide-link__arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--dz-accent); font-size: 18px; }
.dzw-page .dzg-strong { color: #fff; font-weight: 600; }
.dzw-page .dzg-live {
    margin-left: 4px; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(74, 222, 128, .45);
    color: #86efac; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle;
}
.dzw-page .dzg-actions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.dzw-page .dzg-actions li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px;
    border: 1px solid var(--dz-line); border-radius: 8px; background: var(--dz-field); color: var(--dz-text); font-size: 14px;
}

/* ------------------------------------------------------------------ changelog timeline */
.dzw-page .dzg-changelog { padding-top: 34px; }
.dzw-page .dzg-timeline { position: relative; max-width: 920px; list-style: none; margin: 0; padding: 0 0 0 30px; display: flex; flex-direction: column; gap: 22px; }
.dzw-page .dzg-timeline::before {
    content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px;
    background: linear-gradient(180deg, var(--dz-accent), rgba(250, 204, 21, .25) 30%, var(--dz-line) 70%);
}
.dzw-page .dzg-timeline__entry { position: relative; }
.dzw-page .dzg-timeline__dot {
    position: absolute; left: -30px; top: 26px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--dz-bg); border: 2px solid var(--dz-accent); box-shadow: 0 0 0 4px rgba(250, 204, 21, .12);
}
.dzw-page .dzg-timeline__entry:not(:first-child) .dzg-timeline__dot { border-color: rgba(250, 204, 21, .55); box-shadow: none; }
.dzw-page .dzg-entry {
    display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
    border: 1px solid var(--dz-line); border-radius: 14px; background: var(--dz-surface);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--dz-ease);
}
.dzw-page .dzg-entry.has-image { grid-template-columns: 280px minmax(0, 1fr); }
.dzw-page .dzg-entry:hover { border-color: var(--dz-accent-glass-line); box-shadow: var(--dz-shadow-2); transform: translateY(-2px); }
.dzw-page .dzg-entry__media { position: relative; min-height: 170px; border-right: 1px solid var(--dz-line); background: var(--dz-field); }
.dzw-page .dzg-entry__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dzw-page .dzg-entry__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 22px; min-width: 0; }
.dzw-page .dzg-entry__meta { display: flex; align-items: center; gap: 10px; }
.dzw-page .dzg-entry__date { color: var(--dz-accent); font: 600 12px/1 var(--dzw-mono); letter-spacing: .04em; }
.dzw-page .dzg-entry__title { margin: 0; font: 600 26px/1.12 var(--dzw-display); text-transform: uppercase; color: #fff; letter-spacing: .01em; }
.dzw-page .dzg-entry:hover .dzg-entry__title { color: var(--dz-accent-hover); }
.dzw-page .dzg-entry__desc { color: var(--dz-text-2); font-size: 14.5px; line-height: 1.55; }
.dzw-page .dzg-entry .dzw-link { margin-top: 4px; font-size: 12px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
    .dzw-page .dzg-rail { max-height: none; overflow: visible; }
}
@media (max-width: 767px) {
    .dzw-page .dzg-index { padding-top: 18px; }
    .dzw-page .wiki-panel.dzg-filters { top: 4rem; padding: 12px; margin-bottom: 22px; }
    .dzw-page .wiki-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .dzw-page .wiki-card__title { font-size: 19px; }
    .dzw-page .dzg-hero.has-hero .dzg-hero__inner { padding-top: 170px; padding-bottom: 26px; }
    .dzw-page .dzg-hero h1 { font-size: clamp(30px, 8.5vw, 40px); }
    .dzw-page .dzg-hero .dzw-band__desc { font-size: 15px; }
    .dzw-page .dzg-article { padding: 22px 18px 26px; border-radius: 12px; }
    .dzw-page .dzg-article .wiki-prose { font-size: 16px; line-height: 1.72; }
    .dzw-page .wiki-prose h2 { font-size: 24px; margin-top: 2rem; }
    /* a plain markdown table scrolls inside the column; captioned ones (recipes) are narrow, the computed ones
       already scroll in .dz-computed-wrap */
    .dzw-page .wiki-prose table:not(:has(> caption)):not(.dz-computed) { display: block; overflow-x: auto; }
    .dzw-page .dzg-timeline { padding-left: 22px; }
    .dzw-page .dzg-timeline::before { left: 5px; }
    .dzw-page .dzg-timeline__dot { left: -22px; width: 12px; height: 12px; top: 22px; }
    .dzw-page .dzg-entry.has-image { grid-template-columns: minmax(0, 1fr); }
    .dzw-page .dzg-entry__media { min-height: 150px; border-right: 0; border-bottom: 1px solid var(--dz-line); }
    .dzw-page .dzg-entry__body { padding: 16px 16px 18px; }
    .dzw-page .dzg-entry__title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .dzw-page .wiki-card, .dzw-page .wiki-card__img, .dzw-page .dzg-entry { transition: none; }
    .dzw-page .wiki-card:hover, .dzw-page .dzg-entry:hover { transform: none; }
    .dzw-page .wiki-card:hover .wiki-card__img { transform: none; }
}