/* New School 99 theme for Vector 2022. The palette, fonts and components come from newschool99.com's
   site.css and guides.css. Vector's colours are design tokens, so most of the reskin overrides those. */
html:root {
  --abyss: #050a09;
  --basalt: #0c1513;
  --slate: #13201d;
  --hearth: #17130c;
  --line: rgba(228, 185, 100, .3);
  --line-soft: rgba(239, 231, 212, .1);
  --gilt: #e4b964;
  --gilt-hi: #fff0c2;
  --gilt-lo: #9a6a2c;
  --emerald: #2fd38a;
  --emerald-deep: #0f6b45;
  --ember: #ff6a2b;
  --arcane: #7de2f0;
  --parchment: #efe7d4;
  --ash: #a8a291;
  --dim: #78756b;
  --down: #e5a04d;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;
  --gold-text: linear-gradient(180deg, var(--gilt-hi) 8%, var(--gilt) 52%, #b98236 100%);
  --panel-bg: linear-gradient(180deg, rgba(23, 19, 12, .72), rgba(12, 21, 19, .72));

  color-scheme: dark;

  --background-color-base: var(--abyss);
  --background-color-base-fixed: var(--abyss);
  --background-color-neutral: var(--slate);
  --background-color-neutral-subtle: var(--basalt);
  --background-color-interactive: var(--slate);
  --background-color-interactive-subtle: var(--basalt);
  --background-color-disabled: #2a2f2c;
  --background-color-disabled-subtle: var(--basalt);
  --background-color-progressive: var(--gilt);
  --background-color-progressive--hover: var(--gilt-hi);
  --background-color-progressive--active: var(--gilt-lo);
  --background-color-progressive-subtle: rgba(228, 185, 100, .1);
  --background-color-input-binary--checked: var(--gilt);
  --background-color-success-subtle: rgba(47, 211, 138, .08);
  --background-color-warning-subtle: rgba(229, 160, 77, .08);
  --background-color-error-subtle: rgba(255, 106, 43, .1);
  --background-color-destructive-subtle: rgba(255, 106, 43, .1);
  --background-color-notice-subtle: rgba(239, 231, 212, .05);
  --background-color-backdrop-light: rgba(5, 10, 9, .65);

  --color-base: var(--parchment);
  --color-base--hover: var(--gilt-hi);
  --color-emphasized: var(--gilt-hi);
  --color-subtle: var(--ash);
  --color-placeholder: var(--dim);
  --color-disabled: var(--dim);
  --color-inverted: var(--abyss);
  --color-inverted-fixed: var(--abyss);
  --color-progressive: var(--gilt);
  --color-progressive--hover: var(--gilt-hi);
  --color-progressive--active: var(--gilt-lo);
  --color-visited: #c9a35c;
  --color-link-red: #ff9a70;
  --color-link-red--hover: #ffb898;
  --color-link-red--visited: #e88a62;
  --color-success: var(--emerald);
  --color-warning: var(--down);
  --color-error: var(--ember);
  --color-destructive: var(--ember);
  --color-notice: var(--parchment);

  --border-color-base: var(--line-soft);
  --border-color-subtle: var(--line-soft);
  --border-color-muted: var(--line-soft);
  --border-color-interactive: var(--line);
  --border-color-progressive: var(--gilt);
  --border-color-progressive--hover: var(--gilt-hi);
  --border-color-progressive--active: var(--gilt-lo);
  --border-color-progressive--focus: var(--gilt-hi);
  --border-color-success: var(--emerald);
  --border-color-warning: var(--down);
  --border-color-error: var(--ember);
  --border-color-destructive: var(--ember);
  --border-color-notice: var(--line);
  --box-shadow-color-progressive--focus: var(--gilt-hi);
  --box-shadow-color-progressive-selected: var(--gilt);

  --font-family-base: var(--sans);
  --font-family-system-sans: var(--sans);
}

html.client-js, html.client-nojs, body, .mw-page-container {
  background-color: var(--abyss);
}
body {
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(228, 185, 100, .05), transparent 70%) fixed,
    radial-gradient(50% 40% at 85% 70%, rgba(47, 211, 138, .04), transparent 70%) fixed,
    var(--abyss);
  color: var(--parchment);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.mw-page-container { background: transparent; }
:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }

/* ---------- header, like the site's nav ---------- */
/* Solid and raised rather than the nav's translucent blur: a backdrop-filter traps the header's
   dropdowns in its stacking context, and the page then paints over them. */
