MediaWiki:Common.css: Difference between revisions

/* ==========================================================================
   EDFM site-wide styling -- "Elite Dangerous technical field manual" theme.
   Original CSS written for this project -- no code or assets copied from
   runescape.wiki, Elite Dangerous, or any other site/game, and no Frontier
   logo/branding/proprietary fonts/copied HUD elements. Restrained visual
   influence only: dark industrial surfaces, subtle angular geometry,
   orange/cyan accents used sparingly, information hierarchy first. This is
   a reference site, not a HUD -- no glow, no neon, no glassmorphism, no
   constant animation.

   SKIN NOTE: the site uses Vector "legacy" (2011), not Vector 2022 -- see
   the "Why Vector legacy" note in docs/content-style-guide.md (Vector 2022
   hard-restricts its pinned sidebar to logged-in users; legacy has no such
   restriction). Several rules below exist specifically to beat core Vector
   legacy/mediawiki.skinning selectors that are *more specific* than a naive
   override would be (documented inline at each occurrence) -- this isn't
   guesswork, each one was found by reading the actual core .less source and
   confirmed with a real rendered screenshot, not just computed-style checks
   (:visited colours in particular are invisible to getComputedStyle by
   design -- see the tab-bar note below).

   File organised to mirror the 2026-08-07 redesign brief's own section
   numbers, so both stay easy to cross-reference.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
	/* Surfaces -- darkest to lightest */
	--edfm-bg-deep: #090d0f;
	--edfm-bg-page: #0d1215;
	--edfm-surface-1: #12181c;
	--edfm-surface-2: #171f24;
	--edfm-surface-3: #1c252b;

	/* Borders */
	--edfm-border: #273239;
	--edfm-border-soft: rgba( 255, 255, 255, 0.07 );

	/* Text */
	--edfm-text: #e7eaec;
	--edfm-text-muted: #8e9aa1;
	--edfm-text-dim: #68757c;

	/* Accents -- orange is reserved for navigation/selection/emphasis/
	   section numbering; cyan/blue are for links, verification info, and
	   secondary interface elements. See "Links" and "Colour system" in
	   docs/content-style-guide.md for the reasoning. */
	--edfm-orange: #ff8a00;
	--edfm-orange-bright: #ffa21a;
	--edfm-cyan: #42c7d9;
	--edfm-blue: #4f9fe8;

	/* Derived link colours (not part of the operator's token list verbatim,
	   but named separately so link handling reads as its own concern) */
	--edfm-link: var( --edfm-blue );
	--edfm-link-visited: #3f7bb3;
	--edfm-link-hover: #8cc4f7;
	--edfm-link-external: var( --edfm-cyan );
	--edfm-link-external-visited: #2f8f9c;
	--edfm-link-external-hover: #7fe0ec;
	--edfm-link-new: #e07a7a;

	/* Status semantics (article metadata module) -- text label always
	   present too, never colour-only. */
	--edfm-status-positive: var( --edfm-cyan );
	--edfm-status-attention: var( --edfm-orange );
	--edfm-status-neutral: var( --edfm-text-dim );

	/* Typography */
	--edfm-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
	--edfm-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Legacy aliases: earlier revisions of this stylesheet used these names
	   directly and some inline template output/older docs may still refer
	   to them; keep pointing at the current tokens rather than duplicate
	   values that could drift out of sync. */
	--edfm-orange-hover: var( --edfm-orange-bright );
	--edfm-orange-active: var( --edfm-orange-bright );
	--color-progressive: var( --edfm-orange );
	--color-progressive--hover: var( --edfm-orange-bright );
	--color-progressive--active: var( --edfm-orange-bright );
	--color-progressive--focus: var( --edfm-orange );
	--background-color-progressive: var( --edfm-orange );
	--background-color-progressive--hover: var( --edfm-orange-bright );
	--background-color-progressive--active: var( --edfm-orange-bright );
	--border-color-progressive: var( --edfm-orange );
	--border-color-progressive--hover: var( --edfm-orange-bright );
	--border-color-progressive--active: var( --edfm-orange-bright );

	/* Shared geometry: a small clipped corner reads as "technical panel"
	   without a giant border-radius anywhere on the site. */
	--edfm-corner: 10px;
	--edfm-content-max: 1200px;
}

