/* MZO site: WIKI page ("FIELD MANUAL"): BO7 schematic-laptop hero with search, a sidebar of every article, the
   article (sections + contents spy) or the section dossiers / search results. Accent: schematic teal (--ac); each
   section has its own colour (--cc, set inline from wiki.php $CATS). Markup: public/wiki.php; js: site/js/wiki.js. */
/* core.css gives body overflow-x: hidden, which makes body a scroll box (overflow-y: auto) and breaks the sticky
   sidebar and contents; clip hides the same sideways overflow without making a scroll box */
body.page-wiki { overflow-x: clip; }
body.page-wiki { --ac: #4fe3d0; --ac-2: #a8fff3; --wip: #e8b04a; --bad: #ff6b6b; --ok-c: #7cf29b; --mono-f: "Consolas", "SFMono-Regular", monospace; }

/* ---------- FIELD MANUAL hero (under the top bar) ---------- */
.mh { position: relative; z-index: 5; isolation: isolate; margin-top: calc(-1 * var(--pm, 0rem)); padding: calc(6rem + var(--pm, 0rem)) var(--g) 0; }
.mh.is-compact { padding-top: calc(2.5rem + var(--pm, 0rem)); padding-bottom: 2rem; }
.mh-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg) 85% 40% / cover no-repeat #07090b; }
.mh-art::after { content: ""; position: absolute; inset: 0; background:
	radial-gradient(45% 60% at 72% 42%, rgba(79, 227, 208, .12), transparent 70%),
	linear-gradient(90deg, rgba(5, 6, 8, .95) 0%, rgba(5, 6, 8, .7) 40%, rgba(5, 6, 8, .2) 75%, rgba(5, 6, 8, .35) 100%),
	linear-gradient(180deg, rgba(5, 6, 8, .6) 0%, transparent 28%, transparent 62%, var(--bg, #050608) 100%); }
.mh.is-compact .mh-art { background-position: 85% 30%; }
.mh-art i { position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(79, 227, 208, .035) 0 1px, transparent 1px 4px); pointer-events: none; }
.mh-art b { position: absolute; z-index: 1; right: var(--g); top: calc(var(--pm, 0rem) + 1rem); font: 700 max(10px, 0.6875rem) var(--mono-f); letter-spacing: .3em; color: rgba(79, 227, 208, .55); }
.mh-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 34rem); gap: 2rem 3rem; align-items: end; }
.mh-title p { display: flex; align-items: center; gap: 0.625rem; margin: 0; font: 700 max(11px, 1.125rem) var(--head); letter-spacing: .22em; color: var(--ac); }
.mh-title p img { width: 1.5rem; height: 1.5rem; }
.mh-title h1 { margin: 0.25rem 0 0; font: 900 clamp(max(11px, 3.25rem), 6.6vw, 7rem) / .9 var(--head); letter-spacing: .02em; }
.mh-title h1 a:hover { color: var(--ac-2); }
.mh.is-compact .mh-title h1 { font-size: clamp(max(11px, 2.5rem), 4vw, 4rem); }
.mh-sub { display: block; margin-top: 0.75rem; font: 700 max(10px, 0.8125rem) var(--head); letter-spacing: .16em; color: var(--muted); }
.mh.is-compact .mh-sub { display: none; }
.mh-search { position: relative; z-index: 3; }   /* above .mh-counts: both keep a transform from the .in fade, so the later strip painted over the live results */
.mh-search label { display: block; margin-bottom: 0.5rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .18em; color: var(--ac); }
.mh-box { display: flex; align-items: stretch; height: 3.25rem; background: rgba(8, 12, 14, .88); border: 1px solid rgba(79, 227, 208, .4); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .5); transition: border-color .2s, box-shadow .2s; }
.mh-box:focus-within { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac), 0 1rem 2.5rem rgba(0, 0, 0, .5); }
.mh-box input { flex: 1; min-width: 0; padding: 0 1rem; font: 500 max(14px, 1.0625rem) var(--body); color: #fff; background: transparent; border: 0; outline: 0; }
.mh-box input::placeholder { color: #7d8a91; }
.mh-box input::-webkit-search-cancel-button { filter: invert(1); }
.mh-box kbd { align-self: center; margin-right: 0.5rem; padding: 0.125rem 0.5rem; font: 700 max(10px, 0.75rem) var(--mono-f); color: var(--muted); border: 1px solid #39434a; }
.mh-box button { padding: 0 1.25rem; font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .14em; color: #03201c; background: var(--ac); transition: background .2s; }
.mh-box button:hover { background: var(--ac-2); }
.mh-live { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 0.375rem 0 0; padding: 0.375rem; list-style: none; background: rgba(8, 11, 13, .98); border: 1px solid rgba(79, 227, 208, .35); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .7); max-height: 24rem; overflow: auto; }
.mh-live a { display: block; padding: 0.5rem 0.75rem; border-left: 2px solid transparent; }
.mh-live a:hover, .mh-live a.is-hi { background: rgba(79, 227, 208, .1); border-left-color: var(--ac); }
.mh-live small { display: block; font: 700 max(10px, 0.625rem) var(--head); letter-spacing: .16em; color: var(--muted); }
.mh-live b { display: block; font: 700 max(13px, 0.9375rem) var(--body); color: #fff; }
.mh-live p { margin: 0.125rem 0 0; font: 500 max(12px, 0.8125rem) / 1.35 var(--body); color: #aab4ba; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-live .none { padding: 0.75rem; color: var(--muted); font: 500 max(13px, 0.875rem) var(--body); }
.mh-live mark, .sr mark { color: #03201c; background: var(--ac); padding: 0 0.125rem; }
.mh-counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 3rem calc(-1 * var(--g)) 0; padding: 0 var(--g); background: rgba(6, 9, 10, .85); border-top: 1px solid rgba(79, 227, 208, .25); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.mh-counts div { position: relative; padding: 1rem 1.25rem; min-width: 0; }
.mh-counts div + div::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: rgba(255, 255, 255, .12); }
.mh-counts dt { font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .16em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-counts dd { margin: 0.125rem 0 0; font: 900 max(11px, 1.875rem) / 1.1 var(--head); font-variant-numeric: tabular-nums; }
.mh-counts div:last-child dd { color: var(--ac); }

/* ---------- layout: sidebar | page | contents ---------- */
.wk { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2.5rem; align-items: start; padding: 2.5rem var(--g) 5rem; }
.wk.has-toc { grid-template-columns: 17rem minmax(0, 1fr) 13rem; }
.wk-nav { position: sticky; top: calc(var(--pm, 6rem) + 0.5rem); max-height: calc(100vh - var(--pm, 6rem) - 1.5rem); overflow: auto; scrollbar-width: thin; scrollbar-color: #2d3a3f transparent; }
.wk-nav-toggle { display: none; }
.nv-cat { margin-bottom: 1.125rem; }
.nv-h { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .16em; color: var(--cc, var(--ac)); }
.nv-h::before { content: ""; width: 0.375rem; height: 0.875rem; background: var(--cc, var(--ac)); }
.nv-cat ul { margin: 0.25rem 0 0; padding: 0; list-style: none; border-left: 1px solid #22292d; }
.nv-cat li a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3125rem 0.75rem; margin-left: -1px; font: 500 max(13px, 0.9375rem) / 1.3 var(--body); color: #b9c3c9; border-left: 2px solid transparent; transition: color .15s, background .15s, border-color .15s; }
.nv-cat li a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.nv-cat li a.is-on { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 18%, transparent), transparent); border-left-color: var(--cc); }
.nv-cat li a i { flex: none; font: 700 max(9px, 0.5625rem) var(--head); font-style: normal; letter-spacing: .12em; color: var(--ac); opacity: .7; }
.wk-main { min-width: 0; }

/* ---------- article ---------- */
.crumb { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.5rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .16em; color: var(--muted); }
.crumb > * + *::before { content: "/"; margin-right: 0.375rem; color: #4a555b; }
.crumb a:hover { color: #fff; }
.crumb > :last-child { color: var(--cc, var(--ac)); }
.doc-top { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; align-items: center; padding-bottom: 1.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid #1f262a; }
.doc-art { width: 7rem; height: 7rem; padding: 0.5rem; object-fit: contain; background: #0c1013; border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); box-shadow: 0 0 2rem color-mix(in srgb, var(--cc) 15%, transparent); }
.doc-h { margin: 0; font: 900 max(20px, 2.75rem) / 1 var(--head); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.doc-blurb { margin: 0.625rem 0 0; font: 500 max(14px, 1.125rem) / 1.45 var(--body); color: #c3ccd1; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.875rem 0 0; }
.doc-meta span { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.625rem; padding: 0 0.625rem; font: 700 max(10px, 0.625rem) var(--head); letter-spacing: .14em; border: 1px solid #2b3439; color: #9fb0b8; background: rgba(10, 13, 15, .8); }
.doc-meta img { width: 0.875rem; height: 0.875rem; }
.doc-meta .m-live { color: var(--ac); border-color: rgba(79, 227, 208, .4); }
.doc-meta .m-live::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--ac); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.doc-s { padding: 1.75rem 0 0.5rem; scroll-margin-top: calc(var(--pm, 6rem) + 1rem); }
.doc-s h3 { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.875rem; font: 900 max(15px, 1.375rem) var(--head); letter-spacing: .06em; text-transform: uppercase; }
.doc-s h3::before { content: ""; flex: none; width: 0.375rem; height: 1.125rem; background: var(--cc, var(--ac)); }
.doc-s p, .doc-s li { font: 500 max(14px, 1.0625rem) / 1.55 var(--body); color: #d5dce0; }
.doc-s p { margin: 0 0 0.875rem; max-width: 62rem; }
.doc-s a:not(.pn-a) { color: var(--ac-2); text-decoration: underline; text-decoration-color: rgba(79, 227, 208, .4); text-underline-offset: 0.1875rem; }
.doc-s a:not(.pn-a):hover { color: #fff; text-decoration-color: var(--ac); }
.doc-s b { color: #fff; }
.doc-s code { padding: 0.0625rem 0.375rem; font: 600 0.92em var(--mono-f); color: var(--ac-2); background: rgba(79, 227, 208, .08); border: 1px solid rgba(79, 227, 208, .2); overflow-wrap: anywhere; }
.mut { color: var(--muted) !important; }
.sm { font-size: max(12px, 0.8125rem) !important; letter-spacing: .06em; }
.ls { margin: 0 0 1rem; padding-left: 1.25rem; max-width: 62rem; }
.ls li { margin: 0.25rem 0; padding-left: 0.25rem; }
.ls li::marker { color: var(--cc, var(--ac)); }
ol.ls li::marker { font: 700 0.9em var(--head); }
.sub-h { display: flex; align-items: baseline; gap: 0.5rem; margin: 1.5rem 0 0.75rem; font: 700 max(11px, 0.875rem) var(--head); letter-spacing: .16em; color: var(--cc, var(--ac)); }
.sub-h small { font: 700 max(10px, 0.6875rem) var(--mono-f); color: var(--muted); }

/* notes */
.note { position: relative; margin: 0 0 0.75rem !important; padding: 0.75rem 1rem 0.75rem 3rem; max-width: 62rem; background: rgba(12, 15, 18, .85); border: 1px solid #263036; border-left: 3px solid var(--nc, var(--ac)); font: 500 max(14px, 1rem) / 1.5 var(--body) !important; }
.note::before { position: absolute; left: 0.875rem; top: 0.75rem; width: 1.375rem; height: 1.375rem; display: grid; place-items: center; font: 900 max(10px, 0.75rem) var(--head); color: #0a0c0e; background: var(--nc, var(--ac)); }
.n-info { --nc: var(--ac); }
.n-info::before { content: "i"; }
.n-warn { --nc: #ff9a4d; }
.n-warn::before { content: "!"; }
.n-wip { --nc: var(--wip); }
.n-wip::before { content: ""; background: var(--wip) url("../wiki/icon_clock.webp") center / 70% no-repeat; filter: none; }
.n-lock { --nc: var(--bad); }
.n-lock::before { content: ""; background: var(--bad) url("../wiki/icon_lock.webp") center / 62% no-repeat; }
.n-ok { --nc: var(--ok-c); }
.n-ok::before { content: ""; background: var(--ok-c) url("../wiki/icon_check.webp") center / 62% no-repeat; }

/* facts strip */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; margin: 0.5rem 0 1rem; max-width: 62rem; background: #1f272b; border: 1px solid #1f272b; }
.facts div { min-width: 0; padding: 0.75rem 1rem; background: rgba(9, 12, 14, .95); }
.facts dt { font: 700 max(10px, 0.625rem) var(--head); letter-spacing: .16em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.facts dd { margin: 0.125rem 0 0; font: 900 max(14px, 1.375rem) / 1.15 var(--head); color: #fff; overflow-wrap: anywhere; }

/* tables */
.tb-wrap { max-width: 62rem; margin: 0 0 1rem; overflow-x: auto; border: 1px solid #1f272b; }
.tb { width: 100%; border-collapse: collapse; font: 500 max(13px, 1rem) / 1.4 var(--body); }
.tb th { padding: 0.625rem 1rem; text-align: left; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .16em; color: var(--muted); background: rgba(16, 20, 23, .95); border-bottom: 1px solid #263036; white-space: nowrap; }
.tb td { padding: 0.5625rem 1rem; color: #d5dce0; border-top: 1px solid #172024; background: rgba(8, 11, 13, .8); }
.tb tr:hover td { background: rgba(79, 227, 208, .05); }
.tb td b { color: var(--cc, #fff); }

/* tiles: perks, ammo mods, field upgrades */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.tile { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.875rem; align-items: start; padding: 0.875rem; background: linear-gradient(180deg, rgba(16, 20, 23, .92), rgba(9, 11, 13, .95)); border: 1px solid #222b30; transition: border-color .2s, transform .2s var(--ease); }
.tile:hover { border-color: color-mix(in srgb, var(--cc) 55%, transparent); transform: translateY(-2px); }
.tile img, .tile-ph { width: 4rem; height: 4rem; object-fit: contain; }
.tile-ph { display: block; background: repeating-linear-gradient(45deg, #151b1e 0 6px, #0e1214 6px 12px); border: 1px solid #222b30; }
.tile h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; font: 700 max(13px, 1rem) / 1.2 var(--head); letter-spacing: .06em; }
.tile h4 em { padding: 0.0625rem 0.375rem; font: 700 max(9px, 0.5625rem) var(--head); font-style: normal; letter-spacing: .14em; color: #0a0c0e; background: var(--cc, var(--ac)); }
.tile .tile-sub { margin: 0.25rem 0 0.375rem; font: 700 max(10px, 0.6875rem) / 1.3 var(--head) !important; letter-spacing: .1em; color: var(--cc, var(--ac)) !important; }
.tile p { margin: 0; font: 500 max(13px, 0.9375rem) / 1.45 var(--body) !important; color: #b9c3c9 !important; }

/* weapons */
.guns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.5rem; }
.gun { min-width: 0; padding: 0.625rem 0.75rem; background: rgba(11, 14, 16, .9); border: 1px solid #1f272b; transition: border-color .2s; }
.gun:hover { border-color: color-mix(in srgb, var(--cc) 55%, transparent); }
.gun img { width: 100%; height: 3.75rem; object-fit: contain; margin-bottom: 0.375rem; }
.gun b { display: block; font: 700 max(12px, 0.875rem) / 1.2 var(--head); letter-spacing: .04em; overflow-wrap: anywhere; }
.gun span { font: 700 max(9px, 0.625rem) var(--head); letter-spacing: .12em; color: var(--muted); }
.gun.is-off { opacity: .45; }

/* number grids: account levels, weapon levels, research XP */
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr)); gap: 1px; max-width: 62rem; margin: 0 0 1rem; padding: 0; list-style: none; background: #1a2226; border: 1px solid #1a2226; }
.lv-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.lv-grid li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.4375rem 0.625rem; margin: 0; background: rgba(9, 12, 14, .96); }
.lv-grid b { font: 900 max(12px, 0.875rem) var(--head); color: var(--cc, var(--ac)) !important; }
.lv-grid span { font: 600 max(11px, 0.8125rem) var(--mono-f); color: #cfd6da; font-variant-numeric: tabular-nums; }

/* augments */
.augs { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.aug { background: rgba(10, 13, 15, .92); border: 1px solid #1f272b; }
.aug[open] { border-color: color-mix(in srgb, var(--cc) 45%, transparent); }
.aug summary { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.875rem; align-items: center; padding: 0.625rem 0.875rem; cursor: pointer; list-style: none; }
.aug summary::-webkit-details-marker { display: none; }
.aug summary:hover { background: rgba(255, 255, 255, .03); }
.aug summary img, .aug summary .tile-ph { width: 3rem; height: 3rem; object-fit: contain; }
.aug-t b { display: block; font: 700 max(13px, 1rem) var(--head); letter-spacing: .06em; }
.aug-t small { display: block; font: 500 max(12px, 0.875rem) / 1.35 var(--body); color: #aab4ba; }
.aug summary em { font: 700 max(11px, 0.8125rem) var(--mono-f); font-style: normal; color: var(--ac); }
.aug summary em::after { content: " +"; color: var(--muted); }
.aug[open] summary em::after { content: " -"; }
.aug ol { margin: 0; padding: 0 0.875rem 0.875rem; list-style: none; counter-reset: a; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0.5rem; }
.aug li { counter-increment: a; position: relative; margin: 0; padding: 0.625rem 0.75rem 0.625rem 2.5rem; background: rgba(16, 20, 23, .9); border: 1px solid #1c2428; }
.aug li::before { content: counter(a); position: absolute; left: 0.75rem; top: 0.625rem; font: 900 max(12px, 0.875rem) var(--head); color: var(--muted); }
.aug li .ax { display: inline-block; margin-right: 0.375rem; padding: 0 0.3125rem; font: 700 max(9px, 0.5625rem) var(--head); letter-spacing: .12em; color: #0a0c0e; background: #8d97a3; vertical-align: 0.125rem; }
.aug li:nth-child(even) .ax { background: var(--cc, var(--ac)); }
.aug li b { font: 700 max(12px, 0.875rem) var(--head); letter-spacing: .05em; }
.aug li p { margin: 0.25rem 0 0; font: 500 max(13px, 0.875rem) / 1.4 var(--body) !important; color: #b9c3c9 !important; }
.aug li.is-todo { opacity: .6; }

/* settings */
.sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.5rem; max-width: 70rem; margin-bottom: 1rem; }
.set { padding: 0.75rem 0.875rem; background: rgba(10, 13, 15, .92); border: 1px solid #1f272b; }
.set-h { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.set-h b { font: 700 max(13px, 0.9375rem) var(--head); letter-spacing: .04em; }
.set-h span { flex: none; padding: 0.0625rem 0.5rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .1em; color: #03201c; background: var(--cc, var(--ac)); }
.set p { margin: 0.375rem 0 0.25rem !important; font: 500 max(13px, 0.875rem) / 1.4 var(--body) !important; color: #b9c3c9 !important; }
.set small { font: 600 max(10px, 0.6875rem) var(--mono-f); color: var(--muted); }

/* maps + gums */
.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.625rem; margin-bottom: 1rem; }
.map { margin: 0; background: #0b0e10; border: 1px solid #1f272b; overflow: hidden; transition: border-color .2s; }
.map:hover { border-color: color-mix(in srgb, var(--cc) 55%, transparent); }
.map-img { aspect-ratio: 16 / 8; background: #121719 center / cover no-repeat; transition: transform .5s var(--ease); }
.map:hover .map-img { transform: scale(1.04); }
.map figcaption { position: relative; padding: 0.5rem 0.75rem 0.625rem; }
.map b { display: block; font: 700 max(13px, 0.9375rem) / 1.2 var(--head); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.map span { font: 700 max(9px, 0.625rem) var(--head); letter-spacing: .12em; color: var(--muted); }
.map em { display: inline-block; margin-top: 0.25rem; padding: 0 0.375rem; font: 700 max(9px, 0.5625rem) var(--head); font-style: normal; letter-spacing: .12em; color: #0a0c0e; background: var(--wip); }
.gums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr)); gap: 0.5rem; max-width: 70rem; }
.gum { margin: 0; padding: 0.5rem; text-align: center; background: rgba(10, 13, 15, .9); border: 1px solid #1f272b; }
.gum img { width: 4rem; height: 4rem; margin: 0 auto 0.25rem; object-fit: contain; transition: transform .3s var(--snap); }
.gum:hover img { transform: scale(1.12) rotate(-6deg); }
.gum figcaption { font: 700 max(9px, 0.625rem) / 1.2 var(--head); letter-spacing: .06em; color: #b9c3c9; overflow-wrap: anywhere; }

/* feature status */
.st { margin: 0 0 1rem; padding: 0; list-style: none; max-width: 62rem; }
.st li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.4375rem 0; border-bottom: 1px solid #172024; }
.st li span { font: 700 max(9px, 0.625rem) var(--head); letter-spacing: .12em; }
.st-ok span { color: var(--ok-c); }
.st-wip span { color: var(--wip); }
.st-bad span { color: var(--bad); }
.st-warn span { color: #ff9a4d; }
li.st-sub { display: block; padding-left: 8.25rem; font-size: max(12px, 0.875rem) !important; color: var(--muted) !important; border-bottom: 0; }

/* article foot */
.doc-foot { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #1f262a; }
.doc-foot > p { margin: 0 0 1rem; font: 500 max(13px, 0.9375rem) var(--body); color: var(--muted); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pn-a { display: block; padding: 0.875rem 1rem; background: rgba(10, 13, 15, .92); border: 1px solid #1f272b; transition: border-color .2s, background .2s; }
.pn-a:hover { border-color: var(--ac); background: rgba(79, 227, 208, .06); }
.pn-a.is-next { grid-column: 2; text-align: right; }
.pn-a small { display: block; font: 700 max(10px, 0.625rem) var(--head); letter-spacing: .16em; color: var(--muted); }
.pn-a b { font: 700 max(13px, 1rem) var(--head); letter-spacing: .04em; }

/* contents */
.wk-toc { position: sticky; top: calc(var(--pm, 6rem) + 0.5rem); max-height: calc(100vh - var(--pm, 6rem) - 1.5rem); overflow: auto; scrollbar-width: thin; }
.wk-toc p { margin: 0 0 0.5rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .16em; color: var(--muted); }
.wk-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid #22292d; }
.wk-toc a { display: block; padding: 0.3125rem 0.75rem; margin-left: -1px; font: 500 max(12px, 0.875rem) / 1.3 var(--body); color: #9aa6ad; border-left: 2px solid transparent; transition: color .15s, border-color .15s; }
.wk-toc a:hover { color: #fff; }
.wk-toc a.is-on { color: #fff; border-left-color: var(--ac); }

/* ---------- home: section dossiers ---------- */
.dossiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.dos { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 21, .94), rgba(8, 10, 12, .96)); border: 1px solid #1f272b; border-top: 2px solid var(--cc); transition: border-color .25s, transform .25s var(--ease); transition-delay: calc(var(--i, 0) * 50ms); }
.dos:hover { border-color: color-mix(in srgb, var(--cc) 50%, #1f272b); border-top-color: var(--cc); }
.dos-top { position: relative; display: flex; align-items: flex-end; height: 8.5rem; padding: 1rem 1.125rem; overflow: hidden; }
.dos-top img { position: absolute; right: 0.75rem; top: 50%; width: 9rem; height: 7rem; object-fit: contain; transform: translateY(-50%); opacity: .9; filter: drop-shadow(0 0 1.5rem color-mix(in srgb, var(--cc) 35%, transparent)); transition: transform .4s var(--ease); }
.dos:hover .dos-top img { transform: translateY(-50%) scale(1.06) rotate(-3deg); }
.dos-top::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 85% 50%, color-mix(in srgb, var(--cc) 14%, transparent), transparent 70%); }
.dos-top span { position: relative; }
.dos-top small { display: block; font: 700 max(10px, 0.6875rem) var(--mono-f); letter-spacing: .2em; color: var(--cc); }
.dos-top b { display: block; font: 900 max(16px, 1.75rem) / 1 var(--head); letter-spacing: .04em; }
.dos > p { margin: 0; padding: 0 1.125rem 0.75rem; font: 500 max(13px, 0.9375rem) / 1.45 var(--body); color: #aab4ba; }
.dos ul { margin: 0; padding: 0.375rem; list-style: none; border-top: 1px solid #1a2226; }
.dos li a { display: block; padding: 0.5rem 0.75rem; border-left: 2px solid transparent; transition: background .15s, border-color .15s; }
.dos li a:hover { background: rgba(255, 255, 255, .04); border-left-color: var(--cc); }
.dos li b { display: block; font: 700 max(13px, 0.9375rem) var(--head); letter-spacing: .04em; }
.dos li small { display: block; font: 500 max(12px, 0.8125rem) / 1.35 var(--body); color: #8e9aa1; }

/* ---------- search results ---------- */
.sr-list { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; max-width: 62rem; }
.sr-list a { display: block; padding: 0.875rem 1rem; background: rgba(10, 13, 15, .92); border: 1px solid #1f272b; border-left: 3px solid var(--cc); transition: background .2s; }
.sr-list a:hover { background: rgba(255, 255, 255, .04); }
.sr-list small { display: block; font: 700 max(10px, 0.625rem) var(--head); letter-spacing: .16em; color: var(--cc); }
.sr-list b { display: block; margin-top: 0.125rem; font: 700 max(14px, 1.125rem) var(--head); letter-spacing: .04em; }
.sr-list p { margin: 0.25rem 0 0; font: 500 max(13px, 0.9375rem) / 1.45 var(--body); color: #aab4ba; }
.sr .doc-h { text-transform: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1440px) {
	.wk.has-toc { grid-template-columns: 16rem minmax(0, 1fr); }
	.wk-toc { display: none; }
}
@media (max-width: 1080px) {
	.mh { padding-top: calc(3rem + var(--pm, 0rem)); }
	.mh-in { grid-template-columns: minmax(0, 1fr); }
	.mh-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
	.mh-counts div:nth-child(4)::before { display: none; }
	.wk, .wk.has-toc { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-top: 1.5rem; }
	.wk-nav { position: static; max-height: none; overflow: visible; }
	.wk-nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 2.75rem; padding: 0 1rem; font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .14em; color: var(--ac); background: rgba(10, 13, 15, .92); border: 1px solid rgba(79, 227, 208, .35); }
	.wk-nav-toggle::after { content: "+"; font-size: 1.25em; }
	.wk-nav-toggle[aria-expanded="true"]::after { content: "-"; }
	.wk-nav-in { display: none; padding: 1rem 1rem 0.25rem; background: rgba(8, 10, 12, .95); border: 1px solid #1f272b; border-top: 0; columns: 2; column-gap: 1.5rem; }
	.wk-nav.is-open .wk-nav-in { display: block; }
	.nv-cat { break-inside: avoid; }
}
@media (max-width: 640px) {
	.mh-art b { display: none; }
	.mh-box { height: 3rem; }
	.mh-box kbd { display: none; }
	.mh-box button { padding: 0 0.875rem; }
	.mh-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-counts div:nth-child(odd)::before { display: none; }
	.mh-counts div:nth-child(4)::before { display: block; }
	.wk-nav-in { columns: 1; }
	.doc-top { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; }
	.doc-art { width: 4.5rem; height: 4.5rem; }
	.st li { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
	li.st-sub { padding-left: 0; }
	.pn { grid-template-columns: minmax(0, 1fr); }
	.pn-a.is-next { grid-column: auto; }
	.dos-top img { width: 7rem; height: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
	.doc-meta .m-live::before, .tile, .map-img, .gum img, .dos-top img { animation: none; transition: none; }
}