.vector-header-container {
  position: relative;
  z-index: 10;
  background: var(--abyss);
  box-shadow: 0 1px 0 var(--line-soft);
}
.mw-logo-wordmark { width: 100px; height: auto; }
@media (max-width: 719px) {
  /* The skin stacks the logo above the icons here, which costs phones a whole extra row. */
  .vector-header { flex-direction: row; align-items: center; }
  .vector-header-start { flex: 0 0 auto; }
  .vector-header-start .mw-logo { flex: 0 0 auto; min-width: 0; margin-right: 0; }
  .vector-header-end { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
  .vector-header-end .vector-search-box { flex: 0 0 auto; width: auto; margin: 0; }
  /* !important: MediaWiki sets the logo's size inline. */
  .vector-header .mw-logo-wordmark { width: 86px !important; height: auto !important; }
  /* While search is open, its field takes the whole row. */
  .vector-header-search-toggled .vector-header-end .vector-search-box { flex: 1 1 0; min-width: 0; }
  .vector-header-search-toggled .vector-user-links,
  .vector-header-search-toggled .cdx-search-input__end-button { display: none; }
  .vector-header-search-toggled .cdx-search-input__input-wrapper { flex: 1 1 0; min-width: 0; }
}
.vector-sticky-header { background: rgba(5, 10, 9, .94); box-shadow: 0 1px 0 var(--line-soft); }
.vector-header a, .vector-user-links a { font-weight: 600; }

/* ---------- headings: carved gold ---------- */
.mw-page-title-main, .firstHeading, .mw-first-heading,
.mw-body-content h1, .mw-parser-output h1, .mw-body-content h2, .mw-parser-output h2,
.mw-heading1, .mw-heading2 {
  font-family: var(--display);
  border: 0;
}
.firstHeading, .mw-first-heading {
  font-weight: 900;
  line-height: 1.1;
}
.firstHeading, .firstHeading *,
.mw-parser-output h1, .mw-parser-output h2,
.mw-body-content .mw-heading1 h1, .mw-body-content .mw-heading2 h2 {
  color: var(--gilt-hi);
  background: var(--gold-text) 0 0 / 100% 1.1em repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Core sets a serif on .mw-body h1, which outranks a bare .firstHeading. */
.mw-body .firstHeading, .mw-body .firstHeading .mw-page-title-main {
  font-family: var(--display);
  font-size: clamp(30px, 2.4vw + 16px, 46px);
  font-weight: 900;
  line-height: 1.1;
}
.vector-page-titlebar { padding-bottom: 6px; box-shadow: 0 1px 0 var(--line-soft); }
.mw-body-content .mw-heading2, .mw-parser-output .mw-heading2 {
  margin-top: 1.5em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.mw-parser-output h2, .mw-body-content h2 {
  font-size: clamp(24px, 1.2vw + 17px, 32px);
  font-weight: 800;
  line-height: 1.1;
}
.mw-parser-output h3, .mw-body-content h3 {
  font: 700 19px/1.3 var(--sans);
  color: var(--gilt-hi);
}
.mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6,
.mw-body-content h4, .mw-body-content h5, .mw-body-content h6 {
  font: 700 13px/1.2 var(--cond);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gilt);
}

/* ---------- article text ---------- */
.mw-body-content { color: rgba(239, 231, 212, .88); font-size: 16px; line-height: 1.6; }
.mw-body-content a, .mw-body-content a:visited { text-underline-offset: 3px; }
.mw-parser-output li::marker { color: var(--gilt); }
/* The skin's external link icon is a fixed blue image. */
.mw-parser-output a.external { background-image: none !important; padding-right: 0 !important; }
.mw-parser-output a.external::after {
  content: ' \2197';
  width: auto;
  height: auto;
  margin: 0;
  background: none !important;
  -webkit-mask: none;
  mask: none;
  color: var(--gilt-lo);
}
.mw-parser-output b, .mw-parser-output strong { color: var(--gilt-hi); font-weight: 600; }
hr { background-color: var(--line-soft); }
kbd {
  display: inline-block;
  padding: 1px 7px 2px;
  font: 600 .82em/1.4 var(--sans);
  color: var(--parchment);
  white-space: nowrap;
  background: rgba(239, 231, 212, .08);
  border: 1px solid rgba(239, 231, 212, .22);
  border-bottom-width: 2px;
  border-radius: 4px;
}
code, .mw-code, pre {
  font-family: var(--mono);
  color: var(--gilt-hi);
  background: rgba(228, 185, 100, .09);
  border: 0;
}
pre, .mw-code { border: 1px solid var(--line-soft); }

/* ---------- tables ---------- */
.mw-parser-output table.wikitable, table.wikitable {
  color: var(--parchment);
  background: var(--panel-bg);
  border: 1px solid var(--line-soft);
  border-collapse: collapse;
  font-size: 15.5px;
}
table.wikitable > * > tr > th, table.wikitable > * > tr > td {
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
}
table.wikitable > * > tr > th {
  font: 700 13px/1.2 var(--cond);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gilt);
  text-align: left;
}
table.wikitable > caption { padding-bottom: 8px; color: var(--ash); font-weight: 600; }
table.sortable th.headerSort { padding-right: 22px; }

/* ---------- panels: thumbnails, infoboxes, navigation ---------- */
figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'],
.thumbinner, .infobox, .navbox {
  color: var(--parchment);
  background: var(--panel-bg);
  border: 1px solid var(--line-soft);
}
figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
  color: var(--ash);
  background: transparent;
  border: 0;
}
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
  background: var(--basalt);
  border-color: var(--line-soft);
}
.infobox {
  float: right;
  clear: right;
  margin: 0 0 16px 20px;
  border-top: 2px solid rgba(228, 185, 100, .55);
  font-size: 14.5px;
}
.infobox th { color: var(--gilt); }
.mw-parser-output .toc, .toc, .vector-toc, .vector-pinnable-element { color: var(--parchment); }
.mw-body-content .toc, .toc { background: var(--panel-bg); border: 1px solid var(--line-soft); }
.vector-toc .vector-toc-link, .vector-toc .vector-toc-link:visited { color: rgba(239, 231, 212, .78); }
.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.vector-toc .vector-toc-link:hover { color: var(--gilt-hi); }
.vector-toc .vector-toc-list-item-active > .vector-toc-link { font-weight: 700; }
.vector-pinnable-header-label, .vector-menu-heading { color: var(--ash); }
.vector-dropdown-content, .vector-menu-portal .vector-menu-content, .vector-main-menu-landmark .vector-main-menu {
  color: var(--parchment);
}
.vector-dropdown .vector-dropdown-content {
  background: var(--basalt);
  border: 1px solid var(--line-soft);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}