/* ==========================================================================
   2. BASE / RESET-ADJACENT
   ========================================================================== */
html, body {
	background-color: var( --edfm-bg-page );
	color: var( --edfm-text );
}
body.mediawiki {
	color: var( --edfm-text );
	font-family: var( --edfm-sans );
}
/* Very faint (~2.5%) technical grid across the page background. Only
   visible where an opaque panel (sidebar, article surface, tables) isn't
   already covering it -- the header strip, the sidebar, and the margin
   outside the width-capped article column on wide screens. Not an image
   asset; pure CSS gradients. */
body {
	background-image:
		linear-gradient( rgba( 255, 255, 255, 0.025 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 255, 255, 255, 0.025 ) 1px, transparent 1px );
	background-size: 48px 48px;
}
@media ( prefers-reduced-motion: reduce ) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}
/* Focus visibility: the pre-redesign stylesheet had no explicit focus
   styling at all (relying entirely on browser defaults, which vary and can
   be hard to see against a dark theme). Applies to every interactive
   element, not just links. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var( --edfm-cyan );
	outline-offset: 2px;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	color: var( --edfm-text );
	border-color: var( --edfm-border );
}
/* !important justified here: MediaWiki core's mediawiki.skinning module
   sets heading colour with equal-specificity plain-tag selectors and kept
   winning in testing despite this stylesheet loading later -- rather than
   keep chasing exact cascade/bundling order, force it. This is a
   correctness/contrast fix, not decoration. */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
.mw-heading1, .mw-heading2, .mw-heading3, .mw-heading4, .mw-heading5, .mw-heading6,
h1, h2, h3, h4, h5, h6 {
	color: var( --edfm-text ) !important;
	border-color: var( --edfm-border ) !important;
	font-family: var( --edfm-mono );
	letter-spacing: 0.01em;
	line-height: 1.3;
}
#firstHeading {
	color: var( --edfm-text ) !important;
	font-family: var( --edfm-mono );
	font-size: 1.9em;
}
/* Restrained "instrument label" bracket treatment on major section
   headings (h2): a plain "// " prefix via ::before (no image, no glow, no
   animation) plus a short orange accent segment layered over the
   otherwise-dim divider line core already draws under h2. If a heading
   opts into explicit numbering via {{Section number}} (see
   .edfm-section-number below), the automatic "// " is suppressed so the
   two treatments don't double up. */
.mw-body h2 {
	position: relative;
	padding-bottom: 0.3em;
	margin-top: 1.6em;
}
.mw-body h2::before {
	content: '// ';
	color: var( --edfm-orange );
	font-weight: 400;
}
.mw-body h2:has( .edfm-section-number )::before {
	content: none;
}
.mw-body h2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 3em;
	max-width: 100%;
	height: 2px;
	background: var( --edfm-orange );
}
.edfm-section-number {
	color: var( --edfm-orange );
	font-weight: 700;
}
.edfm-section-sep {
	color: var( --edfm-orange );
	margin-right: 0.15em;
}
h3, h4 {
	color: var( --edfm-text );
}
h3::before {
	content: '/ ';
	color: var( --edfm-text-dim );
	font-weight: 400;
}

/* Body text: readable sans-serif, deliberately NOT monospace -- long-form
   reading in monospace hurts readability, which stays a hard requirement
   even with a more technical visual language elsewhere. */
.mw-body p,
.mw-body li,
.mw-body dd {
	line-height: 1.65;
}
.mw-body p {
	margin: 0 0 1em 0;
	max-width: 74em; /* comfortable measure even inside the wider content column */
}
.mw-body ul,
.mw-body ol {
	line-height: 1.65;
	margin-bottom: 1em;
}
.mw-body h2 + p,
.mw-body h3 + p {
	margin-top: 0.6em;
}
hr {
	background-color: var( --edfm-border );
	border-color: var( --edfm-border );
}

/* ==========================================================================
   8. LINKS
   ========================================================================== */
