/* 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) */
  --mast-h: 54px; /* the sticky masthead at 900 px and wider, measured; table heads stick below it */
  /* 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 / .92), rgb(13 15 23 / .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: 76px; }
body {
  margin: 0; background: var(--ink-0); color: var(--text);
  font: 17px/1.62 var(--body); font-optical-sizing: auto;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgb(99 179 162 / .07), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgb(212 178 106 / .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 .5em; letter-spacing: .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; }
.hl:hover::after, .hl:focus-visible::after { content: " #"; 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 { visibility: visible; }
h4 { font-size: 1.1rem; }
p { margin: 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 / .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: .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 .95rem/1 var(--label-caps); letter-spacing: .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 .86rem/1.4 var(--label); letter-spacing: .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: .2em; }
.eyebrow { font: 600 .8rem/1.2 var(--label-caps); text-transform: uppercase; letter-spacing: .16em; color: light-dark(color-mix(in oklab, var(--c) 50%, #000), var(--c)); margin: 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: .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 .9rem/1 var(--label-caps); letter-spacing: .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: .82rem; }
.go-row { margin: 12px 0 0; font: 600 .85rem/1.6 var(--label); letter-spacing: .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: .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: .32em 0; }
ul.tight li::marker { color: var(--gold-dim); }
details.how { margin: -.4em 0 1em; color: var(--muted); }
details.how summary { cursor: pointer; font: 600 .86rem/1.6 var(--label-caps); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.more { font-size: .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 .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 .72rem/1 var(--label-caps); letter-spacing: .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); }
.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; }
.role-tag { font: 500 .8rem/1 var(--label); letter-spacing: .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: .96rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
thead th { font: 600 .8rem/1.2 var(--label-caps); letter-spacing: .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 .8rem/1.3 var(--label); color: var(--faint); letter-spacing: .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(.85); }
table.spells .ranks { font: 500 .84rem/1.45 var(--label); color: var(--muted); letter-spacing: .02em; }
table.spells .ranks b { color: var(--text); font-weight: 600; }
.spell-tab h2 .n { font: 600 .85rem/1 var(--label); color: var(--faint); vertical-align: middle; }
.jump { font: 500 .95rem/1.6 var(--label); letter-spacing: .03em; }
.removed li { margin: .5em 0; }

/* controls */
[data-js] { display: none !important; }
.js [data-js] { display: revert !important; }
.js .controls[data-js], .js .filters[data-js], .js .seg-wrap[data-js], .js .lvl[data-js], .js .launch-clock[data-js] { display: flex !important; }
.js .launch-x[data-js] { display: inline-grid !important; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 14px 0 18px; }
.seg-wrap { align-items: center; gap: 10px; flex-wrap: wrap; }
.seg-lbl, .lvl > span, .filters label > span, .pick > span { font: 600 .78rem/1 var(--label-caps); text-transform: uppercase; letter-spacing: .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 .9rem/1 var(--label); letter-spacing: .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 { align-items: center; gap: 10px; }
.lvl input { accent-color: var(--gold); width: 180px; }
.lvl output { font: 600 1.05rem/1 var(--label); color: var(--gold-2); min-width: 2ch; }
.route-status { font: 500 .86rem/1.4 var(--label); color: var(--faint); margin: 0; }
.filters { flex-wrap: wrap; gap: 12px 18px; align-items: end; margin: 14px 0 0; }
.filters label, .pick { display: flex; flex-direction: column; gap: 6px; }
input[type="search"], select { font: 500 .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 .9rem/1 var(--label); color: var(--muted); padding-bottom: 10px; }
.chk { font: 500 .95rem/1 var(--label); color: var(--muted); display: flex; gap: 8px; align-items: center; }
.btn { display: inline-block; font: 600 .9rem/1 var(--label-caps); letter-spacing: .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 .86rem/1.3 var(--label-caps); letter-spacing: .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: .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 .82rem/1 var(--label); color: var(--faint); margin-left: 4px; }
.cc-meta { font: 600 .82rem/1.5 var(--label-caps); letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.cc-meta a { text-decoration: none; }
.updates time { font: 500 .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 .74rem/1.3 var(--label-caps); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.band-body { padding: 14px 18px 8px; min-width: 0; }
.band-body h3 { margin-bottom: .35em; }
.band dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; margin: 10px 0 8px; }
.band dt { font: 600 .76rem/1.9 var(--label-caps); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); grid-column: 1; }
.band dd { margin: 0; grid-column: 2; }
.band dd p { margin: 0 0 .3em; }
.who { font: 600 .9rem/1 var(--label); color: var(--muted); letter-spacing: .03em; }
.learn { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.learn a, .learn span { text-decoration: none; white-space: nowrap; }
.lv-n { font: 500 .8rem/1 var(--label); color: var(--faint); }
.ranks span { font: 500 .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(.85); }
.js [data-race].off, .js [data-faction].off { display: none !important; }
.fac { font: 600 .74rem/1 var(--label-caps); text-transform: uppercase; letter-spacing: .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 .84rem/1 var(--label-caps); letter-spacing: .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 .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 .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: .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: .94rem; }

/* 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(.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 .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 / .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 / .6); font: 400 .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-meta { color: #9d9d9d; font-size: .8rem; margin-top: 6px !important; }
.wtt-ours { border-top: 1px solid #3a3a52; margin-top: 7px; padding-top: 6px; color: var(--text); font: .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; }
/* 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: .92em; }
.wtk b { font: 600 .82rem/1 var(--label); letter-spacing: .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 .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 .9rem/1 var(--label); color: var(--gold-2); margin-left: 4px; }
.bt { margin: .2em 0; font-size: .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 .72rem/1.4 var(--label-caps); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.pager .next { text-align: right; margin-left: auto; }
/* 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 .72rem/1 var(--label-caps); letter-spacing: .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 { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--ink-1); color: var(--muted); text-decoration: none; cursor: pointer; }
.share-btn:hover, .share-net:hover { border-color: var(--gold); color: var(--gold-2); }
.share-btn[hidden] { display: none !important; }
.js .share-btn[data-js]:not([hidden]) { display: inline-flex !important; }
.share-said { position: absolute; right: 0; top: calc(100% + 4px); font: 500 .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: .9rem; color: var(--muted); }
.foot .legal { font-size: .8rem; margin: .5em 0 0; }
.foot .build { font: 500 .75rem/1.3 var(--label); letter-spacing: .04em; margin: .5em 0 0; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .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; }
}
@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, .pager, .toc, .launch, .skip, .foot, .share, .crumbs, .jump, details.legend, .open-all,
    :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: .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 .95rem/1.3 var(--label-caps); letter-spacing: .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 .62rem/1.2 var(--label-caps); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.launch-src { font: 600 .8rem/1 var(--label-caps); letter-spacing: .06em; text-transform: uppercase; padding: 8px 4px; }
.launch-x { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; font: 400 1.4rem/1 var(--label);
  color: var(--muted); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.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 .85rem/1.6 var(--label-caps); letter-spacing: .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: .78rem; letter-spacing: .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 .15s, border-color .15s; }
.news-item.kind-blue { border-left-color: #4f8fd6; }
.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: .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 .72rem/1.2 var(--label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 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; }
.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 .72rem/1.4 var(--label-caps); letter-spacing: .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-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; }
.theme-btn:hover { color: var(--gold-2); }
.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: .95rem; --pf-summary-font-size: .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; }
.mast-search button { 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; }
.mast-search button:hover { color: var(--gold-2); }
/* 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) {
  .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; }
}