/* The sidebars' solid backgrounds and scroll fades would show against the page's gradient. */
.vector-column-start, .vector-column-end, .vector-sticky-pinned-container,
.vector-pinned-container, .vector-pinnable-element, .vector-main-menu-container {
  background: transparent;
}
.vector-sticky-pinned-container::after { display: none; }

/* ---------- search, buttons and forms ---------- */
.cdx-text-input__input, .oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea, textarea, input[type='text'], input[type='search'], input[type='password'] {
  color: var(--parchment);
  background-color: rgba(5, 10, 9, .6);
  border-color: var(--line);
  border-radius: 0;
}
.cdx-text-input__input:focus, .oo-ui-textInputWidget input:focus, textarea:focus {
  border-color: var(--gilt-hi);
  box-shadow: inset 0 0 0 1px var(--gilt-hi);
}
.cdx-search-input__end-button, .cdx-button, .oo-ui-buttonElement-button { border-radius: 0; font-weight: 600; }
.cdx-button--action-progressive.cdx-button--weight-primary,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button,
.mw-htmlform-submit {
  color: #1d1305 !important;
  background: linear-gradient(180deg, #ffe9a8 0%, var(--gilt) 45%, #b5802f 100%) !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(90, 55, 10, .5);
}
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
  color: var(--gilt-hi);
  background-color: rgba(228, 185, 100, .08);
  border-color: var(--line);
}
.oo-ui-widget, .oo-ui-labelElement-label { color: var(--parchment); }
.oo-ui-menuSelectWidget, .oo-ui-toolbar-bar, .oo-ui-popupWidget-popup, .suggestions-results, .ve-ui-surface {
  color: var(--parchment);
  background-color: var(--basalt);
  border-color: var(--line-soft);
}
.wikiEditor-ui-toolbar, .wikiEditor-ui-toolbar .tabs, .wikiEditor-ui-toolbar .sections { background: var(--basalt); }
.mw-editfont-monospace { font-family: var(--mono); }

/* OOUI's icons are dark images, not tokens. Night mode inverts them the same way. */
.oo-ui-iconElement-icon:not(.oo-ui-image-invert):not(.oo-ui-image-progressive):not(.oo-ui-image-destructive),
.oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert),
.mw-rcfilters-ui-filterTagItemWidget .oo-ui-buttonElement-button {
  filter: invert(1) sepia(.25);
}
.cdx-button--action-progressive.cdx-button--weight-primary .oo-ui-iconElement-icon,
.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive .oo-ui-iconElement-icon { filter: none; }
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
  color: #1d1305 !important;
}
.oo-ui-buttonElement-button:focus, .oo-ui-buttonElement-button:focus-visible {
  border-color: var(--gilt-hi) !important;
  box-shadow: inset 0 0 0 1px var(--gilt-hi) !important;
}