a { color: var( --edfm-link ); transition: color 0.1s ease; }
a:visited { color: var( --edfm-link-visited ); }
a:hover { color: var( --edfm-link-hover ); }
a.new, .new a { color: var( --edfm-link-new ); }
a.external { color: var( --edfm-link-external ); }
/* Core MediaWiki ships `.mw-parser-output a.external`/`a.extiw` (and their
   :visited/:hover states) at higher specificity (two classes + a tag) than
   a plain `a.external` rule (one class + a tag), so the line above never
   actually wins for real article links on its own -- the same underlying
   "core selector outranks a naive theme override" gotcha as the tab
   :visited fix further down. Matching the same selector shape here (this
   stylesheet loads after core skin styles) is what actually applies our
   colour to external links in article content. */
.mw-parser-output a.external,
.mw-parser-output a.extiw {
	color: var( --edfm-link-external );
}
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw:visited {
	color: var( --edfm-link-external-visited );
}
.mw-parser-output a.external:hover,
.mw-parser-output a.extiw:hover {
	color: var( --edfm-link-external-hover );
}
.mw-footer a {
	color: var( --edfm-link );
}
.mw-footer a:hover {
	color: var( --edfm-link-hover );
}

/* ==========================================================================
   1 + 4. GLOBAL LAYOUT / ARTICLE HEADER
   ========================================================================== */
/* Vector legacy's core layout (skins.vector.styles.legacy/layouts/screen.less)
   gives `.mw-body` (#content) a left margin to clear the fixed-width
   sidebar and otherwise lets it run edge-to-edge to the browser's right
   side -- there is no max-width at all, which is why content stretched
   excessively on large displays. Capping width here only affects the
   article/footer column; the full-width header/tab bar above it is left
   alone deliberately (its own float/absolute-position math is exactly what
   an earlier round of this project had to carefully debug to get the
   persistent sidebar working at all -- touching it again for a purely
   cosmetic width cap isn't worth the regression risk). A full-bleed
   toolbar above a capped content column is also just a normal, accepted
   pattern on technical documentation sites. */
.mw-body,
#mw-data-after-content,
.mw-footer {
	max-width: var( --edfm-content-max );
	box-sizing: border-box;
}
/* Tables, code blocks, and preformatted content are still allowed to be
   wider than a comfortable reading measure (technical data often needs
   it) -- they scroll horizontally inside the capped column instead of
   being force-shrunk or breaking the layout. Ordinary images/galleries
   already respect the column via max-width:100% below. */
.mw-body table,
.mw-body pre,
.mw-body .mw-code {
	max-width: 100%;
	overflow-x: auto;
}
.mw-body table.wikitable,
.mw-body table.mw-datatable {
	display: block;
	overflow-x: auto;
}
.mw-body table.wikitable tbody,
.mw-body table.mw-datatable tbody {
	display: table;
	width: 100%;
}
.mw-body img {
	max-width: 100%;
	height: auto;
}

/* Eyebrow / deck (see Template:Article header). The eyebrow line is
   authored as ordinary wikitext and, purely as a placement detail, a small
   script (MediaWiki:Common.js) moves it directly above #firstHeading on
   page load -- see the comment there for why that needs JS rather than
   CSS/a template (the title is rendered by the skin before the article
   body in the DOM, so nothing living inside the article body can appear
   earlier than it without either moving it in the DOM or abandoning the
   real semantic H1, and the brief is explicit the H1 must stay the real
   H1). If JS is unavailable the eyebrow still renders, just directly under
   the title instead of above it -- nothing breaks, it's a placement
   nicety, not functionality. */
.edfm-eyebrow {
	margin: 0 0 0.3em 0;
	font-family: var( --edfm-mono );
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --edfm-text-dim );
}
.edfm-eyebrow .edfm-orange-mark {
	color: var( --edfm-orange );
}
.edfm-deck {
	color: var( --edfm-text-muted );
	font-size: 1.05em;
	max-width: 60em;
	margin: 0.3em 0 1.2em 0;
}

/* ==========================================================================
   1. SIDEBAR
   ========================================================================== */
