/* WoW Forever DB: twilight vellum.
   Night-blue vellum, antique gold rules, verdigris for "live", and each class's own colour as --c.
   No inline styles anywhere (strict CSP): per-class and per-tree colours come from classes.css. */

@font-face {
  font-family: "Fell SC";
  src: url("/fonts/im-fell-english-sc-normal-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-normal-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow SC";
  src: url("/fonts/barlow-semi-condensed-normal-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow SC";
  src: url("/fonts/barlow-semi-condensed-normal-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
/* Fallbacks scaled to each web font's width and line box, so the swap does not shift layout (SEO-M8,
   UX-P3-08). Generated by tools/font_fallbacks.py from the woff2 files; rerun it when a font changes. */
@font-face {
  font-family: "Literata Fallback";
  src: local("Times New Roman"), local("Liberation Serif"), local("Tinos");
  size-adjust: 118.65%;
  ascent-override: 99.20%;
  descent-override: 25.96%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Fell SC Fallback";
  src: local("Times New Roman"), local("Liberation Serif"), local("Tinos");
  size-adjust: 108.12%;
  ascent-override: 83.73%;
  descent-override: 33.60%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Barlow SC Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 88.66%;
  ascent-override: 112.79%;
  descent-override: 22.56%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Barlow SC Caps Fallback";
  src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 500 700;
  size-adjust: 76.97%;
  ascent-override: 129.93%;
  descent-override: 25.99%;
  line-gap-override: 0.00%;
}

:root {
  /* Every colour is light-dark(light, dark): color-scheme picks one, from the device unless the reader
     chose (data-theme, set by js/head-init.js before first paint). "Vellum by day", the night sky by night. */
  --ink-0: light-dark(#f5efe0, #0d0f17);
  --ink-1: light-dark(#fbf7ee, #131726);
  --ink-2: light-dark(#f0e8d6, #1a1f31);
  --ink-3: light-dark(#e6dbc3, #242a40);
  --line: light-dark(#dccfb2, #2e3550);
  --line-2: light-dark(#c9b994, #3d4566); /* decorative rules only */
  --line-ui: light-dark(
    #8c7b57,
    #616a8d
  ); /* the edge of a control: 3:1 on ink-1 and ink-2 (WCAG 1.4.11) */
  /* The sticky masthead's height, measured at each of its layouts (tests/browser/test_css_a11y.py fails when
     one drifts): one row above 700 px, two rows at 700 px and under, tighter at 640 and at 480. Table heads
     stick below it, the theme popover opens under it, and anchored headings scroll clear of it. */
  --mast-h: 54px;
  --anchor-gap: 22px; /* air between the masthead and a heading a link scrolled to */
  /* Text: 4.5:1 on ink-0 to ink-2 in both themes (tests/test_contrast.py). */
  --text: light-dark(#221c12, #e8e2d3);
  --muted: light-dark(#5b5242, #aaa392);
  --faint: light-dark(#675d4a, #8d8879);
  --head: light-dark(#2b2112, #f4ead0);
  --strong: light-dark(#1c160d, #f6f0e1);
  --gold: light-dark(#7a5814, #d4b26a);
  --gold-2: light-dark(#6b4a0c, #f1d99a);
  --gold-dim: light-dark(#6f5829, #9d8555);
  --link-hover: light-dark(#3d2a05, #fff3cf);
  --pressed: light-dark(#1c160d, #fff7e2);
  --code: light-dark(#1d5146, #d8f0e9);
  --blue-text: light-dark(#1d58a5, #9cc5f2);
  /* The accents as text; as fills (below) they stay bright in both themes, under dark text. */
  --verd-ink: light-dark(#1d6b5c, #63b3a2);
  --sky-ink: light-dark(#2554a0, #79a5e6);
  --amber-ink: light-dark(#835400, #e0a646);
  --rose-ink: light-dark(#9e3450, #d9798f);
  --mast-bg: light-dark(rgb(245 239 224 / 0.92), rgb(13 15 23 / 0.92));
  --ic-edge: light-dark(#8c7b57, #000);
  /* Fills, the same in both themes, and the text on them. */
  --verd: #63b3a2;
  --sky: #79a5e6;
  --amber: #e0a646;
  --rose: #d9798f;
  --violet: #a68bdc;
  --ember: #d9674f;
  --gold-fill: #d4b26a;
  --muted-fill: #aaa392;
  --slate-fill: #8d93a8;
  --frost-fill: #b9c2d9;
  --on-fill: #0d0f17;
  --c: var(--gold);
  --t: var(--gold);
  --radius: 10px;
  --display: "Fell SC", "Fell SC Fallback", "Iowan Old Style", Georgia, serif;
  --body: "Literata", "Literata Fallback", Georgia, "Times New Roman", serif;
  --label: "Barlow SC", "Barlow SC Fallback", "Arial Narrow", system-ui, sans-serif;
  --label-caps:
    "Barlow SC", "Barlow SC Caps Fallback", "Arial Narrow", system-ui, sans-serif; /* uppercase labels */
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mast-h) + var(--anchor-gap));
}
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font:
    1.0625rem / 1.62 var(--body); /* 17px at the browser's default size, and it follows a larger one */
  font-optical-sizing: auto;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgb(99 179 162 / 0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgb(212 178 106 / 0.06), transparent 60%);
  background-attachment: fixed;
}
img {
  max-width: 100%;
}
a {
  color: var(--gold-2);
  text-decoration-color: color-mix(in srgb, var(--gold-2) 40%, transparent);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}
:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
  border-radius: 3px;
}
b,
strong {
  font-weight: 650;
  color: var(--strong);
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--head);
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}
h1 {
  font-size: clamp(2.1rem, 5vw, 3.3rem);
}
h2 {
  font-size: 1.65rem;
  margin-top: 1.2em;
}
h3 {
  font-size: 1.28rem;
}
/* Section anchors (UX-P3-06, anchors.py): a heading's text links to itself; a # shows on hover and
   focus, and stays out of its accessible name where the browser supports alt text for content. */
.hl {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  min-height: 24px;
} /* WCAG 2.5.8 on a short heading */
.hl:hover::after,
.hl:focus-visible::after {
  content: " #";
  /* biome-ignore lint/suspicious/noDuplicateProperties: a fallback for browsers without alt text */
  content: " #" / "";
  color: var(--gold-dim);
}
.hl-row {
  display: inline-block;
  min-width: 24px;
  margin-left: 2px;
  text-align: center;
  color: var(--gold-dim);
  text-decoration: none;
  visibility: hidden;
}
tr:hover .hl-row,
tr:focus-within .hl-row,
.hl-row:focus-visible {
  visibility: visible;
}
@media (hover: none) {
  .hl-row {
    visibility: visible;
  }
} /* a touch screen has no hover to reveal it */
h4 {
  font-size: 1.1rem;
}
p {
  margin: 0 0 0.9em;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  background: var(--gold);
  color: var(--ink-0);
  padding: 8px 14px;
  border-radius: 6px;
}
.skip:focus {
  top: 12px;
}
main:focus {
  outline: none;
}

/* masthead */
.mast {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--mast-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgb(212 178 106 / 0.14);
}
.mast-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-2);
  text-decoration: none;
  font: 1.35rem / 1 var(--display);
  letter-spacing: 0.03em;
}
.sigil {
  width: 26px;
  height: 26px;
  color: var(--gold);
}
.sigil circle {
  stroke: var(--ink-0);
}
.mast-nav {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.mast-nav a {
  font: 600 0.95rem / 1 var(--label-caps);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 6px;
  display: block;
}
.mast-nav a:hover,
.mast-nav a[aria-current] {
  color: var(--gold-2);
  background: var(--ink-2);
}

.crumbbar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.crumbs {
  margin: 0;
  padding: 0;
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font: 500 0.86rem / 1.4 var(--label);
  letter-spacing: 0.04em;
  color: var(--faint);
}
/* Every crumb sits on the 24 px line its links get from the tap-target rule below, the current page too. */
.crumbs li {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.crumbs li + li::before {
  content: "›";
  margin-right: 6px;
  color: var(--gold-dim);
}
.crumbs a {
  color: var(--muted);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--gold-2);
}

/* hero */
.hero {
  max-width: 1180px;
  margin: 14px auto 0;
  padding: 0 16px;
}
.hero-in {
  position: relative;
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 30px 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background:
    radial-gradient(
      520px 260px at 0% 0%,
      color-mix(in srgb, var(--c) 30%, transparent),
      transparent 70%
    ),
    linear-gradient(180deg, var(--ink-2), var(--ink-1));
}
.hero-home .hero-in,
.hero:not(:has(.tabs)) .hero-in {
  border-radius: var(--radius);
}
.hero-in::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c), var(--gold) 40%, transparent);
}
.hero .ic-lg {
  border-radius: 12px;
  border: 2px solid var(--c);
  box-shadow:
    0 0 0 4px var(--ink-0),
    0 0 28px color-mix(in srgb, var(--c) 45%, transparent);
  flex: none;
}
.hero h1 {
  margin-bottom: 0.2em;
}
.eyebrow {
  font: 600 0.8rem / 1.2 var(--label-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: light-dark(color-mix(in oklab, var(--c) 50%, #000), var(--c));
  margin: 0 0 0.4em;
}
.hero-home .hero-in {
  padding: 46px 32px;
}
.hero-compact .hero-in {
  padding: 18px 24px 16px;
  gap: 16px;
}
.hero-compact .ic-lg {
  width: 48px;
  height: 48px;
  border-radius: 9px;
}
.hero-compact h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: 0.1em;
}
.hero-home h1 {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  color: var(--gold-2);
}

/* class tabs */
.tabs {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--ink-1);
  overflow-x: auto;
  scrollbar-width: thin;
}
/* A row that scrolls fades at its right edge, so the reader sees there is more (UX-P2-10). */
.tabs.scrolls {
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.tabs ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0 8px;
  min-width: max-content;
}
.tabs a {
  display: block;
  padding: 12px 13px 11px;
  font: 600 0.9rem / 1 var(--label-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tabs a:hover {
  color: var(--text);
}
.tabs a[aria-current] {
  color: var(--gold-2);
  border-bottom-color: var(--c);
}
/* Spec pages: their own tab row under the class tabs. */
.tabs:has(+ .subtabs) {
  border-radius: 0;
}
.subtabs {
  background: var(--ink-0);
}
.subtabs a {
  padding: 10px 13px 9px;
  font-size: 0.82rem;
}
.go-row {
  margin: 12px 0 0;
  font: 600 0.85rem / 1.6 var(--label);
  letter-spacing: 0.04em;
}
details.more > summary {
  cursor: pointer;
  list-style-position: inside;
}

/* body column */
.guide {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 16px 40px;
}
.sec {
  margin-top: 26px;
}
.sec > h2:first-child {
  margin-top: 0;
}
.lede {
  font-size: 1.12rem;
}
.note {
  color: var(--muted);
  font-size: 0.95rem;
}
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 0 34px;
}
ul.tight,
ol.tight {
  margin: 0 0 1em;
  padding-left: 1.2em;
}
ul.tight li {
  margin: 0.32em 0;
}
ul.tight li::marker {
  color: var(--gold-dim);
}
details.how {
  margin: -0.4em 0 1em;
  color: var(--muted);
}
details.how summary {
  cursor: pointer;
  font: 600 0.86rem / 1.6 var(--label-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.more {
  font-size: 0.95rem;
}
.open-all {
  margin: 0 0 1em;
}
/* The spell filter's empty state (site.js): it keeps the space the tables left, so the footer does not jump up. */
.no-match {
  min-height: 12em;
  padding: 1em 0;
}
.no-match p {
  margin: 0 0 0.6em;
  font-size: 1.05rem;
}

/* icons and references */
.ic {
  vertical-align: -3px;
  border-radius: 4px;
  border: 1px solid var(--ic-edge);
  box-shadow: 0 0 0 1px var(--line-2);
  background: var(--ink-3);
}
.ic-xs {
  width: 18px;
  height: 18px;
}
.ic-sm {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}
.ic-md {
  width: 40px;
  height: 40px;
}
.ic-lg {
  width: 56px;
  height: 56px;
}
.ic-none {
  display: inline-block;
}
.ref {
  white-space: nowrap;
  text-decoration: none;
}
/* A crosslink keeps its icon on its word's line (S-003 2.10). */
.ml,
.ent {
  white-space: nowrap;
}
:is(.ref, .ml, .ent) > .ic:first-child {
  margin-right: 4px;
}
a.ref b {
  color: var(--gold-2);
  border-bottom: 1px dotted color-mix(in srgb, var(--gold-2) 50%, transparent);
}
a.ref:hover b {
  border-bottom-style: solid;
}

/* chips */
.chip {
  display: inline-block;
  font: 600 0.72rem / 1 var(--label-caps);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 7px 3px;
  border-radius: 99px;
  vertical-align: 2px;
  white-space: nowrap;
}
.cert {
  border: 1px solid currentColor;
  background: transparent;
}
.c-live {
  color: var(--verd-ink);
}
.c-announced {
  color: var(--sky-ink);
}
.c-unconfirmed {
  color: var(--amber-ink);
}
.c-rumoured {
  color: var(--rose-ink);
}
.c-classic {
  color: var(--muted);
}
.c-untested {
  color: var(--amber-ink);
}
.c-tested {
  color: var(--verd-ink);
}
.chg {
  color: var(--on-fill);
  background: var(--muted-fill);
}
.g-new {
  background: var(--verd);
}
.g-changed {
  background: var(--gold-fill);
}
.g-reworded {
  background: var(--slate-fill);
}
.g-baseline {
  background: var(--violet);
}
.g-earlier {
  background: var(--sky);
}
.g-renamed {
  background: var(--amber);
}
.g-race {
  background: var(--rose);
}
.g-talent {
  background: var(--frost-fill);
}
.g-same {
  background: var(--ink-3);
  color: var(--muted);
}
.g-added {
  background: var(--verd);
}
.g-modified {
  background: var(--gold-fill);
}
.g-moved {
  background: var(--sky);
}
.legend-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  display: grid;
  gap: 8px;
}
.legend-list .chip {
  min-width: 108px;
  text-align: center;
  margin-right: 8px;
}
/* A recipe's skill-up colours: always the word and the number, outlined in the colour, never colour alone (S-019). */
.sk {
  border: 1px solid currentColor;
  background: transparent;
}
.sk-orange {
  color: var(--amber-ink);
}
.sk-yellow {
  color: var(--gold-2);
}
.sk-green {
  color: var(--verd-ink);
}
.sk-grey {
  color: var(--muted);
}
.skills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.role-tag {
  font: 500 0.8rem / 1 var(--label);
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
}

/* tables */
.tablewrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-1);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
thead th {
  font: 600 0.8rem / 1.2 var(--label-caps);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--ink-2);
}
/* A scroll box can be scrolled from the keyboard (UX-P1-04); site.js drops the tab stop when it fits. */
.tablewrap:focus-visible,
.macro pre:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
}
/* Column heads stay in view on wide screens. Only a table that fits (site.js marks it) can stick:
   a scroll box is the sticky element's scroll container, so the page scroll would not move it. */
@media (min-width: 900px) {
  .tablewrap.fits {
    overflow: visible;
  }
  .tablewrap.fits thead th {
    position: sticky;
    top: var(--mast-h);
    z-index: 1;
  }
}
tbody tr:last-child > * {
  border-bottom: 0;
}
tbody th {
  font-weight: 650;
  color: var(--strong);
}
tbody th small,
td small {
  display: block;
  font: 500 0.8rem / 1.3 var(--label);
  color: var(--faint);
  letter-spacing: 0.03em;
}
td p:last-child {
  margin-bottom: 0;
}
.pros-cons {
  table-layout: fixed;
}
.pros-cons th:first-child {
  color: var(--verd-ink);
}
.pros-cons td:first-child {
  border-right: 1px solid var(--line);
}
.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ic-cell {
  width: 44px;
  padding-right: 0;
}
tr:target,
li:target {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
/* Beyond the reader's level: quieter colour, never faded text (UX-P1-05); the Level column says why. */
tr.later > * {
  color: var(--muted);
  background: var(--ink-0);
}
tr.later .ic {
  filter: grayscale(0.85);
}
table.spells .ranks {
  font: 500 0.84rem / 1.45 var(--label);
  color: var(--muted);
  letter-spacing: 0.02em;
}
table.spells .ranks b {
  color: var(--text);
  font-weight: 600;
}
.spell-tab h2 .n {
  font: 600 0.85rem / 1 var(--label);
  color: var(--faint);
  vertical-align: middle;
}
.jump {
  font: 500 0.95rem / 1.6 var(--label);
  letter-spacing: 0.03em;
}
.removed li {
  margin: 0.5em 0;
}

/* controls */
/* Script-only parts stay hidden until head-init.js sets .js. They show with the display their own rule gives
   them, so a component needs no exception, and `hidden` (below) still hides them (L-14). */
:root:not(.js) [data-js] {
  display: none;
}
[hidden] {
  display: none !important;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 14px 0 18px;
}
.seg-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.seg-lbl,
.lvl > span,
.filters label > span,
.range-form label > span,
.pick > span {
  font: 600 0.78rem / 1 var(--label-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-ui);
  border-radius: 8px;
  overflow: hidden;
}
.seg button {
  font: 600 0.9rem / 1 var(--label);
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--ink-1);
  border: 0;
  border-right: 1px solid var(--line);
  padding: 9px 12px;
  cursor: pointer;
}
.seg button:last-child {
  border-right: 0;
}
.seg button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c) 30%, var(--ink-2));
  color: var(--pressed);
}
.lvl {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lvl input {
  accent-color: var(--gold);
  width: 180px;
  height: 24px;
} /* WCAG 2.5.8 */
.lvl output {
  font: 600 1.05rem / 1 var(--label);
  color: var(--gold-2);
  min-width: 2ch;
}
.route-status {
  font: 500 0.86rem / 1.4 var(--label);
  color: var(--faint);
  margin: 0;
}
.filters,
.range-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: end;
  margin: 14px 0 0;
}
.filters label,
.range-form label,
.pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
input[type="search"],
select {
  font: 500 0.98rem / 1.2 var(--label);
  color: var(--text);
  background: var(--ink-1);
  border: 1px solid var(--line-ui);
  border-radius: 7px;
  padding: 8px 10px;
  min-width: 170px;
}
.shown {
  font: 500 0.9rem / 1 var(--label);
  color: var(--muted);
  padding-bottom: 10px;
}
.filters input[type="number"],
.range-form input[type="number"] {
  font: 500 0.98rem / 1.2 var(--label);
  color: var(--text);
  background: var(--ink-1);
  border: 1px solid var(--line-ui);
  border-radius: 7px;
  padding: 8px 10px;
  width: 7em;
}
/* A leveling page's range total (site.js) and its band totals. */
.range-total {
  flex: 1 1 100%;
  font: 500 0.95rem / 1.5 var(--label);
  color: var(--text);
}
.band-total {
  margin: 10px 0 0;
}
tr.gap td {
  color: var(--muted);
  font-style: italic;
}
/* The applied filters (site.js): each one a button that removes it. */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}
.active-filters:empty {
  display: none;
}
.chip-x {
  font: 500 0.88rem / 1.2 var(--label);
  color: var(--text);
  background: var(--ink-2);
  border: 1px solid var(--gold-dim);
  border-radius: 99px;
  padding: 5px 12px;
  min-height: 30px;
  cursor: pointer;
} /* WCAG 2.5.8 */
.chip-x::after {
  content: " ×";
  color: var(--gold-2);
}
.chip-x:hover {
  border-color: var(--gold);
}
.chk {
  font: 500 0.95rem / 1 var(--label);
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}
.chk input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--gold);
} /* WCAG 2.5.8 */
.btn {
  display: inline-block;
  font: 600 0.9rem / 1 var(--label-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-2);
  background: var(--ink-2);
  border: 1px solid var(--gold-dim);
  border-radius: 7px;
  padding: 10px 14px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  border-color: var(--gold);
  color: var(--link-hover);
}
.btn-gold {
  background: linear-gradient(180deg, #e7c57d, #b9934c);
  color: #1b1408;
  border-color: #f1d99a;
}
.btn-gold:hover {
  color: #000;
}

/* role cards and class cards */
.roles,
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin-top: 16px;
}
.role,
.cc {
  position: relative;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  border-top: 3px solid var(--t);
}
.cc {
  border-top-color: var(--c);
}
.role-top {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.role-top .ic {
  border-color: var(--t);
}
.role h3 {
  margin: 0;
}
.role h3 a {
  color: var(--head);
  text-decoration: none;
}
.role .eyebrow {
  color: light-dark(color-mix(in oklab, var(--t) 50%, #000), var(--t));
}
.go {
  font: 600 0.86rem / 1.3 var(--label-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.go::after {
  content: " →";
}
.cc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  margin-bottom: 8px;
}
.cc-head .ic {
  border-color: var(--c);
}
.cc-head h2,
.cc-head h3 {
  margin: 0;
  color: light-dark(
    color-mix(in oklab, var(--c) 50%, #000),
    color-mix(in srgb, var(--c) 74%, #fff)
  );
  font-size: 1.6rem;
}
.cc p {
  font-size: 0.95rem;
  color: var(--muted);
}
.cc-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 4px;
}
.cc-specs a {
  font-weight: 600;
  text-decoration: none;
}
.cc-specs span {
  font: 500 0.82rem / 1 var(--label);
  color: var(--faint);
  margin-left: 4px;
}
.cc-meta {
  font: 600 0.82rem / 1.5 var(--label-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.cc-meta a {
  text-decoration: none;
}
.updates time {
  font: 500 0.85rem / 1 var(--label);
  color: var(--faint);
  margin-left: 6px;
}

/* leveling bands */
.bands {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.band {
  display: grid;
  grid-template-columns: 112px 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-1);
  overflow: hidden;
}
.band-lv {
  padding: 16px 12px;
  background: var(--ink-2);
  border-right: 1px solid var(--line);
  text-align: center;
}
.band-lv span {
  display: block;
  font: 1.6rem / 1 var(--display);
  color: var(--gold-2);
}
.band-lv small {
  display: block;
  margin-top: 6px;
  font: 600 0.74rem / 1.3 var(--label-caps);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.band-body {
  padding: 14px 18px 8px;
  min-width: 0;
}
.band-body h3 {
  margin-bottom: 0.35em;
}
.band dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 14px;
  margin: 10px 0 8px;
}
.band dt {
  font: 600 0.76rem / 1.9 var(--label-caps);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  grid-column: 1;
}
.band dd {
  margin: 0;
  grid-column: 2;
}
.band dd p {
  margin: 0 0 0.3em;
}
.who {
  font: 600 0.9rem / 1 var(--label);
  color: var(--muted);
  letter-spacing: 0.03em;
}
.learn {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.learn a,
.learn span {
  text-decoration: none;
  white-space: nowrap;
}
.lv-n {
  font: 500 0.8rem / 1 var(--label);
  color: var(--faint);
}
.ranks span {
  font: 500 0.92rem / 1.5 var(--label);
  color: var(--muted);
}
.band.cur {
  border-color: var(--c);
  box-shadow:
    0 0 0 1px var(--c),
    0 0 26px color-mix(in srgb, var(--c) 25%, transparent);
}
.band.cur .band-lv {
  background: color-mix(in srgb, var(--c) 28%, var(--ink-2));
}
.band.cur .band-lv small {
  color: var(--text);
}
.band.past {
  border-color: var(--line);
  background: var(--ink-0);
  color: var(--muted);
}
.band.past .band-lv {
  background: var(--ink-1);
}
.band.past .band-lv span,
.band.past dt {
  color: var(--muted);
}
.band.past .ic {
  filter: grayscale(0.85);
}
.js [data-race].off,
.js [data-faction].off {
  display: none !important;
}
.fac {
  font: 600 0.74rem / 1 var(--label-caps);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 3px 6px;
  margin-left: 8px;
  vertical-align: middle;
}
.callout {
  border-left: 3px solid var(--gold);
  background: var(--ink-2);
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p:last-child {
  margin: 0;
}

/* spec pages */
.toc ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 12px 0 0;
}
.toc a {
  display: block;
  font: 600 0.84rem / 1 var(--label-caps);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
}
.toc a:hover {
  color: var(--gold-2);
  border-color: var(--gold-dim);
}
ol.stats {
  counter-reset: s;
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
ol.stats li {
  counter-increment: s;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px 6px 8px;
}
ol.stats li::before {
  content: counter(s);
  font: 600 0.8rem / 1 var(--label);
  color: var(--on-fill);
  background: var(--t);
  border-radius: 99px;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: 1px;
}
.prio {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  display: grid;
  gap: 6px;
  counter-reset: p;
}
.prio li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  padding: 9px 12px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 8px;
}
ol.prio li {
  counter-increment: p;
  position: relative;
  padding-left: 40px;
}
ol.prio li::before {
  content: counter(p);
  position: absolute;
  left: 12px;
  top: 13px;
  font: 600 0.9rem / 1 var(--label);
  color: light-dark(color-mix(in oklab, var(--t) 50%, #000), var(--t));
}
.prio b a {
  text-decoration: none;
}
.when {
  color: var(--text);
}
.macro {
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-1);
  overflow: hidden;
}
.macro figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ink-2);
}
.macro pre {
  margin: 0;
  padding: 12px 14px;
  font: 0.9rem / 1.5 var(--mono);
  color: var(--code);
  overflow-x: auto;
  white-space: pre;
}
.macro p {
  padding: 0 14px 10px;
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}
.macro-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.macro-about {
  margin: -8px 0 18px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 0.94rem;
}
.macro-about p {
  margin: 0 0 4px;
}

/* talents */
.trees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin-top: 12px;
}
.tree {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(
      260px 180px at 50% 0%,
      color-mix(in srgb, var(--t) 20%, transparent),
      transparent 70%
    ),
    var(--ink-1);
  padding: 12px;
}
.tree-h {
  font-size: 1.28rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 4px 10px;
  color: light-dark(
    color-mix(in oklab, var(--t) 50%, #000),
    color-mix(in srgb, var(--t) 76%, #fff)
  );
}
.tree-n {
  font: 600 1.1rem / 1 var(--label);
  color: var(--gold-2);
}
.tree-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(7, 60px);
  gap: 0;
  place-items: center;
  position: relative;
}
/* The prerequisite lines: an SVG under the grid, in the same 4 x 7 box (talents.py req_lines). */
.tree-body {
  position: relative;
}
.req-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.req-lines path {
  fill: none;
  stroke: var(--line);
  stroke-width: 3;
  stroke-linejoin: round;
}
.req-lines path.on {
  stroke: var(--gold);
}
.tal {
  position: relative;
  width: 48px;
  height: 48px;
}
/* An unlearned talent is greyed out, and its 0/5 rank badge says the same in text: keep the badge through
   any restyle, since it is what makes this pass WCAG 1.4.1 (colour is not the only cue; UX-P3-07). */
.tal .ic {
  width: 48px;
  height: 48px;
  border-radius: 7px;
  filter: grayscale(1) brightness(0.55);
}
.tal.is-some .ic,
.tal.is-full .ic {
  filter: none;
}
.tal.is-some .ic {
  box-shadow: 0 0 0 2px var(--verd);
}
.tal.is-full .ic {
  box-shadow: 0 0 0 2px var(--gold);
}
.tal-pts {
  position: absolute;
  right: -6px;
  bottom: -6px;
  font: 600 0.72rem / 1 var(--label);
  background: var(--ink-0);
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 2px 4px;
}
.tal.is-some .tal-pts {
  color: var(--verd-ink);
  border-color: var(--verd-ink);
}
.tal.is-full .tal-pts {
  color: var(--gold-2);
  border-color: var(--gold);
}
.tal-card {
  display: none;
  position: absolute;
  z-index: 10;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: min(300px, calc(100vw - 32px));
}
.tal:hover .tal-card,
.tal:focus-within .tal-card {
  display: block;
} /* a #t- link focuses it (js/talents.js) */
.tal[data-dismissed] .tal-card {
  display: none;
} /* Esc (js/talents.js), until focus or the pointer leaves */
.tal-btn {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
/* A tooltip as the game client draws one: dark navy, a thin silver frame, white header lines,
   the description in the client's yellow. */
/* The client's own dark card in both themes (D-112): color-scheme keeps light-dark() on its dark side. */
.wtt {
  color-scheme: dark;
  background: rgb(8 8 24 / 0.96);
  border: 1px solid #a7a7b4;
  border-radius: 4px;
  padding: 7px 10px 8px;
  box-shadow:
    0 0 0 1px #1b1b2a,
    0 10px 30px rgb(0 0 0 / 0.6);
  font:
    400 0.86rem / 1.32 Arial,
    "Helvetica Neue",
    sans-serif;
  color: #fff;
  text-align: left;
  white-space: normal;
}
.wtt p {
  margin: 0;
}
.wtt-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.wtt-row span:last-child {
  text-align: right;
}
.wtt-h {
  margin-bottom: 1px;
}
.wtt-h b {
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
}
.wtt-h span {
  color: #9d9d9d;
}
.wtt-req {
  color: #fff;
}
.wtt-desc {
  color: #ffd100;
  margin-top: 2px !important;
}
/* The client's red and green also colour description cells on the page, so they darken on a light one. */
.wtt .tt-red,
.desc .tt-red {
  color: light-dark(#b0000c, #ff2020);
}
.wtt .tt-green,
.desc .tt-green {
  color: light-dark(#146a17, #20ff20);
}
.wtt .tt-white {
  color: #fff;
}
.wtt .tt-grey {
  color: #808080;
}
.wtt .tt-blue {
  color: #71d5ff;
}
.wtt-item p {
  color: #fff;
}
.wtt-item p.tt-green {
  color: #20ff20;
}
.wtt-item p.tt-gold {
  color: #ffd100;
}
.wtt-h b.tt-q0 {
  color: #9d9d9d;
}
.wtt-h b.tt-q2 {
  color: #1eff00;
}
.wtt-h b.tt-q3 {
  color: #4c9bff;
}
.wtt-h b.tt-q4 {
  color: #b764f7;
}
.wtt-h b.tt-q5 {
  color: #ff8000;
} /* the client's quality colours; rare and epic lightened to 4.5:1 */
.wtt-meta {
  color: #9d9d9d;
  font-size: 0.8rem;
  margin-top: 6px !important;
}
.wtt-ours {
  border-top: 1px solid #3a3a52;
  margin-top: 7px;
  padding-top: 6px;
  color: var(--text);
  font: 0.86rem / 1.42 var(--body);
}
.wtt-ours .ref b {
  color: var(--gold-2);
}
#wtt-pop {
  position: fixed;
  z-index: 60;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
} /* hoverable (WCAG 1.4.13) */
#wtt-pop[hidden] {
  display: none;
}
/* Map coordinates: a /way card with a copy button (js/tooltip.js). */
button.way {
  cursor: copy;
  border-bottom: 1px dotted color-mix(in srgb, var(--gold-2) 40%, transparent);
}
.wtt-way {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.wtt-way code {
  font: 0.86rem / 1.3 var(--mono);
  color: #ffd100;
  user-select: all;
}
.way-copy {
  font: 600 0.8rem / 1 var(--label);
  padding: 5px 10px;
  border: 1px solid #a7a7b4;
  border-radius: 3px;
  background: #1b1b2a;
  color: #fff;
  cursor: pointer;
}
.way-copy:hover,
.way-copy:focus-visible {
  background: #2a2a40;
}
/* Tooltip triggers that are not links are buttons (UX-P1-03, markup.tt_button); they look like the text they were. */
button.tt,
.tal-btn {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
button.tt {
  display: inline;
  cursor: help;
}
.tt-name.tt {
  border-bottom: 1px dotted color-mix(in srgb, var(--gold-2) 40%, transparent);
}
td .desc {
  color: var(--text);
  margin: 0;
}
td .desc + .wtk {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92em;
}
.wtk b {
  font: 600 0.82rem / 1 var(--label);
  letter-spacing: 0.04em;
  color: var(--gold);
}
.c0 {
  grid-column: 1;
}
.c1 {
  grid-column: 2;
}
.c2 {
  grid-column: 3;
}
.c3 {
  grid-column: 4;
}
.r0 {
  grid-row: 1;
}
.r1 {
  grid-row: 2;
}
.r2 {
  grid-row: 3;
}
.r3 {
  grid-row: 4;
}
.r4 {
  grid-row: 5;
}
.r5 {
  grid-row: 6;
}
.r6 {
  grid-row: 7;
}
.c2 .tal-card,
.c3 .tal-card {
  left: auto;
  right: -8px;
  transform: none;
}
.c0 .tal-card {
  left: -8px;
  transform: none;
}
.spent {
  font: 600 0.95rem / 1 var(--label);
  color: var(--muted);
  margin: 0;
}
.spent span {
  color: var(--gold-2);
}
.js .static-note {
  display: none;
}
.builds {
  display: grid;
  gap: 12px;
}
.build {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-1);
  padding: 14px 16px;
}
.build:target {
  border-color: var(--gold);
}
.build h3 {
  font-size: 1.15rem;
}
.split {
  font: 600 0.9rem / 1 var(--label);
  color: var(--gold-2);
  margin-left: 4px;
}
.bt {
  margin: 0.2em 0;
  font-size: 0.94rem;
}

/* pager and footer */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pager a {
  font: 1.15rem / 1.2 var(--display);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pager a small {
  display: block;
  font: 600 0.72rem / 1.4 var(--label-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.pager .next {
  text-align: right;
  margin-left: auto;
}
/* The one 32 px icon button (L-17): the theme and search buttons in the masthead, the share row, the launch
   banner's close. 32 px clears WCAG 2.5.8's 24 px minimum. Each adds only what differs. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-ui);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover {
  color: var(--gold-2);
}
/* Share (S-013): small round marks on the breadcrumb line, at its right; under the crumbs on a narrow
   screen. 32 px targets, above WCAG 2.5.8's 24 px minimum. */
.share {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.share-lbl {
  font: 600 0.72rem / 1 var(--label-caps);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.share-btn,
.share-net {
  border-color: var(--line);
  border-radius: 50%;
  background: var(--ink-1);
}
.share-btn:hover,
.share-net:hover {
  border-color: var(--gold);
  color: var(--gold-2);
}
.share-said {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  font: 500 0.8rem / 1.2 var(--label);
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .share-lbl {
    display: none;
  }
}
.foot {
  border-top: 1px solid var(--line);
  background: var(--ink-1);
  margin-top: 30px;
}
.foot-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 16px 34px;
  font-size: 0.9rem;
  color: var(--muted);
}
.foot .legal {
  font-size: 0.8rem;
  margin: 0.5em 0 0;
}
.foot .build {
  font: 500 0.75rem / 1.3 var(--label);
  letter-spacing: 0.04em;
  margin: 0.5em 0 0;
}

@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }
  .hero-in {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 18px;
    gap: 14px;
  }
  .band {
    grid-template-columns: 1fr;
  }
  .band-lv {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 10px 14px;
  }
  .band-lv small {
    margin: 0;
  }
  .band dl {
    grid-template-columns: 1fr;
  }
  .band dt,
  .band dd {
    grid-column: 1;
  }
  .tal,
  .tal .ic {
    width: 40px;
    height: 40px;
  }
  .tree-grid {
    grid-template-rows: repeat(7, 52px);
  }
  .lvl input {
    width: 140px;
  }
  .mast-nav a {
    padding: 8px;
  }
  /* A talent card offset from a 48 px icon cannot fit beside it on a phone (UX-P1-07): it opens as
     a sheet along the bottom of the screen instead, the same for every column. */
  .tal-card,
  .c0 .tal-card,
  .c2 .tal-card,
  .c3 .tal-card {
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
    max-height: 60vh;
    overflow-y: auto;
  }
}
/* Ads (S-021, plan §5.3–§5.7). A frame is the page surface with a 3:1 control edge and a label: never
   a card, callout or chip, so it is plainly not ours. Every unit has a fixed size per breakpoint, so its
   space is reserved before the ad arrives and nothing moves when it does. Its own stacking context keeps
   every ad iframe under the tooltip card and the theme popover; the masthead stays above the rail. */
.ad {
  position: relative;
  z-index: 0;
  margin: 28px 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
  background: var(--ink-0);
  text-align: center;
}
.ad-lbl {
  margin: 0 0 8px;
  font: 600 0.74rem / 1 var(--label-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.ad-unit {
  display: block;
  margin: 0 auto;
  width: 300px;
  height: 250px;
}
/* The end unit stands apart from the last section, above the pager. */
.ad-end {
  margin-top: 40px;
}
/* The rail lives only in the gutter beside the centred 1180 px column: a 16 px gap, the 302 px frame and
   12 px to spare on each side make 1840 px, so a 1920 px desktop gets it and the column never narrows. */
.ad-rail {
  display: none;
}
/* The top unit, just after the lede, is the wide screen's first ad, above the fold on a desktop. Below 900 px
   it never shows, so the phone's first screen stays the title, tabs and first glance rows, and the first
   in-content unit (.ad-narrow) shows in its place. Never displayed, never requested (js/ads.js). */
.ad-top {
  display: none;
}
@media (min-width: 900px) {
  .ad-top {
    display: block;
  }
  .ad-narrow {
    display: none;
  }
}
/* Below 400 px a 300 px unit and the column's padding do not fit: the frame runs to the screen's edges
   (no side borders), so it never makes the page scroll sideways (WCAG 1.4.10). */
@media (max-width: 399.98px) {
  .ad {
    margin-inline: -16px;
    border-inline: 0;
    border-radius: 0;
    padding-inline: 0;
  }
}
@media (min-width: 400px) and (max-width: 899.98px) {
  .ad-unit {
    width: 336px;
    height: 280px;
  }
}
@media (min-width: 900px) {
  .ad-unit {
    width: 728px;
    height: 90px;
  }
}
@media (min-width: 1840px) and (min-height: 760px) {
  .ad-rail {
    display: block;
    position: fixed;
    z-index: 1;
    top: calc(var(--mast-h) + 24px);
    left: calc(50% + 606px);
    width: 302px;
    margin: 0;
    padding-inline: 0;
  }
  .ad-rail .ad-unit {
    width: 300px;
    height: 600px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
/* Print (UX-P2-01): the light theme, on white; the
   page's shell is left off; closed sections print open; a link in prose prints where it goes (its
   path: the browser prints the page's own address, which gives the site). */
@media print {
  :root,
  :root[data-theme] {
    color-scheme: light;
  }
  .mast,
  .tabs,
  .controls,
  .filters,
  .range-form,
  .pager,
  .toc,
  .launch,
  .skip,
  .foot,
  .share,
  .crumbs,
  .jump,
  details.legend,
  .open-all,
  .ad,
  :root.js [data-js] {
    display: none !important;
  }
  body,
  .hero,
  .hero-in,
  .cc,
  .news-item,
  .band,
  .tablewrap {
    background: #fff !important;
    color: #000;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  h1,
  h2,
  h3,
  h4,
  b,
  strong,
  th,
  a {
    color: #000 !important;
  }
  .tablewrap {
    overflow: visible;
  }
  thead th {
    position: static;
  }
  details::details-content {
    content-visibility: visible;
    display: contents;
  }
  details > summary {
    list-style: none;
  }
  .chip {
    background: none !important;
    color: #000 !important;
    border: 1px solid #666;
  }
  .crumbs a,
  .cc-head a,
  .cc-specs a,
  .go,
  .launch-src,
  a.ml,
  th a,
  td a,
  .jump a {
    display: inline;
    min-height: 0;
  }
  main :is(p, li, dd):not(td *, th *) > a[href^="/"]:not(.ref)::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #333;
  }
  h2,
  h3 {
    break-after: avoid;
  }
  tr,
  figure,
  .macro,
  .cc {
    break-inside: avoid;
  }
}

/* Launch countdown, atop every page (templates/layout.html, js/time.js). */
.launch {
  background: linear-gradient(90deg, var(--ink-1), var(--ink-3) 50%, var(--ink-1));
  border-bottom: 1px solid var(--gold-dim);
}
.launch-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 20px;
  text-align: center;
}
.launch-head {
  margin: 0;
  font: 600 0.95rem / 1.3 var(--label-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.launch-head time {
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.launch-clock {
  margin: 0;
  display: flex;
  gap: 6px;
}
.launch-unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
  padding: 3px 6px;
  background: var(--ink-0);
  border: 1px solid var(--line-2);
  border-radius: 6px;
}
.launch-unit b {
  font: 700 1.15rem / 1.1 var(--label);
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
}
.launch-unit small {
  font: 600 0.62rem / 1.2 var(--label-caps);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.launch-src {
  font: 600 0.8rem / 1 var(--label-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 4px;
}
.launch-x {
  font: 400 1.4rem / 1 var(--label);
  border-color: transparent;
  border-radius: 6px;
}
.launch-x:hover {
  color: var(--text);
  border-color: var(--line-2);
}
.launch-off .launch {
  display: none;
}
.launch.is-live .launch-head {
  color: var(--gold);
}

/* Races (site/races.py). */
.race-icons {
  display: flex;
  gap: 4px;
  margin: 6px 0;
}
.race-card .cc-head h3 {
  margin: 0;
}
.fac-alliance {
  --c: #6f9fe0;
}
.fac-horde {
  --c: #d0574a;
}
.race-card {
  border-top: 3px solid var(--c);
}
.race-matrix td {
  text-align: center;
}
.race-matrix td.yes {
  color: var(--gold-2);
  font-weight: 700;
}
.race-matrix td.no {
  color: var(--faint);
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.racials th[scope="row"] {
  white-space: nowrap;
  vertical-align: top;
}
.racials td {
  vertical-align: top;
}
.racials .note {
  margin: 4px 0 0;
}
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0 0 12px;
}
.facts dt {
  color: var(--muted);
  font: 600 0.85rem / 1.6 var(--label-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.facts dd {
  margin: 0;
}

/* Narrow phones: the brand and four nav entries need about 380 px, so the nav takes a row of its
   own under the brand (UX-P0-01), its links spread across it at a 32 px touch height. */
@media (max-width: 480px) {
  .mast-in {
    gap: 4px 8px;
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .brand span {
    font-size: 1rem;
    white-space: nowrap;
  }
  .mast-nav {
    gap: 0;
    flex: 1 0 100%;
    justify-content: space-between;
  }
  .mast-nav a {
    padding: 0 6px;
    min-height: 32px;
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
  }
}

/* News: Blizzard's posts in our own words, each linking to the original */
.news-list {
  display: grid;
  gap: 14px;
}
/* A card: a title of up to two lines and a summary of two, the whole of it a link to the topic page. */
.news-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 16px;
  align-items: center;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-dim);
  border-radius: 8px;
  padding: 12px 16px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.news-item.kind-blue {
  border-left-color: #4f8fd6;
}
.news-item.kind-log {
  border-left-color: var(--line-2);
}
.news-item:hover,
.news-item:focus-within {
  background: var(--ink-2);
  border-color: var(--line-2);
}
.news-body {
  min-width: 0;
  grid-column: -2;
}
/* The title wraps to two lines at most (UX-P2-09); the whole card is its target, through ::after. */
.news-item h3 {
  margin: 2px 0 4px;
  font-size: 1.05rem;
  line-height: 1.4;
}
.news-item h3 .news-go {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 24px;
}
.news-go {
  text-decoration: none;
}
.news-go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
}
.news-go:focus-visible {
  outline: none;
}
.news-go:focus-visible::after {
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
}
.news-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-sum {
  margin: 0;
  min-height: 3.2em;
  max-height: 3.2em;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.kind-blue .chip {
  color: var(--blue-text);
  border-color: #4f8fd6;
}
.news-more {
  margin: 4px 0 24px;
}
.news-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
}
.news-thumb.thumb-avatar {
  width: 64px;
}
.news-thumb img,
.news-hero-thumb img {
  display: block;
  border: 1px solid var(--line);
}
.thumb-image img {
  width: 160px;
  height: 90px;
  border-radius: 6px;
  object-fit: cover;
}
.thumb-avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.thumb-by {
  max-width: 100%;
  margin-top: 4px;
  color: var(--blue-text);
  font: 600 0.72rem / 1.2 var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The status log: one entry per notice, each an anchor its old address redirects to */
.status-log {
  list-style: none;
  margin: 0;
  padding: 0;
}
.status-log li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 16px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 80px;
}
.status-body {
  min-width: 0;
  grid-column: -2;
}
.status-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.status-src {
  flex: none;
  font-size: 0.85rem;
}
.status-log li:first-child {
  border-top: 0;
}
.status-log h2 {
  margin: 4px 0;
  font-size: 1.05rem;
}
.status-log p {
  margin: 0;
}
.status-log li:target {
  background: var(--ink-2);
}
/* The topic page */
.news-topic .hero-in {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.news-hero-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}
.news-hero-thumb.thumb-image img {
  width: 320px;
  height: 180px;
}
.news-hero-thumb.thumb-avatar img {
  width: 96px;
  height: 96px;
}
.news-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
/* The full write-up (S-015): change tables and the source of each part */
.news-build h3,
.news-topic .sec h3 {
  margin: 18px 0 6px;
  font-size: 1rem;
}
.news-changes th[scope="row"] {
  white-space: nowrap;
}
.chg {
  font: 600 0.72rem / 1.4 var(--label-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chg-new,
.chg-buff,
.chg-fix {
  color: var(--verd-ink);
}
.chg-nerf,
.chg-removed {
  color: var(--rose-ink);
}
.chg-change {
  color: var(--amber-ink);
}
.said {
  color: var(--muted);
  font-size: 0.9em;
}
.news-topic .src {
  color: var(--muted);
  font-size: 0.9rem;
}
.news-issues small {
  color: var(--muted);
}
.news-step {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
}
.news-step small {
  display: block;
  color: var(--muted);
  font: 600 0.72rem / 1.4 var(--label-caps);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .news-thumb {
    width: 96px;
  }
  .news-thumb.thumb-avatar {
    width: 52px;
  }
  .thumb-image img {
    width: 96px;
    height: 54px;
  }
  .thumb-avatar img {
    width: 40px;
    height: 40px;
  }
  .news-topic .hero-in {
    flex-direction: column;
    align-items: flex-start;
  }
  .news-hero-thumb.thumb-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* WCAG 2.2 SC 2.5.8: every target is at least 24 px tall, except a link inside a sentence (UX-P2-10).
   These are the links that stand alone: crumbs, card heads and spec lists, table cells, class lists. */
.crumbs a,
.cc-head a,
.cc-specs a,
.go,
.launch-src,
a.ml,
th a,
td a,
.jump a,
.news-step {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
summary {
  min-height: 24px;
}

/* The theme choice (templates/layout.html, js/head-init.js): a button in the masthead opens it as a
   popover; the footer shows it inline. */
.mast-in > nav {
  margin-left: auto;
}
.theme-pop {
  margin: 0;
  inset: auto;
  top: calc(var(--mast-h) + 4px);
  right: 16px;
  padding: 12px 14px;
  background: var(--ink-1);
  color: var(--text);
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
}
.theme-pop::backdrop {
  background: transparent;
}
.foot .theme-pick {
  margin: 1em 0 0;
}

/* Search (S-007): Pagefind's Component UI resets its elements with `all: initial`, so it is themed only
   through its --pf-* variables, set here from ours so both themes follow. Its own icons are data: URIs,
   which the CSP's img-src 'self' blocks: ours is served from /img/. */
.search-ui {
  --pf-text: var(--text);
  --pf-text-secondary: var(--muted);
  --pf-text-muted: var(--muted);
  --pf-background: var(--ink-1);
  --pf-border: var(--line-ui);
  --pf-border-focus: var(--gold-2);
  --pf-hover: var(--ink-2);
  --pf-skeleton: var(--ink-2);
  --pf-skeleton-shine: var(--ink-3);
  --pf-mark: var(--strong);
  --pf-outline-focus: var(--gold-2);
  --pf-scroll-shadow: transparent;
  --pf-font: var(--body);
  --pf-border-radius: var(--radius);
  --pf-input-height: 44px;
  --pf-input-font-size: 1.05rem;
  --pf-result-title-font-size: 1.1rem;
  --pf-result-excerpt-font-size: 0.95rem;
  --pf-summary-font-size: 0.95rem;
  --pf-icon-search: url("/img/search.svg");
  --pf-icon-arrow: none; /* filter dropdowns only, which this site does not use */
  max-width: 760px;
}
.search-ui pagefind-input {
  display: block;
  margin-bottom: 14px;
}
.search-nojs {
  padding: 14px 16px;
  background: var(--ink-1);
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
}
/* The masthead search (templates/layout.html): the box from 900 px; narrower, only its button, which opens
   /search/. Its 32 px height keeps the masthead at --mast-h. */
.mast-search {
  display: flex;
  align-items: center;
}
.mast-search input[type="search"] {
  display: none;
  min-width: 0;
  width: 170px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px 0 0 8px;
  border-right: 0;
}
/* One ring round the box and its button, not round the box alone, which stopped at the button. */
.mast-search {
  border-radius: 10px;
}
.mast-search input[type="search"]:focus-visible {
  outline: none;
}
.mast-search:has(input:focus-visible) {
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
}
@media (min-width: 900px) {
  .mast-search input[type="search"] {
    display: block;
  }
  .mast-search button {
    border-radius: 0 8px 8px 0;
    background: var(--ink-1);
  }
}
.nf-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 1.2em;
}
.nf-search label {
  font: 500 1rem / 1.2 var(--body);
  color: var(--muted);
}
/* Below 700 px the brand, the nav, the search button and the theme button no longer fit in one row
   (the search button made the rows wrap unevenly from 440 px and overflow at 481 to 505): two rows,
   always the same, the nav across the second. */
@media (max-width: 700px) {
  :root {
    --mast-h: 90px;
  }
  .mast-in {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .mast-in > nav {
    order: 3;
    flex: 1 0 100%;
    margin-left: 0;
  }
  .mast-search {
    margin-left: auto;
  }
}
/* Five nav links (Zones made five) fit the one row from 701 px only with tighter links: without
   this the brand wrapped and the masthead grew to 64 px at 701 to 750 and 900 to 920 px. */
@media (min-width: 701px) and (max-width: 1000px) {
  .mast-nav a {
    padding: 9px 7px;
    letter-spacing: 0.04em;
  }
}
/* Professions made the nav 361 px: the one row needs about 733 px with 16 px gaps, so just above 700
   the gaps halve and the links tighten again. */
@media (min-width: 701px) and (max-width: 760px) {
  .mast-in {
    gap: 8px;
  }
  .mast-nav a {
    padding: 9px 5px;
  }
}
@media (max-width: 640px) {
  :root {
    --mast-h: 88px;
  }
} /* the nav links drop to 8 px padding */
@media (max-width: 480px) {
  :root {
    --mast-h: 85px;
  }
} /* the tight masthead: 8 px padding, 32 px links */

/* Forced colours (L-12): the browser replaces every colour with the reader's palette, so the fills and accent
   colours that mark a pressed button or the current page disappear. A border or outline stays. */
@media (forced-colors: active) {
  .seg button[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .mast-nav a[aria-current] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .tabs a {
    border-bottom-color: transparent;
  }
  .tabs a[aria-current] {
    border-bottom-color: Highlight;
    border-bottom-width: 4px;
  }
}