/* ── SM2 Wiki Reference Pages ─────────────────────────────────────────────── */

:root {
  --bg:          #0b0b12;
  --surface:     #13131f;
  --surface2:    #1c1c2e;
  --surface3:    #252538;
  --border:      #2e2e48;
  --gold:        #c8a84b;
  --gold-dim:    #8a7030;
  --gold-glow:   rgba(200, 168, 75, 0.18);
  --red:         #c0392b;
  --green:       #27ae60;
  --blue:        #4a90d9;
  --radius:      6px;
  --radius-lg:   10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; overscroll-behavior: none; }

body {
  background: var(--bg);
  color: #fff;
  font-family: 'Segoe UI', system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.wiki-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--banner-offset, 0px);
  z-index: 100;
  transition: top 0.3s ease;
}
.wiki-back-btn {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.wiki-back-btn:hover { color: var(--gold); text-decoration: none; }
.wiki-header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 16px;
}
.wiki-calc-link {
  font-size: 1.15rem;
  padding: 10px 22px;
  background: var(--gold);
  border: none;
  border-radius: var(--radius);
  color: #0b0b12;
  font-weight: 700;
  white-space: nowrap;
  justify-self: end;
}
.wiki-calc-link:hover { background: #d4b86e; text-decoration: none; }

/* ── Consolidated single-bar header ───────────────────────────────────────────
   Every wiki page except home (which has no .wiki-back-btn) collapses to ONE
   slim bar: a compact left nav (⌂ Wiki · ← Parent) and the search box on the
   right. The header title and calc link are hidden — the <h1> below carries
   the title, and the calculator lives in the footer + bottom CTA. Scoped with
   :has() so it applies before first paint (no flash) and leaves home alone
   (home's header has no .wiki-back-btn). */
.wiki-header:has(.wiki-back-btn) {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.wiki-header:has(.wiki-back-btn) .wiki-header-title,
.wiki-header:has(.wiki-back-btn) .wiki-calc-link {
  display: none;
}
/* Parent crumb sits inline at nav scale, not the old oversized 1.8rem back. */
.wiki-header:has(.wiki-back-btn) .wiki-back-btn { font-size: 1.2rem; }
.wiki-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}
.wiki-home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.wiki-home-link svg { width: 17px; height: 17px; }
.wiki-home-link:hover { color: var(--gold); text-decoration: none; }
/* Breadcrumb chevron between crumbs — white, lighter weight than the crumbs. */
.wiki-nav-sep { color: #fff; font-weight: 400; font-size: 1.1rem; }
/* Current-page crumb: not a link, accented gold to mark "you are here". */
.wiki-crumb-current {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

/* Mobile TOC button + flyout (built by wiki-search.js). Desktop keeps the
   fixed sidebar TOC, so both are hidden here and only revealed ≤900px. */
.wiki-toc-wrap { display: none; }
.wiki-toc-flyout { display: none; }

/* ── Bottom CTA banner ────────────────────────────────────────────────────── */
.wiki-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--surface2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 28px 36px;
  margin-top: 56px;
}
.wiki-cta-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wiki-cta-text strong {
  font-size: 1.4rem;
  color: var(--gold);
}
.wiki-cta-text span {
  font-size: 1.1rem;
  color: #fff;
}
.wiki-cta-btn {
  font-size: 1.2rem;
  padding: 14px 36px;
  background: var(--gold);
  border-radius: var(--radius);
  color: #0b0b12;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.wiki-cta-btn:hover { background: #d4b86e; text-decoration: none; }

/* ── Main content ─────────────────────────────────────────────────────────── */
.wiki-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 28px 64px;
  position: relative;
}

.wiki-page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  /* Allow inline badges (faction/tier on enemy pages) to sit beside the name. */
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* Title-row badges (faction/tier) are smaller than the h1 text — explicit font-size
   keeps them from inheriting the h1 size. */
.wiki-page-title .badge {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.wiki-page-subtitle {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 28px;
}

/* ── Page notice ──────────────────────────────────────────────────────────
   The banner pinned under a page title when the article's subject has changed
   since it was written: "Fixed in Patch 13.0", "Still present as of Patch
   14.1", and so on. Written into the static HTML between the
   <!-- wiki-notice:start/end --> markers by /api/wiki/admin/pages/:id/notice,
   which is why it needs no per-page inline styles. */
.wiki-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 12px 0 28px;
}
.wiki-notice-icon {
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--gold);
  flex-shrink: 0;
}
.wiki-notice-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.wiki-notice-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}
.wiki-notice-text { font-size: 1.05rem; color: #fff; }
.wiki-notice-meta { font-size: 1rem; color: #fff; }
.wiki-notice-meta a { color: var(--gold); text-decoration: underline; }
.wiki-notice-meta a:hover { color: #fff; }

/* Per-type accent. Only the left rule, the tint and the icon carry the status
   colour — the text stays white so it reads like the rest of the page. */
.wiki-notice-fixed { border-left-color: var(--green); background: rgba(39, 174, 96, 0.10); }
.wiki-notice-fixed .wiki-notice-icon { color: #3ddc84; }
.wiki-notice-active { border-left-color: var(--red); background: rgba(192, 57, 43, 0.12); }
.wiki-notice-active .wiki-notice-icon { color: #ee7360; }
.wiki-notice-changed { border-left-color: var(--gold); background: var(--gold-glow); }
.wiki-notice-outdated { border-left-color: var(--gold); background: var(--gold-glow); }
.wiki-notice-info { border-left-color: var(--blue); background: rgba(74, 144, 217, 0.12); }
.wiki-notice-info .wiki-notice-icon { color: var(--blue); }

/* ── Sections — scroll offset for sticky header + search bar ─────────────── */
/* --wiki-scroll-offset is set from JS (wiki-search.js) so it matches the
   actual measured height of the header + sticky search bar. Fallback covers
   first paint before JS runs. */
.wiki-content section, .wiki-main section {
  scroll-margin-top: var(--wiki-scroll-offset, 140px);
}

/* ── Section headings ─────────────────────────────────────────────────────── */
.wiki-section-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold);
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  display: block;
  width: 100%;
}

/* ── Sticky author chip (right margin, mirrors .wiki-toc) ────────────────── */
/* Universal styling — any page that includes <div class="wiki-authors"> picks
   this up automatically with no per-page CSS needed. */
.wiki-authors {
  position: fixed;
  top: 165px;
  right: max(8px, calc((100vw - 1100px) / 2 - 240px));
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  z-index: 5;
}
.wiki-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}
.wiki-author img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #2e2e48;
}
.wiki-author-name {
  font-size: 1.05rem;
  color: #fff;
}
a.wiki-author:hover .wiki-author-name { color: var(--gold); }
.wiki-authors-label {
  font-size: 1rem;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */
.wiki-table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}
.wiki-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
}
.wiki-table th {
  background: var(--surface2);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  text-align: right;
  border-bottom: none;
  box-shadow: inset 0 -2px 0 var(--border);
  white-space: nowrap;
}
.wiki-table th:first-child { text-align: left; }
.wiki-table td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #fff;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.wiki-table td:first-child { text-align: left; }
.wiki-table tr:hover td { background: var(--surface2); }