#mw-panel {
	background-color: var( --edfm-bg-deep );
}
#mw-panel .portal .body,
#mw-panel .portal ul {
	border-color: var( --edfm-border-soft );
}
#mw-panel .portal a {
	color: var( --edfm-text-muted );
	display: block;
	padding: 0.15em 0.4em;
	margin: 0 -0.4em;
	border-left: 2px solid transparent;
	border-radius: 0;
}
#mw-panel .portal a:hover {
	color: var( --edfm-cyan );
	background: var( --edfm-surface-1 );
}
/* "You are here" -- MediaWiki's sidebar has no built-in current-page
   indication; MediaWiki:Common.js adds the .edfm-nav-current class to the
   matching list item by comparing hrefs to the current URL. Orange is
   reserved for exactly this kind of "important navigation / selected
   state" per the colour system, which is why the rest of the sidebar is
   deliberately muted rather than orange throughout (an all-orange sidebar
   would both fight this indicator and read as visually dominant, which the
   brief specifically calls out to avoid). */
.edfm-nav-current > a {
	color: var( --edfm-orange ) !important;
	font-weight: 700;
	border-left-color: var( --edfm-orange );
	background: var( --edfm-surface-1 );
}
.vector-menu-heading {
	color: var( --edfm-text-dim );
	font-weight: 700;
	font-family: var( --edfm-mono );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.75em;
	border-left: 2px solid var( --edfm-orange );
	padding-left: 0.5em;
	margin-left: -0.5em;
}

/* ==========================================================================
   4/9. HEADER / MASTHEAD / MEDIAWIKI TABS
   ========================================================================== */
#mw-page-base {
	background-color: var( --edfm-bg-deep );
	background-image: none;
}
#mw-head-base {
	background-color: var( --edfm-bg-deep );
}
#p-personal,
.vector-header-container {
	border-bottom: 2px solid var( --edfm-orange );
}
#mw-head-base {
	border-bottom: 2px solid var( --edfm-orange );
}
/* Personal tools (login/logout) -- a real action, kept orange-adjacent but
   quiet until interacted with, matching "utility control" treatment. */
#p-personal a {
	color: var( --edfm-text-muted );
	font-family: var( --edfm-mono );
}
#p-personal a:hover {
	color: var( --edfm-orange );
}
/* Namespace tabs (Main Page / Discussion, left) and view tabs
   (Read / Edit / View history, right) both use Vector legacy's
   .vector-menu-tabs-legacy markup. Core skin CSS paints every tab `li`
   with a gradient fading to white and forces the selected tab to pure
   white -- neither is touched by recolouring the link text alone, which is
   why these stayed light before this stylesheet covered the `li`
   background too. Core also has an `a:visited` rule (higher specificity
   than a plain `a` rule, since a pseudo-class counts the same as a class)
   that reasserts a near-black "visited" colour meant for a white
   background; since these tabs point at pages you've almost always
   already visited, without an explicit `:visited` override here the text
   goes dark-on-dark. This can't be caught by reading getComputedStyle() in
   an automated check -- browsers deliberately report the *unvisited*
   colour to JS for privacy reasons, so it only shows up on an actual
   screen; verified with real rendered screenshots, including after
   genuinely visiting the linked pages first.

   Per the redesign brief, tabs are "important navigation" (namespace
   identity) rather than "utility controls" (the view/actions tabs, see
   below) -- selected state stays orange; unselected rests at a slightly
   dimmer neutral than article body text so the *selected* tab still reads
   as the clear focal point. */