/* ---------- page editors ---------- */
.oo-ui-toolbar-bar { background: var(--basalt); border-color: var(--line-soft); box-shadow: 0 1px 0 var(--line-soft); }
.oo-ui-toolbar .oo-ui-toolGroup, .oo-ui-toolbar .oo-ui-barToolGroup, .oo-ui-toolbar .oo-ui-popupToolGroup {
  border-color: var(--line-soft);
}
.ve-ui-surface, .ve-ce-surface, .ve-init-mw-desktopArticleTarget .mw-content-container,
.ve-init-mw-desktopArticleTarget-originalContent, .ve-init-mw-target-surface { background: transparent; }
.ve-ui-debugBar, .ve-ui-toolbar-saveButton { background: transparent; }
.oo-ui-window-frame, .oo-ui-window-body, .oo-ui-processDialog-content, .oo-ui-dialog-content > .oo-ui-window-body {
  color: var(--parchment);
  background-color: var(--basalt);
}
.wikiEditor-ui, .wikiEditor-ui-view, .wikiEditor-ui-bottom, .wikiEditor-ui-toolbar .group { border-color: var(--line-soft); }
.wikiEditor-ui-toolbar .tabs .tab a { color: var(--gilt) !important; }
.wikiEditor-ui-toolbar .booklet .index div, .wikiEditor-ui-toolbar .page-characters div span { color: var(--gilt); }
.wikiEditor-ui-toolbar .group .label, .editOptions, .editOptions label { color: var(--parchment); }
.editOptions { background: var(--basalt); border-color: var(--line-soft); }

/* ---------- history and diffs ---------- */
.mw-plusminus-pos { color: var(--emerald); }
.mw-plusminus-neg { color: var(--ember); }
td.diff-context { color: var(--ash); background: var(--basalt); border-color: var(--line-soft); }
td.diff-addedline, td.diff-deletedline { color: var(--parchment); background: var(--basalt); }
td.diff-addedline { border-color: rgba(47, 211, 138, .5); }
td.diff-deletedline { border-color: rgba(255, 106, 43, .5); }
td.diff-addedline .diffchange { color: var(--parchment); background: rgba(47, 211, 138, .3); }
td.diff-deletedline .diffchange { color: var(--parchment); background: rgba(255, 106, 43, .3); }
.diff-lineno, .diff-otitle, .diff-ntitle { color: var(--parchment); background: transparent; }

/* ---------- tabs and page tools ---------- */
.vector-menu-tabs .vector-tab-noicon a, .mw-portlet-views a, .mw-portlet-associated-pages a { color: var(--ash); font-weight: 600; }
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited { color: var(--gilt-hi); }
.vector-menu-tabs .mw-list-item.selected { box-shadow: inset 0 -2px 0 var(--gilt); }

/* ---------- MediaWiki notices ---------- */
.cdx-message, .mw-message-box, .warningbox, .errorbox, .successbox {
  color: var(--parchment);
  background-color: var(--background-color-notice-subtle);
  border-color: var(--line-soft);
}
.mw-footer-container { background: transparent; }
.mw-footer { border-top: 1px solid var(--line-soft); color: var(--ash); }
.mw-footer a { color: rgba(239, 231, 212, .78); font-weight: 600; text-decoration: none; }
.mw-footer a:hover { color: var(--gilt-hi); }
#footer-icons { display: none; }

/* ---------- guide components, for articles ported from newschool99.com/guides ---------- */
.mw-parser-output .soon {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 8px 3px;
  vertical-align: 2px;
  white-space: nowrap;
  font: 700 11.5px/1.2 var(--cond);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--abyss);
  background: var(--arcane);
}
.mw-parser-output .soon-later { background: var(--down); }
.mw-parser-output .tip {
  max-width: 72ch;
  margin: 18px 0;
  padding: 13px 16px;
  font-size: 15.5px;
  line-height: 1.55;
  background: rgba(47, 211, 138, .07);
  border-left: 2px solid var(--emerald);
}
.mw-parser-output .tip-soon { background: rgba(125, 226, 240, .07); border-left-color: var(--arcane); }
.mw-parser-output .example {
  max-width: 72ch;
  margin: 16px 0;
  padding: 16px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--line-soft);
}