/* ── Generic content styles (TipTap output in wiki sections) ──────────────── */
.wiki-content table, .wiki-main section table {
  width: 100%; border-collapse: collapse; margin: 10px 0;
}
.wiki-content th, .wiki-main section th {
  background: #1a1a2e; color: #c8a84b; padding: 6px 10px;
  border: 1px solid var(--border); text-align: left; font-weight: 600;
}
.wiki-content th.nowrap, .wiki-main section th.nowrap { white-space: nowrap; }
.wiki-content td, .wiki-main section td {
  padding: 6px 10px; border: 1px solid var(--border); color: #fff;
}
.wiki-content ul, .wiki-main section ul { padding-left: 24px; margin: 8px 0; list-style: disc; }
.wiki-content ol, .wiki-main section ol { padding-left: 24px; margin: 8px 0; list-style: decimal; }
.wiki-content li, .wiki-main section li { margin: 4px 0; }
.wiki-content blockquote, .wiki-main section blockquote {
  border-left: 3px solid #8a7030; padding-left: 12px; margin: 8px 0;
}
.wiki-content a, .wiki-main section a { color: #4a90d9; text-decoration: underline; }
.wiki-content hr, .wiki-main section hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.wiki-content pre, .wiki-main section pre {
  background: #0b0b12; padding: 12px; border-radius: 4px; overflow-x: auto; margin: 8px 0;
}
.wiki-content code, .wiki-main section code {
  background: #1a1a2e; padding: 2px 6px; border-radius: 3px; font-size: 0.9rem;
  word-break: break-all; overflow-wrap: break-word;
}
.wiki-content pre code, .wiki-main section pre code {
  background: none; padding: 0;
}
.wiki-content p:empty, .wiki-main section p:empty { min-height: 1em; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-tyranid  { background: #2a1a3a; color: #c084fc; }
.badge-chaos    { background: #1a2438; color: #60a5fa; }  /* Thousand Sons blue */
.badge-minoris  { background: #1a2a1a; color: #86efac; }
.badge-majoris  { background: #2a2a1a; color: #fde047; }
.badge-extremis { background: #2a1f10; color: #fdba74; }  /* orange */
.badge-terminus { background: #3a1a1a; color: #f87171; }

/* ── Sensitivity colours ──────────────────────────────────────────────────── */
.sens-bonus    { color: var(--green); }  /* > 1 = takes more damage */
.sens-neutral  { color: #fff; }
.sens-resist   { color: var(--red); }    /* < 1 = resists */
.sens-immune   { color: #666; }          /* 0 = immune */

/* ── Table subheaders (enemy page sensitivity sections) ───────────────────── */
.wiki-table-subheader {
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 10px;
  background: rgba(255,255,255,0.03);
}
.wiki-subheader-note {
  font-weight: 400;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
}

/* ── Cards (hub page, stat blocks) ────────────────────────────────────────── */
.wiki-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.wiki-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.wiki-card:hover { border-color: var(--gold-dim); }
.wiki-card h3 {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 6px;
}
.wiki-card p {
  font-size: 1rem;
  color: #fff;
}

/* ── Modifier list ────────────────────────────────────────────────────────── */
.wiki-mod-list {
  list-style: none;
  display: grid;
  gap: 8px;
}
.wiki-mod-item {
  list-style: none;
}
.wiki-mod-item a.wiki-mod-link {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background-color 0.15s;
}
.wiki-mod-item a.wiki-mod-link:hover {
  border-color: var(--gold);
  background: var(--surface2);
}
.wiki-mod-item a.wiki-mod-link:hover .wiki-mod-name {
  color: var(--gold);
}
.wiki-mod-name {
  font-weight: 600;
  color: #fff;
  font-size: 1.05rem;
}
.wiki-mod-desc {
  color: #fff;
  font-size: 1rem;
  margin-top: 2px;
}

/* ── Per-modifier page ────────────────────────────────────────────────────── */
.wiki-modifier-classification {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 16px 0;
  border: 1px solid var(--border);
  background: var(--surface);
}
.wiki-modifier-classification.negative {
  border-color: #a24a4a;
  background: #3a1f1f;
}
.wiki-modifier-classification.positive {
  border-color: #4a7a4a;
  background: #1f2f1f;
}
.wiki-mod-description,
.wiki-mod-note {
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 14px 0;
}

/* ── Stat row (used on individual enemy pages) ────────────────────────────── */
.wiki-stat-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.wiki-stat-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 18px;
  min-width: 140px;
}
.wiki-stat-label {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 4px;
}
.wiki-stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
}

/* ── Placeholder / coming soon ────────────────────────────────────────────── */
.wiki-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: #fff;
}
.wiki-placeholder h2 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.wiki-footer {
  text-align: center;
  padding: 24px 28px;
  border-top: 1px solid var(--border);
  color: #fff;
  font-size: 0.95rem;
}

/* ── Enemy link list on overview ──────────────────────────────────────────── */
.wiki-table td a {
  color: var(--gold);
}
.wiki-table td a:hover {
  text-decoration: underline;
}

/* ── Wiki Tooltip ────────────────────────────────────────────────────────── */
#wiki-tip {
  position: fixed;
  z-index: 9999;
  background: #1a1a2e;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 320px;
  padding: 10px 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
#wiki-tip.visible { opacity: 1; }
tr[data-tip] { cursor: default; }

/* ── Narrow table: cap width for 2-column tables (enemy detail pages) ─────── */
.wiki-table-narrow { width: auto; max-width: 420px; }

/* ── Wide table: breaks out of the 1100px main constraint ─────────────────── */
.wiki-table-wide {
  min-width: 100%;
}
.wiki-table-wrap:has(.wiki-table-wide) {
  margin-left: calc(-1 * max(0px, (100vw - 1400px) / 2));
  margin-right: calc(-1 * max(0px, (100vw - 1400px) / 2));
}
.wiki-main:has(.wiki-table-wide) {
  max-width: 1400px;
}

/* ── Column group header (Health / Damage Sensitivity) ────────────────────── */
.wiki-table .col-group-header {
  text-align: center;
  background: var(--surface3);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: #fff;
  padding: 5px 10px;
}
/* Separate the two groups visually */
.wiki-table th[colspan="3"].col-group-header,
.wiki-table .sens-col-first {
  border-left: 2px solid var(--border);
}

/* ── Wiki Search ────────────────────────────────────────────────────────── */

/* Search bar below header on sub-pages */
/* Search box — injected by wiki-search.js into the right side of the single
   header bar (sub-pages) or the stub's header. Hugs the right edge. */
.ws-bar-inner {
  flex: 0 1 504px;       /* compact right-aligned search box; shrinks on narrow viewports */
  margin-left: auto;     /* right-aligned within the bar so it sits opposite the nav */
  position: relative;
  min-width: 0;          /* allow shrink below content width */
}
.ws-input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: #fff;
  font-size: 1rem;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
}
.ws-input:focus {
  border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23c8a84b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
}
.ws-input::placeholder {
  color: #555;
}

/* Hero search — main attraction on home page */
.ws-hero {
  margin: 8px 0 32px;
}
.ws-hero-input {
  width: 100%;
  padding: 20px 28px 20px 56px;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  color: #fff;
  font-size: 1.3rem;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%23555' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 20px center;
}
.ws-hero-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%23c8a84b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
}
.ws-hero-input::placeholder {
  color: #666;
}

/* Search results — dropdown on sub-pages */
.ws-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  max-height: 420px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
/* On home page, results are inline not dropdown */
.wiki-main > .ws-results {
  position: static;
  border: none;
  background: transparent;
  box-shadow: none;
  max-height: none;
  overflow: visible;
  margin-top: 4px;
}
.ws-result {
  display: block;
  padding: 14px 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.ws-result:last-child {
  border-bottom: none;
}
.ws-result:hover {
  background: rgba(200, 168, 75, 0.1);
}
.ws-result-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.ws-result-meta {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}
.ws-result-cat {
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(200, 168, 75, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
}
.ws-result-desc {
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.4;
}
.ws-result-snippet {
  color: #9a9ab0;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 4px;
  font-style: italic;
}
.ws-result mark {
  background: rgba(200, 168, 75, 0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}
.ws-no-results {
  padding: 24px 20px;
  color: #fff;
  text-align: center;
  font-size: 1rem;
}
/* Home page result cards — full width styled cards */
.wiki-main > .ws-results .ws-result {
  padding: 20px 24px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.wiki-main > .ws-results .ws-result:hover {
  border-color: var(--gold);
}
.wiki-main > .ws-results .ws-result-title {
  font-size: 1.15rem;
}

/* ── Mobile responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Hide fixed TOC and authors — they overlap content on narrow screens */
  .wiki-toc { display: none !important; }
  .wiki-authors { display: none !important; }

  /* Mobile TOC: compact "Contents" button in the sticky breadcrumb bar +
     flyout of the page's sections hanging off the header. */
  .wiki-toc-wrap { display: inline-flex; align-items: center; }
  .wiki-toc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface3);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }
  .wiki-toc-btn svg { width: 17px; height: 17px; }
  .wiki-toc-btn.open {
    background: var(--gold);
    border-color: var(--gold);
    color: #0b0b12;
  }

  .wiki-toc-flyout {
    position: absolute;
    top: 100%;
    right: 12px;
    z-index: 120;
    margin-top: 6px;
    min-width: 220px;
    max-width: min(80vw, 340px);
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface2);
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    padding: 6px;
  }
  .wiki-toc-flyout-link {
    display: block;
    padding: 12px 14px;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 6px;
  }
  .wiki-toc-flyout-link:active { background: var(--surface3); }

  /* Consolidated header: nav on row 1, search full-width on row 2 */
  .wiki-header:has(.wiki-back-btn) {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 16px;
  }
  .wiki-header:has(.wiki-back-btn) .ws-bar-inner {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .wiki-back-btn {
    font-size: 1rem;
    overflow: hidden; text-overflow: ellipsis;
  }
  .wiki-home-link { font-size: 1rem; }

  /* Main content: tighter padding */
  .wiki-main { padding: 20px 16px 48px; }
  .wiki-page-title { font-size: 1.5rem; }
  .wiki-section-title { font-size: 1.4rem; }
  .wiki-notice { padding: 14px 16px; gap: 12px; }

  /* Tables: horizontal scroll instead of breaking layout */
  .wiki-content table, .wiki-main section table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wiki-content thead, .wiki-main section thead,
  .wiki-content tbody, .wiki-main section tbody {
    display: table;
    width: 100%;
  }

  /* Stat row: wrap on small screens */
  .wiki-stat-row { flex-wrap: wrap; gap: 8px; }
  .wiki-stat-block { min-width: 100px; flex: 1; }

  /* Bottom CTA: stack vertically */
  .wiki-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    gap: 16px;
  }
  .wiki-cta-text strong { font-size: 1.15rem; }
  .wiki-cta-text span { font-size: 1rem; }
  .wiki-cta-btn { padding: 12px 28px; font-size: 1.05rem; }

  /* Hero search: smaller on mobile */
  .ws-hero-input { font-size: 1rem; padding: 14px 20px 14px 44px; }

}

@media (max-width: 480px) {
  /* Extra small: even tighter */
  .wiki-header { padding: 10px 12px; }
  .wiki-back-btn { font-size: 1rem; }
  .wiki-main { padding: 16px 12px 40px; }
  .wiki-page-title { font-size: 1.3rem; }
  .wiki-section-title { font-size: 1.2rem; }
  .wiki-card { padding: 14px; }
  .wiki-card h3 { font-size: 1.05rem; }
}

/* ── Banner / Toast Notifications (mirrored from style.css for wiki pages) ── */
#banner-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
  pointer-events: none;
}

.banner-toast {
  position: relative;
  width: 400px; /* default medium, overridden by JS */
  max-width: calc(100vw - 48px);
  background: var(--surface2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 16px 40px 16px 16px;
  color: #fff;
  font-size: 13px;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.banner-toast-visible {
  opacity: 1;
  transform: translateX(0);
}

.banner-toast.banner-toast-center {
  transform: scale(0.95);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.banner-toast.banner-toast-center.banner-toast-visible {
  transform: scale(1);
}
.banner-toast.banner-toast-center.banner-toast-hiding {
  transform: scale(0.95);
}

.banner-toast-hiding {
  opacity: 0;
  transform: translateX(100%);
}

.banner-toast-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  opacity: 0.6;
}
.banner-toast-close:hover { opacity: 1; }

.banner-toast-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
}

.banner-toast-message {
  color: #fff;
  line-height: 1.5;
  margin-bottom: 10px;
}

.banner-toast-cta {
  display: inline-block;
  padding: 6px 14px;
  background: var(--gold);
  color: #0b0b12;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.banner-toast-cta:hover { background: #d4b65a; }

.banner-bar {
  width: 100%;
  background: var(--surface2);
  border-bottom: 1px solid var(--gold-dim);
  padding: 10px 48px 10px 16px;
  color: #fff;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 101;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
}
.banner-bar-visible {
  opacity: 1;
  max-height: 80px;
  padding: 10px 48px 10px 16px;
}
.banner-bar-hiding {
  opacity: 0;
  max-height: 0;
  padding: 0 48px 0 16px;
}
.banner-bar-text { color: #fff; }
.banner-bar-text strong { color: var(--gold); }
.banner-bar-cta {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 10px;
  background: var(--gold);
  color: #0b0b12;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
}
.banner-bar-cta:hover { background: #d4b65a; }
.banner-bar-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.6;
  padding: 4px;
}
.banner-bar-close:hover { opacity: 1; }

@media (max-width: 768px) {
  #banner-toast-container {
    top: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    width: auto;
  }
  .banner-toast {
    width: 100% !important;
    max-width: 100%;
    border-radius: var(--radius);
    padding: 12px 36px 12px 12px;
    font-size: 12px;
    transform: translateY(-120%);
  }
  .banner-toast-visible {
    transform: translateY(0);
  }
  .banner-toast-hiding {
    transform: translateY(-120%);
  }
  .banner-toast-title { font-size: 24px !important; margin-bottom: 10px; }
  .banner-toast-message { font-size: 20px !important; margin-bottom: 8px; line-height: 1.5; }
  .banner-toast-cta { font-size: 16px; padding: 6px 14px; }
  .banner-toast-close { font-size: 28px; top: 8px; right: 10px; padding: 8px; }
}

/* ── Ranged weapons pages: wider layout + collapsible per-family rows ─────── */
body.ranged-weapons-page .wiki-main {
  /* Use nearly the full viewport (with a small breathing margin) so the
     17-column table can actually fit. */
  max-width: calc(100vw - 32px);
  padding-left: 16px;
  padding-right: 16px;
}

/* Sticky thead requires every ancestor up to the viewport to have
   overflow:visible on BOTH axes (per CSS overflow spec, setting one axis to
   non-visible coerces the other to auto, creating a scroll container that
   captures the sticky element). The wrap therefore can't clip in any
   direction — if the table is wider than the viewport, the page itself
   scrolls horizontally instead. */
body.ranged-weapons-page .rw-table-wrap {
  margin-bottom: 24px;
  overflow: visible;
}
.rw-table {
  font-size: 0.85rem;
  table-layout: auto;
  /* Browser will distribute width — keep a fixed width so it definitely
     consumes the available room and doesn't render at intrinsic width. */
  width: 100%;
}
/* Compact cells — the table has 17 columns; standard wiki-table padding is
   too loose for this many. */
.rw-table th,
.rw-table td {
  padding: 6px 6px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
/* Damage Falloff is the longest free-form column. The source data uses <br>
   to break each zone onto its own line; reserve enough width that "20-23m:
   100% → 75%"-style segments don't wrap mid-zone, but cap the column so it
   can't dominate the table. */
.rw-table th:last-child,
.rw-table td.falloff-cell {
  min-width: 160px;
  max-width: 240px;
  white-space: normal;
  line-height: 1.35;
}
/* Numeric / short stat columns can be narrow and centered for compactness. */
.rw-table:not(.wt-expanded) tbody td:nth-child(n+4):not(:last-child) { white-space: nowrap; }

/* Generic tooltip-bearing stat cell — shared by the RPM formula cells and
   the per-stance spread cells. Shows it's hover-interactive via dotted
   underline + cursor:help + a small ⓘ glyph. */
.rw-table td.tip-cell {
  cursor: help;
  text-decoration: underline dotted rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}
.rw-table td.tip-cell .tip-info {
  margin-left: 4px;
  color: #c8a84b;
  font-size: 0.85em;
}

/* Inline tooltip annotation — applied via the polished/wiki editor's Tooltip mark.
   Matches .rpm-cell visual treatment: dotted underline + gold info icon. The hover
   popup is driven by /js/wiki-tooltips.js (shared with rpm-cell's .rw-tip styling). */
.info-tooltip {
  cursor: help;
  text-decoration: underline dotted rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}
.info-tooltip::after {
  content: 'ⓘ';
  margin-left: 4px;
  color: #c8a84b;
  font-size: 0.85em;
}

/* Custom hover tooltip for the burst-RPM formula. Positioned by JS, kept
   out of the OS-level title delay. */
.rw-tip {
  position: fixed;
  z-index: 200;
  background: var(--surface2);
  color: #fff;
  border: 1px solid #c8a84b;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  max-width: 540px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-variant-numeric: tabular-nums;
  /* pre-line so embedded "\n" line-breaks in the tooltip text (e.g. the
     spread-cell "Min: 1.04°\nMax: 2.10°") render as actual breaks while
     long lines still wrap. */
  white-space: pre-line;
}
.rw-tip.visible { opacity: 1; }

/* Vertical column dividers (subtle). */
.rw-table th,
.rw-table td {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.rw-table th:last-child,
.rw-table td:last-child {
  border-right: none;
}

/* Sticky column headers — top offset is set per-page from JS via --sticky-top
   (header height + search bar height). Falls back to 60px if the script hasn't
   measured yet. */
.rw-table thead th {
  position: sticky;
  top: var(--sticky-top, 60px);
  z-index: 5;
  background: var(--surface2);
  /* Sticky cells lose their normal border-bottom in some browsers; re-add via
     box-shadow so the line stays visible while scrolling. */
  box-shadow: inset 0 -2px 0 var(--border);
}

/* Summary row = the visible "collapsed" representation of a weapon family. */
.rw-table tr.fam-summary {
  cursor: pointer;
  background: var(--surface2);
  border-top: 2px solid var(--border);
}
.rw-table tr.fam-summary:hover td { background: rgba(200, 168, 75, 0.10); }
.rw-table tr.fam-summary:focus-visible {
  outline: 2px solid #c8a84b;
  outline-offset: -2px;
}
.rw-table tr.fam-summary td {
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 600;
}
.rw-table tr.fam-summary td.fam-name-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}
.fam-toggle {
  color: #c8a84b;
  font-size: 0.9rem;
  display: inline-block;
  width: 12px;
  /* Nudge the arrow down a hair so it sits on the family-name baseline
     rather than the very top of the stack. */
  margin-top: 4px;
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.fam-summary.expanded .fam-toggle { transform: rotate(90deg); }
.fam-name-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;          /* allow flex child to shrink + wrap */
  flex: 1 1 auto;
}
.fam-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #c8a84b;
}
.fam-best-variant {
  font-size: 0.9rem;
  color: #fff;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 2px;
}

/* Variant rows = expanded children. Visually inset so they read as a sub-group. */
.rw-table tr.fam-variant td.variant-cell {
  padding-left: 28px;
  color: #fff;
  font-weight: 400;
}

/* Constrain the long-text columns so they don't dominate the table.
   First column (Variant Name / family summary) wraps onto 2 lines if needed
   instead of stretching the row. Specialty likewise wraps. */
.rw-table:not(.wt-expanded) th:first-child,
.rw-table:not(.wt-expanded) td:first-child {
  min-width: 150px;
  max-width: 220px;
  white-space: normal;
}
/* Heavy weapons page has one fewer column (no Reload) — let the variant
   name column claim the freed width so the long Heroic skin names fit on
   a single line. */
body.weapons-page-heavy .rw-table:not(.wt-expanded) th:first-child,
body.weapons-page-heavy .rw-table:not(.wt-expanded) td:first-child {
  min-width: 220px;
  max-width: 320px;
}
.rw-table td.fam-name-cell,
.rw-table td.variant-cell {
  word-break: break-word;
}
/* Specialty (3rd column) — narrow enough to fit "Grenade Launcher" on one
   line, allow longer strings to wrap. */
.rw-table:not(.wt-expanded) th:nth-child(3),
.rw-table:not(.wt-expanded) td:nth-child(3) {
  max-width: 110px;
  white-space: normal;
}
.rw-table tr.fam-variant.alt-fire td {
  background: rgba(200, 168, 75, 0.05);
}
.rw-table tr.fam-variant.alt-fire td.alt-fire-name {
  padding-left: 48px;
  color: #c8a84b;
}
.rw-table .charged-tag {
  color: #c8a84b;
}

/* Hub page: weapon-category cards reusing wiki-card grid styling */
.weapon-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Spreadsheet-style data tables (wiki-tables.js): the standard Google Sheets /
   Excel AutoFilter menu on every column header, plus bottom sheet tabs. The
   table itself is unchanged; the only additions are a small ▾ per header, the
   dropdown menu, a filter status line, and the tab strip.
   ══════════════════════════════════════════════════════════════════════════ */

/* Header becomes a menu trigger. Keep it visually identical until hovered. */
th.gsx-th { cursor: pointer; user-select: none; }
th.gsx-th:hover { color: var(--gold); }
th.gsx-th.gsx-active { color: var(--gold); }
.gsx-fbtn { color: #7a7a92; font-size: 0.85em; margin-left: 4px; }
th.gsx-th:hover .gsx-fbtn,
th.gsx-th.gsx-active .gsx-fbtn { color: var(--gold); }
.gsx-caret { color: var(--gold); font-size: 0.8em; }

/* The dropdown menu — one shared element, positioned under the clicked header. */
.gsx-menu {
  position: fixed; z-index: 300; width: 258px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 12px 34px rgba(0,0,0,0.6);
  padding: 6px; font-size: 0.92rem;
  /* Column layout so a max-height set from the visual viewport (see openMenu in
     wiki-tables.js) squeezes the value list rather than pushing the OK/Cancel
     footer off the bottom of the screen. overflow-y is a backstop for the extreme
     case where even the fixed chrome exceeds the budget. */
  display: flex; flex-direction: column; overflow-y: auto;
}
.gsx-menu[hidden] { display: none; }
.gsx-mi {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  background: none; border: none; color: #fff; font-size: 0.95rem;
  border-radius: 5px; cursor: pointer;
}
.gsx-mi:hover { background: rgba(200,168,75,0.14); color: var(--gold); }
.gsx-sep { height: 1px; background: var(--border); margin: 5px 2px; }
.gsx-lab {
  padding: 4px 12px; color: #fff; font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.gsx-search {
  width: calc(100% - 8px); margin: 2px 4px 6px; padding: 7px 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  color: #fff; font-size: 0.9rem; outline: none;
}
.gsx-search:focus { border-color: var(--gold); }
.gsx-search::placeholder { color: #777; }
.gsx-selrow { display: flex; gap: 14px; padding: 2px 12px 6px; }
.gsx-selrow a { color: var(--gold); font-size: 0.85rem; cursor: pointer; }
.gsx-selrow a:hover { text-decoration: underline; }
/* flex: 0 1 auto lets this shrink below 210px when the menu is height-clamped on a
   short viewport; everything else in the menu is fixed-height chrome. */
.gsx-list { max-height: 210px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px; }
.gsx-ci {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: 5px; cursor: pointer; color: #fff; font-size: 0.92rem;
}
.gsx-ci:hover { background: rgba(255,255,255,0.06); }
.gsx-ci input { accent-color: var(--gold); width: 15px; height: 15px; flex: 0 0 auto; }
.gsx-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 8px 6px 2px; border-top: 1px solid var(--border); margin-top: 4px;
}
.gsx-foot button {
  padding: 7px 16px; border-radius: 5px; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: #fff;
}
.gsx-foot button:hover { border-color: var(--gold); }
.gsx-foot .ok { background: var(--gold); border-color: var(--gold); color: #0b0b12; }

/* When a filter is active, the weapon summary row acts as a plain group-header
   banner (its "best variant" stats may be filtered out, so hide them and the
   best-variant subtitle — keep only the weapon name). */
.rw-table tr.fam-summary.gsx-group-header td:not(:first-child) { visibility: hidden; }
.rw-table tr.fam-summary.gsx-group-header .fam-best-variant { display: none; }

/* Top tab bar — every data-table page is a direct tab (no flyout). A full-width
   strip pinned directly under the site header, so it sits in the exact same spot
   on every page (independent of that page's content width). Scrolls horizontally
   if it overflows, with subtle dividers between sections and a gold underline on
   the current page. */
.gsx-tabs {
  position: sticky;
  top: calc(var(--banner-offset, 0px) + var(--wt-header-h, 66px));
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0 24px;
}
.gsx-tab-list { display: flex; align-items: stretch; gap: 0; width: max-content; min-width: 100%; }
.gsx-tab {
  display: flex; align-items: center;
  padding: 10px 15px; color: #fff; font-size: 1rem; font-weight: 600;
  white-space: nowrap; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.gsx-tab:hover { color: var(--gold); text-decoration: none; }
.gsx-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.gsx-tab-div { flex: 0 0 auto; align-self: center; width: 1px; height: 20px; background: var(--border); margin: 0 8px; }

/* Nested vs Expanded view toggle (weapon pages) + the expanded split-column table. */
.wt-viewbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.wt-viewbar-label { color: #fff; font-size: 1rem; font-weight: 600; }
.wt-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.wt-seg-btn {
  padding: 7px 16px; background: var(--surface); border: none; color: #fff;
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.wt-seg-btn + .wt-seg-btn { border-left: 1px solid var(--border); }
.wt-seg-btn:hover { color: var(--gold); }
.wt-seg-btn.active { background: var(--gold); color: #0b0b12; }

/* Expanded table: split name columns (class-based widths so the leading
   row-filter column doesn't disturb them). */
.rw-table.wt-expanded td.wt-x-weapon { color: var(--gold); font-weight: 600; }
.rw-table.wt-expanded th.wt-x-weapon,
.rw-table.wt-expanded td.wt-x-weapon { min-width: 150px; max-width: 220px; white-space: normal; }
.rw-table.wt-expanded th.wt-x-variant,
.rw-table.wt-expanded td.wt-x-variant { min-width: 120px; max-width: 200px; white-space: normal; }
.rw-table.wt-expanded th.wt-x-mode,
.rw-table.wt-expanded td.wt-x-mode { min-width: 84px; max-width: 140px; white-space: normal; }
/* Keep numeric stat columns (Dmg Type onward = 7th col in this layout) on one line. */
.rw-table.wt-expanded tbody td:nth-child(n+7):not(:last-child) { white-space: nowrap; }

/* The thin row-filter column: header is just a funnel icon that opens the
   standard filter menu (which lists every row as weapon : variant : stance). */
.rw-table.wt-expanded th.wt-x-rowfilter,
.rw-table.wt-expanded td.wt-x-rowfilter {
  width: 34px; min-width: 34px; max-width: 34px;
  text-align: center; padding: 6px 4px;
}
.rw-table.wt-expanded th.wt-x-rowfilter { cursor: pointer; color: #cfcfe0; }
.rw-table.wt-expanded th.wt-x-rowfilter:hover,
.rw-table.wt-expanded th.wt-x-rowfilter.gsx-active { color: var(--gold); }
.rw-table.wt-expanded th.wt-x-rowfilter .gsx-fbtn,
.rw-table.wt-expanded th.wt-x-rowfilter .gsx-caret { display: none; }
.wt-funnel { vertical-align: middle; }
/* The expanded table is wider than the nested one, so it scrolls horizontally
   inside its own wrapper (the nested table's wrap must stay overflow:visible for
   its sticky header, so it can't do this). */
/* The expanded table scrolls with the whole page (no inner scroll area): its
   header pins to the top of the window like the nested table's, and if it's
   wider than the viewport the page itself scrolls sideways (see the
   body.ranged-weapons-page overflow-x rule below). */
.wt-expanded-wrap { overflow: visible; margin-bottom: 24px; }
/* Let the wide expanded table push the page's own horizontal scrollbar instead
   of being clipped by the global body{overflow-x:hidden}. */
body.ranged-weapons-page { overflow-x: visible; }

/* ============================================================================
   Mobile horizontal-overflow fix
   body { overflow-x: hidden } (~line 29) and
   body.ranged-weapons-page { overflow-x: visible } (~line 1395) stay as they
   are; they remain correct for desktop. This block overrides the second one
   below 900px so a phone never gets handed an 1800px document.
   ========================================================================== */

@media (max-width: 900px) {
  /* The page is never the sideways scroller. */
  body.ranged-weapons-page { overflow-x: clip; }

  /* Each wide table scrolls sideways inside its own wrapper. The selectors are
     deliberately specific: per-page <style> blocks and
     body.ranged-weapons-page .rw-table-wrap (0,2,1) re-declare overflow: visible
     and would otherwise win, which locks the Classic view out of its columns.
     The table keeps its natural width; capping the TABLE squashes the columns
     instead of scrolling them, so only the WRAPPER gets max-width.

     The height is deliberately NOT bounded. overflow-x: auto does make this a
     scroll container on both axes, but with an unbounded height its scrollHeight
     equals its clientHeight, so there is no vertical scrollport and a vertical
     drag anywhere — including over the table — scrolls the PAGE. One scroll,
     which is the whole point. Do not add max-height or overscroll-behavior here:
     both reintroduce an independent inner scroll region.

     The cost is that the header row cannot pin to the window: position: sticky
     resolves against the nearest scrolling ancestor, which is now this wrapper,
     and an unbounded wrapper has no vertical scrollport to pin against. Hence
     top: auto below. The pinned header is restored structurally instead, by the
     .fh-* bar that wiki-tables.js builds outside the wrapper (section 5). */
  .wiki-main .wiki-table-wrap,
  .wiki-main .wt-expanded-wrap,
  .wiki-main div.wiki-table-wide,
  body.ranged-weapons-page .wiki-main .rw-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: clip;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
  }

  /* --sticky-top is measured against the WINDOW's chrome (60-150px). Left in
     place it would render the header row that far DOWN inside the wrapper, on
     top of the first data rows. Drop the vertical anchor. !important because
     .rw-table thead th (line ~1136) and .enemy-overview thead th set these
     offsets at higher specificity from per-page <style> blocks. */
  .wiki-main .wiki-table-wrap thead th,
  .wiki-main .wt-expanded-wrap thead th,
  .wiki-main div.wiki-table-wide thead th,
  body.ranged-weapons-page .wiki-main .rw-table-wrap thead th {
    top: auto !important;
  }

  /* enemies/index.html sets `body { overflow-x: auto }` in its own <style>
     block so the wide table can push the page's scrollbar on desktop. That is
     a sideways-panning page on a phone. The page's <style> is parsed after this
     stylesheet, so plain `body` would lose on order — `html body` (0,0,2) wins
     on specificity instead. */
  html body { overflow-x: clip; }

  .wiki-main:has(.wiki-table-wide) { max-width: 100%; }

  /* Long unbreakable tokens push the whole document wider than the phone.
     Datamine identifiers turn up throughout the wiki as headings and inline
     code; "PveMutatorNoAmmoCratesMoreAmmoRefills" in an h3 on
     core-game-mechanics/item-drops-and-pickups measured 404px inside a 369px
     column, which widened the document to 416px. Kept off table cells so it
     cannot change column sizing. */
  /* Body-copy tables (enemy stat blocks, mechanics pages). The rule at ~line
     805 blockifies them for horizontal scroll and then re-declares thead and
     tbody as `display: table; width: 100%`, which makes the header row and the
     data rows two SEPARATE tables, each sizing its own columns independently.
     On enemies/venom-cannon-warrior the difficulty table's header cells sat at
     13/130/217/319/428 while its data cells sat at 13/145/211/263/315.

     wiki-sticky-head.js gives each of these tables a .wiki-auto-wrap parent, so
     the table can go back to being one table and the wrapper takes the sideways
     scroll. These selectors carry .wiki-main so they outrank the blockify rule
     (0,1,1) without !important. */
  .wiki-main .wiki-auto-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
  }
  /* Applies to the hand-authored wrappers as well, not just the generated one:
     the enemy stat tables already sit in a .wiki-table-wrap, and the blockify
     rule matches on `.wiki-main section table` regardless of any wrapper, so
     they were being split too. */
  .wiki-main .wiki-auto-wrap > table,
  .wiki-main .wiki-table-wrap > table,
  .wiki-main div.wiki-table-wide > table {
    display: table;
    width: max-content;
    min-width: 100%;
    max-width: none;
  }
  .wiki-main .wiki-auto-wrap > table > thead,
  .wiki-main .wiki-table-wrap > table > thead,
  .wiki-main div.wiki-table-wide > table > thead { display: table-header-group; width: auto; }
  .wiki-main .wiki-auto-wrap > table > tbody,
  .wiki-main .wiki-table-wrap > table > tbody,
  .wiki-main div.wiki-table-wide > table > tbody { display: table-row-group; width: auto; }
  .wiki-main .wiki-auto-wrap > table > tfoot,
  .wiki-main .wiki-table-wrap > table > tfoot,
  .wiki-main div.wiki-table-wide > table > tfoot { display: table-footer-group; width: auto; }

  /* The current-page crumb is white-space: nowrap for the desktop header. A
     long title then cannot wrap: "Sniper's Camo Cloak Damage Buff Mechanics"
     measured 415px on a 393px phone. --sticky-top is measured from offsetHeight
     at runtime, so a taller header is picked up automatically. */
  .wiki-crumb-current { white-space: normal; overflow-wrap: break-word; }

  .wiki-content h1, .wiki-content h2, .wiki-content h3,
  .wiki-content h4, .wiki-content h5, .wiki-content h6,
  .wiki-content p, .wiki-content li, .wiki-content dt, .wiki-content dd,
  .wiki-content blockquote,
  .wiki-main section h1, .wiki-main section h2, .wiki-main section h3,
  .wiki-main section h4, .wiki-main section h5, .wiki-main section h6,
  .wiki-main section p, .wiki-main section li {
    overflow-wrap: break-word;
  }

  /* Enemy detail pages: .wiki-overview-grid is an inline display:flex row of
     three stat tables side by side, with no wrap. Different cause, same
     symptom — 865px document on a 390px phone, and the 2nd and 3rd tables were
     simply clipped away. The inline style only sets display and gap, so a
     stylesheet flex-wrap wins without !important. */
  .wiki-overview-grid { flex-wrap: wrap; }
  .wiki-overview-grid > div { min-width: 0; flex: 1 1 100%; }

  /* Chrome for the pinned header bar built by wiki-tables.js. .fh-outer is
     sticky inside .fh-block, and .fh-block wraps only the table, so the bar
     pins under the site chrome exactly while the table is on screen and
     unpins on its own when the table ends — no per-frame positioning maths.
     height: 0 keeps it out of flow so it overlays the real header rather than
     displacing it. Inert if the module never runs. */
  .fh-block { position: relative; }
  .fh-outer { position: sticky; top: var(--fh-top, 146px); height: 0; z-index: 60; }
  .fh-clip  { overflow: hidden; width: 100%; background: #1b1b28;
              box-shadow: 0 3px 8px rgba(0, 0, 0, .55); }
  .fh-table { will-change: transform; }
}