.vector-menu-tabs-legacy li {
	background-image: none;
	background-color: var( --edfm-surface-2 );
}
.vector-menu-tabs-legacy li.selected {
	background-image: none;
	background-color: var( --edfm-surface-1 );
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited {
	background-color: transparent;
	color: var( --edfm-text-dim );
	font-family: var( --edfm-mono );
	letter-spacing: 0.01em;
}
.vector-menu-tabs-legacy li a:hover,
.vector-menu-tabs-legacy li a:visited:hover {
	color: var( --edfm-text );
}
.vector-menu-tabs-legacy li.selected a,
.vector-menu-tabs-legacy li.selected a:visited {
	color: var( --edfm-orange );
}
.vector-menu-tabs-legacy li.new a,
.vector-menu-tabs-legacy li.new a:visited {
	color: var( --edfm-link-new );
}
/* "More" actions dropdown (#p-cactions) sits in the same tab row; same
   :visited gotcha applies to its menu items. Kept deliberately quiet --
   this is the clearest case of "utility control, not primary nav". */
.vector-menu-dropdown .vector-menu-heading {
	color: var( --edfm-text-dim );
	font-family: var( --edfm-mono );
	border-left: none;
	padding-left: 8px;
	margin-left: 0;
	text-transform: none;
	letter-spacing: normal;
	font-size: 1em;
	font-weight: normal;
}
.vector-menu-dropdown .vector-menu-heading:hover,
.vector-menu-dropdown .vector-menu-heading:focus {
	color: var( --edfm-orange );
}
.vector-menu-dropdown .vector-menu-content {
	background-color: var( --edfm-surface-2 );
	border-color: var( --edfm-border );
}
.vector-menu-dropdown .vector-menu-content a,
.vector-menu-dropdown .vector-menu-content a:visited {
	color: var( --edfm-text-muted );
}
.vector-menu-dropdown .vector-menu-content li.selected a,
.vector-menu-dropdown .vector-menu-content li.selected a:visited {
	color: var( --edfm-orange );
}
.vector-menu-dropdown .vector-menu-content li:hover {
	background-color: var( --edfm-surface-3 );
}
.vector-search-box-inner input,
#searchInput {
	background-color: var( --edfm-surface-2 );
	color: var( --edfm-text );
	border: 1px solid var( --edfm-border );
	font-family: var( --edfm-mono );
}
#searchInput::placeholder {
	color: var( --edfm-text-dim );
}

/* ==========================================================================
   CONTENT / ARTICLE SURFACE
   ========================================================================== */
.mw-body,
.parsoid-body {
	background-color: var( --edfm-surface-1 );
	color: var( --edfm-text );
	border-color: var( --edfm-border );
	font-family: var( --edfm-sans );
}
#content {
	background-color: var( --edfm-surface-1 );
}

/* ==========================================================================
   10. TABLE OF CONTENTS
   ========================================================================== */
/* Restyled as an "EDFM navigation module" rather than a default wiki TOC,
   while leaving MediaWiki's actual TOC markup/anchors completely alone --
   this is presentation only. "Contents" is kept in the DOM for screen
   readers/no-JS/no-CSS fallback (more standard wording there anyway) and
   visually replaced with "Jump to" via ::before on the wrapper, with the
   real heading text hidden via font-size rather than display:none so it
   remains in the accessibility tree. */
#toc, .toc {
	background-color: var( --edfm-surface-2 ) !important;
	border: 1px solid var( --edfm-border ) !important;
	color: var( --edfm-text );
	padding: 0.8em 1em;
	clip-path: polygon( 0 0, calc( 100% - var( --edfm-corner ) ) 0, 100% var( --edfm-corner ), 100% 100%, 0 100% );
}
.toctitle {
	position: relative;
	margin-bottom: 0.4em;
}
.toctitle::before {
	content: 'Jump to';
	font-family: var( --edfm-mono );
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --edfm-orange );
}
.toctitle h2 {
	font-size: 0;
	line-height: 0;
	margin: 0;
	border: none;
	padding: 0;
	display: inline;
}
.toctitle h2::before,
.toctitle h2::after {
	content: none;
}
.toctogglelabel::before {
	color: var( --edfm-text-dim );
}
/* Top-level entries as wrapped horizontal "chips" -- reads well for the
   short/medium pages this site mostly has, and simply wraps onto more
   rows for longer ones rather than needing a separate vertical mode. */
.toc > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.2em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.toc ul ul {
	flex-basis: 100%;
	width: 100%;
	list-style: none;
	margin: 0.2em 0 0.2em 1.4em;
	padding: 0;
	display: block;
}
.toc li {
	margin: 0;
}
.toc a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	color: var( --edfm-text-muted );
	text-decoration: none;
	font-size: 0.92em;
}
.toc a:hover {
	color: var( --edfm-cyan );
}
.tocnumber {
	color: var( --edfm-orange );
	font-family: var( --edfm-mono );
	font-weight: 700;
	min-width: 1.2em;
}
.toctext {
	color: inherit;
}

/* ==========================================================================
   6. PANELS / CALLOUTS, and 11. ARTICLE METADATA / STATUS MODULE
   ========================================================================== */
/* Deliberately NOT defined here. .edfm-box / .edfm-panel* / .edfm-status* /
   .edfm-inline-flag are used exclusively by the editorial templates (see
   Template:Article status, Template:Draft warning, etc.), which already
   load Template:EDFM style/styles.css themselves via <templatestyles>.
   Defining the same class names in both this file and that one would
   leave their relative precedence dependent on unclear/unstable ordering
   between a ResourceLoader "site" stylesheet and a TemplateStyles-injected
   <style> tag -- rather than rely on that, there is exactly one definition
   of each, living in Template:EDFM style/styles.css. That file freely uses
   the --edfm-* custom properties defined above; custom properties resolve
   through the DOM regardless of which stylesheet declared vs references
   them, so this split costs nothing. */

/* ==========================================================================
   7. TABLES (wikitables, and Special: pages' tables)
   ========================================================================== */
table.wikitable,
table.mw-datatable {
	background-color: var( --edfm-surface-2 );
	color: var( --edfm-text );
	border-color: var( --edfm-border );
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
	background-color: var( --edfm-surface-3 );
	color: var( --edfm-text );
	border-color: var( --edfm-border );
	font-family: var( --edfm-mono );
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.85em;
	text-align: left;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
	border-color: var( --edfm-border-soft );
	padding: 0.5em 0.7em;
}
/* Subtle alternating row treatment -- helps scanning wide/dense reference
   tables without turning them into cards. */
table.wikitable > tbody > tr:nth-child( even ),
table.wikitable > * > tr:nth-child( even ) {
	background-color: var( --edfm-surface-1 );
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.mw-footer {
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid var( --edfm-border );
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "info icons" "places icons";
	align-items: center;
	column-gap: 2em;
	row-gap: 0.3em;
}
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
	color: var( --edfm-text-dim );
	border-color: var( --edfm-border-soft );
}
#footer-info {
	grid-area: info;
	margin: 0;
}
#footer-places {
	grid-area: places;
	margin: 0;
}
#footer-icons {
	grid-area: icons;
	align-self: center;
	display: flex;
	gap: 0.75em;
	margin: 0;
}
#footer-icons img {
	background: var( --edfm-text );
	border-radius: 2px;
}
@media ( max-width: 640px ) {
	.mw-footer {
		grid-template-columns: 1fr;
		grid-template-areas: "info" "places" "icons";
	}
	#footer-icons {
		margin-top: 0.5em;
	}
}

/* ==========================================================================
   MISC MediaWiki UI chrome that ships with light backgrounds by default
   ========================================================================== */
.catlinks {
	background-color: var( --edfm-surface-2 ) !important;
	border-color: var( --edfm-border ) !important;
	color: var( --edfm-text-muted );
}
div.thumbinner {
	background-color: var( --edfm-surface-2 );
	border-color: var( --edfm-border );
}
.thumbimage {
	background-color: var( --edfm-surface-1 );
	border-color: var( --edfm-border );
}

/* Code / preformatted text (syntaxhighlight uses its own Pygments theme,
   set via $wgPygmentsStyle in LocalSettings.php; this covers plain
   <pre>/<code> that isn't Pygments-highlighted). */
pre, code, .mw-code {
	background-color: var( --edfm-surface-2 );
	color: var( --edfm-text );
	border-color: var( --edfm-border );
	font-family: var( --edfm-mono );
}

/* ==========================================================================
   GENERIC INFOBOX -- see Template:Infobox
   ========================================================================== */
.edfm-infobox {
	float: right;
	clear: right;
	width: 300px;
	margin: 0 0 1.2em 1.2em;
	border: 1px solid var( --edfm-orange );
	background: var( --edfm-surface-2 );
	color: var( --edfm-text );
	font-size: 0.9em;
}
.edfm-infobox-title {
	background: var( --edfm-orange );
	color: var( --edfm-bg-deep );
	font-weight: 700;
	font-family: var( --edfm-mono );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.4em 0.6em;
	clip-path: polygon( 0 0, calc( 100% - 14px ) 0, 100% 14px, 100% 100%, 0 100% );
}
.edfm-infobox-image {
	text-align: center;
	padding: 0.6em;
	border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-row {
	display: flex;
	border-bottom: 1px solid var( --edfm-border-soft );
	padding: 0.35em 0.6em;
}
.edfm-infobox-row:last-child {
	border-bottom: none;
}
.edfm-infobox-label {
	font-weight: 700;
	font-family: var( --edfm-mono );
	font-size: 0.85em;
	width: 40%;
	flex-shrink: 0;
	color: var( --edfm-cyan );
}
.edfm-infobox-value {
	width: 60%;
}
@media ( max-width: 640px ) {
	.edfm-infobox {
		float: none;
		width: auto;
		margin: 1em 0;
	}
}

/* ==========================================================================
   14. MOBILE
   ========================================================================== */
/* Vector legacy has NO built-in responsive breakpoint at all (unlike
   Vector 2022) -- its entire header region (#mw-head, tabs, search,
   personal tools/login) is built with absolute positioning and floats
   that all assume a fixed-width sidebar reserving 10-11em on the left,
   AND the page's actual DOM order is content-then-navigation-then-footer
   (the absolute positioning was doing double duty: both moving the header
   visually to the top AND compensating for that DOM order). Simply
   removing the positioning stacks things in DOM order, which reads oddly
   on a phone (article text, then the nav/sidebar, then the footer).
   Confirmed the actual DOM structure directly (not guessed): <body>'s
   real children are #mw-page-base, #mw-head-base, #content,
   #mw-navigation (which itself contains #mw-head then #mw-panel, already
   in the right relative order), #footer. Since all four major regions are
   direct children of <body>, flexbox `order` on <body> can reorder them
   properly without needing to touch the DOM itself.
   Result: header/search/tabs, then sidebar nav, then content, then
   footer -- a plain stacked mobile layout, not a collapsible hamburger
   menu, but a correct and readable order. */
@media ( max-width: 800px ) {
	body {
		display: flex;
		flex-direction: column;
	}
	/* #mw-head-base ships with `margin-top: -5em` in Vector legacy's own
	   CSS -- a trick to sit it behind the absolutely-positioned header.
	   Now that the header is a normal flex sibling, that negative margin
	   drags everything after it upward. Neutralize both decorative
	   strips. */
	#mw-page-base,
	#mw-head-base {
		order: 0;
		height: 0;
		margin: 0;
		min-height: 0;
	}
	#mw-navigation {
		order: 1;
	}
	#content {
		order: 2;
	}
	.mw-footer {
		order: 3;
	}

	#mw-head {
		position: static;
		width: auto;
	}
	#left-navigation,
	#right-navigation {
		float: none;
		margin: 0;
		width: auto;
		clear: both;
	}
	#left-navigation {
		margin-top: 0;
	}
	#p-personal {
		position: static;
		text-align: right;
		padding: 0.5em 1em;
		margin: 0;
		right: auto;
		top: auto;
	}
	#p-personal ul {
		padding-left: 0;
	}
	.vector-search-box {
		float: none;
		margin: 0.5em 1em;
		display: block;
	}
	.vector-search-box-inner {
		width: auto;
		max-width: none;
	}
	#mw-panel {
		position: static;
		width: auto;
		padding: 0.5em 1em;
		float: none;
		border-top: 1px solid var( --edfm-border );
		border-bottom: 1px solid var( --edfm-border );
	}
	.mw-body,
	#mw-data-after-content,
	.mw-footer {
		margin-left: 0;
		max-width: none;
	}
	.mw-body {
		margin-top: 0;
		border-width: 0;
		padding: 1em;
	}
	.edfm-status-details {
		grid-template-columns: 1fr;
	}
	.toc > ul {
		gap: 0.3em 0.9em;
	}
	#firstHeading {
		font-size: 1.5em;
	}
}