Elite Dangerous Field Manual - User contributions [en]

MediaWiki:Common.css

2026-08-19T22:25:04Z

EDFM Site Maintenance: Give edfm-panel-review the same compact/centred width as edfm-panel-draft (rail width guarantee override)

/* ==========================================================================
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).

2026-08-07 SECOND PASS: the first redesign pass was judged too close to
stock MediaWiki with a colour change -- this pass changes the actual
visual composition (centred workspace instead of a huge dead gutter,
a two-tier header, a real masthead, a tile-grid TOC, a restructured
status module, larger deliberate type scale, depth via surface
elevation instead of borders-around-everything) while reusing every
working mechanism from the first pass rather than throwing it away --
the tab/:visited fix, the external-link specificity fix, the mobile
reorder fix, and focus-visible/reduced-motion are all still here,
unchanged in mechanism.
========================================================================== */

/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* Depth system: site (outermost, visible in the sidebar/header/gutters)
-> article surface -> component surfaces, each a deliberate step
brighter so the page reads as having actual depth rather than "one
background colour with slightly lighter boxes everywhere". */
--edfm-bg-deep: #07090b;
--edfm-bg-page: #0a0e11;
--edfm-surface-1: #10171b;
--edfm-surface-2: #161f24;
--edfm-surface-3: #1c272d;
--edfm-surface-4: #233037;

--edfm-border: #26333b;
--edfm-border-soft: rgba( 255, 255, 255, 0.06 );

--edfm-text: #edf0f2;
--edfm-text-muted: #98a5ad;
--edfm-text-dim: #6c7a82;

/* 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 */
--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 );
--edfm-status-positive-bg: rgba( 66, 199, 217, 0.12 );
--edfm-status-attention-bg: rgba( 255, 138, 0, 0.12 );
--edfm-status-neutral-bg: rgba( 108, 122, 130, 0.12 );

/* Typography -- explicit desktop scale (2026-08-07 pass 2). Sized in
rem against the root's real 16px (Vector legacy's own
@font-size-root is 100%, i.e. browser default -- confirmed by
reading skins.vector.styles.legacy/variables.less, not assumed)
rather than nested em, specifically so component sizes can't
compound smaller than intended inside whatever ambient size an
ancestor happens to set. */
--edfm-fs-title: clamp( 1.9rem, 1.4rem + 2vw, 2.25rem ); /* ~30-36px */
--edfm-fs-h2: 1.35rem; /* ~21.6px */
--edfm-fs-h3: 1.15rem; /* ~18.4px */
--edfm-fs-body: 1rem; /* 16px */
--edfm-fs-resource-name: 1.1rem; /* ~17.6px */
--edfm-fs-meta: 0.8rem; /* ~12.8px */
--edfm-fs-sidebar: 0.9375rem; /* 15px -- polish pass: +1px for readability */
--edfm-fs-utility: 0.72rem; /* ~11.5px */

--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 );

/* Geometry / layout */
--edfm-corner: 10px;
/* Full-width article workspace: keep the fixed Vector sidebar clear,
but let the article surface use the entire remaining viewport. */
--edfm-sidebar-width: 12.75rem;
--edfm-sidebar-clear: 12.75rem;
--edfm-content-max: calc( 100vw - var( --edfm-sidebar-clear ) );
--edfm-gutter: 0px;
}

/* ==========================================================================
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 );
font-size: var( --edfm-fs-body );
}
/* Background treatment: a faint technical grid plus a very soft radial
glow centred behind the (now centred) content column, so the composition
still has quiet visual interest in the gutters on ultrawide screens
instead of just flat colour -- both stay under ~3% opacity, this is
texture, not a HUD. Not image assets; pure CSS gradients. */
body {
background-image:
radial-gradient( ellipse 1400px 900px at 50% 0%, rgba( 66, 199, 217, 0.05 ), transparent 60% ),
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: auto, 48px 48px, 48px 48px;
background-repeat: no-repeat, repeat, repeat;
background-attachment: fixed, scroll, scroll;
}
/* Full-height sidebar rail: mirrors the RuneScape.wiki behavior where the
left rail has no visible bottom edge. The real #mw-panel only carries the
navigation content; this fixed layer paints the uninterrupted surface,
border, and shadow down the whole viewport. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var( --edfm-sidebar-width );
background: linear-gradient( 180deg, var( --edfm-surface-1 ) 0%, var( --edfm-bg-deep ) 100% );
border-right: 1px solid var( --edfm-border );
box-shadow: 10px 0 22px rgba( 0, 0, 0, 0.32 );
pointer-events: none;
z-index: 1;
}
@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: 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;
}

/* Small reusable angular motif: a corner-cut bracket, used sparingly (see
the redesign notes in docs/content-style-guide.md for exactly where) --
deliberately not applied everywhere. */
.edfm-corner-cut {
clip-path: polygon( 0 0, calc( 100% - var( --edfm-corner ) ) 0, 100% var( --edfm-corner ), 100% 100%, 0 100% );
}

/* ==========================================================================
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: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.75rem, 1.35rem + 1.45vw, 2.15rem );
font-weight: 700;
letter-spacing: 0;
line-height: 1.18;
margin: 0.15em 0 0.25em;
padding-bottom: 0.22em;
border-bottom: 1px solid var( --edfm-border );
}
/* Section headings (h2): "// " prefix in orange, bright heading text, a
short orange accent segment over the dim full-width divider core
already draws. Substantially more vertical space than a wiki section
normally gets, per the "sections feel packed together" fix -- 3.25rem
(~52px) above, ~1.1rem gap to the first content component below. If a
heading opts into explicit numbering via {{Section number}}, the
automatic "// " is suppressed so the two treatments don't double up. */
.mw-body h2 {
position: relative;
padding-bottom: 0.25em;
margin-top: 2rem;
margin-bottom: 0.85rem;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.28rem, 1.08rem + 0.65vw, 1.62rem );
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid var( --edfm-border ) !important;
}
.mw-body h2::before {
content: none;
}
.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 );
font-size: var( --edfm-fs-h3 );
}
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.7;
font-size: var( --edfm-fs-body );
}
.mw-body p {
margin: 0 0 1.1em 0;
max-width: none !important; /* Site-wide full-width pass: article text should use the whole content rail. */
}
.mw-body ul,
.mw-body ol {
line-height: 1.7;
margin-bottom: 1.1em;
}

/* EDFM article bullets: replace the stock browser dot with the provided
cyan field-manual arrow, scaled to text size rather than using the source
image's native 100x91 dimensions. This targets article unordered lists;
interface/navigation lists such as the Jump To TOC and galleries are reset
below so they keep their component-specific layout. */
.mw-parser-output ul {
list-style: none;
padding-left: 1.55em;
}
.mw-parser-output ul > li {
position: relative;
}
.mw-parser-output ul > li::before {
content: '';
position: absolute;
left: -1.35em;
top: 0.48em;
width: 0.82em;
height: 0.75em;
background-image: url( '/edfm-assets/list-bullet-arrow.png' );
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.95;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.35 ) );
}
.mw-parser-output ul ul {
margin-top: 0.3em;
padding-left: 1.45em;
}
.mw-parser-output ul ul > li::before {
left: -1.25em;
top: 0.52em;
width: 0.68em;
height: 0.62em;
opacity: 0.82;
}
/* Component exceptions: these are not prose bullet lists. */
.mw-parser-output .toc ul,
.mw-parser-output .gallery,
.mw-parser-output .gallery ul,
.mw-parser-output .mw-gallery-traditional,
.mw-parser-output .mw-gallery-traditional ul {
padding-left: 0;
}
.mw-parser-output .toc li::before,
.mw-parser-output .gallery li::before,
.mw-parser-output .mw-gallery-traditional li::before {
content: none;
}
/* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the
sibling that immediately follows is that wrapper, not the `h2`/`h3`
itself -- matching both forms since a page could still have a bare
heading in edge cases (e.g. content generated without the wrapper). */
.mw-heading2 + p, .mw-body h2 + p,
.mw-heading3 + p, .mw-body h3 + p,
.mw-heading2 + div, .mw-body h2 + div,
.mw-heading3 + div, .mw-body h3 + div {
margin-top: 0;
}
hr {
background-color: var( --edfm-border );
border-color: var( --edfm-border );
}

/* Quiet, discoverable section-edit controls (logged-in editors only --
MediaWiki only renders these for users who can edit). Keeping the
functionality/keyboard access intact while making sure they don't
compete visually with the heading they're attached to: low opacity at
rest, full opacity on hover/focus of the heading OR the control itself,
brackets hidden (the opacity+letter-spacing treatment already reads as
a distinct control without them). */
.mw-editsection {
margin-left: 1em;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility ) !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.45;
transition: opacity 0.15s ease;
}
.mw-heading:hover .mw-editsection,
.mw-heading:focus-within .mw-editsection,
.mw-editsection:hover,
.mw-editsection:focus-within {
opacity: 1;
}
.mw-editsection a {
color: var( --edfm-text-dim );
}
.mw-editsection a:hover,
.mw-editsection a:focus-visible {
color: var( --edfm-cyan );
}
.mw-editsection-bracket {
display: none;
}
.mw-editsection-divider {
color: var( --edfm-text-dim );
margin: 0 0.3em;
}

/* ==========================================================================
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. GLOBAL LAYOUT -- centred workspace
========================================================================== */
/* Full-width article pass: the article now fills the workspace to the right edge.
Historical note: this block originally centred a capped article column.

THE fix for "enormous unused region on the right side of wide displays".
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 with no max-width at all -- the first redesign
pass added a max-width but left the column pinned to the sidebar's left
edge, which is *why* it still read as "a column stuck on the left with
dead space on the right" rather than a composed layout.

Fix: instead of a fixed `margin-left: 11em`, compute how much space is
left over in the workspace (viewport minus the sidebar) once the
content has its max-width, and split that leftover evenly between the
left and right margins (via the --edfm-gutter token above) -- so the
article is centred *within the workspace to the right of the sidebar*,
not centred in the full viewport (which would ignore the sidebar and
look off-centre) and not pinned to its left edge either. On a screen
too narrow for sidebar + max-width content, --edfm-gutter naturally
evaluates to 0 and this degrades to the old "fill the workspace"
behaviour -- no separate narrow-screen override needed.

The header/tab bar's own float/absolute-position box (#mw-head) is left
at its native full width deliberately -- rewriting *that* mechanism is
a different, much higher-risk change (it took several rounds to get
right originally) -- but its *contents* (search box, personal tools,
namespace/view tabs) get their own right/left offsets pulled in by the
same --edfm-gutter below, so they still visually line up with the
centred column beneath them instead of hugging the browser edge. */
.mw-body,
#mw-data-after-content,
.mw-footer {
position: relative;
z-index: 2;
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
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,
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
/* Keep real table layout so header cells and body cells share one column grid.
The earlier display:block + tbody display:table overflow hack made sortable
headers size independently from body columns, which visibly misaligned the
Engineer directory after portrait chips were added. */
display: table;
width: 100%;
table-layout: auto;
}
.mw-body table.wikitable th,
.mw-body table.wikitable td,
.mw-body table.mw-datatable th,
.mw-body table.mw-datatable td {
vertical-align: middle;
}
.mw-body img {
max-width: 100%;
height: auto;
}

/* ==========================================================================
4. ARTICLE MASTHEAD (eyebrow / title / deck)
========================================================================== */
/* Eyebrow line is authored as ordinary wikitext (see Template:Article
header) and, purely as a placement detail, a small script
(MediaWiki:Common.js) moves it directly above #firstHeading on 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).
If JS is unavailable the eyebrow still renders, just directly under the
title instead of above it.

The eyebrow/title/deck aren't wrapped in one literal bounding box (they
live at two different DOM depths -- eyebrow is a sibling of #firstHeading,
deck is inside the article body further down -- wrapping them in one
real container would need heavier JS than is justified here), so the
"designed masthead" read comes from a matching top rule above the
eyebrow and bottom rule below the deck, a small angular marker, and the
larger title/subtitle type scale, rather than one drawn box. */
.edfm-eyebrow {
display: block;
margin: 0.2em 0 0.15em 0;
padding: 0;
border: 0;
font-family: var( --edfm-sans );
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --edfm-text-dim );
}
.edfm-eyebrow::before {
content: none;
}
.edfm-eyebrow .edfm-orange-mark {
color: var( --edfm-orange );
}
.edfm-deck {
color: var( --edfm-text-muted );
font-family: var( --edfm-sans );
font-size: 0.95rem;
font-style: italic;
line-height: 1.45;
max-width: none;
margin: 0.25em 0 0.85em 1.4em;
padding: 0;
border: 0;
}

/* ==========================================================================
1. SIDEBAR
========================================================================== */
#mw-panel {
background: transparent;
box-sizing: border-box;
width: var( --edfm-sidebar-width );
padding: 0 0.65rem 1.35rem 0.65rem;
border-right: 0;
box-shadow: none;
z-index: 3;
}
/* Logo anchors the sidebar visually. Keep raster logo artwork contained in
Vector legacy's fixed sidebar slot rather than letting the image render at
its intrinsic PNG size and clip against the rail. */
#p-logo {
box-sizing: border-box;
width: auto;
height: 10rem;
margin: 0 -0.65rem 0.65rem -0.65rem;
padding: 0.5rem 0.55rem 0.45rem 0.55rem;
border-bottom: 0 !important;
background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% );
overflow: hidden;
}
#p-logo a.mw-wiki-logo {
box-sizing: border-box;
display: block;
width: 100% !important;
height: 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
/* Each nav group gets real breathing room from the one before it instead
of being packed together like a stock wiki sidebar. */

#mw-panel .portal,
#mw-panel .vector-menu-portal {
box-sizing: border-box;
width: auto;
max-width: none;
margin-top: 1.45rem;
}
#mw-panel .portal:first-of-type,
#mw-panel .vector-menu-portal:first-of-type {
margin-top: 0;
}
#mw-panel .portal .body,
#mw-panel .portal ul,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list {
box-sizing: border-box;
width: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
border-color: var( --edfm-border-soft );
}
#mw-panel .portal a {
color: var( --edfm-text-muted );
display: block;
font-size: var( --edfm-fs-sidebar );
line-height: 1.35;
padding: 0.42em 0.55em;
margin: 0.08em -0.35em;
border-left: 2px solid transparent;
border-radius: 2px;
}
#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). */
.edfm-nav-current > a {
color: var( --edfm-orange ) !important;
font-weight: 700;
border-left-color: var( --edfm-orange );
border-left-width: 3px;
background: var( --edfm-surface-2 );
box-shadow: inset 0 0 0 1px rgba( 255, 138, 0, 0.08 );
}
.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: var( --edfm-fs-utility );
border-left: 2px solid var( --edfm-orange );
padding-left: 0.5em;
margin-left: -0.5em;
margin-bottom: 0.4em;
}

/* ==========================================================================
3. TOP BAR -- two-tier chrome
========================================================================== */
/* Vector legacy's #mw-head naturally has ~2.5em of empty space above the
tabs row (core: `#left-navigation/#right-navigation { margin-top:2.5em }`),
originally reserved just for #p-personal to float in. Painting that same
box with a background gradient that stays transparent for that top
band and then switches to a surface colour for the tabs band creates a
real two-tier read -- "primary chrome" (personal tools/search, over the
page's own background) above "wiki authoring controls" (the tabs, on
their own distinct strip) below -- without touching #mw-head's own
position/width mechanics, which is the same fragile absolute-position
system the very first pass of this project had to debug carefully to
get the persistent sidebar working at all. Not worth re-risking that
for a background change. */
#mw-head {
background-image: linear-gradient(
to bottom,
transparent 0,
transparent 2.35em,
var( --edfm-surface-2 ) 2.35em,
var( --edfm-surface-2 ) 100%
);
border-bottom: 1px solid var( --edfm-border );
}
#mw-page-base {
background-color: var( --edfm-bg-deep );
background-image: none;
}
#mw-head-base {
background-color: var( --edfm-bg-deep );
/* Polish pass: thinned from 2px -- at 2px this competed visually with
the masthead's own orange marker/rule directly below it; a single
thinner accent line still reads as "site identity colour" without
the repetition. */
border-bottom: 1px solid var( --edfm-orange );
}
/* Personal tools (login/logout) and the search box are the "primary
chrome" tier -- pulled in by the same gutter used to centre the article,
so on wide screens they visually line up with the centred column
instead of hugging the browser edge, and given noticeably more visual
weight than the tabs below them. */
#p-personal {
right: calc( 0.75em + var( --edfm-gutter ) );
display: flex;
align-items: center;
gap: 0.75rem;
}
#p-personal ul {
display: flex;
align-items: center;
gap: 0.55rem;
}
#p-personal li {
margin-left: 0;
}
#p-personal a {
color: var( --edfm-text-muted );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.3em 0.2em;
}
#p-personal a:hover {
color: var( --edfm-orange );
}
/* Echo's alert/notification icons (bell/tray) in the personal toolbar.
Confirmed by rendering the actual logged-in markup server-side: in
legacy Vector these links get merged straight into the plain personal
tools menu (SkinVectorLegacy::runOnSkinTemplateNavigationHooks) rather
than going through Vector's own `.vector-icon` icon system (that only
wraps items in the views/associated-pages menus). The icon is instead a
`background-image` on the <a> itself, from OOUI's generated
`.oo-ui-icon-bell` / `-tray` / `-bellOutline` classes -- a flat black SVG
baked straight into the image URL, so it's not recolourable via
`background-color` the way the search icon was; this is exactly the
"dark OOUI icon invisible on our dark theme" problem the invert fix
below already solves elsewhere, so reuse that same technique here
instead of a different one. The unread-count badge itself already
colours correctly on its own (Echo maps it to
`@background-color-destructive` / `-progressive`, both redefined to
EDFM's palette) and, being a mostly-saturated colour rather than
black/white/grey, survives this filter close to unchanged. */
#pt-notifications-alert .oo-ui-icon-bell,
#pt-notifications-notice .oo-ui-icon-tray,
#pt-notifications .oo-ui-icon-bellOutline {
filter: invert( 1 ) hue-rotate( 180deg );
}
.edfm-topbar-clocks {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
line-height: 1;
white-space: nowrap;
}
.edfm-topbar-clock {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.55em;
background: rgba( 66, 199, 217, 0.08 );
border: 1px solid var( --edfm-border-soft );
border-left: 2px solid var( --edfm-cyan );
color: var( --edfm-text );
}
.edfm-topbar-clock-label {
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edfm-topbar-clock time {
color: var( --edfm-cyan );
font-weight: 700;
}
.edfm-topbar-clock-local {
background: rgba( 255, 138, 0, 0.06 );
border-left-color: var( --edfm-orange );
}
.edfm-topbar-clock-local time {
color: var( --edfm-orange-bright );
}
#right-navigation {
margin-right: var( --edfm-gutter );
}
#left-navigation {
margin-left: var( --edfm-sidebar-clear );
}
/* Polish pass: core caps this at `width:20vw; max-width:20em`, which read
as cramped next to the rest of the (now larger-scale) interface --
given more room on desktop, still capped so it can't dominate the bar. */
.vector-search-box-inner {
width: 22vw;
max-width: 24em;
}
.vector-search-box-inner input,
#searchInput {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
border: 1px solid var( --edfm-border );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.5em 0.7em;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#searchInput:focus {
border-color: var( --edfm-cyan );
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.22 );
outline: none;
}
#searchInput::placeholder {
color: var( --edfm-text-dim );
}
/* Search submit control: neither rendering path gives this any color of
its own, so on our dark input background it was effectively invisible.
The no-JS legacy form's <button> is a plain black icon at 0.67 opacity
(core skins.vector.styles.legacy/components/SearchBox.less); the
JS/Vue-Codex widget (.vector-search-box-vue) has no separate button at
all, just a start icon inside the input using the same technique
(mask-image recoloured via `background-color`, see Codex's
CdxSearchInput.css). Recolour both to match the site's orange
progressive-action colour used everywhere else. */
.vector-search-box-vue .cdx-text-input__start-icon {
background-color: var( --edfm-orange );
opacity: 1;
}
.searchButton[ name='go' ] {
background-image: none;
background-color: var( --edfm-orange );
opacity: 0.85;
-webkit-mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
}
.searchButton[ name='go' ]:hover,
.searchButton[ name='go' ]:focus {
background-color: var( --edfm-orange-bright );
opacity: 1;
}
/* 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.

These are the "wiki authoring controls" utility tier -- deliberately
smaller (--edfm-fs-utility) and quieter than personal-tools/search
above them, sitting on their own background strip (see #mw-head above).
Selected state stays orange (it's still real navigation, just
secondary); unselected rests dim so the *selected* tab is the one that
reads clearly. */
.vector-menu-tabs-legacy li {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs-legacy li.selected {
background-image: none;
background-color: var( --edfm-surface-1 );
/* Polish pass: a small underline makes the selected tab unambiguous at
a glance instead of relying on the text colour change alone. */
box-shadow: inset 0 -2px 0 var( --edfm-orange );
}
.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 );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 700;
}
.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. */
.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;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var( --edfm-fs-utility );
font-weight: 700;
}
.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-3 );
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 );
font-size: var( --edfm-fs-sidebar );
}
.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-4 );
}

/* Front-page chrome: the hero already names the site, so suppress the
generated MediaWiki page title only on the Main Page. Keep the namespace
tab label and all other article titles intact. */
body.page-Main_Page #firstHeading {
display: none;
}
body.page-Main_Page .mw-body-content {
margin-top: 0;
}

/* ==========================================================================
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 );
}
.mw-body {
border-right: 1px solid var( --edfm-border );
}
#content {
background-color: var( --edfm-surface-1 );
}

/* Site notice chrome. The global disclaimer was moved to its dedicated
legal/disclaimer page, so an empty #siteNotice must not leave behind a
phantom divider at the top of the article surface. */
#siteNotice:empty {
display: none;
}
#siteNotice:not( :empty ) {
font-size: var( --edfm-fs-meta );
line-height: 1.5;
color: var( --edfm-text-dim );
font-style: normal;
padding-bottom: 0.7em;
margin-bottom: 1.4rem;
border-bottom: 1px solid var( --edfm-border-soft );
}
#siteNotice:not( :empty ) em, #siteNotice:not( :empty ) i {
color: var( --edfm-text-muted );
font-style: italic;
}
#siteNotice:not( :empty ) a {
color: var( --edfm-link-external );
}
#siteNotice a:hover {
color: var( --edfm-link-external-hover );
}

/* ==========================================================================
HOME PAGE DASHBOARD
========================================================================== */
.edfm-home-hero {
margin: 0.9rem 0 1.6rem;
padding: 1.35rem 1.55rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.16 ), transparent 34% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.14 ), transparent 42% ),
var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 4px solid var( --edfm-cyan );
clip-path: polygon( 0 0, calc( 100% - 12px ) 0, 100% 12px, 100% 100%, 0 100% );
}
.edfm-home-hero-kicker,
.edfm-home-card-kicker {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.edfm-home-hero-title {
margin-top: 0.25rem;
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: clamp( 1.55rem, 1.1rem + 1.5vw, 2.2rem );
font-weight: 800;
line-height: 1.15;
}
.edfm-home-hero-text {
max-width: none;
margin-top: 0.55rem;
color: var( --edfm-text-muted );
font-size: 1.05rem;
line-height: 1.55;
}
.edfm-home-grid {
display: grid;
gap: 1rem;
margin: 1.2rem 0 2rem;
}
.edfm-home-grid-four {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.edfm-home-grid-topics {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-grid-two {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-card {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
padding: 1rem 1.1rem;
box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.2 );
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-home-card:hover {
transform: translateY( -2px );
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-orange );
}
.edfm-home-card-primary {
border-left-color: var( --edfm-orange );
}
.edfm-home-card-warning {
border-left-color: var( --edfm-text-dim );
}
.edfm-home-card-title,
.edfm-home-card-title a {
margin-top: 0.35rem;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.edfm-home-card-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-home-card-text,
.edfm-home-link-list {
margin-top: 0.65rem;
color: var( --edfm-text-muted );
line-height: 1.6;
}
.edfm-home-link-list a {
font-weight: 600;
}
@media ( max-width: 1100px ) {
.edfm-home-grid-four {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( max-width: 760px ) {
.edfm-home-grid-four,
.edfm-home-grid-topics,
.edfm-home-grid-two {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
HOME PAGE NEWS MODULE
========================================================================== */
.edfm-home-news {
margin: 1.8rem 0 2.2rem;
}
.edfm-news-feature-grid {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 1rem;
margin-bottom: 1rem;
}
.edfm-news-card,
.edfm-news-list {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
box-shadow: 0 14px 26px rgba( 0, 0, 0, 0.22 );
overflow: hidden;
}
.edfm-news-card {
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-news-card:hover {
transform: translateY( -2px );
border-color: rgba( 255, 138, 0, 0.48 );
background: var( --edfm-surface-3 );
}
.edfm-news-card-art {
display: flex;
align-items: flex-end;
min-height: 7rem;
padding: 0.8rem 1rem;
box-sizing: border-box;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.28 ), transparent 42% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.2 ), transparent 48% ),
linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-1 ) );
border-bottom: 1px solid var( --edfm-border );
color: rgba( 237, 240, 242, 0.72 );
font-family: var( --edfm-mono );
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.edfm-news-card-primary .edfm-news-card-art {
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.38 ), transparent 46% ),
linear-gradient( 315deg, rgba( 79, 159, 232, 0.26 ), transparent 52% ),
var( --edfm-surface-4 );
}
.edfm-news-card-body {
padding: 1rem 1.15rem 1.15rem;
}
.edfm-news-meta {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.edfm-news-title,
.edfm-news-title a {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.edfm-news-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-news-summary {
color: var( --edfm-text-muted );
line-height: 1.55;
margin-top: 0.65rem;
}
.edfm-news-list {
padding: 1.1rem 1.25rem 1.2rem;
border-left: 4px solid var( --edfm-orange );
}
.edfm-news-list-heading {
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.edfm-news-list ul {
margin: 0;
}
.edfm-news-list li {
margin-bottom: 0.55rem;
color: var( --edfm-text-muted );
}
.edfm-news-more {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px solid var( --edfm-border-soft );
text-align: right;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
@media ( max-width: 900px ) {
.edfm-news-feature-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
10. JUMP NAVIGATION (table of contents)
========================================================================== */
/* A compact navigation strip/tile-grid rather than a traditional TOC box
of small text links -- real MediaWiki anchors/markup untouched, this is
all presentation. "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 {
display: block;
width: 100%;
box-sizing: border-box;
background: none;
border: none;
color: var( --edfm-text );
padding: 0;
margin: 1.8rem 0;
}
.toctitle {
position: relative;
margin-bottom: 0.7em;
}
.toctitle::before {
content: 'Jump to';
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-orange );
}
/* Core ships `.toc h2 { font-size: 100%; ... }` (mediawiki.skinning/toc/
screen.less) at the exact same specificity (one class + one tag) as a
plain `.toctitle h2` rule -- same "tie that doesn't resolve the way
naive source order would suggest" gotcha documented elsewhere in this
file. #toc's own ID makes this one unambiguous instead of relying on
cascade order. */
#toc .toctitle h2,
.toc .toctitle h2 {
font-size: 0 !important;
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 );
}
/* Desktop: a balanced multi-column jump list. CSS grid flows row-first,
which makes numbered sections read 1, 2, 3, 4 across the first row. For a
reference/walkthrough TOC, scan order is clearer when each column reads
downward first: 1/2/3, then 4/5/6, then 7/8/9. CSS columns preserve the
real DOM/source order while presenting that column-major layout on every
page that uses the stock MediaWiki TOC. */
.toc > ul {
display: block;
column-count: 3;
column-gap: 0.45rem;
list-style: none;
margin: 0;
padding: 0;
}
.toc > ul > li {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 0.45rem;
}
.toc li {
margin-top: 0;
}
/* 2026-08-08 density pass: reverted to side-by-side number/label (from the
earlier "stacked number-above-label" polish pass) specifically to cut
per-tile height -- with 12 sections on articles like The Dweller, the
stacked layout meant the jump nav alone filled most of the first
viewport. Row layout plus tighter padding/font-size gets noticeably
more sections above the fold without dropping the numbering or shrinking
tap targets below a comfortable size -- see the dedicated mobile padding
bump further down for keeping touch targets safe on small screens
specifically. Whole tile stays one real <a>, so it's still a single
click/focus target and keyboard tab stop either way. */
.toc a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
height: 100%;
box-sizing: border-box;
padding: 0.5em 0.75em 0.5em 0.7em;
background: var( --edfm-surface-3 );
/* Left accent rail: matches the orange section numbers and gives each
jump tile a stronger EDFM navigation affordance without boxing the
entire card. */
border-left: 4px solid var( --edfm-orange );
box-shadow: inset 1px 0 0 rgba( 255, 162, 26, 0.35 );
color: var( --edfm-text-muted );
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.toc a:hover {
background: var( --edfm-surface-4 );
border-left-color: var( --edfm-cyan );
box-shadow: inset 1px 0 0 rgba( 66, 199, 217, 0.45 );
color: var( --edfm-text );
transform: translateY( -1px );
}
/* Nested sub-levels (rare on this site so far) drop back to a plain
indented block list inside their parent tile's grid cell rather than
trying to stay gridded themselves. */
.toc ul ul {
grid-column: unset;
list-style: none;
margin: 0.3em 0 0 1.2em;
padding: 0;
display: block;
}
.toc ul ul a {
flex-direction: row;
align-items: center;
background: none;
border-left-width: 1px;
padding: 0.3em 0.6em;
}
.toc ul ul .tocnumber {
font-size: 0.85em;
}
.toc ul ul .toctext {
font-size: 0.85em;
}
.tocnumber {
color: var( --edfm-orange );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: 1.05rem;
line-height: 1;
}
.toctext {
color: inherit;
font-size: 0.85rem;
line-height: 1.3;
}
/* Column count changes only at readable/touch-friendly breakpoints. Keep
column-major ordering at 3 and 2 columns; mobile becomes the natural single
source-order list. */
@media ( max-width: 860px ) {
.toc > ul {
column-count: 2;
}
}
@media ( max-width: 560px ) {
.toc > ul {
column-count: 1;
}
/* Single-column tiles are already full-width here, so there's no
density pressure left -- restore closer to the pre-2026-08-08
padding instead of the tighter desktop value, keeping tap targets
comfortable rather than compacting mobile just because desktop
compacted. */
.toc a {
padding: 0.7em 0.95em;
}
}

/* ==========================================================================
5b. FULL-WIDTH ARTICLE FLOW OVERRIDES
========================================================================== */
/* 2026-08-10 audit: EDFM pages should not leave half the article rail empty.
Earlier readability caps on paragraphs/hero copy made long-form sections
look like narrow blocks while tables, TOCs, and navigation tiles spanned
the page. Keep the main rail full-width everywhere; individual components
may still opt into their own internal grids, but ordinary article copy and
common block containers should stretch to the content edge. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > div:not( .thumb ):not( .tright ):not( .tleft ):not( .floatright ):not( .floatleft ):not( .edfm-status ):not( .edfm-panel ):not( .edfm-box ) {
max-width: none;
box-sizing: border-box;
}
/* Final guard against stale/skin rules recapping article prose while leaving
compact maintenance/status panels free to keep their intentional centred width. */
.mw-body .mw-parser-output > p,
.mw-parser-output > p {
max-width: none !important;
width: 100%;
box-sizing: border-box;
}

/* ==========================================================================
6. PANELS / CALLOUTS, and 11. ARTICLE METADATA / STATUS MODULE
========================================================================== */
/* Deliberately NOT defined here. .edfm-box / .edfm-panel* / .edfm-status* /
.edfm-inline-flag / .edfm-related* are used exclusively by the
editorial templates (see Template:Article status, Template:Draft
warning, Template:Related articles, 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 );
font-size: var( --edfm-fs-body );
}
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: var( --edfm-fs-meta );
text-align: left;
padding: 0.6em 0.8em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
/* 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 );
}

/* mw-json content model (Module:Data/* pages, e.g. Module:Data/Engineers/*)
-- MediaWiki core's JSON page view (resources/src/mediawiki.content.json.less)
styles itself from Codex design tokens, which this site's dark theme never
touches, so these tables rendered in MediaWiki's stock light colours
against every other dark surface on the site. Recoloured to match the
table.wikitable treatment above instead of inventing a new look. */
table.mw-json {
background-color: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: var( --edfm-fs-body );
}
table.mw-json tr {
background-color: var( --edfm-surface-2 );
}
table.mw-json th,
table.mw-json td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
table.mw-json th {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: var( --edfm-fs-meta );
text-align: left;
}
.mw-json-value,
.mw-json-single-value {
background-color: transparent;
color: var( --edfm-text );
}
.mw-json-empty {
background-color: transparent;
color: var( --edfm-text-dim );
}

/* ==========================================================================
15. FOOTER
========================================================================== */
/* A real branded footer: a small wordmark line (pure CSS generated
content -- decorative branding only, redundant with the sidebar logo
already visible, so nothing load-bearing depends on it being
selectable), a top rule with more separation from the article above it,
and MediaWiki's real info/places/icon links laid out on a clean grid
with the badges aligned as a group rather than floating alone. */
.mw-footer {
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
margin-top: 2.5rem;
padding-top: 1.6rem;
border-top: 1px solid var( --edfm-border );
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "brand brand" "info icons" "places icons";
align-items: center;
column-gap: 2em;
row-gap: 0.4rem;
}
.mw-footer::before {
grid-area: brand;
content: 'EDFM // Elite Dangerous Field Manual';
font-family: var( --edfm-mono );
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var( --edfm-text-muted );
margin-bottom: 0.5rem;
}
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
color: var( --edfm-text-dim );
border-color: var( --edfm-border-soft );
font-size: var( --edfm-fs-meta );
}
#footer-info {
grid-area: info;
margin: 0;
line-height: 1.6;
}
#footer-places {
grid-area: places;
margin: 0;
}
/* Same "small uppercase label" treatment used for tags/meta text
elsewhere, so these read as deliberate EDFM navigation rather than
default MediaWiki footer links. */
#footer-places li {
display: inline-block;
margin-right: 1.4em;
}
#footer-places a {
font-family: var( --edfm-mono );
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.78rem;
}
/* A left rule ties the badges to the rest of the footer instead of
letting them read as detached/floating in their own space. */
#footer-icons {
grid-area: icons;
align-self: center;
display: flex;
gap: 0.75em;
margin: 0;
padding-left: 1.6em;
border-left: 1px solid var( --edfm-border-soft );
}
#footer-icons img {
background: var( --edfm-text );
border-radius: 2px;
}
@media ( max-width: 640px ) {
.mw-footer {
grid-template-columns: 1fr;
grid-template-areas: "brand" "info" "places" "icons";
}
#footer-icons {
margin-top: 0.7em;
padding-left: 0;
border-left: none;
border-top: 1px solid var( --edfm-border-soft );
padding-top: 0.7em;
}
}

/* ==========================================================================
MISC MediaWiki UI chrome that ships with light backgrounds by default
========================================================================== */
.catlinks {
background: none !important;
border: none !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-meta );
padding: 0.9em 0 0 0 !important;
margin-top: 1.8rem !important;
}
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 {
position: relative;
z-index: 2;
float: right;
clear: right;
width: 350px;
max-width: min( 350px, 42% );
margin: 0 0 1.25em 1.35em;
border: 1px solid var( --edfm-border );
border-top: 2px solid var( --edfm-orange );
background: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: 0.92rem;
}
.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.5em 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-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
border: 1px dashed var( --edfm-border );
background: var( --edfm-surface-1 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility );
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 0.5em;
}
/* Optional section label (Template:Infobox's |groupN=) splitting a long
infobox into scannable groups, e.g. Engineer infoboxes into "ENGINEER"
and "ACCESS" (2026-08-08, part of the Engineer article layout pass). A
shaded band with a bottom rule rather than a full boxed sub-header --
consistent with .edfm-infobox-row's own bottom-rule-only separator, not
a new visual language. */
.edfm-infobox-group {
background: var( --edfm-surface-3 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35em 0.7em;
border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-row {
display: flex;
border-bottom: 1px solid var( --edfm-border-soft );
padding: 0.45em 0.7em;
}
.edfm-infobox-row:last-child {
border-bottom: none;
}
.edfm-infobox-label {
font-weight: 700;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
width: 40%;
flex-shrink: 0;
color: var( --edfm-cyan );
}
.edfm-infobox-value {
width: 60%;
}
@media ( max-width: 640px ) {
.edfm-infobox {
float: none;
width: auto;
max-width: none;
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::before {
display: none;
}
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;
background-image: none;
background-color: var( --edfm-surface-2 );
}
#left-navigation,
#right-navigation {
float: none;
margin: 0 !important;
width: auto;
clear: both;
}
#left-navigation {
margin-top: 0 !important;
}
/* Core Vector legacy floats each tab/dropdown portlet
(.vector-menu-tabs-legacy for Page/Discussion and Read/View
source/View history, .vector-menu-dropdown for the More menu) AND
floats every <li> inside their <ul>, with no wrapping at all -- at
narrow widths the labels just overflow and overlap each other
(confirmed with a real screenshot: "View source" and "More"
overlapped instead of wrapping to a new line). Switching the
portlets to inline-block and their tab lists to flex-wrap lets them
reflow onto as many rows as needed instead. */
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-dropdown {
float: none;
display: inline-block;
vertical-align: top;
}
.vector-menu-tabs-legacy ul {
float: none;
display: flex;
flex-wrap: wrap;
}
.vector-menu-tabs-legacy li {
float: none;
}
#p-personal {
position: static;
text-align: right;
padding: 0.5em 1em;
margin: 0;
right: auto !important;
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;
background: var( --edfm-bg-deep );
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 !important;
margin-right: 0 !important;
max-width: none;
}
.mw-body {
margin-top: 0;
border-width: 0;
padding: 1em;
}
.edfm-status-details {
grid-template-columns: 1fr;
}
/* .toc > ul column count is NOT overridden here -- the dedicated
1150px/560px breakpoints above already cover every width down to
the smallest phones; duplicating a rule here previously fought
those (same specificity, this position in the cascade would have
won and wrongly forced 1 column as low as 561px). */
#firstHeading {
font-size: 1.6rem;
}
.mw-body h2 {
margin-top: 2.25rem;
}
.edfm-eyebrow {
padding-top: 0.9em;
}
}
/* ==========================================================================
16. OOUI DIALOGS -- VisualEditor's save dialog, and any other OOUI
dialog (delete/move/protect confirmations, special-page dialogs).
These render via OOUI's own bundled WikimediaUI theme stylesheet,
entirely outside the .edfm-* component system this file otherwise
covers, so without this they show up starkly white against the rest of
the dark-themed site regardless of any variable/token used elsewhere in
this file. !important is justified the same way as the h1-h6 fix above:
OOUI's own stylesheet loads with equal-or-higher effective specificity,
and this is a correctness/contrast fix, not decoration.
========================================================================== */
.oo-ui-window-frame {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-processDialog {
background: rgba( 7, 9, 11, 0.75 ) !important;
}
.oo-ui-processDialog-navigation,
.oo-ui-window-head,
.oo-ui-window-foot {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-processDialog-title,
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-inputWidget-input {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* VisualEditor's reference dialog embeds a mini target widget for the
reference body. The widget ships with a white WikimediaUI base surface,
so theme that inner editing box separately from the surrounding OOUI
dialog chrome. */
.ve-ui-mwReferenceDialog .ve-ui-targetWidget,
.ve-ui-mwReferenceDialog .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ),
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget,
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-surface,
.ve-ui-mwReferenceDialog .ve-ce-surface,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode,
.ve-ui-mwReferenceDialog .ve-ce-documentNode,
.ve-ui-mwReferenceDialog .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode p,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode li,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode span {
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-targetWidget-focused {
border-color: var( --edfm-cyan ) !important;
box-shadow: inset 0 0 0 1px rgba( 77, 199, 232, 0.42 ) !important;
}
.ve-ui-mwSaveDialog-options,
.oo-ui-panelLayout,
.oo-ui-window-body {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-popupWidget-popup {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-buttonElement:not( .oo-ui-flaggedElement-primary ) > .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
17. OOUI TOOLBAR -- VisualEditor's persistent editing toolbar and its
dropdown menus (Cite, Insert, paragraph style, etc.), and the equivalent
toolbar/popups used when editing a single section. Same root cause as
16. OOUI DIALOGS above (OOUI's own bundled theme, not touched by
anything else in this file), found separately because it's a different
set of OOUI classes (toolbar chrome, not dialog chrome). Icons are not
overridden here and don't need to be -- they're currentColor-based, so
they pick up the text colour set below automatically.
========================================================================== */
.oo-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-tool-title,
.oo-ui-tool-link,
.oo-ui-toolGroup-tools .oo-ui-optionWidget,
.oo-ui-menuOptionWidget,
.oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-optionWidget.oo-ui-optionWidget-selected,
.oo-ui-optionWidget:hover,
.oo-ui-tool:hover .oo-ui-tool-link {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
18. OOUI GENERIC MENUS -- .oo-ui-menuSelectWidget is OOUI's general
dropdown/autocomplete menu class (paragraph-style picker, citation-type
picker, link/media search suggestions, etc.) -- a different class from
the toolbar-specific popups in 17. above, confirmed separately via
computed-style inspection to default to the same white OOUI theme
background.
========================================================================== */
.oo-ui-menuSelectWidget {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-menuOptionWidget {
color: var( --edfm-text ) !important;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget:hover {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
19. OOUI ICONS -- the toolbar/menu icons themselves (Bold, link, list,
Cite, undo/redo, etc.) are rendered as background-image SVGs with a
colour baked into the SVG markup, not currentColor-based masks -- so
16-18 above (which only recolour backgrounds/text) left them dark and
low-contrast against the now-dark surfaces. OOUI ships its own fix for
exactly this, gated behind a narrow accessibility media query
(forced-colors + prefers-color-scheme: dark) that doesn't apply to this
site's own always-on dark theme -- reusing that exact technique
unconditionally rather than inventing a different one. `:not(
.oo-ui-image-invert )` is OOUI's own exclusion for icons already meant
to render light (e.g. on the orange primary-button background) --
inverting those too would flip them back to dark.
========================================================================== */
.oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* ==========================================================================
20. EDIT SOURCE FORM -- MediaWiki core + WikiEditor + CodeMirror

The source editor is not covered by the article/component selectors above:
`action=edit` loads core edit-form CSS, WikiEditor chrome, and sometimes
CodeMirror with their own light neutral surfaces. Force the same EDFM dark
surface stack here so the source page no longer flashes as a white island.
========================================================================== */
.mw-editform,
#editform,
#toolbar,
.editOptions,
.mw-editTools,
.mw-summary-preview,
.mw-datatable,
.wikiEditor-ui,
.wikiEditor-ui-view,
.wikiEditor-ui-text,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-top,
.wikiEditor-ui-controls,
.wikiEditor-ui-tabs,
.wikiEditor-ui-buttons,
.wikiEditor-ui-left,
.wikiEditor-ui-right,
.editButtons,
.CodeMirror,
.CodeMirror-scroll {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-editform textarea,
#wpTextbox1,
#wpSummary,
#wpSummaryWidget input,
#editform input[type='text'],
#editform input[type='search'],
#editform textarea,
.wikiEditor-ui-text textarea,
.CodeMirror-code,
.CodeMirror-lines,
.CodeMirror pre {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
caret-color: var( --edfm-orange-bright );
}
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .page,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar .options,
.wikiEditor-ui-toolbar .booklet,
.wikiEditor-ui-toolbar .pages,
.CodeMirror-gutters {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text-muted ) !important;
border-color: var( --edfm-border ) !important;
}
.wikiEditor-ui-toolbar a,
.wikiEditor-ui-toolbar .label,
.wikiEditor-ui-toolbar .tab a,
.mw-editTools a,
.editOptions label,
.mw-editform label,
.CodeMirror-linenumber {
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab a:hover,
.wikiEditor-ui-toolbar .tool-button:hover,
.wikiEditor-ui-toolbar .tool-select:hover,
.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-table td,
.CodeMirror-activeline-background {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab.current a,
.wikiEditor-ui-toolbar .section-main,
.CodeMirror-selected {
background: var( --edfm-surface-4 ) !important;
}
.CodeMirror-cursor {
border-left-color: var( --edfm-orange-bright ) !important;
}
.CodeMirror-matchingbracket {
color: var( --edfm-orange-bright ) !important;
}

/* VisualEditor's standalone "Edit source" mode (.ve-ui-surface-source, set
by ve.ui.Surface when this.mode === 'source') ships its own white surface
-- unlike visual mode, which reuses normal dark article styling since
it's just contenteditable article HTML. Scoped to -source only so the
visual WYSIWYG canvas is untouched. */
.ve-ui-surface-source,
.ve-init-mw-tempWikitextEditorWidget {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-surface-source .ve-ce-surface,
.ve-ui-surface-source .ve-ce-documentNode,
.ve-ui-surface-source .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}

/* ==========================================================================
21. FILE PAGE CHROME -- #filetoc (the File / File history / File usage /
Metadata nav on File: description pages) is defined in MediaWiki core's
mediawiki.action.view.filepage.less, entirely separate from both the
.edfm-* system and the OOUI fixes in 16-19 above -- a different
subsystem again, only loaded on File: pages, which is why it was never
touched by anything else in this file. Link colour inside it already
correctly inherits the site's normal link blue; only the light neutral
background/border needed overriding.
========================================================================== */
#filetoc {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
22. FILE PAGE: METADATA TABLE + MEDIA VIEWER BUTTON -- #mw_metadata is
the EXIF-style metadata table (separate from the File history table
above -- that one already carries the .wikitable class and picked up
dark styling from 7. TABLES automatically; this one doesn't have that
class, so it never matched). The "Open in Media Viewer" button is a
Codex component (MultimediaViewer extension) -- a third distinct
styling subsystem from OOUI and MediaWiki core skinning, again never
touched by anything else in this file.
========================================================================== */
#mw_metadata th,
#mw_metadata td {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-mmv-view-expanded.cdx-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Core MediaWiki/action buttons: match EDFM dark theme instead of default white/orange controls. */
.mw-ui-button,
.mw-htmlform-submit,
.mw-htmlform-ooui-wrapper button,
#mw-patrol-form button,
#mw-patrol-form input[type="submit"],
form.mw-htmlform button,
form.mw-htmlform input[type="submit"],
input[type="submit"].mw-ui-button,
button.mw-ui-button,
.cdx-button:not( .cdx-button--fake-button--enabled ) {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border: 1px solid var( --edfm-border-strong, var( --edfm-border ) ) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var( --edfm-mono ) !important;
font-weight: 800 !important;
text-shadow: none !important;
}
.mw-ui-button:hover,
.mw-htmlform-submit:hover,
.mw-htmlform-ooui-wrapper button:hover,
#mw-patrol-form button:hover,
#mw-patrol-form input[type="submit"]:hover,
form.mw-htmlform button:hover,
form.mw-htmlform input[type="submit"]:hover,
input[type="submit"].mw-ui-button:hover,
button.mw-ui-button:hover,
.cdx-button:not( .cdx-button--fake-button--enabled ):hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-orange-bright ) !important;
border-color: var( --edfm-orange ) !important;
}
.mw-ui-button:focus,
.mw-htmlform-submit:focus,
.mw-htmlform-ooui-wrapper button:focus,
#mw-patrol-form button:focus,
#mw-patrol-form input[type="submit"]:focus,
form.mw-htmlform button:focus,
form.mw-htmlform input[type="submit"]:focus,
input[type="submit"].mw-ui-button:focus,
button.mw-ui-button:focus,
.cdx-button:not( .cdx-button--fake-button--enabled ):focus {
outline: 2px solid var( --edfm-cyan ) !important;
outline-offset: 2px !important;
}

/* Patrol action: remove the cramped review button from the public article chrome. */
#mw-patrol-form {
display: none !important;
}

/* Frontier news: after removing the repeated dispatch list, keep attribution compact. */
.edfm-news-attribution-compact {
margin-top: 0.35rem;
padding-top: 0.6rem;
}

/* ===========================================================================
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL
=========================================================================== */
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar,
large touch targets, off-canvas navigation, search-forward layout, and
single-column readable article flow -- while preserving EDFM's dark field
manual identity and not copying RuneScape.wiki assets/CSS.
The close button is injected into #mw-panel by Common.js, so it must be
explicitly hidden by default; otherwise a tiny native white button appears
in the desktop sidebar's top-left corner. */
.edfm-mobile-appbar,
.edfm-mobile-scrim,
.edfm-mobile-close-button {
display: none;
}
@media ( max-width: 800px ) {
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var( --edfm-bg-page );
overflow-x: hidden;
}
body.edfm-mobile-menu-open {
overflow: hidden;
}
.edfm-mobile-appbar {
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
position: sticky;
top: 0;
z-index: 1200;
min-height: 56px;
padding: 0 0.35rem;
background:
linear-gradient( 90deg, rgba( 255, 138, 0, 0.18 ), transparent 38% ),
var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.35 );
}
.edfm-mobile-brand {
min-width: 0;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.edfm-mobile-brand::before {
content: 'EDFM // ';
color: var( --edfm-orange );
}
.edfm-mobile-menu-button,
.edfm-mobile-search-button,
.edfm-mobile-close-button {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var( --edfm-text );
font: 700 1.5rem/1 var( --edfm-mono );
cursor: pointer;
}
.edfm-mobile-menu-button:focus-visible,
.edfm-mobile-search-button:focus-visible,
.edfm-mobile-close-button:focus-visible {
outline: 2px solid var( --edfm-cyan );
outline-offset: -4px;
}
.edfm-mobile-menu-button::before {
content: '☰';
color: var( --edfm-orange );
}
.edfm-mobile-search-button::before {
content: '⌕';
font-size: 1.85rem;
color: var( --edfm-cyan );
}
.edfm-mobile-close-button::before {
content: '×';
color: var( --edfm-text );
}
.edfm-mobile-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba( 0, 0, 0, 0.58 );
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
body.edfm-mobile-menu-open .edfm-mobile-scrim {
opacity: 1;
pointer-events: auto;
}
#mw-navigation {
background: var( --edfm-surface-2 );
box-shadow: none;
}
#mw-head {
position: relative;
z-index: 1100;
border-bottom: 1px solid var( --edfm-border );
}
#mw-head .vector-search-box {
display: none;
margin: 0;
padding: 0.65rem;
background: var( --edfm-surface-2 );
border-top: 1px solid var( --edfm-border-soft );
}
body.edfm-mobile-search-open #mw-head .vector-search-box {
display: block;
}
#mw-head .vector-search-box-inner,
#mw-head #searchform {
width: 100%;
}
#mw-head #searchInput {
min-height: 44px;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
#left-navigation,
#right-navigation {
padding: 0 0.45rem 0.35rem;
background: var( --edfm-surface-2 );
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.vector-menu-tabs-legacy ul {
flex-wrap: nowrap;
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-dropdown .vector-menu-heading {
min-height: 36px;
display: inline-flex;
align-items: center;
}
#p-personal {
display: none;
}
#mw-panel {
position: fixed;
top: 0;
left: 0;
z-index: 1300;
width: min( 82vw, 22rem );
height: 100dvh;
box-sizing: border-box;
padding: 0;
background: var( --edfm-surface-1 );
border: 0;
border-right: 1px solid var( --edfm-border );
box-shadow: 18px 0 36px rgba( 0, 0, 0, 0.45 );
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX( -105% );
transition: transform 0.2s ease;
}
body.edfm-mobile-menu-open #mw-panel {
transform: translateX( 0 );
}
#mw-panel::before {
content: 'EDFM Navigation';
display: block;
position: sticky;
top: 0;
z-index: 1;
padding: 1rem 3.4rem 1rem 1rem;
background: var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
color: var( --edfm-orange );
font: 800 0.86rem/1.2 var( --edfm-mono );
letter-spacing: 0.08em;
text-transform: uppercase;
}
#mw-panel .edfm-mobile-close-button {
position: absolute;
top: 0.3rem;
right: 0.35rem;
z-index: 2;
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin: 0;
padding: 0.75rem 0;
border-bottom: 1px solid var( --edfm-border-soft );
}
#mw-panel .vector-menu-heading {
margin: 0.25rem 1rem 0.45rem;
}
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
display: flex;
align-items: center;
min-height: 46px;
box-sizing: border-box;
padding: 0.55rem 1rem;
border-left: 3px solid transparent;
color: var( --edfm-text-muted );
font-size: 1rem;
text-decoration: none;
}
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-content-list li a:focus {
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-cyan );
color: var( --edfm-text );
}
#mw-panel .edfm-nav-current > a,
#mw-panel .edfm-nav-current > a:visited {
background: rgba( 255, 138, 0, 0.12 );
border-left-color: var( --edfm-orange );
color: var( --edfm-orange ) !important;
}
.mw-body {
padding: clamp( 1rem, 4vw, 1.35rem );
font-size: 1rem;
line-height: 1.68;
}
#siteNotice {
margin-bottom: 1rem;
padding-bottom: 0.85rem;
}
#firstHeading {
font-size: clamp( 1.65rem, 8vw, 2.25rem );
line-height: 1.1;
letter-spacing: -0.015em;
}
.mw-body h2 {
font-size: 1.18rem;
line-height: 1.25;
}
.mw-body p,
.mw-body li {
max-width: none;
}
.mw-body img,
.mw-body .thumb,
.mw-body .thumbinner,
.mw-body .thumbimage {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
.mw-body .thumb,
.mw-body .tright,
.mw-body .tleft {
float: none !important;
clear: both;
width: auto !important;
margin: 1rem 0 !important;
}
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.mw-parser-output > table.wikitable th,
.mw-parser-output > table.wikitable td,
.mw-parser-output > table.mw-datatable th,
.mw-parser-output > table.mw-datatable td {
white-space: normal;
min-width: 8rem;
}
.edfm-infobox {
font-size: 0.95rem;
}
.edfm-infobox-row {
display: grid;
grid-template-columns: minmax( 7.5rem, 40% ) 1fr;
gap: 0.5rem;
padding: 0.65rem 0.8rem;
}
.edfm-infobox-label,
.edfm-infobox-value {
width: auto;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tbody,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tr,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type {
overflow: visible;
white-space: normal;
background: transparent;
border: 0;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th {
margin-top: 0.75rem;
border-left: 3px solid var( --edfm-orange );
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
margin-bottom: 0.75rem;
background: var( --edfm-surface-2 );
border-left: 3px solid var( --edfm-border );
}
.mw-footer {
padding: 1rem;
margin-top: 1.5rem;
}
}
@media ( max-width: 430px ) {
.edfm-mobile-brand::before {
content: 'EDFM';
margin-right: 0.45rem;
}
.edfm-mobile-brand {
font-size: 0.88rem;
}
.edfm-infobox-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}

/* 22a. Mobile action tabs refinement: keep Vector's page/discussion/read/
source/history controls available, but put them on one compact horizontal
action rail so the first phone viewport feels like a real mobile app shell
instead of two stacked desktop tab bars. */
@media ( max-width: 800px ) {
body:not( .edfm-mobile-search-open ) #mw-head {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
body:not( .edfm-mobile-search-open ) #left-navigation,
body:not( .edfm-mobile-search-open ) #right-navigation {
flex: 0 0 auto;
clear: none !important;
float: none !important;
width: auto;
padding: 0 0.25rem;
margin: 0 !important;
border-right: 1px solid var( --edfm-border-soft );
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown {
float: none !important;
display: inline-block;
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a,
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a:visited,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown .vector-menu-heading {
min-height: 40px;
padding-left: 0.55rem;
padding-right: 0.55rem;
font-size: 0.68rem;
}
body.edfm-mobile-search-open #mw-head {
display: block;
}
}

/* ===========================================================================
24. HARD OVERRIDE: JUMP TILE LEFT RAIL

The earlier border-left rail can be swallowed by ResourceLoader/cascade or
visually read as part of the tile edge. Draw the rail as a high-specificity
gradient on the actual top-level TOC anchors so it is unmistakable on the
live jump grid.
=========================================================================== */
#toc.toc > ul > li > a,
.mw-parser-output #toc > ul > li > a,
.mw-parser-output .toc > ul > li > a {
background-image: linear-gradient( 90deg, var( --edfm-orange ) 0, var( --edfm-orange ) 6px, transparent 6px ) !important;
border-left: 0 !important;
padding-left: 1rem !important;
}
#toc.toc > ul > li > a:hover,
#toc.toc > ul > li > a:focus-visible,
.mw-parser-output #toc > ul > li > a:hover,
.mw-parser-output #toc > ul > li > a:focus-visible,
.mw-parser-output .toc > ul > li > a:hover,
.mw-parser-output .toc > ul > li > a:focus-visible {
background-image: linear-gradient( 90deg, var( --edfm-cyan ) 0, var( --edfm-cyan ) 6px, transparent 6px ) !important;
}

/* ===========================================================================
25. SOURCE EDIT CONFLICT / WIKITEXT DIFF THEME

Source-edit conflict review uses MediaWiki's diff table classes, not the
normal edit textarea/WikiEditor chrome. Without this, unchanged rows and
inline change pills fall back to stark white/yellow/blue defaults. Keep the
old/new meaning, but render it in EDFM's dark surfaces with restrained
orange/cyan accents.
=========================================================================== */
.mw-parser-output table.diff,
table.diff,
.diff {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-collapse: separate !important;
border-spacing: 0 0.12rem !important;
}
.diff-title,
.diff-otitle,
.diff-ntitle,
#mw-diff-otitle1,
#mw-diff-ntitle1 {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
}
td.diff-lineno,
.diff-lineno {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
border: 0 !important;
padding: 0.35rem 0.5rem !important;
}
td.diff-marker,
.diff-marker {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
padding: 0.25rem 0.45rem !important;
text-align: center;
}
td.diff-context,
td.diff-addedline,
td.diff-deletedline,
.diff-context,
.diff-addedline,
.diff-deletedline,
.mw-diff-inline-context,
.mw-diff-inline-added,
.mw-diff-inline-deleted,
.mw-diff-inline-changed,
.mw-diff-inline-moved {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
font-family: var( --edfm-mono );
box-shadow: none !important;
}
td.diff-context:empty,
td.diff-addedline:empty,
td.diff-deletedline:empty,
.diff-context:empty,
.diff-addedline:empty,
.diff-deletedline:empty {
/* Empty diff cells are alignment placeholders. Keep their card boundary so
the two-column source-conflict diff does not look broken, but make them
compact and neutral instead of tall blank blocks. */
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none !important;
min-height: 0;
padding-top: 0.08rem !important;
padding-bottom: 0.08rem !important;
}
td.diff-deletedline,
.diff-deletedline,
.mw-diff-inline-deleted {
background: rgba( 255, 138, 0, 0.08 ) !important;
border-color: rgba( 255, 138, 0, 0.6 ) !important;
border-left-color: var( --edfm-orange ) !important;
}
td.diff-addedline,
.diff-addedline,
.mw-diff-inline-added {
background: rgba( 66, 199, 217, 0.08 ) !important;
border-color: rgba( 66, 199, 217, 0.6 ) !important;
border-left-color: var( --edfm-cyan ) !important;
}
.diffchange,
.diff-addedline .diffchange,
.diff-deletedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
border-radius: 3px !important;
padding: 0.08rem 0.22rem !important;
font-weight: 700;
text-decoration: none !important;
color: var( --edfm-bg-deep ) !important;
}
.diff-deletedline .diffchange,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
background: var( --edfm-orange-bright ) !important;
}
.diff-addedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins {
background: var( --edfm-cyan ) !important;
}
.mw-explainconflict,
#wpTextbox2,
textarea#wpTextbox2,
textarea.mw-textarea-oldrev {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Engineer directory portrait chips -- intentionally quiet so table rows still
read like data rows, not card/list hybrids. */
.edfm-engineer-entry {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: max-content;
}
.edfm-engineer-entry .mw-file-element {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var( --edfm-border );
background: var( --edfm-surface-0 );
box-shadow: none;
}
.edfm-engineer-entry__name {
line-height: 1.2;
}

/* Frontier official news feed image treatment */
.edfm-frontier-news .edfm-news-card-art-image {
display: block;
position: relative;
padding: 0;
/* Keep all news thumbnails uniform, including the first/primary story. */
height: 9.5rem;
min-height: 9.5rem;
aspect-ratio: 16 / 9;
background: var( --edfm-surface-4 );
overflow: hidden;
}
.edfm-frontier-news .edfm-news-card-primary .edfm-news-card-art-image {
height: 9.5rem;
min-height: 9.5rem;
}
.edfm-frontier-news .edfm-news-card-art-image > span,
.edfm-frontier-news .edfm-news-card-art-image .mw-default-size,
.edfm-frontier-news .edfm-news-card-art-image .mw-file-description {
display: block !important;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.edfm-frontier-news .edfm-news-card-art-image .mw-file-element {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transition: transform 0.2s ease, filter 0.2s ease;
}
.edfm-frontier-news .edfm-news-card:hover .edfm-news-card-art-image .mw-file-element {
filter: brightness( 1.08 ) contrast( 1.05 );
transform: scale( 1.035 );
}
.edfm-frontier-news .edfm-news-source-badge {
display: inline-flex !important;
align-items: center;
position: absolute !important;
left: 0.8rem !important;
right: auto !important;
bottom: 0.75rem !important;
z-index: 2;
max-width: calc( 100% - 1.6rem );
padding: 0.25rem 0.55rem;
background: rgba( 10, 13, 17, 0.82 );
border: 1px solid rgba( 255, 138, 0, 0.48 );
box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.34 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}

.edfm-news-attribution {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var( --edfm-border-soft );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
line-height: 1.45;
}

/* Patrol action: hide MediaWiki generated patrol footer/link from article chrome. */
.patrollink,
.patrollink[data-mw-interface],
.patrollink .cdx-button,
#mw-content-text + .patrollink,
.mw-parser-output + .patrollink {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* ===========================================================================
2026-08-10 PROSE RAIL SLEDGEHAMMER
=========================================================================== */
/* Plain article prose on EDFM is supposed to occupy the article rail. Keep this
deliberately simple and selector-separated: no comma-list dependency on
advanced :not() parsing, no TemplateStyles scoping, and both physical and
logical width properties so later/readability rules cannot re-cap lines. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > p,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ul,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ol,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > dl {
display: block !important;
width: 100% !important;
max-width: none !important;
inline-size: 100% !important;
max-inline-size: none !important;
box-sizing: border-box !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output p {
max-width: none !important;
max-inline-size: none !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output li,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output dd {
max-width: none !important;
max-inline-size: none !important;
}
/* Restore the intentional compact maintenance notice after the broad prose
override above. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-review,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-draft,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-draft {
width: auto !important;
max-width: 44rem !important;
inline-size: auto !important;
max-inline-size: 44rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
EDFM login/register auth surface template alignment
========================================================================== */
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm {
color: var( --edfm-text );
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-label__label__text {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.015em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-Userlogin #userloginForm input[type='text'],
body.mediawiki.mw-special-Userlogin #userloginForm input[type='password'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='text'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='password'] {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 );
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input::placeholder,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-help,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-password-help {
color: var( --edfm-text-muted ) !important;
font-size: 0.88rem;
line-height: 1.45;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
margin-top: 0.85rem;
padding: 0.9rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.12 ), transparent 34% ),
var( --edfm-surface-1 );
border: 1px solid rgba( 255, 138, 0, 0.42 );
border-left: 3px solid var( --edfm-orange );
box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 850;
letter-spacing: 0.04em;
line-height: 1.35;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 0;
margin: 0;
padding: 0.55rem 0.8rem;
background: rgba( 255, 138, 0, 0.1 ) !important;
border: 1px solid var( --edfm-orange ) !important;
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.035 );
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.045em;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:hover,
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:focus-visible {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange-bright ) !important;
color: #10171b !important;
text-decoration: none !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin-top: 0.2rem;
padding: 1.15rem 1.25rem;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.08 ), transparent 38% ),
var( --edfm-surface-1 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-heading {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-size: 1.35rem;
font-weight: 800;
line-height: 1.25;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list {
margin-top: 1rem;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::before {
filter: none !important;
opacity: 0.78 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 1.75rem;
font-weight: 850;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {
color: var( --edfm-text-muted ) !important;
font-size: 0.9rem;
line-height: 1.35;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text {
display: none !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit {
background: var( --edfm-surface-3 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
border-radius: 0 !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 850;
letter-spacing: 0.06em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit:hover,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
body.mediawiki.mw-special-Userlogin #mw-content-text,
body.mediawiki.mw-special-CreateAccount #mw-content-text {
padding-top: 0.55rem;
}
body.mediawiki.mw-special-Userlogin #firstHeading {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-content-text > .mw-ui-container {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm {
width: min( 100%, 34rem ) !important;
margin: 0 auto !important;
padding: 1.15rem 1.2rem 1.25rem !important;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.1 ), transparent 34% ),
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 55% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-userlogin-help {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
margin: 1.05rem auto 0 !important;
max-width: 18rem;
}
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: grid !important;
grid-template-columns: minmax( 19rem, 28rem ) minmax( 20rem, 1fr ) !important;
gap: clamp( 1.4rem, 4vw, 3rem ) !important;
align-items: stretch !important;
width: min( 100%, 76rem ) !important;
max-width: 76rem !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin: 0 !important;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.07 ), transparent 38% ),
linear-gradient( 180deg, rgba( 255, 138, 0, 0.035 ), rgba( 0, 0, 0, 0 ) 54% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm {
padding: 1.15rem 1.2rem 1.25rem !important;
border-left: 3px solid var( --edfm-orange ) !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
padding: clamp( 1.3rem, 2.2vw, 2.05rem ) !important;
border-left: 3px solid var( --edfm-cyan ) !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field {
margin-bottom: 1rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLSubmitField,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLSubmitField {
margin-bottom: 0 !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName {
border-color: rgba( 66, 199, 217, 0.45 ) !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 1px rgba( 66, 199, 217, 0.35 ), 0 0 18px rgba( 66, 199, 217, 0.14 ) !important;
}
@media ( max-width: 860px ) {
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: flex !important;
flex-direction: column !important;
width: min( 100%, 34rem ) !important;
max-width: 34rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
width: 100% !important;
}
}
/* ==========================================================================
EDFM dark thumbnail/frame treatment — 2026-08-13
Keep MediaWiki image captions from falling back to the default white frame.
========================================================================== */
.mw-parser-output .thumb {
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"],
.mw-parser-output figure.mw-halign-right,
.mw-parser-output figure.mw-halign-left,
.mw-parser-output figure.mw-halign-center {
background:
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 56% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 1px solid var( --edfm-border ) !important;
box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbimage,
.mw-parser-output .thumbinner img,
.mw-parser-output figure[typeof~="mw:File/Thumb"] img,
.mw-parser-output figure[typeof~="mw:File/Frame"] img {
background-color: var( --edfm-bg-deep ) !important;
border: 1px solid var( --edfm-border ) !important;
box-sizing: border-box !important;
}
.mw-parser-output .thumbcaption,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption {
background: var( --edfm-surface-1 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim ) !important;
font-size: var( --edfm-fs-small ) !important;
line-height: 1.42 !important;
padding: 0.42rem 0.5rem 0.5rem !important;
}
.mw-parser-output .thumbcaption a,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a {
color: var( --edfm-link ) !important;
}
.mw-parser-output .thumbcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a:hover {
color: var( --edfm-link-hover ) !important;
}
.mw-parser-output .magnify a,
.mw-parser-output .mw-file-magnify {
filter: invert( 1 ) opacity( 0.72 ) drop-shadow( 0 0 2px rgba( 66, 199, 217, 0.28 ) );
}

/* ==========================================================================
EDFM VisualEditor template dialog dark theme — 2026-08-13
Keep template editing dialogs from falling back to white/light OOUI panels.
========================================================================== */
.ve-ui-mwTransclusionDialog,
.ve-ui-mwTransclusionDialog .oo-ui-window-frame,
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .oo-ui-window-body,
.ve-ui-mwTransclusionDialog .oo-ui-window-foot,
.ve-ui-mwTransclusionDialog .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTransclusionDialog .oo-ui-pageLayout,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-content,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
background-color: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu {
background-color: var( --edfm-surface-1 ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterSelectWidget {
background-color: var( --edfm-surface-2 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-widget {
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-field .oo-ui-labelElement-label em,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-undocumentedLabel {
color: var( --edfm-text-muted ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-bg-deep ) !important;
}

/* Additional VE template-dialog color polish — disabled/apply buttons, search,
unused-toggle buttons, and parameter checkboxes. */
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
opacity: 0.82 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget .oo-ui-inputWidget-input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-inputWidget-input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span::before {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
/* EDFM VisualEditor template/infobox popup hard-dark theme — targets the actual
Edit: <template> popup chrome and body, not just article/sidebar chrome. */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active > .oo-ui-window-frame,
.oo-ui-windowManager-modal .oo-ui-processDialog-content,
.oo-ui-windowManager-modal .oo-ui-window-content,
.oo-ui-windowManager-modal .oo-ui-window-body,
.oo-ui-windowManager-modal .oo-ui-window-foot,
.ve-ui-mwTemplateDialog,
.ve-ui-mwTemplateDialog .oo-ui-panelLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-content,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTemplateDialog .oo-ui-pageLayout,
.ve-ui-mwTemplateDialog .ve-ui-mwTemplatePage,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #111b20 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-content > .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-processDialog-navigation,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #1c2a31 !important;
color: #f4f7f8 !important;
border-color: #7f9299 !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-title,
.oo-ui-windowManager-modal .oo-ui-labelElement-label,
.oo-ui-windowManager-modal .oo-ui-fieldLayout-header label,
.oo-ui-windowManager-modal .oo-ui-widget,
.ve-ui-mwTemplateDialog .oo-ui-labelElement-label,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTemplateDialog .oo-ui-fieldsetLayout-header label {
color: #f4f7f8 !important;
}
.oo-ui-windowManager-modal .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-undocumentedLabel,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .mw-widget-titleOptionWidget-description {
color: #a9bbc1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-inputWidget-input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget textarea,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget input,
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
background: #0d1519 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: #42c7d9 !important;
box-shadow: 0 0 0 2px rgba(66,199,217,.32) !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: #25353d !important;
border-color: #52646b !important;
color: #f4f7f8 !important;
box-shadow: none !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: #31454f !important;
border-color: #ff8a00 !important;
color: #ffb347 !important;
}
.oo-ui-windowManager-modal .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: #ff8a00 !important;
border-color: #ff8a00 !important;
color: #111820 !important;
font-weight: 700 !important;
}
.oo-ui-windowManager-modal .oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background: #1c2a31 !important;
border-color: #3f5159 !important;
color: #8fa1a8 !important;
opacity: 1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget:hover,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: #25353d !important;
color: #f4f7f8 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span::before {
background-color: #0d1519 !important;
border-color: #7f9299 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before {
background-color: #ff8a00 !important;
border-color: #ff8a00 !important;
}
/* EDFM cookie preferences banner */
#edfm-cookie-banner {
position: fixed;
z-index: 10000;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: flex;
justify-content: center;
pointer-events: none;
}
#edfm-cookie-banner .edfm-cookie-card {
max-width: 800px;
border: 1px solid rgba(80, 220, 240, 0.65);
background: rgba(3, 14, 22, 0.98);
box-shadow: 0 0 22px rgba(80, 220, 240, 0.22), 0 12px 36px rgba(0, 0, 0, 0.45);
color: #dffbff;
padding: 1rem;
font-size: 0.95rem;
pointer-events: auto;
}
#edfm-cookie-banner .edfm-cookie-title {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fe0ec;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-text { margin: 0 0 0.75rem; line-height: 1.45; }
#edfm-cookie-banner .edfm-cookie-categories {
display: grid;
gap: 0.65rem;
margin: 0.65rem 0 0.85rem;
}
#edfm-cookie-banner .edfm-cookie-category {
border: 1px solid rgba(127, 224, 236, 0.32);
background: rgba(7, 28, 38, 0.74);
padding: 0.7rem;
}
#edfm-cookie-banner .edfm-cookie-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-category h3 {
margin: 0;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f3feff;
}
#edfm-cookie-banner .edfm-cookie-category p {
margin: 0;
line-height: 1.42;
color: #c6e6eb;
}
#edfm-cookie-banner .edfm-cookie-status {
white-space: nowrap;
border: 1px solid rgba(255, 138, 0, 0.7);
color: #ffd69a;
background: rgba(255, 138, 0, 0.12);
padding: 0.2rem 0.48rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#edfm-cookie-banner .edfm-cookie-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-weight: 700;
color: #f3feff;
cursor: pointer;
}
#edfm-cookie-banner .edfm-cookie-switch input {
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color: #ff8a00;
}
#edfm-cookie-banner .edfm-cookie-switch input:focus-visible {
outline: 2px solid #7fe0ec;
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#edfm-cookie-banner button {
border: 1px solid rgba(127, 224, 236, 0.7);
background: rgba(9, 50, 65, 0.92);
color: #f3feff;
padding: 0.45rem 0.7rem;
cursor: pointer;
}
#edfm-cookie-banner button:hover,
#edfm-cookie-banner button:focus-visible {
background: rgba(17, 88, 108, 0.98);
outline: 2px solid rgba(127, 224, 236, 0.85);
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-links { margin-top: 0.6rem; font-size: 0.85rem; }
#edfm-cookie-banner a { color: #7fe0ec; }
@media (max-width: 600px) {
#edfm-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
#edfm-cookie-banner .edfm-cookie-card { max-height: calc(100vh - 1rem); overflow: auto; }
#edfm-cookie-banner .edfm-cookie-category-head { align-items: flex-start; }
#edfm-cookie-banner .edfm-cookie-actions button { flex: 1 1 100%; }
}

/* ==========================================================================
EDFM Vector watchstar dark-theme fix — 2026-08-16
Vector legacy renders the page watch/unwatch affordance as a small SVG
background on `#ca-watch/#ca-unwatch a::before`. On EDFM's dark tab row the
upstream light-skin URLs can be too low-contrast, and some deployments do not
expose ResourceLoader's dotted asset path directly. Use inline SVGs in the
EDFM palette so the watchstar is always visible in the top action menu.
========================================================================== */
.vector-menu-tabs #ca-watch.icon a::before,
.vector-menu-tabs-legacy #ca-watch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2310171b' stroke='%2342c7d9' stroke-width='1.35' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.42 ) );
opacity: 0.96;
}
.vector-menu-tabs #ca-unwatch.icon a::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.2' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 4px rgba( 255, 138, 0, 0.45 ) );
opacity: 0.98;
}
.vector-menu-tabs #ca-watch.icon a:hover::before,
.vector-menu-tabs #ca-watch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-watch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-watch.icon a:focus::before,
.vector-menu-tabs #ca-unwatch.icon a:hover::before,
.vector-menu-tabs #ca-unwatch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:focus::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.25' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 5px rgba( 255, 138, 0, 0.65 ) );
opacity: 1;
}

/* ==========================================================================
EDFM Special:Preferences dark theme fix — 2026-08-16
Preferences is an OOUI/Codex-heavy special page. Core styles bring in a
light tab strip and sticky submit footer, so theme the actual preferences
wrapper rather than only generic form controls.
========================================================================== */
body.mediawiki.mw-special-Preferences #preferences,
body.mediawiki.mw-special-Preferences #mw-prefs-container,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-fieldset-wrapper,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout-framed {
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed {
box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.32 );
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-menu,
body.mediawiki.mw-special-Preferences .oo-ui-menuLayout-menu {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabSelectWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget:hover,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: inset 0 -3px 0 var( --edfm-orange ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header label,
body.mediawiki.mw-special-Preferences .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .mw-prefs-title {
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-description,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-help,
body.mediawiki.mw-special-Preferences .oo-ui-inline-help,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-messages,
body.mediawiki.mw-special-Preferences .htmlform-tip,
body.mediawiki.mw-special-Preferences .mw-htmlform-help {
background: transparent !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownInputWidget select,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownWidget-handle,
body.mediawiki.mw-special-Preferences input[type='text'],
body.mediawiki.mw-special-Preferences input[type='number'],
body.mediawiki.mw-special-Preferences input[type='email'],
body.mediawiki.mw-special-Preferences textarea,
body.mediawiki.mw-special-Preferences select {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-inputWidget-input::placeholder,
body.mediawiki.mw-special-Preferences input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus,
body.mediawiki.mw-special-Preferences input:focus,
body.mediawiki.mw-special-Preferences textarea:focus,
body.mediawiki.mw-special-Preferences select:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox'] {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox']:checked {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
accent-color: var( --edfm-orange );
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit,
body.mediawiki.mw-special-Preferences button,
body.mediawiki.mw-special-Preferences input[type='submit'] {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit:hover,
body.mediawiki.mw-special-Preferences button:hover,
body.mediawiki.mw-special-Preferences input[type='submit']:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
body.mediawiki.mw-special-Preferences #preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .oo-ui-window-foot .mw-htmlform-submit-buttons {
background: rgba( 16, 23, 27, 0.96 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
box-shadow: 0 -10px 24px rgba( 0, 0, 0, 0.34 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-search-highlight,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
background: rgba( 66, 199, 217, 0.18 ) !important;
outline-color: rgba( 66, 199, 217, 0.32 ) !important;
color: var( --edfm-text ) !important;
}

/* Special:ChangeContentModel's "New content model" dropdown otherwise only
gets the generic .oo-ui-inputWidget-input treatment (surface-1, no focus
ring) -- match it to the same OOUI dropdown treatment used on
Special:Preferences above (deeper background, inset hairline, cyan focus
ring) instead of leaving it one shade lighter than the template. */
body.mediawiki.mw-special-ChangeContentModel #mw-input-model {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-ChangeContentModel #mw-input-model:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}

Template:EDFM style/styles.css

2026-08-19T22:25:04Z

EDFM Site Maintenance: Give edfm-panel-review the same compact/centred width as edfm-panel-draft

/* Shared styling for EDFM's editorial templates (Article status, Draft
warning, Prerequisites, Related articles, etc. -- see each template's
own page for which classes it uses). Freely uses the --edfm-* custom
properties defined in MediaWiki:Common.css -- see the note there under
"6. Panels" for why these classes live only in this file and not
duplicated in Common.css too.

2026-08-07 SECOND PASS: panels keep the accent-rail + corner-cut
language from the first pass (both are explicitly the "hierarchy
without a full border around everything" technique this redesign asks
for) but get noticeably more padding/breathing room; the status module
is rebuilt with a coloured header band and stacked label/value metadata
instead of a plain left-rail box with inline "Label: value" text; and a
new .edfm-related component replaces the old plain notice-style
"Related articles" bar with a small tile row. */

.edfm-box,
.edfm-panel {
border-left: 4px solid var( --edfm-cyan );
background: var( --edfm-surface-2 );
color: var( --edfm-text );
padding: 1.1em 1.3em;
margin: 1.4em 0;
box-sizing: border-box;
width: 100%;
clip-path: polygon( 0 0, calc( 100% - 10px ) 0, 100% 10px, 100% 100%, 0 100% );
}
.edfm-panel-info {
border-left-color: var( --edfm-cyan );
}
.edfm-panel-warning,
.edfm-box.edfm-warning {
border-left-color: var( --edfm-orange );
background: #201a12;
}
.edfm-panel-draft,
.edfm-box.edfm-draft {
border-left-color: var( --edfm-text-dim );
background: var( --edfm-surface-1 );
}
/* Draft/maintenance notices are intentionally compact and centred; article
prose/nav/tables may stretch, but these banners should not become a
full-width strip across the whole rail. */
.edfm-panel-review:not( .edfm-status ),
.edfm-panel-draft:not( .edfm-status ),
.edfm-box.edfm-draft:not( .edfm-status ) {
max-width: 44rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
.edfm-panel-reference {
border-left-color: var( --edfm-blue );
}
.edfm-box.edfm-disclaimer {
border-left-color: var( --edfm-orange );
font-size: 0.92em;
}
.edfm-box dl,
.edfm-panel dl {
margin: 0;
}
.edfm-box dt,
.edfm-panel dt {
font-weight: bold;
float: left;
clear: left;
margin-right: 0.5em;
color: var( --edfm-text );
}
.edfm-box dd,
.edfm-panel dd {
margin-left: 11em;
}
.edfm-inline-flag {
font-style: italic;
color: var( --edfm-cyan );
}

/* --- Article metadata / status module (Template:Article status) --------
2026-08-08 second revision: a compact maintenance banner (RuneScape
Wiki-style notice as the UX reference, not its markup/colours) rather
than a small internal dashboard -- an icon, the bare status word (no
mode/version appended to it), one standard sentence for that status,
and a concise "Uncertain: ..." line when there's something worth
flagging. The full editorial record (reviewer, mode, version, source
quality, the complete uncertainty note, etc.) moves to the
.edfm-status-expand collapsible below, not removed, just no longer
competing with the article for attention. Semantic colouring always
pairs with the visible text status/icon -- never colour alone, per the
site's Verification Policy. Three colour tiers cover the seven actual
status values (see Elite Dangerous Field Manual: Verification Policy):
positive/confirmed (Verified, Partially verified) in cyan -- matching
"cyan = verification information" from the colour system;
attention-needed (Needs review, Upcoming) in orange -- matching
"orange = important actions/emphasis"; and neutral (Draft, Historical,
Legacy only) in a dim neutral tone -- Draft moved here from the
attention tier, since "still being written" isn't the same kind of
concern as "unchecked" or "not released yet". The template sets the
modifier class via #switch. */
.edfm-status {
border-left-width: 4px;
border-left-style: solid;
padding: 0;
overflow: hidden;
max-width: 44rem !important;
margin: 1em auto !important;
}
.edfm-status--positive { border-left-color: var( --edfm-status-positive ); }
.edfm-status--attention { border-left-color: var( --edfm-status-attention ); }
.edfm-status--neutral { border-left-color: var( --edfm-status-neutral ); }

.edfm-status-banner {
display: flex;
align-items: flex-start;
gap: 0.65em;
padding: 0.55em 0.9em;
}
/* Fixed-size icon swatch -- a single CSS-safe glyph (no icon font/library),
never the same shape as a hard error: a checkmark for the positive
tier, a plain "!" (not a red triangle) for attention, a quiet "i" for
neutral. "Needs review" means not fully verified yet, not wrong. */
.edfm-status-icon {
flex: 0 0 auto;
width: 1.45em;
height: 1.45em;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-weight: 700;
font-size: 0.85em;
line-height: 1;
}
.edfm-status--positive .edfm-status-icon { background: var( --edfm-status-positive-bg ); color: var( --edfm-status-positive ); }
.edfm-status--attention .edfm-status-icon { background: var( --edfm-status-attention-bg ); color: var( --edfm-status-attention ); }
.edfm-status--neutral .edfm-status-icon { background: var( --edfm-status-neutral-bg ); color: var( --edfm-text-dim ); }
.edfm-status-banner-body {
flex: 1 1 auto;
min-width: 0;
}
.edfm-status-heading {
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.9em;
margin-bottom: 0.2em;
}
.edfm-status--positive .edfm-status-heading { color: var( --edfm-status-positive ); }
.edfm-status--attention .edfm-status-heading { color: var( --edfm-status-attention ); }
.edfm-status--neutral .edfm-status-heading { color: var( --edfm-text ); }
.edfm-status-message {
margin: 0 0 0.2em;
color: var( --edfm-text-muted );
font-size: 0.86em;
line-height: 1.35;
}
.edfm-status-uncertain {
margin: 0;
color: var( --edfm-text );
font-size: 0.86em;
line-height: 1.35;
}
.edfm-status-uncertain-label {
font-weight: 700;
color: var( --edfm-text-dim );
}
.edfm-status-details {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 11em, 1fr ) );
gap: 0.85em 1.25em;
margin: 0;
padding: 0.85em 1em;
}
.edfm-status-row {
display: flex;
flex-direction: column;
gap: 0.2em;
/* Grid items default to min-width: auto, which floors their shrink at
their content's min-content size -- a long slash-joined run like
"prerequisite/discovery/invitation/unlock" (no spaces, so no natural
break point in some engines) could floor a column wider than its
track and spill into the next one at in-between widths (2026-08-08:
found at ~820px on The Dweller). Letting the item shrink below that
floor, paired with the dd's own overflow-wrap below, keeps long
values inside their own column at every width instead. */
min-width: 0;
}
.edfm-status-row dt {
color: var( --edfm-text-dim );
font-weight: 700;
white-space: nowrap;
float: none;
clear: none;
margin: 0;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-size: 0.7em;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edfm-status-row dd {
margin: 0;
color: var( --edfm-text );
font-size: 0.98em;
overflow-wrap: anywhere;
}
@media ( max-width: 800px ) {
.edfm-status-details {
grid-template-columns: 1fr 1fr;
}
}
@media ( max-width: 480px ) {
.edfm-status-details {
grid-template-columns: 1fr;
}
}

/* --- Related content (Template:Related articles) -----------------------
A small navigation strip instead of a generic bordered notice -- a
quiet uppercase label above a row of individually-boxed link "tiles",
each with a trailing arrow. Deliberately styles the `<a>` elements
directly (not container-level flexbox) so the freeform wikitext link
list passed into the template (arbitrary separators/whitespace between
links) can't break the layout -- every link gets its own tile
regardless of what, if anything, sits between them in the source. */
.edfm-related {
margin: 1.6em 0;
width: 100%;
box-sizing: border-box;
}
.edfm-related-label {
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-size: 0.75em;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var( --edfm-text-dim );
margin-bottom: 0.6em;
}
.edfm-related-links {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
gap: 0.7em;
}
.edfm-related-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5em;
background: var( --edfm-surface-2 );
border-left: 2px solid var( --edfm-cyan );
padding: 0.65em 1.1em;
margin: 0;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.85em;
text-decoration: none;
transition: background-color 0.15s ease, border-left-color 0.15s ease, transform 0.15s ease;
}
.edfm-related-links a::after {
content: '\2192';
}
.edfm-related-links a:hover {
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-orange );
transform: translateY( -1px );
}

/* --- "View verification details" collapsible ---------------------------
Wraps everything beyond the compact banner (Status, Last reviewed,
Reviewer, Game mode, Version coverage, Source quality, the full Known
uncertainty text, and the optional Legacy differences/Recent changes/
Verification notes fields) behind a native mw-collapsible toggle
instead of a new dependency -- jquery.makeCollapsible
is core MediaWiki, loaded on every page by mediawiki.page.ready. For a
plain <div> its default behaviour prepends a
<button class="mw-collapsible-toggle"><span class="mw-collapsible-text">
as the first child and wraps the remaining content in
.mw-collapsible-content -- reset here to a plain full-width text row
matching this module's mono/uppercase metadata language, instead of the
browser's default button chrome, which would render as a jarring light
box against this site's dark surfaces (same class of fix as the Save
dialog/toolbar/#filetoc native-component passes elsewhere on this
site). */
.edfm-status-expand {
border-top: 1px solid var( --edfm-border-soft );
}
.edfm-status-expand > .mw-collapsible-toggle {
display: block;
width: 100%;
background: none;
border: none;
margin: 0;
padding: 0.45em 1em;
text-align: left;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-size: 0.75em;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var( --edfm-text-dim );
cursor: pointer;
}
.edfm-status-expand > .mw-collapsible-toggle:hover,
.edfm-status-expand > .mw-collapsible-toggle:focus {
color: var( --edfm-orange );
outline: none;
}
.edfm-status-expand .mw-collapsible-content .edfm-status-details {
padding-top: 0.3em;
}

/* --- Fact / Field Manual Recommendation callouts ------------------------
Template:Fact and Template:Field manual recommendation -- a small
labelled distinction between a verified fact and EDFM's own editorial
judgement (see Elite Dangerous Field Manual:Engineering Architecture on
why pinning/strategy guidance is treated as editorial, not database
fact). Deliberately reuses the accent-rail + cyan/orange language
already used everywhere else on this site (status positive/attention,
infobox labels, related-link hover) instead of inventing a new callout
style: cyan marks a verified fact ("cyan = verification information"),
orange marks editorial guidance ("orange = important actions/
emphasis") -- see the colour rules this mirrors in this file's own
.edfm-status-- modifiers above. */
.edfm-fact-recommendation {
border-left: 3px solid var( --edfm-border );
padding: 0.5em 0.9em;
margin: 0.8em 0;
}
.edfm-fact-recommendation--fact {
border-left-color: var( --edfm-cyan );
}
.edfm-fact-recommendation--recommendation {
border-left-color: var( --edfm-orange );
}
.edfm-fact-recommendation-label {
display: block;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-weight: 700;
font-size: 0.72em;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.3em;
}
.edfm-fact-recommendation--fact .edfm-fact-recommendation-label {
color: var( --edfm-cyan );
}
.edfm-fact-recommendation--recommendation .edfm-fact-recommendation-label {
color: var( --edfm-orange );
}
.edfm-fact-recommendation-body {
color: var( --edfm-text );
}

/* ===========================================================================
2026-08-10 ARTICLE RAIL WIDTH GUARANTEE
=========================================================================== */
/* TemplateStyles is loaded after site Common.css on article pages, so this is
the late-cascade guard that makes ordinary article prose and section blocks
use the full article rail. Only maintenance/status/draft notice components
keep their intentionally compact centered width. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > div {
width: 100% !important;
max-width: none !important;
box-sizing: border-box;
}
.mw-parser-output > .edfm-status,
.mw-parser-output > .edfm-panel-review,
.mw-parser-output > .edfm-panel-draft,
.mw-parser-output > .edfm-draft {
width: auto !important;
max-width: 44rem !important;
}
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd {
max-width: none !important;
}

/* ===========================================================================
2026-08-12 GUIDED ENCYCLOPEDIA COMPONENTS
=========================================================================== */
.edfm-guide-info,
.edfm-guide-requirements,
.edfm-guide-step,
.edfm-guide-callout,
.edfm-context-media,
.edfm-what-next {
width: 100%;
box-sizing: border-box;
}
.edfm-guide-info {
border-left: 4px solid var( --edfm-cyan );
background: linear-gradient( 135deg, rgba( 66, 199, 217, 0.1 ), rgba( 8, 13, 17, 0.94 ) );
padding: 1.05rem 1.2rem;
margin: 1.35rem 0;
clip-path: polygon( 0 0, calc( 100% - 12px ) 0, 100% 12px, 100% 100%, 0 100% );
}
.edfm-guide-info-title,
.edfm-guide-requirements-title,
.edfm-what-next-title {
margin: 0 0 0.75rem;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-cyan );
}
.edfm-guide-info dl,
.edfm-guide-requirements dl {
display: grid;
grid-template-columns: minmax( 10rem, 0.34fr ) 1fr;
gap: 0.45rem 0.9rem;
margin: 0;
}
.edfm-guide-info dt,
.edfm-guide-requirements dt {
float: none;
clear: none;
margin: 0;
font-weight: 800;
color: var( --edfm-text );
}
.edfm-guide-info dd,
.edfm-guide-requirements dd {
margin: 0;
color: var( --edfm-text-muted );
}
.edfm-guide-requirements {
border-left: 4px solid var( --edfm-blue );
background: var( --edfm-surface-2 );
padding: 1rem 1.2rem;
margin: 1.35rem 0;
}
.edfm-guide-requirements-title {
color: var( --edfm-blue );
}
.edfm-guide-step {
position: relative;
margin: 1.55rem 0;
padding: 1.05rem 1.15rem 1.05rem 1.35rem;
border-left: 4px solid var( --edfm-orange );
background: rgba( 12, 18, 23, 0.92 );
box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.04 );
}
.edfm-guide-step-heading {
display: flex;
align-items: baseline;
gap: 0.6rem;
margin: 0 0 0.65rem;
}
.edfm-guide-step-number {
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-size: 0.82rem;
font-weight: 900;
color: var( --edfm-orange );
}
.edfm-guide-step-title {
font-size: 1.15rem;
font-weight: 800;
color: var( --edfm-text );
}
.edfm-guide-step-body {
color: var( --edfm-text );
}
.edfm-guide-step-body > :first-child,
.edfm-guide-callout-body > :first-child,
.edfm-context-media-body > :first-child,
.edfm-what-next-body > :first-child { margin-top: 0; }
.edfm-guide-step-body > :last-child,
.edfm-guide-callout-body > :last-child,
.edfm-context-media-body > :last-child,
.edfm-what-next-body > :last-child { margin-bottom: 0; }
.edfm-guide-callout {
border-left: 4px solid var( --edfm-cyan );
background: rgba( 66, 199, 217, 0.08 );
padding: 0.8rem 1rem;
margin: 1rem 0;
}
.edfm-guide-callout--warning {
border-left-color: var( --edfm-orange );
background: rgba( 255, 138, 0, 0.1 );
}
.edfm-guide-callout--important {
border-left-color: var( --edfm-blue );
background: rgba( 89, 147, 255, 0.1 );
}
.edfm-guide-callout--tip {
border-left-color: var( --edfm-cyan );
background: rgba( 66, 199, 217, 0.08 );
}
.edfm-guide-callout--field-note {
border-left-color: var( --edfm-text-dim );
background: rgba( 108, 122, 130, 0.1 );
}
.edfm-guide-callout-label {
display: block;
margin-bottom: 0.35rem;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-cyan );
}
.edfm-context-media {
display: grid;
grid-template-columns: minmax( 0, 1fr ) minmax( 16rem, 0.42fr );
gap: 1rem;
align-items: start;
margin: 1.25rem 0;
padding: 1rem;
background: var( --edfm-surface-1 );
border: 1px solid var( --edfm-border );
}
.edfm-context-media--left {
grid-template-columns: minmax( 16rem, 0.42fr ) minmax( 0, 1fr );
}
.edfm-context-media--left .edfm-context-media-figure { order: -1; }
.edfm-context-media-figure {
margin: 0;
}
.edfm-context-media-figure img,
.edfm-context-media-figure .mw-file-element {
max-width: 100%;
height: auto;
border: 1px solid var( --edfm-border );
background: #05080b;
}
.edfm-context-media-caption {
margin-top: 0.45rem;
font-size: 0.86rem;
color: var( --edfm-text-muted );
}
.edfm-what-next {
border-left: 4px solid var( --edfm-cyan );
background: var( --edfm-surface-2 );
padding: 1rem 1.15rem;
margin: 1.6rem 0;
}
.edfm-what-next-title { color: var( --edfm-orange ); }
.edfm-what-next-body ul,
.edfm-what-next-body ol { margin-bottom: 0; }
@media ( max-width: 720px ) {
.edfm-guide-info dl,
.edfm-guide-requirements dl,
.edfm-context-media,
.edfm-context-media--left {
display: block;
}
.edfm-guide-info dt,
.edfm-guide-requirements dt { margin-top: 0.55rem; }
.edfm-guide-info dt:first-child,
.edfm-guide-requirements dt:first-child { margin-top: 0; }
.edfm-guide-info dd,
.edfm-guide-requirements dd { margin-top: 0.1rem; }
.edfm-context-media-figure { margin-top: 0.8rem; }
}

.edfm-guide-callout--warning .edfm-guide-callout-label { color: var( --edfm-orange ); }
.edfm-guide-callout--important .edfm-guide-callout-label { color: var( --edfm-blue ); }
.edfm-guide-callout--tip .edfm-guide-callout-label { color: var( --edfm-cyan ); }
.edfm-guide-callout--field-note .edfm-guide-callout-label { color: var( --edfm-text-dim ); }

MediaWiki:Common.css

2026-08-19T21:23:03Z

EDFM Site Maintenance: Match Special:ChangeContentModel's New content model dropdown to the Preferences dropdown template

/* ==========================================================================
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).

2026-08-07 SECOND PASS: the first redesign pass was judged too close to
stock MediaWiki with a colour change -- this pass changes the actual
visual composition (centred workspace instead of a huge dead gutter,
a two-tier header, a real masthead, a tile-grid TOC, a restructured
status module, larger deliberate type scale, depth via surface
elevation instead of borders-around-everything) while reusing every
working mechanism from the first pass rather than throwing it away --
the tab/:visited fix, the external-link specificity fix, the mobile
reorder fix, and focus-visible/reduced-motion are all still here,
unchanged in mechanism.
========================================================================== */

/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* Depth system: site (outermost, visible in the sidebar/header/gutters)
-> article surface -> component surfaces, each a deliberate step
brighter so the page reads as having actual depth rather than "one
background colour with slightly lighter boxes everywhere". */
--edfm-bg-deep: #07090b;
--edfm-bg-page: #0a0e11;
--edfm-surface-1: #10171b;
--edfm-surface-2: #161f24;
--edfm-surface-3: #1c272d;
--edfm-surface-4: #233037;

--edfm-border: #26333b;
--edfm-border-soft: rgba( 255, 255, 255, 0.06 );

--edfm-text: #edf0f2;
--edfm-text-muted: #98a5ad;
--edfm-text-dim: #6c7a82;

/* 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 */
--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 );
--edfm-status-positive-bg: rgba( 66, 199, 217, 0.12 );
--edfm-status-attention-bg: rgba( 255, 138, 0, 0.12 );
--edfm-status-neutral-bg: rgba( 108, 122, 130, 0.12 );

/* Typography -- explicit desktop scale (2026-08-07 pass 2). Sized in
rem against the root's real 16px (Vector legacy's own
@font-size-root is 100%, i.e. browser default -- confirmed by
reading skins.vector.styles.legacy/variables.less, not assumed)
rather than nested em, specifically so component sizes can't
compound smaller than intended inside whatever ambient size an
ancestor happens to set. */
--edfm-fs-title: clamp( 1.9rem, 1.4rem + 2vw, 2.25rem ); /* ~30-36px */
--edfm-fs-h2: 1.35rem; /* ~21.6px */
--edfm-fs-h3: 1.15rem; /* ~18.4px */
--edfm-fs-body: 1rem; /* 16px */
--edfm-fs-resource-name: 1.1rem; /* ~17.6px */
--edfm-fs-meta: 0.8rem; /* ~12.8px */
--edfm-fs-sidebar: 0.9375rem; /* 15px -- polish pass: +1px for readability */
--edfm-fs-utility: 0.72rem; /* ~11.5px */

--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 );

/* Geometry / layout */
--edfm-corner: 10px;
/* Full-width article workspace: keep the fixed Vector sidebar clear,
but let the article surface use the entire remaining viewport. */
--edfm-sidebar-width: 12.75rem;
--edfm-sidebar-clear: 12.75rem;
--edfm-content-max: calc( 100vw - var( --edfm-sidebar-clear ) );
--edfm-gutter: 0px;
}

/* ==========================================================================
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 );
font-size: var( --edfm-fs-body );
}
/* Background treatment: a faint technical grid plus a very soft radial
glow centred behind the (now centred) content column, so the composition
still has quiet visual interest in the gutters on ultrawide screens
instead of just flat colour -- both stay under ~3% opacity, this is
texture, not a HUD. Not image assets; pure CSS gradients. */
body {
background-image:
radial-gradient( ellipse 1400px 900px at 50% 0%, rgba( 66, 199, 217, 0.05 ), transparent 60% ),
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: auto, 48px 48px, 48px 48px;
background-repeat: no-repeat, repeat, repeat;
background-attachment: fixed, scroll, scroll;
}
/* Full-height sidebar rail: mirrors the RuneScape.wiki behavior where the
left rail has no visible bottom edge. The real #mw-panel only carries the
navigation content; this fixed layer paints the uninterrupted surface,
border, and shadow down the whole viewport. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var( --edfm-sidebar-width );
background: linear-gradient( 180deg, var( --edfm-surface-1 ) 0%, var( --edfm-bg-deep ) 100% );
border-right: 1px solid var( --edfm-border );
box-shadow: 10px 0 22px rgba( 0, 0, 0, 0.32 );
pointer-events: none;
z-index: 1;
}
@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: 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;
}

/* Small reusable angular motif: a corner-cut bracket, used sparingly (see
the redesign notes in docs/content-style-guide.md for exactly where) --
deliberately not applied everywhere. */
.edfm-corner-cut {
clip-path: polygon( 0 0, calc( 100% - var( --edfm-corner ) ) 0, 100% var( --edfm-corner ), 100% 100%, 0 100% );
}

/* ==========================================================================
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: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.75rem, 1.35rem + 1.45vw, 2.15rem );
font-weight: 700;
letter-spacing: 0;
line-height: 1.18;
margin: 0.15em 0 0.25em;
padding-bottom: 0.22em;
border-bottom: 1px solid var( --edfm-border );
}
/* Section headings (h2): "// " prefix in orange, bright heading text, a
short orange accent segment over the dim full-width divider core
already draws. Substantially more vertical space than a wiki section
normally gets, per the "sections feel packed together" fix -- 3.25rem
(~52px) above, ~1.1rem gap to the first content component below. If a
heading opts into explicit numbering via {{Section number}}, the
automatic "// " is suppressed so the two treatments don't double up. */
.mw-body h2 {
position: relative;
padding-bottom: 0.25em;
margin-top: 2rem;
margin-bottom: 0.85rem;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.28rem, 1.08rem + 0.65vw, 1.62rem );
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid var( --edfm-border ) !important;
}
.mw-body h2::before {
content: none;
}
.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 );
font-size: var( --edfm-fs-h3 );
}
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.7;
font-size: var( --edfm-fs-body );
}
.mw-body p {
margin: 0 0 1.1em 0;
max-width: none !important; /* Site-wide full-width pass: article text should use the whole content rail. */
}
.mw-body ul,
.mw-body ol {
line-height: 1.7;
margin-bottom: 1.1em;
}

/* EDFM article bullets: replace the stock browser dot with the provided
cyan field-manual arrow, scaled to text size rather than using the source
image's native 100x91 dimensions. This targets article unordered lists;
interface/navigation lists such as the Jump To TOC and galleries are reset
below so they keep their component-specific layout. */
.mw-parser-output ul {
list-style: none;
padding-left: 1.55em;
}
.mw-parser-output ul > li {
position: relative;
}
.mw-parser-output ul > li::before {
content: '';
position: absolute;
left: -1.35em;
top: 0.48em;
width: 0.82em;
height: 0.75em;
background-image: url( '/edfm-assets/list-bullet-arrow.png' );
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.95;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.35 ) );
}
.mw-parser-output ul ul {
margin-top: 0.3em;
padding-left: 1.45em;
}
.mw-parser-output ul ul > li::before {
left: -1.25em;
top: 0.52em;
width: 0.68em;
height: 0.62em;
opacity: 0.82;
}
/* Component exceptions: these are not prose bullet lists. */
.mw-parser-output .toc ul,
.mw-parser-output .gallery,
.mw-parser-output .gallery ul,
.mw-parser-output .mw-gallery-traditional,
.mw-parser-output .mw-gallery-traditional ul {
padding-left: 0;
}
.mw-parser-output .toc li::before,
.mw-parser-output .gallery li::before,
.mw-parser-output .mw-gallery-traditional li::before {
content: none;
}
/* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the
sibling that immediately follows is that wrapper, not the `h2`/`h3`
itself -- matching both forms since a page could still have a bare
heading in edge cases (e.g. content generated without the wrapper). */
.mw-heading2 + p, .mw-body h2 + p,
.mw-heading3 + p, .mw-body h3 + p,
.mw-heading2 + div, .mw-body h2 + div,
.mw-heading3 + div, .mw-body h3 + div {
margin-top: 0;
}
hr {
background-color: var( --edfm-border );
border-color: var( --edfm-border );
}

/* Quiet, discoverable section-edit controls (logged-in editors only --
MediaWiki only renders these for users who can edit). Keeping the
functionality/keyboard access intact while making sure they don't
compete visually with the heading they're attached to: low opacity at
rest, full opacity on hover/focus of the heading OR the control itself,
brackets hidden (the opacity+letter-spacing treatment already reads as
a distinct control without them). */
.mw-editsection {
margin-left: 1em;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility ) !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.45;
transition: opacity 0.15s ease;
}
.mw-heading:hover .mw-editsection,
.mw-heading:focus-within .mw-editsection,
.mw-editsection:hover,
.mw-editsection:focus-within {
opacity: 1;
}
.mw-editsection a {
color: var( --edfm-text-dim );
}
.mw-editsection a:hover,
.mw-editsection a:focus-visible {
color: var( --edfm-cyan );
}
.mw-editsection-bracket {
display: none;
}
.mw-editsection-divider {
color: var( --edfm-text-dim );
margin: 0 0.3em;
}

/* ==========================================================================
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. GLOBAL LAYOUT -- centred workspace
========================================================================== */
/* Full-width article pass: the article now fills the workspace to the right edge.
Historical note: this block originally centred a capped article column.

THE fix for "enormous unused region on the right side of wide displays".
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 with no max-width at all -- the first redesign
pass added a max-width but left the column pinned to the sidebar's left
edge, which is *why* it still read as "a column stuck on the left with
dead space on the right" rather than a composed layout.

Fix: instead of a fixed `margin-left: 11em`, compute how much space is
left over in the workspace (viewport minus the sidebar) once the
content has its max-width, and split that leftover evenly between the
left and right margins (via the --edfm-gutter token above) -- so the
article is centred *within the workspace to the right of the sidebar*,
not centred in the full viewport (which would ignore the sidebar and
look off-centre) and not pinned to its left edge either. On a screen
too narrow for sidebar + max-width content, --edfm-gutter naturally
evaluates to 0 and this degrades to the old "fill the workspace"
behaviour -- no separate narrow-screen override needed.

The header/tab bar's own float/absolute-position box (#mw-head) is left
at its native full width deliberately -- rewriting *that* mechanism is
a different, much higher-risk change (it took several rounds to get
right originally) -- but its *contents* (search box, personal tools,
namespace/view tabs) get their own right/left offsets pulled in by the
same --edfm-gutter below, so they still visually line up with the
centred column beneath them instead of hugging the browser edge. */
.mw-body,
#mw-data-after-content,
.mw-footer {
position: relative;
z-index: 2;
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
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,
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
/* Keep real table layout so header cells and body cells share one column grid.
The earlier display:block + tbody display:table overflow hack made sortable
headers size independently from body columns, which visibly misaligned the
Engineer directory after portrait chips were added. */
display: table;
width: 100%;
table-layout: auto;
}
.mw-body table.wikitable th,
.mw-body table.wikitable td,
.mw-body table.mw-datatable th,
.mw-body table.mw-datatable td {
vertical-align: middle;
}
.mw-body img {
max-width: 100%;
height: auto;
}

/* ==========================================================================
4. ARTICLE MASTHEAD (eyebrow / title / deck)
========================================================================== */
/* Eyebrow line is authored as ordinary wikitext (see Template:Article
header) and, purely as a placement detail, a small script
(MediaWiki:Common.js) moves it directly above #firstHeading on 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).
If JS is unavailable the eyebrow still renders, just directly under the
title instead of above it.

The eyebrow/title/deck aren't wrapped in one literal bounding box (they
live at two different DOM depths -- eyebrow is a sibling of #firstHeading,
deck is inside the article body further down -- wrapping them in one
real container would need heavier JS than is justified here), so the
"designed masthead" read comes from a matching top rule above the
eyebrow and bottom rule below the deck, a small angular marker, and the
larger title/subtitle type scale, rather than one drawn box. */
.edfm-eyebrow {
display: block;
margin: 0.2em 0 0.15em 0;
padding: 0;
border: 0;
font-family: var( --edfm-sans );
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --edfm-text-dim );
}
.edfm-eyebrow::before {
content: none;
}
.edfm-eyebrow .edfm-orange-mark {
color: var( --edfm-orange );
}
.edfm-deck {
color: var( --edfm-text-muted );
font-family: var( --edfm-sans );
font-size: 0.95rem;
font-style: italic;
line-height: 1.45;
max-width: none;
margin: 0.25em 0 0.85em 1.4em;
padding: 0;
border: 0;
}

/* ==========================================================================
1. SIDEBAR
========================================================================== */
#mw-panel {
background: transparent;
box-sizing: border-box;
width: var( --edfm-sidebar-width );
padding: 0 0.65rem 1.35rem 0.65rem;
border-right: 0;
box-shadow: none;
z-index: 3;
}
/* Logo anchors the sidebar visually. Keep raster logo artwork contained in
Vector legacy's fixed sidebar slot rather than letting the image render at
its intrinsic PNG size and clip against the rail. */
#p-logo {
box-sizing: border-box;
width: auto;
height: 10rem;
margin: 0 -0.65rem 0.65rem -0.65rem;
padding: 0.5rem 0.55rem 0.45rem 0.55rem;
border-bottom: 0 !important;
background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% );
overflow: hidden;
}
#p-logo a.mw-wiki-logo {
box-sizing: border-box;
display: block;
width: 100% !important;
height: 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
/* Each nav group gets real breathing room from the one before it instead
of being packed together like a stock wiki sidebar. */

#mw-panel .portal,
#mw-panel .vector-menu-portal {
box-sizing: border-box;
width: auto;
max-width: none;
margin-top: 1.45rem;
}
#mw-panel .portal:first-of-type,
#mw-panel .vector-menu-portal:first-of-type {
margin-top: 0;
}
#mw-panel .portal .body,
#mw-panel .portal ul,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list {
box-sizing: border-box;
width: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
border-color: var( --edfm-border-soft );
}
#mw-panel .portal a {
color: var( --edfm-text-muted );
display: block;
font-size: var( --edfm-fs-sidebar );
line-height: 1.35;
padding: 0.42em 0.55em;
margin: 0.08em -0.35em;
border-left: 2px solid transparent;
border-radius: 2px;
}
#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). */
.edfm-nav-current > a {
color: var( --edfm-orange ) !important;
font-weight: 700;
border-left-color: var( --edfm-orange );
border-left-width: 3px;
background: var( --edfm-surface-2 );
box-shadow: inset 0 0 0 1px rgba( 255, 138, 0, 0.08 );
}
.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: var( --edfm-fs-utility );
border-left: 2px solid var( --edfm-orange );
padding-left: 0.5em;
margin-left: -0.5em;
margin-bottom: 0.4em;
}

/* ==========================================================================
3. TOP BAR -- two-tier chrome
========================================================================== */
/* Vector legacy's #mw-head naturally has ~2.5em of empty space above the
tabs row (core: `#left-navigation/#right-navigation { margin-top:2.5em }`),
originally reserved just for #p-personal to float in. Painting that same
box with a background gradient that stays transparent for that top
band and then switches to a surface colour for the tabs band creates a
real two-tier read -- "primary chrome" (personal tools/search, over the
page's own background) above "wiki authoring controls" (the tabs, on
their own distinct strip) below -- without touching #mw-head's own
position/width mechanics, which is the same fragile absolute-position
system the very first pass of this project had to debug carefully to
get the persistent sidebar working at all. Not worth re-risking that
for a background change. */
#mw-head {
background-image: linear-gradient(
to bottom,
transparent 0,
transparent 2.35em,
var( --edfm-surface-2 ) 2.35em,
var( --edfm-surface-2 ) 100%
);
border-bottom: 1px solid var( --edfm-border );
}
#mw-page-base {
background-color: var( --edfm-bg-deep );
background-image: none;
}
#mw-head-base {
background-color: var( --edfm-bg-deep );
/* Polish pass: thinned from 2px -- at 2px this competed visually with
the masthead's own orange marker/rule directly below it; a single
thinner accent line still reads as "site identity colour" without
the repetition. */
border-bottom: 1px solid var( --edfm-orange );
}
/* Personal tools (login/logout) and the search box are the "primary
chrome" tier -- pulled in by the same gutter used to centre the article,
so on wide screens they visually line up with the centred column
instead of hugging the browser edge, and given noticeably more visual
weight than the tabs below them. */
#p-personal {
right: calc( 0.75em + var( --edfm-gutter ) );
display: flex;
align-items: center;
gap: 0.75rem;
}
#p-personal ul {
display: flex;
align-items: center;
gap: 0.55rem;
}
#p-personal li {
margin-left: 0;
}
#p-personal a {
color: var( --edfm-text-muted );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.3em 0.2em;
}
#p-personal a:hover {
color: var( --edfm-orange );
}
/* Echo's alert/notification icons (bell/tray) in the personal toolbar.
Confirmed by rendering the actual logged-in markup server-side: in
legacy Vector these links get merged straight into the plain personal
tools menu (SkinVectorLegacy::runOnSkinTemplateNavigationHooks) rather
than going through Vector's own `.vector-icon` icon system (that only
wraps items in the views/associated-pages menus). The icon is instead a
`background-image` on the <a> itself, from OOUI's generated
`.oo-ui-icon-bell` / `-tray` / `-bellOutline` classes -- a flat black SVG
baked straight into the image URL, so it's not recolourable via
`background-color` the way the search icon was; this is exactly the
"dark OOUI icon invisible on our dark theme" problem the invert fix
below already solves elsewhere, so reuse that same technique here
instead of a different one. The unread-count badge itself already
colours correctly on its own (Echo maps it to
`@background-color-destructive` / `-progressive`, both redefined to
EDFM's palette) and, being a mostly-saturated colour rather than
black/white/grey, survives this filter close to unchanged. */
#pt-notifications-alert .oo-ui-icon-bell,
#pt-notifications-notice .oo-ui-icon-tray,
#pt-notifications .oo-ui-icon-bellOutline {
filter: invert( 1 ) hue-rotate( 180deg );
}
.edfm-topbar-clocks {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
line-height: 1;
white-space: nowrap;
}
.edfm-topbar-clock {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.55em;
background: rgba( 66, 199, 217, 0.08 );
border: 1px solid var( --edfm-border-soft );
border-left: 2px solid var( --edfm-cyan );
color: var( --edfm-text );
}
.edfm-topbar-clock-label {
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edfm-topbar-clock time {
color: var( --edfm-cyan );
font-weight: 700;
}
.edfm-topbar-clock-local {
background: rgba( 255, 138, 0, 0.06 );
border-left-color: var( --edfm-orange );
}
.edfm-topbar-clock-local time {
color: var( --edfm-orange-bright );
}
#right-navigation {
margin-right: var( --edfm-gutter );
}
#left-navigation {
margin-left: var( --edfm-sidebar-clear );
}
/* Polish pass: core caps this at `width:20vw; max-width:20em`, which read
as cramped next to the rest of the (now larger-scale) interface --
given more room on desktop, still capped so it can't dominate the bar. */
.vector-search-box-inner {
width: 22vw;
max-width: 24em;
}
.vector-search-box-inner input,
#searchInput {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
border: 1px solid var( --edfm-border );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.5em 0.7em;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#searchInput:focus {
border-color: var( --edfm-cyan );
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.22 );
outline: none;
}
#searchInput::placeholder {
color: var( --edfm-text-dim );
}
/* Search submit control: neither rendering path gives this any color of
its own, so on our dark input background it was effectively invisible.
The no-JS legacy form's <button> is a plain black icon at 0.67 opacity
(core skins.vector.styles.legacy/components/SearchBox.less); the
JS/Vue-Codex widget (.vector-search-box-vue) has no separate button at
all, just a start icon inside the input using the same technique
(mask-image recoloured via `background-color`, see Codex's
CdxSearchInput.css). Recolour both to match the site's orange
progressive-action colour used everywhere else. */
.vector-search-box-vue .cdx-text-input__start-icon {
background-color: var( --edfm-orange );
opacity: 1;
}
.searchButton[ name='go' ] {
background-image: none;
background-color: var( --edfm-orange );
opacity: 0.85;
-webkit-mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
}
.searchButton[ name='go' ]:hover,
.searchButton[ name='go' ]:focus {
background-color: var( --edfm-orange-bright );
opacity: 1;
}
/* 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.

These are the "wiki authoring controls" utility tier -- deliberately
smaller (--edfm-fs-utility) and quieter than personal-tools/search
above them, sitting on their own background strip (see #mw-head above).
Selected state stays orange (it's still real navigation, just
secondary); unselected rests dim so the *selected* tab is the one that
reads clearly. */
.vector-menu-tabs-legacy li {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs-legacy li.selected {
background-image: none;
background-color: var( --edfm-surface-1 );
/* Polish pass: a small underline makes the selected tab unambiguous at
a glance instead of relying on the text colour change alone. */
box-shadow: inset 0 -2px 0 var( --edfm-orange );
}
.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 );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 700;
}
.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. */
.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;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var( --edfm-fs-utility );
font-weight: 700;
}
.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-3 );
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 );
font-size: var( --edfm-fs-sidebar );
}
.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-4 );
}

/* Front-page chrome: the hero already names the site, so suppress the
generated MediaWiki page title only on the Main Page. Keep the namespace
tab label and all other article titles intact. */
body.page-Main_Page #firstHeading {
display: none;
}
body.page-Main_Page .mw-body-content {
margin-top: 0;
}

/* ==========================================================================
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 );
}
.mw-body {
border-right: 1px solid var( --edfm-border );
}
#content {
background-color: var( --edfm-surface-1 );
}

/* Site notice chrome. The global disclaimer was moved to its dedicated
legal/disclaimer page, so an empty #siteNotice must not leave behind a
phantom divider at the top of the article surface. */
#siteNotice:empty {
display: none;
}
#siteNotice:not( :empty ) {
font-size: var( --edfm-fs-meta );
line-height: 1.5;
color: var( --edfm-text-dim );
font-style: normal;
padding-bottom: 0.7em;
margin-bottom: 1.4rem;
border-bottom: 1px solid var( --edfm-border-soft );
}
#siteNotice:not( :empty ) em, #siteNotice:not( :empty ) i {
color: var( --edfm-text-muted );
font-style: italic;
}
#siteNotice:not( :empty ) a {
color: var( --edfm-link-external );
}
#siteNotice a:hover {
color: var( --edfm-link-external-hover );
}

/* ==========================================================================
HOME PAGE DASHBOARD
========================================================================== */
.edfm-home-hero {
margin: 0.9rem 0 1.6rem;
padding: 1.35rem 1.55rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.16 ), transparent 34% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.14 ), transparent 42% ),
var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 4px solid var( --edfm-cyan );
clip-path: polygon( 0 0, calc( 100% - 12px ) 0, 100% 12px, 100% 100%, 0 100% );
}
.edfm-home-hero-kicker,
.edfm-home-card-kicker {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.edfm-home-hero-title {
margin-top: 0.25rem;
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: clamp( 1.55rem, 1.1rem + 1.5vw, 2.2rem );
font-weight: 800;
line-height: 1.15;
}
.edfm-home-hero-text {
max-width: none;
margin-top: 0.55rem;
color: var( --edfm-text-muted );
font-size: 1.05rem;
line-height: 1.55;
}
.edfm-home-grid {
display: grid;
gap: 1rem;
margin: 1.2rem 0 2rem;
}
.edfm-home-grid-four {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.edfm-home-grid-topics {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-grid-two {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-card {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
padding: 1rem 1.1rem;
box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.2 );
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-home-card:hover {
transform: translateY( -2px );
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-orange );
}
.edfm-home-card-primary {
border-left-color: var( --edfm-orange );
}
.edfm-home-card-warning {
border-left-color: var( --edfm-text-dim );
}
.edfm-home-card-title,
.edfm-home-card-title a {
margin-top: 0.35rem;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.edfm-home-card-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-home-card-text,
.edfm-home-link-list {
margin-top: 0.65rem;
color: var( --edfm-text-muted );
line-height: 1.6;
}
.edfm-home-link-list a {
font-weight: 600;
}
@media ( max-width: 1100px ) {
.edfm-home-grid-four {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( max-width: 760px ) {
.edfm-home-grid-four,
.edfm-home-grid-topics,
.edfm-home-grid-two {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
HOME PAGE NEWS MODULE
========================================================================== */
.edfm-home-news {
margin: 1.8rem 0 2.2rem;
}
.edfm-news-feature-grid {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 1rem;
margin-bottom: 1rem;
}
.edfm-news-card,
.edfm-news-list {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
box-shadow: 0 14px 26px rgba( 0, 0, 0, 0.22 );
overflow: hidden;
}
.edfm-news-card {
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-news-card:hover {
transform: translateY( -2px );
border-color: rgba( 255, 138, 0, 0.48 );
background: var( --edfm-surface-3 );
}
.edfm-news-card-art {
display: flex;
align-items: flex-end;
min-height: 7rem;
padding: 0.8rem 1rem;
box-sizing: border-box;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.28 ), transparent 42% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.2 ), transparent 48% ),
linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-1 ) );
border-bottom: 1px solid var( --edfm-border );
color: rgba( 237, 240, 242, 0.72 );
font-family: var( --edfm-mono );
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.edfm-news-card-primary .edfm-news-card-art {
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.38 ), transparent 46% ),
linear-gradient( 315deg, rgba( 79, 159, 232, 0.26 ), transparent 52% ),
var( --edfm-surface-4 );
}
.edfm-news-card-body {
padding: 1rem 1.15rem 1.15rem;
}
.edfm-news-meta {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.edfm-news-title,
.edfm-news-title a {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.edfm-news-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-news-summary {
color: var( --edfm-text-muted );
line-height: 1.55;
margin-top: 0.65rem;
}
.edfm-news-list {
padding: 1.1rem 1.25rem 1.2rem;
border-left: 4px solid var( --edfm-orange );
}
.edfm-news-list-heading {
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.edfm-news-list ul {
margin: 0;
}
.edfm-news-list li {
margin-bottom: 0.55rem;
color: var( --edfm-text-muted );
}
.edfm-news-more {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px solid var( --edfm-border-soft );
text-align: right;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
@media ( max-width: 900px ) {
.edfm-news-feature-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
10. JUMP NAVIGATION (table of contents)
========================================================================== */
/* A compact navigation strip/tile-grid rather than a traditional TOC box
of small text links -- real MediaWiki anchors/markup untouched, this is
all presentation. "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 {
display: block;
width: 100%;
box-sizing: border-box;
background: none;
border: none;
color: var( --edfm-text );
padding: 0;
margin: 1.8rem 0;
}
.toctitle {
position: relative;
margin-bottom: 0.7em;
}
.toctitle::before {
content: 'Jump to';
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-orange );
}
/* Core ships `.toc h2 { font-size: 100%; ... }` (mediawiki.skinning/toc/
screen.less) at the exact same specificity (one class + one tag) as a
plain `.toctitle h2` rule -- same "tie that doesn't resolve the way
naive source order would suggest" gotcha documented elsewhere in this
file. #toc's own ID makes this one unambiguous instead of relying on
cascade order. */
#toc .toctitle h2,
.toc .toctitle h2 {
font-size: 0 !important;
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 );
}
/* Desktop: a balanced multi-column jump list. CSS grid flows row-first,
which makes numbered sections read 1, 2, 3, 4 across the first row. For a
reference/walkthrough TOC, scan order is clearer when each column reads
downward first: 1/2/3, then 4/5/6, then 7/8/9. CSS columns preserve the
real DOM/source order while presenting that column-major layout on every
page that uses the stock MediaWiki TOC. */
.toc > ul {
display: block;
column-count: 3;
column-gap: 0.45rem;
list-style: none;
margin: 0;
padding: 0;
}
.toc > ul > li {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 0.45rem;
}
.toc li {
margin-top: 0;
}
/* 2026-08-08 density pass: reverted to side-by-side number/label (from the
earlier "stacked number-above-label" polish pass) specifically to cut
per-tile height -- with 12 sections on articles like The Dweller, the
stacked layout meant the jump nav alone filled most of the first
viewport. Row layout plus tighter padding/font-size gets noticeably
more sections above the fold without dropping the numbering or shrinking
tap targets below a comfortable size -- see the dedicated mobile padding
bump further down for keeping touch targets safe on small screens
specifically. Whole tile stays one real <a>, so it's still a single
click/focus target and keyboard tab stop either way. */
.toc a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
height: 100%;
box-sizing: border-box;
padding: 0.5em 0.75em 0.5em 0.7em;
background: var( --edfm-surface-3 );
/* Left accent rail: matches the orange section numbers and gives each
jump tile a stronger EDFM navigation affordance without boxing the
entire card. */
border-left: 4px solid var( --edfm-orange );
box-shadow: inset 1px 0 0 rgba( 255, 162, 26, 0.35 );
color: var( --edfm-text-muted );
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.toc a:hover {
background: var( --edfm-surface-4 );
border-left-color: var( --edfm-cyan );
box-shadow: inset 1px 0 0 rgba( 66, 199, 217, 0.45 );
color: var( --edfm-text );
transform: translateY( -1px );
}
/* Nested sub-levels (rare on this site so far) drop back to a plain
indented block list inside their parent tile's grid cell rather than
trying to stay gridded themselves. */
.toc ul ul {
grid-column: unset;
list-style: none;
margin: 0.3em 0 0 1.2em;
padding: 0;
display: block;
}
.toc ul ul a {
flex-direction: row;
align-items: center;
background: none;
border-left-width: 1px;
padding: 0.3em 0.6em;
}
.toc ul ul .tocnumber {
font-size: 0.85em;
}
.toc ul ul .toctext {
font-size: 0.85em;
}
.tocnumber {
color: var( --edfm-orange );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: 1.05rem;
line-height: 1;
}
.toctext {
color: inherit;
font-size: 0.85rem;
line-height: 1.3;
}
/* Column count changes only at readable/touch-friendly breakpoints. Keep
column-major ordering at 3 and 2 columns; mobile becomes the natural single
source-order list. */
@media ( max-width: 860px ) {
.toc > ul {
column-count: 2;
}
}
@media ( max-width: 560px ) {
.toc > ul {
column-count: 1;
}
/* Single-column tiles are already full-width here, so there's no
density pressure left -- restore closer to the pre-2026-08-08
padding instead of the tighter desktop value, keeping tap targets
comfortable rather than compacting mobile just because desktop
compacted. */
.toc a {
padding: 0.7em 0.95em;
}
}

/* ==========================================================================
5b. FULL-WIDTH ARTICLE FLOW OVERRIDES
========================================================================== */
/* 2026-08-10 audit: EDFM pages should not leave half the article rail empty.
Earlier readability caps on paragraphs/hero copy made long-form sections
look like narrow blocks while tables, TOCs, and navigation tiles spanned
the page. Keep the main rail full-width everywhere; individual components
may still opt into their own internal grids, but ordinary article copy and
common block containers should stretch to the content edge. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > div:not( .thumb ):not( .tright ):not( .tleft ):not( .floatright ):not( .floatleft ):not( .edfm-status ):not( .edfm-panel ):not( .edfm-box ) {
max-width: none;
box-sizing: border-box;
}
/* Final guard against stale/skin rules recapping article prose while leaving
compact maintenance/status panels free to keep their intentional centred width. */
.mw-body .mw-parser-output > p,
.mw-parser-output > p {
max-width: none !important;
width: 100%;
box-sizing: border-box;
}

/* ==========================================================================
6. PANELS / CALLOUTS, and 11. ARTICLE METADATA / STATUS MODULE
========================================================================== */
/* Deliberately NOT defined here. .edfm-box / .edfm-panel* / .edfm-status* /
.edfm-inline-flag / .edfm-related* are used exclusively by the
editorial templates (see Template:Article status, Template:Draft
warning, Template:Related articles, 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 );
font-size: var( --edfm-fs-body );
}
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: var( --edfm-fs-meta );
text-align: left;
padding: 0.6em 0.8em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
/* 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 );
}

/* mw-json content model (Module:Data/* pages, e.g. Module:Data/Engineers/*)
-- MediaWiki core's JSON page view (resources/src/mediawiki.content.json.less)
styles itself from Codex design tokens, which this site's dark theme never
touches, so these tables rendered in MediaWiki's stock light colours
against every other dark surface on the site. Recoloured to match the
table.wikitable treatment above instead of inventing a new look. */
table.mw-json {
background-color: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: var( --edfm-fs-body );
}
table.mw-json tr {
background-color: var( --edfm-surface-2 );
}
table.mw-json th,
table.mw-json td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
table.mw-json th {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: var( --edfm-fs-meta );
text-align: left;
}
.mw-json-value,
.mw-json-single-value {
background-color: transparent;
color: var( --edfm-text );
}
.mw-json-empty {
background-color: transparent;
color: var( --edfm-text-dim );
}

/* ==========================================================================
15. FOOTER
========================================================================== */
/* A real branded footer: a small wordmark line (pure CSS generated
content -- decorative branding only, redundant with the sidebar logo
already visible, so nothing load-bearing depends on it being
selectable), a top rule with more separation from the article above it,
and MediaWiki's real info/places/icon links laid out on a clean grid
with the badges aligned as a group rather than floating alone. */
.mw-footer {
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
margin-top: 2.5rem;
padding-top: 1.6rem;
border-top: 1px solid var( --edfm-border );
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "brand brand" "info icons" "places icons";
align-items: center;
column-gap: 2em;
row-gap: 0.4rem;
}
.mw-footer::before {
grid-area: brand;
content: 'EDFM // Elite Dangerous Field Manual';
font-family: var( --edfm-mono );
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var( --edfm-text-muted );
margin-bottom: 0.5rem;
}
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
color: var( --edfm-text-dim );
border-color: var( --edfm-border-soft );
font-size: var( --edfm-fs-meta );
}
#footer-info {
grid-area: info;
margin: 0;
line-height: 1.6;
}
#footer-places {
grid-area: places;
margin: 0;
}
/* Same "small uppercase label" treatment used for tags/meta text
elsewhere, so these read as deliberate EDFM navigation rather than
default MediaWiki footer links. */
#footer-places li {
display: inline-block;
margin-right: 1.4em;
}
#footer-places a {
font-family: var( --edfm-mono );
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.78rem;
}
/* A left rule ties the badges to the rest of the footer instead of
letting them read as detached/floating in their own space. */
#footer-icons {
grid-area: icons;
align-self: center;
display: flex;
gap: 0.75em;
margin: 0;
padding-left: 1.6em;
border-left: 1px solid var( --edfm-border-soft );
}
#footer-icons img {
background: var( --edfm-text );
border-radius: 2px;
}
@media ( max-width: 640px ) {
.mw-footer {
grid-template-columns: 1fr;
grid-template-areas: "brand" "info" "places" "icons";
}
#footer-icons {
margin-top: 0.7em;
padding-left: 0;
border-left: none;
border-top: 1px solid var( --edfm-border-soft );
padding-top: 0.7em;
}
}

/* ==========================================================================
MISC MediaWiki UI chrome that ships with light backgrounds by default
========================================================================== */
.catlinks {
background: none !important;
border: none !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-meta );
padding: 0.9em 0 0 0 !important;
margin-top: 1.8rem !important;
}
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 {
position: relative;
z-index: 2;
float: right;
clear: right;
width: 350px;
max-width: min( 350px, 42% );
margin: 0 0 1.25em 1.35em;
border: 1px solid var( --edfm-border );
border-top: 2px solid var( --edfm-orange );
background: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: 0.92rem;
}
.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.5em 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-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
border: 1px dashed var( --edfm-border );
background: var( --edfm-surface-1 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility );
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 0.5em;
}
/* Optional section label (Template:Infobox's |groupN=) splitting a long
infobox into scannable groups, e.g. Engineer infoboxes into "ENGINEER"
and "ACCESS" (2026-08-08, part of the Engineer article layout pass). A
shaded band with a bottom rule rather than a full boxed sub-header --
consistent with .edfm-infobox-row's own bottom-rule-only separator, not
a new visual language. */
.edfm-infobox-group {
background: var( --edfm-surface-3 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35em 0.7em;
border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-row {
display: flex;
border-bottom: 1px solid var( --edfm-border-soft );
padding: 0.45em 0.7em;
}
.edfm-infobox-row:last-child {
border-bottom: none;
}
.edfm-infobox-label {
font-weight: 700;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
width: 40%;
flex-shrink: 0;
color: var( --edfm-cyan );
}
.edfm-infobox-value {
width: 60%;
}
@media ( max-width: 640px ) {
.edfm-infobox {
float: none;
width: auto;
max-width: none;
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::before {
display: none;
}
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;
background-image: none;
background-color: var( --edfm-surface-2 );
}
#left-navigation,
#right-navigation {
float: none;
margin: 0 !important;
width: auto;
clear: both;
}
#left-navigation {
margin-top: 0 !important;
}
/* Core Vector legacy floats each tab/dropdown portlet
(.vector-menu-tabs-legacy for Page/Discussion and Read/View
source/View history, .vector-menu-dropdown for the More menu) AND
floats every <li> inside their <ul>, with no wrapping at all -- at
narrow widths the labels just overflow and overlap each other
(confirmed with a real screenshot: "View source" and "More"
overlapped instead of wrapping to a new line). Switching the
portlets to inline-block and their tab lists to flex-wrap lets them
reflow onto as many rows as needed instead. */
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-dropdown {
float: none;
display: inline-block;
vertical-align: top;
}
.vector-menu-tabs-legacy ul {
float: none;
display: flex;
flex-wrap: wrap;
}
.vector-menu-tabs-legacy li {
float: none;
}
#p-personal {
position: static;
text-align: right;
padding: 0.5em 1em;
margin: 0;
right: auto !important;
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;
background: var( --edfm-bg-deep );
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 !important;
margin-right: 0 !important;
max-width: none;
}
.mw-body {
margin-top: 0;
border-width: 0;
padding: 1em;
}
.edfm-status-details {
grid-template-columns: 1fr;
}
/* .toc > ul column count is NOT overridden here -- the dedicated
1150px/560px breakpoints above already cover every width down to
the smallest phones; duplicating a rule here previously fought
those (same specificity, this position in the cascade would have
won and wrongly forced 1 column as low as 561px). */
#firstHeading {
font-size: 1.6rem;
}
.mw-body h2 {
margin-top: 2.25rem;
}
.edfm-eyebrow {
padding-top: 0.9em;
}
}
/* ==========================================================================
16. OOUI DIALOGS -- VisualEditor's save dialog, and any other OOUI
dialog (delete/move/protect confirmations, special-page dialogs).
These render via OOUI's own bundled WikimediaUI theme stylesheet,
entirely outside the .edfm-* component system this file otherwise
covers, so without this they show up starkly white against the rest of
the dark-themed site regardless of any variable/token used elsewhere in
this file. !important is justified the same way as the h1-h6 fix above:
OOUI's own stylesheet loads with equal-or-higher effective specificity,
and this is a correctness/contrast fix, not decoration.
========================================================================== */
.oo-ui-window-frame {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-processDialog {
background: rgba( 7, 9, 11, 0.75 ) !important;
}
.oo-ui-processDialog-navigation,
.oo-ui-window-head,
.oo-ui-window-foot {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-processDialog-title,
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-inputWidget-input {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* VisualEditor's reference dialog embeds a mini target widget for the
reference body. The widget ships with a white WikimediaUI base surface,
so theme that inner editing box separately from the surrounding OOUI
dialog chrome. */
.ve-ui-mwReferenceDialog .ve-ui-targetWidget,
.ve-ui-mwReferenceDialog .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ),
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget,
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-surface,
.ve-ui-mwReferenceDialog .ve-ce-surface,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode,
.ve-ui-mwReferenceDialog .ve-ce-documentNode,
.ve-ui-mwReferenceDialog .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode p,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode li,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode span {
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-targetWidget-focused {
border-color: var( --edfm-cyan ) !important;
box-shadow: inset 0 0 0 1px rgba( 77, 199, 232, 0.42 ) !important;
}
.ve-ui-mwSaveDialog-options,
.oo-ui-panelLayout,
.oo-ui-window-body {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-popupWidget-popup {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-buttonElement:not( .oo-ui-flaggedElement-primary ) > .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
17. OOUI TOOLBAR -- VisualEditor's persistent editing toolbar and its
dropdown menus (Cite, Insert, paragraph style, etc.), and the equivalent
toolbar/popups used when editing a single section. Same root cause as
16. OOUI DIALOGS above (OOUI's own bundled theme, not touched by
anything else in this file), found separately because it's a different
set of OOUI classes (toolbar chrome, not dialog chrome). Icons are not
overridden here and don't need to be -- they're currentColor-based, so
they pick up the text colour set below automatically.
========================================================================== */
.oo-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-tool-title,
.oo-ui-tool-link,
.oo-ui-toolGroup-tools .oo-ui-optionWidget,
.oo-ui-menuOptionWidget,
.oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-optionWidget.oo-ui-optionWidget-selected,
.oo-ui-optionWidget:hover,
.oo-ui-tool:hover .oo-ui-tool-link {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
18. OOUI GENERIC MENUS -- .oo-ui-menuSelectWidget is OOUI's general
dropdown/autocomplete menu class (paragraph-style picker, citation-type
picker, link/media search suggestions, etc.) -- a different class from
the toolbar-specific popups in 17. above, confirmed separately via
computed-style inspection to default to the same white OOUI theme
background.
========================================================================== */
.oo-ui-menuSelectWidget {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-menuOptionWidget {
color: var( --edfm-text ) !important;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget:hover {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
19. OOUI ICONS -- the toolbar/menu icons themselves (Bold, link, list,
Cite, undo/redo, etc.) are rendered as background-image SVGs with a
colour baked into the SVG markup, not currentColor-based masks -- so
16-18 above (which only recolour backgrounds/text) left them dark and
low-contrast against the now-dark surfaces. OOUI ships its own fix for
exactly this, gated behind a narrow accessibility media query
(forced-colors + prefers-color-scheme: dark) that doesn't apply to this
site's own always-on dark theme -- reusing that exact technique
unconditionally rather than inventing a different one. `:not(
.oo-ui-image-invert )` is OOUI's own exclusion for icons already meant
to render light (e.g. on the orange primary-button background) --
inverting those too would flip them back to dark.
========================================================================== */
.oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* ==========================================================================
20. EDIT SOURCE FORM -- MediaWiki core + WikiEditor + CodeMirror

The source editor is not covered by the article/component selectors above:
`action=edit` loads core edit-form CSS, WikiEditor chrome, and sometimes
CodeMirror with their own light neutral surfaces. Force the same EDFM dark
surface stack here so the source page no longer flashes as a white island.
========================================================================== */
.mw-editform,
#editform,
#toolbar,
.editOptions,
.mw-editTools,
.mw-summary-preview,
.mw-datatable,
.wikiEditor-ui,
.wikiEditor-ui-view,
.wikiEditor-ui-text,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-top,
.wikiEditor-ui-controls,
.wikiEditor-ui-tabs,
.wikiEditor-ui-buttons,
.wikiEditor-ui-left,
.wikiEditor-ui-right,
.editButtons,
.CodeMirror,
.CodeMirror-scroll {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-editform textarea,
#wpTextbox1,
#wpSummary,
#wpSummaryWidget input,
#editform input[type='text'],
#editform input[type='search'],
#editform textarea,
.wikiEditor-ui-text textarea,
.CodeMirror-code,
.CodeMirror-lines,
.CodeMirror pre {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
caret-color: var( --edfm-orange-bright );
}
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .page,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar .options,
.wikiEditor-ui-toolbar .booklet,
.wikiEditor-ui-toolbar .pages,
.CodeMirror-gutters {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text-muted ) !important;
border-color: var( --edfm-border ) !important;
}
.wikiEditor-ui-toolbar a,
.wikiEditor-ui-toolbar .label,
.wikiEditor-ui-toolbar .tab a,
.mw-editTools a,
.editOptions label,
.mw-editform label,
.CodeMirror-linenumber {
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab a:hover,
.wikiEditor-ui-toolbar .tool-button:hover,
.wikiEditor-ui-toolbar .tool-select:hover,
.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-table td,
.CodeMirror-activeline-background {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab.current a,
.wikiEditor-ui-toolbar .section-main,
.CodeMirror-selected {
background: var( --edfm-surface-4 ) !important;
}
.CodeMirror-cursor {
border-left-color: var( --edfm-orange-bright ) !important;
}
.CodeMirror-matchingbracket {
color: var( --edfm-orange-bright ) !important;
}

/* VisualEditor's standalone "Edit source" mode (.ve-ui-surface-source, set
by ve.ui.Surface when this.mode === 'source') ships its own white surface
-- unlike visual mode, which reuses normal dark article styling since
it's just contenteditable article HTML. Scoped to -source only so the
visual WYSIWYG canvas is untouched. */
.ve-ui-surface-source,
.ve-init-mw-tempWikitextEditorWidget {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-surface-source .ve-ce-surface,
.ve-ui-surface-source .ve-ce-documentNode,
.ve-ui-surface-source .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}

/* ==========================================================================
21. FILE PAGE CHROME -- #filetoc (the File / File history / File usage /
Metadata nav on File: description pages) is defined in MediaWiki core's
mediawiki.action.view.filepage.less, entirely separate from both the
.edfm-* system and the OOUI fixes in 16-19 above -- a different
subsystem again, only loaded on File: pages, which is why it was never
touched by anything else in this file. Link colour inside it already
correctly inherits the site's normal link blue; only the light neutral
background/border needed overriding.
========================================================================== */
#filetoc {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
22. FILE PAGE: METADATA TABLE + MEDIA VIEWER BUTTON -- #mw_metadata is
the EXIF-style metadata table (separate from the File history table
above -- that one already carries the .wikitable class and picked up
dark styling from 7. TABLES automatically; this one doesn't have that
class, so it never matched). The "Open in Media Viewer" button is a
Codex component (MultimediaViewer extension) -- a third distinct
styling subsystem from OOUI and MediaWiki core skinning, again never
touched by anything else in this file.
========================================================================== */
#mw_metadata th,
#mw_metadata td {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-mmv-view-expanded.cdx-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Core MediaWiki/action buttons: match EDFM dark theme instead of default white/orange controls. */
.mw-ui-button,
.mw-htmlform-submit,
.mw-htmlform-ooui-wrapper button,
#mw-patrol-form button,
#mw-patrol-form input[type="submit"],
form.mw-htmlform button,
form.mw-htmlform input[type="submit"],
input[type="submit"].mw-ui-button,
button.mw-ui-button,
.cdx-button:not( .cdx-button--fake-button--enabled ) {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border: 1px solid var( --edfm-border-strong, var( --edfm-border ) ) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var( --edfm-mono ) !important;
font-weight: 800 !important;
text-shadow: none !important;
}
.mw-ui-button:hover,
.mw-htmlform-submit:hover,
.mw-htmlform-ooui-wrapper button:hover,
#mw-patrol-form button:hover,
#mw-patrol-form input[type="submit"]:hover,
form.mw-htmlform button:hover,
form.mw-htmlform input[type="submit"]:hover,
input[type="submit"].mw-ui-button:hover,
button.mw-ui-button:hover,
.cdx-button:not( .cdx-button--fake-button--enabled ):hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-orange-bright ) !important;
border-color: var( --edfm-orange ) !important;
}
.mw-ui-button:focus,
.mw-htmlform-submit:focus,
.mw-htmlform-ooui-wrapper button:focus,
#mw-patrol-form button:focus,
#mw-patrol-form input[type="submit"]:focus,
form.mw-htmlform button:focus,
form.mw-htmlform input[type="submit"]:focus,
input[type="submit"].mw-ui-button:focus,
button.mw-ui-button:focus,
.cdx-button:not( .cdx-button--fake-button--enabled ):focus {
outline: 2px solid var( --edfm-cyan ) !important;
outline-offset: 2px !important;
}

/* Patrol action: remove the cramped review button from the public article chrome. */
#mw-patrol-form {
display: none !important;
}

/* Frontier news: after removing the repeated dispatch list, keep attribution compact. */
.edfm-news-attribution-compact {
margin-top: 0.35rem;
padding-top: 0.6rem;
}

/* ===========================================================================
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL
=========================================================================== */
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar,
large touch targets, off-canvas navigation, search-forward layout, and
single-column readable article flow -- while preserving EDFM's dark field
manual identity and not copying RuneScape.wiki assets/CSS.
The close button is injected into #mw-panel by Common.js, so it must be
explicitly hidden by default; otherwise a tiny native white button appears
in the desktop sidebar's top-left corner. */
.edfm-mobile-appbar,
.edfm-mobile-scrim,
.edfm-mobile-close-button {
display: none;
}
@media ( max-width: 800px ) {
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var( --edfm-bg-page );
overflow-x: hidden;
}
body.edfm-mobile-menu-open {
overflow: hidden;
}
.edfm-mobile-appbar {
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
position: sticky;
top: 0;
z-index: 1200;
min-height: 56px;
padding: 0 0.35rem;
background:
linear-gradient( 90deg, rgba( 255, 138, 0, 0.18 ), transparent 38% ),
var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.35 );
}
.edfm-mobile-brand {
min-width: 0;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.edfm-mobile-brand::before {
content: 'EDFM // ';
color: var( --edfm-orange );
}
.edfm-mobile-menu-button,
.edfm-mobile-search-button,
.edfm-mobile-close-button {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var( --edfm-text );
font: 700 1.5rem/1 var( --edfm-mono );
cursor: pointer;
}
.edfm-mobile-menu-button:focus-visible,
.edfm-mobile-search-button:focus-visible,
.edfm-mobile-close-button:focus-visible {
outline: 2px solid var( --edfm-cyan );
outline-offset: -4px;
}
.edfm-mobile-menu-button::before {
content: '☰';
color: var( --edfm-orange );
}
.edfm-mobile-search-button::before {
content: '⌕';
font-size: 1.85rem;
color: var( --edfm-cyan );
}
.edfm-mobile-close-button::before {
content: '×';
color: var( --edfm-text );
}
.edfm-mobile-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba( 0, 0, 0, 0.58 );
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
body.edfm-mobile-menu-open .edfm-mobile-scrim {
opacity: 1;
pointer-events: auto;
}
#mw-navigation {
background: var( --edfm-surface-2 );
box-shadow: none;
}
#mw-head {
position: relative;
z-index: 1100;
border-bottom: 1px solid var( --edfm-border );
}
#mw-head .vector-search-box {
display: none;
margin: 0;
padding: 0.65rem;
background: var( --edfm-surface-2 );
border-top: 1px solid var( --edfm-border-soft );
}
body.edfm-mobile-search-open #mw-head .vector-search-box {
display: block;
}
#mw-head .vector-search-box-inner,
#mw-head #searchform {
width: 100%;
}
#mw-head #searchInput {
min-height: 44px;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
#left-navigation,
#right-navigation {
padding: 0 0.45rem 0.35rem;
background: var( --edfm-surface-2 );
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.vector-menu-tabs-legacy ul {
flex-wrap: nowrap;
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-dropdown .vector-menu-heading {
min-height: 36px;
display: inline-flex;
align-items: center;
}
#p-personal {
display: none;
}
#mw-panel {
position: fixed;
top: 0;
left: 0;
z-index: 1300;
width: min( 82vw, 22rem );
height: 100dvh;
box-sizing: border-box;
padding: 0;
background: var( --edfm-surface-1 );
border: 0;
border-right: 1px solid var( --edfm-border );
box-shadow: 18px 0 36px rgba( 0, 0, 0, 0.45 );
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX( -105% );
transition: transform 0.2s ease;
}
body.edfm-mobile-menu-open #mw-panel {
transform: translateX( 0 );
}
#mw-panel::before {
content: 'EDFM Navigation';
display: block;
position: sticky;
top: 0;
z-index: 1;
padding: 1rem 3.4rem 1rem 1rem;
background: var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
color: var( --edfm-orange );
font: 800 0.86rem/1.2 var( --edfm-mono );
letter-spacing: 0.08em;
text-transform: uppercase;
}
#mw-panel .edfm-mobile-close-button {
position: absolute;
top: 0.3rem;
right: 0.35rem;
z-index: 2;
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin: 0;
padding: 0.75rem 0;
border-bottom: 1px solid var( --edfm-border-soft );
}
#mw-panel .vector-menu-heading {
margin: 0.25rem 1rem 0.45rem;
}
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
display: flex;
align-items: center;
min-height: 46px;
box-sizing: border-box;
padding: 0.55rem 1rem;
border-left: 3px solid transparent;
color: var( --edfm-text-muted );
font-size: 1rem;
text-decoration: none;
}
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-content-list li a:focus {
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-cyan );
color: var( --edfm-text );
}
#mw-panel .edfm-nav-current > a,
#mw-panel .edfm-nav-current > a:visited {
background: rgba( 255, 138, 0, 0.12 );
border-left-color: var( --edfm-orange );
color: var( --edfm-orange ) !important;
}
.mw-body {
padding: clamp( 1rem, 4vw, 1.35rem );
font-size: 1rem;
line-height: 1.68;
}
#siteNotice {
margin-bottom: 1rem;
padding-bottom: 0.85rem;
}
#firstHeading {
font-size: clamp( 1.65rem, 8vw, 2.25rem );
line-height: 1.1;
letter-spacing: -0.015em;
}
.mw-body h2 {
font-size: 1.18rem;
line-height: 1.25;
}
.mw-body p,
.mw-body li {
max-width: none;
}
.mw-body img,
.mw-body .thumb,
.mw-body .thumbinner,
.mw-body .thumbimage {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
.mw-body .thumb,
.mw-body .tright,
.mw-body .tleft {
float: none !important;
clear: both;
width: auto !important;
margin: 1rem 0 !important;
}
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.mw-parser-output > table.wikitable th,
.mw-parser-output > table.wikitable td,
.mw-parser-output > table.mw-datatable th,
.mw-parser-output > table.mw-datatable td {
white-space: normal;
min-width: 8rem;
}
.edfm-infobox {
font-size: 0.95rem;
}
.edfm-infobox-row {
display: grid;
grid-template-columns: minmax( 7.5rem, 40% ) 1fr;
gap: 0.5rem;
padding: 0.65rem 0.8rem;
}
.edfm-infobox-label,
.edfm-infobox-value {
width: auto;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tbody,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tr,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type {
overflow: visible;
white-space: normal;
background: transparent;
border: 0;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th {
margin-top: 0.75rem;
border-left: 3px solid var( --edfm-orange );
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
margin-bottom: 0.75rem;
background: var( --edfm-surface-2 );
border-left: 3px solid var( --edfm-border );
}
.mw-footer {
padding: 1rem;
margin-top: 1.5rem;
}
}
@media ( max-width: 430px ) {
.edfm-mobile-brand::before {
content: 'EDFM';
margin-right: 0.45rem;
}
.edfm-mobile-brand {
font-size: 0.88rem;
}
.edfm-infobox-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}

/* 22a. Mobile action tabs refinement: keep Vector's page/discussion/read/
source/history controls available, but put them on one compact horizontal
action rail so the first phone viewport feels like a real mobile app shell
instead of two stacked desktop tab bars. */
@media ( max-width: 800px ) {
body:not( .edfm-mobile-search-open ) #mw-head {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
body:not( .edfm-mobile-search-open ) #left-navigation,
body:not( .edfm-mobile-search-open ) #right-navigation {
flex: 0 0 auto;
clear: none !important;
float: none !important;
width: auto;
padding: 0 0.25rem;
margin: 0 !important;
border-right: 1px solid var( --edfm-border-soft );
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown {
float: none !important;
display: inline-block;
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a,
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a:visited,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown .vector-menu-heading {
min-height: 40px;
padding-left: 0.55rem;
padding-right: 0.55rem;
font-size: 0.68rem;
}
body.edfm-mobile-search-open #mw-head {
display: block;
}
}

/* ===========================================================================
24. HARD OVERRIDE: JUMP TILE LEFT RAIL

The earlier border-left rail can be swallowed by ResourceLoader/cascade or
visually read as part of the tile edge. Draw the rail as a high-specificity
gradient on the actual top-level TOC anchors so it is unmistakable on the
live jump grid.
=========================================================================== */
#toc.toc > ul > li > a,
.mw-parser-output #toc > ul > li > a,
.mw-parser-output .toc > ul > li > a {
background-image: linear-gradient( 90deg, var( --edfm-orange ) 0, var( --edfm-orange ) 6px, transparent 6px ) !important;
border-left: 0 !important;
padding-left: 1rem !important;
}
#toc.toc > ul > li > a:hover,
#toc.toc > ul > li > a:focus-visible,
.mw-parser-output #toc > ul > li > a:hover,
.mw-parser-output #toc > ul > li > a:focus-visible,
.mw-parser-output .toc > ul > li > a:hover,
.mw-parser-output .toc > ul > li > a:focus-visible {
background-image: linear-gradient( 90deg, var( --edfm-cyan ) 0, var( --edfm-cyan ) 6px, transparent 6px ) !important;
}

/* ===========================================================================
25. SOURCE EDIT CONFLICT / WIKITEXT DIFF THEME

Source-edit conflict review uses MediaWiki's diff table classes, not the
normal edit textarea/WikiEditor chrome. Without this, unchanged rows and
inline change pills fall back to stark white/yellow/blue defaults. Keep the
old/new meaning, but render it in EDFM's dark surfaces with restrained
orange/cyan accents.
=========================================================================== */
.mw-parser-output table.diff,
table.diff,
.diff {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-collapse: separate !important;
border-spacing: 0 0.12rem !important;
}
.diff-title,
.diff-otitle,
.diff-ntitle,
#mw-diff-otitle1,
#mw-diff-ntitle1 {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
}
td.diff-lineno,
.diff-lineno {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
border: 0 !important;
padding: 0.35rem 0.5rem !important;
}
td.diff-marker,
.diff-marker {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
padding: 0.25rem 0.45rem !important;
text-align: center;
}
td.diff-context,
td.diff-addedline,
td.diff-deletedline,
.diff-context,
.diff-addedline,
.diff-deletedline,
.mw-diff-inline-context,
.mw-diff-inline-added,
.mw-diff-inline-deleted,
.mw-diff-inline-changed,
.mw-diff-inline-moved {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
font-family: var( --edfm-mono );
box-shadow: none !important;
}
td.diff-context:empty,
td.diff-addedline:empty,
td.diff-deletedline:empty,
.diff-context:empty,
.diff-addedline:empty,
.diff-deletedline:empty {
/* Empty diff cells are alignment placeholders. Keep their card boundary so
the two-column source-conflict diff does not look broken, but make them
compact and neutral instead of tall blank blocks. */
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none !important;
min-height: 0;
padding-top: 0.08rem !important;
padding-bottom: 0.08rem !important;
}
td.diff-deletedline,
.diff-deletedline,
.mw-diff-inline-deleted {
background: rgba( 255, 138, 0, 0.08 ) !important;
border-color: rgba( 255, 138, 0, 0.6 ) !important;
border-left-color: var( --edfm-orange ) !important;
}
td.diff-addedline,
.diff-addedline,
.mw-diff-inline-added {
background: rgba( 66, 199, 217, 0.08 ) !important;
border-color: rgba( 66, 199, 217, 0.6 ) !important;
border-left-color: var( --edfm-cyan ) !important;
}
.diffchange,
.diff-addedline .diffchange,
.diff-deletedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
border-radius: 3px !important;
padding: 0.08rem 0.22rem !important;
font-weight: 700;
text-decoration: none !important;
color: var( --edfm-bg-deep ) !important;
}
.diff-deletedline .diffchange,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
background: var( --edfm-orange-bright ) !important;
}
.diff-addedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins {
background: var( --edfm-cyan ) !important;
}
.mw-explainconflict,
#wpTextbox2,
textarea#wpTextbox2,
textarea.mw-textarea-oldrev {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Engineer directory portrait chips -- intentionally quiet so table rows still
read like data rows, not card/list hybrids. */
.edfm-engineer-entry {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: max-content;
}
.edfm-engineer-entry .mw-file-element {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var( --edfm-border );
background: var( --edfm-surface-0 );
box-shadow: none;
}
.edfm-engineer-entry__name {
line-height: 1.2;
}

/* Frontier official news feed image treatment */
.edfm-frontier-news .edfm-news-card-art-image {
display: block;
position: relative;
padding: 0;
/* Keep all news thumbnails uniform, including the first/primary story. */
height: 9.5rem;
min-height: 9.5rem;
aspect-ratio: 16 / 9;
background: var( --edfm-surface-4 );
overflow: hidden;
}
.edfm-frontier-news .edfm-news-card-primary .edfm-news-card-art-image {
height: 9.5rem;
min-height: 9.5rem;
}
.edfm-frontier-news .edfm-news-card-art-image > span,
.edfm-frontier-news .edfm-news-card-art-image .mw-default-size,
.edfm-frontier-news .edfm-news-card-art-image .mw-file-description {
display: block !important;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.edfm-frontier-news .edfm-news-card-art-image .mw-file-element {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transition: transform 0.2s ease, filter 0.2s ease;
}
.edfm-frontier-news .edfm-news-card:hover .edfm-news-card-art-image .mw-file-element {
filter: brightness( 1.08 ) contrast( 1.05 );
transform: scale( 1.035 );
}
.edfm-frontier-news .edfm-news-source-badge {
display: inline-flex !important;
align-items: center;
position: absolute !important;
left: 0.8rem !important;
right: auto !important;
bottom: 0.75rem !important;
z-index: 2;
max-width: calc( 100% - 1.6rem );
padding: 0.25rem 0.55rem;
background: rgba( 10, 13, 17, 0.82 );
border: 1px solid rgba( 255, 138, 0, 0.48 );
box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.34 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}

.edfm-news-attribution {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var( --edfm-border-soft );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
line-height: 1.45;
}

/* Patrol action: hide MediaWiki generated patrol footer/link from article chrome. */
.patrollink,
.patrollink[data-mw-interface],
.patrollink .cdx-button,
#mw-content-text + .patrollink,
.mw-parser-output + .patrollink {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* ===========================================================================
2026-08-10 PROSE RAIL SLEDGEHAMMER
=========================================================================== */
/* Plain article prose on EDFM is supposed to occupy the article rail. Keep this
deliberately simple and selector-separated: no comma-list dependency on
advanced :not() parsing, no TemplateStyles scoping, and both physical and
logical width properties so later/readability rules cannot re-cap lines. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > p,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ul,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ol,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > dl {
display: block !important;
width: 100% !important;
max-width: none !important;
inline-size: 100% !important;
max-inline-size: none !important;
box-sizing: border-box !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output p {
max-width: none !important;
max-inline-size: none !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output li,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output dd {
max-width: none !important;
max-inline-size: none !important;
}
/* Restore the intentional compact maintenance notice after the broad prose
override above. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-draft,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-draft {
width: auto !important;
max-width: 44rem !important;
inline-size: auto !important;
max-inline-size: 44rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
EDFM login/register auth surface template alignment
========================================================================== */
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm {
color: var( --edfm-text );
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-label__label__text {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.015em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-Userlogin #userloginForm input[type='text'],
body.mediawiki.mw-special-Userlogin #userloginForm input[type='password'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='text'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='password'] {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 );
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input::placeholder,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-help,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-password-help {
color: var( --edfm-text-muted ) !important;
font-size: 0.88rem;
line-height: 1.45;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
margin-top: 0.85rem;
padding: 0.9rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.12 ), transparent 34% ),
var( --edfm-surface-1 );
border: 1px solid rgba( 255, 138, 0, 0.42 );
border-left: 3px solid var( --edfm-orange );
box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 850;
letter-spacing: 0.04em;
line-height: 1.35;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 0;
margin: 0;
padding: 0.55rem 0.8rem;
background: rgba( 255, 138, 0, 0.1 ) !important;
border: 1px solid var( --edfm-orange ) !important;
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.035 );
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.045em;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:hover,
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:focus-visible {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange-bright ) !important;
color: #10171b !important;
text-decoration: none !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin-top: 0.2rem;
padding: 1.15rem 1.25rem;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.08 ), transparent 38% ),
var( --edfm-surface-1 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-heading {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-size: 1.35rem;
font-weight: 800;
line-height: 1.25;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list {
margin-top: 1rem;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::before {
filter: none !important;
opacity: 0.78 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 1.75rem;
font-weight: 850;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {
color: var( --edfm-text-muted ) !important;
font-size: 0.9rem;
line-height: 1.35;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text {
display: none !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit {
background: var( --edfm-surface-3 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
border-radius: 0 !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 850;
letter-spacing: 0.06em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit:hover,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
body.mediawiki.mw-special-Userlogin #mw-content-text,
body.mediawiki.mw-special-CreateAccount #mw-content-text {
padding-top: 0.55rem;
}
body.mediawiki.mw-special-Userlogin #firstHeading {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-content-text > .mw-ui-container {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm {
width: min( 100%, 34rem ) !important;
margin: 0 auto !important;
padding: 1.15rem 1.2rem 1.25rem !important;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.1 ), transparent 34% ),
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 55% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-userlogin-help {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
margin: 1.05rem auto 0 !important;
max-width: 18rem;
}
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: grid !important;
grid-template-columns: minmax( 19rem, 28rem ) minmax( 20rem, 1fr ) !important;
gap: clamp( 1.4rem, 4vw, 3rem ) !important;
align-items: stretch !important;
width: min( 100%, 76rem ) !important;
max-width: 76rem !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin: 0 !important;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.07 ), transparent 38% ),
linear-gradient( 180deg, rgba( 255, 138, 0, 0.035 ), rgba( 0, 0, 0, 0 ) 54% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm {
padding: 1.15rem 1.2rem 1.25rem !important;
border-left: 3px solid var( --edfm-orange ) !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
padding: clamp( 1.3rem, 2.2vw, 2.05rem ) !important;
border-left: 3px solid var( --edfm-cyan ) !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field {
margin-bottom: 1rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLSubmitField,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLSubmitField {
margin-bottom: 0 !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName {
border-color: rgba( 66, 199, 217, 0.45 ) !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 1px rgba( 66, 199, 217, 0.35 ), 0 0 18px rgba( 66, 199, 217, 0.14 ) !important;
}
@media ( max-width: 860px ) {
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: flex !important;
flex-direction: column !important;
width: min( 100%, 34rem ) !important;
max-width: 34rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
width: 100% !important;
}
}
/* ==========================================================================
EDFM dark thumbnail/frame treatment — 2026-08-13
Keep MediaWiki image captions from falling back to the default white frame.
========================================================================== */
.mw-parser-output .thumb {
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"],
.mw-parser-output figure.mw-halign-right,
.mw-parser-output figure.mw-halign-left,
.mw-parser-output figure.mw-halign-center {
background:
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 56% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 1px solid var( --edfm-border ) !important;
box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbimage,
.mw-parser-output .thumbinner img,
.mw-parser-output figure[typeof~="mw:File/Thumb"] img,
.mw-parser-output figure[typeof~="mw:File/Frame"] img {
background-color: var( --edfm-bg-deep ) !important;
border: 1px solid var( --edfm-border ) !important;
box-sizing: border-box !important;
}
.mw-parser-output .thumbcaption,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption {
background: var( --edfm-surface-1 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim ) !important;
font-size: var( --edfm-fs-small ) !important;
line-height: 1.42 !important;
padding: 0.42rem 0.5rem 0.5rem !important;
}
.mw-parser-output .thumbcaption a,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a {
color: var( --edfm-link ) !important;
}
.mw-parser-output .thumbcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a:hover {
color: var( --edfm-link-hover ) !important;
}
.mw-parser-output .magnify a,
.mw-parser-output .mw-file-magnify {
filter: invert( 1 ) opacity( 0.72 ) drop-shadow( 0 0 2px rgba( 66, 199, 217, 0.28 ) );
}

/* ==========================================================================
EDFM VisualEditor template dialog dark theme — 2026-08-13
Keep template editing dialogs from falling back to white/light OOUI panels.
========================================================================== */
.ve-ui-mwTransclusionDialog,
.ve-ui-mwTransclusionDialog .oo-ui-window-frame,
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .oo-ui-window-body,
.ve-ui-mwTransclusionDialog .oo-ui-window-foot,
.ve-ui-mwTransclusionDialog .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTransclusionDialog .oo-ui-pageLayout,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-content,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
background-color: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu {
background-color: var( --edfm-surface-1 ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterSelectWidget {
background-color: var( --edfm-surface-2 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-widget {
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-field .oo-ui-labelElement-label em,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-undocumentedLabel {
color: var( --edfm-text-muted ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-bg-deep ) !important;
}

/* Additional VE template-dialog color polish — disabled/apply buttons, search,
unused-toggle buttons, and parameter checkboxes. */
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
opacity: 0.82 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget .oo-ui-inputWidget-input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-inputWidget-input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span::before {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
/* EDFM VisualEditor template/infobox popup hard-dark theme — targets the actual
Edit: <template> popup chrome and body, not just article/sidebar chrome. */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active > .oo-ui-window-frame,
.oo-ui-windowManager-modal .oo-ui-processDialog-content,
.oo-ui-windowManager-modal .oo-ui-window-content,
.oo-ui-windowManager-modal .oo-ui-window-body,
.oo-ui-windowManager-modal .oo-ui-window-foot,
.ve-ui-mwTemplateDialog,
.ve-ui-mwTemplateDialog .oo-ui-panelLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-content,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTemplateDialog .oo-ui-pageLayout,
.ve-ui-mwTemplateDialog .ve-ui-mwTemplatePage,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #111b20 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-content > .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-processDialog-navigation,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #1c2a31 !important;
color: #f4f7f8 !important;
border-color: #7f9299 !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-title,
.oo-ui-windowManager-modal .oo-ui-labelElement-label,
.oo-ui-windowManager-modal .oo-ui-fieldLayout-header label,
.oo-ui-windowManager-modal .oo-ui-widget,
.ve-ui-mwTemplateDialog .oo-ui-labelElement-label,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTemplateDialog .oo-ui-fieldsetLayout-header label {
color: #f4f7f8 !important;
}
.oo-ui-windowManager-modal .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-undocumentedLabel,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .mw-widget-titleOptionWidget-description {
color: #a9bbc1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-inputWidget-input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget textarea,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget input,
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
background: #0d1519 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: #42c7d9 !important;
box-shadow: 0 0 0 2px rgba(66,199,217,.32) !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: #25353d !important;
border-color: #52646b !important;
color: #f4f7f8 !important;
box-shadow: none !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: #31454f !important;
border-color: #ff8a00 !important;
color: #ffb347 !important;
}
.oo-ui-windowManager-modal .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: #ff8a00 !important;
border-color: #ff8a00 !important;
color: #111820 !important;
font-weight: 700 !important;
}
.oo-ui-windowManager-modal .oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background: #1c2a31 !important;
border-color: #3f5159 !important;
color: #8fa1a8 !important;
opacity: 1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget:hover,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: #25353d !important;
color: #f4f7f8 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span::before {
background-color: #0d1519 !important;
border-color: #7f9299 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before {
background-color: #ff8a00 !important;
border-color: #ff8a00 !important;
}
/* EDFM cookie preferences banner */
#edfm-cookie-banner {
position: fixed;
z-index: 10000;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: flex;
justify-content: center;
pointer-events: none;
}
#edfm-cookie-banner .edfm-cookie-card {
max-width: 800px;
border: 1px solid rgba(80, 220, 240, 0.65);
background: rgba(3, 14, 22, 0.98);
box-shadow: 0 0 22px rgba(80, 220, 240, 0.22), 0 12px 36px rgba(0, 0, 0, 0.45);
color: #dffbff;
padding: 1rem;
font-size: 0.95rem;
pointer-events: auto;
}
#edfm-cookie-banner .edfm-cookie-title {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fe0ec;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-text { margin: 0 0 0.75rem; line-height: 1.45; }
#edfm-cookie-banner .edfm-cookie-categories {
display: grid;
gap: 0.65rem;
margin: 0.65rem 0 0.85rem;
}
#edfm-cookie-banner .edfm-cookie-category {
border: 1px solid rgba(127, 224, 236, 0.32);
background: rgba(7, 28, 38, 0.74);
padding: 0.7rem;
}
#edfm-cookie-banner .edfm-cookie-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-category h3 {
margin: 0;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f3feff;
}
#edfm-cookie-banner .edfm-cookie-category p {
margin: 0;
line-height: 1.42;
color: #c6e6eb;
}
#edfm-cookie-banner .edfm-cookie-status {
white-space: nowrap;
border: 1px solid rgba(255, 138, 0, 0.7);
color: #ffd69a;
background: rgba(255, 138, 0, 0.12);
padding: 0.2rem 0.48rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#edfm-cookie-banner .edfm-cookie-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-weight: 700;
color: #f3feff;
cursor: pointer;
}
#edfm-cookie-banner .edfm-cookie-switch input {
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color: #ff8a00;
}
#edfm-cookie-banner .edfm-cookie-switch input:focus-visible {
outline: 2px solid #7fe0ec;
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#edfm-cookie-banner button {
border: 1px solid rgba(127, 224, 236, 0.7);
background: rgba(9, 50, 65, 0.92);
color: #f3feff;
padding: 0.45rem 0.7rem;
cursor: pointer;
}
#edfm-cookie-banner button:hover,
#edfm-cookie-banner button:focus-visible {
background: rgba(17, 88, 108, 0.98);
outline: 2px solid rgba(127, 224, 236, 0.85);
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-links { margin-top: 0.6rem; font-size: 0.85rem; }
#edfm-cookie-banner a { color: #7fe0ec; }
@media (max-width: 600px) {
#edfm-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
#edfm-cookie-banner .edfm-cookie-card { max-height: calc(100vh - 1rem); overflow: auto; }
#edfm-cookie-banner .edfm-cookie-category-head { align-items: flex-start; }
#edfm-cookie-banner .edfm-cookie-actions button { flex: 1 1 100%; }
}

/* ==========================================================================
EDFM Vector watchstar dark-theme fix — 2026-08-16
Vector legacy renders the page watch/unwatch affordance as a small SVG
background on `#ca-watch/#ca-unwatch a::before`. On EDFM's dark tab row the
upstream light-skin URLs can be too low-contrast, and some deployments do not
expose ResourceLoader's dotted asset path directly. Use inline SVGs in the
EDFM palette so the watchstar is always visible in the top action menu.
========================================================================== */
.vector-menu-tabs #ca-watch.icon a::before,
.vector-menu-tabs-legacy #ca-watch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2310171b' stroke='%2342c7d9' stroke-width='1.35' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.42 ) );
opacity: 0.96;
}
.vector-menu-tabs #ca-unwatch.icon a::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.2' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 4px rgba( 255, 138, 0, 0.45 ) );
opacity: 0.98;
}
.vector-menu-tabs #ca-watch.icon a:hover::before,
.vector-menu-tabs #ca-watch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-watch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-watch.icon a:focus::before,
.vector-menu-tabs #ca-unwatch.icon a:hover::before,
.vector-menu-tabs #ca-unwatch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:focus::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.25' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 5px rgba( 255, 138, 0, 0.65 ) );
opacity: 1;
}

/* ==========================================================================
EDFM Special:Preferences dark theme fix — 2026-08-16
Preferences is an OOUI/Codex-heavy special page. Core styles bring in a
light tab strip and sticky submit footer, so theme the actual preferences
wrapper rather than only generic form controls.
========================================================================== */
body.mediawiki.mw-special-Preferences #preferences,
body.mediawiki.mw-special-Preferences #mw-prefs-container,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-fieldset-wrapper,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout-framed {
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed {
box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.32 );
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-menu,
body.mediawiki.mw-special-Preferences .oo-ui-menuLayout-menu {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabSelectWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget:hover,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: inset 0 -3px 0 var( --edfm-orange ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header label,
body.mediawiki.mw-special-Preferences .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .mw-prefs-title {
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-description,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-help,
body.mediawiki.mw-special-Preferences .oo-ui-inline-help,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-messages,
body.mediawiki.mw-special-Preferences .htmlform-tip,
body.mediawiki.mw-special-Preferences .mw-htmlform-help {
background: transparent !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownInputWidget select,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownWidget-handle,
body.mediawiki.mw-special-Preferences input[type='text'],
body.mediawiki.mw-special-Preferences input[type='number'],
body.mediawiki.mw-special-Preferences input[type='email'],
body.mediawiki.mw-special-Preferences textarea,
body.mediawiki.mw-special-Preferences select {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-inputWidget-input::placeholder,
body.mediawiki.mw-special-Preferences input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus,
body.mediawiki.mw-special-Preferences input:focus,
body.mediawiki.mw-special-Preferences textarea:focus,
body.mediawiki.mw-special-Preferences select:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox'] {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox']:checked {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
accent-color: var( --edfm-orange );
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit,
body.mediawiki.mw-special-Preferences button,
body.mediawiki.mw-special-Preferences input[type='submit'] {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit:hover,
body.mediawiki.mw-special-Preferences button:hover,
body.mediawiki.mw-special-Preferences input[type='submit']:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
body.mediawiki.mw-special-Preferences #preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .oo-ui-window-foot .mw-htmlform-submit-buttons {
background: rgba( 16, 23, 27, 0.96 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
box-shadow: 0 -10px 24px rgba( 0, 0, 0, 0.34 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-search-highlight,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
background: rgba( 66, 199, 217, 0.18 ) !important;
outline-color: rgba( 66, 199, 217, 0.32 ) !important;
color: var( --edfm-text ) !important;
}

/* Special:ChangeContentModel's "New content model" dropdown otherwise only
gets the generic .oo-ui-inputWidget-input treatment (surface-1, no focus
ring) -- match it to the same OOUI dropdown treatment used on
Special:Preferences above (deeper background, inset hairline, cyan focus
ring) instead of leaving it one shade lighter than the template. */
body.mediawiki.mw-special-ChangeContentModel #mw-input-model {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-ChangeContentModel #mw-input-model:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}

MediaWiki:Common.css

2026-08-19T21:03:38Z

EDFM Site Maintenance: Fix infobox stacking bug: floated .edfm-infobox was losing pointer events to overlapping in-flow list items in the final row

/* ==========================================================================
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).

2026-08-07 SECOND PASS: the first redesign pass was judged too close to
stock MediaWiki with a colour change -- this pass changes the actual
visual composition (centred workspace instead of a huge dead gutter,
a two-tier header, a real masthead, a tile-grid TOC, a restructured
status module, larger deliberate type scale, depth via surface
elevation instead of borders-around-everything) while reusing every
working mechanism from the first pass rather than throwing it away --
the tab/:visited fix, the external-link specificity fix, the mobile
reorder fix, and focus-visible/reduced-motion are all still here,
unchanged in mechanism.
========================================================================== */

/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* Depth system: site (outermost, visible in the sidebar/header/gutters)
-> article surface -> component surfaces, each a deliberate step
brighter so the page reads as having actual depth rather than "one
background colour with slightly lighter boxes everywhere". */
--edfm-bg-deep: #07090b;
--edfm-bg-page: #0a0e11;
--edfm-surface-1: #10171b;
--edfm-surface-2: #161f24;
--edfm-surface-3: #1c272d;
--edfm-surface-4: #233037;

--edfm-border: #26333b;
--edfm-border-soft: rgba( 255, 255, 255, 0.06 );

--edfm-text: #edf0f2;
--edfm-text-muted: #98a5ad;
--edfm-text-dim: #6c7a82;

/* 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 */
--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 );
--edfm-status-positive-bg: rgba( 66, 199, 217, 0.12 );
--edfm-status-attention-bg: rgba( 255, 138, 0, 0.12 );
--edfm-status-neutral-bg: rgba( 108, 122, 130, 0.12 );

/* Typography -- explicit desktop scale (2026-08-07 pass 2). Sized in
rem against the root's real 16px (Vector legacy's own
@font-size-root is 100%, i.e. browser default -- confirmed by
reading skins.vector.styles.legacy/variables.less, not assumed)
rather than nested em, specifically so component sizes can't
compound smaller than intended inside whatever ambient size an
ancestor happens to set. */
--edfm-fs-title: clamp( 1.9rem, 1.4rem + 2vw, 2.25rem ); /* ~30-36px */
--edfm-fs-h2: 1.35rem; /* ~21.6px */
--edfm-fs-h3: 1.15rem; /* ~18.4px */
--edfm-fs-body: 1rem; /* 16px */
--edfm-fs-resource-name: 1.1rem; /* ~17.6px */
--edfm-fs-meta: 0.8rem; /* ~12.8px */
--edfm-fs-sidebar: 0.9375rem; /* 15px -- polish pass: +1px for readability */
--edfm-fs-utility: 0.72rem; /* ~11.5px */

--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 );

/* Geometry / layout */
--edfm-corner: 10px;
/* Full-width article workspace: keep the fixed Vector sidebar clear,
but let the article surface use the entire remaining viewport. */
--edfm-sidebar-width: 12.75rem;
--edfm-sidebar-clear: 12.75rem;
--edfm-content-max: calc( 100vw - var( --edfm-sidebar-clear ) );
--edfm-gutter: 0px;
}

/* ==========================================================================
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 );
font-size: var( --edfm-fs-body );
}
/* Background treatment: a faint technical grid plus a very soft radial
glow centred behind the (now centred) content column, so the composition
still has quiet visual interest in the gutters on ultrawide screens
instead of just flat colour -- both stay under ~3% opacity, this is
texture, not a HUD. Not image assets; pure CSS gradients. */
body {
background-image:
radial-gradient( ellipse 1400px 900px at 50% 0%, rgba( 66, 199, 217, 0.05 ), transparent 60% ),
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: auto, 48px 48px, 48px 48px;
background-repeat: no-repeat, repeat, repeat;
background-attachment: fixed, scroll, scroll;
}
/* Full-height sidebar rail: mirrors the RuneScape.wiki behavior where the
left rail has no visible bottom edge. The real #mw-panel only carries the
navigation content; this fixed layer paints the uninterrupted surface,
border, and shadow down the whole viewport. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var( --edfm-sidebar-width );
background: linear-gradient( 180deg, var( --edfm-surface-1 ) 0%, var( --edfm-bg-deep ) 100% );
border-right: 1px solid var( --edfm-border );
box-shadow: 10px 0 22px rgba( 0, 0, 0, 0.32 );
pointer-events: none;
z-index: 1;
}
@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: 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;
}

/* Small reusable angular motif: a corner-cut bracket, used sparingly (see
the redesign notes in docs/content-style-guide.md for exactly where) --
deliberately not applied everywhere. */
.edfm-corner-cut {
clip-path: polygon( 0 0, calc( 100% - var( --edfm-corner ) ) 0, 100% var( --edfm-corner ), 100% 100%, 0 100% );
}

/* ==========================================================================
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: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.75rem, 1.35rem + 1.45vw, 2.15rem );
font-weight: 700;
letter-spacing: 0;
line-height: 1.18;
margin: 0.15em 0 0.25em;
padding-bottom: 0.22em;
border-bottom: 1px solid var( --edfm-border );
}
/* Section headings (h2): "// " prefix in orange, bright heading text, a
short orange accent segment over the dim full-width divider core
already draws. Substantially more vertical space than a wiki section
normally gets, per the "sections feel packed together" fix -- 3.25rem
(~52px) above, ~1.1rem gap to the first content component below. If a
heading opts into explicit numbering via {{Section number}}, the
automatic "// " is suppressed so the two treatments don't double up. */
.mw-body h2 {
position: relative;
padding-bottom: 0.25em;
margin-top: 2rem;
margin-bottom: 0.85rem;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.28rem, 1.08rem + 0.65vw, 1.62rem );
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid var( --edfm-border ) !important;
}
.mw-body h2::before {
content: none;
}
.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 );
font-size: var( --edfm-fs-h3 );
}
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.7;
font-size: var( --edfm-fs-body );
}
.mw-body p {
margin: 0 0 1.1em 0;
max-width: none !important; /* Site-wide full-width pass: article text should use the whole content rail. */
}
.mw-body ul,
.mw-body ol {
line-height: 1.7;
margin-bottom: 1.1em;
}

/* EDFM article bullets: replace the stock browser dot with the provided
cyan field-manual arrow, scaled to text size rather than using the source
image's native 100x91 dimensions. This targets article unordered lists;
interface/navigation lists such as the Jump To TOC and galleries are reset
below so they keep their component-specific layout. */
.mw-parser-output ul {
list-style: none;
padding-left: 1.55em;
}
.mw-parser-output ul > li {
position: relative;
}
.mw-parser-output ul > li::before {
content: '';
position: absolute;
left: -1.35em;
top: 0.48em;
width: 0.82em;
height: 0.75em;
background-image: url( '/edfm-assets/list-bullet-arrow.png' );
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.95;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.35 ) );
}
.mw-parser-output ul ul {
margin-top: 0.3em;
padding-left: 1.45em;
}
.mw-parser-output ul ul > li::before {
left: -1.25em;
top: 0.52em;
width: 0.68em;
height: 0.62em;
opacity: 0.82;
}
/* Component exceptions: these are not prose bullet lists. */
.mw-parser-output .toc ul,
.mw-parser-output .gallery,
.mw-parser-output .gallery ul,
.mw-parser-output .mw-gallery-traditional,
.mw-parser-output .mw-gallery-traditional ul {
padding-left: 0;
}
.mw-parser-output .toc li::before,
.mw-parser-output .gallery li::before,
.mw-parser-output .mw-gallery-traditional li::before {
content: none;
}
/* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the
sibling that immediately follows is that wrapper, not the `h2`/`h3`
itself -- matching both forms since a page could still have a bare
heading in edge cases (e.g. content generated without the wrapper). */
.mw-heading2 + p, .mw-body h2 + p,
.mw-heading3 + p, .mw-body h3 + p,
.mw-heading2 + div, .mw-body h2 + div,
.mw-heading3 + div, .mw-body h3 + div {
margin-top: 0;
}
hr {
background-color: var( --edfm-border );
border-color: var( --edfm-border );
}

/* Quiet, discoverable section-edit controls (logged-in editors only --
MediaWiki only renders these for users who can edit). Keeping the
functionality/keyboard access intact while making sure they don't
compete visually with the heading they're attached to: low opacity at
rest, full opacity on hover/focus of the heading OR the control itself,
brackets hidden (the opacity+letter-spacing treatment already reads as
a distinct control without them). */
.mw-editsection {
margin-left: 1em;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility ) !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.45;
transition: opacity 0.15s ease;
}
.mw-heading:hover .mw-editsection,
.mw-heading:focus-within .mw-editsection,
.mw-editsection:hover,
.mw-editsection:focus-within {
opacity: 1;
}
.mw-editsection a {
color: var( --edfm-text-dim );
}
.mw-editsection a:hover,
.mw-editsection a:focus-visible {
color: var( --edfm-cyan );
}
.mw-editsection-bracket {
display: none;
}
.mw-editsection-divider {
color: var( --edfm-text-dim );
margin: 0 0.3em;
}

/* ==========================================================================
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. GLOBAL LAYOUT -- centred workspace
========================================================================== */
/* Full-width article pass: the article now fills the workspace to the right edge.
Historical note: this block originally centred a capped article column.

THE fix for "enormous unused region on the right side of wide displays".
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 with no max-width at all -- the first redesign
pass added a max-width but left the column pinned to the sidebar's left
edge, which is *why* it still read as "a column stuck on the left with
dead space on the right" rather than a composed layout.

Fix: instead of a fixed `margin-left: 11em`, compute how much space is
left over in the workspace (viewport minus the sidebar) once the
content has its max-width, and split that leftover evenly between the
left and right margins (via the --edfm-gutter token above) -- so the
article is centred *within the workspace to the right of the sidebar*,
not centred in the full viewport (which would ignore the sidebar and
look off-centre) and not pinned to its left edge either. On a screen
too narrow for sidebar + max-width content, --edfm-gutter naturally
evaluates to 0 and this degrades to the old "fill the workspace"
behaviour -- no separate narrow-screen override needed.

The header/tab bar's own float/absolute-position box (#mw-head) is left
at its native full width deliberately -- rewriting *that* mechanism is
a different, much higher-risk change (it took several rounds to get
right originally) -- but its *contents* (search box, personal tools,
namespace/view tabs) get their own right/left offsets pulled in by the
same --edfm-gutter below, so they still visually line up with the
centred column beneath them instead of hugging the browser edge. */
.mw-body,
#mw-data-after-content,
.mw-footer {
position: relative;
z-index: 2;
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
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,
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
/* Keep real table layout so header cells and body cells share one column grid.
The earlier display:block + tbody display:table overflow hack made sortable
headers size independently from body columns, which visibly misaligned the
Engineer directory after portrait chips were added. */
display: table;
width: 100%;
table-layout: auto;
}
.mw-body table.wikitable th,
.mw-body table.wikitable td,
.mw-body table.mw-datatable th,
.mw-body table.mw-datatable td {
vertical-align: middle;
}
.mw-body img {
max-width: 100%;
height: auto;
}

/* ==========================================================================
4. ARTICLE MASTHEAD (eyebrow / title / deck)
========================================================================== */
/* Eyebrow line is authored as ordinary wikitext (see Template:Article
header) and, purely as a placement detail, a small script
(MediaWiki:Common.js) moves it directly above #firstHeading on 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).
If JS is unavailable the eyebrow still renders, just directly under the
title instead of above it.

The eyebrow/title/deck aren't wrapped in one literal bounding box (they
live at two different DOM depths -- eyebrow is a sibling of #firstHeading,
deck is inside the article body further down -- wrapping them in one
real container would need heavier JS than is justified here), so the
"designed masthead" read comes from a matching top rule above the
eyebrow and bottom rule below the deck, a small angular marker, and the
larger title/subtitle type scale, rather than one drawn box. */
.edfm-eyebrow {
display: block;
margin: 0.2em 0 0.15em 0;
padding: 0;
border: 0;
font-family: var( --edfm-sans );
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --edfm-text-dim );
}
.edfm-eyebrow::before {
content: none;
}
.edfm-eyebrow .edfm-orange-mark {
color: var( --edfm-orange );
}
.edfm-deck {
color: var( --edfm-text-muted );
font-family: var( --edfm-sans );
font-size: 0.95rem;
font-style: italic;
line-height: 1.45;
max-width: none;
margin: 0.25em 0 0.85em 1.4em;
padding: 0;
border: 0;
}

/* ==========================================================================
1. SIDEBAR
========================================================================== */
#mw-panel {
background: transparent;
box-sizing: border-box;
width: var( --edfm-sidebar-width );
padding: 0 0.65rem 1.35rem 0.65rem;
border-right: 0;
box-shadow: none;
z-index: 3;
}
/* Logo anchors the sidebar visually. Keep raster logo artwork contained in
Vector legacy's fixed sidebar slot rather than letting the image render at
its intrinsic PNG size and clip against the rail. */
#p-logo {
box-sizing: border-box;
width: auto;
height: 10rem;
margin: 0 -0.65rem 0.65rem -0.65rem;
padding: 0.5rem 0.55rem 0.45rem 0.55rem;
border-bottom: 0 !important;
background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% );
overflow: hidden;
}
#p-logo a.mw-wiki-logo {
box-sizing: border-box;
display: block;
width: 100% !important;
height: 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
/* Each nav group gets real breathing room from the one before it instead
of being packed together like a stock wiki sidebar. */

#mw-panel .portal,
#mw-panel .vector-menu-portal {
box-sizing: border-box;
width: auto;
max-width: none;
margin-top: 1.45rem;
}
#mw-panel .portal:first-of-type,
#mw-panel .vector-menu-portal:first-of-type {
margin-top: 0;
}
#mw-panel .portal .body,
#mw-panel .portal ul,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list {
box-sizing: border-box;
width: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
border-color: var( --edfm-border-soft );
}
#mw-panel .portal a {
color: var( --edfm-text-muted );
display: block;
font-size: var( --edfm-fs-sidebar );
line-height: 1.35;
padding: 0.42em 0.55em;
margin: 0.08em -0.35em;
border-left: 2px solid transparent;
border-radius: 2px;
}
#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). */
.edfm-nav-current > a {
color: var( --edfm-orange ) !important;
font-weight: 700;
border-left-color: var( --edfm-orange );
border-left-width: 3px;
background: var( --edfm-surface-2 );
box-shadow: inset 0 0 0 1px rgba( 255, 138, 0, 0.08 );
}
.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: var( --edfm-fs-utility );
border-left: 2px solid var( --edfm-orange );
padding-left: 0.5em;
margin-left: -0.5em;
margin-bottom: 0.4em;
}

/* ==========================================================================
3. TOP BAR -- two-tier chrome
========================================================================== */
/* Vector legacy's #mw-head naturally has ~2.5em of empty space above the
tabs row (core: `#left-navigation/#right-navigation { margin-top:2.5em }`),
originally reserved just for #p-personal to float in. Painting that same
box with a background gradient that stays transparent for that top
band and then switches to a surface colour for the tabs band creates a
real two-tier read -- "primary chrome" (personal tools/search, over the
page's own background) above "wiki authoring controls" (the tabs, on
their own distinct strip) below -- without touching #mw-head's own
position/width mechanics, which is the same fragile absolute-position
system the very first pass of this project had to debug carefully to
get the persistent sidebar working at all. Not worth re-risking that
for a background change. */
#mw-head {
background-image: linear-gradient(
to bottom,
transparent 0,
transparent 2.35em,
var( --edfm-surface-2 ) 2.35em,
var( --edfm-surface-2 ) 100%
);
border-bottom: 1px solid var( --edfm-border );
}
#mw-page-base {
background-color: var( --edfm-bg-deep );
background-image: none;
}
#mw-head-base {
background-color: var( --edfm-bg-deep );
/* Polish pass: thinned from 2px -- at 2px this competed visually with
the masthead's own orange marker/rule directly below it; a single
thinner accent line still reads as "site identity colour" without
the repetition. */
border-bottom: 1px solid var( --edfm-orange );
}
/* Personal tools (login/logout) and the search box are the "primary
chrome" tier -- pulled in by the same gutter used to centre the article,
so on wide screens they visually line up with the centred column
instead of hugging the browser edge, and given noticeably more visual
weight than the tabs below them. */
#p-personal {
right: calc( 0.75em + var( --edfm-gutter ) );
display: flex;
align-items: center;
gap: 0.75rem;
}
#p-personal ul {
display: flex;
align-items: center;
gap: 0.55rem;
}
#p-personal li {
margin-left: 0;
}
#p-personal a {
color: var( --edfm-text-muted );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.3em 0.2em;
}
#p-personal a:hover {
color: var( --edfm-orange );
}
/* Echo's alert/notification icons (bell/tray) in the personal toolbar.
Confirmed by rendering the actual logged-in markup server-side: in
legacy Vector these links get merged straight into the plain personal
tools menu (SkinVectorLegacy::runOnSkinTemplateNavigationHooks) rather
than going through Vector's own `.vector-icon` icon system (that only
wraps items in the views/associated-pages menus). The icon is instead a
`background-image` on the <a> itself, from OOUI's generated
`.oo-ui-icon-bell` / `-tray` / `-bellOutline` classes -- a flat black SVG
baked straight into the image URL, so it's not recolourable via
`background-color` the way the search icon was; this is exactly the
"dark OOUI icon invisible on our dark theme" problem the invert fix
below already solves elsewhere, so reuse that same technique here
instead of a different one. The unread-count badge itself already
colours correctly on its own (Echo maps it to
`@background-color-destructive` / `-progressive`, both redefined to
EDFM's palette) and, being a mostly-saturated colour rather than
black/white/grey, survives this filter close to unchanged. */
#pt-notifications-alert .oo-ui-icon-bell,
#pt-notifications-notice .oo-ui-icon-tray,
#pt-notifications .oo-ui-icon-bellOutline {
filter: invert( 1 ) hue-rotate( 180deg );
}
.edfm-topbar-clocks {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
line-height: 1;
white-space: nowrap;
}
.edfm-topbar-clock {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.55em;
background: rgba( 66, 199, 217, 0.08 );
border: 1px solid var( --edfm-border-soft );
border-left: 2px solid var( --edfm-cyan );
color: var( --edfm-text );
}
.edfm-topbar-clock-label {
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edfm-topbar-clock time {
color: var( --edfm-cyan );
font-weight: 700;
}
.edfm-topbar-clock-local {
background: rgba( 255, 138, 0, 0.06 );
border-left-color: var( --edfm-orange );
}
.edfm-topbar-clock-local time {
color: var( --edfm-orange-bright );
}
#right-navigation {
margin-right: var( --edfm-gutter );
}
#left-navigation {
margin-left: var( --edfm-sidebar-clear );
}
/* Polish pass: core caps this at `width:20vw; max-width:20em`, which read
as cramped next to the rest of the (now larger-scale) interface --
given more room on desktop, still capped so it can't dominate the bar. */
.vector-search-box-inner {
width: 22vw;
max-width: 24em;
}
.vector-search-box-inner input,
#searchInput {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
border: 1px solid var( --edfm-border );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.5em 0.7em;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#searchInput:focus {
border-color: var( --edfm-cyan );
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.22 );
outline: none;
}
#searchInput::placeholder {
color: var( --edfm-text-dim );
}
/* Search submit control: neither rendering path gives this any color of
its own, so on our dark input background it was effectively invisible.
The no-JS legacy form's <button> is a plain black icon at 0.67 opacity
(core skins.vector.styles.legacy/components/SearchBox.less); the
JS/Vue-Codex widget (.vector-search-box-vue) has no separate button at
all, just a start icon inside the input using the same technique
(mask-image recoloured via `background-color`, see Codex's
CdxSearchInput.css). Recolour both to match the site's orange
progressive-action colour used everywhere else. */
.vector-search-box-vue .cdx-text-input__start-icon {
background-color: var( --edfm-orange );
opacity: 1;
}
.searchButton[ name='go' ] {
background-image: none;
background-color: var( --edfm-orange );
opacity: 0.85;
-webkit-mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
}
.searchButton[ name='go' ]:hover,
.searchButton[ name='go' ]:focus {
background-color: var( --edfm-orange-bright );
opacity: 1;
}
/* 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.

These are the "wiki authoring controls" utility tier -- deliberately
smaller (--edfm-fs-utility) and quieter than personal-tools/search
above them, sitting on their own background strip (see #mw-head above).
Selected state stays orange (it's still real navigation, just
secondary); unselected rests dim so the *selected* tab is the one that
reads clearly. */
.vector-menu-tabs-legacy li {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs-legacy li.selected {
background-image: none;
background-color: var( --edfm-surface-1 );
/* Polish pass: a small underline makes the selected tab unambiguous at
a glance instead of relying on the text colour change alone. */
box-shadow: inset 0 -2px 0 var( --edfm-orange );
}
.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 );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 700;
}
.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. */
.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;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var( --edfm-fs-utility );
font-weight: 700;
}
.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-3 );
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 );
font-size: var( --edfm-fs-sidebar );
}
.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-4 );
}

/* Front-page chrome: the hero already names the site, so suppress the
generated MediaWiki page title only on the Main Page. Keep the namespace
tab label and all other article titles intact. */
body.page-Main_Page #firstHeading {
display: none;
}
body.page-Main_Page .mw-body-content {
margin-top: 0;
}

/* ==========================================================================
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 );
}
.mw-body {
border-right: 1px solid var( --edfm-border );
}
#content {
background-color: var( --edfm-surface-1 );
}

/* Site notice chrome. The global disclaimer was moved to its dedicated
legal/disclaimer page, so an empty #siteNotice must not leave behind a
phantom divider at the top of the article surface. */
#siteNotice:empty {
display: none;
}
#siteNotice:not( :empty ) {
font-size: var( --edfm-fs-meta );
line-height: 1.5;
color: var( --edfm-text-dim );
font-style: normal;
padding-bottom: 0.7em;
margin-bottom: 1.4rem;
border-bottom: 1px solid var( --edfm-border-soft );
}
#siteNotice:not( :empty ) em, #siteNotice:not( :empty ) i {
color: var( --edfm-text-muted );
font-style: italic;
}
#siteNotice:not( :empty ) a {
color: var( --edfm-link-external );
}
#siteNotice a:hover {
color: var( --edfm-link-external-hover );
}

/* ==========================================================================
HOME PAGE DASHBOARD
========================================================================== */
.edfm-home-hero {
margin: 0.9rem 0 1.6rem;
padding: 1.35rem 1.55rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.16 ), transparent 34% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.14 ), transparent 42% ),
var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 4px solid var( --edfm-cyan );
clip-path: polygon( 0 0, calc( 100% - 12px ) 0, 100% 12px, 100% 100%, 0 100% );
}
.edfm-home-hero-kicker,
.edfm-home-card-kicker {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.edfm-home-hero-title {
margin-top: 0.25rem;
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: clamp( 1.55rem, 1.1rem + 1.5vw, 2.2rem );
font-weight: 800;
line-height: 1.15;
}
.edfm-home-hero-text {
max-width: none;
margin-top: 0.55rem;
color: var( --edfm-text-muted );
font-size: 1.05rem;
line-height: 1.55;
}
.edfm-home-grid {
display: grid;
gap: 1rem;
margin: 1.2rem 0 2rem;
}
.edfm-home-grid-four {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.edfm-home-grid-topics {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-grid-two {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-card {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
padding: 1rem 1.1rem;
box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.2 );
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-home-card:hover {
transform: translateY( -2px );
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-orange );
}
.edfm-home-card-primary {
border-left-color: var( --edfm-orange );
}
.edfm-home-card-warning {
border-left-color: var( --edfm-text-dim );
}
.edfm-home-card-title,
.edfm-home-card-title a {
margin-top: 0.35rem;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.edfm-home-card-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-home-card-text,
.edfm-home-link-list {
margin-top: 0.65rem;
color: var( --edfm-text-muted );
line-height: 1.6;
}
.edfm-home-link-list a {
font-weight: 600;
}
@media ( max-width: 1100px ) {
.edfm-home-grid-four {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( max-width: 760px ) {
.edfm-home-grid-four,
.edfm-home-grid-topics,
.edfm-home-grid-two {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
HOME PAGE NEWS MODULE
========================================================================== */
.edfm-home-news {
margin: 1.8rem 0 2.2rem;
}
.edfm-news-feature-grid {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 1rem;
margin-bottom: 1rem;
}
.edfm-news-card,
.edfm-news-list {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
box-shadow: 0 14px 26px rgba( 0, 0, 0, 0.22 );
overflow: hidden;
}
.edfm-news-card {
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-news-card:hover {
transform: translateY( -2px );
border-color: rgba( 255, 138, 0, 0.48 );
background: var( --edfm-surface-3 );
}
.edfm-news-card-art {
display: flex;
align-items: flex-end;
min-height: 7rem;
padding: 0.8rem 1rem;
box-sizing: border-box;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.28 ), transparent 42% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.2 ), transparent 48% ),
linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-1 ) );
border-bottom: 1px solid var( --edfm-border );
color: rgba( 237, 240, 242, 0.72 );
font-family: var( --edfm-mono );
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.edfm-news-card-primary .edfm-news-card-art {
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.38 ), transparent 46% ),
linear-gradient( 315deg, rgba( 79, 159, 232, 0.26 ), transparent 52% ),
var( --edfm-surface-4 );
}
.edfm-news-card-body {
padding: 1rem 1.15rem 1.15rem;
}
.edfm-news-meta {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.edfm-news-title,
.edfm-news-title a {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.edfm-news-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-news-summary {
color: var( --edfm-text-muted );
line-height: 1.55;
margin-top: 0.65rem;
}
.edfm-news-list {
padding: 1.1rem 1.25rem 1.2rem;
border-left: 4px solid var( --edfm-orange );
}
.edfm-news-list-heading {
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.edfm-news-list ul {
margin: 0;
}
.edfm-news-list li {
margin-bottom: 0.55rem;
color: var( --edfm-text-muted );
}
.edfm-news-more {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px solid var( --edfm-border-soft );
text-align: right;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
@media ( max-width: 900px ) {
.edfm-news-feature-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
10. JUMP NAVIGATION (table of contents)
========================================================================== */
/* A compact navigation strip/tile-grid rather than a traditional TOC box
of small text links -- real MediaWiki anchors/markup untouched, this is
all presentation. "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 {
display: block;
width: 100%;
box-sizing: border-box;
background: none;
border: none;
color: var( --edfm-text );
padding: 0;
margin: 1.8rem 0;
}
.toctitle {
position: relative;
margin-bottom: 0.7em;
}
.toctitle::before {
content: 'Jump to';
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-orange );
}
/* Core ships `.toc h2 { font-size: 100%; ... }` (mediawiki.skinning/toc/
screen.less) at the exact same specificity (one class + one tag) as a
plain `.toctitle h2` rule -- same "tie that doesn't resolve the way
naive source order would suggest" gotcha documented elsewhere in this
file. #toc's own ID makes this one unambiguous instead of relying on
cascade order. */
#toc .toctitle h2,
.toc .toctitle h2 {
font-size: 0 !important;
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 );
}
/* Desktop: a balanced multi-column jump list. CSS grid flows row-first,
which makes numbered sections read 1, 2, 3, 4 across the first row. For a
reference/walkthrough TOC, scan order is clearer when each column reads
downward first: 1/2/3, then 4/5/6, then 7/8/9. CSS columns preserve the
real DOM/source order while presenting that column-major layout on every
page that uses the stock MediaWiki TOC. */
.toc > ul {
display: block;
column-count: 3;
column-gap: 0.45rem;
list-style: none;
margin: 0;
padding: 0;
}
.toc > ul > li {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 0.45rem;
}
.toc li {
margin-top: 0;
}
/* 2026-08-08 density pass: reverted to side-by-side number/label (from the
earlier "stacked number-above-label" polish pass) specifically to cut
per-tile height -- with 12 sections on articles like The Dweller, the
stacked layout meant the jump nav alone filled most of the first
viewport. Row layout plus tighter padding/font-size gets noticeably
more sections above the fold without dropping the numbering or shrinking
tap targets below a comfortable size -- see the dedicated mobile padding
bump further down for keeping touch targets safe on small screens
specifically. Whole tile stays one real <a>, so it's still a single
click/focus target and keyboard tab stop either way. */
.toc a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
height: 100%;
box-sizing: border-box;
padding: 0.5em 0.75em 0.5em 0.7em;
background: var( --edfm-surface-3 );
/* Left accent rail: matches the orange section numbers and gives each
jump tile a stronger EDFM navigation affordance without boxing the
entire card. */
border-left: 4px solid var( --edfm-orange );
box-shadow: inset 1px 0 0 rgba( 255, 162, 26, 0.35 );
color: var( --edfm-text-muted );
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.toc a:hover {
background: var( --edfm-surface-4 );
border-left-color: var( --edfm-cyan );
box-shadow: inset 1px 0 0 rgba( 66, 199, 217, 0.45 );
color: var( --edfm-text );
transform: translateY( -1px );
}
/* Nested sub-levels (rare on this site so far) drop back to a plain
indented block list inside their parent tile's grid cell rather than
trying to stay gridded themselves. */
.toc ul ul {
grid-column: unset;
list-style: none;
margin: 0.3em 0 0 1.2em;
padding: 0;
display: block;
}
.toc ul ul a {
flex-direction: row;
align-items: center;
background: none;
border-left-width: 1px;
padding: 0.3em 0.6em;
}
.toc ul ul .tocnumber {
font-size: 0.85em;
}
.toc ul ul .toctext {
font-size: 0.85em;
}
.tocnumber {
color: var( --edfm-orange );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: 1.05rem;
line-height: 1;
}
.toctext {
color: inherit;
font-size: 0.85rem;
line-height: 1.3;
}
/* Column count changes only at readable/touch-friendly breakpoints. Keep
column-major ordering at 3 and 2 columns; mobile becomes the natural single
source-order list. */
@media ( max-width: 860px ) {
.toc > ul {
column-count: 2;
}
}
@media ( max-width: 560px ) {
.toc > ul {
column-count: 1;
}
/* Single-column tiles are already full-width here, so there's no
density pressure left -- restore closer to the pre-2026-08-08
padding instead of the tighter desktop value, keeping tap targets
comfortable rather than compacting mobile just because desktop
compacted. */
.toc a {
padding: 0.7em 0.95em;
}
}

/* ==========================================================================
5b. FULL-WIDTH ARTICLE FLOW OVERRIDES
========================================================================== */
/* 2026-08-10 audit: EDFM pages should not leave half the article rail empty.
Earlier readability caps on paragraphs/hero copy made long-form sections
look like narrow blocks while tables, TOCs, and navigation tiles spanned
the page. Keep the main rail full-width everywhere; individual components
may still opt into their own internal grids, but ordinary article copy and
common block containers should stretch to the content edge. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > div:not( .thumb ):not( .tright ):not( .tleft ):not( .floatright ):not( .floatleft ):not( .edfm-status ):not( .edfm-panel ):not( .edfm-box ) {
max-width: none;
box-sizing: border-box;
}
/* Final guard against stale/skin rules recapping article prose while leaving
compact maintenance/status panels free to keep their intentional centred width. */
.mw-body .mw-parser-output > p,
.mw-parser-output > p {
max-width: none !important;
width: 100%;
box-sizing: border-box;
}

/* ==========================================================================
6. PANELS / CALLOUTS, and 11. ARTICLE METADATA / STATUS MODULE
========================================================================== */
/* Deliberately NOT defined here. .edfm-box / .edfm-panel* / .edfm-status* /
.edfm-inline-flag / .edfm-related* are used exclusively by the
editorial templates (see Template:Article status, Template:Draft
warning, Template:Related articles, 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 );
font-size: var( --edfm-fs-body );
}
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: var( --edfm-fs-meta );
text-align: left;
padding: 0.6em 0.8em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
/* 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 );
}

/* mw-json content model (Module:Data/* pages, e.g. Module:Data/Engineers/*)
-- MediaWiki core's JSON page view (resources/src/mediawiki.content.json.less)
styles itself from Codex design tokens, which this site's dark theme never
touches, so these tables rendered in MediaWiki's stock light colours
against every other dark surface on the site. Recoloured to match the
table.wikitable treatment above instead of inventing a new look. */
table.mw-json {
background-color: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: var( --edfm-fs-body );
}
table.mw-json tr {
background-color: var( --edfm-surface-2 );
}
table.mw-json th,
table.mw-json td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
table.mw-json th {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: var( --edfm-fs-meta );
text-align: left;
}
.mw-json-value,
.mw-json-single-value {
background-color: transparent;
color: var( --edfm-text );
}
.mw-json-empty {
background-color: transparent;
color: var( --edfm-text-dim );
}

/* ==========================================================================
15. FOOTER
========================================================================== */
/* A real branded footer: a small wordmark line (pure CSS generated
content -- decorative branding only, redundant with the sidebar logo
already visible, so nothing load-bearing depends on it being
selectable), a top rule with more separation from the article above it,
and MediaWiki's real info/places/icon links laid out on a clean grid
with the badges aligned as a group rather than floating alone. */
.mw-footer {
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
margin-top: 2.5rem;
padding-top: 1.6rem;
border-top: 1px solid var( --edfm-border );
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "brand brand" "info icons" "places icons";
align-items: center;
column-gap: 2em;
row-gap: 0.4rem;
}
.mw-footer::before {
grid-area: brand;
content: 'EDFM // Elite Dangerous Field Manual';
font-family: var( --edfm-mono );
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var( --edfm-text-muted );
margin-bottom: 0.5rem;
}
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
color: var( --edfm-text-dim );
border-color: var( --edfm-border-soft );
font-size: var( --edfm-fs-meta );
}
#footer-info {
grid-area: info;
margin: 0;
line-height: 1.6;
}
#footer-places {
grid-area: places;
margin: 0;
}
/* Same "small uppercase label" treatment used for tags/meta text
elsewhere, so these read as deliberate EDFM navigation rather than
default MediaWiki footer links. */
#footer-places li {
display: inline-block;
margin-right: 1.4em;
}
#footer-places a {
font-family: var( --edfm-mono );
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.78rem;
}
/* A left rule ties the badges to the rest of the footer instead of
letting them read as detached/floating in their own space. */
#footer-icons {
grid-area: icons;
align-self: center;
display: flex;
gap: 0.75em;
margin: 0;
padding-left: 1.6em;
border-left: 1px solid var( --edfm-border-soft );
}
#footer-icons img {
background: var( --edfm-text );
border-radius: 2px;
}
@media ( max-width: 640px ) {
.mw-footer {
grid-template-columns: 1fr;
grid-template-areas: "brand" "info" "places" "icons";
}
#footer-icons {
margin-top: 0.7em;
padding-left: 0;
border-left: none;
border-top: 1px solid var( --edfm-border-soft );
padding-top: 0.7em;
}
}

/* ==========================================================================
MISC MediaWiki UI chrome that ships with light backgrounds by default
========================================================================== */
.catlinks {
background: none !important;
border: none !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-meta );
padding: 0.9em 0 0 0 !important;
margin-top: 1.8rem !important;
}
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 {
position: relative;
z-index: 2;
float: right;
clear: right;
width: 350px;
max-width: min( 350px, 42% );
margin: 0 0 1.25em 1.35em;
border: 1px solid var( --edfm-border );
border-top: 2px solid var( --edfm-orange );
background: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: 0.92rem;
}
.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.5em 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-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
border: 1px dashed var( --edfm-border );
background: var( --edfm-surface-1 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility );
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 0.5em;
}
/* Optional section label (Template:Infobox's |groupN=) splitting a long
infobox into scannable groups, e.g. Engineer infoboxes into "ENGINEER"
and "ACCESS" (2026-08-08, part of the Engineer article layout pass). A
shaded band with a bottom rule rather than a full boxed sub-header --
consistent with .edfm-infobox-row's own bottom-rule-only separator, not
a new visual language. */
.edfm-infobox-group {
background: var( --edfm-surface-3 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35em 0.7em;
border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-row {
display: flex;
border-bottom: 1px solid var( --edfm-border-soft );
padding: 0.45em 0.7em;
}
.edfm-infobox-row:last-child {
border-bottom: none;
}
.edfm-infobox-label {
font-weight: 700;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
width: 40%;
flex-shrink: 0;
color: var( --edfm-cyan );
}
.edfm-infobox-value {
width: 60%;
}
@media ( max-width: 640px ) {
.edfm-infobox {
float: none;
width: auto;
max-width: none;
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::before {
display: none;
}
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;
background-image: none;
background-color: var( --edfm-surface-2 );
}
#left-navigation,
#right-navigation {
float: none;
margin: 0 !important;
width: auto;
clear: both;
}
#left-navigation {
margin-top: 0 !important;
}
/* Core Vector legacy floats each tab/dropdown portlet
(.vector-menu-tabs-legacy for Page/Discussion and Read/View
source/View history, .vector-menu-dropdown for the More menu) AND
floats every <li> inside their <ul>, with no wrapping at all -- at
narrow widths the labels just overflow and overlap each other
(confirmed with a real screenshot: "View source" and "More"
overlapped instead of wrapping to a new line). Switching the
portlets to inline-block and their tab lists to flex-wrap lets them
reflow onto as many rows as needed instead. */
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-dropdown {
float: none;
display: inline-block;
vertical-align: top;
}
.vector-menu-tabs-legacy ul {
float: none;
display: flex;
flex-wrap: wrap;
}
.vector-menu-tabs-legacy li {
float: none;
}
#p-personal {
position: static;
text-align: right;
padding: 0.5em 1em;
margin: 0;
right: auto !important;
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;
background: var( --edfm-bg-deep );
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 !important;
margin-right: 0 !important;
max-width: none;
}
.mw-body {
margin-top: 0;
border-width: 0;
padding: 1em;
}
.edfm-status-details {
grid-template-columns: 1fr;
}
/* .toc > ul column count is NOT overridden here -- the dedicated
1150px/560px breakpoints above already cover every width down to
the smallest phones; duplicating a rule here previously fought
those (same specificity, this position in the cascade would have
won and wrongly forced 1 column as low as 561px). */
#firstHeading {
font-size: 1.6rem;
}
.mw-body h2 {
margin-top: 2.25rem;
}
.edfm-eyebrow {
padding-top: 0.9em;
}
}
/* ==========================================================================
16. OOUI DIALOGS -- VisualEditor's save dialog, and any other OOUI
dialog (delete/move/protect confirmations, special-page dialogs).
These render via OOUI's own bundled WikimediaUI theme stylesheet,
entirely outside the .edfm-* component system this file otherwise
covers, so without this they show up starkly white against the rest of
the dark-themed site regardless of any variable/token used elsewhere in
this file. !important is justified the same way as the h1-h6 fix above:
OOUI's own stylesheet loads with equal-or-higher effective specificity,
and this is a correctness/contrast fix, not decoration.
========================================================================== */
.oo-ui-window-frame {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-processDialog {
background: rgba( 7, 9, 11, 0.75 ) !important;
}
.oo-ui-processDialog-navigation,
.oo-ui-window-head,
.oo-ui-window-foot {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-processDialog-title,
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-inputWidget-input {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* VisualEditor's reference dialog embeds a mini target widget for the
reference body. The widget ships with a white WikimediaUI base surface,
so theme that inner editing box separately from the surrounding OOUI
dialog chrome. */
.ve-ui-mwReferenceDialog .ve-ui-targetWidget,
.ve-ui-mwReferenceDialog .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ),
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget,
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-surface,
.ve-ui-mwReferenceDialog .ve-ce-surface,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode,
.ve-ui-mwReferenceDialog .ve-ce-documentNode,
.ve-ui-mwReferenceDialog .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode p,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode li,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode span {
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-targetWidget-focused {
border-color: var( --edfm-cyan ) !important;
box-shadow: inset 0 0 0 1px rgba( 77, 199, 232, 0.42 ) !important;
}
.ve-ui-mwSaveDialog-options,
.oo-ui-panelLayout,
.oo-ui-window-body {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-popupWidget-popup {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-buttonElement:not( .oo-ui-flaggedElement-primary ) > .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
17. OOUI TOOLBAR -- VisualEditor's persistent editing toolbar and its
dropdown menus (Cite, Insert, paragraph style, etc.), and the equivalent
toolbar/popups used when editing a single section. Same root cause as
16. OOUI DIALOGS above (OOUI's own bundled theme, not touched by
anything else in this file), found separately because it's a different
set of OOUI classes (toolbar chrome, not dialog chrome). Icons are not
overridden here and don't need to be -- they're currentColor-based, so
they pick up the text colour set below automatically.
========================================================================== */
.oo-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-tool-title,
.oo-ui-tool-link,
.oo-ui-toolGroup-tools .oo-ui-optionWidget,
.oo-ui-menuOptionWidget,
.oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-optionWidget.oo-ui-optionWidget-selected,
.oo-ui-optionWidget:hover,
.oo-ui-tool:hover .oo-ui-tool-link {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
18. OOUI GENERIC MENUS -- .oo-ui-menuSelectWidget is OOUI's general
dropdown/autocomplete menu class (paragraph-style picker, citation-type
picker, link/media search suggestions, etc.) -- a different class from
the toolbar-specific popups in 17. above, confirmed separately via
computed-style inspection to default to the same white OOUI theme
background.
========================================================================== */
.oo-ui-menuSelectWidget {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-menuOptionWidget {
color: var( --edfm-text ) !important;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget:hover {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
19. OOUI ICONS -- the toolbar/menu icons themselves (Bold, link, list,
Cite, undo/redo, etc.) are rendered as background-image SVGs with a
colour baked into the SVG markup, not currentColor-based masks -- so
16-18 above (which only recolour backgrounds/text) left them dark and
low-contrast against the now-dark surfaces. OOUI ships its own fix for
exactly this, gated behind a narrow accessibility media query
(forced-colors + prefers-color-scheme: dark) that doesn't apply to this
site's own always-on dark theme -- reusing that exact technique
unconditionally rather than inventing a different one. `:not(
.oo-ui-image-invert )` is OOUI's own exclusion for icons already meant
to render light (e.g. on the orange primary-button background) --
inverting those too would flip them back to dark.
========================================================================== */
.oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* ==========================================================================
20. EDIT SOURCE FORM -- MediaWiki core + WikiEditor + CodeMirror

The source editor is not covered by the article/component selectors above:
`action=edit` loads core edit-form CSS, WikiEditor chrome, and sometimes
CodeMirror with their own light neutral surfaces. Force the same EDFM dark
surface stack here so the source page no longer flashes as a white island.
========================================================================== */
.mw-editform,
#editform,
#toolbar,
.editOptions,
.mw-editTools,
.mw-summary-preview,
.mw-datatable,
.wikiEditor-ui,
.wikiEditor-ui-view,
.wikiEditor-ui-text,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-top,
.wikiEditor-ui-controls,
.wikiEditor-ui-tabs,
.wikiEditor-ui-buttons,
.wikiEditor-ui-left,
.wikiEditor-ui-right,
.editButtons,
.CodeMirror,
.CodeMirror-scroll {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-editform textarea,
#wpTextbox1,
#wpSummary,
#wpSummaryWidget input,
#editform input[type='text'],
#editform input[type='search'],
#editform textarea,
.wikiEditor-ui-text textarea,
.CodeMirror-code,
.CodeMirror-lines,
.CodeMirror pre {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
caret-color: var( --edfm-orange-bright );
}
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .page,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar .options,
.wikiEditor-ui-toolbar .booklet,
.wikiEditor-ui-toolbar .pages,
.CodeMirror-gutters {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text-muted ) !important;
border-color: var( --edfm-border ) !important;
}
.wikiEditor-ui-toolbar a,
.wikiEditor-ui-toolbar .label,
.wikiEditor-ui-toolbar .tab a,
.mw-editTools a,
.editOptions label,
.mw-editform label,
.CodeMirror-linenumber {
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab a:hover,
.wikiEditor-ui-toolbar .tool-button:hover,
.wikiEditor-ui-toolbar .tool-select:hover,
.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-table td,
.CodeMirror-activeline-background {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab.current a,
.wikiEditor-ui-toolbar .section-main,
.CodeMirror-selected {
background: var( --edfm-surface-4 ) !important;
}
.CodeMirror-cursor {
border-left-color: var( --edfm-orange-bright ) !important;
}
.CodeMirror-matchingbracket {
color: var( --edfm-orange-bright ) !important;
}

/* VisualEditor's standalone "Edit source" mode (.ve-ui-surface-source, set
by ve.ui.Surface when this.mode === 'source') ships its own white surface
-- unlike visual mode, which reuses normal dark article styling since
it's just contenteditable article HTML. Scoped to -source only so the
visual WYSIWYG canvas is untouched. */
.ve-ui-surface-source,
.ve-init-mw-tempWikitextEditorWidget {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-surface-source .ve-ce-surface,
.ve-ui-surface-source .ve-ce-documentNode,
.ve-ui-surface-source .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}

/* ==========================================================================
21. FILE PAGE CHROME -- #filetoc (the File / File history / File usage /
Metadata nav on File: description pages) is defined in MediaWiki core's
mediawiki.action.view.filepage.less, entirely separate from both the
.edfm-* system and the OOUI fixes in 16-19 above -- a different
subsystem again, only loaded on File: pages, which is why it was never
touched by anything else in this file. Link colour inside it already
correctly inherits the site's normal link blue; only the light neutral
background/border needed overriding.
========================================================================== */
#filetoc {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
22. FILE PAGE: METADATA TABLE + MEDIA VIEWER BUTTON -- #mw_metadata is
the EXIF-style metadata table (separate from the File history table
above -- that one already carries the .wikitable class and picked up
dark styling from 7. TABLES automatically; this one doesn't have that
class, so it never matched). The "Open in Media Viewer" button is a
Codex component (MultimediaViewer extension) -- a third distinct
styling subsystem from OOUI and MediaWiki core skinning, again never
touched by anything else in this file.
========================================================================== */
#mw_metadata th,
#mw_metadata td {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-mmv-view-expanded.cdx-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Core MediaWiki/action buttons: match EDFM dark theme instead of default white/orange controls. */
.mw-ui-button,
.mw-htmlform-submit,
.mw-htmlform-ooui-wrapper button,
#mw-patrol-form button,
#mw-patrol-form input[type="submit"],
form.mw-htmlform button,
form.mw-htmlform input[type="submit"],
input[type="submit"].mw-ui-button,
button.mw-ui-button,
.cdx-button:not( .cdx-button--fake-button--enabled ) {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border: 1px solid var( --edfm-border-strong, var( --edfm-border ) ) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var( --edfm-mono ) !important;
font-weight: 800 !important;
text-shadow: none !important;
}
.mw-ui-button:hover,
.mw-htmlform-submit:hover,
.mw-htmlform-ooui-wrapper button:hover,
#mw-patrol-form button:hover,
#mw-patrol-form input[type="submit"]:hover,
form.mw-htmlform button:hover,
form.mw-htmlform input[type="submit"]:hover,
input[type="submit"].mw-ui-button:hover,
button.mw-ui-button:hover,
.cdx-button:not( .cdx-button--fake-button--enabled ):hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-orange-bright ) !important;
border-color: var( --edfm-orange ) !important;
}
.mw-ui-button:focus,
.mw-htmlform-submit:focus,
.mw-htmlform-ooui-wrapper button:focus,
#mw-patrol-form button:focus,
#mw-patrol-form input[type="submit"]:focus,
form.mw-htmlform button:focus,
form.mw-htmlform input[type="submit"]:focus,
input[type="submit"].mw-ui-button:focus,
button.mw-ui-button:focus,
.cdx-button:not( .cdx-button--fake-button--enabled ):focus {
outline: 2px solid var( --edfm-cyan ) !important;
outline-offset: 2px !important;
}

/* Patrol action: remove the cramped review button from the public article chrome. */
#mw-patrol-form {
display: none !important;
}

/* Frontier news: after removing the repeated dispatch list, keep attribution compact. */
.edfm-news-attribution-compact {
margin-top: 0.35rem;
padding-top: 0.6rem;
}

/* ===========================================================================
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL
=========================================================================== */
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar,
large touch targets, off-canvas navigation, search-forward layout, and
single-column readable article flow -- while preserving EDFM's dark field
manual identity and not copying RuneScape.wiki assets/CSS.
The close button is injected into #mw-panel by Common.js, so it must be
explicitly hidden by default; otherwise a tiny native white button appears
in the desktop sidebar's top-left corner. */
.edfm-mobile-appbar,
.edfm-mobile-scrim,
.edfm-mobile-close-button {
display: none;
}
@media ( max-width: 800px ) {
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var( --edfm-bg-page );
overflow-x: hidden;
}
body.edfm-mobile-menu-open {
overflow: hidden;
}
.edfm-mobile-appbar {
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
position: sticky;
top: 0;
z-index: 1200;
min-height: 56px;
padding: 0 0.35rem;
background:
linear-gradient( 90deg, rgba( 255, 138, 0, 0.18 ), transparent 38% ),
var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.35 );
}
.edfm-mobile-brand {
min-width: 0;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.edfm-mobile-brand::before {
content: 'EDFM // ';
color: var( --edfm-orange );
}
.edfm-mobile-menu-button,
.edfm-mobile-search-button,
.edfm-mobile-close-button {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var( --edfm-text );
font: 700 1.5rem/1 var( --edfm-mono );
cursor: pointer;
}
.edfm-mobile-menu-button:focus-visible,
.edfm-mobile-search-button:focus-visible,
.edfm-mobile-close-button:focus-visible {
outline: 2px solid var( --edfm-cyan );
outline-offset: -4px;
}
.edfm-mobile-menu-button::before {
content: '☰';
color: var( --edfm-orange );
}
.edfm-mobile-search-button::before {
content: '⌕';
font-size: 1.85rem;
color: var( --edfm-cyan );
}
.edfm-mobile-close-button::before {
content: '×';
color: var( --edfm-text );
}
.edfm-mobile-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba( 0, 0, 0, 0.58 );
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
body.edfm-mobile-menu-open .edfm-mobile-scrim {
opacity: 1;
pointer-events: auto;
}
#mw-navigation {
background: var( --edfm-surface-2 );
box-shadow: none;
}
#mw-head {
position: relative;
z-index: 1100;
border-bottom: 1px solid var( --edfm-border );
}
#mw-head .vector-search-box {
display: none;
margin: 0;
padding: 0.65rem;
background: var( --edfm-surface-2 );
border-top: 1px solid var( --edfm-border-soft );
}
body.edfm-mobile-search-open #mw-head .vector-search-box {
display: block;
}
#mw-head .vector-search-box-inner,
#mw-head #searchform {
width: 100%;
}
#mw-head #searchInput {
min-height: 44px;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
#left-navigation,
#right-navigation {
padding: 0 0.45rem 0.35rem;
background: var( --edfm-surface-2 );
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.vector-menu-tabs-legacy ul {
flex-wrap: nowrap;
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-dropdown .vector-menu-heading {
min-height: 36px;
display: inline-flex;
align-items: center;
}
#p-personal {
display: none;
}
#mw-panel {
position: fixed;
top: 0;
left: 0;
z-index: 1300;
width: min( 82vw, 22rem );
height: 100dvh;
box-sizing: border-box;
padding: 0;
background: var( --edfm-surface-1 );
border: 0;
border-right: 1px solid var( --edfm-border );
box-shadow: 18px 0 36px rgba( 0, 0, 0, 0.45 );
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX( -105% );
transition: transform 0.2s ease;
}
body.edfm-mobile-menu-open #mw-panel {
transform: translateX( 0 );
}
#mw-panel::before {
content: 'EDFM Navigation';
display: block;
position: sticky;
top: 0;
z-index: 1;
padding: 1rem 3.4rem 1rem 1rem;
background: var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
color: var( --edfm-orange );
font: 800 0.86rem/1.2 var( --edfm-mono );
letter-spacing: 0.08em;
text-transform: uppercase;
}
#mw-panel .edfm-mobile-close-button {
position: absolute;
top: 0.3rem;
right: 0.35rem;
z-index: 2;
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin: 0;
padding: 0.75rem 0;
border-bottom: 1px solid var( --edfm-border-soft );
}
#mw-panel .vector-menu-heading {
margin: 0.25rem 1rem 0.45rem;
}
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
display: flex;
align-items: center;
min-height: 46px;
box-sizing: border-box;
padding: 0.55rem 1rem;
border-left: 3px solid transparent;
color: var( --edfm-text-muted );
font-size: 1rem;
text-decoration: none;
}
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-content-list li a:focus {
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-cyan );
color: var( --edfm-text );
}
#mw-panel .edfm-nav-current > a,
#mw-panel .edfm-nav-current > a:visited {
background: rgba( 255, 138, 0, 0.12 );
border-left-color: var( --edfm-orange );
color: var( --edfm-orange ) !important;
}
.mw-body {
padding: clamp( 1rem, 4vw, 1.35rem );
font-size: 1rem;
line-height: 1.68;
}
#siteNotice {
margin-bottom: 1rem;
padding-bottom: 0.85rem;
}
#firstHeading {
font-size: clamp( 1.65rem, 8vw, 2.25rem );
line-height: 1.1;
letter-spacing: -0.015em;
}
.mw-body h2 {
font-size: 1.18rem;
line-height: 1.25;
}
.mw-body p,
.mw-body li {
max-width: none;
}
.mw-body img,
.mw-body .thumb,
.mw-body .thumbinner,
.mw-body .thumbimage {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
.mw-body .thumb,
.mw-body .tright,
.mw-body .tleft {
float: none !important;
clear: both;
width: auto !important;
margin: 1rem 0 !important;
}
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.mw-parser-output > table.wikitable th,
.mw-parser-output > table.wikitable td,
.mw-parser-output > table.mw-datatable th,
.mw-parser-output > table.mw-datatable td {
white-space: normal;
min-width: 8rem;
}
.edfm-infobox {
font-size: 0.95rem;
}
.edfm-infobox-row {
display: grid;
grid-template-columns: minmax( 7.5rem, 40% ) 1fr;
gap: 0.5rem;
padding: 0.65rem 0.8rem;
}
.edfm-infobox-label,
.edfm-infobox-value {
width: auto;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tbody,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tr,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type {
overflow: visible;
white-space: normal;
background: transparent;
border: 0;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th {
margin-top: 0.75rem;
border-left: 3px solid var( --edfm-orange );
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
margin-bottom: 0.75rem;
background: var( --edfm-surface-2 );
border-left: 3px solid var( --edfm-border );
}
.mw-footer {
padding: 1rem;
margin-top: 1.5rem;
}
}
@media ( max-width: 430px ) {
.edfm-mobile-brand::before {
content: 'EDFM';
margin-right: 0.45rem;
}
.edfm-mobile-brand {
font-size: 0.88rem;
}
.edfm-infobox-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}

/* 22a. Mobile action tabs refinement: keep Vector's page/discussion/read/
source/history controls available, but put them on one compact horizontal
action rail so the first phone viewport feels like a real mobile app shell
instead of two stacked desktop tab bars. */
@media ( max-width: 800px ) {
body:not( .edfm-mobile-search-open ) #mw-head {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
body:not( .edfm-mobile-search-open ) #left-navigation,
body:not( .edfm-mobile-search-open ) #right-navigation {
flex: 0 0 auto;
clear: none !important;
float: none !important;
width: auto;
padding: 0 0.25rem;
margin: 0 !important;
border-right: 1px solid var( --edfm-border-soft );
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown {
float: none !important;
display: inline-block;
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a,
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a:visited,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown .vector-menu-heading {
min-height: 40px;
padding-left: 0.55rem;
padding-right: 0.55rem;
font-size: 0.68rem;
}
body.edfm-mobile-search-open #mw-head {
display: block;
}
}

/* ===========================================================================
24. HARD OVERRIDE: JUMP TILE LEFT RAIL

The earlier border-left rail can be swallowed by ResourceLoader/cascade or
visually read as part of the tile edge. Draw the rail as a high-specificity
gradient on the actual top-level TOC anchors so it is unmistakable on the
live jump grid.
=========================================================================== */
#toc.toc > ul > li > a,
.mw-parser-output #toc > ul > li > a,
.mw-parser-output .toc > ul > li > a {
background-image: linear-gradient( 90deg, var( --edfm-orange ) 0, var( --edfm-orange ) 6px, transparent 6px ) !important;
border-left: 0 !important;
padding-left: 1rem !important;
}
#toc.toc > ul > li > a:hover,
#toc.toc > ul > li > a:focus-visible,
.mw-parser-output #toc > ul > li > a:hover,
.mw-parser-output #toc > ul > li > a:focus-visible,
.mw-parser-output .toc > ul > li > a:hover,
.mw-parser-output .toc > ul > li > a:focus-visible {
background-image: linear-gradient( 90deg, var( --edfm-cyan ) 0, var( --edfm-cyan ) 6px, transparent 6px ) !important;
}

/* ===========================================================================
25. SOURCE EDIT CONFLICT / WIKITEXT DIFF THEME

Source-edit conflict review uses MediaWiki's diff table classes, not the
normal edit textarea/WikiEditor chrome. Without this, unchanged rows and
inline change pills fall back to stark white/yellow/blue defaults. Keep the
old/new meaning, but render it in EDFM's dark surfaces with restrained
orange/cyan accents.
=========================================================================== */
.mw-parser-output table.diff,
table.diff,
.diff {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-collapse: separate !important;
border-spacing: 0 0.12rem !important;
}
.diff-title,
.diff-otitle,
.diff-ntitle,
#mw-diff-otitle1,
#mw-diff-ntitle1 {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
}
td.diff-lineno,
.diff-lineno {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
border: 0 !important;
padding: 0.35rem 0.5rem !important;
}
td.diff-marker,
.diff-marker {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
padding: 0.25rem 0.45rem !important;
text-align: center;
}
td.diff-context,
td.diff-addedline,
td.diff-deletedline,
.diff-context,
.diff-addedline,
.diff-deletedline,
.mw-diff-inline-context,
.mw-diff-inline-added,
.mw-diff-inline-deleted,
.mw-diff-inline-changed,
.mw-diff-inline-moved {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
font-family: var( --edfm-mono );
box-shadow: none !important;
}
td.diff-context:empty,
td.diff-addedline:empty,
td.diff-deletedline:empty,
.diff-context:empty,
.diff-addedline:empty,
.diff-deletedline:empty {
/* Empty diff cells are alignment placeholders. Keep their card boundary so
the two-column source-conflict diff does not look broken, but make them
compact and neutral instead of tall blank blocks. */
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none !important;
min-height: 0;
padding-top: 0.08rem !important;
padding-bottom: 0.08rem !important;
}
td.diff-deletedline,
.diff-deletedline,
.mw-diff-inline-deleted {
background: rgba( 255, 138, 0, 0.08 ) !important;
border-color: rgba( 255, 138, 0, 0.6 ) !important;
border-left-color: var( --edfm-orange ) !important;
}
td.diff-addedline,
.diff-addedline,
.mw-diff-inline-added {
background: rgba( 66, 199, 217, 0.08 ) !important;
border-color: rgba( 66, 199, 217, 0.6 ) !important;
border-left-color: var( --edfm-cyan ) !important;
}
.diffchange,
.diff-addedline .diffchange,
.diff-deletedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
border-radius: 3px !important;
padding: 0.08rem 0.22rem !important;
font-weight: 700;
text-decoration: none !important;
color: var( --edfm-bg-deep ) !important;
}
.diff-deletedline .diffchange,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
background: var( --edfm-orange-bright ) !important;
}
.diff-addedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins {
background: var( --edfm-cyan ) !important;
}
.mw-explainconflict,
#wpTextbox2,
textarea#wpTextbox2,
textarea.mw-textarea-oldrev {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Engineer directory portrait chips -- intentionally quiet so table rows still
read like data rows, not card/list hybrids. */
.edfm-engineer-entry {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: max-content;
}
.edfm-engineer-entry .mw-file-element {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var( --edfm-border );
background: var( --edfm-surface-0 );
box-shadow: none;
}
.edfm-engineer-entry__name {
line-height: 1.2;
}

/* Frontier official news feed image treatment */
.edfm-frontier-news .edfm-news-card-art-image {
display: block;
position: relative;
padding: 0;
/* Keep all news thumbnails uniform, including the first/primary story. */
height: 9.5rem;
min-height: 9.5rem;
aspect-ratio: 16 / 9;
background: var( --edfm-surface-4 );
overflow: hidden;
}
.edfm-frontier-news .edfm-news-card-primary .edfm-news-card-art-image {
height: 9.5rem;
min-height: 9.5rem;
}
.edfm-frontier-news .edfm-news-card-art-image > span,
.edfm-frontier-news .edfm-news-card-art-image .mw-default-size,
.edfm-frontier-news .edfm-news-card-art-image .mw-file-description {
display: block !important;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.edfm-frontier-news .edfm-news-card-art-image .mw-file-element {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transition: transform 0.2s ease, filter 0.2s ease;
}
.edfm-frontier-news .edfm-news-card:hover .edfm-news-card-art-image .mw-file-element {
filter: brightness( 1.08 ) contrast( 1.05 );
transform: scale( 1.035 );
}
.edfm-frontier-news .edfm-news-source-badge {
display: inline-flex !important;
align-items: center;
position: absolute !important;
left: 0.8rem !important;
right: auto !important;
bottom: 0.75rem !important;
z-index: 2;
max-width: calc( 100% - 1.6rem );
padding: 0.25rem 0.55rem;
background: rgba( 10, 13, 17, 0.82 );
border: 1px solid rgba( 255, 138, 0, 0.48 );
box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.34 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}

.edfm-news-attribution {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var( --edfm-border-soft );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
line-height: 1.45;
}

/* Patrol action: hide MediaWiki generated patrol footer/link from article chrome. */
.patrollink,
.patrollink[data-mw-interface],
.patrollink .cdx-button,
#mw-content-text + .patrollink,
.mw-parser-output + .patrollink {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* ===========================================================================
2026-08-10 PROSE RAIL SLEDGEHAMMER
=========================================================================== */
/* Plain article prose on EDFM is supposed to occupy the article rail. Keep this
deliberately simple and selector-separated: no comma-list dependency on
advanced :not() parsing, no TemplateStyles scoping, and both physical and
logical width properties so later/readability rules cannot re-cap lines. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > p,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ul,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ol,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > dl {
display: block !important;
width: 100% !important;
max-width: none !important;
inline-size: 100% !important;
max-inline-size: none !important;
box-sizing: border-box !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output p {
max-width: none !important;
max-inline-size: none !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output li,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output dd {
max-width: none !important;
max-inline-size: none !important;
}
/* Restore the intentional compact maintenance notice after the broad prose
override above. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-draft,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-draft {
width: auto !important;
max-width: 44rem !important;
inline-size: auto !important;
max-inline-size: 44rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
EDFM login/register auth surface template alignment
========================================================================== */
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm {
color: var( --edfm-text );
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-label__label__text {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.015em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-Userlogin #userloginForm input[type='text'],
body.mediawiki.mw-special-Userlogin #userloginForm input[type='password'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='text'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='password'] {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 );
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input::placeholder,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-help,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-password-help {
color: var( --edfm-text-muted ) !important;
font-size: 0.88rem;
line-height: 1.45;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
margin-top: 0.85rem;
padding: 0.9rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.12 ), transparent 34% ),
var( --edfm-surface-1 );
border: 1px solid rgba( 255, 138, 0, 0.42 );
border-left: 3px solid var( --edfm-orange );
box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 850;
letter-spacing: 0.04em;
line-height: 1.35;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 0;
margin: 0;
padding: 0.55rem 0.8rem;
background: rgba( 255, 138, 0, 0.1 ) !important;
border: 1px solid var( --edfm-orange ) !important;
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.035 );
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.045em;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:hover,
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:focus-visible {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange-bright ) !important;
color: #10171b !important;
text-decoration: none !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin-top: 0.2rem;
padding: 1.15rem 1.25rem;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.08 ), transparent 38% ),
var( --edfm-surface-1 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-heading {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-size: 1.35rem;
font-weight: 800;
line-height: 1.25;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list {
margin-top: 1rem;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::before {
filter: none !important;
opacity: 0.78 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 1.75rem;
font-weight: 850;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {
color: var( --edfm-text-muted ) !important;
font-size: 0.9rem;
line-height: 1.35;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text {
display: none !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit {
background: var( --edfm-surface-3 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
border-radius: 0 !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 850;
letter-spacing: 0.06em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit:hover,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
body.mediawiki.mw-special-Userlogin #mw-content-text,
body.mediawiki.mw-special-CreateAccount #mw-content-text {
padding-top: 0.55rem;
}
body.mediawiki.mw-special-Userlogin #firstHeading {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-content-text > .mw-ui-container {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm {
width: min( 100%, 34rem ) !important;
margin: 0 auto !important;
padding: 1.15rem 1.2rem 1.25rem !important;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.1 ), transparent 34% ),
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 55% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-userlogin-help {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
margin: 1.05rem auto 0 !important;
max-width: 18rem;
}
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: grid !important;
grid-template-columns: minmax( 19rem, 28rem ) minmax( 20rem, 1fr ) !important;
gap: clamp( 1.4rem, 4vw, 3rem ) !important;
align-items: stretch !important;
width: min( 100%, 76rem ) !important;
max-width: 76rem !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin: 0 !important;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.07 ), transparent 38% ),
linear-gradient( 180deg, rgba( 255, 138, 0, 0.035 ), rgba( 0, 0, 0, 0 ) 54% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm {
padding: 1.15rem 1.2rem 1.25rem !important;
border-left: 3px solid var( --edfm-orange ) !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
padding: clamp( 1.3rem, 2.2vw, 2.05rem ) !important;
border-left: 3px solid var( --edfm-cyan ) !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field {
margin-bottom: 1rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLSubmitField,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLSubmitField {
margin-bottom: 0 !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName {
border-color: rgba( 66, 199, 217, 0.45 ) !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 1px rgba( 66, 199, 217, 0.35 ), 0 0 18px rgba( 66, 199, 217, 0.14 ) !important;
}
@media ( max-width: 860px ) {
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: flex !important;
flex-direction: column !important;
width: min( 100%, 34rem ) !important;
max-width: 34rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
width: 100% !important;
}
}
/* ==========================================================================
EDFM dark thumbnail/frame treatment — 2026-08-13
Keep MediaWiki image captions from falling back to the default white frame.
========================================================================== */
.mw-parser-output .thumb {
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"],
.mw-parser-output figure.mw-halign-right,
.mw-parser-output figure.mw-halign-left,
.mw-parser-output figure.mw-halign-center {
background:
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 56% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 1px solid var( --edfm-border ) !important;
box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbimage,
.mw-parser-output .thumbinner img,
.mw-parser-output figure[typeof~="mw:File/Thumb"] img,
.mw-parser-output figure[typeof~="mw:File/Frame"] img {
background-color: var( --edfm-bg-deep ) !important;
border: 1px solid var( --edfm-border ) !important;
box-sizing: border-box !important;
}
.mw-parser-output .thumbcaption,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption {
background: var( --edfm-surface-1 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim ) !important;
font-size: var( --edfm-fs-small ) !important;
line-height: 1.42 !important;
padding: 0.42rem 0.5rem 0.5rem !important;
}
.mw-parser-output .thumbcaption a,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a {
color: var( --edfm-link ) !important;
}
.mw-parser-output .thumbcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a:hover {
color: var( --edfm-link-hover ) !important;
}
.mw-parser-output .magnify a,
.mw-parser-output .mw-file-magnify {
filter: invert( 1 ) opacity( 0.72 ) drop-shadow( 0 0 2px rgba( 66, 199, 217, 0.28 ) );
}

/* ==========================================================================
EDFM VisualEditor template dialog dark theme — 2026-08-13
Keep template editing dialogs from falling back to white/light OOUI panels.
========================================================================== */
.ve-ui-mwTransclusionDialog,
.ve-ui-mwTransclusionDialog .oo-ui-window-frame,
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .oo-ui-window-body,
.ve-ui-mwTransclusionDialog .oo-ui-window-foot,
.ve-ui-mwTransclusionDialog .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTransclusionDialog .oo-ui-pageLayout,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-content,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
background-color: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu {
background-color: var( --edfm-surface-1 ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterSelectWidget {
background-color: var( --edfm-surface-2 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-widget {
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-field .oo-ui-labelElement-label em,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-undocumentedLabel {
color: var( --edfm-text-muted ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-bg-deep ) !important;
}

/* Additional VE template-dialog color polish — disabled/apply buttons, search,
unused-toggle buttons, and parameter checkboxes. */
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
opacity: 0.82 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget .oo-ui-inputWidget-input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-inputWidget-input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span::before {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
/* EDFM VisualEditor template/infobox popup hard-dark theme — targets the actual
Edit: <template> popup chrome and body, not just article/sidebar chrome. */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active > .oo-ui-window-frame,
.oo-ui-windowManager-modal .oo-ui-processDialog-content,
.oo-ui-windowManager-modal .oo-ui-window-content,
.oo-ui-windowManager-modal .oo-ui-window-body,
.oo-ui-windowManager-modal .oo-ui-window-foot,
.ve-ui-mwTemplateDialog,
.ve-ui-mwTemplateDialog .oo-ui-panelLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-content,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTemplateDialog .oo-ui-pageLayout,
.ve-ui-mwTemplateDialog .ve-ui-mwTemplatePage,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #111b20 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-content > .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-processDialog-navigation,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #1c2a31 !important;
color: #f4f7f8 !important;
border-color: #7f9299 !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-title,
.oo-ui-windowManager-modal .oo-ui-labelElement-label,
.oo-ui-windowManager-modal .oo-ui-fieldLayout-header label,
.oo-ui-windowManager-modal .oo-ui-widget,
.ve-ui-mwTemplateDialog .oo-ui-labelElement-label,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTemplateDialog .oo-ui-fieldsetLayout-header label {
color: #f4f7f8 !important;
}
.oo-ui-windowManager-modal .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-undocumentedLabel,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .mw-widget-titleOptionWidget-description {
color: #a9bbc1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-inputWidget-input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget textarea,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget input,
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
background: #0d1519 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: #42c7d9 !important;
box-shadow: 0 0 0 2px rgba(66,199,217,.32) !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: #25353d !important;
border-color: #52646b !important;
color: #f4f7f8 !important;
box-shadow: none !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: #31454f !important;
border-color: #ff8a00 !important;
color: #ffb347 !important;
}
.oo-ui-windowManager-modal .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: #ff8a00 !important;
border-color: #ff8a00 !important;
color: #111820 !important;
font-weight: 700 !important;
}
.oo-ui-windowManager-modal .oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background: #1c2a31 !important;
border-color: #3f5159 !important;
color: #8fa1a8 !important;
opacity: 1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget:hover,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: #25353d !important;
color: #f4f7f8 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span::before {
background-color: #0d1519 !important;
border-color: #7f9299 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before {
background-color: #ff8a00 !important;
border-color: #ff8a00 !important;
}
/* EDFM cookie preferences banner */
#edfm-cookie-banner {
position: fixed;
z-index: 10000;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: flex;
justify-content: center;
pointer-events: none;
}
#edfm-cookie-banner .edfm-cookie-card {
max-width: 800px;
border: 1px solid rgba(80, 220, 240, 0.65);
background: rgba(3, 14, 22, 0.98);
box-shadow: 0 0 22px rgba(80, 220, 240, 0.22), 0 12px 36px rgba(0, 0, 0, 0.45);
color: #dffbff;
padding: 1rem;
font-size: 0.95rem;
pointer-events: auto;
}
#edfm-cookie-banner .edfm-cookie-title {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fe0ec;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-text { margin: 0 0 0.75rem; line-height: 1.45; }
#edfm-cookie-banner .edfm-cookie-categories {
display: grid;
gap: 0.65rem;
margin: 0.65rem 0 0.85rem;
}
#edfm-cookie-banner .edfm-cookie-category {
border: 1px solid rgba(127, 224, 236, 0.32);
background: rgba(7, 28, 38, 0.74);
padding: 0.7rem;
}
#edfm-cookie-banner .edfm-cookie-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-category h3 {
margin: 0;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f3feff;
}
#edfm-cookie-banner .edfm-cookie-category p {
margin: 0;
line-height: 1.42;
color: #c6e6eb;
}
#edfm-cookie-banner .edfm-cookie-status {
white-space: nowrap;
border: 1px solid rgba(255, 138, 0, 0.7);
color: #ffd69a;
background: rgba(255, 138, 0, 0.12);
padding: 0.2rem 0.48rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#edfm-cookie-banner .edfm-cookie-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-weight: 700;
color: #f3feff;
cursor: pointer;
}
#edfm-cookie-banner .edfm-cookie-switch input {
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color: #ff8a00;
}
#edfm-cookie-banner .edfm-cookie-switch input:focus-visible {
outline: 2px solid #7fe0ec;
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#edfm-cookie-banner button {
border: 1px solid rgba(127, 224, 236, 0.7);
background: rgba(9, 50, 65, 0.92);
color: #f3feff;
padding: 0.45rem 0.7rem;
cursor: pointer;
}
#edfm-cookie-banner button:hover,
#edfm-cookie-banner button:focus-visible {
background: rgba(17, 88, 108, 0.98);
outline: 2px solid rgba(127, 224, 236, 0.85);
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-links { margin-top: 0.6rem; font-size: 0.85rem; }
#edfm-cookie-banner a { color: #7fe0ec; }
@media (max-width: 600px) {
#edfm-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
#edfm-cookie-banner .edfm-cookie-card { max-height: calc(100vh - 1rem); overflow: auto; }
#edfm-cookie-banner .edfm-cookie-category-head { align-items: flex-start; }
#edfm-cookie-banner .edfm-cookie-actions button { flex: 1 1 100%; }
}

/* ==========================================================================
EDFM Vector watchstar dark-theme fix — 2026-08-16
Vector legacy renders the page watch/unwatch affordance as a small SVG
background on `#ca-watch/#ca-unwatch a::before`. On EDFM's dark tab row the
upstream light-skin URLs can be too low-contrast, and some deployments do not
expose ResourceLoader's dotted asset path directly. Use inline SVGs in the
EDFM palette so the watchstar is always visible in the top action menu.
========================================================================== */
.vector-menu-tabs #ca-watch.icon a::before,
.vector-menu-tabs-legacy #ca-watch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2310171b' stroke='%2342c7d9' stroke-width='1.35' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.42 ) );
opacity: 0.96;
}
.vector-menu-tabs #ca-unwatch.icon a::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.2' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 4px rgba( 255, 138, 0, 0.45 ) );
opacity: 0.98;
}
.vector-menu-tabs #ca-watch.icon a:hover::before,
.vector-menu-tabs #ca-watch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-watch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-watch.icon a:focus::before,
.vector-menu-tabs #ca-unwatch.icon a:hover::before,
.vector-menu-tabs #ca-unwatch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:focus::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.25' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 5px rgba( 255, 138, 0, 0.65 ) );
opacity: 1;
}

/* ==========================================================================
EDFM Special:Preferences dark theme fix — 2026-08-16
Preferences is an OOUI/Codex-heavy special page. Core styles bring in a
light tab strip and sticky submit footer, so theme the actual preferences
wrapper rather than only generic form controls.
========================================================================== */
body.mediawiki.mw-special-Preferences #preferences,
body.mediawiki.mw-special-Preferences #mw-prefs-container,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-fieldset-wrapper,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout-framed {
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed {
box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.32 );
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-menu,
body.mediawiki.mw-special-Preferences .oo-ui-menuLayout-menu {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabSelectWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget:hover,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: inset 0 -3px 0 var( --edfm-orange ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header label,
body.mediawiki.mw-special-Preferences .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .mw-prefs-title {
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-description,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-help,
body.mediawiki.mw-special-Preferences .oo-ui-inline-help,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-messages,
body.mediawiki.mw-special-Preferences .htmlform-tip,
body.mediawiki.mw-special-Preferences .mw-htmlform-help {
background: transparent !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownInputWidget select,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownWidget-handle,
body.mediawiki.mw-special-Preferences input[type='text'],
body.mediawiki.mw-special-Preferences input[type='number'],
body.mediawiki.mw-special-Preferences input[type='email'],
body.mediawiki.mw-special-Preferences textarea,
body.mediawiki.mw-special-Preferences select {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-inputWidget-input::placeholder,
body.mediawiki.mw-special-Preferences input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus,
body.mediawiki.mw-special-Preferences input:focus,
body.mediawiki.mw-special-Preferences textarea:focus,
body.mediawiki.mw-special-Preferences select:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox'] {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox']:checked {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
accent-color: var( --edfm-orange );
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit,
body.mediawiki.mw-special-Preferences button,
body.mediawiki.mw-special-Preferences input[type='submit'] {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit:hover,
body.mediawiki.mw-special-Preferences button:hover,
body.mediawiki.mw-special-Preferences input[type='submit']:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
body.mediawiki.mw-special-Preferences #preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .oo-ui-window-foot .mw-htmlform-submit-buttons {
background: rgba( 16, 23, 27, 0.96 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
box-shadow: 0 -10px 24px rgba( 0, 0, 0, 0.34 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-search-highlight,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
background: rgba( 66, 199, 217, 0.18 ) !important;
outline-color: rgba( 66, 199, 217, 0.32 ) !important;
color: var( --edfm-text ) !important;
}

MediaWiki:Common.css

2026-08-19T19:58:33Z

EDFM Site Maintenance: Restore edit-source dark styling in Common.css (moved off vendor-file hacks) and cover the previously-unstyled VisualEditor Edit source surface

/* ==========================================================================
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).

2026-08-07 SECOND PASS: the first redesign pass was judged too close to
stock MediaWiki with a colour change -- this pass changes the actual
visual composition (centred workspace instead of a huge dead gutter,
a two-tier header, a real masthead, a tile-grid TOC, a restructured
status module, larger deliberate type scale, depth via surface
elevation instead of borders-around-everything) while reusing every
working mechanism from the first pass rather than throwing it away --
the tab/:visited fix, the external-link specificity fix, the mobile
reorder fix, and focus-visible/reduced-motion are all still here,
unchanged in mechanism.
========================================================================== */

/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* Depth system: site (outermost, visible in the sidebar/header/gutters)
-> article surface -> component surfaces, each a deliberate step
brighter so the page reads as having actual depth rather than "one
background colour with slightly lighter boxes everywhere". */
--edfm-bg-deep: #07090b;
--edfm-bg-page: #0a0e11;
--edfm-surface-1: #10171b;
--edfm-surface-2: #161f24;
--edfm-surface-3: #1c272d;
--edfm-surface-4: #233037;

--edfm-border: #26333b;
--edfm-border-soft: rgba( 255, 255, 255, 0.06 );

--edfm-text: #edf0f2;
--edfm-text-muted: #98a5ad;
--edfm-text-dim: #6c7a82;

/* 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 */
--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 );
--edfm-status-positive-bg: rgba( 66, 199, 217, 0.12 );
--edfm-status-attention-bg: rgba( 255, 138, 0, 0.12 );
--edfm-status-neutral-bg: rgba( 108, 122, 130, 0.12 );

/* Typography -- explicit desktop scale (2026-08-07 pass 2). Sized in
rem against the root's real 16px (Vector legacy's own
@font-size-root is 100%, i.e. browser default -- confirmed by
reading skins.vector.styles.legacy/variables.less, not assumed)
rather than nested em, specifically so component sizes can't
compound smaller than intended inside whatever ambient size an
ancestor happens to set. */
--edfm-fs-title: clamp( 1.9rem, 1.4rem + 2vw, 2.25rem ); /* ~30-36px */
--edfm-fs-h2: 1.35rem; /* ~21.6px */
--edfm-fs-h3: 1.15rem; /* ~18.4px */
--edfm-fs-body: 1rem; /* 16px */
--edfm-fs-resource-name: 1.1rem; /* ~17.6px */
--edfm-fs-meta: 0.8rem; /* ~12.8px */
--edfm-fs-sidebar: 0.9375rem; /* 15px -- polish pass: +1px for readability */
--edfm-fs-utility: 0.72rem; /* ~11.5px */

--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 );

/* Geometry / layout */
--edfm-corner: 10px;
/* Full-width article workspace: keep the fixed Vector sidebar clear,
but let the article surface use the entire remaining viewport. */
--edfm-sidebar-width: 12.75rem;
--edfm-sidebar-clear: 12.75rem;
--edfm-content-max: calc( 100vw - var( --edfm-sidebar-clear ) );
--edfm-gutter: 0px;
}

/* ==========================================================================
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 );
font-size: var( --edfm-fs-body );
}
/* Background treatment: a faint technical grid plus a very soft radial
glow centred behind the (now centred) content column, so the composition
still has quiet visual interest in the gutters on ultrawide screens
instead of just flat colour -- both stay under ~3% opacity, this is
texture, not a HUD. Not image assets; pure CSS gradients. */
body {
background-image:
radial-gradient( ellipse 1400px 900px at 50% 0%, rgba( 66, 199, 217, 0.05 ), transparent 60% ),
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: auto, 48px 48px, 48px 48px;
background-repeat: no-repeat, repeat, repeat;
background-attachment: fixed, scroll, scroll;
}
/* Full-height sidebar rail: mirrors the RuneScape.wiki behavior where the
left rail has no visible bottom edge. The real #mw-panel only carries the
navigation content; this fixed layer paints the uninterrupted surface,
border, and shadow down the whole viewport. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var( --edfm-sidebar-width );
background: linear-gradient( 180deg, var( --edfm-surface-1 ) 0%, var( --edfm-bg-deep ) 100% );
border-right: 1px solid var( --edfm-border );
box-shadow: 10px 0 22px rgba( 0, 0, 0, 0.32 );
pointer-events: none;
z-index: 1;
}
@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: 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;
}

/* Small reusable angular motif: a corner-cut bracket, used sparingly (see
the redesign notes in docs/content-style-guide.md for exactly where) --
deliberately not applied everywhere. */
.edfm-corner-cut {
clip-path: polygon( 0 0, calc( 100% - var( --edfm-corner ) ) 0, 100% var( --edfm-corner ), 100% 100%, 0 100% );
}

/* ==========================================================================
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: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.75rem, 1.35rem + 1.45vw, 2.15rem );
font-weight: 700;
letter-spacing: 0;
line-height: 1.18;
margin: 0.15em 0 0.25em;
padding-bottom: 0.22em;
border-bottom: 1px solid var( --edfm-border );
}
/* Section headings (h2): "// " prefix in orange, bright heading text, a
short orange accent segment over the dim full-width divider core
already draws. Substantially more vertical space than a wiki section
normally gets, per the "sections feel packed together" fix -- 3.25rem
(~52px) above, ~1.1rem gap to the first content component below. If a
heading opts into explicit numbering via {{Section number}}, the
automatic "// " is suppressed so the two treatments don't double up. */
.mw-body h2 {
position: relative;
padding-bottom: 0.25em;
margin-top: 2rem;
margin-bottom: 0.85rem;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.28rem, 1.08rem + 0.65vw, 1.62rem );
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid var( --edfm-border ) !important;
}
.mw-body h2::before {
content: none;
}
.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 );
font-size: var( --edfm-fs-h3 );
}
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.7;
font-size: var( --edfm-fs-body );
}
.mw-body p {
margin: 0 0 1.1em 0;
max-width: none !important; /* Site-wide full-width pass: article text should use the whole content rail. */
}
.mw-body ul,
.mw-body ol {
line-height: 1.7;
margin-bottom: 1.1em;
}

/* EDFM article bullets: replace the stock browser dot with the provided
cyan field-manual arrow, scaled to text size rather than using the source
image's native 100x91 dimensions. This targets article unordered lists;
interface/navigation lists such as the Jump To TOC and galleries are reset
below so they keep their component-specific layout. */
.mw-parser-output ul {
list-style: none;
padding-left: 1.55em;
}
.mw-parser-output ul > li {
position: relative;
}
.mw-parser-output ul > li::before {
content: '';
position: absolute;
left: -1.35em;
top: 0.48em;
width: 0.82em;
height: 0.75em;
background-image: url( '/edfm-assets/list-bullet-arrow.png' );
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.95;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.35 ) );
}
.mw-parser-output ul ul {
margin-top: 0.3em;
padding-left: 1.45em;
}
.mw-parser-output ul ul > li::before {
left: -1.25em;
top: 0.52em;
width: 0.68em;
height: 0.62em;
opacity: 0.82;
}
/* Component exceptions: these are not prose bullet lists. */
.mw-parser-output .toc ul,
.mw-parser-output .gallery,
.mw-parser-output .gallery ul,
.mw-parser-output .mw-gallery-traditional,
.mw-parser-output .mw-gallery-traditional ul {
padding-left: 0;
}
.mw-parser-output .toc li::before,
.mw-parser-output .gallery li::before,
.mw-parser-output .mw-gallery-traditional li::before {
content: none;
}
/* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the
sibling that immediately follows is that wrapper, not the `h2`/`h3`
itself -- matching both forms since a page could still have a bare
heading in edge cases (e.g. content generated without the wrapper). */
.mw-heading2 + p, .mw-body h2 + p,
.mw-heading3 + p, .mw-body h3 + p,
.mw-heading2 + div, .mw-body h2 + div,
.mw-heading3 + div, .mw-body h3 + div {
margin-top: 0;
}
hr {
background-color: var( --edfm-border );
border-color: var( --edfm-border );
}

/* Quiet, discoverable section-edit controls (logged-in editors only --
MediaWiki only renders these for users who can edit). Keeping the
functionality/keyboard access intact while making sure they don't
compete visually with the heading they're attached to: low opacity at
rest, full opacity on hover/focus of the heading OR the control itself,
brackets hidden (the opacity+letter-spacing treatment already reads as
a distinct control without them). */
.mw-editsection {
margin-left: 1em;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility ) !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.45;
transition: opacity 0.15s ease;
}
.mw-heading:hover .mw-editsection,
.mw-heading:focus-within .mw-editsection,
.mw-editsection:hover,
.mw-editsection:focus-within {
opacity: 1;
}
.mw-editsection a {
color: var( --edfm-text-dim );
}
.mw-editsection a:hover,
.mw-editsection a:focus-visible {
color: var( --edfm-cyan );
}
.mw-editsection-bracket {
display: none;
}
.mw-editsection-divider {
color: var( --edfm-text-dim );
margin: 0 0.3em;
}

/* ==========================================================================
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. GLOBAL LAYOUT -- centred workspace
========================================================================== */
/* Full-width article pass: the article now fills the workspace to the right edge.
Historical note: this block originally centred a capped article column.

THE fix for "enormous unused region on the right side of wide displays".
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 with no max-width at all -- the first redesign
pass added a max-width but left the column pinned to the sidebar's left
edge, which is *why* it still read as "a column stuck on the left with
dead space on the right" rather than a composed layout.

Fix: instead of a fixed `margin-left: 11em`, compute how much space is
left over in the workspace (viewport minus the sidebar) once the
content has its max-width, and split that leftover evenly between the
left and right margins (via the --edfm-gutter token above) -- so the
article is centred *within the workspace to the right of the sidebar*,
not centred in the full viewport (which would ignore the sidebar and
look off-centre) and not pinned to its left edge either. On a screen
too narrow for sidebar + max-width content, --edfm-gutter naturally
evaluates to 0 and this degrades to the old "fill the workspace"
behaviour -- no separate narrow-screen override needed.

The header/tab bar's own float/absolute-position box (#mw-head) is left
at its native full width deliberately -- rewriting *that* mechanism is
a different, much higher-risk change (it took several rounds to get
right originally) -- but its *contents* (search box, personal tools,
namespace/view tabs) get their own right/left offsets pulled in by the
same --edfm-gutter below, so they still visually line up with the
centred column beneath them instead of hugging the browser edge. */
.mw-body,
#mw-data-after-content,
.mw-footer {
position: relative;
z-index: 2;
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
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,
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
/* Keep real table layout so header cells and body cells share one column grid.
The earlier display:block + tbody display:table overflow hack made sortable
headers size independently from body columns, which visibly misaligned the
Engineer directory after portrait chips were added. */
display: table;
width: 100%;
table-layout: auto;
}
.mw-body table.wikitable th,
.mw-body table.wikitable td,
.mw-body table.mw-datatable th,
.mw-body table.mw-datatable td {
vertical-align: middle;
}
.mw-body img {
max-width: 100%;
height: auto;
}

/* ==========================================================================
4. ARTICLE MASTHEAD (eyebrow / title / deck)
========================================================================== */
/* Eyebrow line is authored as ordinary wikitext (see Template:Article
header) and, purely as a placement detail, a small script
(MediaWiki:Common.js) moves it directly above #firstHeading on 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).
If JS is unavailable the eyebrow still renders, just directly under the
title instead of above it.

The eyebrow/title/deck aren't wrapped in one literal bounding box (they
live at two different DOM depths -- eyebrow is a sibling of #firstHeading,
deck is inside the article body further down -- wrapping them in one
real container would need heavier JS than is justified here), so the
"designed masthead" read comes from a matching top rule above the
eyebrow and bottom rule below the deck, a small angular marker, and the
larger title/subtitle type scale, rather than one drawn box. */
.edfm-eyebrow {
display: block;
margin: 0.2em 0 0.15em 0;
padding: 0;
border: 0;
font-family: var( --edfm-sans );
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --edfm-text-dim );
}
.edfm-eyebrow::before {
content: none;
}
.edfm-eyebrow .edfm-orange-mark {
color: var( --edfm-orange );
}
.edfm-deck {
color: var( --edfm-text-muted );
font-family: var( --edfm-sans );
font-size: 0.95rem;
font-style: italic;
line-height: 1.45;
max-width: none;
margin: 0.25em 0 0.85em 1.4em;
padding: 0;
border: 0;
}

/* ==========================================================================
1. SIDEBAR
========================================================================== */
#mw-panel {
background: transparent;
box-sizing: border-box;
width: var( --edfm-sidebar-width );
padding: 0 0.65rem 1.35rem 0.65rem;
border-right: 0;
box-shadow: none;
z-index: 3;
}
/* Logo anchors the sidebar visually. Keep raster logo artwork contained in
Vector legacy's fixed sidebar slot rather than letting the image render at
its intrinsic PNG size and clip against the rail. */
#p-logo {
box-sizing: border-box;
width: auto;
height: 10rem;
margin: 0 -0.65rem 0.65rem -0.65rem;
padding: 0.5rem 0.55rem 0.45rem 0.55rem;
border-bottom: 0 !important;
background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% );
overflow: hidden;
}
#p-logo a.mw-wiki-logo {
box-sizing: border-box;
display: block;
width: 100% !important;
height: 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
/* Each nav group gets real breathing room from the one before it instead
of being packed together like a stock wiki sidebar. */

#mw-panel .portal,
#mw-panel .vector-menu-portal {
box-sizing: border-box;
width: auto;
max-width: none;
margin-top: 1.45rem;
}
#mw-panel .portal:first-of-type,
#mw-panel .vector-menu-portal:first-of-type {
margin-top: 0;
}
#mw-panel .portal .body,
#mw-panel .portal ul,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list {
box-sizing: border-box;
width: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
border-color: var( --edfm-border-soft );
}
#mw-panel .portal a {
color: var( --edfm-text-muted );
display: block;
font-size: var( --edfm-fs-sidebar );
line-height: 1.35;
padding: 0.42em 0.55em;
margin: 0.08em -0.35em;
border-left: 2px solid transparent;
border-radius: 2px;
}
#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). */
.edfm-nav-current > a {
color: var( --edfm-orange ) !important;
font-weight: 700;
border-left-color: var( --edfm-orange );
border-left-width: 3px;
background: var( --edfm-surface-2 );
box-shadow: inset 0 0 0 1px rgba( 255, 138, 0, 0.08 );
}
.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: var( --edfm-fs-utility );
border-left: 2px solid var( --edfm-orange );
padding-left: 0.5em;
margin-left: -0.5em;
margin-bottom: 0.4em;
}

/* ==========================================================================
3. TOP BAR -- two-tier chrome
========================================================================== */
/* Vector legacy's #mw-head naturally has ~2.5em of empty space above the
tabs row (core: `#left-navigation/#right-navigation { margin-top:2.5em }`),
originally reserved just for #p-personal to float in. Painting that same
box with a background gradient that stays transparent for that top
band and then switches to a surface colour for the tabs band creates a
real two-tier read -- "primary chrome" (personal tools/search, over the
page's own background) above "wiki authoring controls" (the tabs, on
their own distinct strip) below -- without touching #mw-head's own
position/width mechanics, which is the same fragile absolute-position
system the very first pass of this project had to debug carefully to
get the persistent sidebar working at all. Not worth re-risking that
for a background change. */
#mw-head {
background-image: linear-gradient(
to bottom,
transparent 0,
transparent 2.35em,
var( --edfm-surface-2 ) 2.35em,
var( --edfm-surface-2 ) 100%
);
border-bottom: 1px solid var( --edfm-border );
}
#mw-page-base {
background-color: var( --edfm-bg-deep );
background-image: none;
}
#mw-head-base {
background-color: var( --edfm-bg-deep );
/* Polish pass: thinned from 2px -- at 2px this competed visually with
the masthead's own orange marker/rule directly below it; a single
thinner accent line still reads as "site identity colour" without
the repetition. */
border-bottom: 1px solid var( --edfm-orange );
}
/* Personal tools (login/logout) and the search box are the "primary
chrome" tier -- pulled in by the same gutter used to centre the article,
so on wide screens they visually line up with the centred column
instead of hugging the browser edge, and given noticeably more visual
weight than the tabs below them. */
#p-personal {
right: calc( 0.75em + var( --edfm-gutter ) );
display: flex;
align-items: center;
gap: 0.75rem;
}
#p-personal ul {
display: flex;
align-items: center;
gap: 0.55rem;
}
#p-personal li {
margin-left: 0;
}
#p-personal a {
color: var( --edfm-text-muted );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.3em 0.2em;
}
#p-personal a:hover {
color: var( --edfm-orange );
}
/* Echo's alert/notification icons (bell/tray) in the personal toolbar.
Confirmed by rendering the actual logged-in markup server-side: in
legacy Vector these links get merged straight into the plain personal
tools menu (SkinVectorLegacy::runOnSkinTemplateNavigationHooks) rather
than going through Vector's own `.vector-icon` icon system (that only
wraps items in the views/associated-pages menus). The icon is instead a
`background-image` on the <a> itself, from OOUI's generated
`.oo-ui-icon-bell` / `-tray` / `-bellOutline` classes -- a flat black SVG
baked straight into the image URL, so it's not recolourable via
`background-color` the way the search icon was; this is exactly the
"dark OOUI icon invisible on our dark theme" problem the invert fix
below already solves elsewhere, so reuse that same technique here
instead of a different one. The unread-count badge itself already
colours correctly on its own (Echo maps it to
`@background-color-destructive` / `-progressive`, both redefined to
EDFM's palette) and, being a mostly-saturated colour rather than
black/white/grey, survives this filter close to unchanged. */
#pt-notifications-alert .oo-ui-icon-bell,
#pt-notifications-notice .oo-ui-icon-tray,
#pt-notifications .oo-ui-icon-bellOutline {
filter: invert( 1 ) hue-rotate( 180deg );
}
.edfm-topbar-clocks {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
line-height: 1;
white-space: nowrap;
}
.edfm-topbar-clock {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.55em;
background: rgba( 66, 199, 217, 0.08 );
border: 1px solid var( --edfm-border-soft );
border-left: 2px solid var( --edfm-cyan );
color: var( --edfm-text );
}
.edfm-topbar-clock-label {
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edfm-topbar-clock time {
color: var( --edfm-cyan );
font-weight: 700;
}
.edfm-topbar-clock-local {
background: rgba( 255, 138, 0, 0.06 );
border-left-color: var( --edfm-orange );
}
.edfm-topbar-clock-local time {
color: var( --edfm-orange-bright );
}
#right-navigation {
margin-right: var( --edfm-gutter );
}
#left-navigation {
margin-left: var( --edfm-sidebar-clear );
}
/* Polish pass: core caps this at `width:20vw; max-width:20em`, which read
as cramped next to the rest of the (now larger-scale) interface --
given more room on desktop, still capped so it can't dominate the bar. */
.vector-search-box-inner {
width: 22vw;
max-width: 24em;
}
.vector-search-box-inner input,
#searchInput {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
border: 1px solid var( --edfm-border );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.5em 0.7em;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#searchInput:focus {
border-color: var( --edfm-cyan );
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.22 );
outline: none;
}
#searchInput::placeholder {
color: var( --edfm-text-dim );
}
/* Search submit control: neither rendering path gives this any color of
its own, so on our dark input background it was effectively invisible.
The no-JS legacy form's <button> is a plain black icon at 0.67 opacity
(core skins.vector.styles.legacy/components/SearchBox.less); the
JS/Vue-Codex widget (.vector-search-box-vue) has no separate button at
all, just a start icon inside the input using the same technique
(mask-image recoloured via `background-color`, see Codex's
CdxSearchInput.css). Recolour both to match the site's orange
progressive-action colour used everywhere else. */
.vector-search-box-vue .cdx-text-input__start-icon {
background-color: var( --edfm-orange );
opacity: 1;
}
.searchButton[ name='go' ] {
background-image: none;
background-color: var( --edfm-orange );
opacity: 0.85;
-webkit-mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
}
.searchButton[ name='go' ]:hover,
.searchButton[ name='go' ]:focus {
background-color: var( --edfm-orange-bright );
opacity: 1;
}
/* 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.

These are the "wiki authoring controls" utility tier -- deliberately
smaller (--edfm-fs-utility) and quieter than personal-tools/search
above them, sitting on their own background strip (see #mw-head above).
Selected state stays orange (it's still real navigation, just
secondary); unselected rests dim so the *selected* tab is the one that
reads clearly. */
.vector-menu-tabs-legacy li {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs-legacy li.selected {
background-image: none;
background-color: var( --edfm-surface-1 );
/* Polish pass: a small underline makes the selected tab unambiguous at
a glance instead of relying on the text colour change alone. */
box-shadow: inset 0 -2px 0 var( --edfm-orange );
}
.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 );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 700;
}
.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. */
.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;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var( --edfm-fs-utility );
font-weight: 700;
}
.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-3 );
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 );
font-size: var( --edfm-fs-sidebar );
}
.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-4 );
}

/* Front-page chrome: the hero already names the site, so suppress the
generated MediaWiki page title only on the Main Page. Keep the namespace
tab label and all other article titles intact. */
body.page-Main_Page #firstHeading {
display: none;
}
body.page-Main_Page .mw-body-content {
margin-top: 0;
}

/* ==========================================================================
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 );
}
.mw-body {
border-right: 1px solid var( --edfm-border );
}
#content {
background-color: var( --edfm-surface-1 );
}

/* Site notice chrome. The global disclaimer was moved to its dedicated
legal/disclaimer page, so an empty #siteNotice must not leave behind a
phantom divider at the top of the article surface. */
#siteNotice:empty {
display: none;
}
#siteNotice:not( :empty ) {
font-size: var( --edfm-fs-meta );
line-height: 1.5;
color: var( --edfm-text-dim );
font-style: normal;
padding-bottom: 0.7em;
margin-bottom: 1.4rem;
border-bottom: 1px solid var( --edfm-border-soft );
}
#siteNotice:not( :empty ) em, #siteNotice:not( :empty ) i {
color: var( --edfm-text-muted );
font-style: italic;
}
#siteNotice:not( :empty ) a {
color: var( --edfm-link-external );
}
#siteNotice a:hover {
color: var( --edfm-link-external-hover );
}

/* ==========================================================================
HOME PAGE DASHBOARD
========================================================================== */
.edfm-home-hero {
margin: 0.9rem 0 1.6rem;
padding: 1.35rem 1.55rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.16 ), transparent 34% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.14 ), transparent 42% ),
var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 4px solid var( --edfm-cyan );
clip-path: polygon( 0 0, calc( 100% - 12px ) 0, 100% 12px, 100% 100%, 0 100% );
}
.edfm-home-hero-kicker,
.edfm-home-card-kicker {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.edfm-home-hero-title {
margin-top: 0.25rem;
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: clamp( 1.55rem, 1.1rem + 1.5vw, 2.2rem );
font-weight: 800;
line-height: 1.15;
}
.edfm-home-hero-text {
max-width: none;
margin-top: 0.55rem;
color: var( --edfm-text-muted );
font-size: 1.05rem;
line-height: 1.55;
}
.edfm-home-grid {
display: grid;
gap: 1rem;
margin: 1.2rem 0 2rem;
}
.edfm-home-grid-four {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.edfm-home-grid-topics {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-grid-two {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-card {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
padding: 1rem 1.1rem;
box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.2 );
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-home-card:hover {
transform: translateY( -2px );
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-orange );
}
.edfm-home-card-primary {
border-left-color: var( --edfm-orange );
}
.edfm-home-card-warning {
border-left-color: var( --edfm-text-dim );
}
.edfm-home-card-title,
.edfm-home-card-title a {
margin-top: 0.35rem;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.edfm-home-card-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-home-card-text,
.edfm-home-link-list {
margin-top: 0.65rem;
color: var( --edfm-text-muted );
line-height: 1.6;
}
.edfm-home-link-list a {
font-weight: 600;
}
@media ( max-width: 1100px ) {
.edfm-home-grid-four {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( max-width: 760px ) {
.edfm-home-grid-four,
.edfm-home-grid-topics,
.edfm-home-grid-two {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
HOME PAGE NEWS MODULE
========================================================================== */
.edfm-home-news {
margin: 1.8rem 0 2.2rem;
}
.edfm-news-feature-grid {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 1rem;
margin-bottom: 1rem;
}
.edfm-news-card,
.edfm-news-list {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
box-shadow: 0 14px 26px rgba( 0, 0, 0, 0.22 );
overflow: hidden;
}
.edfm-news-card {
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-news-card:hover {
transform: translateY( -2px );
border-color: rgba( 255, 138, 0, 0.48 );
background: var( --edfm-surface-3 );
}
.edfm-news-card-art {
display: flex;
align-items: flex-end;
min-height: 7rem;
padding: 0.8rem 1rem;
box-sizing: border-box;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.28 ), transparent 42% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.2 ), transparent 48% ),
linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-1 ) );
border-bottom: 1px solid var( --edfm-border );
color: rgba( 237, 240, 242, 0.72 );
font-family: var( --edfm-mono );
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.edfm-news-card-primary .edfm-news-card-art {
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.38 ), transparent 46% ),
linear-gradient( 315deg, rgba( 79, 159, 232, 0.26 ), transparent 52% ),
var( --edfm-surface-4 );
}
.edfm-news-card-body {
padding: 1rem 1.15rem 1.15rem;
}
.edfm-news-meta {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.edfm-news-title,
.edfm-news-title a {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.edfm-news-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-news-summary {
color: var( --edfm-text-muted );
line-height: 1.55;
margin-top: 0.65rem;
}
.edfm-news-list {
padding: 1.1rem 1.25rem 1.2rem;
border-left: 4px solid var( --edfm-orange );
}
.edfm-news-list-heading {
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.edfm-news-list ul {
margin: 0;
}
.edfm-news-list li {
margin-bottom: 0.55rem;
color: var( --edfm-text-muted );
}
.edfm-news-more {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px solid var( --edfm-border-soft );
text-align: right;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
@media ( max-width: 900px ) {
.edfm-news-feature-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
10. JUMP NAVIGATION (table of contents)
========================================================================== */
/* A compact navigation strip/tile-grid rather than a traditional TOC box
of small text links -- real MediaWiki anchors/markup untouched, this is
all presentation. "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 {
display: block;
width: 100%;
box-sizing: border-box;
background: none;
border: none;
color: var( --edfm-text );
padding: 0;
margin: 1.8rem 0;
}
.toctitle {
position: relative;
margin-bottom: 0.7em;
}
.toctitle::before {
content: 'Jump to';
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-orange );
}
/* Core ships `.toc h2 { font-size: 100%; ... }` (mediawiki.skinning/toc/
screen.less) at the exact same specificity (one class + one tag) as a
plain `.toctitle h2` rule -- same "tie that doesn't resolve the way
naive source order would suggest" gotcha documented elsewhere in this
file. #toc's own ID makes this one unambiguous instead of relying on
cascade order. */
#toc .toctitle h2,
.toc .toctitle h2 {
font-size: 0 !important;
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 );
}
/* Desktop: a balanced multi-column jump list. CSS grid flows row-first,
which makes numbered sections read 1, 2, 3, 4 across the first row. For a
reference/walkthrough TOC, scan order is clearer when each column reads
downward first: 1/2/3, then 4/5/6, then 7/8/9. CSS columns preserve the
real DOM/source order while presenting that column-major layout on every
page that uses the stock MediaWiki TOC. */
.toc > ul {
display: block;
column-count: 3;
column-gap: 0.45rem;
list-style: none;
margin: 0;
padding: 0;
}
.toc > ul > li {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 0.45rem;
}
.toc li {
margin-top: 0;
}
/* 2026-08-08 density pass: reverted to side-by-side number/label (from the
earlier "stacked number-above-label" polish pass) specifically to cut
per-tile height -- with 12 sections on articles like The Dweller, the
stacked layout meant the jump nav alone filled most of the first
viewport. Row layout plus tighter padding/font-size gets noticeably
more sections above the fold without dropping the numbering or shrinking
tap targets below a comfortable size -- see the dedicated mobile padding
bump further down for keeping touch targets safe on small screens
specifically. Whole tile stays one real <a>, so it's still a single
click/focus target and keyboard tab stop either way. */
.toc a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
height: 100%;
box-sizing: border-box;
padding: 0.5em 0.75em 0.5em 0.7em;
background: var( --edfm-surface-3 );
/* Left accent rail: matches the orange section numbers and gives each
jump tile a stronger EDFM navigation affordance without boxing the
entire card. */
border-left: 4px solid var( --edfm-orange );
box-shadow: inset 1px 0 0 rgba( 255, 162, 26, 0.35 );
color: var( --edfm-text-muted );
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.toc a:hover {
background: var( --edfm-surface-4 );
border-left-color: var( --edfm-cyan );
box-shadow: inset 1px 0 0 rgba( 66, 199, 217, 0.45 );
color: var( --edfm-text );
transform: translateY( -1px );
}
/* Nested sub-levels (rare on this site so far) drop back to a plain
indented block list inside their parent tile's grid cell rather than
trying to stay gridded themselves. */
.toc ul ul {
grid-column: unset;
list-style: none;
margin: 0.3em 0 0 1.2em;
padding: 0;
display: block;
}
.toc ul ul a {
flex-direction: row;
align-items: center;
background: none;
border-left-width: 1px;
padding: 0.3em 0.6em;
}
.toc ul ul .tocnumber {
font-size: 0.85em;
}
.toc ul ul .toctext {
font-size: 0.85em;
}
.tocnumber {
color: var( --edfm-orange );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: 1.05rem;
line-height: 1;
}
.toctext {
color: inherit;
font-size: 0.85rem;
line-height: 1.3;
}
/* Column count changes only at readable/touch-friendly breakpoints. Keep
column-major ordering at 3 and 2 columns; mobile becomes the natural single
source-order list. */
@media ( max-width: 860px ) {
.toc > ul {
column-count: 2;
}
}
@media ( max-width: 560px ) {
.toc > ul {
column-count: 1;
}
/* Single-column tiles are already full-width here, so there's no
density pressure left -- restore closer to the pre-2026-08-08
padding instead of the tighter desktop value, keeping tap targets
comfortable rather than compacting mobile just because desktop
compacted. */
.toc a {
padding: 0.7em 0.95em;
}
}

/* ==========================================================================
5b. FULL-WIDTH ARTICLE FLOW OVERRIDES
========================================================================== */
/* 2026-08-10 audit: EDFM pages should not leave half the article rail empty.
Earlier readability caps on paragraphs/hero copy made long-form sections
look like narrow blocks while tables, TOCs, and navigation tiles spanned
the page. Keep the main rail full-width everywhere; individual components
may still opt into their own internal grids, but ordinary article copy and
common block containers should stretch to the content edge. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > div:not( .thumb ):not( .tright ):not( .tleft ):not( .floatright ):not( .floatleft ):not( .edfm-status ):not( .edfm-panel ):not( .edfm-box ) {
max-width: none;
box-sizing: border-box;
}
/* Final guard against stale/skin rules recapping article prose while leaving
compact maintenance/status panels free to keep their intentional centred width. */
.mw-body .mw-parser-output > p,
.mw-parser-output > p {
max-width: none !important;
width: 100%;
box-sizing: border-box;
}

/* ==========================================================================
6. PANELS / CALLOUTS, and 11. ARTICLE METADATA / STATUS MODULE
========================================================================== */
/* Deliberately NOT defined here. .edfm-box / .edfm-panel* / .edfm-status* /
.edfm-inline-flag / .edfm-related* are used exclusively by the
editorial templates (see Template:Article status, Template:Draft
warning, Template:Related articles, 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 );
font-size: var( --edfm-fs-body );
}
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: var( --edfm-fs-meta );
text-align: left;
padding: 0.6em 0.8em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
/* 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 );
}

/* mw-json content model (Module:Data/* pages, e.g. Module:Data/Engineers/*)
-- MediaWiki core's JSON page view (resources/src/mediawiki.content.json.less)
styles itself from Codex design tokens, which this site's dark theme never
touches, so these tables rendered in MediaWiki's stock light colours
against every other dark surface on the site. Recoloured to match the
table.wikitable treatment above instead of inventing a new look. */
table.mw-json {
background-color: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: var( --edfm-fs-body );
}
table.mw-json tr {
background-color: var( --edfm-surface-2 );
}
table.mw-json th,
table.mw-json td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
table.mw-json th {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: var( --edfm-fs-meta );
text-align: left;
}
.mw-json-value,
.mw-json-single-value {
background-color: transparent;
color: var( --edfm-text );
}
.mw-json-empty {
background-color: transparent;
color: var( --edfm-text-dim );
}

/* ==========================================================================
15. FOOTER
========================================================================== */
/* A real branded footer: a small wordmark line (pure CSS generated
content -- decorative branding only, redundant with the sidebar logo
already visible, so nothing load-bearing depends on it being
selectable), a top rule with more separation from the article above it,
and MediaWiki's real info/places/icon links laid out on a clean grid
with the badges aligned as a group rather than floating alone. */
.mw-footer {
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
margin-top: 2.5rem;
padding-top: 1.6rem;
border-top: 1px solid var( --edfm-border );
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "brand brand" "info icons" "places icons";
align-items: center;
column-gap: 2em;
row-gap: 0.4rem;
}
.mw-footer::before {
grid-area: brand;
content: 'EDFM // Elite Dangerous Field Manual';
font-family: var( --edfm-mono );
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var( --edfm-text-muted );
margin-bottom: 0.5rem;
}
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
color: var( --edfm-text-dim );
border-color: var( --edfm-border-soft );
font-size: var( --edfm-fs-meta );
}
#footer-info {
grid-area: info;
margin: 0;
line-height: 1.6;
}
#footer-places {
grid-area: places;
margin: 0;
}
/* Same "small uppercase label" treatment used for tags/meta text
elsewhere, so these read as deliberate EDFM navigation rather than
default MediaWiki footer links. */
#footer-places li {
display: inline-block;
margin-right: 1.4em;
}
#footer-places a {
font-family: var( --edfm-mono );
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.78rem;
}
/* A left rule ties the badges to the rest of the footer instead of
letting them read as detached/floating in their own space. */
#footer-icons {
grid-area: icons;
align-self: center;
display: flex;
gap: 0.75em;
margin: 0;
padding-left: 1.6em;
border-left: 1px solid var( --edfm-border-soft );
}
#footer-icons img {
background: var( --edfm-text );
border-radius: 2px;
}
@media ( max-width: 640px ) {
.mw-footer {
grid-template-columns: 1fr;
grid-template-areas: "brand" "info" "places" "icons";
}
#footer-icons {
margin-top: 0.7em;
padding-left: 0;
border-left: none;
border-top: 1px solid var( --edfm-border-soft );
padding-top: 0.7em;
}
}

/* ==========================================================================
MISC MediaWiki UI chrome that ships with light backgrounds by default
========================================================================== */
.catlinks {
background: none !important;
border: none !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-meta );
padding: 0.9em 0 0 0 !important;
margin-top: 1.8rem !important;
}
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: 350px;
max-width: min( 350px, 42% );
margin: 0 0 1.25em 1.35em;
border: 1px solid var( --edfm-border );
border-top: 2px solid var( --edfm-orange );
background: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: 0.92rem;
}
.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.5em 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-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
border: 1px dashed var( --edfm-border );
background: var( --edfm-surface-1 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility );
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 0.5em;
}
/* Optional section label (Template:Infobox's |groupN=) splitting a long
infobox into scannable groups, e.g. Engineer infoboxes into "ENGINEER"
and "ACCESS" (2026-08-08, part of the Engineer article layout pass). A
shaded band with a bottom rule rather than a full boxed sub-header --
consistent with .edfm-infobox-row's own bottom-rule-only separator, not
a new visual language. */
.edfm-infobox-group {
background: var( --edfm-surface-3 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35em 0.7em;
border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-row {
display: flex;
border-bottom: 1px solid var( --edfm-border-soft );
padding: 0.45em 0.7em;
}
.edfm-infobox-row:last-child {
border-bottom: none;
}
.edfm-infobox-label {
font-weight: 700;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
width: 40%;
flex-shrink: 0;
color: var( --edfm-cyan );
}
.edfm-infobox-value {
width: 60%;
}
@media ( max-width: 640px ) {
.edfm-infobox {
float: none;
width: auto;
max-width: none;
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::before {
display: none;
}
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;
background-image: none;
background-color: var( --edfm-surface-2 );
}
#left-navigation,
#right-navigation {
float: none;
margin: 0 !important;
width: auto;
clear: both;
}
#left-navigation {
margin-top: 0 !important;
}
/* Core Vector legacy floats each tab/dropdown portlet
(.vector-menu-tabs-legacy for Page/Discussion and Read/View
source/View history, .vector-menu-dropdown for the More menu) AND
floats every <li> inside their <ul>, with no wrapping at all -- at
narrow widths the labels just overflow and overlap each other
(confirmed with a real screenshot: "View source" and "More"
overlapped instead of wrapping to a new line). Switching the
portlets to inline-block and their tab lists to flex-wrap lets them
reflow onto as many rows as needed instead. */
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-dropdown {
float: none;
display: inline-block;
vertical-align: top;
}
.vector-menu-tabs-legacy ul {
float: none;
display: flex;
flex-wrap: wrap;
}
.vector-menu-tabs-legacy li {
float: none;
}
#p-personal {
position: static;
text-align: right;
padding: 0.5em 1em;
margin: 0;
right: auto !important;
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;
background: var( --edfm-bg-deep );
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 !important;
margin-right: 0 !important;
max-width: none;
}
.mw-body {
margin-top: 0;
border-width: 0;
padding: 1em;
}
.edfm-status-details {
grid-template-columns: 1fr;
}
/* .toc > ul column count is NOT overridden here -- the dedicated
1150px/560px breakpoints above already cover every width down to
the smallest phones; duplicating a rule here previously fought
those (same specificity, this position in the cascade would have
won and wrongly forced 1 column as low as 561px). */
#firstHeading {
font-size: 1.6rem;
}
.mw-body h2 {
margin-top: 2.25rem;
}
.edfm-eyebrow {
padding-top: 0.9em;
}
}
/* ==========================================================================
16. OOUI DIALOGS -- VisualEditor's save dialog, and any other OOUI
dialog (delete/move/protect confirmations, special-page dialogs).
These render via OOUI's own bundled WikimediaUI theme stylesheet,
entirely outside the .edfm-* component system this file otherwise
covers, so without this they show up starkly white against the rest of
the dark-themed site regardless of any variable/token used elsewhere in
this file. !important is justified the same way as the h1-h6 fix above:
OOUI's own stylesheet loads with equal-or-higher effective specificity,
and this is a correctness/contrast fix, not decoration.
========================================================================== */
.oo-ui-window-frame {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-processDialog {
background: rgba( 7, 9, 11, 0.75 ) !important;
}
.oo-ui-processDialog-navigation,
.oo-ui-window-head,
.oo-ui-window-foot {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-processDialog-title,
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-inputWidget-input {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* VisualEditor's reference dialog embeds a mini target widget for the
reference body. The widget ships with a white WikimediaUI base surface,
so theme that inner editing box separately from the surrounding OOUI
dialog chrome. */
.ve-ui-mwReferenceDialog .ve-ui-targetWidget,
.ve-ui-mwReferenceDialog .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ),
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget,
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-surface,
.ve-ui-mwReferenceDialog .ve-ce-surface,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode,
.ve-ui-mwReferenceDialog .ve-ce-documentNode,
.ve-ui-mwReferenceDialog .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode p,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode li,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode span {
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-targetWidget-focused {
border-color: var( --edfm-cyan ) !important;
box-shadow: inset 0 0 0 1px rgba( 77, 199, 232, 0.42 ) !important;
}
.ve-ui-mwSaveDialog-options,
.oo-ui-panelLayout,
.oo-ui-window-body {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-popupWidget-popup {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-buttonElement:not( .oo-ui-flaggedElement-primary ) > .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
17. OOUI TOOLBAR -- VisualEditor's persistent editing toolbar and its
dropdown menus (Cite, Insert, paragraph style, etc.), and the equivalent
toolbar/popups used when editing a single section. Same root cause as
16. OOUI DIALOGS above (OOUI's own bundled theme, not touched by
anything else in this file), found separately because it's a different
set of OOUI classes (toolbar chrome, not dialog chrome). Icons are not
overridden here and don't need to be -- they're currentColor-based, so
they pick up the text colour set below automatically.
========================================================================== */
.oo-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-tool-title,
.oo-ui-tool-link,
.oo-ui-toolGroup-tools .oo-ui-optionWidget,
.oo-ui-menuOptionWidget,
.oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-optionWidget.oo-ui-optionWidget-selected,
.oo-ui-optionWidget:hover,
.oo-ui-tool:hover .oo-ui-tool-link {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
18. OOUI GENERIC MENUS -- .oo-ui-menuSelectWidget is OOUI's general
dropdown/autocomplete menu class (paragraph-style picker, citation-type
picker, link/media search suggestions, etc.) -- a different class from
the toolbar-specific popups in 17. above, confirmed separately via
computed-style inspection to default to the same white OOUI theme
background.
========================================================================== */
.oo-ui-menuSelectWidget {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-menuOptionWidget {
color: var( --edfm-text ) !important;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget:hover {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
19. OOUI ICONS -- the toolbar/menu icons themselves (Bold, link, list,
Cite, undo/redo, etc.) are rendered as background-image SVGs with a
colour baked into the SVG markup, not currentColor-based masks -- so
16-18 above (which only recolour backgrounds/text) left them dark and
low-contrast against the now-dark surfaces. OOUI ships its own fix for
exactly this, gated behind a narrow accessibility media query
(forced-colors + prefers-color-scheme: dark) that doesn't apply to this
site's own always-on dark theme -- reusing that exact technique
unconditionally rather than inventing a different one. `:not(
.oo-ui-image-invert )` is OOUI's own exclusion for icons already meant
to render light (e.g. on the orange primary-button background) --
inverting those too would flip them back to dark.
========================================================================== */
.oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* ==========================================================================
20. EDIT SOURCE FORM -- MediaWiki core + WikiEditor + CodeMirror

The source editor is not covered by the article/component selectors above:
`action=edit` loads core edit-form CSS, WikiEditor chrome, and sometimes
CodeMirror with their own light neutral surfaces. Force the same EDFM dark
surface stack here so the source page no longer flashes as a white island.
========================================================================== */
.mw-editform,
#editform,
#toolbar,
.editOptions,
.mw-editTools,
.mw-summary-preview,
.mw-datatable,
.wikiEditor-ui,
.wikiEditor-ui-view,
.wikiEditor-ui-text,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-top,
.wikiEditor-ui-controls,
.wikiEditor-ui-tabs,
.wikiEditor-ui-buttons,
.wikiEditor-ui-left,
.wikiEditor-ui-right,
.editButtons,
.CodeMirror,
.CodeMirror-scroll {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-editform textarea,
#wpTextbox1,
#wpSummary,
#wpSummaryWidget input,
#editform input[type='text'],
#editform input[type='search'],
#editform textarea,
.wikiEditor-ui-text textarea,
.CodeMirror-code,
.CodeMirror-lines,
.CodeMirror pre {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
caret-color: var( --edfm-orange-bright );
}
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .page,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar .options,
.wikiEditor-ui-toolbar .booklet,
.wikiEditor-ui-toolbar .pages,
.CodeMirror-gutters {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text-muted ) !important;
border-color: var( --edfm-border ) !important;
}
.wikiEditor-ui-toolbar a,
.wikiEditor-ui-toolbar .label,
.wikiEditor-ui-toolbar .tab a,
.mw-editTools a,
.editOptions label,
.mw-editform label,
.CodeMirror-linenumber {
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab a:hover,
.wikiEditor-ui-toolbar .tool-button:hover,
.wikiEditor-ui-toolbar .tool-select:hover,
.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-table td,
.CodeMirror-activeline-background {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab.current a,
.wikiEditor-ui-toolbar .section-main,
.CodeMirror-selected {
background: var( --edfm-surface-4 ) !important;
}
.CodeMirror-cursor {
border-left-color: var( --edfm-orange-bright ) !important;
}
.CodeMirror-matchingbracket {
color: var( --edfm-orange-bright ) !important;
}

/* VisualEditor's standalone "Edit source" mode (.ve-ui-surface-source, set
by ve.ui.Surface when this.mode === 'source') ships its own white surface
-- unlike visual mode, which reuses normal dark article styling since
it's just contenteditable article HTML. Scoped to -source only so the
visual WYSIWYG canvas is untouched. */
.ve-ui-surface-source,
.ve-init-mw-tempWikitextEditorWidget {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-surface-source .ve-ce-surface,
.ve-ui-surface-source .ve-ce-documentNode,
.ve-ui-surface-source .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}

/* ==========================================================================
21. FILE PAGE CHROME -- #filetoc (the File / File history / File usage /
Metadata nav on File: description pages) is defined in MediaWiki core's
mediawiki.action.view.filepage.less, entirely separate from both the
.edfm-* system and the OOUI fixes in 16-19 above -- a different
subsystem again, only loaded on File: pages, which is why it was never
touched by anything else in this file. Link colour inside it already
correctly inherits the site's normal link blue; only the light neutral
background/border needed overriding.
========================================================================== */
#filetoc {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
22. FILE PAGE: METADATA TABLE + MEDIA VIEWER BUTTON -- #mw_metadata is
the EXIF-style metadata table (separate from the File history table
above -- that one already carries the .wikitable class and picked up
dark styling from 7. TABLES automatically; this one doesn't have that
class, so it never matched). The "Open in Media Viewer" button is a
Codex component (MultimediaViewer extension) -- a third distinct
styling subsystem from OOUI and MediaWiki core skinning, again never
touched by anything else in this file.
========================================================================== */
#mw_metadata th,
#mw_metadata td {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-mmv-view-expanded.cdx-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Core MediaWiki/action buttons: match EDFM dark theme instead of default white/orange controls. */
.mw-ui-button,
.mw-htmlform-submit,
.mw-htmlform-ooui-wrapper button,
#mw-patrol-form button,
#mw-patrol-form input[type="submit"],
form.mw-htmlform button,
form.mw-htmlform input[type="submit"],
input[type="submit"].mw-ui-button,
button.mw-ui-button,
.cdx-button:not( .cdx-button--fake-button--enabled ) {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border: 1px solid var( --edfm-border-strong, var( --edfm-border ) ) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var( --edfm-mono ) !important;
font-weight: 800 !important;
text-shadow: none !important;
}
.mw-ui-button:hover,
.mw-htmlform-submit:hover,
.mw-htmlform-ooui-wrapper button:hover,
#mw-patrol-form button:hover,
#mw-patrol-form input[type="submit"]:hover,
form.mw-htmlform button:hover,
form.mw-htmlform input[type="submit"]:hover,
input[type="submit"].mw-ui-button:hover,
button.mw-ui-button:hover,
.cdx-button:not( .cdx-button--fake-button--enabled ):hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-orange-bright ) !important;
border-color: var( --edfm-orange ) !important;
}
.mw-ui-button:focus,
.mw-htmlform-submit:focus,
.mw-htmlform-ooui-wrapper button:focus,
#mw-patrol-form button:focus,
#mw-patrol-form input[type="submit"]:focus,
form.mw-htmlform button:focus,
form.mw-htmlform input[type="submit"]:focus,
input[type="submit"].mw-ui-button:focus,
button.mw-ui-button:focus,
.cdx-button:not( .cdx-button--fake-button--enabled ):focus {
outline: 2px solid var( --edfm-cyan ) !important;
outline-offset: 2px !important;
}

/* Patrol action: remove the cramped review button from the public article chrome. */
#mw-patrol-form {
display: none !important;
}

/* Frontier news: after removing the repeated dispatch list, keep attribution compact. */
.edfm-news-attribution-compact {
margin-top: 0.35rem;
padding-top: 0.6rem;
}

/* ===========================================================================
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL
=========================================================================== */
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar,
large touch targets, off-canvas navigation, search-forward layout, and
single-column readable article flow -- while preserving EDFM's dark field
manual identity and not copying RuneScape.wiki assets/CSS.
The close button is injected into #mw-panel by Common.js, so it must be
explicitly hidden by default; otherwise a tiny native white button appears
in the desktop sidebar's top-left corner. */
.edfm-mobile-appbar,
.edfm-mobile-scrim,
.edfm-mobile-close-button {
display: none;
}
@media ( max-width: 800px ) {
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var( --edfm-bg-page );
overflow-x: hidden;
}
body.edfm-mobile-menu-open {
overflow: hidden;
}
.edfm-mobile-appbar {
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
position: sticky;
top: 0;
z-index: 1200;
min-height: 56px;
padding: 0 0.35rem;
background:
linear-gradient( 90deg, rgba( 255, 138, 0, 0.18 ), transparent 38% ),
var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.35 );
}
.edfm-mobile-brand {
min-width: 0;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.edfm-mobile-brand::before {
content: 'EDFM // ';
color: var( --edfm-orange );
}
.edfm-mobile-menu-button,
.edfm-mobile-search-button,
.edfm-mobile-close-button {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var( --edfm-text );
font: 700 1.5rem/1 var( --edfm-mono );
cursor: pointer;
}
.edfm-mobile-menu-button:focus-visible,
.edfm-mobile-search-button:focus-visible,
.edfm-mobile-close-button:focus-visible {
outline: 2px solid var( --edfm-cyan );
outline-offset: -4px;
}
.edfm-mobile-menu-button::before {
content: '☰';
color: var( --edfm-orange );
}
.edfm-mobile-search-button::before {
content: '⌕';
font-size: 1.85rem;
color: var( --edfm-cyan );
}
.edfm-mobile-close-button::before {
content: '×';
color: var( --edfm-text );
}
.edfm-mobile-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba( 0, 0, 0, 0.58 );
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
body.edfm-mobile-menu-open .edfm-mobile-scrim {
opacity: 1;
pointer-events: auto;
}
#mw-navigation {
background: var( --edfm-surface-2 );
box-shadow: none;
}
#mw-head {
position: relative;
z-index: 1100;
border-bottom: 1px solid var( --edfm-border );
}
#mw-head .vector-search-box {
display: none;
margin: 0;
padding: 0.65rem;
background: var( --edfm-surface-2 );
border-top: 1px solid var( --edfm-border-soft );
}
body.edfm-mobile-search-open #mw-head .vector-search-box {
display: block;
}
#mw-head .vector-search-box-inner,
#mw-head #searchform {
width: 100%;
}
#mw-head #searchInput {
min-height: 44px;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
#left-navigation,
#right-navigation {
padding: 0 0.45rem 0.35rem;
background: var( --edfm-surface-2 );
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.vector-menu-tabs-legacy ul {
flex-wrap: nowrap;
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-dropdown .vector-menu-heading {
min-height: 36px;
display: inline-flex;
align-items: center;
}
#p-personal {
display: none;
}
#mw-panel {
position: fixed;
top: 0;
left: 0;
z-index: 1300;
width: min( 82vw, 22rem );
height: 100dvh;
box-sizing: border-box;
padding: 0;
background: var( --edfm-surface-1 );
border: 0;
border-right: 1px solid var( --edfm-border );
box-shadow: 18px 0 36px rgba( 0, 0, 0, 0.45 );
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX( -105% );
transition: transform 0.2s ease;
}
body.edfm-mobile-menu-open #mw-panel {
transform: translateX( 0 );
}
#mw-panel::before {
content: 'EDFM Navigation';
display: block;
position: sticky;
top: 0;
z-index: 1;
padding: 1rem 3.4rem 1rem 1rem;
background: var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
color: var( --edfm-orange );
font: 800 0.86rem/1.2 var( --edfm-mono );
letter-spacing: 0.08em;
text-transform: uppercase;
}
#mw-panel .edfm-mobile-close-button {
position: absolute;
top: 0.3rem;
right: 0.35rem;
z-index: 2;
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin: 0;
padding: 0.75rem 0;
border-bottom: 1px solid var( --edfm-border-soft );
}
#mw-panel .vector-menu-heading {
margin: 0.25rem 1rem 0.45rem;
}
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
display: flex;
align-items: center;
min-height: 46px;
box-sizing: border-box;
padding: 0.55rem 1rem;
border-left: 3px solid transparent;
color: var( --edfm-text-muted );
font-size: 1rem;
text-decoration: none;
}
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-content-list li a:focus {
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-cyan );
color: var( --edfm-text );
}
#mw-panel .edfm-nav-current > a,
#mw-panel .edfm-nav-current > a:visited {
background: rgba( 255, 138, 0, 0.12 );
border-left-color: var( --edfm-orange );
color: var( --edfm-orange ) !important;
}
.mw-body {
padding: clamp( 1rem, 4vw, 1.35rem );
font-size: 1rem;
line-height: 1.68;
}
#siteNotice {
margin-bottom: 1rem;
padding-bottom: 0.85rem;
}
#firstHeading {
font-size: clamp( 1.65rem, 8vw, 2.25rem );
line-height: 1.1;
letter-spacing: -0.015em;
}
.mw-body h2 {
font-size: 1.18rem;
line-height: 1.25;
}
.mw-body p,
.mw-body li {
max-width: none;
}
.mw-body img,
.mw-body .thumb,
.mw-body .thumbinner,
.mw-body .thumbimage {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
.mw-body .thumb,
.mw-body .tright,
.mw-body .tleft {
float: none !important;
clear: both;
width: auto !important;
margin: 1rem 0 !important;
}
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.mw-parser-output > table.wikitable th,
.mw-parser-output > table.wikitable td,
.mw-parser-output > table.mw-datatable th,
.mw-parser-output > table.mw-datatable td {
white-space: normal;
min-width: 8rem;
}
.edfm-infobox {
font-size: 0.95rem;
}
.edfm-infobox-row {
display: grid;
grid-template-columns: minmax( 7.5rem, 40% ) 1fr;
gap: 0.5rem;
padding: 0.65rem 0.8rem;
}
.edfm-infobox-label,
.edfm-infobox-value {
width: auto;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tbody,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tr,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type {
overflow: visible;
white-space: normal;
background: transparent;
border: 0;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th {
margin-top: 0.75rem;
border-left: 3px solid var( --edfm-orange );
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
margin-bottom: 0.75rem;
background: var( --edfm-surface-2 );
border-left: 3px solid var( --edfm-border );
}
.mw-footer {
padding: 1rem;
margin-top: 1.5rem;
}
}
@media ( max-width: 430px ) {
.edfm-mobile-brand::before {
content: 'EDFM';
margin-right: 0.45rem;
}
.edfm-mobile-brand {
font-size: 0.88rem;
}
.edfm-infobox-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}

/* 22a. Mobile action tabs refinement: keep Vector's page/discussion/read/
source/history controls available, but put them on one compact horizontal
action rail so the first phone viewport feels like a real mobile app shell
instead of two stacked desktop tab bars. */
@media ( max-width: 800px ) {
body:not( .edfm-mobile-search-open ) #mw-head {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
body:not( .edfm-mobile-search-open ) #left-navigation,
body:not( .edfm-mobile-search-open ) #right-navigation {
flex: 0 0 auto;
clear: none !important;
float: none !important;
width: auto;
padding: 0 0.25rem;
margin: 0 !important;
border-right: 1px solid var( --edfm-border-soft );
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown {
float: none !important;
display: inline-block;
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a,
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a:visited,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown .vector-menu-heading {
min-height: 40px;
padding-left: 0.55rem;
padding-right: 0.55rem;
font-size: 0.68rem;
}
body.edfm-mobile-search-open #mw-head {
display: block;
}
}

/* ===========================================================================
24. HARD OVERRIDE: JUMP TILE LEFT RAIL

The earlier border-left rail can be swallowed by ResourceLoader/cascade or
visually read as part of the tile edge. Draw the rail as a high-specificity
gradient on the actual top-level TOC anchors so it is unmistakable on the
live jump grid.
=========================================================================== */
#toc.toc > ul > li > a,
.mw-parser-output #toc > ul > li > a,
.mw-parser-output .toc > ul > li > a {
background-image: linear-gradient( 90deg, var( --edfm-orange ) 0, var( --edfm-orange ) 6px, transparent 6px ) !important;
border-left: 0 !important;
padding-left: 1rem !important;
}
#toc.toc > ul > li > a:hover,
#toc.toc > ul > li > a:focus-visible,
.mw-parser-output #toc > ul > li > a:hover,
.mw-parser-output #toc > ul > li > a:focus-visible,
.mw-parser-output .toc > ul > li > a:hover,
.mw-parser-output .toc > ul > li > a:focus-visible {
background-image: linear-gradient( 90deg, var( --edfm-cyan ) 0, var( --edfm-cyan ) 6px, transparent 6px ) !important;
}

/* ===========================================================================
25. SOURCE EDIT CONFLICT / WIKITEXT DIFF THEME

Source-edit conflict review uses MediaWiki's diff table classes, not the
normal edit textarea/WikiEditor chrome. Without this, unchanged rows and
inline change pills fall back to stark white/yellow/blue defaults. Keep the
old/new meaning, but render it in EDFM's dark surfaces with restrained
orange/cyan accents.
=========================================================================== */
.mw-parser-output table.diff,
table.diff,
.diff {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-collapse: separate !important;
border-spacing: 0 0.12rem !important;
}
.diff-title,
.diff-otitle,
.diff-ntitle,
#mw-diff-otitle1,
#mw-diff-ntitle1 {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
}
td.diff-lineno,
.diff-lineno {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
border: 0 !important;
padding: 0.35rem 0.5rem !important;
}
td.diff-marker,
.diff-marker {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
padding: 0.25rem 0.45rem !important;
text-align: center;
}
td.diff-context,
td.diff-addedline,
td.diff-deletedline,
.diff-context,
.diff-addedline,
.diff-deletedline,
.mw-diff-inline-context,
.mw-diff-inline-added,
.mw-diff-inline-deleted,
.mw-diff-inline-changed,
.mw-diff-inline-moved {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
font-family: var( --edfm-mono );
box-shadow: none !important;
}
td.diff-context:empty,
td.diff-addedline:empty,
td.diff-deletedline:empty,
.diff-context:empty,
.diff-addedline:empty,
.diff-deletedline:empty {
/* Empty diff cells are alignment placeholders. Keep their card boundary so
the two-column source-conflict diff does not look broken, but make them
compact and neutral instead of tall blank blocks. */
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none !important;
min-height: 0;
padding-top: 0.08rem !important;
padding-bottom: 0.08rem !important;
}
td.diff-deletedline,
.diff-deletedline,
.mw-diff-inline-deleted {
background: rgba( 255, 138, 0, 0.08 ) !important;
border-color: rgba( 255, 138, 0, 0.6 ) !important;
border-left-color: var( --edfm-orange ) !important;
}
td.diff-addedline,
.diff-addedline,
.mw-diff-inline-added {
background: rgba( 66, 199, 217, 0.08 ) !important;
border-color: rgba( 66, 199, 217, 0.6 ) !important;
border-left-color: var( --edfm-cyan ) !important;
}
.diffchange,
.diff-addedline .diffchange,
.diff-deletedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
border-radius: 3px !important;
padding: 0.08rem 0.22rem !important;
font-weight: 700;
text-decoration: none !important;
color: var( --edfm-bg-deep ) !important;
}
.diff-deletedline .diffchange,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
background: var( --edfm-orange-bright ) !important;
}
.diff-addedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins {
background: var( --edfm-cyan ) !important;
}
.mw-explainconflict,
#wpTextbox2,
textarea#wpTextbox2,
textarea.mw-textarea-oldrev {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Engineer directory portrait chips -- intentionally quiet so table rows still
read like data rows, not card/list hybrids. */
.edfm-engineer-entry {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: max-content;
}
.edfm-engineer-entry .mw-file-element {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var( --edfm-border );
background: var( --edfm-surface-0 );
box-shadow: none;
}
.edfm-engineer-entry__name {
line-height: 1.2;
}

/* Frontier official news feed image treatment */
.edfm-frontier-news .edfm-news-card-art-image {
display: block;
position: relative;
padding: 0;
/* Keep all news thumbnails uniform, including the first/primary story. */
height: 9.5rem;
min-height: 9.5rem;
aspect-ratio: 16 / 9;
background: var( --edfm-surface-4 );
overflow: hidden;
}
.edfm-frontier-news .edfm-news-card-primary .edfm-news-card-art-image {
height: 9.5rem;
min-height: 9.5rem;
}
.edfm-frontier-news .edfm-news-card-art-image > span,
.edfm-frontier-news .edfm-news-card-art-image .mw-default-size,
.edfm-frontier-news .edfm-news-card-art-image .mw-file-description {
display: block !important;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.edfm-frontier-news .edfm-news-card-art-image .mw-file-element {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transition: transform 0.2s ease, filter 0.2s ease;
}
.edfm-frontier-news .edfm-news-card:hover .edfm-news-card-art-image .mw-file-element {
filter: brightness( 1.08 ) contrast( 1.05 );
transform: scale( 1.035 );
}
.edfm-frontier-news .edfm-news-source-badge {
display: inline-flex !important;
align-items: center;
position: absolute !important;
left: 0.8rem !important;
right: auto !important;
bottom: 0.75rem !important;
z-index: 2;
max-width: calc( 100% - 1.6rem );
padding: 0.25rem 0.55rem;
background: rgba( 10, 13, 17, 0.82 );
border: 1px solid rgba( 255, 138, 0, 0.48 );
box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.34 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}

.edfm-news-attribution {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var( --edfm-border-soft );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
line-height: 1.45;
}

/* Patrol action: hide MediaWiki generated patrol footer/link from article chrome. */
.patrollink,
.patrollink[data-mw-interface],
.patrollink .cdx-button,
#mw-content-text + .patrollink,
.mw-parser-output + .patrollink {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* ===========================================================================
2026-08-10 PROSE RAIL SLEDGEHAMMER
=========================================================================== */
/* Plain article prose on EDFM is supposed to occupy the article rail. Keep this
deliberately simple and selector-separated: no comma-list dependency on
advanced :not() parsing, no TemplateStyles scoping, and both physical and
logical width properties so later/readability rules cannot re-cap lines. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > p,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ul,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ol,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > dl {
display: block !important;
width: 100% !important;
max-width: none !important;
inline-size: 100% !important;
max-inline-size: none !important;
box-sizing: border-box !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output p {
max-width: none !important;
max-inline-size: none !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output li,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output dd {
max-width: none !important;
max-inline-size: none !important;
}
/* Restore the intentional compact maintenance notice after the broad prose
override above. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-draft,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-draft {
width: auto !important;
max-width: 44rem !important;
inline-size: auto !important;
max-inline-size: 44rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
EDFM login/register auth surface template alignment
========================================================================== */
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm {
color: var( --edfm-text );
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-label__label__text {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.015em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-Userlogin #userloginForm input[type='text'],
body.mediawiki.mw-special-Userlogin #userloginForm input[type='password'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='text'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='password'] {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 );
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input::placeholder,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-help,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-password-help {
color: var( --edfm-text-muted ) !important;
font-size: 0.88rem;
line-height: 1.45;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
margin-top: 0.85rem;
padding: 0.9rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.12 ), transparent 34% ),
var( --edfm-surface-1 );
border: 1px solid rgba( 255, 138, 0, 0.42 );
border-left: 3px solid var( --edfm-orange );
box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 850;
letter-spacing: 0.04em;
line-height: 1.35;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 0;
margin: 0;
padding: 0.55rem 0.8rem;
background: rgba( 255, 138, 0, 0.1 ) !important;
border: 1px solid var( --edfm-orange ) !important;
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.035 );
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.045em;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:hover,
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:focus-visible {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange-bright ) !important;
color: #10171b !important;
text-decoration: none !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin-top: 0.2rem;
padding: 1.15rem 1.25rem;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.08 ), transparent 38% ),
var( --edfm-surface-1 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-heading {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-size: 1.35rem;
font-weight: 800;
line-height: 1.25;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list {
margin-top: 1rem;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::before {
filter: none !important;
opacity: 0.78 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 1.75rem;
font-weight: 850;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {
color: var( --edfm-text-muted ) !important;
font-size: 0.9rem;
line-height: 1.35;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text {
display: none !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit {
background: var( --edfm-surface-3 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
border-radius: 0 !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 850;
letter-spacing: 0.06em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit:hover,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
body.mediawiki.mw-special-Userlogin #mw-content-text,
body.mediawiki.mw-special-CreateAccount #mw-content-text {
padding-top: 0.55rem;
}
body.mediawiki.mw-special-Userlogin #firstHeading {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-content-text > .mw-ui-container {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm {
width: min( 100%, 34rem ) !important;
margin: 0 auto !important;
padding: 1.15rem 1.2rem 1.25rem !important;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.1 ), transparent 34% ),
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 55% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-userlogin-help {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
margin: 1.05rem auto 0 !important;
max-width: 18rem;
}
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: grid !important;
grid-template-columns: minmax( 19rem, 28rem ) minmax( 20rem, 1fr ) !important;
gap: clamp( 1.4rem, 4vw, 3rem ) !important;
align-items: stretch !important;
width: min( 100%, 76rem ) !important;
max-width: 76rem !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin: 0 !important;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.07 ), transparent 38% ),
linear-gradient( 180deg, rgba( 255, 138, 0, 0.035 ), rgba( 0, 0, 0, 0 ) 54% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm {
padding: 1.15rem 1.2rem 1.25rem !important;
border-left: 3px solid var( --edfm-orange ) !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
padding: clamp( 1.3rem, 2.2vw, 2.05rem ) !important;
border-left: 3px solid var( --edfm-cyan ) !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field {
margin-bottom: 1rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLSubmitField,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLSubmitField {
margin-bottom: 0 !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName {
border-color: rgba( 66, 199, 217, 0.45 ) !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 1px rgba( 66, 199, 217, 0.35 ), 0 0 18px rgba( 66, 199, 217, 0.14 ) !important;
}
@media ( max-width: 860px ) {
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: flex !important;
flex-direction: column !important;
width: min( 100%, 34rem ) !important;
max-width: 34rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
width: 100% !important;
}
}
/* ==========================================================================
EDFM dark thumbnail/frame treatment — 2026-08-13
Keep MediaWiki image captions from falling back to the default white frame.
========================================================================== */
.mw-parser-output .thumb {
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"],
.mw-parser-output figure.mw-halign-right,
.mw-parser-output figure.mw-halign-left,
.mw-parser-output figure.mw-halign-center {
background:
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 56% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 1px solid var( --edfm-border ) !important;
box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbimage,
.mw-parser-output .thumbinner img,
.mw-parser-output figure[typeof~="mw:File/Thumb"] img,
.mw-parser-output figure[typeof~="mw:File/Frame"] img {
background-color: var( --edfm-bg-deep ) !important;
border: 1px solid var( --edfm-border ) !important;
box-sizing: border-box !important;
}
.mw-parser-output .thumbcaption,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption {
background: var( --edfm-surface-1 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim ) !important;
font-size: var( --edfm-fs-small ) !important;
line-height: 1.42 !important;
padding: 0.42rem 0.5rem 0.5rem !important;
}
.mw-parser-output .thumbcaption a,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a {
color: var( --edfm-link ) !important;
}
.mw-parser-output .thumbcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a:hover {
color: var( --edfm-link-hover ) !important;
}
.mw-parser-output .magnify a,
.mw-parser-output .mw-file-magnify {
filter: invert( 1 ) opacity( 0.72 ) drop-shadow( 0 0 2px rgba( 66, 199, 217, 0.28 ) );
}

/* ==========================================================================
EDFM VisualEditor template dialog dark theme — 2026-08-13
Keep template editing dialogs from falling back to white/light OOUI panels.
========================================================================== */
.ve-ui-mwTransclusionDialog,
.ve-ui-mwTransclusionDialog .oo-ui-window-frame,
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .oo-ui-window-body,
.ve-ui-mwTransclusionDialog .oo-ui-window-foot,
.ve-ui-mwTransclusionDialog .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTransclusionDialog .oo-ui-pageLayout,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-content,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
background-color: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu {
background-color: var( --edfm-surface-1 ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterSelectWidget {
background-color: var( --edfm-surface-2 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-widget {
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-field .oo-ui-labelElement-label em,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-undocumentedLabel {
color: var( --edfm-text-muted ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-bg-deep ) !important;
}

/* Additional VE template-dialog color polish — disabled/apply buttons, search,
unused-toggle buttons, and parameter checkboxes. */
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
opacity: 0.82 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget .oo-ui-inputWidget-input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-inputWidget-input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span::before {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
/* EDFM VisualEditor template/infobox popup hard-dark theme — targets the actual
Edit: <template> popup chrome and body, not just article/sidebar chrome. */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active > .oo-ui-window-frame,
.oo-ui-windowManager-modal .oo-ui-processDialog-content,
.oo-ui-windowManager-modal .oo-ui-window-content,
.oo-ui-windowManager-modal .oo-ui-window-body,
.oo-ui-windowManager-modal .oo-ui-window-foot,
.ve-ui-mwTemplateDialog,
.ve-ui-mwTemplateDialog .oo-ui-panelLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-content,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTemplateDialog .oo-ui-pageLayout,
.ve-ui-mwTemplateDialog .ve-ui-mwTemplatePage,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #111b20 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-content > .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-processDialog-navigation,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #1c2a31 !important;
color: #f4f7f8 !important;
border-color: #7f9299 !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-title,
.oo-ui-windowManager-modal .oo-ui-labelElement-label,
.oo-ui-windowManager-modal .oo-ui-fieldLayout-header label,
.oo-ui-windowManager-modal .oo-ui-widget,
.ve-ui-mwTemplateDialog .oo-ui-labelElement-label,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTemplateDialog .oo-ui-fieldsetLayout-header label {
color: #f4f7f8 !important;
}
.oo-ui-windowManager-modal .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-undocumentedLabel,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .mw-widget-titleOptionWidget-description {
color: #a9bbc1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-inputWidget-input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget textarea,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget input,
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
background: #0d1519 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: #42c7d9 !important;
box-shadow: 0 0 0 2px rgba(66,199,217,.32) !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: #25353d !important;
border-color: #52646b !important;
color: #f4f7f8 !important;
box-shadow: none !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: #31454f !important;
border-color: #ff8a00 !important;
color: #ffb347 !important;
}
.oo-ui-windowManager-modal .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: #ff8a00 !important;
border-color: #ff8a00 !important;
color: #111820 !important;
font-weight: 700 !important;
}
.oo-ui-windowManager-modal .oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background: #1c2a31 !important;
border-color: #3f5159 !important;
color: #8fa1a8 !important;
opacity: 1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget:hover,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: #25353d !important;
color: #f4f7f8 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span::before {
background-color: #0d1519 !important;
border-color: #7f9299 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before {
background-color: #ff8a00 !important;
border-color: #ff8a00 !important;
}
/* EDFM cookie preferences banner */
#edfm-cookie-banner {
position: fixed;
z-index: 10000;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: flex;
justify-content: center;
pointer-events: none;
}
#edfm-cookie-banner .edfm-cookie-card {
max-width: 800px;
border: 1px solid rgba(80, 220, 240, 0.65);
background: rgba(3, 14, 22, 0.98);
box-shadow: 0 0 22px rgba(80, 220, 240, 0.22), 0 12px 36px rgba(0, 0, 0, 0.45);
color: #dffbff;
padding: 1rem;
font-size: 0.95rem;
pointer-events: auto;
}
#edfm-cookie-banner .edfm-cookie-title {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fe0ec;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-text { margin: 0 0 0.75rem; line-height: 1.45; }
#edfm-cookie-banner .edfm-cookie-categories {
display: grid;
gap: 0.65rem;
margin: 0.65rem 0 0.85rem;
}
#edfm-cookie-banner .edfm-cookie-category {
border: 1px solid rgba(127, 224, 236, 0.32);
background: rgba(7, 28, 38, 0.74);
padding: 0.7rem;
}
#edfm-cookie-banner .edfm-cookie-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-category h3 {
margin: 0;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f3feff;
}
#edfm-cookie-banner .edfm-cookie-category p {
margin: 0;
line-height: 1.42;
color: #c6e6eb;
}
#edfm-cookie-banner .edfm-cookie-status {
white-space: nowrap;
border: 1px solid rgba(255, 138, 0, 0.7);
color: #ffd69a;
background: rgba(255, 138, 0, 0.12);
padding: 0.2rem 0.48rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#edfm-cookie-banner .edfm-cookie-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-weight: 700;
color: #f3feff;
cursor: pointer;
}
#edfm-cookie-banner .edfm-cookie-switch input {
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color: #ff8a00;
}
#edfm-cookie-banner .edfm-cookie-switch input:focus-visible {
outline: 2px solid #7fe0ec;
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#edfm-cookie-banner button {
border: 1px solid rgba(127, 224, 236, 0.7);
background: rgba(9, 50, 65, 0.92);
color: #f3feff;
padding: 0.45rem 0.7rem;
cursor: pointer;
}
#edfm-cookie-banner button:hover,
#edfm-cookie-banner button:focus-visible {
background: rgba(17, 88, 108, 0.98);
outline: 2px solid rgba(127, 224, 236, 0.85);
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-links { margin-top: 0.6rem; font-size: 0.85rem; }
#edfm-cookie-banner a { color: #7fe0ec; }
@media (max-width: 600px) {
#edfm-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
#edfm-cookie-banner .edfm-cookie-card { max-height: calc(100vh - 1rem); overflow: auto; }
#edfm-cookie-banner .edfm-cookie-category-head { align-items: flex-start; }
#edfm-cookie-banner .edfm-cookie-actions button { flex: 1 1 100%; }
}

/* ==========================================================================
EDFM Vector watchstar dark-theme fix — 2026-08-16
Vector legacy renders the page watch/unwatch affordance as a small SVG
background on `#ca-watch/#ca-unwatch a::before`. On EDFM's dark tab row the
upstream light-skin URLs can be too low-contrast, and some deployments do not
expose ResourceLoader's dotted asset path directly. Use inline SVGs in the
EDFM palette so the watchstar is always visible in the top action menu.
========================================================================== */
.vector-menu-tabs #ca-watch.icon a::before,
.vector-menu-tabs-legacy #ca-watch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2310171b' stroke='%2342c7d9' stroke-width='1.35' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.42 ) );
opacity: 0.96;
}
.vector-menu-tabs #ca-unwatch.icon a::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.2' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 4px rgba( 255, 138, 0, 0.45 ) );
opacity: 0.98;
}
.vector-menu-tabs #ca-watch.icon a:hover::before,
.vector-menu-tabs #ca-watch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-watch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-watch.icon a:focus::before,
.vector-menu-tabs #ca-unwatch.icon a:hover::before,
.vector-menu-tabs #ca-unwatch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:focus::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.25' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 5px rgba( 255, 138, 0, 0.65 ) );
opacity: 1;
}

/* ==========================================================================
EDFM Special:Preferences dark theme fix — 2026-08-16
Preferences is an OOUI/Codex-heavy special page. Core styles bring in a
light tab strip and sticky submit footer, so theme the actual preferences
wrapper rather than only generic form controls.
========================================================================== */
body.mediawiki.mw-special-Preferences #preferences,
body.mediawiki.mw-special-Preferences #mw-prefs-container,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-fieldset-wrapper,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout-framed {
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed {
box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.32 );
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-menu,
body.mediawiki.mw-special-Preferences .oo-ui-menuLayout-menu {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabSelectWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget:hover,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: inset 0 -3px 0 var( --edfm-orange ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header label,
body.mediawiki.mw-special-Preferences .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .mw-prefs-title {
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-description,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-help,
body.mediawiki.mw-special-Preferences .oo-ui-inline-help,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-messages,
body.mediawiki.mw-special-Preferences .htmlform-tip,
body.mediawiki.mw-special-Preferences .mw-htmlform-help {
background: transparent !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownInputWidget select,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownWidget-handle,
body.mediawiki.mw-special-Preferences input[type='text'],
body.mediawiki.mw-special-Preferences input[type='number'],
body.mediawiki.mw-special-Preferences input[type='email'],
body.mediawiki.mw-special-Preferences textarea,
body.mediawiki.mw-special-Preferences select {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-inputWidget-input::placeholder,
body.mediawiki.mw-special-Preferences input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus,
body.mediawiki.mw-special-Preferences input:focus,
body.mediawiki.mw-special-Preferences textarea:focus,
body.mediawiki.mw-special-Preferences select:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox'] {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox']:checked {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
accent-color: var( --edfm-orange );
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit,
body.mediawiki.mw-special-Preferences button,
body.mediawiki.mw-special-Preferences input[type='submit'] {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit:hover,
body.mediawiki.mw-special-Preferences button:hover,
body.mediawiki.mw-special-Preferences input[type='submit']:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
body.mediawiki.mw-special-Preferences #preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .oo-ui-window-foot .mw-htmlform-submit-buttons {
background: rgba( 16, 23, 27, 0.96 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
box-shadow: 0 -10px 24px rgba( 0, 0, 0, 0.34 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-search-highlight,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
background: rgba( 66, 199, 217, 0.18 ) !important;
outline-color: rgba( 66, 199, 217, 0.32 ) !important;
color: var( --edfm-text ) !important;
}

MediaWiki:Common.css

2026-08-19T19:00:03Z

EDFM Site Maintenance: Style mw-json tables (Module:Data/* pages) to match the dark theme instead of MediaWiki core defaults

/* ==========================================================================
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).

2026-08-07 SECOND PASS: the first redesign pass was judged too close to
stock MediaWiki with a colour change -- this pass changes the actual
visual composition (centred workspace instead of a huge dead gutter,
a two-tier header, a real masthead, a tile-grid TOC, a restructured
status module, larger deliberate type scale, depth via surface
elevation instead of borders-around-everything) while reusing every
working mechanism from the first pass rather than throwing it away --
the tab/:visited fix, the external-link specificity fix, the mobile
reorder fix, and focus-visible/reduced-motion are all still here,
unchanged in mechanism.
========================================================================== */

/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* Depth system: site (outermost, visible in the sidebar/header/gutters)
-> article surface -> component surfaces, each a deliberate step
brighter so the page reads as having actual depth rather than "one
background colour with slightly lighter boxes everywhere". */
--edfm-bg-deep: #07090b;
--edfm-bg-page: #0a0e11;
--edfm-surface-1: #10171b;
--edfm-surface-2: #161f24;
--edfm-surface-3: #1c272d;
--edfm-surface-4: #233037;

--edfm-border: #26333b;
--edfm-border-soft: rgba( 255, 255, 255, 0.06 );

--edfm-text: #edf0f2;
--edfm-text-muted: #98a5ad;
--edfm-text-dim: #6c7a82;

/* 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 */
--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 );
--edfm-status-positive-bg: rgba( 66, 199, 217, 0.12 );
--edfm-status-attention-bg: rgba( 255, 138, 0, 0.12 );
--edfm-status-neutral-bg: rgba( 108, 122, 130, 0.12 );

/* Typography -- explicit desktop scale (2026-08-07 pass 2). Sized in
rem against the root's real 16px (Vector legacy's own
@font-size-root is 100%, i.e. browser default -- confirmed by
reading skins.vector.styles.legacy/variables.less, not assumed)
rather than nested em, specifically so component sizes can't
compound smaller than intended inside whatever ambient size an
ancestor happens to set. */
--edfm-fs-title: clamp( 1.9rem, 1.4rem + 2vw, 2.25rem ); /* ~30-36px */
--edfm-fs-h2: 1.35rem; /* ~21.6px */
--edfm-fs-h3: 1.15rem; /* ~18.4px */
--edfm-fs-body: 1rem; /* 16px */
--edfm-fs-resource-name: 1.1rem; /* ~17.6px */
--edfm-fs-meta: 0.8rem; /* ~12.8px */
--edfm-fs-sidebar: 0.9375rem; /* 15px -- polish pass: +1px for readability */
--edfm-fs-utility: 0.72rem; /* ~11.5px */

--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 );

/* Geometry / layout */
--edfm-corner: 10px;
/* Full-width article workspace: keep the fixed Vector sidebar clear,
but let the article surface use the entire remaining viewport. */
--edfm-sidebar-width: 12.75rem;
--edfm-sidebar-clear: 12.75rem;
--edfm-content-max: calc( 100vw - var( --edfm-sidebar-clear ) );
--edfm-gutter: 0px;
}

/* ==========================================================================
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 );
font-size: var( --edfm-fs-body );
}
/* Background treatment: a faint technical grid plus a very soft radial
glow centred behind the (now centred) content column, so the composition
still has quiet visual interest in the gutters on ultrawide screens
instead of just flat colour -- both stay under ~3% opacity, this is
texture, not a HUD. Not image assets; pure CSS gradients. */
body {
background-image:
radial-gradient( ellipse 1400px 900px at 50% 0%, rgba( 66, 199, 217, 0.05 ), transparent 60% ),
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: auto, 48px 48px, 48px 48px;
background-repeat: no-repeat, repeat, repeat;
background-attachment: fixed, scroll, scroll;
}
/* Full-height sidebar rail: mirrors the RuneScape.wiki behavior where the
left rail has no visible bottom edge. The real #mw-panel only carries the
navigation content; this fixed layer paints the uninterrupted surface,
border, and shadow down the whole viewport. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var( --edfm-sidebar-width );
background: linear-gradient( 180deg, var( --edfm-surface-1 ) 0%, var( --edfm-bg-deep ) 100% );
border-right: 1px solid var( --edfm-border );
box-shadow: 10px 0 22px rgba( 0, 0, 0, 0.32 );
pointer-events: none;
z-index: 1;
}
@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: 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;
}

/* Small reusable angular motif: a corner-cut bracket, used sparingly (see
the redesign notes in docs/content-style-guide.md for exactly where) --
deliberately not applied everywhere. */
.edfm-corner-cut {
clip-path: polygon( 0 0, calc( 100% - var( --edfm-corner ) ) 0, 100% var( --edfm-corner ), 100% 100%, 0 100% );
}

/* ==========================================================================
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: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.75rem, 1.35rem + 1.45vw, 2.15rem );
font-weight: 700;
letter-spacing: 0;
line-height: 1.18;
margin: 0.15em 0 0.25em;
padding-bottom: 0.22em;
border-bottom: 1px solid var( --edfm-border );
}
/* Section headings (h2): "// " prefix in orange, bright heading text, a
short orange accent segment over the dim full-width divider core
already draws. Substantially more vertical space than a wiki section
normally gets, per the "sections feel packed together" fix -- 3.25rem
(~52px) above, ~1.1rem gap to the first content component below. If a
heading opts into explicit numbering via {{Section number}}, the
automatic "// " is suppressed so the two treatments don't double up. */
.mw-body h2 {
position: relative;
padding-bottom: 0.25em;
margin-top: 2rem;
margin-bottom: 0.85rem;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.28rem, 1.08rem + 0.65vw, 1.62rem );
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid var( --edfm-border ) !important;
}
.mw-body h2::before {
content: none;
}
.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 );
font-size: var( --edfm-fs-h3 );
}
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.7;
font-size: var( --edfm-fs-body );
}
.mw-body p {
margin: 0 0 1.1em 0;
max-width: none !important; /* Site-wide full-width pass: article text should use the whole content rail. */
}
.mw-body ul,
.mw-body ol {
line-height: 1.7;
margin-bottom: 1.1em;
}

/* EDFM article bullets: replace the stock browser dot with the provided
cyan field-manual arrow, scaled to text size rather than using the source
image's native 100x91 dimensions. This targets article unordered lists;
interface/navigation lists such as the Jump To TOC and galleries are reset
below so they keep their component-specific layout. */
.mw-parser-output ul {
list-style: none;
padding-left: 1.55em;
}
.mw-parser-output ul > li {
position: relative;
}
.mw-parser-output ul > li::before {
content: '';
position: absolute;
left: -1.35em;
top: 0.48em;
width: 0.82em;
height: 0.75em;
background-image: url( '/edfm-assets/list-bullet-arrow.png' );
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.95;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.35 ) );
}
.mw-parser-output ul ul {
margin-top: 0.3em;
padding-left: 1.45em;
}
.mw-parser-output ul ul > li::before {
left: -1.25em;
top: 0.52em;
width: 0.68em;
height: 0.62em;
opacity: 0.82;
}
/* Component exceptions: these are not prose bullet lists. */
.mw-parser-output .toc ul,
.mw-parser-output .gallery,
.mw-parser-output .gallery ul,
.mw-parser-output .mw-gallery-traditional,
.mw-parser-output .mw-gallery-traditional ul {
padding-left: 0;
}
.mw-parser-output .toc li::before,
.mw-parser-output .gallery li::before,
.mw-parser-output .mw-gallery-traditional li::before {
content: none;
}
/* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the
sibling that immediately follows is that wrapper, not the `h2`/`h3`
itself -- matching both forms since a page could still have a bare
heading in edge cases (e.g. content generated without the wrapper). */
.mw-heading2 + p, .mw-body h2 + p,
.mw-heading3 + p, .mw-body h3 + p,
.mw-heading2 + div, .mw-body h2 + div,
.mw-heading3 + div, .mw-body h3 + div {
margin-top: 0;
}
hr {
background-color: var( --edfm-border );
border-color: var( --edfm-border );
}

/* Quiet, discoverable section-edit controls (logged-in editors only --
MediaWiki only renders these for users who can edit). Keeping the
functionality/keyboard access intact while making sure they don't
compete visually with the heading they're attached to: low opacity at
rest, full opacity on hover/focus of the heading OR the control itself,
brackets hidden (the opacity+letter-spacing treatment already reads as
a distinct control without them). */
.mw-editsection {
margin-left: 1em;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility ) !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.45;
transition: opacity 0.15s ease;
}
.mw-heading:hover .mw-editsection,
.mw-heading:focus-within .mw-editsection,
.mw-editsection:hover,
.mw-editsection:focus-within {
opacity: 1;
}
.mw-editsection a {
color: var( --edfm-text-dim );
}
.mw-editsection a:hover,
.mw-editsection a:focus-visible {
color: var( --edfm-cyan );
}
.mw-editsection-bracket {
display: none;
}
.mw-editsection-divider {
color: var( --edfm-text-dim );
margin: 0 0.3em;
}

/* ==========================================================================
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. GLOBAL LAYOUT -- centred workspace
========================================================================== */
/* Full-width article pass: the article now fills the workspace to the right edge.
Historical note: this block originally centred a capped article column.

THE fix for "enormous unused region on the right side of wide displays".
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 with no max-width at all -- the first redesign
pass added a max-width but left the column pinned to the sidebar's left
edge, which is *why* it still read as "a column stuck on the left with
dead space on the right" rather than a composed layout.

Fix: instead of a fixed `margin-left: 11em`, compute how much space is
left over in the workspace (viewport minus the sidebar) once the
content has its max-width, and split that leftover evenly between the
left and right margins (via the --edfm-gutter token above) -- so the
article is centred *within the workspace to the right of the sidebar*,
not centred in the full viewport (which would ignore the sidebar and
look off-centre) and not pinned to its left edge either. On a screen
too narrow for sidebar + max-width content, --edfm-gutter naturally
evaluates to 0 and this degrades to the old "fill the workspace"
behaviour -- no separate narrow-screen override needed.

The header/tab bar's own float/absolute-position box (#mw-head) is left
at its native full width deliberately -- rewriting *that* mechanism is
a different, much higher-risk change (it took several rounds to get
right originally) -- but its *contents* (search box, personal tools,
namespace/view tabs) get their own right/left offsets pulled in by the
same --edfm-gutter below, so they still visually line up with the
centred column beneath them instead of hugging the browser edge. */
.mw-body,
#mw-data-after-content,
.mw-footer {
position: relative;
z-index: 2;
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
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,
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
/* Keep real table layout so header cells and body cells share one column grid.
The earlier display:block + tbody display:table overflow hack made sortable
headers size independently from body columns, which visibly misaligned the
Engineer directory after portrait chips were added. */
display: table;
width: 100%;
table-layout: auto;
}
.mw-body table.wikitable th,
.mw-body table.wikitable td,
.mw-body table.mw-datatable th,
.mw-body table.mw-datatable td {
vertical-align: middle;
}
.mw-body img {
max-width: 100%;
height: auto;
}

/* ==========================================================================
4. ARTICLE MASTHEAD (eyebrow / title / deck)
========================================================================== */
/* Eyebrow line is authored as ordinary wikitext (see Template:Article
header) and, purely as a placement detail, a small script
(MediaWiki:Common.js) moves it directly above #firstHeading on 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).
If JS is unavailable the eyebrow still renders, just directly under the
title instead of above it.

The eyebrow/title/deck aren't wrapped in one literal bounding box (they
live at two different DOM depths -- eyebrow is a sibling of #firstHeading,
deck is inside the article body further down -- wrapping them in one
real container would need heavier JS than is justified here), so the
"designed masthead" read comes from a matching top rule above the
eyebrow and bottom rule below the deck, a small angular marker, and the
larger title/subtitle type scale, rather than one drawn box. */
.edfm-eyebrow {
display: block;
margin: 0.2em 0 0.15em 0;
padding: 0;
border: 0;
font-family: var( --edfm-sans );
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --edfm-text-dim );
}
.edfm-eyebrow::before {
content: none;
}
.edfm-eyebrow .edfm-orange-mark {
color: var( --edfm-orange );
}
.edfm-deck {
color: var( --edfm-text-muted );
font-family: var( --edfm-sans );
font-size: 0.95rem;
font-style: italic;
line-height: 1.45;
max-width: none;
margin: 0.25em 0 0.85em 1.4em;
padding: 0;
border: 0;
}

/* ==========================================================================
1. SIDEBAR
========================================================================== */
#mw-panel {
background: transparent;
box-sizing: border-box;
width: var( --edfm-sidebar-width );
padding: 0 0.65rem 1.35rem 0.65rem;
border-right: 0;
box-shadow: none;
z-index: 3;
}
/* Logo anchors the sidebar visually. Keep raster logo artwork contained in
Vector legacy's fixed sidebar slot rather than letting the image render at
its intrinsic PNG size and clip against the rail. */
#p-logo {
box-sizing: border-box;
width: auto;
height: 10rem;
margin: 0 -0.65rem 0.65rem -0.65rem;
padding: 0.5rem 0.55rem 0.45rem 0.55rem;
border-bottom: 0 !important;
background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% );
overflow: hidden;
}
#p-logo a.mw-wiki-logo {
box-sizing: border-box;
display: block;
width: 100% !important;
height: 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
/* Each nav group gets real breathing room from the one before it instead
of being packed together like a stock wiki sidebar. */

#mw-panel .portal,
#mw-panel .vector-menu-portal {
box-sizing: border-box;
width: auto;
max-width: none;
margin-top: 1.45rem;
}
#mw-panel .portal:first-of-type,
#mw-panel .vector-menu-portal:first-of-type {
margin-top: 0;
}
#mw-panel .portal .body,
#mw-panel .portal ul,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list {
box-sizing: border-box;
width: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
border-color: var( --edfm-border-soft );
}
#mw-panel .portal a {
color: var( --edfm-text-muted );
display: block;
font-size: var( --edfm-fs-sidebar );
line-height: 1.35;
padding: 0.42em 0.55em;
margin: 0.08em -0.35em;
border-left: 2px solid transparent;
border-radius: 2px;
}
#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). */
.edfm-nav-current > a {
color: var( --edfm-orange ) !important;
font-weight: 700;
border-left-color: var( --edfm-orange );
border-left-width: 3px;
background: var( --edfm-surface-2 );
box-shadow: inset 0 0 0 1px rgba( 255, 138, 0, 0.08 );
}
.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: var( --edfm-fs-utility );
border-left: 2px solid var( --edfm-orange );
padding-left: 0.5em;
margin-left: -0.5em;
margin-bottom: 0.4em;
}

/* ==========================================================================
3. TOP BAR -- two-tier chrome
========================================================================== */
/* Vector legacy's #mw-head naturally has ~2.5em of empty space above the
tabs row (core: `#left-navigation/#right-navigation { margin-top:2.5em }`),
originally reserved just for #p-personal to float in. Painting that same
box with a background gradient that stays transparent for that top
band and then switches to a surface colour for the tabs band creates a
real two-tier read -- "primary chrome" (personal tools/search, over the
page's own background) above "wiki authoring controls" (the tabs, on
their own distinct strip) below -- without touching #mw-head's own
position/width mechanics, which is the same fragile absolute-position
system the very first pass of this project had to debug carefully to
get the persistent sidebar working at all. Not worth re-risking that
for a background change. */
#mw-head {
background-image: linear-gradient(
to bottom,
transparent 0,
transparent 2.35em,
var( --edfm-surface-2 ) 2.35em,
var( --edfm-surface-2 ) 100%
);
border-bottom: 1px solid var( --edfm-border );
}
#mw-page-base {
background-color: var( --edfm-bg-deep );
background-image: none;
}
#mw-head-base {
background-color: var( --edfm-bg-deep );
/* Polish pass: thinned from 2px -- at 2px this competed visually with
the masthead's own orange marker/rule directly below it; a single
thinner accent line still reads as "site identity colour" without
the repetition. */
border-bottom: 1px solid var( --edfm-orange );
}
/* Personal tools (login/logout) and the search box are the "primary
chrome" tier -- pulled in by the same gutter used to centre the article,
so on wide screens they visually line up with the centred column
instead of hugging the browser edge, and given noticeably more visual
weight than the tabs below them. */
#p-personal {
right: calc( 0.75em + var( --edfm-gutter ) );
display: flex;
align-items: center;
gap: 0.75rem;
}
#p-personal ul {
display: flex;
align-items: center;
gap: 0.55rem;
}
#p-personal li {
margin-left: 0;
}
#p-personal a {
color: var( --edfm-text-muted );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.3em 0.2em;
}
#p-personal a:hover {
color: var( --edfm-orange );
}
/* Echo's alert/notification icons (bell/tray) in the personal toolbar.
Confirmed by rendering the actual logged-in markup server-side: in
legacy Vector these links get merged straight into the plain personal
tools menu (SkinVectorLegacy::runOnSkinTemplateNavigationHooks) rather
than going through Vector's own `.vector-icon` icon system (that only
wraps items in the views/associated-pages menus). The icon is instead a
`background-image` on the <a> itself, from OOUI's generated
`.oo-ui-icon-bell` / `-tray` / `-bellOutline` classes -- a flat black SVG
baked straight into the image URL, so it's not recolourable via
`background-color` the way the search icon was; this is exactly the
"dark OOUI icon invisible on our dark theme" problem the invert fix
below already solves elsewhere, so reuse that same technique here
instead of a different one. The unread-count badge itself already
colours correctly on its own (Echo maps it to
`@background-color-destructive` / `-progressive`, both redefined to
EDFM's palette) and, being a mostly-saturated colour rather than
black/white/grey, survives this filter close to unchanged. */
#pt-notifications-alert .oo-ui-icon-bell,
#pt-notifications-notice .oo-ui-icon-tray,
#pt-notifications .oo-ui-icon-bellOutline {
filter: invert( 1 ) hue-rotate( 180deg );
}
.edfm-topbar-clocks {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
line-height: 1;
white-space: nowrap;
}
.edfm-topbar-clock {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.55em;
background: rgba( 66, 199, 217, 0.08 );
border: 1px solid var( --edfm-border-soft );
border-left: 2px solid var( --edfm-cyan );
color: var( --edfm-text );
}
.edfm-topbar-clock-label {
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edfm-topbar-clock time {
color: var( --edfm-cyan );
font-weight: 700;
}
.edfm-topbar-clock-local {
background: rgba( 255, 138, 0, 0.06 );
border-left-color: var( --edfm-orange );
}
.edfm-topbar-clock-local time {
color: var( --edfm-orange-bright );
}
#right-navigation {
margin-right: var( --edfm-gutter );
}
#left-navigation {
margin-left: var( --edfm-sidebar-clear );
}
/* Polish pass: core caps this at `width:20vw; max-width:20em`, which read
as cramped next to the rest of the (now larger-scale) interface --
given more room on desktop, still capped so it can't dominate the bar. */
.vector-search-box-inner {
width: 22vw;
max-width: 24em;
}
.vector-search-box-inner input,
#searchInput {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
border: 1px solid var( --edfm-border );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.5em 0.7em;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#searchInput:focus {
border-color: var( --edfm-cyan );
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.22 );
outline: none;
}
#searchInput::placeholder {
color: var( --edfm-text-dim );
}
/* Search submit control: neither rendering path gives this any color of
its own, so on our dark input background it was effectively invisible.
The no-JS legacy form's <button> is a plain black icon at 0.67 opacity
(core skins.vector.styles.legacy/components/SearchBox.less); the
JS/Vue-Codex widget (.vector-search-box-vue) has no separate button at
all, just a start icon inside the input using the same technique
(mask-image recoloured via `background-color`, see Codex's
CdxSearchInput.css). Recolour both to match the site's orange
progressive-action colour used everywhere else. */
.vector-search-box-vue .cdx-text-input__start-icon {
background-color: var( --edfm-orange );
opacity: 1;
}
.searchButton[ name='go' ] {
background-image: none;
background-color: var( --edfm-orange );
opacity: 0.85;
-webkit-mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
}
.searchButton[ name='go' ]:hover,
.searchButton[ name='go' ]:focus {
background-color: var( --edfm-orange-bright );
opacity: 1;
}
/* 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.

These are the "wiki authoring controls" utility tier -- deliberately
smaller (--edfm-fs-utility) and quieter than personal-tools/search
above them, sitting on their own background strip (see #mw-head above).
Selected state stays orange (it's still real navigation, just
secondary); unselected rests dim so the *selected* tab is the one that
reads clearly. */
.vector-menu-tabs-legacy li {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs-legacy li.selected {
background-image: none;
background-color: var( --edfm-surface-1 );
/* Polish pass: a small underline makes the selected tab unambiguous at
a glance instead of relying on the text colour change alone. */
box-shadow: inset 0 -2px 0 var( --edfm-orange );
}
.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 );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 700;
}
.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. */
.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;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var( --edfm-fs-utility );
font-weight: 700;
}
.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-3 );
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 );
font-size: var( --edfm-fs-sidebar );
}
.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-4 );
}

/* Front-page chrome: the hero already names the site, so suppress the
generated MediaWiki page title only on the Main Page. Keep the namespace
tab label and all other article titles intact. */
body.page-Main_Page #firstHeading {
display: none;
}
body.page-Main_Page .mw-body-content {
margin-top: 0;
}

/* ==========================================================================
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 );
}
.mw-body {
border-right: 1px solid var( --edfm-border );
}
#content {
background-color: var( --edfm-surface-1 );
}

/* Site notice chrome. The global disclaimer was moved to its dedicated
legal/disclaimer page, so an empty #siteNotice must not leave behind a
phantom divider at the top of the article surface. */
#siteNotice:empty {
display: none;
}
#siteNotice:not( :empty ) {
font-size: var( --edfm-fs-meta );
line-height: 1.5;
color: var( --edfm-text-dim );
font-style: normal;
padding-bottom: 0.7em;
margin-bottom: 1.4rem;
border-bottom: 1px solid var( --edfm-border-soft );
}
#siteNotice:not( :empty ) em, #siteNotice:not( :empty ) i {
color: var( --edfm-text-muted );
font-style: italic;
}
#siteNotice:not( :empty ) a {
color: var( --edfm-link-external );
}
#siteNotice a:hover {
color: var( --edfm-link-external-hover );
}

/* ==========================================================================
HOME PAGE DASHBOARD
========================================================================== */
.edfm-home-hero {
margin: 0.9rem 0 1.6rem;
padding: 1.35rem 1.55rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.16 ), transparent 34% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.14 ), transparent 42% ),
var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 4px solid var( --edfm-cyan );
clip-path: polygon( 0 0, calc( 100% - 12px ) 0, 100% 12px, 100% 100%, 0 100% );
}
.edfm-home-hero-kicker,
.edfm-home-card-kicker {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.edfm-home-hero-title {
margin-top: 0.25rem;
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: clamp( 1.55rem, 1.1rem + 1.5vw, 2.2rem );
font-weight: 800;
line-height: 1.15;
}
.edfm-home-hero-text {
max-width: none;
margin-top: 0.55rem;
color: var( --edfm-text-muted );
font-size: 1.05rem;
line-height: 1.55;
}
.edfm-home-grid {
display: grid;
gap: 1rem;
margin: 1.2rem 0 2rem;
}
.edfm-home-grid-four {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.edfm-home-grid-topics {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-grid-two {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-card {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
padding: 1rem 1.1rem;
box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.2 );
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-home-card:hover {
transform: translateY( -2px );
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-orange );
}
.edfm-home-card-primary {
border-left-color: var( --edfm-orange );
}
.edfm-home-card-warning {
border-left-color: var( --edfm-text-dim );
}
.edfm-home-card-title,
.edfm-home-card-title a {
margin-top: 0.35rem;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.edfm-home-card-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-home-card-text,
.edfm-home-link-list {
margin-top: 0.65rem;
color: var( --edfm-text-muted );
line-height: 1.6;
}
.edfm-home-link-list a {
font-weight: 600;
}
@media ( max-width: 1100px ) {
.edfm-home-grid-four {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( max-width: 760px ) {
.edfm-home-grid-four,
.edfm-home-grid-topics,
.edfm-home-grid-two {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
HOME PAGE NEWS MODULE
========================================================================== */
.edfm-home-news {
margin: 1.8rem 0 2.2rem;
}
.edfm-news-feature-grid {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 1rem;
margin-bottom: 1rem;
}
.edfm-news-card,
.edfm-news-list {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
box-shadow: 0 14px 26px rgba( 0, 0, 0, 0.22 );
overflow: hidden;
}
.edfm-news-card {
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-news-card:hover {
transform: translateY( -2px );
border-color: rgba( 255, 138, 0, 0.48 );
background: var( --edfm-surface-3 );
}
.edfm-news-card-art {
display: flex;
align-items: flex-end;
min-height: 7rem;
padding: 0.8rem 1rem;
box-sizing: border-box;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.28 ), transparent 42% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.2 ), transparent 48% ),
linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-1 ) );
border-bottom: 1px solid var( --edfm-border );
color: rgba( 237, 240, 242, 0.72 );
font-family: var( --edfm-mono );
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.edfm-news-card-primary .edfm-news-card-art {
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.38 ), transparent 46% ),
linear-gradient( 315deg, rgba( 79, 159, 232, 0.26 ), transparent 52% ),
var( --edfm-surface-4 );
}
.edfm-news-card-body {
padding: 1rem 1.15rem 1.15rem;
}
.edfm-news-meta {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.edfm-news-title,
.edfm-news-title a {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.edfm-news-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-news-summary {
color: var( --edfm-text-muted );
line-height: 1.55;
margin-top: 0.65rem;
}
.edfm-news-list {
padding: 1.1rem 1.25rem 1.2rem;
border-left: 4px solid var( --edfm-orange );
}
.edfm-news-list-heading {
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.edfm-news-list ul {
margin: 0;
}
.edfm-news-list li {
margin-bottom: 0.55rem;
color: var( --edfm-text-muted );
}
.edfm-news-more {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px solid var( --edfm-border-soft );
text-align: right;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
@media ( max-width: 900px ) {
.edfm-news-feature-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
10. JUMP NAVIGATION (table of contents)
========================================================================== */
/* A compact navigation strip/tile-grid rather than a traditional TOC box
of small text links -- real MediaWiki anchors/markup untouched, this is
all presentation. "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 {
display: block;
width: 100%;
box-sizing: border-box;
background: none;
border: none;
color: var( --edfm-text );
padding: 0;
margin: 1.8rem 0;
}
.toctitle {
position: relative;
margin-bottom: 0.7em;
}
.toctitle::before {
content: 'Jump to';
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-orange );
}
/* Core ships `.toc h2 { font-size: 100%; ... }` (mediawiki.skinning/toc/
screen.less) at the exact same specificity (one class + one tag) as a
plain `.toctitle h2` rule -- same "tie that doesn't resolve the way
naive source order would suggest" gotcha documented elsewhere in this
file. #toc's own ID makes this one unambiguous instead of relying on
cascade order. */
#toc .toctitle h2,
.toc .toctitle h2 {
font-size: 0 !important;
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 );
}
/* Desktop: a balanced multi-column jump list. CSS grid flows row-first,
which makes numbered sections read 1, 2, 3, 4 across the first row. For a
reference/walkthrough TOC, scan order is clearer when each column reads
downward first: 1/2/3, then 4/5/6, then 7/8/9. CSS columns preserve the
real DOM/source order while presenting that column-major layout on every
page that uses the stock MediaWiki TOC. */
.toc > ul {
display: block;
column-count: 3;
column-gap: 0.45rem;
list-style: none;
margin: 0;
padding: 0;
}
.toc > ul > li {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 0.45rem;
}
.toc li {
margin-top: 0;
}
/* 2026-08-08 density pass: reverted to side-by-side number/label (from the
earlier "stacked number-above-label" polish pass) specifically to cut
per-tile height -- with 12 sections on articles like The Dweller, the
stacked layout meant the jump nav alone filled most of the first
viewport. Row layout plus tighter padding/font-size gets noticeably
more sections above the fold without dropping the numbering or shrinking
tap targets below a comfortable size -- see the dedicated mobile padding
bump further down for keeping touch targets safe on small screens
specifically. Whole tile stays one real <a>, so it's still a single
click/focus target and keyboard tab stop either way. */
.toc a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
height: 100%;
box-sizing: border-box;
padding: 0.5em 0.75em 0.5em 0.7em;
background: var( --edfm-surface-3 );
/* Left accent rail: matches the orange section numbers and gives each
jump tile a stronger EDFM navigation affordance without boxing the
entire card. */
border-left: 4px solid var( --edfm-orange );
box-shadow: inset 1px 0 0 rgba( 255, 162, 26, 0.35 );
color: var( --edfm-text-muted );
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.toc a:hover {
background: var( --edfm-surface-4 );
border-left-color: var( --edfm-cyan );
box-shadow: inset 1px 0 0 rgba( 66, 199, 217, 0.45 );
color: var( --edfm-text );
transform: translateY( -1px );
}
/* Nested sub-levels (rare on this site so far) drop back to a plain
indented block list inside their parent tile's grid cell rather than
trying to stay gridded themselves. */
.toc ul ul {
grid-column: unset;
list-style: none;
margin: 0.3em 0 0 1.2em;
padding: 0;
display: block;
}
.toc ul ul a {
flex-direction: row;
align-items: center;
background: none;
border-left-width: 1px;
padding: 0.3em 0.6em;
}
.toc ul ul .tocnumber {
font-size: 0.85em;
}
.toc ul ul .toctext {
font-size: 0.85em;
}
.tocnumber {
color: var( --edfm-orange );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: 1.05rem;
line-height: 1;
}
.toctext {
color: inherit;
font-size: 0.85rem;
line-height: 1.3;
}
/* Column count changes only at readable/touch-friendly breakpoints. Keep
column-major ordering at 3 and 2 columns; mobile becomes the natural single
source-order list. */
@media ( max-width: 860px ) {
.toc > ul {
column-count: 2;
}
}
@media ( max-width: 560px ) {
.toc > ul {
column-count: 1;
}
/* Single-column tiles are already full-width here, so there's no
density pressure left -- restore closer to the pre-2026-08-08
padding instead of the tighter desktop value, keeping tap targets
comfortable rather than compacting mobile just because desktop
compacted. */
.toc a {
padding: 0.7em 0.95em;
}
}

/* ==========================================================================
5b. FULL-WIDTH ARTICLE FLOW OVERRIDES
========================================================================== */
/* 2026-08-10 audit: EDFM pages should not leave half the article rail empty.
Earlier readability caps on paragraphs/hero copy made long-form sections
look like narrow blocks while tables, TOCs, and navigation tiles spanned
the page. Keep the main rail full-width everywhere; individual components
may still opt into their own internal grids, but ordinary article copy and
common block containers should stretch to the content edge. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > div:not( .thumb ):not( .tright ):not( .tleft ):not( .floatright ):not( .floatleft ):not( .edfm-status ):not( .edfm-panel ):not( .edfm-box ) {
max-width: none;
box-sizing: border-box;
}
/* Final guard against stale/skin rules recapping article prose while leaving
compact maintenance/status panels free to keep their intentional centred width. */
.mw-body .mw-parser-output > p,
.mw-parser-output > p {
max-width: none !important;
width: 100%;
box-sizing: border-box;
}

/* ==========================================================================
6. PANELS / CALLOUTS, and 11. ARTICLE METADATA / STATUS MODULE
========================================================================== */
/* Deliberately NOT defined here. .edfm-box / .edfm-panel* / .edfm-status* /
.edfm-inline-flag / .edfm-related* are used exclusively by the
editorial templates (see Template:Article status, Template:Draft
warning, Template:Related articles, 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 );
font-size: var( --edfm-fs-body );
}
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: var( --edfm-fs-meta );
text-align: left;
padding: 0.6em 0.8em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
/* 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 );
}

/* mw-json content model (Module:Data/* pages, e.g. Module:Data/Engineers/*)
-- MediaWiki core's JSON page view (resources/src/mediawiki.content.json.less)
styles itself from Codex design tokens, which this site's dark theme never
touches, so these tables rendered in MediaWiki's stock light colours
against every other dark surface on the site. Recoloured to match the
table.wikitable treatment above instead of inventing a new look. */
table.mw-json {
background-color: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: var( --edfm-fs-body );
}
table.mw-json tr {
background-color: var( --edfm-surface-2 );
}
table.mw-json th,
table.mw-json td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
table.mw-json th {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: var( --edfm-fs-meta );
text-align: left;
}
.mw-json-value,
.mw-json-single-value {
background-color: transparent;
color: var( --edfm-text );
}
.mw-json-empty {
background-color: transparent;
color: var( --edfm-text-dim );
}

/* ==========================================================================
15. FOOTER
========================================================================== */
/* A real branded footer: a small wordmark line (pure CSS generated
content -- decorative branding only, redundant with the sidebar logo
already visible, so nothing load-bearing depends on it being
selectable), a top rule with more separation from the article above it,
and MediaWiki's real info/places/icon links laid out on a clean grid
with the badges aligned as a group rather than floating alone. */
.mw-footer {
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
margin-top: 2.5rem;
padding-top: 1.6rem;
border-top: 1px solid var( --edfm-border );
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "brand brand" "info icons" "places icons";
align-items: center;
column-gap: 2em;
row-gap: 0.4rem;
}
.mw-footer::before {
grid-area: brand;
content: 'EDFM // Elite Dangerous Field Manual';
font-family: var( --edfm-mono );
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var( --edfm-text-muted );
margin-bottom: 0.5rem;
}
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
color: var( --edfm-text-dim );
border-color: var( --edfm-border-soft );
font-size: var( --edfm-fs-meta );
}
#footer-info {
grid-area: info;
margin: 0;
line-height: 1.6;
}
#footer-places {
grid-area: places;
margin: 0;
}
/* Same "small uppercase label" treatment used for tags/meta text
elsewhere, so these read as deliberate EDFM navigation rather than
default MediaWiki footer links. */
#footer-places li {
display: inline-block;
margin-right: 1.4em;
}
#footer-places a {
font-family: var( --edfm-mono );
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.78rem;
}
/* A left rule ties the badges to the rest of the footer instead of
letting them read as detached/floating in their own space. */
#footer-icons {
grid-area: icons;
align-self: center;
display: flex;
gap: 0.75em;
margin: 0;
padding-left: 1.6em;
border-left: 1px solid var( --edfm-border-soft );
}
#footer-icons img {
background: var( --edfm-text );
border-radius: 2px;
}
@media ( max-width: 640px ) {
.mw-footer {
grid-template-columns: 1fr;
grid-template-areas: "brand" "info" "places" "icons";
}
#footer-icons {
margin-top: 0.7em;
padding-left: 0;
border-left: none;
border-top: 1px solid var( --edfm-border-soft );
padding-top: 0.7em;
}
}

/* ==========================================================================
MISC MediaWiki UI chrome that ships with light backgrounds by default
========================================================================== */
.catlinks {
background: none !important;
border: none !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-meta );
padding: 0.9em 0 0 0 !important;
margin-top: 1.8rem !important;
}
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: 350px;
max-width: min( 350px, 42% );
margin: 0 0 1.25em 1.35em;
border: 1px solid var( --edfm-border );
border-top: 2px solid var( --edfm-orange );
background: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: 0.92rem;
}
.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.5em 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-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
border: 1px dashed var( --edfm-border );
background: var( --edfm-surface-1 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility );
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 0.5em;
}
/* Optional section label (Template:Infobox's |groupN=) splitting a long
infobox into scannable groups, e.g. Engineer infoboxes into "ENGINEER"
and "ACCESS" (2026-08-08, part of the Engineer article layout pass). A
shaded band with a bottom rule rather than a full boxed sub-header --
consistent with .edfm-infobox-row's own bottom-rule-only separator, not
a new visual language. */
.edfm-infobox-group {
background: var( --edfm-surface-3 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35em 0.7em;
border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-row {
display: flex;
border-bottom: 1px solid var( --edfm-border-soft );
padding: 0.45em 0.7em;
}
.edfm-infobox-row:last-child {
border-bottom: none;
}
.edfm-infobox-label {
font-weight: 700;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
width: 40%;
flex-shrink: 0;
color: var( --edfm-cyan );
}
.edfm-infobox-value {
width: 60%;
}
@media ( max-width: 640px ) {
.edfm-infobox {
float: none;
width: auto;
max-width: none;
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::before {
display: none;
}
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;
background-image: none;
background-color: var( --edfm-surface-2 );
}
#left-navigation,
#right-navigation {
float: none;
margin: 0 !important;
width: auto;
clear: both;
}
#left-navigation {
margin-top: 0 !important;
}
/* Core Vector legacy floats each tab/dropdown portlet
(.vector-menu-tabs-legacy for Page/Discussion and Read/View
source/View history, .vector-menu-dropdown for the More menu) AND
floats every <li> inside their <ul>, with no wrapping at all -- at
narrow widths the labels just overflow and overlap each other
(confirmed with a real screenshot: "View source" and "More"
overlapped instead of wrapping to a new line). Switching the
portlets to inline-block and their tab lists to flex-wrap lets them
reflow onto as many rows as needed instead. */
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-dropdown {
float: none;
display: inline-block;
vertical-align: top;
}
.vector-menu-tabs-legacy ul {
float: none;
display: flex;
flex-wrap: wrap;
}
.vector-menu-tabs-legacy li {
float: none;
}
#p-personal {
position: static;
text-align: right;
padding: 0.5em 1em;
margin: 0;
right: auto !important;
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;
background: var( --edfm-bg-deep );
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 !important;
margin-right: 0 !important;
max-width: none;
}
.mw-body {
margin-top: 0;
border-width: 0;
padding: 1em;
}
.edfm-status-details {
grid-template-columns: 1fr;
}
/* .toc > ul column count is NOT overridden here -- the dedicated
1150px/560px breakpoints above already cover every width down to
the smallest phones; duplicating a rule here previously fought
those (same specificity, this position in the cascade would have
won and wrongly forced 1 column as low as 561px). */
#firstHeading {
font-size: 1.6rem;
}
.mw-body h2 {
margin-top: 2.25rem;
}
.edfm-eyebrow {
padding-top: 0.9em;
}
}
/* ==========================================================================
16. OOUI DIALOGS -- VisualEditor's save dialog, and any other OOUI
dialog (delete/move/protect confirmations, special-page dialogs).
These render via OOUI's own bundled WikimediaUI theme stylesheet,
entirely outside the .edfm-* component system this file otherwise
covers, so without this they show up starkly white against the rest of
the dark-themed site regardless of any variable/token used elsewhere in
this file. !important is justified the same way as the h1-h6 fix above:
OOUI's own stylesheet loads with equal-or-higher effective specificity,
and this is a correctness/contrast fix, not decoration.
========================================================================== */
.oo-ui-window-frame {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-processDialog {
background: rgba( 7, 9, 11, 0.75 ) !important;
}
.oo-ui-processDialog-navigation,
.oo-ui-window-head,
.oo-ui-window-foot {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-processDialog-title,
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-inputWidget-input {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* VisualEditor's reference dialog embeds a mini target widget for the
reference body. The widget ships with a white WikimediaUI base surface,
so theme that inner editing box separately from the surrounding OOUI
dialog chrome. */
.ve-ui-mwReferenceDialog .ve-ui-targetWidget,
.ve-ui-mwReferenceDialog .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ),
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget,
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-surface,
.ve-ui-mwReferenceDialog .ve-ce-surface,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode,
.ve-ui-mwReferenceDialog .ve-ce-documentNode,
.ve-ui-mwReferenceDialog .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode p,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode li,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode span {
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-targetWidget-focused {
border-color: var( --edfm-cyan ) !important;
box-shadow: inset 0 0 0 1px rgba( 77, 199, 232, 0.42 ) !important;
}
.ve-ui-mwSaveDialog-options,
.oo-ui-panelLayout,
.oo-ui-window-body {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-popupWidget-popup {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-buttonElement:not( .oo-ui-flaggedElement-primary ) > .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
17. OOUI TOOLBAR -- VisualEditor's persistent editing toolbar and its
dropdown menus (Cite, Insert, paragraph style, etc.), and the equivalent
toolbar/popups used when editing a single section. Same root cause as
16. OOUI DIALOGS above (OOUI's own bundled theme, not touched by
anything else in this file), found separately because it's a different
set of OOUI classes (toolbar chrome, not dialog chrome). Icons are not
overridden here and don't need to be -- they're currentColor-based, so
they pick up the text colour set below automatically.
========================================================================== */
.oo-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-tool-title,
.oo-ui-tool-link,
.oo-ui-toolGroup-tools .oo-ui-optionWidget,
.oo-ui-menuOptionWidget,
.oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-optionWidget.oo-ui-optionWidget-selected,
.oo-ui-optionWidget:hover,
.oo-ui-tool:hover .oo-ui-tool-link {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
18. OOUI GENERIC MENUS -- .oo-ui-menuSelectWidget is OOUI's general
dropdown/autocomplete menu class (paragraph-style picker, citation-type
picker, link/media search suggestions, etc.) -- a different class from
the toolbar-specific popups in 17. above, confirmed separately via
computed-style inspection to default to the same white OOUI theme
background.
========================================================================== */
.oo-ui-menuSelectWidget {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-menuOptionWidget {
color: var( --edfm-text ) !important;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget:hover {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
19. OOUI ICONS -- the toolbar/menu icons themselves (Bold, link, list,
Cite, undo/redo, etc.) are rendered as background-image SVGs with a
colour baked into the SVG markup, not currentColor-based masks -- so
16-18 above (which only recolour backgrounds/text) left them dark and
low-contrast against the now-dark surfaces. OOUI ships its own fix for
exactly this, gated behind a narrow accessibility media query
(forced-colors + prefers-color-scheme: dark) that doesn't apply to this
site's own always-on dark theme -- reusing that exact technique
unconditionally rather than inventing a different one. `:not(
.oo-ui-image-invert )` is OOUI's own exclusion for icons already meant
to render light (e.g. on the orange primary-button background) --
inverting those too would flip them back to dark.
========================================================================== */
.oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* ==========================================================================
20. EDIT SOURCE FORM -- MediaWiki core + WikiEditor + CodeMirror

The source editor is not covered by the article/component selectors above:
`action=edit` loads core edit-form CSS, WikiEditor chrome, and sometimes
CodeMirror with their own light neutral surfaces. Force the same EDFM dark
surface stack here so the source page no longer flashes as a white island.
========================================================================== */
.mw-editform,
#editform,
#toolbar,
.editOptions,
.mw-editTools,
.mw-summary-preview,
.mw-datatable,
.wikiEditor-ui,
.wikiEditor-ui-view,
.wikiEditor-ui-text,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-top,
.wikiEditor-ui-controls,
.wikiEditor-ui-tabs,
.wikiEditor-ui-buttons,
.CodeMirror,
.CodeMirror-scroll {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-editform textarea,
#wpTextbox1,
#wpSummary,
#wpSummaryWidget input,
#editform input[type='text'],
#editform input[type='search'],
#editform textarea,
.wikiEditor-ui-text textarea,
.CodeMirror-code,
.CodeMirror-lines,
.CodeMirror pre {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
caret-color: var( --edfm-orange-bright );
}
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .page,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar .options,
.wikiEditor-ui-toolbar .booklet,
.wikiEditor-ui-toolbar .pages,
.CodeMirror-gutters {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text-muted ) !important;
border-color: var( --edfm-border ) !important;
}
.wikiEditor-ui-toolbar a,
.wikiEditor-ui-toolbar .label,
.wikiEditor-ui-toolbar .tab a,
.mw-editTools a,
.editOptions label,
.mw-editform label,
.CodeMirror-linenumber {
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab a:hover,
.wikiEditor-ui-toolbar .tool-button:hover,
.wikiEditor-ui-toolbar .tool-select:hover,
.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-table td,
.CodeMirror-activeline-background {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab.current a,
.wikiEditor-ui-toolbar .section-main,
.CodeMirror-selected {
background: var( --edfm-surface-4 ) !important;
}
.CodeMirror-cursor {
border-left-color: var( --edfm-orange-bright ) !important;
}
.CodeMirror-matchingbracket {
color: var( --edfm-orange-bright ) !important;
}

/* ==========================================================================
21. FILE PAGE CHROME -- #filetoc (the File / File history / File usage /
Metadata nav on File: description pages) is defined in MediaWiki core's
mediawiki.action.view.filepage.less, entirely separate from both the
.edfm-* system and the OOUI fixes in 16-19 above -- a different
subsystem again, only loaded on File: pages, which is why it was never
touched by anything else in this file. Link colour inside it already
correctly inherits the site's normal link blue; only the light neutral
background/border needed overriding.
========================================================================== */
#filetoc {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
22. FILE PAGE: METADATA TABLE + MEDIA VIEWER BUTTON -- #mw_metadata is
the EXIF-style metadata table (separate from the File history table
above -- that one already carries the .wikitable class and picked up
dark styling from 7. TABLES automatically; this one doesn't have that
class, so it never matched). The "Open in Media Viewer" button is a
Codex component (MultimediaViewer extension) -- a third distinct
styling subsystem from OOUI and MediaWiki core skinning, again never
touched by anything else in this file.
========================================================================== */
#mw_metadata th,
#mw_metadata td {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-mmv-view-expanded.cdx-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Core MediaWiki/action buttons: match EDFM dark theme instead of default white/orange controls. */
.mw-ui-button,
.mw-htmlform-submit,
.mw-htmlform-ooui-wrapper button,
#mw-patrol-form button,
#mw-patrol-form input[type="submit"],
form.mw-htmlform button,
form.mw-htmlform input[type="submit"],
input[type="submit"].mw-ui-button,
button.mw-ui-button,
.cdx-button:not( .cdx-button--fake-button--enabled ) {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border: 1px solid var( --edfm-border-strong, var( --edfm-border ) ) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var( --edfm-mono ) !important;
font-weight: 800 !important;
text-shadow: none !important;
}
.mw-ui-button:hover,
.mw-htmlform-submit:hover,
.mw-htmlform-ooui-wrapper button:hover,
#mw-patrol-form button:hover,
#mw-patrol-form input[type="submit"]:hover,
form.mw-htmlform button:hover,
form.mw-htmlform input[type="submit"]:hover,
input[type="submit"].mw-ui-button:hover,
button.mw-ui-button:hover,
.cdx-button:not( .cdx-button--fake-button--enabled ):hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-orange-bright ) !important;
border-color: var( --edfm-orange ) !important;
}
.mw-ui-button:focus,
.mw-htmlform-submit:focus,
.mw-htmlform-ooui-wrapper button:focus,
#mw-patrol-form button:focus,
#mw-patrol-form input[type="submit"]:focus,
form.mw-htmlform button:focus,
form.mw-htmlform input[type="submit"]:focus,
input[type="submit"].mw-ui-button:focus,
button.mw-ui-button:focus,
.cdx-button:not( .cdx-button--fake-button--enabled ):focus {
outline: 2px solid var( --edfm-cyan ) !important;
outline-offset: 2px !important;
}

/* Patrol action: remove the cramped review button from the public article chrome. */
#mw-patrol-form {
display: none !important;
}

/* Frontier news: after removing the repeated dispatch list, keep attribution compact. */
.edfm-news-attribution-compact {
margin-top: 0.35rem;
padding-top: 0.6rem;
}

/* ===========================================================================
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL
=========================================================================== */
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar,
large touch targets, off-canvas navigation, search-forward layout, and
single-column readable article flow -- while preserving EDFM's dark field
manual identity and not copying RuneScape.wiki assets/CSS.
The close button is injected into #mw-panel by Common.js, so it must be
explicitly hidden by default; otherwise a tiny native white button appears
in the desktop sidebar's top-left corner. */
.edfm-mobile-appbar,
.edfm-mobile-scrim,
.edfm-mobile-close-button {
display: none;
}
@media ( max-width: 800px ) {
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var( --edfm-bg-page );
overflow-x: hidden;
}
body.edfm-mobile-menu-open {
overflow: hidden;
}
.edfm-mobile-appbar {
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
position: sticky;
top: 0;
z-index: 1200;
min-height: 56px;
padding: 0 0.35rem;
background:
linear-gradient( 90deg, rgba( 255, 138, 0, 0.18 ), transparent 38% ),
var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.35 );
}
.edfm-mobile-brand {
min-width: 0;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.edfm-mobile-brand::before {
content: 'EDFM // ';
color: var( --edfm-orange );
}
.edfm-mobile-menu-button,
.edfm-mobile-search-button,
.edfm-mobile-close-button {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var( --edfm-text );
font: 700 1.5rem/1 var( --edfm-mono );
cursor: pointer;
}
.edfm-mobile-menu-button:focus-visible,
.edfm-mobile-search-button:focus-visible,
.edfm-mobile-close-button:focus-visible {
outline: 2px solid var( --edfm-cyan );
outline-offset: -4px;
}
.edfm-mobile-menu-button::before {
content: '☰';
color: var( --edfm-orange );
}
.edfm-mobile-search-button::before {
content: '⌕';
font-size: 1.85rem;
color: var( --edfm-cyan );
}
.edfm-mobile-close-button::before {
content: '×';
color: var( --edfm-text );
}
.edfm-mobile-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba( 0, 0, 0, 0.58 );
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
body.edfm-mobile-menu-open .edfm-mobile-scrim {
opacity: 1;
pointer-events: auto;
}
#mw-navigation {
background: var( --edfm-surface-2 );
box-shadow: none;
}
#mw-head {
position: relative;
z-index: 1100;
border-bottom: 1px solid var( --edfm-border );
}
#mw-head .vector-search-box {
display: none;
margin: 0;
padding: 0.65rem;
background: var( --edfm-surface-2 );
border-top: 1px solid var( --edfm-border-soft );
}
body.edfm-mobile-search-open #mw-head .vector-search-box {
display: block;
}
#mw-head .vector-search-box-inner,
#mw-head #searchform {
width: 100%;
}
#mw-head #searchInput {
min-height: 44px;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
#left-navigation,
#right-navigation {
padding: 0 0.45rem 0.35rem;
background: var( --edfm-surface-2 );
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.vector-menu-tabs-legacy ul {
flex-wrap: nowrap;
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-dropdown .vector-menu-heading {
min-height: 36px;
display: inline-flex;
align-items: center;
}
#p-personal {
display: none;
}
#mw-panel {
position: fixed;
top: 0;
left: 0;
z-index: 1300;
width: min( 82vw, 22rem );
height: 100dvh;
box-sizing: border-box;
padding: 0;
background: var( --edfm-surface-1 );
border: 0;
border-right: 1px solid var( --edfm-border );
box-shadow: 18px 0 36px rgba( 0, 0, 0, 0.45 );
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX( -105% );
transition: transform 0.2s ease;
}
body.edfm-mobile-menu-open #mw-panel {
transform: translateX( 0 );
}
#mw-panel::before {
content: 'EDFM Navigation';
display: block;
position: sticky;
top: 0;
z-index: 1;
padding: 1rem 3.4rem 1rem 1rem;
background: var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
color: var( --edfm-orange );
font: 800 0.86rem/1.2 var( --edfm-mono );
letter-spacing: 0.08em;
text-transform: uppercase;
}
#mw-panel .edfm-mobile-close-button {
position: absolute;
top: 0.3rem;
right: 0.35rem;
z-index: 2;
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin: 0;
padding: 0.75rem 0;
border-bottom: 1px solid var( --edfm-border-soft );
}
#mw-panel .vector-menu-heading {
margin: 0.25rem 1rem 0.45rem;
}
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
display: flex;
align-items: center;
min-height: 46px;
box-sizing: border-box;
padding: 0.55rem 1rem;
border-left: 3px solid transparent;
color: var( --edfm-text-muted );
font-size: 1rem;
text-decoration: none;
}
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-content-list li a:focus {
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-cyan );
color: var( --edfm-text );
}
#mw-panel .edfm-nav-current > a,
#mw-panel .edfm-nav-current > a:visited {
background: rgba( 255, 138, 0, 0.12 );
border-left-color: var( --edfm-orange );
color: var( --edfm-orange ) !important;
}
.mw-body {
padding: clamp( 1rem, 4vw, 1.35rem );
font-size: 1rem;
line-height: 1.68;
}
#siteNotice {
margin-bottom: 1rem;
padding-bottom: 0.85rem;
}
#firstHeading {
font-size: clamp( 1.65rem, 8vw, 2.25rem );
line-height: 1.1;
letter-spacing: -0.015em;
}
.mw-body h2 {
font-size: 1.18rem;
line-height: 1.25;
}
.mw-body p,
.mw-body li {
max-width: none;
}
.mw-body img,
.mw-body .thumb,
.mw-body .thumbinner,
.mw-body .thumbimage {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
.mw-body .thumb,
.mw-body .tright,
.mw-body .tleft {
float: none !important;
clear: both;
width: auto !important;
margin: 1rem 0 !important;
}
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.mw-parser-output > table.wikitable th,
.mw-parser-output > table.wikitable td,
.mw-parser-output > table.mw-datatable th,
.mw-parser-output > table.mw-datatable td {
white-space: normal;
min-width: 8rem;
}
.edfm-infobox {
font-size: 0.95rem;
}
.edfm-infobox-row {
display: grid;
grid-template-columns: minmax( 7.5rem, 40% ) 1fr;
gap: 0.5rem;
padding: 0.65rem 0.8rem;
}
.edfm-infobox-label,
.edfm-infobox-value {
width: auto;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tbody,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tr,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type {
overflow: visible;
white-space: normal;
background: transparent;
border: 0;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th {
margin-top: 0.75rem;
border-left: 3px solid var( --edfm-orange );
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
margin-bottom: 0.75rem;
background: var( --edfm-surface-2 );
border-left: 3px solid var( --edfm-border );
}
.mw-footer {
padding: 1rem;
margin-top: 1.5rem;
}
}
@media ( max-width: 430px ) {
.edfm-mobile-brand::before {
content: 'EDFM';
margin-right: 0.45rem;
}
.edfm-mobile-brand {
font-size: 0.88rem;
}
.edfm-infobox-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}

/* 22a. Mobile action tabs refinement: keep Vector's page/discussion/read/
source/history controls available, but put them on one compact horizontal
action rail so the first phone viewport feels like a real mobile app shell
instead of two stacked desktop tab bars. */
@media ( max-width: 800px ) {
body:not( .edfm-mobile-search-open ) #mw-head {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
body:not( .edfm-mobile-search-open ) #left-navigation,
body:not( .edfm-mobile-search-open ) #right-navigation {
flex: 0 0 auto;
clear: none !important;
float: none !important;
width: auto;
padding: 0 0.25rem;
margin: 0 !important;
border-right: 1px solid var( --edfm-border-soft );
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown {
float: none !important;
display: inline-block;
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a,
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a:visited,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown .vector-menu-heading {
min-height: 40px;
padding-left: 0.55rem;
padding-right: 0.55rem;
font-size: 0.68rem;
}
body.edfm-mobile-search-open #mw-head {
display: block;
}
}

/* ===========================================================================
24. HARD OVERRIDE: JUMP TILE LEFT RAIL

The earlier border-left rail can be swallowed by ResourceLoader/cascade or
visually read as part of the tile edge. Draw the rail as a high-specificity
gradient on the actual top-level TOC anchors so it is unmistakable on the
live jump grid.
=========================================================================== */
#toc.toc > ul > li > a,
.mw-parser-output #toc > ul > li > a,
.mw-parser-output .toc > ul > li > a {
background-image: linear-gradient( 90deg, var( --edfm-orange ) 0, var( --edfm-orange ) 6px, transparent 6px ) !important;
border-left: 0 !important;
padding-left: 1rem !important;
}
#toc.toc > ul > li > a:hover,
#toc.toc > ul > li > a:focus-visible,
.mw-parser-output #toc > ul > li > a:hover,
.mw-parser-output #toc > ul > li > a:focus-visible,
.mw-parser-output .toc > ul > li > a:hover,
.mw-parser-output .toc > ul > li > a:focus-visible {
background-image: linear-gradient( 90deg, var( --edfm-cyan ) 0, var( --edfm-cyan ) 6px, transparent 6px ) !important;
}

/* ===========================================================================
25. SOURCE EDIT CONFLICT / WIKITEXT DIFF THEME

Source-edit conflict review uses MediaWiki's diff table classes, not the
normal edit textarea/WikiEditor chrome. Without this, unchanged rows and
inline change pills fall back to stark white/yellow/blue defaults. Keep the
old/new meaning, but render it in EDFM's dark surfaces with restrained
orange/cyan accents.
=========================================================================== */
.mw-parser-output table.diff,
table.diff,
.diff {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-collapse: separate !important;
border-spacing: 0 0.12rem !important;
}
.diff-title,
.diff-otitle,
.diff-ntitle,
#mw-diff-otitle1,
#mw-diff-ntitle1 {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
}
td.diff-lineno,
.diff-lineno {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
border: 0 !important;
padding: 0.35rem 0.5rem !important;
}
td.diff-marker,
.diff-marker {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
padding: 0.25rem 0.45rem !important;
text-align: center;
}
td.diff-context,
td.diff-addedline,
td.diff-deletedline,
.diff-context,
.diff-addedline,
.diff-deletedline,
.mw-diff-inline-context,
.mw-diff-inline-added,
.mw-diff-inline-deleted,
.mw-diff-inline-changed,
.mw-diff-inline-moved {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
font-family: var( --edfm-mono );
box-shadow: none !important;
}
td.diff-context:empty,
td.diff-addedline:empty,
td.diff-deletedline:empty,
.diff-context:empty,
.diff-addedline:empty,
.diff-deletedline:empty {
/* Empty diff cells are alignment placeholders. Keep their card boundary so
the two-column source-conflict diff does not look broken, but make them
compact and neutral instead of tall blank blocks. */
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none !important;
min-height: 0;
padding-top: 0.08rem !important;
padding-bottom: 0.08rem !important;
}
td.diff-deletedline,
.diff-deletedline,
.mw-diff-inline-deleted {
background: rgba( 255, 138, 0, 0.08 ) !important;
border-color: rgba( 255, 138, 0, 0.6 ) !important;
border-left-color: var( --edfm-orange ) !important;
}
td.diff-addedline,
.diff-addedline,
.mw-diff-inline-added {
background: rgba( 66, 199, 217, 0.08 ) !important;
border-color: rgba( 66, 199, 217, 0.6 ) !important;
border-left-color: var( --edfm-cyan ) !important;
}
.diffchange,
.diff-addedline .diffchange,
.diff-deletedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
border-radius: 3px !important;
padding: 0.08rem 0.22rem !important;
font-weight: 700;
text-decoration: none !important;
color: var( --edfm-bg-deep ) !important;
}
.diff-deletedline .diffchange,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
background: var( --edfm-orange-bright ) !important;
}
.diff-addedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins {
background: var( --edfm-cyan ) !important;
}
.mw-explainconflict,
#wpTextbox2,
textarea#wpTextbox2,
textarea.mw-textarea-oldrev {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Engineer directory portrait chips -- intentionally quiet so table rows still
read like data rows, not card/list hybrids. */
.edfm-engineer-entry {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: max-content;
}
.edfm-engineer-entry .mw-file-element {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var( --edfm-border );
background: var( --edfm-surface-0 );
box-shadow: none;
}
.edfm-engineer-entry__name {
line-height: 1.2;
}

/* Frontier official news feed image treatment */
.edfm-frontier-news .edfm-news-card-art-image {
display: block;
position: relative;
padding: 0;
/* Keep all news thumbnails uniform, including the first/primary story. */
height: 9.5rem;
min-height: 9.5rem;
aspect-ratio: 16 / 9;
background: var( --edfm-surface-4 );
overflow: hidden;
}
.edfm-frontier-news .edfm-news-card-primary .edfm-news-card-art-image {
height: 9.5rem;
min-height: 9.5rem;
}
.edfm-frontier-news .edfm-news-card-art-image > span,
.edfm-frontier-news .edfm-news-card-art-image .mw-default-size,
.edfm-frontier-news .edfm-news-card-art-image .mw-file-description {
display: block !important;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.edfm-frontier-news .edfm-news-card-art-image .mw-file-element {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transition: transform 0.2s ease, filter 0.2s ease;
}
.edfm-frontier-news .edfm-news-card:hover .edfm-news-card-art-image .mw-file-element {
filter: brightness( 1.08 ) contrast( 1.05 );
transform: scale( 1.035 );
}
.edfm-frontier-news .edfm-news-source-badge {
display: inline-flex !important;
align-items: center;
position: absolute !important;
left: 0.8rem !important;
right: auto !important;
bottom: 0.75rem !important;
z-index: 2;
max-width: calc( 100% - 1.6rem );
padding: 0.25rem 0.55rem;
background: rgba( 10, 13, 17, 0.82 );
border: 1px solid rgba( 255, 138, 0, 0.48 );
box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.34 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}

.edfm-news-attribution {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var( --edfm-border-soft );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
line-height: 1.45;
}

/* Patrol action: hide MediaWiki generated patrol footer/link from article chrome. */
.patrollink,
.patrollink[data-mw-interface],
.patrollink .cdx-button,
#mw-content-text + .patrollink,
.mw-parser-output + .patrollink {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* ===========================================================================
2026-08-10 PROSE RAIL SLEDGEHAMMER
=========================================================================== */
/* Plain article prose on EDFM is supposed to occupy the article rail. Keep this
deliberately simple and selector-separated: no comma-list dependency on
advanced :not() parsing, no TemplateStyles scoping, and both physical and
logical width properties so later/readability rules cannot re-cap lines. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > p,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ul,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ol,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > dl {
display: block !important;
width: 100% !important;
max-width: none !important;
inline-size: 100% !important;
max-inline-size: none !important;
box-sizing: border-box !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output p {
max-width: none !important;
max-inline-size: none !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output li,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output dd {
max-width: none !important;
max-inline-size: none !important;
}
/* Restore the intentional compact maintenance notice after the broad prose
override above. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-draft,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-draft {
width: auto !important;
max-width: 44rem !important;
inline-size: auto !important;
max-inline-size: 44rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
EDFM login/register auth surface template alignment
========================================================================== */
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm {
color: var( --edfm-text );
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-label__label__text {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.015em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-Userlogin #userloginForm input[type='text'],
body.mediawiki.mw-special-Userlogin #userloginForm input[type='password'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='text'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='password'] {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 );
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input::placeholder,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-help,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-password-help {
color: var( --edfm-text-muted ) !important;
font-size: 0.88rem;
line-height: 1.45;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
margin-top: 0.85rem;
padding: 0.9rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.12 ), transparent 34% ),
var( --edfm-surface-1 );
border: 1px solid rgba( 255, 138, 0, 0.42 );
border-left: 3px solid var( --edfm-orange );
box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 850;
letter-spacing: 0.04em;
line-height: 1.35;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 0;
margin: 0;
padding: 0.55rem 0.8rem;
background: rgba( 255, 138, 0, 0.1 ) !important;
border: 1px solid var( --edfm-orange ) !important;
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.035 );
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.045em;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:hover,
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:focus-visible {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange-bright ) !important;
color: #10171b !important;
text-decoration: none !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin-top: 0.2rem;
padding: 1.15rem 1.25rem;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.08 ), transparent 38% ),
var( --edfm-surface-1 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-heading {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-size: 1.35rem;
font-weight: 800;
line-height: 1.25;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list {
margin-top: 1rem;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::before {
filter: none !important;
opacity: 0.78 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 1.75rem;
font-weight: 850;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {
color: var( --edfm-text-muted ) !important;
font-size: 0.9rem;
line-height: 1.35;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text {
display: none !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit {
background: var( --edfm-surface-3 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
border-radius: 0 !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 850;
letter-spacing: 0.06em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit:hover,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
body.mediawiki.mw-special-Userlogin #mw-content-text,
body.mediawiki.mw-special-CreateAccount #mw-content-text {
padding-top: 0.55rem;
}
body.mediawiki.mw-special-Userlogin #firstHeading {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-content-text > .mw-ui-container {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm {
width: min( 100%, 34rem ) !important;
margin: 0 auto !important;
padding: 1.15rem 1.2rem 1.25rem !important;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.1 ), transparent 34% ),
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 55% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-userlogin-help {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
margin: 1.05rem auto 0 !important;
max-width: 18rem;
}
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: grid !important;
grid-template-columns: minmax( 19rem, 28rem ) minmax( 20rem, 1fr ) !important;
gap: clamp( 1.4rem, 4vw, 3rem ) !important;
align-items: stretch !important;
width: min( 100%, 76rem ) !important;
max-width: 76rem !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin: 0 !important;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.07 ), transparent 38% ),
linear-gradient( 180deg, rgba( 255, 138, 0, 0.035 ), rgba( 0, 0, 0, 0 ) 54% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm {
padding: 1.15rem 1.2rem 1.25rem !important;
border-left: 3px solid var( --edfm-orange ) !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
padding: clamp( 1.3rem, 2.2vw, 2.05rem ) !important;
border-left: 3px solid var( --edfm-cyan ) !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field {
margin-bottom: 1rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLSubmitField,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLSubmitField {
margin-bottom: 0 !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName {
border-color: rgba( 66, 199, 217, 0.45 ) !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 1px rgba( 66, 199, 217, 0.35 ), 0 0 18px rgba( 66, 199, 217, 0.14 ) !important;
}
@media ( max-width: 860px ) {
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: flex !important;
flex-direction: column !important;
width: min( 100%, 34rem ) !important;
max-width: 34rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
width: 100% !important;
}
}
/* ==========================================================================
EDFM dark thumbnail/frame treatment — 2026-08-13
Keep MediaWiki image captions from falling back to the default white frame.
========================================================================== */
.mw-parser-output .thumb {
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"],
.mw-parser-output figure.mw-halign-right,
.mw-parser-output figure.mw-halign-left,
.mw-parser-output figure.mw-halign-center {
background:
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 56% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 1px solid var( --edfm-border ) !important;
box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbimage,
.mw-parser-output .thumbinner img,
.mw-parser-output figure[typeof~="mw:File/Thumb"] img,
.mw-parser-output figure[typeof~="mw:File/Frame"] img {
background-color: var( --edfm-bg-deep ) !important;
border: 1px solid var( --edfm-border ) !important;
box-sizing: border-box !important;
}
.mw-parser-output .thumbcaption,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption {
background: var( --edfm-surface-1 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim ) !important;
font-size: var( --edfm-fs-small ) !important;
line-height: 1.42 !important;
padding: 0.42rem 0.5rem 0.5rem !important;
}
.mw-parser-output .thumbcaption a,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a {
color: var( --edfm-link ) !important;
}
.mw-parser-output .thumbcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a:hover {
color: var( --edfm-link-hover ) !important;
}
.mw-parser-output .magnify a,
.mw-parser-output .mw-file-magnify {
filter: invert( 1 ) opacity( 0.72 ) drop-shadow( 0 0 2px rgba( 66, 199, 217, 0.28 ) );
}

/* ==========================================================================
EDFM VisualEditor template dialog dark theme — 2026-08-13
Keep template editing dialogs from falling back to white/light OOUI panels.
========================================================================== */
.ve-ui-mwTransclusionDialog,
.ve-ui-mwTransclusionDialog .oo-ui-window-frame,
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .oo-ui-window-body,
.ve-ui-mwTransclusionDialog .oo-ui-window-foot,
.ve-ui-mwTransclusionDialog .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTransclusionDialog .oo-ui-pageLayout,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-content,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
background-color: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu {
background-color: var( --edfm-surface-1 ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterSelectWidget {
background-color: var( --edfm-surface-2 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-widget {
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-field .oo-ui-labelElement-label em,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-undocumentedLabel {
color: var( --edfm-text-muted ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-bg-deep ) !important;
}

/* Additional VE template-dialog color polish — disabled/apply buttons, search,
unused-toggle buttons, and parameter checkboxes. */
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
opacity: 0.82 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget .oo-ui-inputWidget-input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-inputWidget-input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span::before {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
/* EDFM VisualEditor template/infobox popup hard-dark theme — targets the actual
Edit: <template> popup chrome and body, not just article/sidebar chrome. */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active > .oo-ui-window-frame,
.oo-ui-windowManager-modal .oo-ui-processDialog-content,
.oo-ui-windowManager-modal .oo-ui-window-content,
.oo-ui-windowManager-modal .oo-ui-window-body,
.oo-ui-windowManager-modal .oo-ui-window-foot,
.ve-ui-mwTemplateDialog,
.ve-ui-mwTemplateDialog .oo-ui-panelLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-content,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTemplateDialog .oo-ui-pageLayout,
.ve-ui-mwTemplateDialog .ve-ui-mwTemplatePage,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #111b20 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-content > .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-processDialog-navigation,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #1c2a31 !important;
color: #f4f7f8 !important;
border-color: #7f9299 !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-title,
.oo-ui-windowManager-modal .oo-ui-labelElement-label,
.oo-ui-windowManager-modal .oo-ui-fieldLayout-header label,
.oo-ui-windowManager-modal .oo-ui-widget,
.ve-ui-mwTemplateDialog .oo-ui-labelElement-label,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTemplateDialog .oo-ui-fieldsetLayout-header label {
color: #f4f7f8 !important;
}
.oo-ui-windowManager-modal .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-undocumentedLabel,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .mw-widget-titleOptionWidget-description {
color: #a9bbc1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-inputWidget-input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget textarea,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget input,
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
background: #0d1519 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: #42c7d9 !important;
box-shadow: 0 0 0 2px rgba(66,199,217,.32) !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: #25353d !important;
border-color: #52646b !important;
color: #f4f7f8 !important;
box-shadow: none !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: #31454f !important;
border-color: #ff8a00 !important;
color: #ffb347 !important;
}
.oo-ui-windowManager-modal .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: #ff8a00 !important;
border-color: #ff8a00 !important;
color: #111820 !important;
font-weight: 700 !important;
}
.oo-ui-windowManager-modal .oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background: #1c2a31 !important;
border-color: #3f5159 !important;
color: #8fa1a8 !important;
opacity: 1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget:hover,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: #25353d !important;
color: #f4f7f8 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span::before {
background-color: #0d1519 !important;
border-color: #7f9299 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before {
background-color: #ff8a00 !important;
border-color: #ff8a00 !important;
}
/* EDFM cookie preferences banner */
#edfm-cookie-banner {
position: fixed;
z-index: 10000;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: flex;
justify-content: center;
pointer-events: none;
}
#edfm-cookie-banner .edfm-cookie-card {
max-width: 800px;
border: 1px solid rgba(80, 220, 240, 0.65);
background: rgba(3, 14, 22, 0.98);
box-shadow: 0 0 22px rgba(80, 220, 240, 0.22), 0 12px 36px rgba(0, 0, 0, 0.45);
color: #dffbff;
padding: 1rem;
font-size: 0.95rem;
pointer-events: auto;
}
#edfm-cookie-banner .edfm-cookie-title {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fe0ec;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-text { margin: 0 0 0.75rem; line-height: 1.45; }
#edfm-cookie-banner .edfm-cookie-categories {
display: grid;
gap: 0.65rem;
margin: 0.65rem 0 0.85rem;
}
#edfm-cookie-banner .edfm-cookie-category {
border: 1px solid rgba(127, 224, 236, 0.32);
background: rgba(7, 28, 38, 0.74);
padding: 0.7rem;
}
#edfm-cookie-banner .edfm-cookie-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-category h3 {
margin: 0;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f3feff;
}
#edfm-cookie-banner .edfm-cookie-category p {
margin: 0;
line-height: 1.42;
color: #c6e6eb;
}
#edfm-cookie-banner .edfm-cookie-status {
white-space: nowrap;
border: 1px solid rgba(255, 138, 0, 0.7);
color: #ffd69a;
background: rgba(255, 138, 0, 0.12);
padding: 0.2rem 0.48rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#edfm-cookie-banner .edfm-cookie-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-weight: 700;
color: #f3feff;
cursor: pointer;
}
#edfm-cookie-banner .edfm-cookie-switch input {
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color: #ff8a00;
}
#edfm-cookie-banner .edfm-cookie-switch input:focus-visible {
outline: 2px solid #7fe0ec;
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#edfm-cookie-banner button {
border: 1px solid rgba(127, 224, 236, 0.7);
background: rgba(9, 50, 65, 0.92);
color: #f3feff;
padding: 0.45rem 0.7rem;
cursor: pointer;
}
#edfm-cookie-banner button:hover,
#edfm-cookie-banner button:focus-visible {
background: rgba(17, 88, 108, 0.98);
outline: 2px solid rgba(127, 224, 236, 0.85);
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-links { margin-top: 0.6rem; font-size: 0.85rem; }
#edfm-cookie-banner a { color: #7fe0ec; }
@media (max-width: 600px) {
#edfm-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
#edfm-cookie-banner .edfm-cookie-card { max-height: calc(100vh - 1rem); overflow: auto; }
#edfm-cookie-banner .edfm-cookie-category-head { align-items: flex-start; }
#edfm-cookie-banner .edfm-cookie-actions button { flex: 1 1 100%; }
}

/* ==========================================================================
EDFM Vector watchstar dark-theme fix — 2026-08-16
Vector legacy renders the page watch/unwatch affordance as a small SVG
background on `#ca-watch/#ca-unwatch a::before`. On EDFM's dark tab row the
upstream light-skin URLs can be too low-contrast, and some deployments do not
expose ResourceLoader's dotted asset path directly. Use inline SVGs in the
EDFM palette so the watchstar is always visible in the top action menu.
========================================================================== */
.vector-menu-tabs #ca-watch.icon a::before,
.vector-menu-tabs-legacy #ca-watch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2310171b' stroke='%2342c7d9' stroke-width='1.35' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.42 ) );
opacity: 0.96;
}
.vector-menu-tabs #ca-unwatch.icon a::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.2' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 4px rgba( 255, 138, 0, 0.45 ) );
opacity: 0.98;
}
.vector-menu-tabs #ca-watch.icon a:hover::before,
.vector-menu-tabs #ca-watch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-watch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-watch.icon a:focus::before,
.vector-menu-tabs #ca-unwatch.icon a:hover::before,
.vector-menu-tabs #ca-unwatch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:focus::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.25' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 5px rgba( 255, 138, 0, 0.65 ) );
opacity: 1;
}

/* ==========================================================================
EDFM Special:Preferences dark theme fix — 2026-08-16
Preferences is an OOUI/Codex-heavy special page. Core styles bring in a
light tab strip and sticky submit footer, so theme the actual preferences
wrapper rather than only generic form controls.
========================================================================== */
body.mediawiki.mw-special-Preferences #preferences,
body.mediawiki.mw-special-Preferences #mw-prefs-container,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-fieldset-wrapper,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout-framed {
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed {
box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.32 );
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-menu,
body.mediawiki.mw-special-Preferences .oo-ui-menuLayout-menu {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabSelectWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget:hover,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: inset 0 -3px 0 var( --edfm-orange ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header label,
body.mediawiki.mw-special-Preferences .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .mw-prefs-title {
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-description,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-help,
body.mediawiki.mw-special-Preferences .oo-ui-inline-help,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-messages,
body.mediawiki.mw-special-Preferences .htmlform-tip,
body.mediawiki.mw-special-Preferences .mw-htmlform-help {
background: transparent !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownInputWidget select,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownWidget-handle,
body.mediawiki.mw-special-Preferences input[type='text'],
body.mediawiki.mw-special-Preferences input[type='number'],
body.mediawiki.mw-special-Preferences input[type='email'],
body.mediawiki.mw-special-Preferences textarea,
body.mediawiki.mw-special-Preferences select {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-inputWidget-input::placeholder,
body.mediawiki.mw-special-Preferences input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus,
body.mediawiki.mw-special-Preferences input:focus,
body.mediawiki.mw-special-Preferences textarea:focus,
body.mediawiki.mw-special-Preferences select:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox'] {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox']:checked {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
accent-color: var( --edfm-orange );
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit,
body.mediawiki.mw-special-Preferences button,
body.mediawiki.mw-special-Preferences input[type='submit'] {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit:hover,
body.mediawiki.mw-special-Preferences button:hover,
body.mediawiki.mw-special-Preferences input[type='submit']:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
body.mediawiki.mw-special-Preferences #preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .oo-ui-window-foot .mw-htmlform-submit-buttons {
background: rgba( 16, 23, 27, 0.96 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
box-shadow: 0 -10px 24px rgba( 0, 0, 0, 0.34 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-search-highlight,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
background: rgba( 66, 199, 217, 0.18 ) !important;
outline-color: rgba( 66, 199, 217, 0.32 ) !important;
color: var( --edfm-text ) !important;
}

MediaWiki:Common.css

2026-08-18T22:13:29Z

EDFM Site Maintenance: Correct the notification-icon fix: the previous rule targeted Vector's .vector-icon system, which Echo's icons in legacy Vector never use. Verified via a server-side render of the real logged-in markup that the icon is a background-image on the <a> via OOUI's .oo-ui-icon-bell/-tray classes; reuse the site's existing OOUI dark-icon invert fix instead.

/* ==========================================================================
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).

2026-08-07 SECOND PASS: the first redesign pass was judged too close to
stock MediaWiki with a colour change -- this pass changes the actual
visual composition (centred workspace instead of a huge dead gutter,
a two-tier header, a real masthead, a tile-grid TOC, a restructured
status module, larger deliberate type scale, depth via surface
elevation instead of borders-around-everything) while reusing every
working mechanism from the first pass rather than throwing it away --
the tab/:visited fix, the external-link specificity fix, the mobile
reorder fix, and focus-visible/reduced-motion are all still here,
unchanged in mechanism.
========================================================================== */

/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* Depth system: site (outermost, visible in the sidebar/header/gutters)
-> article surface -> component surfaces, each a deliberate step
brighter so the page reads as having actual depth rather than "one
background colour with slightly lighter boxes everywhere". */
--edfm-bg-deep: #07090b;
--edfm-bg-page: #0a0e11;
--edfm-surface-1: #10171b;
--edfm-surface-2: #161f24;
--edfm-surface-3: #1c272d;
--edfm-surface-4: #233037;

--edfm-border: #26333b;
--edfm-border-soft: rgba( 255, 255, 255, 0.06 );

--edfm-text: #edf0f2;
--edfm-text-muted: #98a5ad;
--edfm-text-dim: #6c7a82;

/* 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 */
--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 );
--edfm-status-positive-bg: rgba( 66, 199, 217, 0.12 );
--edfm-status-attention-bg: rgba( 255, 138, 0, 0.12 );
--edfm-status-neutral-bg: rgba( 108, 122, 130, 0.12 );

/* Typography -- explicit desktop scale (2026-08-07 pass 2). Sized in
rem against the root's real 16px (Vector legacy's own
@font-size-root is 100%, i.e. browser default -- confirmed by
reading skins.vector.styles.legacy/variables.less, not assumed)
rather than nested em, specifically so component sizes can't
compound smaller than intended inside whatever ambient size an
ancestor happens to set. */
--edfm-fs-title: clamp( 1.9rem, 1.4rem + 2vw, 2.25rem ); /* ~30-36px */
--edfm-fs-h2: 1.35rem; /* ~21.6px */
--edfm-fs-h3: 1.15rem; /* ~18.4px */
--edfm-fs-body: 1rem; /* 16px */
--edfm-fs-resource-name: 1.1rem; /* ~17.6px */
--edfm-fs-meta: 0.8rem; /* ~12.8px */
--edfm-fs-sidebar: 0.9375rem; /* 15px -- polish pass: +1px for readability */
--edfm-fs-utility: 0.72rem; /* ~11.5px */

--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 );

/* Geometry / layout */
--edfm-corner: 10px;
/* Full-width article workspace: keep the fixed Vector sidebar clear,
but let the article surface use the entire remaining viewport. */
--edfm-sidebar-width: 12.75rem;
--edfm-sidebar-clear: 12.75rem;
--edfm-content-max: calc( 100vw - var( --edfm-sidebar-clear ) );
--edfm-gutter: 0px;
}

/* ==========================================================================
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 );
font-size: var( --edfm-fs-body );
}
/* Background treatment: a faint technical grid plus a very soft radial
glow centred behind the (now centred) content column, so the composition
still has quiet visual interest in the gutters on ultrawide screens
instead of just flat colour -- both stay under ~3% opacity, this is
texture, not a HUD. Not image assets; pure CSS gradients. */
body {
background-image:
radial-gradient( ellipse 1400px 900px at 50% 0%, rgba( 66, 199, 217, 0.05 ), transparent 60% ),
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: auto, 48px 48px, 48px 48px;
background-repeat: no-repeat, repeat, repeat;
background-attachment: fixed, scroll, scroll;
}
/* Full-height sidebar rail: mirrors the RuneScape.wiki behavior where the
left rail has no visible bottom edge. The real #mw-panel only carries the
navigation content; this fixed layer paints the uninterrupted surface,
border, and shadow down the whole viewport. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var( --edfm-sidebar-width );
background: linear-gradient( 180deg, var( --edfm-surface-1 ) 0%, var( --edfm-bg-deep ) 100% );
border-right: 1px solid var( --edfm-border );
box-shadow: 10px 0 22px rgba( 0, 0, 0, 0.32 );
pointer-events: none;
z-index: 1;
}
@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: 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;
}

/* Small reusable angular motif: a corner-cut bracket, used sparingly (see
the redesign notes in docs/content-style-guide.md for exactly where) --
deliberately not applied everywhere. */
.edfm-corner-cut {
clip-path: polygon( 0 0, calc( 100% - var( --edfm-corner ) ) 0, 100% var( --edfm-corner ), 100% 100%, 0 100% );
}

/* ==========================================================================
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: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.75rem, 1.35rem + 1.45vw, 2.15rem );
font-weight: 700;
letter-spacing: 0;
line-height: 1.18;
margin: 0.15em 0 0.25em;
padding-bottom: 0.22em;
border-bottom: 1px solid var( --edfm-border );
}
/* Section headings (h2): "// " prefix in orange, bright heading text, a
short orange accent segment over the dim full-width divider core
already draws. Substantially more vertical space than a wiki section
normally gets, per the "sections feel packed together" fix -- 3.25rem
(~52px) above, ~1.1rem gap to the first content component below. If a
heading opts into explicit numbering via {{Section number}}, the
automatic "// " is suppressed so the two treatments don't double up. */
.mw-body h2 {
position: relative;
padding-bottom: 0.25em;
margin-top: 2rem;
margin-bottom: 0.85rem;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.28rem, 1.08rem + 0.65vw, 1.62rem );
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid var( --edfm-border ) !important;
}
.mw-body h2::before {
content: none;
}
.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 );
font-size: var( --edfm-fs-h3 );
}
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.7;
font-size: var( --edfm-fs-body );
}
.mw-body p {
margin: 0 0 1.1em 0;
max-width: none !important; /* Site-wide full-width pass: article text should use the whole content rail. */
}
.mw-body ul,
.mw-body ol {
line-height: 1.7;
margin-bottom: 1.1em;
}

/* EDFM article bullets: replace the stock browser dot with the provided
cyan field-manual arrow, scaled to text size rather than using the source
image's native 100x91 dimensions. This targets article unordered lists;
interface/navigation lists such as the Jump To TOC and galleries are reset
below so they keep their component-specific layout. */
.mw-parser-output ul {
list-style: none;
padding-left: 1.55em;
}
.mw-parser-output ul > li {
position: relative;
}
.mw-parser-output ul > li::before {
content: '';
position: absolute;
left: -1.35em;
top: 0.48em;
width: 0.82em;
height: 0.75em;
background-image: url( '/edfm-assets/list-bullet-arrow.png' );
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.95;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.35 ) );
}
.mw-parser-output ul ul {
margin-top: 0.3em;
padding-left: 1.45em;
}
.mw-parser-output ul ul > li::before {
left: -1.25em;
top: 0.52em;
width: 0.68em;
height: 0.62em;
opacity: 0.82;
}
/* Component exceptions: these are not prose bullet lists. */
.mw-parser-output .toc ul,
.mw-parser-output .gallery,
.mw-parser-output .gallery ul,
.mw-parser-output .mw-gallery-traditional,
.mw-parser-output .mw-gallery-traditional ul {
padding-left: 0;
}
.mw-parser-output .toc li::before,
.mw-parser-output .gallery li::before,
.mw-parser-output .mw-gallery-traditional li::before {
content: none;
}
/* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the
sibling that immediately follows is that wrapper, not the `h2`/`h3`
itself -- matching both forms since a page could still have a bare
heading in edge cases (e.g. content generated without the wrapper). */
.mw-heading2 + p, .mw-body h2 + p,
.mw-heading3 + p, .mw-body h3 + p,
.mw-heading2 + div, .mw-body h2 + div,
.mw-heading3 + div, .mw-body h3 + div {
margin-top: 0;
}
hr {
background-color: var( --edfm-border );
border-color: var( --edfm-border );
}

/* Quiet, discoverable section-edit controls (logged-in editors only --
MediaWiki only renders these for users who can edit). Keeping the
functionality/keyboard access intact while making sure they don't
compete visually with the heading they're attached to: low opacity at
rest, full opacity on hover/focus of the heading OR the control itself,
brackets hidden (the opacity+letter-spacing treatment already reads as
a distinct control without them). */
.mw-editsection {
margin-left: 1em;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility ) !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.45;
transition: opacity 0.15s ease;
}
.mw-heading:hover .mw-editsection,
.mw-heading:focus-within .mw-editsection,
.mw-editsection:hover,
.mw-editsection:focus-within {
opacity: 1;
}
.mw-editsection a {
color: var( --edfm-text-dim );
}
.mw-editsection a:hover,
.mw-editsection a:focus-visible {
color: var( --edfm-cyan );
}
.mw-editsection-bracket {
display: none;
}
.mw-editsection-divider {
color: var( --edfm-text-dim );
margin: 0 0.3em;
}

/* ==========================================================================
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. GLOBAL LAYOUT -- centred workspace
========================================================================== */
/* Full-width article pass: the article now fills the workspace to the right edge.
Historical note: this block originally centred a capped article column.

THE fix for "enormous unused region on the right side of wide displays".
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 with no max-width at all -- the first redesign
pass added a max-width but left the column pinned to the sidebar's left
edge, which is *why* it still read as "a column stuck on the left with
dead space on the right" rather than a composed layout.

Fix: instead of a fixed `margin-left: 11em`, compute how much space is
left over in the workspace (viewport minus the sidebar) once the
content has its max-width, and split that leftover evenly between the
left and right margins (via the --edfm-gutter token above) -- so the
article is centred *within the workspace to the right of the sidebar*,
not centred in the full viewport (which would ignore the sidebar and
look off-centre) and not pinned to its left edge either. On a screen
too narrow for sidebar + max-width content, --edfm-gutter naturally
evaluates to 0 and this degrades to the old "fill the workspace"
behaviour -- no separate narrow-screen override needed.

The header/tab bar's own float/absolute-position box (#mw-head) is left
at its native full width deliberately -- rewriting *that* mechanism is
a different, much higher-risk change (it took several rounds to get
right originally) -- but its *contents* (search box, personal tools,
namespace/view tabs) get their own right/left offsets pulled in by the
same --edfm-gutter below, so they still visually line up with the
centred column beneath them instead of hugging the browser edge. */
.mw-body,
#mw-data-after-content,
.mw-footer {
position: relative;
z-index: 2;
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
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,
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
/* Keep real table layout so header cells and body cells share one column grid.
The earlier display:block + tbody display:table overflow hack made sortable
headers size independently from body columns, which visibly misaligned the
Engineer directory after portrait chips were added. */
display: table;
width: 100%;
table-layout: auto;
}
.mw-body table.wikitable th,
.mw-body table.wikitable td,
.mw-body table.mw-datatable th,
.mw-body table.mw-datatable td {
vertical-align: middle;
}
.mw-body img {
max-width: 100%;
height: auto;
}

/* ==========================================================================
4. ARTICLE MASTHEAD (eyebrow / title / deck)
========================================================================== */
/* Eyebrow line is authored as ordinary wikitext (see Template:Article
header) and, purely as a placement detail, a small script
(MediaWiki:Common.js) moves it directly above #firstHeading on 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).
If JS is unavailable the eyebrow still renders, just directly under the
title instead of above it.

The eyebrow/title/deck aren't wrapped in one literal bounding box (they
live at two different DOM depths -- eyebrow is a sibling of #firstHeading,
deck is inside the article body further down -- wrapping them in one
real container would need heavier JS than is justified here), so the
"designed masthead" read comes from a matching top rule above the
eyebrow and bottom rule below the deck, a small angular marker, and the
larger title/subtitle type scale, rather than one drawn box. */
.edfm-eyebrow {
display: block;
margin: 0.2em 0 0.15em 0;
padding: 0;
border: 0;
font-family: var( --edfm-sans );
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --edfm-text-dim );
}
.edfm-eyebrow::before {
content: none;
}
.edfm-eyebrow .edfm-orange-mark {
color: var( --edfm-orange );
}
.edfm-deck {
color: var( --edfm-text-muted );
font-family: var( --edfm-sans );
font-size: 0.95rem;
font-style: italic;
line-height: 1.45;
max-width: none;
margin: 0.25em 0 0.85em 1.4em;
padding: 0;
border: 0;
}

/* ==========================================================================
1. SIDEBAR
========================================================================== */
#mw-panel {
background: transparent;
box-sizing: border-box;
width: var( --edfm-sidebar-width );
padding: 0 0.65rem 1.35rem 0.65rem;
border-right: 0;
box-shadow: none;
z-index: 3;
}
/* Logo anchors the sidebar visually. Keep raster logo artwork contained in
Vector legacy's fixed sidebar slot rather than letting the image render at
its intrinsic PNG size and clip against the rail. */
#p-logo {
box-sizing: border-box;
width: auto;
height: 10rem;
margin: 0 -0.65rem 0.65rem -0.65rem;
padding: 0.5rem 0.55rem 0.45rem 0.55rem;
border-bottom: 0 !important;
background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% );
overflow: hidden;
}
#p-logo a.mw-wiki-logo {
box-sizing: border-box;
display: block;
width: 100% !important;
height: 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
/* Each nav group gets real breathing room from the one before it instead
of being packed together like a stock wiki sidebar. */

#mw-panel .portal,
#mw-panel .vector-menu-portal {
box-sizing: border-box;
width: auto;
max-width: none;
margin-top: 1.45rem;
}
#mw-panel .portal:first-of-type,
#mw-panel .vector-menu-portal:first-of-type {
margin-top: 0;
}
#mw-panel .portal .body,
#mw-panel .portal ul,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list {
box-sizing: border-box;
width: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
border-color: var( --edfm-border-soft );
}
#mw-panel .portal a {
color: var( --edfm-text-muted );
display: block;
font-size: var( --edfm-fs-sidebar );
line-height: 1.35;
padding: 0.42em 0.55em;
margin: 0.08em -0.35em;
border-left: 2px solid transparent;
border-radius: 2px;
}
#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). */
.edfm-nav-current > a {
color: var( --edfm-orange ) !important;
font-weight: 700;
border-left-color: var( --edfm-orange );
border-left-width: 3px;
background: var( --edfm-surface-2 );
box-shadow: inset 0 0 0 1px rgba( 255, 138, 0, 0.08 );
}
.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: var( --edfm-fs-utility );
border-left: 2px solid var( --edfm-orange );
padding-left: 0.5em;
margin-left: -0.5em;
margin-bottom: 0.4em;
}

/* ==========================================================================
3. TOP BAR -- two-tier chrome
========================================================================== */
/* Vector legacy's #mw-head naturally has ~2.5em of empty space above the
tabs row (core: `#left-navigation/#right-navigation { margin-top:2.5em }`),
originally reserved just for #p-personal to float in. Painting that same
box with a background gradient that stays transparent for that top
band and then switches to a surface colour for the tabs band creates a
real two-tier read -- "primary chrome" (personal tools/search, over the
page's own background) above "wiki authoring controls" (the tabs, on
their own distinct strip) below -- without touching #mw-head's own
position/width mechanics, which is the same fragile absolute-position
system the very first pass of this project had to debug carefully to
get the persistent sidebar working at all. Not worth re-risking that
for a background change. */
#mw-head {
background-image: linear-gradient(
to bottom,
transparent 0,
transparent 2.35em,
var( --edfm-surface-2 ) 2.35em,
var( --edfm-surface-2 ) 100%
);
border-bottom: 1px solid var( --edfm-border );
}
#mw-page-base {
background-color: var( --edfm-bg-deep );
background-image: none;
}
#mw-head-base {
background-color: var( --edfm-bg-deep );
/* Polish pass: thinned from 2px -- at 2px this competed visually with
the masthead's own orange marker/rule directly below it; a single
thinner accent line still reads as "site identity colour" without
the repetition. */
border-bottom: 1px solid var( --edfm-orange );
}
/* Personal tools (login/logout) and the search box are the "primary
chrome" tier -- pulled in by the same gutter used to centre the article,
so on wide screens they visually line up with the centred column
instead of hugging the browser edge, and given noticeably more visual
weight than the tabs below them. */
#p-personal {
right: calc( 0.75em + var( --edfm-gutter ) );
display: flex;
align-items: center;
gap: 0.75rem;
}
#p-personal ul {
display: flex;
align-items: center;
gap: 0.55rem;
}
#p-personal li {
margin-left: 0;
}
#p-personal a {
color: var( --edfm-text-muted );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.3em 0.2em;
}
#p-personal a:hover {
color: var( --edfm-orange );
}
/* Echo's alert/notification icons (bell/tray) in the personal toolbar.
Confirmed by rendering the actual logged-in markup server-side: in
legacy Vector these links get merged straight into the plain personal
tools menu (SkinVectorLegacy::runOnSkinTemplateNavigationHooks) rather
than going through Vector's own `.vector-icon` icon system (that only
wraps items in the views/associated-pages menus). The icon is instead a
`background-image` on the <a> itself, from OOUI's generated
`.oo-ui-icon-bell` / `-tray` / `-bellOutline` classes -- a flat black SVG
baked straight into the image URL, so it's not recolourable via
`background-color` the way the search icon was; this is exactly the
"dark OOUI icon invisible on our dark theme" problem the invert fix
below already solves elsewhere, so reuse that same technique here
instead of a different one. The unread-count badge itself already
colours correctly on its own (Echo maps it to
`@background-color-destructive` / `-progressive`, both redefined to
EDFM's palette) and, being a mostly-saturated colour rather than
black/white/grey, survives this filter close to unchanged. */
#pt-notifications-alert .oo-ui-icon-bell,
#pt-notifications-notice .oo-ui-icon-tray,
#pt-notifications .oo-ui-icon-bellOutline {
filter: invert( 1 ) hue-rotate( 180deg );
}
.edfm-topbar-clocks {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
line-height: 1;
white-space: nowrap;
}
.edfm-topbar-clock {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.55em;
background: rgba( 66, 199, 217, 0.08 );
border: 1px solid var( --edfm-border-soft );
border-left: 2px solid var( --edfm-cyan );
color: var( --edfm-text );
}
.edfm-topbar-clock-label {
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edfm-topbar-clock time {
color: var( --edfm-cyan );
font-weight: 700;
}
.edfm-topbar-clock-local {
background: rgba( 255, 138, 0, 0.06 );
border-left-color: var( --edfm-orange );
}
.edfm-topbar-clock-local time {
color: var( --edfm-orange-bright );
}
#right-navigation {
margin-right: var( --edfm-gutter );
}
#left-navigation {
margin-left: var( --edfm-sidebar-clear );
}
/* Polish pass: core caps this at `width:20vw; max-width:20em`, which read
as cramped next to the rest of the (now larger-scale) interface --
given more room on desktop, still capped so it can't dominate the bar. */
.vector-search-box-inner {
width: 22vw;
max-width: 24em;
}
.vector-search-box-inner input,
#searchInput {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
border: 1px solid var( --edfm-border );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.5em 0.7em;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#searchInput:focus {
border-color: var( --edfm-cyan );
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.22 );
outline: none;
}
#searchInput::placeholder {
color: var( --edfm-text-dim );
}
/* Search submit control: neither rendering path gives this any color of
its own, so on our dark input background it was effectively invisible.
The no-JS legacy form's <button> is a plain black icon at 0.67 opacity
(core skins.vector.styles.legacy/components/SearchBox.less); the
JS/Vue-Codex widget (.vector-search-box-vue) has no separate button at
all, just a start icon inside the input using the same technique
(mask-image recoloured via `background-color`, see Codex's
CdxSearchInput.css). Recolour both to match the site's orange
progressive-action colour used everywhere else. */
.vector-search-box-vue .cdx-text-input__start-icon {
background-color: var( --edfm-orange );
opacity: 1;
}
.searchButton[ name='go' ] {
background-image: none;
background-color: var( --edfm-orange );
opacity: 0.85;
-webkit-mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
}
.searchButton[ name='go' ]:hover,
.searchButton[ name='go' ]:focus {
background-color: var( --edfm-orange-bright );
opacity: 1;
}
/* 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.

These are the "wiki authoring controls" utility tier -- deliberately
smaller (--edfm-fs-utility) and quieter than personal-tools/search
above them, sitting on their own background strip (see #mw-head above).
Selected state stays orange (it's still real navigation, just
secondary); unselected rests dim so the *selected* tab is the one that
reads clearly. */
.vector-menu-tabs-legacy li {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs-legacy li.selected {
background-image: none;
background-color: var( --edfm-surface-1 );
/* Polish pass: a small underline makes the selected tab unambiguous at
a glance instead of relying on the text colour change alone. */
box-shadow: inset 0 -2px 0 var( --edfm-orange );
}
.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 );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 700;
}
.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. */
.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;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var( --edfm-fs-utility );
font-weight: 700;
}
.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-3 );
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 );
font-size: var( --edfm-fs-sidebar );
}
.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-4 );
}

/* Front-page chrome: the hero already names the site, so suppress the
generated MediaWiki page title only on the Main Page. Keep the namespace
tab label and all other article titles intact. */
body.page-Main_Page #firstHeading {
display: none;
}
body.page-Main_Page .mw-body-content {
margin-top: 0;
}

/* ==========================================================================
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 );
}
.mw-body {
border-right: 1px solid var( --edfm-border );
}
#content {
background-color: var( --edfm-surface-1 );
}

/* Site notice chrome. The global disclaimer was moved to its dedicated
legal/disclaimer page, so an empty #siteNotice must not leave behind a
phantom divider at the top of the article surface. */
#siteNotice:empty {
display: none;
}
#siteNotice:not( :empty ) {
font-size: var( --edfm-fs-meta );
line-height: 1.5;
color: var( --edfm-text-dim );
font-style: normal;
padding-bottom: 0.7em;
margin-bottom: 1.4rem;
border-bottom: 1px solid var( --edfm-border-soft );
}
#siteNotice:not( :empty ) em, #siteNotice:not( :empty ) i {
color: var( --edfm-text-muted );
font-style: italic;
}
#siteNotice:not( :empty ) a {
color: var( --edfm-link-external );
}
#siteNotice a:hover {
color: var( --edfm-link-external-hover );
}

/* ==========================================================================
HOME PAGE DASHBOARD
========================================================================== */
.edfm-home-hero {
margin: 0.9rem 0 1.6rem;
padding: 1.35rem 1.55rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.16 ), transparent 34% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.14 ), transparent 42% ),
var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 4px solid var( --edfm-cyan );
clip-path: polygon( 0 0, calc( 100% - 12px ) 0, 100% 12px, 100% 100%, 0 100% );
}
.edfm-home-hero-kicker,
.edfm-home-card-kicker {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.edfm-home-hero-title {
margin-top: 0.25rem;
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: clamp( 1.55rem, 1.1rem + 1.5vw, 2.2rem );
font-weight: 800;
line-height: 1.15;
}
.edfm-home-hero-text {
max-width: none;
margin-top: 0.55rem;
color: var( --edfm-text-muted );
font-size: 1.05rem;
line-height: 1.55;
}
.edfm-home-grid {
display: grid;
gap: 1rem;
margin: 1.2rem 0 2rem;
}
.edfm-home-grid-four {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.edfm-home-grid-topics {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-grid-two {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-card {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
padding: 1rem 1.1rem;
box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.2 );
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-home-card:hover {
transform: translateY( -2px );
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-orange );
}
.edfm-home-card-primary {
border-left-color: var( --edfm-orange );
}
.edfm-home-card-warning {
border-left-color: var( --edfm-text-dim );
}
.edfm-home-card-title,
.edfm-home-card-title a {
margin-top: 0.35rem;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.edfm-home-card-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-home-card-text,
.edfm-home-link-list {
margin-top: 0.65rem;
color: var( --edfm-text-muted );
line-height: 1.6;
}
.edfm-home-link-list a {
font-weight: 600;
}
@media ( max-width: 1100px ) {
.edfm-home-grid-four {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( max-width: 760px ) {
.edfm-home-grid-four,
.edfm-home-grid-topics,
.edfm-home-grid-two {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
HOME PAGE NEWS MODULE
========================================================================== */
.edfm-home-news {
margin: 1.8rem 0 2.2rem;
}
.edfm-news-feature-grid {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 1rem;
margin-bottom: 1rem;
}
.edfm-news-card,
.edfm-news-list {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
box-shadow: 0 14px 26px rgba( 0, 0, 0, 0.22 );
overflow: hidden;
}
.edfm-news-card {
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-news-card:hover {
transform: translateY( -2px );
border-color: rgba( 255, 138, 0, 0.48 );
background: var( --edfm-surface-3 );
}
.edfm-news-card-art {
display: flex;
align-items: flex-end;
min-height: 7rem;
padding: 0.8rem 1rem;
box-sizing: border-box;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.28 ), transparent 42% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.2 ), transparent 48% ),
linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-1 ) );
border-bottom: 1px solid var( --edfm-border );
color: rgba( 237, 240, 242, 0.72 );
font-family: var( --edfm-mono );
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.edfm-news-card-primary .edfm-news-card-art {
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.38 ), transparent 46% ),
linear-gradient( 315deg, rgba( 79, 159, 232, 0.26 ), transparent 52% ),
var( --edfm-surface-4 );
}
.edfm-news-card-body {
padding: 1rem 1.15rem 1.15rem;
}
.edfm-news-meta {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.edfm-news-title,
.edfm-news-title a {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.edfm-news-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-news-summary {
color: var( --edfm-text-muted );
line-height: 1.55;
margin-top: 0.65rem;
}
.edfm-news-list {
padding: 1.1rem 1.25rem 1.2rem;
border-left: 4px solid var( --edfm-orange );
}
.edfm-news-list-heading {
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.edfm-news-list ul {
margin: 0;
}
.edfm-news-list li {
margin-bottom: 0.55rem;
color: var( --edfm-text-muted );
}
.edfm-news-more {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px solid var( --edfm-border-soft );
text-align: right;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
@media ( max-width: 900px ) {
.edfm-news-feature-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
10. JUMP NAVIGATION (table of contents)
========================================================================== */
/* A compact navigation strip/tile-grid rather than a traditional TOC box
of small text links -- real MediaWiki anchors/markup untouched, this is
all presentation. "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 {
display: block;
width: 100%;
box-sizing: border-box;
background: none;
border: none;
color: var( --edfm-text );
padding: 0;
margin: 1.8rem 0;
}
.toctitle {
position: relative;
margin-bottom: 0.7em;
}
.toctitle::before {
content: 'Jump to';
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-orange );
}
/* Core ships `.toc h2 { font-size: 100%; ... }` (mediawiki.skinning/toc/
screen.less) at the exact same specificity (one class + one tag) as a
plain `.toctitle h2` rule -- same "tie that doesn't resolve the way
naive source order would suggest" gotcha documented elsewhere in this
file. #toc's own ID makes this one unambiguous instead of relying on
cascade order. */
#toc .toctitle h2,
.toc .toctitle h2 {
font-size: 0 !important;
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 );
}
/* Desktop: a balanced multi-column jump list. CSS grid flows row-first,
which makes numbered sections read 1, 2, 3, 4 across the first row. For a
reference/walkthrough TOC, scan order is clearer when each column reads
downward first: 1/2/3, then 4/5/6, then 7/8/9. CSS columns preserve the
real DOM/source order while presenting that column-major layout on every
page that uses the stock MediaWiki TOC. */
.toc > ul {
display: block;
column-count: 3;
column-gap: 0.45rem;
list-style: none;
margin: 0;
padding: 0;
}
.toc > ul > li {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 0.45rem;
}
.toc li {
margin-top: 0;
}
/* 2026-08-08 density pass: reverted to side-by-side number/label (from the
earlier "stacked number-above-label" polish pass) specifically to cut
per-tile height -- with 12 sections on articles like The Dweller, the
stacked layout meant the jump nav alone filled most of the first
viewport. Row layout plus tighter padding/font-size gets noticeably
more sections above the fold without dropping the numbering or shrinking
tap targets below a comfortable size -- see the dedicated mobile padding
bump further down for keeping touch targets safe on small screens
specifically. Whole tile stays one real <a>, so it's still a single
click/focus target and keyboard tab stop either way. */
.toc a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
height: 100%;
box-sizing: border-box;
padding: 0.5em 0.75em 0.5em 0.7em;
background: var( --edfm-surface-3 );
/* Left accent rail: matches the orange section numbers and gives each
jump tile a stronger EDFM navigation affordance without boxing the
entire card. */
border-left: 4px solid var( --edfm-orange );
box-shadow: inset 1px 0 0 rgba( 255, 162, 26, 0.35 );
color: var( --edfm-text-muted );
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.toc a:hover {
background: var( --edfm-surface-4 );
border-left-color: var( --edfm-cyan );
box-shadow: inset 1px 0 0 rgba( 66, 199, 217, 0.45 );
color: var( --edfm-text );
transform: translateY( -1px );
}
/* Nested sub-levels (rare on this site so far) drop back to a plain
indented block list inside their parent tile's grid cell rather than
trying to stay gridded themselves. */
.toc ul ul {
grid-column: unset;
list-style: none;
margin: 0.3em 0 0 1.2em;
padding: 0;
display: block;
}
.toc ul ul a {
flex-direction: row;
align-items: center;
background: none;
border-left-width: 1px;
padding: 0.3em 0.6em;
}
.toc ul ul .tocnumber {
font-size: 0.85em;
}
.toc ul ul .toctext {
font-size: 0.85em;
}
.tocnumber {
color: var( --edfm-orange );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: 1.05rem;
line-height: 1;
}
.toctext {
color: inherit;
font-size: 0.85rem;
line-height: 1.3;
}
/* Column count changes only at readable/touch-friendly breakpoints. Keep
column-major ordering at 3 and 2 columns; mobile becomes the natural single
source-order list. */
@media ( max-width: 860px ) {
.toc > ul {
column-count: 2;
}
}
@media ( max-width: 560px ) {
.toc > ul {
column-count: 1;
}
/* Single-column tiles are already full-width here, so there's no
density pressure left -- restore closer to the pre-2026-08-08
padding instead of the tighter desktop value, keeping tap targets
comfortable rather than compacting mobile just because desktop
compacted. */
.toc a {
padding: 0.7em 0.95em;
}
}

/* ==========================================================================
5b. FULL-WIDTH ARTICLE FLOW OVERRIDES
========================================================================== */
/* 2026-08-10 audit: EDFM pages should not leave half the article rail empty.
Earlier readability caps on paragraphs/hero copy made long-form sections
look like narrow blocks while tables, TOCs, and navigation tiles spanned
the page. Keep the main rail full-width everywhere; individual components
may still opt into their own internal grids, but ordinary article copy and
common block containers should stretch to the content edge. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > div:not( .thumb ):not( .tright ):not( .tleft ):not( .floatright ):not( .floatleft ):not( .edfm-status ):not( .edfm-panel ):not( .edfm-box ) {
max-width: none;
box-sizing: border-box;
}
/* Final guard against stale/skin rules recapping article prose while leaving
compact maintenance/status panels free to keep their intentional centred width. */
.mw-body .mw-parser-output > p,
.mw-parser-output > p {
max-width: none !important;
width: 100%;
box-sizing: border-box;
}

/* ==========================================================================
6. PANELS / CALLOUTS, and 11. ARTICLE METADATA / STATUS MODULE
========================================================================== */
/* Deliberately NOT defined here. .edfm-box / .edfm-panel* / .edfm-status* /
.edfm-inline-flag / .edfm-related* are used exclusively by the
editorial templates (see Template:Article status, Template:Draft
warning, Template:Related articles, 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 );
font-size: var( --edfm-fs-body );
}
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: var( --edfm-fs-meta );
text-align: left;
padding: 0.6em 0.8em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
/* 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 );
}

/* ==========================================================================
15. FOOTER
========================================================================== */
/* A real branded footer: a small wordmark line (pure CSS generated
content -- decorative branding only, redundant with the sidebar logo
already visible, so nothing load-bearing depends on it being
selectable), a top rule with more separation from the article above it,
and MediaWiki's real info/places/icon links laid out on a clean grid
with the badges aligned as a group rather than floating alone. */
.mw-footer {
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
margin-top: 2.5rem;
padding-top: 1.6rem;
border-top: 1px solid var( --edfm-border );
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "brand brand" "info icons" "places icons";
align-items: center;
column-gap: 2em;
row-gap: 0.4rem;
}
.mw-footer::before {
grid-area: brand;
content: 'EDFM // Elite Dangerous Field Manual';
font-family: var( --edfm-mono );
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var( --edfm-text-muted );
margin-bottom: 0.5rem;
}
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
color: var( --edfm-text-dim );
border-color: var( --edfm-border-soft );
font-size: var( --edfm-fs-meta );
}
#footer-info {
grid-area: info;
margin: 0;
line-height: 1.6;
}
#footer-places {
grid-area: places;
margin: 0;
}
/* Same "small uppercase label" treatment used for tags/meta text
elsewhere, so these read as deliberate EDFM navigation rather than
default MediaWiki footer links. */
#footer-places li {
display: inline-block;
margin-right: 1.4em;
}
#footer-places a {
font-family: var( --edfm-mono );
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.78rem;
}
/* A left rule ties the badges to the rest of the footer instead of
letting them read as detached/floating in their own space. */
#footer-icons {
grid-area: icons;
align-self: center;
display: flex;
gap: 0.75em;
margin: 0;
padding-left: 1.6em;
border-left: 1px solid var( --edfm-border-soft );
}
#footer-icons img {
background: var( --edfm-text );
border-radius: 2px;
}
@media ( max-width: 640px ) {
.mw-footer {
grid-template-columns: 1fr;
grid-template-areas: "brand" "info" "places" "icons";
}
#footer-icons {
margin-top: 0.7em;
padding-left: 0;
border-left: none;
border-top: 1px solid var( --edfm-border-soft );
padding-top: 0.7em;
}
}

/* ==========================================================================
MISC MediaWiki UI chrome that ships with light backgrounds by default
========================================================================== */
.catlinks {
background: none !important;
border: none !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-meta );
padding: 0.9em 0 0 0 !important;
margin-top: 1.8rem !important;
}
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: 350px;
max-width: min( 350px, 42% );
margin: 0 0 1.25em 1.35em;
border: 1px solid var( --edfm-border );
border-top: 2px solid var( --edfm-orange );
background: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: 0.92rem;
}
.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.5em 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-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
border: 1px dashed var( --edfm-border );
background: var( --edfm-surface-1 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility );
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 0.5em;
}
/* Optional section label (Template:Infobox's |groupN=) splitting a long
infobox into scannable groups, e.g. Engineer infoboxes into "ENGINEER"
and "ACCESS" (2026-08-08, part of the Engineer article layout pass). A
shaded band with a bottom rule rather than a full boxed sub-header --
consistent with .edfm-infobox-row's own bottom-rule-only separator, not
a new visual language. */
.edfm-infobox-group {
background: var( --edfm-surface-3 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35em 0.7em;
border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-row {
display: flex;
border-bottom: 1px solid var( --edfm-border-soft );
padding: 0.45em 0.7em;
}
.edfm-infobox-row:last-child {
border-bottom: none;
}
.edfm-infobox-label {
font-weight: 700;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
width: 40%;
flex-shrink: 0;
color: var( --edfm-cyan );
}
.edfm-infobox-value {
width: 60%;
}
@media ( max-width: 640px ) {
.edfm-infobox {
float: none;
width: auto;
max-width: none;
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::before {
display: none;
}
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;
background-image: none;
background-color: var( --edfm-surface-2 );
}
#left-navigation,
#right-navigation {
float: none;
margin: 0 !important;
width: auto;
clear: both;
}
#left-navigation {
margin-top: 0 !important;
}
/* Core Vector legacy floats each tab/dropdown portlet
(.vector-menu-tabs-legacy for Page/Discussion and Read/View
source/View history, .vector-menu-dropdown for the More menu) AND
floats every <li> inside their <ul>, with no wrapping at all -- at
narrow widths the labels just overflow and overlap each other
(confirmed with a real screenshot: "View source" and "More"
overlapped instead of wrapping to a new line). Switching the
portlets to inline-block and their tab lists to flex-wrap lets them
reflow onto as many rows as needed instead. */
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-dropdown {
float: none;
display: inline-block;
vertical-align: top;
}
.vector-menu-tabs-legacy ul {
float: none;
display: flex;
flex-wrap: wrap;
}
.vector-menu-tabs-legacy li {
float: none;
}
#p-personal {
position: static;
text-align: right;
padding: 0.5em 1em;
margin: 0;
right: auto !important;
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;
background: var( --edfm-bg-deep );
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 !important;
margin-right: 0 !important;
max-width: none;
}
.mw-body {
margin-top: 0;
border-width: 0;
padding: 1em;
}
.edfm-status-details {
grid-template-columns: 1fr;
}
/* .toc > ul column count is NOT overridden here -- the dedicated
1150px/560px breakpoints above already cover every width down to
the smallest phones; duplicating a rule here previously fought
those (same specificity, this position in the cascade would have
won and wrongly forced 1 column as low as 561px). */
#firstHeading {
font-size: 1.6rem;
}
.mw-body h2 {
margin-top: 2.25rem;
}
.edfm-eyebrow {
padding-top: 0.9em;
}
}
/* ==========================================================================
16. OOUI DIALOGS -- VisualEditor's save dialog, and any other OOUI
dialog (delete/move/protect confirmations, special-page dialogs).
These render via OOUI's own bundled WikimediaUI theme stylesheet,
entirely outside the .edfm-* component system this file otherwise
covers, so without this they show up starkly white against the rest of
the dark-themed site regardless of any variable/token used elsewhere in
this file. !important is justified the same way as the h1-h6 fix above:
OOUI's own stylesheet loads with equal-or-higher effective specificity,
and this is a correctness/contrast fix, not decoration.
========================================================================== */
.oo-ui-window-frame {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-processDialog {
background: rgba( 7, 9, 11, 0.75 ) !important;
}
.oo-ui-processDialog-navigation,
.oo-ui-window-head,
.oo-ui-window-foot {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-processDialog-title,
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-inputWidget-input {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* VisualEditor's reference dialog embeds a mini target widget for the
reference body. The widget ships with a white WikimediaUI base surface,
so theme that inner editing box separately from the surrounding OOUI
dialog chrome. */
.ve-ui-mwReferenceDialog .ve-ui-targetWidget,
.ve-ui-mwReferenceDialog .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ),
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget,
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-surface,
.ve-ui-mwReferenceDialog .ve-ce-surface,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode,
.ve-ui-mwReferenceDialog .ve-ce-documentNode,
.ve-ui-mwReferenceDialog .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode p,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode li,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode span {
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-targetWidget-focused {
border-color: var( --edfm-cyan ) !important;
box-shadow: inset 0 0 0 1px rgba( 77, 199, 232, 0.42 ) !important;
}
.ve-ui-mwSaveDialog-options,
.oo-ui-panelLayout,
.oo-ui-window-body {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-popupWidget-popup {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-buttonElement:not( .oo-ui-flaggedElement-primary ) > .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
17. OOUI TOOLBAR -- VisualEditor's persistent editing toolbar and its
dropdown menus (Cite, Insert, paragraph style, etc.), and the equivalent
toolbar/popups used when editing a single section. Same root cause as
16. OOUI DIALOGS above (OOUI's own bundled theme, not touched by
anything else in this file), found separately because it's a different
set of OOUI classes (toolbar chrome, not dialog chrome). Icons are not
overridden here and don't need to be -- they're currentColor-based, so
they pick up the text colour set below automatically.
========================================================================== */
.oo-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-tool-title,
.oo-ui-tool-link,
.oo-ui-toolGroup-tools .oo-ui-optionWidget,
.oo-ui-menuOptionWidget,
.oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-optionWidget.oo-ui-optionWidget-selected,
.oo-ui-optionWidget:hover,
.oo-ui-tool:hover .oo-ui-tool-link {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
18. OOUI GENERIC MENUS -- .oo-ui-menuSelectWidget is OOUI's general
dropdown/autocomplete menu class (paragraph-style picker, citation-type
picker, link/media search suggestions, etc.) -- a different class from
the toolbar-specific popups in 17. above, confirmed separately via
computed-style inspection to default to the same white OOUI theme
background.
========================================================================== */
.oo-ui-menuSelectWidget {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-menuOptionWidget {
color: var( --edfm-text ) !important;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget:hover {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
19. OOUI ICONS -- the toolbar/menu icons themselves (Bold, link, list,
Cite, undo/redo, etc.) are rendered as background-image SVGs with a
colour baked into the SVG markup, not currentColor-based masks -- so
16-18 above (which only recolour backgrounds/text) left them dark and
low-contrast against the now-dark surfaces. OOUI ships its own fix for
exactly this, gated behind a narrow accessibility media query
(forced-colors + prefers-color-scheme: dark) that doesn't apply to this
site's own always-on dark theme -- reusing that exact technique
unconditionally rather than inventing a different one. `:not(
.oo-ui-image-invert )` is OOUI's own exclusion for icons already meant
to render light (e.g. on the orange primary-button background) --
inverting those too would flip them back to dark.
========================================================================== */
.oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* ==========================================================================
20. EDIT SOURCE FORM -- MediaWiki core + WikiEditor + CodeMirror

The source editor is not covered by the article/component selectors above:
`action=edit` loads core edit-form CSS, WikiEditor chrome, and sometimes
CodeMirror with their own light neutral surfaces. Force the same EDFM dark
surface stack here so the source page no longer flashes as a white island.
========================================================================== */
.mw-editform,
#editform,
#toolbar,
.editOptions,
.mw-editTools,
.mw-summary-preview,
.mw-datatable,
.wikiEditor-ui,
.wikiEditor-ui-view,
.wikiEditor-ui-text,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-top,
.wikiEditor-ui-controls,
.wikiEditor-ui-tabs,
.wikiEditor-ui-buttons,
.CodeMirror,
.CodeMirror-scroll {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-editform textarea,
#wpTextbox1,
#wpSummary,
#wpSummaryWidget input,
#editform input[type='text'],
#editform input[type='search'],
#editform textarea,
.wikiEditor-ui-text textarea,
.CodeMirror-code,
.CodeMirror-lines,
.CodeMirror pre {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
caret-color: var( --edfm-orange-bright );
}
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .page,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar .options,
.wikiEditor-ui-toolbar .booklet,
.wikiEditor-ui-toolbar .pages,
.CodeMirror-gutters {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text-muted ) !important;
border-color: var( --edfm-border ) !important;
}
.wikiEditor-ui-toolbar a,
.wikiEditor-ui-toolbar .label,
.wikiEditor-ui-toolbar .tab a,
.mw-editTools a,
.editOptions label,
.mw-editform label,
.CodeMirror-linenumber {
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab a:hover,
.wikiEditor-ui-toolbar .tool-button:hover,
.wikiEditor-ui-toolbar .tool-select:hover,
.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-table td,
.CodeMirror-activeline-background {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab.current a,
.wikiEditor-ui-toolbar .section-main,
.CodeMirror-selected {
background: var( --edfm-surface-4 ) !important;
}
.CodeMirror-cursor {
border-left-color: var( --edfm-orange-bright ) !important;
}
.CodeMirror-matchingbracket {
color: var( --edfm-orange-bright ) !important;
}

/* ==========================================================================
21. FILE PAGE CHROME -- #filetoc (the File / File history / File usage /
Metadata nav on File: description pages) is defined in MediaWiki core's
mediawiki.action.view.filepage.less, entirely separate from both the
.edfm-* system and the OOUI fixes in 16-19 above -- a different
subsystem again, only loaded on File: pages, which is why it was never
touched by anything else in this file. Link colour inside it already
correctly inherits the site's normal link blue; only the light neutral
background/border needed overriding.
========================================================================== */
#filetoc {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
22. FILE PAGE: METADATA TABLE + MEDIA VIEWER BUTTON -- #mw_metadata is
the EXIF-style metadata table (separate from the File history table
above -- that one already carries the .wikitable class and picked up
dark styling from 7. TABLES automatically; this one doesn't have that
class, so it never matched). The "Open in Media Viewer" button is a
Codex component (MultimediaViewer extension) -- a third distinct
styling subsystem from OOUI and MediaWiki core skinning, again never
touched by anything else in this file.
========================================================================== */
#mw_metadata th,
#mw_metadata td {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-mmv-view-expanded.cdx-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Core MediaWiki/action buttons: match EDFM dark theme instead of default white/orange controls. */
.mw-ui-button,
.mw-htmlform-submit,
.mw-htmlform-ooui-wrapper button,
#mw-patrol-form button,
#mw-patrol-form input[type="submit"],
form.mw-htmlform button,
form.mw-htmlform input[type="submit"],
input[type="submit"].mw-ui-button,
button.mw-ui-button,
.cdx-button:not( .cdx-button--fake-button--enabled ) {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border: 1px solid var( --edfm-border-strong, var( --edfm-border ) ) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var( --edfm-mono ) !important;
font-weight: 800 !important;
text-shadow: none !important;
}
.mw-ui-button:hover,
.mw-htmlform-submit:hover,
.mw-htmlform-ooui-wrapper button:hover,
#mw-patrol-form button:hover,
#mw-patrol-form input[type="submit"]:hover,
form.mw-htmlform button:hover,
form.mw-htmlform input[type="submit"]:hover,
input[type="submit"].mw-ui-button:hover,
button.mw-ui-button:hover,
.cdx-button:not( .cdx-button--fake-button--enabled ):hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-orange-bright ) !important;
border-color: var( --edfm-orange ) !important;
}
.mw-ui-button:focus,
.mw-htmlform-submit:focus,
.mw-htmlform-ooui-wrapper button:focus,
#mw-patrol-form button:focus,
#mw-patrol-form input[type="submit"]:focus,
form.mw-htmlform button:focus,
form.mw-htmlform input[type="submit"]:focus,
input[type="submit"].mw-ui-button:focus,
button.mw-ui-button:focus,
.cdx-button:not( .cdx-button--fake-button--enabled ):focus {
outline: 2px solid var( --edfm-cyan ) !important;
outline-offset: 2px !important;
}

/* Patrol action: remove the cramped review button from the public article chrome. */
#mw-patrol-form {
display: none !important;
}

/* Frontier news: after removing the repeated dispatch list, keep attribution compact. */
.edfm-news-attribution-compact {
margin-top: 0.35rem;
padding-top: 0.6rem;
}

/* ===========================================================================
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL
=========================================================================== */
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar,
large touch targets, off-canvas navigation, search-forward layout, and
single-column readable article flow -- while preserving EDFM's dark field
manual identity and not copying RuneScape.wiki assets/CSS.
The close button is injected into #mw-panel by Common.js, so it must be
explicitly hidden by default; otherwise a tiny native white button appears
in the desktop sidebar's top-left corner. */
.edfm-mobile-appbar,
.edfm-mobile-scrim,
.edfm-mobile-close-button {
display: none;
}
@media ( max-width: 800px ) {
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var( --edfm-bg-page );
overflow-x: hidden;
}
body.edfm-mobile-menu-open {
overflow: hidden;
}
.edfm-mobile-appbar {
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
position: sticky;
top: 0;
z-index: 1200;
min-height: 56px;
padding: 0 0.35rem;
background:
linear-gradient( 90deg, rgba( 255, 138, 0, 0.18 ), transparent 38% ),
var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.35 );
}
.edfm-mobile-brand {
min-width: 0;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.edfm-mobile-brand::before {
content: 'EDFM // ';
color: var( --edfm-orange );
}
.edfm-mobile-menu-button,
.edfm-mobile-search-button,
.edfm-mobile-close-button {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var( --edfm-text );
font: 700 1.5rem/1 var( --edfm-mono );
cursor: pointer;
}
.edfm-mobile-menu-button:focus-visible,
.edfm-mobile-search-button:focus-visible,
.edfm-mobile-close-button:focus-visible {
outline: 2px solid var( --edfm-cyan );
outline-offset: -4px;
}
.edfm-mobile-menu-button::before {
content: '☰';
color: var( --edfm-orange );
}
.edfm-mobile-search-button::before {
content: '⌕';
font-size: 1.85rem;
color: var( --edfm-cyan );
}
.edfm-mobile-close-button::before {
content: '×';
color: var( --edfm-text );
}
.edfm-mobile-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba( 0, 0, 0, 0.58 );
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
body.edfm-mobile-menu-open .edfm-mobile-scrim {
opacity: 1;
pointer-events: auto;
}
#mw-navigation {
background: var( --edfm-surface-2 );
box-shadow: none;
}
#mw-head {
position: relative;
z-index: 1100;
border-bottom: 1px solid var( --edfm-border );
}
#mw-head .vector-search-box {
display: none;
margin: 0;
padding: 0.65rem;
background: var( --edfm-surface-2 );
border-top: 1px solid var( --edfm-border-soft );
}
body.edfm-mobile-search-open #mw-head .vector-search-box {
display: block;
}
#mw-head .vector-search-box-inner,
#mw-head #searchform {
width: 100%;
}
#mw-head #searchInput {
min-height: 44px;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
#left-navigation,
#right-navigation {
padding: 0 0.45rem 0.35rem;
background: var( --edfm-surface-2 );
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.vector-menu-tabs-legacy ul {
flex-wrap: nowrap;
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-dropdown .vector-menu-heading {
min-height: 36px;
display: inline-flex;
align-items: center;
}
#p-personal {
display: none;
}
#mw-panel {
position: fixed;
top: 0;
left: 0;
z-index: 1300;
width: min( 82vw, 22rem );
height: 100dvh;
box-sizing: border-box;
padding: 0;
background: var( --edfm-surface-1 );
border: 0;
border-right: 1px solid var( --edfm-border );
box-shadow: 18px 0 36px rgba( 0, 0, 0, 0.45 );
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX( -105% );
transition: transform 0.2s ease;
}
body.edfm-mobile-menu-open #mw-panel {
transform: translateX( 0 );
}
#mw-panel::before {
content: 'EDFM Navigation';
display: block;
position: sticky;
top: 0;
z-index: 1;
padding: 1rem 3.4rem 1rem 1rem;
background: var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
color: var( --edfm-orange );
font: 800 0.86rem/1.2 var( --edfm-mono );
letter-spacing: 0.08em;
text-transform: uppercase;
}
#mw-panel .edfm-mobile-close-button {
position: absolute;
top: 0.3rem;
right: 0.35rem;
z-index: 2;
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin: 0;
padding: 0.75rem 0;
border-bottom: 1px solid var( --edfm-border-soft );
}
#mw-panel .vector-menu-heading {
margin: 0.25rem 1rem 0.45rem;
}
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
display: flex;
align-items: center;
min-height: 46px;
box-sizing: border-box;
padding: 0.55rem 1rem;
border-left: 3px solid transparent;
color: var( --edfm-text-muted );
font-size: 1rem;
text-decoration: none;
}
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-content-list li a:focus {
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-cyan );
color: var( --edfm-text );
}
#mw-panel .edfm-nav-current > a,
#mw-panel .edfm-nav-current > a:visited {
background: rgba( 255, 138, 0, 0.12 );
border-left-color: var( --edfm-orange );
color: var( --edfm-orange ) !important;
}
.mw-body {
padding: clamp( 1rem, 4vw, 1.35rem );
font-size: 1rem;
line-height: 1.68;
}
#siteNotice {
margin-bottom: 1rem;
padding-bottom: 0.85rem;
}
#firstHeading {
font-size: clamp( 1.65rem, 8vw, 2.25rem );
line-height: 1.1;
letter-spacing: -0.015em;
}
.mw-body h2 {
font-size: 1.18rem;
line-height: 1.25;
}
.mw-body p,
.mw-body li {
max-width: none;
}
.mw-body img,
.mw-body .thumb,
.mw-body .thumbinner,
.mw-body .thumbimage {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
.mw-body .thumb,
.mw-body .tright,
.mw-body .tleft {
float: none !important;
clear: both;
width: auto !important;
margin: 1rem 0 !important;
}
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.mw-parser-output > table.wikitable th,
.mw-parser-output > table.wikitable td,
.mw-parser-output > table.mw-datatable th,
.mw-parser-output > table.mw-datatable td {
white-space: normal;
min-width: 8rem;
}
.edfm-infobox {
font-size: 0.95rem;
}
.edfm-infobox-row {
display: grid;
grid-template-columns: minmax( 7.5rem, 40% ) 1fr;
gap: 0.5rem;
padding: 0.65rem 0.8rem;
}
.edfm-infobox-label,
.edfm-infobox-value {
width: auto;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tbody,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tr,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type {
overflow: visible;
white-space: normal;
background: transparent;
border: 0;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th {
margin-top: 0.75rem;
border-left: 3px solid var( --edfm-orange );
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
margin-bottom: 0.75rem;
background: var( --edfm-surface-2 );
border-left: 3px solid var( --edfm-border );
}
.mw-footer {
padding: 1rem;
margin-top: 1.5rem;
}
}
@media ( max-width: 430px ) {
.edfm-mobile-brand::before {
content: 'EDFM';
margin-right: 0.45rem;
}
.edfm-mobile-brand {
font-size: 0.88rem;
}
.edfm-infobox-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}

/* 22a. Mobile action tabs refinement: keep Vector's page/discussion/read/
source/history controls available, but put them on one compact horizontal
action rail so the first phone viewport feels like a real mobile app shell
instead of two stacked desktop tab bars. */
@media ( max-width: 800px ) {
body:not( .edfm-mobile-search-open ) #mw-head {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
body:not( .edfm-mobile-search-open ) #left-navigation,
body:not( .edfm-mobile-search-open ) #right-navigation {
flex: 0 0 auto;
clear: none !important;
float: none !important;
width: auto;
padding: 0 0.25rem;
margin: 0 !important;
border-right: 1px solid var( --edfm-border-soft );
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown {
float: none !important;
display: inline-block;
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a,
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a:visited,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown .vector-menu-heading {
min-height: 40px;
padding-left: 0.55rem;
padding-right: 0.55rem;
font-size: 0.68rem;
}
body.edfm-mobile-search-open #mw-head {
display: block;
}
}

/* ===========================================================================
24. HARD OVERRIDE: JUMP TILE LEFT RAIL

The earlier border-left rail can be swallowed by ResourceLoader/cascade or
visually read as part of the tile edge. Draw the rail as a high-specificity
gradient on the actual top-level TOC anchors so it is unmistakable on the
live jump grid.
=========================================================================== */
#toc.toc > ul > li > a,
.mw-parser-output #toc > ul > li > a,
.mw-parser-output .toc > ul > li > a {
background-image: linear-gradient( 90deg, var( --edfm-orange ) 0, var( --edfm-orange ) 6px, transparent 6px ) !important;
border-left: 0 !important;
padding-left: 1rem !important;
}
#toc.toc > ul > li > a:hover,
#toc.toc > ul > li > a:focus-visible,
.mw-parser-output #toc > ul > li > a:hover,
.mw-parser-output #toc > ul > li > a:focus-visible,
.mw-parser-output .toc > ul > li > a:hover,
.mw-parser-output .toc > ul > li > a:focus-visible {
background-image: linear-gradient( 90deg, var( --edfm-cyan ) 0, var( --edfm-cyan ) 6px, transparent 6px ) !important;
}

/* ===========================================================================
25. SOURCE EDIT CONFLICT / WIKITEXT DIFF THEME

Source-edit conflict review uses MediaWiki's diff table classes, not the
normal edit textarea/WikiEditor chrome. Without this, unchanged rows and
inline change pills fall back to stark white/yellow/blue defaults. Keep the
old/new meaning, but render it in EDFM's dark surfaces with restrained
orange/cyan accents.
=========================================================================== */
.mw-parser-output table.diff,
table.diff,
.diff {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-collapse: separate !important;
border-spacing: 0 0.12rem !important;
}
.diff-title,
.diff-otitle,
.diff-ntitle,
#mw-diff-otitle1,
#mw-diff-ntitle1 {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
}
td.diff-lineno,
.diff-lineno {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
border: 0 !important;
padding: 0.35rem 0.5rem !important;
}
td.diff-marker,
.diff-marker {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
padding: 0.25rem 0.45rem !important;
text-align: center;
}
td.diff-context,
td.diff-addedline,
td.diff-deletedline,
.diff-context,
.diff-addedline,
.diff-deletedline,
.mw-diff-inline-context,
.mw-diff-inline-added,
.mw-diff-inline-deleted,
.mw-diff-inline-changed,
.mw-diff-inline-moved {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
font-family: var( --edfm-mono );
box-shadow: none !important;
}
td.diff-context:empty,
td.diff-addedline:empty,
td.diff-deletedline:empty,
.diff-context:empty,
.diff-addedline:empty,
.diff-deletedline:empty {
/* Empty diff cells are alignment placeholders. Keep their card boundary so
the two-column source-conflict diff does not look broken, but make them
compact and neutral instead of tall blank blocks. */
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none !important;
min-height: 0;
padding-top: 0.08rem !important;
padding-bottom: 0.08rem !important;
}
td.diff-deletedline,
.diff-deletedline,
.mw-diff-inline-deleted {
background: rgba( 255, 138, 0, 0.08 ) !important;
border-color: rgba( 255, 138, 0, 0.6 ) !important;
border-left-color: var( --edfm-orange ) !important;
}
td.diff-addedline,
.diff-addedline,
.mw-diff-inline-added {
background: rgba( 66, 199, 217, 0.08 ) !important;
border-color: rgba( 66, 199, 217, 0.6 ) !important;
border-left-color: var( --edfm-cyan ) !important;
}
.diffchange,
.diff-addedline .diffchange,
.diff-deletedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
border-radius: 3px !important;
padding: 0.08rem 0.22rem !important;
font-weight: 700;
text-decoration: none !important;
color: var( --edfm-bg-deep ) !important;
}
.diff-deletedline .diffchange,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
background: var( --edfm-orange-bright ) !important;
}
.diff-addedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins {
background: var( --edfm-cyan ) !important;
}
.mw-explainconflict,
#wpTextbox2,
textarea#wpTextbox2,
textarea.mw-textarea-oldrev {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Engineer directory portrait chips -- intentionally quiet so table rows still
read like data rows, not card/list hybrids. */
.edfm-engineer-entry {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: max-content;
}
.edfm-engineer-entry .mw-file-element {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var( --edfm-border );
background: var( --edfm-surface-0 );
box-shadow: none;
}
.edfm-engineer-entry__name {
line-height: 1.2;
}

/* Frontier official news feed image treatment */
.edfm-frontier-news .edfm-news-card-art-image {
display: block;
position: relative;
padding: 0;
/* Keep all news thumbnails uniform, including the first/primary story. */
height: 9.5rem;
min-height: 9.5rem;
aspect-ratio: 16 / 9;
background: var( --edfm-surface-4 );
overflow: hidden;
}
.edfm-frontier-news .edfm-news-card-primary .edfm-news-card-art-image {
height: 9.5rem;
min-height: 9.5rem;
}
.edfm-frontier-news .edfm-news-card-art-image > span,
.edfm-frontier-news .edfm-news-card-art-image .mw-default-size,
.edfm-frontier-news .edfm-news-card-art-image .mw-file-description {
display: block !important;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.edfm-frontier-news .edfm-news-card-art-image .mw-file-element {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transition: transform 0.2s ease, filter 0.2s ease;
}
.edfm-frontier-news .edfm-news-card:hover .edfm-news-card-art-image .mw-file-element {
filter: brightness( 1.08 ) contrast( 1.05 );
transform: scale( 1.035 );
}
.edfm-frontier-news .edfm-news-source-badge {
display: inline-flex !important;
align-items: center;
position: absolute !important;
left: 0.8rem !important;
right: auto !important;
bottom: 0.75rem !important;
z-index: 2;
max-width: calc( 100% - 1.6rem );
padding: 0.25rem 0.55rem;
background: rgba( 10, 13, 17, 0.82 );
border: 1px solid rgba( 255, 138, 0, 0.48 );
box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.34 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}

.edfm-news-attribution {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var( --edfm-border-soft );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
line-height: 1.45;
}

/* Patrol action: hide MediaWiki generated patrol footer/link from article chrome. */
.patrollink,
.patrollink[data-mw-interface],
.patrollink .cdx-button,
#mw-content-text + .patrollink,
.mw-parser-output + .patrollink {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* ===========================================================================
2026-08-10 PROSE RAIL SLEDGEHAMMER
=========================================================================== */
/* Plain article prose on EDFM is supposed to occupy the article rail. Keep this
deliberately simple and selector-separated: no comma-list dependency on
advanced :not() parsing, no TemplateStyles scoping, and both physical and
logical width properties so later/readability rules cannot re-cap lines. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > p,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ul,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ol,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > dl {
display: block !important;
width: 100% !important;
max-width: none !important;
inline-size: 100% !important;
max-inline-size: none !important;
box-sizing: border-box !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output p {
max-width: none !important;
max-inline-size: none !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output li,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output dd {
max-width: none !important;
max-inline-size: none !important;
}
/* Restore the intentional compact maintenance notice after the broad prose
override above. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-draft,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-draft {
width: auto !important;
max-width: 44rem !important;
inline-size: auto !important;
max-inline-size: 44rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
EDFM login/register auth surface template alignment
========================================================================== */
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm {
color: var( --edfm-text );
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-label__label__text {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.015em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-Userlogin #userloginForm input[type='text'],
body.mediawiki.mw-special-Userlogin #userloginForm input[type='password'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='text'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='password'] {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 );
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input::placeholder,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-help,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-password-help {
color: var( --edfm-text-muted ) !important;
font-size: 0.88rem;
line-height: 1.45;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
margin-top: 0.85rem;
padding: 0.9rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.12 ), transparent 34% ),
var( --edfm-surface-1 );
border: 1px solid rgba( 255, 138, 0, 0.42 );
border-left: 3px solid var( --edfm-orange );
box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 850;
letter-spacing: 0.04em;
line-height: 1.35;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 0;
margin: 0;
padding: 0.55rem 0.8rem;
background: rgba( 255, 138, 0, 0.1 ) !important;
border: 1px solid var( --edfm-orange ) !important;
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.035 );
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.045em;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:hover,
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:focus-visible {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange-bright ) !important;
color: #10171b !important;
text-decoration: none !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin-top: 0.2rem;
padding: 1.15rem 1.25rem;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.08 ), transparent 38% ),
var( --edfm-surface-1 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-heading {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-size: 1.35rem;
font-weight: 800;
line-height: 1.25;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list {
margin-top: 1rem;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::before {
filter: none !important;
opacity: 0.78 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 1.75rem;
font-weight: 850;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {
color: var( --edfm-text-muted ) !important;
font-size: 0.9rem;
line-height: 1.35;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text {
display: none !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit {
background: var( --edfm-surface-3 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
border-radius: 0 !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 850;
letter-spacing: 0.06em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit:hover,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
body.mediawiki.mw-special-Userlogin #mw-content-text,
body.mediawiki.mw-special-CreateAccount #mw-content-text {
padding-top: 0.55rem;
}
body.mediawiki.mw-special-Userlogin #firstHeading {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-content-text > .mw-ui-container {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm {
width: min( 100%, 34rem ) !important;
margin: 0 auto !important;
padding: 1.15rem 1.2rem 1.25rem !important;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.1 ), transparent 34% ),
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 55% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-userlogin-help {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
margin: 1.05rem auto 0 !important;
max-width: 18rem;
}
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: grid !important;
grid-template-columns: minmax( 19rem, 28rem ) minmax( 20rem, 1fr ) !important;
gap: clamp( 1.4rem, 4vw, 3rem ) !important;
align-items: stretch !important;
width: min( 100%, 76rem ) !important;
max-width: 76rem !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin: 0 !important;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.07 ), transparent 38% ),
linear-gradient( 180deg, rgba( 255, 138, 0, 0.035 ), rgba( 0, 0, 0, 0 ) 54% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm {
padding: 1.15rem 1.2rem 1.25rem !important;
border-left: 3px solid var( --edfm-orange ) !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
padding: clamp( 1.3rem, 2.2vw, 2.05rem ) !important;
border-left: 3px solid var( --edfm-cyan ) !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field {
margin-bottom: 1rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLSubmitField,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLSubmitField {
margin-bottom: 0 !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName {
border-color: rgba( 66, 199, 217, 0.45 ) !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 1px rgba( 66, 199, 217, 0.35 ), 0 0 18px rgba( 66, 199, 217, 0.14 ) !important;
}
@media ( max-width: 860px ) {
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: flex !important;
flex-direction: column !important;
width: min( 100%, 34rem ) !important;
max-width: 34rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
width: 100% !important;
}
}
/* ==========================================================================
EDFM dark thumbnail/frame treatment — 2026-08-13
Keep MediaWiki image captions from falling back to the default white frame.
========================================================================== */
.mw-parser-output .thumb {
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"],
.mw-parser-output figure.mw-halign-right,
.mw-parser-output figure.mw-halign-left,
.mw-parser-output figure.mw-halign-center {
background:
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 56% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 1px solid var( --edfm-border ) !important;
box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbimage,
.mw-parser-output .thumbinner img,
.mw-parser-output figure[typeof~="mw:File/Thumb"] img,
.mw-parser-output figure[typeof~="mw:File/Frame"] img {
background-color: var( --edfm-bg-deep ) !important;
border: 1px solid var( --edfm-border ) !important;
box-sizing: border-box !important;
}
.mw-parser-output .thumbcaption,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption {
background: var( --edfm-surface-1 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim ) !important;
font-size: var( --edfm-fs-small ) !important;
line-height: 1.42 !important;
padding: 0.42rem 0.5rem 0.5rem !important;
}
.mw-parser-output .thumbcaption a,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a {
color: var( --edfm-link ) !important;
}
.mw-parser-output .thumbcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a:hover {
color: var( --edfm-link-hover ) !important;
}
.mw-parser-output .magnify a,
.mw-parser-output .mw-file-magnify {
filter: invert( 1 ) opacity( 0.72 ) drop-shadow( 0 0 2px rgba( 66, 199, 217, 0.28 ) );
}

/* ==========================================================================
EDFM VisualEditor template dialog dark theme — 2026-08-13
Keep template editing dialogs from falling back to white/light OOUI panels.
========================================================================== */
.ve-ui-mwTransclusionDialog,
.ve-ui-mwTransclusionDialog .oo-ui-window-frame,
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .oo-ui-window-body,
.ve-ui-mwTransclusionDialog .oo-ui-window-foot,
.ve-ui-mwTransclusionDialog .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTransclusionDialog .oo-ui-pageLayout,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-content,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
background-color: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu {
background-color: var( --edfm-surface-1 ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterSelectWidget {
background-color: var( --edfm-surface-2 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-widget {
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-field .oo-ui-labelElement-label em,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-undocumentedLabel {
color: var( --edfm-text-muted ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-bg-deep ) !important;
}

/* Additional VE template-dialog color polish — disabled/apply buttons, search,
unused-toggle buttons, and parameter checkboxes. */
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
opacity: 0.82 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget .oo-ui-inputWidget-input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-inputWidget-input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span::before {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
/* EDFM VisualEditor template/infobox popup hard-dark theme — targets the actual
Edit: <template> popup chrome and body, not just article/sidebar chrome. */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active > .oo-ui-window-frame,
.oo-ui-windowManager-modal .oo-ui-processDialog-content,
.oo-ui-windowManager-modal .oo-ui-window-content,
.oo-ui-windowManager-modal .oo-ui-window-body,
.oo-ui-windowManager-modal .oo-ui-window-foot,
.ve-ui-mwTemplateDialog,
.ve-ui-mwTemplateDialog .oo-ui-panelLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-content,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTemplateDialog .oo-ui-pageLayout,
.ve-ui-mwTemplateDialog .ve-ui-mwTemplatePage,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #111b20 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-content > .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-processDialog-navigation,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #1c2a31 !important;
color: #f4f7f8 !important;
border-color: #7f9299 !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-title,
.oo-ui-windowManager-modal .oo-ui-labelElement-label,
.oo-ui-windowManager-modal .oo-ui-fieldLayout-header label,
.oo-ui-windowManager-modal .oo-ui-widget,
.ve-ui-mwTemplateDialog .oo-ui-labelElement-label,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTemplateDialog .oo-ui-fieldsetLayout-header label {
color: #f4f7f8 !important;
}
.oo-ui-windowManager-modal .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-undocumentedLabel,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .mw-widget-titleOptionWidget-description {
color: #a9bbc1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-inputWidget-input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget textarea,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget input,
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
background: #0d1519 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: #42c7d9 !important;
box-shadow: 0 0 0 2px rgba(66,199,217,.32) !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: #25353d !important;
border-color: #52646b !important;
color: #f4f7f8 !important;
box-shadow: none !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: #31454f !important;
border-color: #ff8a00 !important;
color: #ffb347 !important;
}
.oo-ui-windowManager-modal .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: #ff8a00 !important;
border-color: #ff8a00 !important;
color: #111820 !important;
font-weight: 700 !important;
}
.oo-ui-windowManager-modal .oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background: #1c2a31 !important;
border-color: #3f5159 !important;
color: #8fa1a8 !important;
opacity: 1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget:hover,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: #25353d !important;
color: #f4f7f8 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span::before {
background-color: #0d1519 !important;
border-color: #7f9299 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before {
background-color: #ff8a00 !important;
border-color: #ff8a00 !important;
}
/* EDFM cookie preferences banner */
#edfm-cookie-banner {
position: fixed;
z-index: 10000;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: flex;
justify-content: center;
pointer-events: none;
}
#edfm-cookie-banner .edfm-cookie-card {
max-width: 800px;
border: 1px solid rgba(80, 220, 240, 0.65);
background: rgba(3, 14, 22, 0.98);
box-shadow: 0 0 22px rgba(80, 220, 240, 0.22), 0 12px 36px rgba(0, 0, 0, 0.45);
color: #dffbff;
padding: 1rem;
font-size: 0.95rem;
pointer-events: auto;
}
#edfm-cookie-banner .edfm-cookie-title {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fe0ec;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-text { margin: 0 0 0.75rem; line-height: 1.45; }
#edfm-cookie-banner .edfm-cookie-categories {
display: grid;
gap: 0.65rem;
margin: 0.65rem 0 0.85rem;
}
#edfm-cookie-banner .edfm-cookie-category {
border: 1px solid rgba(127, 224, 236, 0.32);
background: rgba(7, 28, 38, 0.74);
padding: 0.7rem;
}
#edfm-cookie-banner .edfm-cookie-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-category h3 {
margin: 0;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f3feff;
}
#edfm-cookie-banner .edfm-cookie-category p {
margin: 0;
line-height: 1.42;
color: #c6e6eb;
}
#edfm-cookie-banner .edfm-cookie-status {
white-space: nowrap;
border: 1px solid rgba(255, 138, 0, 0.7);
color: #ffd69a;
background: rgba(255, 138, 0, 0.12);
padding: 0.2rem 0.48rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#edfm-cookie-banner .edfm-cookie-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-weight: 700;
color: #f3feff;
cursor: pointer;
}
#edfm-cookie-banner .edfm-cookie-switch input {
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color: #ff8a00;
}
#edfm-cookie-banner .edfm-cookie-switch input:focus-visible {
outline: 2px solid #7fe0ec;
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#edfm-cookie-banner button {
border: 1px solid rgba(127, 224, 236, 0.7);
background: rgba(9, 50, 65, 0.92);
color: #f3feff;
padding: 0.45rem 0.7rem;
cursor: pointer;
}
#edfm-cookie-banner button:hover,
#edfm-cookie-banner button:focus-visible {
background: rgba(17, 88, 108, 0.98);
outline: 2px solid rgba(127, 224, 236, 0.85);
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-links { margin-top: 0.6rem; font-size: 0.85rem; }
#edfm-cookie-banner a { color: #7fe0ec; }
@media (max-width: 600px) {
#edfm-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
#edfm-cookie-banner .edfm-cookie-card { max-height: calc(100vh - 1rem); overflow: auto; }
#edfm-cookie-banner .edfm-cookie-category-head { align-items: flex-start; }
#edfm-cookie-banner .edfm-cookie-actions button { flex: 1 1 100%; }
}

/* ==========================================================================
EDFM Vector watchstar dark-theme fix — 2026-08-16
Vector legacy renders the page watch/unwatch affordance as a small SVG
background on `#ca-watch/#ca-unwatch a::before`. On EDFM's dark tab row the
upstream light-skin URLs can be too low-contrast, and some deployments do not
expose ResourceLoader's dotted asset path directly. Use inline SVGs in the
EDFM palette so the watchstar is always visible in the top action menu.
========================================================================== */
.vector-menu-tabs #ca-watch.icon a::before,
.vector-menu-tabs-legacy #ca-watch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2310171b' stroke='%2342c7d9' stroke-width='1.35' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.42 ) );
opacity: 0.96;
}
.vector-menu-tabs #ca-unwatch.icon a::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.2' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 4px rgba( 255, 138, 0, 0.45 ) );
opacity: 0.98;
}
.vector-menu-tabs #ca-watch.icon a:hover::before,
.vector-menu-tabs #ca-watch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-watch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-watch.icon a:focus::before,
.vector-menu-tabs #ca-unwatch.icon a:hover::before,
.vector-menu-tabs #ca-unwatch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:focus::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.25' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 5px rgba( 255, 138, 0, 0.65 ) );
opacity: 1;
}

/* ==========================================================================
EDFM Special:Preferences dark theme fix — 2026-08-16
Preferences is an OOUI/Codex-heavy special page. Core styles bring in a
light tab strip and sticky submit footer, so theme the actual preferences
wrapper rather than only generic form controls.
========================================================================== */
body.mediawiki.mw-special-Preferences #preferences,
body.mediawiki.mw-special-Preferences #mw-prefs-container,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-fieldset-wrapper,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout-framed {
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed {
box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.32 );
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-menu,
body.mediawiki.mw-special-Preferences .oo-ui-menuLayout-menu {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabSelectWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget:hover,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: inset 0 -3px 0 var( --edfm-orange ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header label,
body.mediawiki.mw-special-Preferences .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .mw-prefs-title {
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-description,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-help,
body.mediawiki.mw-special-Preferences .oo-ui-inline-help,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-messages,
body.mediawiki.mw-special-Preferences .htmlform-tip,
body.mediawiki.mw-special-Preferences .mw-htmlform-help {
background: transparent !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownInputWidget select,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownWidget-handle,
body.mediawiki.mw-special-Preferences input[type='text'],
body.mediawiki.mw-special-Preferences input[type='number'],
body.mediawiki.mw-special-Preferences input[type='email'],
body.mediawiki.mw-special-Preferences textarea,
body.mediawiki.mw-special-Preferences select {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-inputWidget-input::placeholder,
body.mediawiki.mw-special-Preferences input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus,
body.mediawiki.mw-special-Preferences input:focus,
body.mediawiki.mw-special-Preferences textarea:focus,
body.mediawiki.mw-special-Preferences select:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox'] {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox']:checked {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
accent-color: var( --edfm-orange );
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit,
body.mediawiki.mw-special-Preferences button,
body.mediawiki.mw-special-Preferences input[type='submit'] {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit:hover,
body.mediawiki.mw-special-Preferences button:hover,
body.mediawiki.mw-special-Preferences input[type='submit']:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
body.mediawiki.mw-special-Preferences #preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .oo-ui-window-foot .mw-htmlform-submit-buttons {
background: rgba( 16, 23, 27, 0.96 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
box-shadow: 0 -10px 24px rgba( 0, 0, 0, 0.34 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-search-highlight,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
background: rgba( 66, 199, 217, 0.18 ) !important;
outline-color: rgba( 66, 199, 217, 0.32 ) !important;
color: var( --edfm-text ) !important;
}

MediaWiki:Common.css

2026-08-18T21:39:07Z

EDFM Site Maintenance: Colour Echo's notification bell/tray icons in the personal toolbar to match the site's orange interactive-control convention; they render via Vector's mask-image icon system (background-color: @color-base by default) with no dark-theme override, so they were invisible against the header.

/* ==========================================================================
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).

2026-08-07 SECOND PASS: the first redesign pass was judged too close to
stock MediaWiki with a colour change -- this pass changes the actual
visual composition (centred workspace instead of a huge dead gutter,
a two-tier header, a real masthead, a tile-grid TOC, a restructured
status module, larger deliberate type scale, depth via surface
elevation instead of borders-around-everything) while reusing every
working mechanism from the first pass rather than throwing it away --
the tab/:visited fix, the external-link specificity fix, the mobile
reorder fix, and focus-visible/reduced-motion are all still here,
unchanged in mechanism.
========================================================================== */

/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* Depth system: site (outermost, visible in the sidebar/header/gutters)
-> article surface -> component surfaces, each a deliberate step
brighter so the page reads as having actual depth rather than "one
background colour with slightly lighter boxes everywhere". */
--edfm-bg-deep: #07090b;
--edfm-bg-page: #0a0e11;
--edfm-surface-1: #10171b;
--edfm-surface-2: #161f24;
--edfm-surface-3: #1c272d;
--edfm-surface-4: #233037;

--edfm-border: #26333b;
--edfm-border-soft: rgba( 255, 255, 255, 0.06 );

--edfm-text: #edf0f2;
--edfm-text-muted: #98a5ad;
--edfm-text-dim: #6c7a82;

/* 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 */
--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 );
--edfm-status-positive-bg: rgba( 66, 199, 217, 0.12 );
--edfm-status-attention-bg: rgba( 255, 138, 0, 0.12 );
--edfm-status-neutral-bg: rgba( 108, 122, 130, 0.12 );

/* Typography -- explicit desktop scale (2026-08-07 pass 2). Sized in
rem against the root's real 16px (Vector legacy's own
@font-size-root is 100%, i.e. browser default -- confirmed by
reading skins.vector.styles.legacy/variables.less, not assumed)
rather than nested em, specifically so component sizes can't
compound smaller than intended inside whatever ambient size an
ancestor happens to set. */
--edfm-fs-title: clamp( 1.9rem, 1.4rem + 2vw, 2.25rem ); /* ~30-36px */
--edfm-fs-h2: 1.35rem; /* ~21.6px */
--edfm-fs-h3: 1.15rem; /* ~18.4px */
--edfm-fs-body: 1rem; /* 16px */
--edfm-fs-resource-name: 1.1rem; /* ~17.6px */
--edfm-fs-meta: 0.8rem; /* ~12.8px */
--edfm-fs-sidebar: 0.9375rem; /* 15px -- polish pass: +1px for readability */
--edfm-fs-utility: 0.72rem; /* ~11.5px */

--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 );

/* Geometry / layout */
--edfm-corner: 10px;
/* Full-width article workspace: keep the fixed Vector sidebar clear,
but let the article surface use the entire remaining viewport. */
--edfm-sidebar-width: 12.75rem;
--edfm-sidebar-clear: 12.75rem;
--edfm-content-max: calc( 100vw - var( --edfm-sidebar-clear ) );
--edfm-gutter: 0px;
}

/* ==========================================================================
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 );
font-size: var( --edfm-fs-body );
}
/* Background treatment: a faint technical grid plus a very soft radial
glow centred behind the (now centred) content column, so the composition
still has quiet visual interest in the gutters on ultrawide screens
instead of just flat colour -- both stay under ~3% opacity, this is
texture, not a HUD. Not image assets; pure CSS gradients. */
body {
background-image:
radial-gradient( ellipse 1400px 900px at 50% 0%, rgba( 66, 199, 217, 0.05 ), transparent 60% ),
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: auto, 48px 48px, 48px 48px;
background-repeat: no-repeat, repeat, repeat;
background-attachment: fixed, scroll, scroll;
}
/* Full-height sidebar rail: mirrors the RuneScape.wiki behavior where the
left rail has no visible bottom edge. The real #mw-panel only carries the
navigation content; this fixed layer paints the uninterrupted surface,
border, and shadow down the whole viewport. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var( --edfm-sidebar-width );
background: linear-gradient( 180deg, var( --edfm-surface-1 ) 0%, var( --edfm-bg-deep ) 100% );
border-right: 1px solid var( --edfm-border );
box-shadow: 10px 0 22px rgba( 0, 0, 0, 0.32 );
pointer-events: none;
z-index: 1;
}
@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: 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;
}

/* Small reusable angular motif: a corner-cut bracket, used sparingly (see
the redesign notes in docs/content-style-guide.md for exactly where) --
deliberately not applied everywhere. */
.edfm-corner-cut {
clip-path: polygon( 0 0, calc( 100% - var( --edfm-corner ) ) 0, 100% var( --edfm-corner ), 100% 100%, 0 100% );
}

/* ==========================================================================
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: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.75rem, 1.35rem + 1.45vw, 2.15rem );
font-weight: 700;
letter-spacing: 0;
line-height: 1.18;
margin: 0.15em 0 0.25em;
padding-bottom: 0.22em;
border-bottom: 1px solid var( --edfm-border );
}
/* Section headings (h2): "// " prefix in orange, bright heading text, a
short orange accent segment over the dim full-width divider core
already draws. Substantially more vertical space than a wiki section
normally gets, per the "sections feel packed together" fix -- 3.25rem
(~52px) above, ~1.1rem gap to the first content component below. If a
heading opts into explicit numbering via {{Section number}}, the
automatic "// " is suppressed so the two treatments don't double up. */
.mw-body h2 {
position: relative;
padding-bottom: 0.25em;
margin-top: 2rem;
margin-bottom: 0.85rem;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.28rem, 1.08rem + 0.65vw, 1.62rem );
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid var( --edfm-border ) !important;
}
.mw-body h2::before {
content: none;
}
.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 );
font-size: var( --edfm-fs-h3 );
}
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.7;
font-size: var( --edfm-fs-body );
}
.mw-body p {
margin: 0 0 1.1em 0;
max-width: none !important; /* Site-wide full-width pass: article text should use the whole content rail. */
}
.mw-body ul,
.mw-body ol {
line-height: 1.7;
margin-bottom: 1.1em;
}

/* EDFM article bullets: replace the stock browser dot with the provided
cyan field-manual arrow, scaled to text size rather than using the source
image's native 100x91 dimensions. This targets article unordered lists;
interface/navigation lists such as the Jump To TOC and galleries are reset
below so they keep their component-specific layout. */
.mw-parser-output ul {
list-style: none;
padding-left: 1.55em;
}
.mw-parser-output ul > li {
position: relative;
}
.mw-parser-output ul > li::before {
content: '';
position: absolute;
left: -1.35em;
top: 0.48em;
width: 0.82em;
height: 0.75em;
background-image: url( '/edfm-assets/list-bullet-arrow.png' );
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.95;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.35 ) );
}
.mw-parser-output ul ul {
margin-top: 0.3em;
padding-left: 1.45em;
}
.mw-parser-output ul ul > li::before {
left: -1.25em;
top: 0.52em;
width: 0.68em;
height: 0.62em;
opacity: 0.82;
}
/* Component exceptions: these are not prose bullet lists. */
.mw-parser-output .toc ul,
.mw-parser-output .gallery,
.mw-parser-output .gallery ul,
.mw-parser-output .mw-gallery-traditional,
.mw-parser-output .mw-gallery-traditional ul {
padding-left: 0;
}
.mw-parser-output .toc li::before,
.mw-parser-output .gallery li::before,
.mw-parser-output .mw-gallery-traditional li::before {
content: none;
}
/* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the
sibling that immediately follows is that wrapper, not the `h2`/`h3`
itself -- matching both forms since a page could still have a bare
heading in edge cases (e.g. content generated without the wrapper). */
.mw-heading2 + p, .mw-body h2 + p,
.mw-heading3 + p, .mw-body h3 + p,
.mw-heading2 + div, .mw-body h2 + div,
.mw-heading3 + div, .mw-body h3 + div {
margin-top: 0;
}
hr {
background-color: var( --edfm-border );
border-color: var( --edfm-border );
}

/* Quiet, discoverable section-edit controls (logged-in editors only --
MediaWiki only renders these for users who can edit). Keeping the
functionality/keyboard access intact while making sure they don't
compete visually with the heading they're attached to: low opacity at
rest, full opacity on hover/focus of the heading OR the control itself,
brackets hidden (the opacity+letter-spacing treatment already reads as
a distinct control without them). */
.mw-editsection {
margin-left: 1em;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility ) !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.45;
transition: opacity 0.15s ease;
}
.mw-heading:hover .mw-editsection,
.mw-heading:focus-within .mw-editsection,
.mw-editsection:hover,
.mw-editsection:focus-within {
opacity: 1;
}
.mw-editsection a {
color: var( --edfm-text-dim );
}
.mw-editsection a:hover,
.mw-editsection a:focus-visible {
color: var( --edfm-cyan );
}
.mw-editsection-bracket {
display: none;
}
.mw-editsection-divider {
color: var( --edfm-text-dim );
margin: 0 0.3em;
}

/* ==========================================================================
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. GLOBAL LAYOUT -- centred workspace
========================================================================== */
/* Full-width article pass: the article now fills the workspace to the right edge.
Historical note: this block originally centred a capped article column.

THE fix for "enormous unused region on the right side of wide displays".
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 with no max-width at all -- the first redesign
pass added a max-width but left the column pinned to the sidebar's left
edge, which is *why* it still read as "a column stuck on the left with
dead space on the right" rather than a composed layout.

Fix: instead of a fixed `margin-left: 11em`, compute how much space is
left over in the workspace (viewport minus the sidebar) once the
content has its max-width, and split that leftover evenly between the
left and right margins (via the --edfm-gutter token above) -- so the
article is centred *within the workspace to the right of the sidebar*,
not centred in the full viewport (which would ignore the sidebar and
look off-centre) and not pinned to its left edge either. On a screen
too narrow for sidebar + max-width content, --edfm-gutter naturally
evaluates to 0 and this degrades to the old "fill the workspace"
behaviour -- no separate narrow-screen override needed.

The header/tab bar's own float/absolute-position box (#mw-head) is left
at its native full width deliberately -- rewriting *that* mechanism is
a different, much higher-risk change (it took several rounds to get
right originally) -- but its *contents* (search box, personal tools,
namespace/view tabs) get their own right/left offsets pulled in by the
same --edfm-gutter below, so they still visually line up with the
centred column beneath them instead of hugging the browser edge. */
.mw-body,
#mw-data-after-content,
.mw-footer {
position: relative;
z-index: 2;
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
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,
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
/* Keep real table layout so header cells and body cells share one column grid.
The earlier display:block + tbody display:table overflow hack made sortable
headers size independently from body columns, which visibly misaligned the
Engineer directory after portrait chips were added. */
display: table;
width: 100%;
table-layout: auto;
}
.mw-body table.wikitable th,
.mw-body table.wikitable td,
.mw-body table.mw-datatable th,
.mw-body table.mw-datatable td {
vertical-align: middle;
}
.mw-body img {
max-width: 100%;
height: auto;
}

/* ==========================================================================
4. ARTICLE MASTHEAD (eyebrow / title / deck)
========================================================================== */
/* Eyebrow line is authored as ordinary wikitext (see Template:Article
header) and, purely as a placement detail, a small script
(MediaWiki:Common.js) moves it directly above #firstHeading on 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).
If JS is unavailable the eyebrow still renders, just directly under the
title instead of above it.

The eyebrow/title/deck aren't wrapped in one literal bounding box (they
live at two different DOM depths -- eyebrow is a sibling of #firstHeading,
deck is inside the article body further down -- wrapping them in one
real container would need heavier JS than is justified here), so the
"designed masthead" read comes from a matching top rule above the
eyebrow and bottom rule below the deck, a small angular marker, and the
larger title/subtitle type scale, rather than one drawn box. */
.edfm-eyebrow {
display: block;
margin: 0.2em 0 0.15em 0;
padding: 0;
border: 0;
font-family: var( --edfm-sans );
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --edfm-text-dim );
}
.edfm-eyebrow::before {
content: none;
}
.edfm-eyebrow .edfm-orange-mark {
color: var( --edfm-orange );
}
.edfm-deck {
color: var( --edfm-text-muted );
font-family: var( --edfm-sans );
font-size: 0.95rem;
font-style: italic;
line-height: 1.45;
max-width: none;
margin: 0.25em 0 0.85em 1.4em;
padding: 0;
border: 0;
}

/* ==========================================================================
1. SIDEBAR
========================================================================== */
#mw-panel {
background: transparent;
box-sizing: border-box;
width: var( --edfm-sidebar-width );
padding: 0 0.65rem 1.35rem 0.65rem;
border-right: 0;
box-shadow: none;
z-index: 3;
}
/* Logo anchors the sidebar visually. Keep raster logo artwork contained in
Vector legacy's fixed sidebar slot rather than letting the image render at
its intrinsic PNG size and clip against the rail. */
#p-logo {
box-sizing: border-box;
width: auto;
height: 10rem;
margin: 0 -0.65rem 0.65rem -0.65rem;
padding: 0.5rem 0.55rem 0.45rem 0.55rem;
border-bottom: 0 !important;
background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% );
overflow: hidden;
}
#p-logo a.mw-wiki-logo {
box-sizing: border-box;
display: block;
width: 100% !important;
height: 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
/* Each nav group gets real breathing room from the one before it instead
of being packed together like a stock wiki sidebar. */

#mw-panel .portal,
#mw-panel .vector-menu-portal {
box-sizing: border-box;
width: auto;
max-width: none;
margin-top: 1.45rem;
}
#mw-panel .portal:first-of-type,
#mw-panel .vector-menu-portal:first-of-type {
margin-top: 0;
}
#mw-panel .portal .body,
#mw-panel .portal ul,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list {
box-sizing: border-box;
width: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
border-color: var( --edfm-border-soft );
}
#mw-panel .portal a {
color: var( --edfm-text-muted );
display: block;
font-size: var( --edfm-fs-sidebar );
line-height: 1.35;
padding: 0.42em 0.55em;
margin: 0.08em -0.35em;
border-left: 2px solid transparent;
border-radius: 2px;
}
#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). */
.edfm-nav-current > a {
color: var( --edfm-orange ) !important;
font-weight: 700;
border-left-color: var( --edfm-orange );
border-left-width: 3px;
background: var( --edfm-surface-2 );
box-shadow: inset 0 0 0 1px rgba( 255, 138, 0, 0.08 );
}
.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: var( --edfm-fs-utility );
border-left: 2px solid var( --edfm-orange );
padding-left: 0.5em;
margin-left: -0.5em;
margin-bottom: 0.4em;
}

/* ==========================================================================
3. TOP BAR -- two-tier chrome
========================================================================== */
/* Vector legacy's #mw-head naturally has ~2.5em of empty space above the
tabs row (core: `#left-navigation/#right-navigation { margin-top:2.5em }`),
originally reserved just for #p-personal to float in. Painting that same
box with a background gradient that stays transparent for that top
band and then switches to a surface colour for the tabs band creates a
real two-tier read -- "primary chrome" (personal tools/search, over the
page's own background) above "wiki authoring controls" (the tabs, on
their own distinct strip) below -- without touching #mw-head's own
position/width mechanics, which is the same fragile absolute-position
system the very first pass of this project had to debug carefully to
get the persistent sidebar working at all. Not worth re-risking that
for a background change. */
#mw-head {
background-image: linear-gradient(
to bottom,
transparent 0,
transparent 2.35em,
var( --edfm-surface-2 ) 2.35em,
var( --edfm-surface-2 ) 100%
);
border-bottom: 1px solid var( --edfm-border );
}
#mw-page-base {
background-color: var( --edfm-bg-deep );
background-image: none;
}
#mw-head-base {
background-color: var( --edfm-bg-deep );
/* Polish pass: thinned from 2px -- at 2px this competed visually with
the masthead's own orange marker/rule directly below it; a single
thinner accent line still reads as "site identity colour" without
the repetition. */
border-bottom: 1px solid var( --edfm-orange );
}
/* Personal tools (login/logout) and the search box are the "primary
chrome" tier -- pulled in by the same gutter used to centre the article,
so on wide screens they visually line up with the centred column
instead of hugging the browser edge, and given noticeably more visual
weight than the tabs below them. */
#p-personal {
right: calc( 0.75em + var( --edfm-gutter ) );
display: flex;
align-items: center;
gap: 0.75rem;
}
#p-personal ul {
display: flex;
align-items: center;
gap: 0.55rem;
}
#p-personal li {
margin-left: 0;
}
#p-personal a {
color: var( --edfm-text-muted );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.3em 0.2em;
}
#p-personal a:hover {
color: var( --edfm-orange );
}
/* Echo's alert/notification icons (bell/tray) in the personal toolbar are
rendered as `.vector-icon` mask-image spans coloured via `background-color`
(Vector's Icon.less / Codex's css-icon mixin), defaulting to `@color-base`
-- a dark, near-black fill with no override here, so it disappeared
against this toolbar's dark background. Vector already has a "progressive"
variant of this exact mechanism for a couple of its own icons
(`.vector-icon[class*='-progressive']`, coloured via `@color-progressive`,
which this stylesheet maps to orange); match that same treatment here
rather than the unrelated OOUI-icon invert fix below, since these are
interactive header controls like the search button, not general body
icons. The unread-count badge itself already colours correctly on its own
(Echo maps it to `@background-color-destructive` / `-progressive`, both
redefined to EDFM's palette), so only the icon glyph needs this. */
#pt-notifications-alert .vector-icon,
#pt-notifications-notice .vector-icon,
#pt-notifications .vector-icon {
background-color: var( --edfm-orange );
}
.edfm-topbar-clocks {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
line-height: 1;
white-space: nowrap;
}
.edfm-topbar-clock {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.55em;
background: rgba( 66, 199, 217, 0.08 );
border: 1px solid var( --edfm-border-soft );
border-left: 2px solid var( --edfm-cyan );
color: var( --edfm-text );
}
.edfm-topbar-clock-label {
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edfm-topbar-clock time {
color: var( --edfm-cyan );
font-weight: 700;
}
.edfm-topbar-clock-local {
background: rgba( 255, 138, 0, 0.06 );
border-left-color: var( --edfm-orange );
}
.edfm-topbar-clock-local time {
color: var( --edfm-orange-bright );
}
#right-navigation {
margin-right: var( --edfm-gutter );
}
#left-navigation {
margin-left: var( --edfm-sidebar-clear );
}
/* Polish pass: core caps this at `width:20vw; max-width:20em`, which read
as cramped next to the rest of the (now larger-scale) interface --
given more room on desktop, still capped so it can't dominate the bar. */
.vector-search-box-inner {
width: 22vw;
max-width: 24em;
}
.vector-search-box-inner input,
#searchInput {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
border: 1px solid var( --edfm-border );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.5em 0.7em;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#searchInput:focus {
border-color: var( --edfm-cyan );
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.22 );
outline: none;
}
#searchInput::placeholder {
color: var( --edfm-text-dim );
}
/* Search submit control: neither rendering path gives this any color of
its own, so on our dark input background it was effectively invisible.
The no-JS legacy form's <button> is a plain black icon at 0.67 opacity
(core skins.vector.styles.legacy/components/SearchBox.less); the
JS/Vue-Codex widget (.vector-search-box-vue) has no separate button at
all, just a start icon inside the input using the same technique
(mask-image recoloured via `background-color`, see Codex's
CdxSearchInput.css). Recolour both to match the site's orange
progressive-action colour used everywhere else. */
.vector-search-box-vue .cdx-text-input__start-icon {
background-color: var( --edfm-orange );
opacity: 1;
}
.searchButton[ name='go' ] {
background-image: none;
background-color: var( --edfm-orange );
opacity: 0.85;
-webkit-mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
}
.searchButton[ name='go' ]:hover,
.searchButton[ name='go' ]:focus {
background-color: var( --edfm-orange-bright );
opacity: 1;
}
/* 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.

These are the "wiki authoring controls" utility tier -- deliberately
smaller (--edfm-fs-utility) and quieter than personal-tools/search
above them, sitting on their own background strip (see #mw-head above).
Selected state stays orange (it's still real navigation, just
secondary); unselected rests dim so the *selected* tab is the one that
reads clearly. */
.vector-menu-tabs-legacy li {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs-legacy li.selected {
background-image: none;
background-color: var( --edfm-surface-1 );
/* Polish pass: a small underline makes the selected tab unambiguous at
a glance instead of relying on the text colour change alone. */
box-shadow: inset 0 -2px 0 var( --edfm-orange );
}
.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 );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 700;
}
.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. */
.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;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var( --edfm-fs-utility );
font-weight: 700;
}
.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-3 );
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 );
font-size: var( --edfm-fs-sidebar );
}
.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-4 );
}

/* Front-page chrome: the hero already names the site, so suppress the
generated MediaWiki page title only on the Main Page. Keep the namespace
tab label and all other article titles intact. */
body.page-Main_Page #firstHeading {
display: none;
}
body.page-Main_Page .mw-body-content {
margin-top: 0;
}

/* ==========================================================================
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 );
}
.mw-body {
border-right: 1px solid var( --edfm-border );
}
#content {
background-color: var( --edfm-surface-1 );
}

/* Site notice chrome. The global disclaimer was moved to its dedicated
legal/disclaimer page, so an empty #siteNotice must not leave behind a
phantom divider at the top of the article surface. */
#siteNotice:empty {
display: none;
}
#siteNotice:not( :empty ) {
font-size: var( --edfm-fs-meta );
line-height: 1.5;
color: var( --edfm-text-dim );
font-style: normal;
padding-bottom: 0.7em;
margin-bottom: 1.4rem;
border-bottom: 1px solid var( --edfm-border-soft );
}
#siteNotice:not( :empty ) em, #siteNotice:not( :empty ) i {
color: var( --edfm-text-muted );
font-style: italic;
}
#siteNotice:not( :empty ) a {
color: var( --edfm-link-external );
}
#siteNotice a:hover {
color: var( --edfm-link-external-hover );
}

/* ==========================================================================
HOME PAGE DASHBOARD
========================================================================== */
.edfm-home-hero {
margin: 0.9rem 0 1.6rem;
padding: 1.35rem 1.55rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.16 ), transparent 34% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.14 ), transparent 42% ),
var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 4px solid var( --edfm-cyan );
clip-path: polygon( 0 0, calc( 100% - 12px ) 0, 100% 12px, 100% 100%, 0 100% );
}
.edfm-home-hero-kicker,
.edfm-home-card-kicker {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.edfm-home-hero-title {
margin-top: 0.25rem;
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: clamp( 1.55rem, 1.1rem + 1.5vw, 2.2rem );
font-weight: 800;
line-height: 1.15;
}
.edfm-home-hero-text {
max-width: none;
margin-top: 0.55rem;
color: var( --edfm-text-muted );
font-size: 1.05rem;
line-height: 1.55;
}
.edfm-home-grid {
display: grid;
gap: 1rem;
margin: 1.2rem 0 2rem;
}
.edfm-home-grid-four {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.edfm-home-grid-topics {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-grid-two {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-card {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
padding: 1rem 1.1rem;
box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.2 );
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-home-card:hover {
transform: translateY( -2px );
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-orange );
}
.edfm-home-card-primary {
border-left-color: var( --edfm-orange );
}
.edfm-home-card-warning {
border-left-color: var( --edfm-text-dim );
}
.edfm-home-card-title,
.edfm-home-card-title a {
margin-top: 0.35rem;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.edfm-home-card-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-home-card-text,
.edfm-home-link-list {
margin-top: 0.65rem;
color: var( --edfm-text-muted );
line-height: 1.6;
}
.edfm-home-link-list a {
font-weight: 600;
}
@media ( max-width: 1100px ) {
.edfm-home-grid-four {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( max-width: 760px ) {
.edfm-home-grid-four,
.edfm-home-grid-topics,
.edfm-home-grid-two {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
HOME PAGE NEWS MODULE
========================================================================== */
.edfm-home-news {
margin: 1.8rem 0 2.2rem;
}
.edfm-news-feature-grid {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 1rem;
margin-bottom: 1rem;
}
.edfm-news-card,
.edfm-news-list {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
box-shadow: 0 14px 26px rgba( 0, 0, 0, 0.22 );
overflow: hidden;
}
.edfm-news-card {
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-news-card:hover {
transform: translateY( -2px );
border-color: rgba( 255, 138, 0, 0.48 );
background: var( --edfm-surface-3 );
}
.edfm-news-card-art {
display: flex;
align-items: flex-end;
min-height: 7rem;
padding: 0.8rem 1rem;
box-sizing: border-box;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.28 ), transparent 42% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.2 ), transparent 48% ),
linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-1 ) );
border-bottom: 1px solid var( --edfm-border );
color: rgba( 237, 240, 242, 0.72 );
font-family: var( --edfm-mono );
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.edfm-news-card-primary .edfm-news-card-art {
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.38 ), transparent 46% ),
linear-gradient( 315deg, rgba( 79, 159, 232, 0.26 ), transparent 52% ),
var( --edfm-surface-4 );
}
.edfm-news-card-body {
padding: 1rem 1.15rem 1.15rem;
}
.edfm-news-meta {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.edfm-news-title,
.edfm-news-title a {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.edfm-news-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-news-summary {
color: var( --edfm-text-muted );
line-height: 1.55;
margin-top: 0.65rem;
}
.edfm-news-list {
padding: 1.1rem 1.25rem 1.2rem;
border-left: 4px solid var( --edfm-orange );
}
.edfm-news-list-heading {
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.edfm-news-list ul {
margin: 0;
}
.edfm-news-list li {
margin-bottom: 0.55rem;
color: var( --edfm-text-muted );
}
.edfm-news-more {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px solid var( --edfm-border-soft );
text-align: right;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
@media ( max-width: 900px ) {
.edfm-news-feature-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
10. JUMP NAVIGATION (table of contents)
========================================================================== */
/* A compact navigation strip/tile-grid rather than a traditional TOC box
of small text links -- real MediaWiki anchors/markup untouched, this is
all presentation. "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 {
display: block;
width: 100%;
box-sizing: border-box;
background: none;
border: none;
color: var( --edfm-text );
padding: 0;
margin: 1.8rem 0;
}
.toctitle {
position: relative;
margin-bottom: 0.7em;
}
.toctitle::before {
content: 'Jump to';
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-orange );
}
/* Core ships `.toc h2 { font-size: 100%; ... }` (mediawiki.skinning/toc/
screen.less) at the exact same specificity (one class + one tag) as a
plain `.toctitle h2` rule -- same "tie that doesn't resolve the way
naive source order would suggest" gotcha documented elsewhere in this
file. #toc's own ID makes this one unambiguous instead of relying on
cascade order. */
#toc .toctitle h2,
.toc .toctitle h2 {
font-size: 0 !important;
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 );
}
/* Desktop: a balanced multi-column jump list. CSS grid flows row-first,
which makes numbered sections read 1, 2, 3, 4 across the first row. For a
reference/walkthrough TOC, scan order is clearer when each column reads
downward first: 1/2/3, then 4/5/6, then 7/8/9. CSS columns preserve the
real DOM/source order while presenting that column-major layout on every
page that uses the stock MediaWiki TOC. */
.toc > ul {
display: block;
column-count: 3;
column-gap: 0.45rem;
list-style: none;
margin: 0;
padding: 0;
}
.toc > ul > li {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 0.45rem;
}
.toc li {
margin-top: 0;
}
/* 2026-08-08 density pass: reverted to side-by-side number/label (from the
earlier "stacked number-above-label" polish pass) specifically to cut
per-tile height -- with 12 sections on articles like The Dweller, the
stacked layout meant the jump nav alone filled most of the first
viewport. Row layout plus tighter padding/font-size gets noticeably
more sections above the fold without dropping the numbering or shrinking
tap targets below a comfortable size -- see the dedicated mobile padding
bump further down for keeping touch targets safe on small screens
specifically. Whole tile stays one real <a>, so it's still a single
click/focus target and keyboard tab stop either way. */
.toc a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
height: 100%;
box-sizing: border-box;
padding: 0.5em 0.75em 0.5em 0.7em;
background: var( --edfm-surface-3 );
/* Left accent rail: matches the orange section numbers and gives each
jump tile a stronger EDFM navigation affordance without boxing the
entire card. */
border-left: 4px solid var( --edfm-orange );
box-shadow: inset 1px 0 0 rgba( 255, 162, 26, 0.35 );
color: var( --edfm-text-muted );
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.toc a:hover {
background: var( --edfm-surface-4 );
border-left-color: var( --edfm-cyan );
box-shadow: inset 1px 0 0 rgba( 66, 199, 217, 0.45 );
color: var( --edfm-text );
transform: translateY( -1px );
}
/* Nested sub-levels (rare on this site so far) drop back to a plain
indented block list inside their parent tile's grid cell rather than
trying to stay gridded themselves. */
.toc ul ul {
grid-column: unset;
list-style: none;
margin: 0.3em 0 0 1.2em;
padding: 0;
display: block;
}
.toc ul ul a {
flex-direction: row;
align-items: center;
background: none;
border-left-width: 1px;
padding: 0.3em 0.6em;
}
.toc ul ul .tocnumber {
font-size: 0.85em;
}
.toc ul ul .toctext {
font-size: 0.85em;
}
.tocnumber {
color: var( --edfm-orange );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: 1.05rem;
line-height: 1;
}
.toctext {
color: inherit;
font-size: 0.85rem;
line-height: 1.3;
}
/* Column count changes only at readable/touch-friendly breakpoints. Keep
column-major ordering at 3 and 2 columns; mobile becomes the natural single
source-order list. */
@media ( max-width: 860px ) {
.toc > ul {
column-count: 2;
}
}
@media ( max-width: 560px ) {
.toc > ul {
column-count: 1;
}
/* Single-column tiles are already full-width here, so there's no
density pressure left -- restore closer to the pre-2026-08-08
padding instead of the tighter desktop value, keeping tap targets
comfortable rather than compacting mobile just because desktop
compacted. */
.toc a {
padding: 0.7em 0.95em;
}
}

/* ==========================================================================
5b. FULL-WIDTH ARTICLE FLOW OVERRIDES
========================================================================== */
/* 2026-08-10 audit: EDFM pages should not leave half the article rail empty.
Earlier readability caps on paragraphs/hero copy made long-form sections
look like narrow blocks while tables, TOCs, and navigation tiles spanned
the page. Keep the main rail full-width everywhere; individual components
may still opt into their own internal grids, but ordinary article copy and
common block containers should stretch to the content edge. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > div:not( .thumb ):not( .tright ):not( .tleft ):not( .floatright ):not( .floatleft ):not( .edfm-status ):not( .edfm-panel ):not( .edfm-box ) {
max-width: none;
box-sizing: border-box;
}
/* Final guard against stale/skin rules recapping article prose while leaving
compact maintenance/status panels free to keep their intentional centred width. */
.mw-body .mw-parser-output > p,
.mw-parser-output > p {
max-width: none !important;
width: 100%;
box-sizing: border-box;
}

/* ==========================================================================
6. PANELS / CALLOUTS, and 11. ARTICLE METADATA / STATUS MODULE
========================================================================== */
/* Deliberately NOT defined here. .edfm-box / .edfm-panel* / .edfm-status* /
.edfm-inline-flag / .edfm-related* are used exclusively by the
editorial templates (see Template:Article status, Template:Draft
warning, Template:Related articles, 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 );
font-size: var( --edfm-fs-body );
}
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: var( --edfm-fs-meta );
text-align: left;
padding: 0.6em 0.8em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
/* 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 );
}

/* ==========================================================================
15. FOOTER
========================================================================== */
/* A real branded footer: a small wordmark line (pure CSS generated
content -- decorative branding only, redundant with the sidebar logo
already visible, so nothing load-bearing depends on it being
selectable), a top rule with more separation from the article above it,
and MediaWiki's real info/places/icon links laid out on a clean grid
with the badges aligned as a group rather than floating alone. */
.mw-footer {
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
margin-top: 2.5rem;
padding-top: 1.6rem;
border-top: 1px solid var( --edfm-border );
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "brand brand" "info icons" "places icons";
align-items: center;
column-gap: 2em;
row-gap: 0.4rem;
}
.mw-footer::before {
grid-area: brand;
content: 'EDFM // Elite Dangerous Field Manual';
font-family: var( --edfm-mono );
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var( --edfm-text-muted );
margin-bottom: 0.5rem;
}
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
color: var( --edfm-text-dim );
border-color: var( --edfm-border-soft );
font-size: var( --edfm-fs-meta );
}
#footer-info {
grid-area: info;
margin: 0;
line-height: 1.6;
}
#footer-places {
grid-area: places;
margin: 0;
}
/* Same "small uppercase label" treatment used for tags/meta text
elsewhere, so these read as deliberate EDFM navigation rather than
default MediaWiki footer links. */
#footer-places li {
display: inline-block;
margin-right: 1.4em;
}
#footer-places a {
font-family: var( --edfm-mono );
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.78rem;
}
/* A left rule ties the badges to the rest of the footer instead of
letting them read as detached/floating in their own space. */
#footer-icons {
grid-area: icons;
align-self: center;
display: flex;
gap: 0.75em;
margin: 0;
padding-left: 1.6em;
border-left: 1px solid var( --edfm-border-soft );
}
#footer-icons img {
background: var( --edfm-text );
border-radius: 2px;
}
@media ( max-width: 640px ) {
.mw-footer {
grid-template-columns: 1fr;
grid-template-areas: "brand" "info" "places" "icons";
}
#footer-icons {
margin-top: 0.7em;
padding-left: 0;
border-left: none;
border-top: 1px solid var( --edfm-border-soft );
padding-top: 0.7em;
}
}

/* ==========================================================================
MISC MediaWiki UI chrome that ships with light backgrounds by default
========================================================================== */
.catlinks {
background: none !important;
border: none !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-meta );
padding: 0.9em 0 0 0 !important;
margin-top: 1.8rem !important;
}
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: 350px;
max-width: min( 350px, 42% );
margin: 0 0 1.25em 1.35em;
border: 1px solid var( --edfm-border );
border-top: 2px solid var( --edfm-orange );
background: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: 0.92rem;
}
.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.5em 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-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
border: 1px dashed var( --edfm-border );
background: var( --edfm-surface-1 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility );
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 0.5em;
}
/* Optional section label (Template:Infobox's |groupN=) splitting a long
infobox into scannable groups, e.g. Engineer infoboxes into "ENGINEER"
and "ACCESS" (2026-08-08, part of the Engineer article layout pass). A
shaded band with a bottom rule rather than a full boxed sub-header --
consistent with .edfm-infobox-row's own bottom-rule-only separator, not
a new visual language. */
.edfm-infobox-group {
background: var( --edfm-surface-3 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35em 0.7em;
border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-row {
display: flex;
border-bottom: 1px solid var( --edfm-border-soft );
padding: 0.45em 0.7em;
}
.edfm-infobox-row:last-child {
border-bottom: none;
}
.edfm-infobox-label {
font-weight: 700;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
width: 40%;
flex-shrink: 0;
color: var( --edfm-cyan );
}
.edfm-infobox-value {
width: 60%;
}
@media ( max-width: 640px ) {
.edfm-infobox {
float: none;
width: auto;
max-width: none;
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::before {
display: none;
}
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;
background-image: none;
background-color: var( --edfm-surface-2 );
}
#left-navigation,
#right-navigation {
float: none;
margin: 0 !important;
width: auto;
clear: both;
}
#left-navigation {
margin-top: 0 !important;
}
/* Core Vector legacy floats each tab/dropdown portlet
(.vector-menu-tabs-legacy for Page/Discussion and Read/View
source/View history, .vector-menu-dropdown for the More menu) AND
floats every <li> inside their <ul>, with no wrapping at all -- at
narrow widths the labels just overflow and overlap each other
(confirmed with a real screenshot: "View source" and "More"
overlapped instead of wrapping to a new line). Switching the
portlets to inline-block and their tab lists to flex-wrap lets them
reflow onto as many rows as needed instead. */
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-dropdown {
float: none;
display: inline-block;
vertical-align: top;
}
.vector-menu-tabs-legacy ul {
float: none;
display: flex;
flex-wrap: wrap;
}
.vector-menu-tabs-legacy li {
float: none;
}
#p-personal {
position: static;
text-align: right;
padding: 0.5em 1em;
margin: 0;
right: auto !important;
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;
background: var( --edfm-bg-deep );
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 !important;
margin-right: 0 !important;
max-width: none;
}
.mw-body {
margin-top: 0;
border-width: 0;
padding: 1em;
}
.edfm-status-details {
grid-template-columns: 1fr;
}
/* .toc > ul column count is NOT overridden here -- the dedicated
1150px/560px breakpoints above already cover every width down to
the smallest phones; duplicating a rule here previously fought
those (same specificity, this position in the cascade would have
won and wrongly forced 1 column as low as 561px). */
#firstHeading {
font-size: 1.6rem;
}
.mw-body h2 {
margin-top: 2.25rem;
}
.edfm-eyebrow {
padding-top: 0.9em;
}
}
/* ==========================================================================
16. OOUI DIALOGS -- VisualEditor's save dialog, and any other OOUI
dialog (delete/move/protect confirmations, special-page dialogs).
These render via OOUI's own bundled WikimediaUI theme stylesheet,
entirely outside the .edfm-* component system this file otherwise
covers, so without this they show up starkly white against the rest of
the dark-themed site regardless of any variable/token used elsewhere in
this file. !important is justified the same way as the h1-h6 fix above:
OOUI's own stylesheet loads with equal-or-higher effective specificity,
and this is a correctness/contrast fix, not decoration.
========================================================================== */
.oo-ui-window-frame {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-processDialog {
background: rgba( 7, 9, 11, 0.75 ) !important;
}
.oo-ui-processDialog-navigation,
.oo-ui-window-head,
.oo-ui-window-foot {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-processDialog-title,
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-inputWidget-input {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* VisualEditor's reference dialog embeds a mini target widget for the
reference body. The widget ships with a white WikimediaUI base surface,
so theme that inner editing box separately from the surrounding OOUI
dialog chrome. */
.ve-ui-mwReferenceDialog .ve-ui-targetWidget,
.ve-ui-mwReferenceDialog .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ),
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget,
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-surface,
.ve-ui-mwReferenceDialog .ve-ce-surface,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode,
.ve-ui-mwReferenceDialog .ve-ce-documentNode,
.ve-ui-mwReferenceDialog .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode p,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode li,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode span {
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-targetWidget-focused {
border-color: var( --edfm-cyan ) !important;
box-shadow: inset 0 0 0 1px rgba( 77, 199, 232, 0.42 ) !important;
}
.ve-ui-mwSaveDialog-options,
.oo-ui-panelLayout,
.oo-ui-window-body {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-popupWidget-popup {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-buttonElement:not( .oo-ui-flaggedElement-primary ) > .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
17. OOUI TOOLBAR -- VisualEditor's persistent editing toolbar and its
dropdown menus (Cite, Insert, paragraph style, etc.), and the equivalent
toolbar/popups used when editing a single section. Same root cause as
16. OOUI DIALOGS above (OOUI's own bundled theme, not touched by
anything else in this file), found separately because it's a different
set of OOUI classes (toolbar chrome, not dialog chrome). Icons are not
overridden here and don't need to be -- they're currentColor-based, so
they pick up the text colour set below automatically.
========================================================================== */
.oo-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-tool-title,
.oo-ui-tool-link,
.oo-ui-toolGroup-tools .oo-ui-optionWidget,
.oo-ui-menuOptionWidget,
.oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-optionWidget.oo-ui-optionWidget-selected,
.oo-ui-optionWidget:hover,
.oo-ui-tool:hover .oo-ui-tool-link {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
18. OOUI GENERIC MENUS -- .oo-ui-menuSelectWidget is OOUI's general
dropdown/autocomplete menu class (paragraph-style picker, citation-type
picker, link/media search suggestions, etc.) -- a different class from
the toolbar-specific popups in 17. above, confirmed separately via
computed-style inspection to default to the same white OOUI theme
background.
========================================================================== */
.oo-ui-menuSelectWidget {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-menuOptionWidget {
color: var( --edfm-text ) !important;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget:hover {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
19. OOUI ICONS -- the toolbar/menu icons themselves (Bold, link, list,
Cite, undo/redo, etc.) are rendered as background-image SVGs with a
colour baked into the SVG markup, not currentColor-based masks -- so
16-18 above (which only recolour backgrounds/text) left them dark and
low-contrast against the now-dark surfaces. OOUI ships its own fix for
exactly this, gated behind a narrow accessibility media query
(forced-colors + prefers-color-scheme: dark) that doesn't apply to this
site's own always-on dark theme -- reusing that exact technique
unconditionally rather than inventing a different one. `:not(
.oo-ui-image-invert )` is OOUI's own exclusion for icons already meant
to render light (e.g. on the orange primary-button background) --
inverting those too would flip them back to dark.
========================================================================== */
.oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* ==========================================================================
20. EDIT SOURCE FORM -- MediaWiki core + WikiEditor + CodeMirror

The source editor is not covered by the article/component selectors above:
`action=edit` loads core edit-form CSS, WikiEditor chrome, and sometimes
CodeMirror with their own light neutral surfaces. Force the same EDFM dark
surface stack here so the source page no longer flashes as a white island.
========================================================================== */
.mw-editform,
#editform,
#toolbar,
.editOptions,
.mw-editTools,
.mw-summary-preview,
.mw-datatable,
.wikiEditor-ui,
.wikiEditor-ui-view,
.wikiEditor-ui-text,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-top,
.wikiEditor-ui-controls,
.wikiEditor-ui-tabs,
.wikiEditor-ui-buttons,
.CodeMirror,
.CodeMirror-scroll {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-editform textarea,
#wpTextbox1,
#wpSummary,
#wpSummaryWidget input,
#editform input[type='text'],
#editform input[type='search'],
#editform textarea,
.wikiEditor-ui-text textarea,
.CodeMirror-code,
.CodeMirror-lines,
.CodeMirror pre {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
caret-color: var( --edfm-orange-bright );
}
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .page,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar .options,
.wikiEditor-ui-toolbar .booklet,
.wikiEditor-ui-toolbar .pages,
.CodeMirror-gutters {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text-muted ) !important;
border-color: var( --edfm-border ) !important;
}
.wikiEditor-ui-toolbar a,
.wikiEditor-ui-toolbar .label,
.wikiEditor-ui-toolbar .tab a,
.mw-editTools a,
.editOptions label,
.mw-editform label,
.CodeMirror-linenumber {
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab a:hover,
.wikiEditor-ui-toolbar .tool-button:hover,
.wikiEditor-ui-toolbar .tool-select:hover,
.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-table td,
.CodeMirror-activeline-background {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab.current a,
.wikiEditor-ui-toolbar .section-main,
.CodeMirror-selected {
background: var( --edfm-surface-4 ) !important;
}
.CodeMirror-cursor {
border-left-color: var( --edfm-orange-bright ) !important;
}
.CodeMirror-matchingbracket {
color: var( --edfm-orange-bright ) !important;
}

/* ==========================================================================
21. FILE PAGE CHROME -- #filetoc (the File / File history / File usage /
Metadata nav on File: description pages) is defined in MediaWiki core's
mediawiki.action.view.filepage.less, entirely separate from both the
.edfm-* system and the OOUI fixes in 16-19 above -- a different
subsystem again, only loaded on File: pages, which is why it was never
touched by anything else in this file. Link colour inside it already
correctly inherits the site's normal link blue; only the light neutral
background/border needed overriding.
========================================================================== */
#filetoc {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
22. FILE PAGE: METADATA TABLE + MEDIA VIEWER BUTTON -- #mw_metadata is
the EXIF-style metadata table (separate from the File history table
above -- that one already carries the .wikitable class and picked up
dark styling from 7. TABLES automatically; this one doesn't have that
class, so it never matched). The "Open in Media Viewer" button is a
Codex component (MultimediaViewer extension) -- a third distinct
styling subsystem from OOUI and MediaWiki core skinning, again never
touched by anything else in this file.
========================================================================== */
#mw_metadata th,
#mw_metadata td {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-mmv-view-expanded.cdx-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Core MediaWiki/action buttons: match EDFM dark theme instead of default white/orange controls. */
.mw-ui-button,
.mw-htmlform-submit,
.mw-htmlform-ooui-wrapper button,
#mw-patrol-form button,
#mw-patrol-form input[type="submit"],
form.mw-htmlform button,
form.mw-htmlform input[type="submit"],
input[type="submit"].mw-ui-button,
button.mw-ui-button,
.cdx-button:not( .cdx-button--fake-button--enabled ) {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border: 1px solid var( --edfm-border-strong, var( --edfm-border ) ) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var( --edfm-mono ) !important;
font-weight: 800 !important;
text-shadow: none !important;
}
.mw-ui-button:hover,
.mw-htmlform-submit:hover,
.mw-htmlform-ooui-wrapper button:hover,
#mw-patrol-form button:hover,
#mw-patrol-form input[type="submit"]:hover,
form.mw-htmlform button:hover,
form.mw-htmlform input[type="submit"]:hover,
input[type="submit"].mw-ui-button:hover,
button.mw-ui-button:hover,
.cdx-button:not( .cdx-button--fake-button--enabled ):hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-orange-bright ) !important;
border-color: var( --edfm-orange ) !important;
}
.mw-ui-button:focus,
.mw-htmlform-submit:focus,
.mw-htmlform-ooui-wrapper button:focus,
#mw-patrol-form button:focus,
#mw-patrol-form input[type="submit"]:focus,
form.mw-htmlform button:focus,
form.mw-htmlform input[type="submit"]:focus,
input[type="submit"].mw-ui-button:focus,
button.mw-ui-button:focus,
.cdx-button:not( .cdx-button--fake-button--enabled ):focus {
outline: 2px solid var( --edfm-cyan ) !important;
outline-offset: 2px !important;
}

/* Patrol action: remove the cramped review button from the public article chrome. */
#mw-patrol-form {
display: none !important;
}

/* Frontier news: after removing the repeated dispatch list, keep attribution compact. */
.edfm-news-attribution-compact {
margin-top: 0.35rem;
padding-top: 0.6rem;
}

/* ===========================================================================
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL
=========================================================================== */
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar,
large touch targets, off-canvas navigation, search-forward layout, and
single-column readable article flow -- while preserving EDFM's dark field
manual identity and not copying RuneScape.wiki assets/CSS.
The close button is injected into #mw-panel by Common.js, so it must be
explicitly hidden by default; otherwise a tiny native white button appears
in the desktop sidebar's top-left corner. */
.edfm-mobile-appbar,
.edfm-mobile-scrim,
.edfm-mobile-close-button {
display: none;
}
@media ( max-width: 800px ) {
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var( --edfm-bg-page );
overflow-x: hidden;
}
body.edfm-mobile-menu-open {
overflow: hidden;
}
.edfm-mobile-appbar {
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
position: sticky;
top: 0;
z-index: 1200;
min-height: 56px;
padding: 0 0.35rem;
background:
linear-gradient( 90deg, rgba( 255, 138, 0, 0.18 ), transparent 38% ),
var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.35 );
}
.edfm-mobile-brand {
min-width: 0;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.edfm-mobile-brand::before {
content: 'EDFM // ';
color: var( --edfm-orange );
}
.edfm-mobile-menu-button,
.edfm-mobile-search-button,
.edfm-mobile-close-button {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var( --edfm-text );
font: 700 1.5rem/1 var( --edfm-mono );
cursor: pointer;
}
.edfm-mobile-menu-button:focus-visible,
.edfm-mobile-search-button:focus-visible,
.edfm-mobile-close-button:focus-visible {
outline: 2px solid var( --edfm-cyan );
outline-offset: -4px;
}
.edfm-mobile-menu-button::before {
content: '☰';
color: var( --edfm-orange );
}
.edfm-mobile-search-button::before {
content: '⌕';
font-size: 1.85rem;
color: var( --edfm-cyan );
}
.edfm-mobile-close-button::before {
content: '×';
color: var( --edfm-text );
}
.edfm-mobile-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba( 0, 0, 0, 0.58 );
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
body.edfm-mobile-menu-open .edfm-mobile-scrim {
opacity: 1;
pointer-events: auto;
}
#mw-navigation {
background: var( --edfm-surface-2 );
box-shadow: none;
}
#mw-head {
position: relative;
z-index: 1100;
border-bottom: 1px solid var( --edfm-border );
}
#mw-head .vector-search-box {
display: none;
margin: 0;
padding: 0.65rem;
background: var( --edfm-surface-2 );
border-top: 1px solid var( --edfm-border-soft );
}
body.edfm-mobile-search-open #mw-head .vector-search-box {
display: block;
}
#mw-head .vector-search-box-inner,
#mw-head #searchform {
width: 100%;
}
#mw-head #searchInput {
min-height: 44px;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
#left-navigation,
#right-navigation {
padding: 0 0.45rem 0.35rem;
background: var( --edfm-surface-2 );
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.vector-menu-tabs-legacy ul {
flex-wrap: nowrap;
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-dropdown .vector-menu-heading {
min-height: 36px;
display: inline-flex;
align-items: center;
}
#p-personal {
display: none;
}
#mw-panel {
position: fixed;
top: 0;
left: 0;
z-index: 1300;
width: min( 82vw, 22rem );
height: 100dvh;
box-sizing: border-box;
padding: 0;
background: var( --edfm-surface-1 );
border: 0;
border-right: 1px solid var( --edfm-border );
box-shadow: 18px 0 36px rgba( 0, 0, 0, 0.45 );
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX( -105% );
transition: transform 0.2s ease;
}
body.edfm-mobile-menu-open #mw-panel {
transform: translateX( 0 );
}
#mw-panel::before {
content: 'EDFM Navigation';
display: block;
position: sticky;
top: 0;
z-index: 1;
padding: 1rem 3.4rem 1rem 1rem;
background: var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
color: var( --edfm-orange );
font: 800 0.86rem/1.2 var( --edfm-mono );
letter-spacing: 0.08em;
text-transform: uppercase;
}
#mw-panel .edfm-mobile-close-button {
position: absolute;
top: 0.3rem;
right: 0.35rem;
z-index: 2;
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin: 0;
padding: 0.75rem 0;
border-bottom: 1px solid var( --edfm-border-soft );
}
#mw-panel .vector-menu-heading {
margin: 0.25rem 1rem 0.45rem;
}
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
display: flex;
align-items: center;
min-height: 46px;
box-sizing: border-box;
padding: 0.55rem 1rem;
border-left: 3px solid transparent;
color: var( --edfm-text-muted );
font-size: 1rem;
text-decoration: none;
}
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-content-list li a:focus {
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-cyan );
color: var( --edfm-text );
}
#mw-panel .edfm-nav-current > a,
#mw-panel .edfm-nav-current > a:visited {
background: rgba( 255, 138, 0, 0.12 );
border-left-color: var( --edfm-orange );
color: var( --edfm-orange ) !important;
}
.mw-body {
padding: clamp( 1rem, 4vw, 1.35rem );
font-size: 1rem;
line-height: 1.68;
}
#siteNotice {
margin-bottom: 1rem;
padding-bottom: 0.85rem;
}
#firstHeading {
font-size: clamp( 1.65rem, 8vw, 2.25rem );
line-height: 1.1;
letter-spacing: -0.015em;
}
.mw-body h2 {
font-size: 1.18rem;
line-height: 1.25;
}
.mw-body p,
.mw-body li {
max-width: none;
}
.mw-body img,
.mw-body .thumb,
.mw-body .thumbinner,
.mw-body .thumbimage {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
.mw-body .thumb,
.mw-body .tright,
.mw-body .tleft {
float: none !important;
clear: both;
width: auto !important;
margin: 1rem 0 !important;
}
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.mw-parser-output > table.wikitable th,
.mw-parser-output > table.wikitable td,
.mw-parser-output > table.mw-datatable th,
.mw-parser-output > table.mw-datatable td {
white-space: normal;
min-width: 8rem;
}
.edfm-infobox {
font-size: 0.95rem;
}
.edfm-infobox-row {
display: grid;
grid-template-columns: minmax( 7.5rem, 40% ) 1fr;
gap: 0.5rem;
padding: 0.65rem 0.8rem;
}
.edfm-infobox-label,
.edfm-infobox-value {
width: auto;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tbody,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tr,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type {
overflow: visible;
white-space: normal;
background: transparent;
border: 0;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th {
margin-top: 0.75rem;
border-left: 3px solid var( --edfm-orange );
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
margin-bottom: 0.75rem;
background: var( --edfm-surface-2 );
border-left: 3px solid var( --edfm-border );
}
.mw-footer {
padding: 1rem;
margin-top: 1.5rem;
}
}
@media ( max-width: 430px ) {
.edfm-mobile-brand::before {
content: 'EDFM';
margin-right: 0.45rem;
}
.edfm-mobile-brand {
font-size: 0.88rem;
}
.edfm-infobox-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}

/* 22a. Mobile action tabs refinement: keep Vector's page/discussion/read/
source/history controls available, but put them on one compact horizontal
action rail so the first phone viewport feels like a real mobile app shell
instead of two stacked desktop tab bars. */
@media ( max-width: 800px ) {
body:not( .edfm-mobile-search-open ) #mw-head {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
body:not( .edfm-mobile-search-open ) #left-navigation,
body:not( .edfm-mobile-search-open ) #right-navigation {
flex: 0 0 auto;
clear: none !important;
float: none !important;
width: auto;
padding: 0 0.25rem;
margin: 0 !important;
border-right: 1px solid var( --edfm-border-soft );
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown {
float: none !important;
display: inline-block;
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a,
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a:visited,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown .vector-menu-heading {
min-height: 40px;
padding-left: 0.55rem;
padding-right: 0.55rem;
font-size: 0.68rem;
}
body.edfm-mobile-search-open #mw-head {
display: block;
}
}

/* ===========================================================================
24. HARD OVERRIDE: JUMP TILE LEFT RAIL

The earlier border-left rail can be swallowed by ResourceLoader/cascade or
visually read as part of the tile edge. Draw the rail as a high-specificity
gradient on the actual top-level TOC anchors so it is unmistakable on the
live jump grid.
=========================================================================== */
#toc.toc > ul > li > a,
.mw-parser-output #toc > ul > li > a,
.mw-parser-output .toc > ul > li > a {
background-image: linear-gradient( 90deg, var( --edfm-orange ) 0, var( --edfm-orange ) 6px, transparent 6px ) !important;
border-left: 0 !important;
padding-left: 1rem !important;
}
#toc.toc > ul > li > a:hover,
#toc.toc > ul > li > a:focus-visible,
.mw-parser-output #toc > ul > li > a:hover,
.mw-parser-output #toc > ul > li > a:focus-visible,
.mw-parser-output .toc > ul > li > a:hover,
.mw-parser-output .toc > ul > li > a:focus-visible {
background-image: linear-gradient( 90deg, var( --edfm-cyan ) 0, var( --edfm-cyan ) 6px, transparent 6px ) !important;
}

/* ===========================================================================
25. SOURCE EDIT CONFLICT / WIKITEXT DIFF THEME

Source-edit conflict review uses MediaWiki's diff table classes, not the
normal edit textarea/WikiEditor chrome. Without this, unchanged rows and
inline change pills fall back to stark white/yellow/blue defaults. Keep the
old/new meaning, but render it in EDFM's dark surfaces with restrained
orange/cyan accents.
=========================================================================== */
.mw-parser-output table.diff,
table.diff,
.diff {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-collapse: separate !important;
border-spacing: 0 0.12rem !important;
}
.diff-title,
.diff-otitle,
.diff-ntitle,
#mw-diff-otitle1,
#mw-diff-ntitle1 {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
}
td.diff-lineno,
.diff-lineno {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
border: 0 !important;
padding: 0.35rem 0.5rem !important;
}
td.diff-marker,
.diff-marker {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
padding: 0.25rem 0.45rem !important;
text-align: center;
}
td.diff-context,
td.diff-addedline,
td.diff-deletedline,
.diff-context,
.diff-addedline,
.diff-deletedline,
.mw-diff-inline-context,
.mw-diff-inline-added,
.mw-diff-inline-deleted,
.mw-diff-inline-changed,
.mw-diff-inline-moved {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
font-family: var( --edfm-mono );
box-shadow: none !important;
}
td.diff-context:empty,
td.diff-addedline:empty,
td.diff-deletedline:empty,
.diff-context:empty,
.diff-addedline:empty,
.diff-deletedline:empty {
/* Empty diff cells are alignment placeholders. Keep their card boundary so
the two-column source-conflict diff does not look broken, but make them
compact and neutral instead of tall blank blocks. */
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none !important;
min-height: 0;
padding-top: 0.08rem !important;
padding-bottom: 0.08rem !important;
}
td.diff-deletedline,
.diff-deletedline,
.mw-diff-inline-deleted {
background: rgba( 255, 138, 0, 0.08 ) !important;
border-color: rgba( 255, 138, 0, 0.6 ) !important;
border-left-color: var( --edfm-orange ) !important;
}
td.diff-addedline,
.diff-addedline,
.mw-diff-inline-added {
background: rgba( 66, 199, 217, 0.08 ) !important;
border-color: rgba( 66, 199, 217, 0.6 ) !important;
border-left-color: var( --edfm-cyan ) !important;
}
.diffchange,
.diff-addedline .diffchange,
.diff-deletedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
border-radius: 3px !important;
padding: 0.08rem 0.22rem !important;
font-weight: 700;
text-decoration: none !important;
color: var( --edfm-bg-deep ) !important;
}
.diff-deletedline .diffchange,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
background: var( --edfm-orange-bright ) !important;
}
.diff-addedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins {
background: var( --edfm-cyan ) !important;
}
.mw-explainconflict,
#wpTextbox2,
textarea#wpTextbox2,
textarea.mw-textarea-oldrev {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Engineer directory portrait chips -- intentionally quiet so table rows still
read like data rows, not card/list hybrids. */
.edfm-engineer-entry {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: max-content;
}
.edfm-engineer-entry .mw-file-element {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var( --edfm-border );
background: var( --edfm-surface-0 );
box-shadow: none;
}
.edfm-engineer-entry__name {
line-height: 1.2;
}

/* Frontier official news feed image treatment */
.edfm-frontier-news .edfm-news-card-art-image {
display: block;
position: relative;
padding: 0;
/* Keep all news thumbnails uniform, including the first/primary story. */
height: 9.5rem;
min-height: 9.5rem;
aspect-ratio: 16 / 9;
background: var( --edfm-surface-4 );
overflow: hidden;
}
.edfm-frontier-news .edfm-news-card-primary .edfm-news-card-art-image {
height: 9.5rem;
min-height: 9.5rem;
}
.edfm-frontier-news .edfm-news-card-art-image > span,
.edfm-frontier-news .edfm-news-card-art-image .mw-default-size,
.edfm-frontier-news .edfm-news-card-art-image .mw-file-description {
display: block !important;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.edfm-frontier-news .edfm-news-card-art-image .mw-file-element {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transition: transform 0.2s ease, filter 0.2s ease;
}
.edfm-frontier-news .edfm-news-card:hover .edfm-news-card-art-image .mw-file-element {
filter: brightness( 1.08 ) contrast( 1.05 );
transform: scale( 1.035 );
}
.edfm-frontier-news .edfm-news-source-badge {
display: inline-flex !important;
align-items: center;
position: absolute !important;
left: 0.8rem !important;
right: auto !important;
bottom: 0.75rem !important;
z-index: 2;
max-width: calc( 100% - 1.6rem );
padding: 0.25rem 0.55rem;
background: rgba( 10, 13, 17, 0.82 );
border: 1px solid rgba( 255, 138, 0, 0.48 );
box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.34 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}

.edfm-news-attribution {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var( --edfm-border-soft );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
line-height: 1.45;
}

/* Patrol action: hide MediaWiki generated patrol footer/link from article chrome. */
.patrollink,
.patrollink[data-mw-interface],
.patrollink .cdx-button,
#mw-content-text + .patrollink,
.mw-parser-output + .patrollink {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* ===========================================================================
2026-08-10 PROSE RAIL SLEDGEHAMMER
=========================================================================== */
/* Plain article prose on EDFM is supposed to occupy the article rail. Keep this
deliberately simple and selector-separated: no comma-list dependency on
advanced :not() parsing, no TemplateStyles scoping, and both physical and
logical width properties so later/readability rules cannot re-cap lines. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > p,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ul,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ol,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > dl {
display: block !important;
width: 100% !important;
max-width: none !important;
inline-size: 100% !important;
max-inline-size: none !important;
box-sizing: border-box !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output p {
max-width: none !important;
max-inline-size: none !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output li,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output dd {
max-width: none !important;
max-inline-size: none !important;
}
/* Restore the intentional compact maintenance notice after the broad prose
override above. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-draft,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-draft {
width: auto !important;
max-width: 44rem !important;
inline-size: auto !important;
max-inline-size: 44rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
EDFM login/register auth surface template alignment
========================================================================== */
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm {
color: var( --edfm-text );
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-label__label__text {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.015em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-Userlogin #userloginForm input[type='text'],
body.mediawiki.mw-special-Userlogin #userloginForm input[type='password'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='text'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='password'] {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 );
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input::placeholder,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-help,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-password-help {
color: var( --edfm-text-muted ) !important;
font-size: 0.88rem;
line-height: 1.45;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
margin-top: 0.85rem;
padding: 0.9rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.12 ), transparent 34% ),
var( --edfm-surface-1 );
border: 1px solid rgba( 255, 138, 0, 0.42 );
border-left: 3px solid var( --edfm-orange );
box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 850;
letter-spacing: 0.04em;
line-height: 1.35;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 0;
margin: 0;
padding: 0.55rem 0.8rem;
background: rgba( 255, 138, 0, 0.1 ) !important;
border: 1px solid var( --edfm-orange ) !important;
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.035 );
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.045em;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:hover,
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:focus-visible {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange-bright ) !important;
color: #10171b !important;
text-decoration: none !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin-top: 0.2rem;
padding: 1.15rem 1.25rem;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.08 ), transparent 38% ),
var( --edfm-surface-1 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-heading {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-size: 1.35rem;
font-weight: 800;
line-height: 1.25;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list {
margin-top: 1rem;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::before {
filter: none !important;
opacity: 0.78 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 1.75rem;
font-weight: 850;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {
color: var( --edfm-text-muted ) !important;
font-size: 0.9rem;
line-height: 1.35;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text {
display: none !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit {
background: var( --edfm-surface-3 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
border-radius: 0 !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 850;
letter-spacing: 0.06em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit:hover,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
body.mediawiki.mw-special-Userlogin #mw-content-text,
body.mediawiki.mw-special-CreateAccount #mw-content-text {
padding-top: 0.55rem;
}
body.mediawiki.mw-special-Userlogin #firstHeading {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-content-text > .mw-ui-container {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm {
width: min( 100%, 34rem ) !important;
margin: 0 auto !important;
padding: 1.15rem 1.2rem 1.25rem !important;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.1 ), transparent 34% ),
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 55% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-userlogin-help {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
margin: 1.05rem auto 0 !important;
max-width: 18rem;
}
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: grid !important;
grid-template-columns: minmax( 19rem, 28rem ) minmax( 20rem, 1fr ) !important;
gap: clamp( 1.4rem, 4vw, 3rem ) !important;
align-items: stretch !important;
width: min( 100%, 76rem ) !important;
max-width: 76rem !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin: 0 !important;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.07 ), transparent 38% ),
linear-gradient( 180deg, rgba( 255, 138, 0, 0.035 ), rgba( 0, 0, 0, 0 ) 54% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm {
padding: 1.15rem 1.2rem 1.25rem !important;
border-left: 3px solid var( --edfm-orange ) !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
padding: clamp( 1.3rem, 2.2vw, 2.05rem ) !important;
border-left: 3px solid var( --edfm-cyan ) !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field {
margin-bottom: 1rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLSubmitField,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLSubmitField {
margin-bottom: 0 !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName {
border-color: rgba( 66, 199, 217, 0.45 ) !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 1px rgba( 66, 199, 217, 0.35 ), 0 0 18px rgba( 66, 199, 217, 0.14 ) !important;
}
@media ( max-width: 860px ) {
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: flex !important;
flex-direction: column !important;
width: min( 100%, 34rem ) !important;
max-width: 34rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
width: 100% !important;
}
}
/* ==========================================================================
EDFM dark thumbnail/frame treatment — 2026-08-13
Keep MediaWiki image captions from falling back to the default white frame.
========================================================================== */
.mw-parser-output .thumb {
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"],
.mw-parser-output figure.mw-halign-right,
.mw-parser-output figure.mw-halign-left,
.mw-parser-output figure.mw-halign-center {
background:
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 56% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 1px solid var( --edfm-border ) !important;
box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbimage,
.mw-parser-output .thumbinner img,
.mw-parser-output figure[typeof~="mw:File/Thumb"] img,
.mw-parser-output figure[typeof~="mw:File/Frame"] img {
background-color: var( --edfm-bg-deep ) !important;
border: 1px solid var( --edfm-border ) !important;
box-sizing: border-box !important;
}
.mw-parser-output .thumbcaption,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption {
background: var( --edfm-surface-1 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim ) !important;
font-size: var( --edfm-fs-small ) !important;
line-height: 1.42 !important;
padding: 0.42rem 0.5rem 0.5rem !important;
}
.mw-parser-output .thumbcaption a,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a {
color: var( --edfm-link ) !important;
}
.mw-parser-output .thumbcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a:hover {
color: var( --edfm-link-hover ) !important;
}
.mw-parser-output .magnify a,
.mw-parser-output .mw-file-magnify {
filter: invert( 1 ) opacity( 0.72 ) drop-shadow( 0 0 2px rgba( 66, 199, 217, 0.28 ) );
}

/* ==========================================================================
EDFM VisualEditor template dialog dark theme — 2026-08-13
Keep template editing dialogs from falling back to white/light OOUI panels.
========================================================================== */
.ve-ui-mwTransclusionDialog,
.ve-ui-mwTransclusionDialog .oo-ui-window-frame,
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .oo-ui-window-body,
.ve-ui-mwTransclusionDialog .oo-ui-window-foot,
.ve-ui-mwTransclusionDialog .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTransclusionDialog .oo-ui-pageLayout,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-content,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
background-color: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu {
background-color: var( --edfm-surface-1 ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterSelectWidget {
background-color: var( --edfm-surface-2 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-widget {
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-field .oo-ui-labelElement-label em,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-undocumentedLabel {
color: var( --edfm-text-muted ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-bg-deep ) !important;
}

/* Additional VE template-dialog color polish — disabled/apply buttons, search,
unused-toggle buttons, and parameter checkboxes. */
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
opacity: 0.82 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget .oo-ui-inputWidget-input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-inputWidget-input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span::before {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
/* EDFM VisualEditor template/infobox popup hard-dark theme — targets the actual
Edit: <template> popup chrome and body, not just article/sidebar chrome. */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active > .oo-ui-window-frame,
.oo-ui-windowManager-modal .oo-ui-processDialog-content,
.oo-ui-windowManager-modal .oo-ui-window-content,
.oo-ui-windowManager-modal .oo-ui-window-body,
.oo-ui-windowManager-modal .oo-ui-window-foot,
.ve-ui-mwTemplateDialog,
.ve-ui-mwTemplateDialog .oo-ui-panelLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-content,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTemplateDialog .oo-ui-pageLayout,
.ve-ui-mwTemplateDialog .ve-ui-mwTemplatePage,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #111b20 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-content > .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-processDialog-navigation,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #1c2a31 !important;
color: #f4f7f8 !important;
border-color: #7f9299 !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-title,
.oo-ui-windowManager-modal .oo-ui-labelElement-label,
.oo-ui-windowManager-modal .oo-ui-fieldLayout-header label,
.oo-ui-windowManager-modal .oo-ui-widget,
.ve-ui-mwTemplateDialog .oo-ui-labelElement-label,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTemplateDialog .oo-ui-fieldsetLayout-header label {
color: #f4f7f8 !important;
}
.oo-ui-windowManager-modal .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-undocumentedLabel,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .mw-widget-titleOptionWidget-description {
color: #a9bbc1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-inputWidget-input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget textarea,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget input,
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
background: #0d1519 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: #42c7d9 !important;
box-shadow: 0 0 0 2px rgba(66,199,217,.32) !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: #25353d !important;
border-color: #52646b !important;
color: #f4f7f8 !important;
box-shadow: none !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: #31454f !important;
border-color: #ff8a00 !important;
color: #ffb347 !important;
}
.oo-ui-windowManager-modal .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: #ff8a00 !important;
border-color: #ff8a00 !important;
color: #111820 !important;
font-weight: 700 !important;
}
.oo-ui-windowManager-modal .oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background: #1c2a31 !important;
border-color: #3f5159 !important;
color: #8fa1a8 !important;
opacity: 1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget:hover,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: #25353d !important;
color: #f4f7f8 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span::before {
background-color: #0d1519 !important;
border-color: #7f9299 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before {
background-color: #ff8a00 !important;
border-color: #ff8a00 !important;
}
/* EDFM cookie preferences banner */
#edfm-cookie-banner {
position: fixed;
z-index: 10000;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: flex;
justify-content: center;
pointer-events: none;
}
#edfm-cookie-banner .edfm-cookie-card {
max-width: 800px;
border: 1px solid rgba(80, 220, 240, 0.65);
background: rgba(3, 14, 22, 0.98);
box-shadow: 0 0 22px rgba(80, 220, 240, 0.22), 0 12px 36px rgba(0, 0, 0, 0.45);
color: #dffbff;
padding: 1rem;
font-size: 0.95rem;
pointer-events: auto;
}
#edfm-cookie-banner .edfm-cookie-title {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fe0ec;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-text { margin: 0 0 0.75rem; line-height: 1.45; }
#edfm-cookie-banner .edfm-cookie-categories {
display: grid;
gap: 0.65rem;
margin: 0.65rem 0 0.85rem;
}
#edfm-cookie-banner .edfm-cookie-category {
border: 1px solid rgba(127, 224, 236, 0.32);
background: rgba(7, 28, 38, 0.74);
padding: 0.7rem;
}
#edfm-cookie-banner .edfm-cookie-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-category h3 {
margin: 0;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f3feff;
}
#edfm-cookie-banner .edfm-cookie-category p {
margin: 0;
line-height: 1.42;
color: #c6e6eb;
}
#edfm-cookie-banner .edfm-cookie-status {
white-space: nowrap;
border: 1px solid rgba(255, 138, 0, 0.7);
color: #ffd69a;
background: rgba(255, 138, 0, 0.12);
padding: 0.2rem 0.48rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#edfm-cookie-banner .edfm-cookie-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-weight: 700;
color: #f3feff;
cursor: pointer;
}
#edfm-cookie-banner .edfm-cookie-switch input {
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color: #ff8a00;
}
#edfm-cookie-banner .edfm-cookie-switch input:focus-visible {
outline: 2px solid #7fe0ec;
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#edfm-cookie-banner button {
border: 1px solid rgba(127, 224, 236, 0.7);
background: rgba(9, 50, 65, 0.92);
color: #f3feff;
padding: 0.45rem 0.7rem;
cursor: pointer;
}
#edfm-cookie-banner button:hover,
#edfm-cookie-banner button:focus-visible {
background: rgba(17, 88, 108, 0.98);
outline: 2px solid rgba(127, 224, 236, 0.85);
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-links { margin-top: 0.6rem; font-size: 0.85rem; }
#edfm-cookie-banner a { color: #7fe0ec; }
@media (max-width: 600px) {
#edfm-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
#edfm-cookie-banner .edfm-cookie-card { max-height: calc(100vh - 1rem); overflow: auto; }
#edfm-cookie-banner .edfm-cookie-category-head { align-items: flex-start; }
#edfm-cookie-banner .edfm-cookie-actions button { flex: 1 1 100%; }
}

/* ==========================================================================
EDFM Vector watchstar dark-theme fix — 2026-08-16
Vector legacy renders the page watch/unwatch affordance as a small SVG
background on `#ca-watch/#ca-unwatch a::before`. On EDFM's dark tab row the
upstream light-skin URLs can be too low-contrast, and some deployments do not
expose ResourceLoader's dotted asset path directly. Use inline SVGs in the
EDFM palette so the watchstar is always visible in the top action menu.
========================================================================== */
.vector-menu-tabs #ca-watch.icon a::before,
.vector-menu-tabs-legacy #ca-watch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2310171b' stroke='%2342c7d9' stroke-width='1.35' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.42 ) );
opacity: 0.96;
}
.vector-menu-tabs #ca-unwatch.icon a::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.2' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 4px rgba( 255, 138, 0, 0.45 ) );
opacity: 0.98;
}
.vector-menu-tabs #ca-watch.icon a:hover::before,
.vector-menu-tabs #ca-watch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-watch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-watch.icon a:focus::before,
.vector-menu-tabs #ca-unwatch.icon a:hover::before,
.vector-menu-tabs #ca-unwatch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:focus::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.25' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 5px rgba( 255, 138, 0, 0.65 ) );
opacity: 1;
}

/* ==========================================================================
EDFM Special:Preferences dark theme fix — 2026-08-16
Preferences is an OOUI/Codex-heavy special page. Core styles bring in a
light tab strip and sticky submit footer, so theme the actual preferences
wrapper rather than only generic form controls.
========================================================================== */
body.mediawiki.mw-special-Preferences #preferences,
body.mediawiki.mw-special-Preferences #mw-prefs-container,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-fieldset-wrapper,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout-framed {
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed {
box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.32 );
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-menu,
body.mediawiki.mw-special-Preferences .oo-ui-menuLayout-menu {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabSelectWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget:hover,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: inset 0 -3px 0 var( --edfm-orange ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header label,
body.mediawiki.mw-special-Preferences .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .mw-prefs-title {
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-description,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-help,
body.mediawiki.mw-special-Preferences .oo-ui-inline-help,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-messages,
body.mediawiki.mw-special-Preferences .htmlform-tip,
body.mediawiki.mw-special-Preferences .mw-htmlform-help {
background: transparent !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownInputWidget select,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownWidget-handle,
body.mediawiki.mw-special-Preferences input[type='text'],
body.mediawiki.mw-special-Preferences input[type='number'],
body.mediawiki.mw-special-Preferences input[type='email'],
body.mediawiki.mw-special-Preferences textarea,
body.mediawiki.mw-special-Preferences select {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-inputWidget-input::placeholder,
body.mediawiki.mw-special-Preferences input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus,
body.mediawiki.mw-special-Preferences input:focus,
body.mediawiki.mw-special-Preferences textarea:focus,
body.mediawiki.mw-special-Preferences select:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox'] {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox']:checked {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
accent-color: var( --edfm-orange );
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit,
body.mediawiki.mw-special-Preferences button,
body.mediawiki.mw-special-Preferences input[type='submit'] {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit:hover,
body.mediawiki.mw-special-Preferences button:hover,
body.mediawiki.mw-special-Preferences input[type='submit']:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
body.mediawiki.mw-special-Preferences #preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .oo-ui-window-foot .mw-htmlform-submit-buttons {
background: rgba( 16, 23, 27, 0.96 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
box-shadow: 0 -10px 24px rgba( 0, 0, 0, 0.34 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-search-highlight,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
background: rgba( 66, 199, 217, 0.18 ) !important;
outline-color: rgba( 66, 199, 217, 0.32 ) !important;
color: var( --edfm-text ) !important;
}

MediaWiki:Common.js

2026-08-18T20:58:16Z

EDFM Site Maintenance: Relabel the header UTC clock as "Server" (clearer for readers than a raw timezone abbreviation; still server-synced time, unchanged otherwise).

/* EDFM: small, purely presentational enhancements. None are required
* for the site to function -- all degrade gracefully with JS off -- and
* none are achievable in pure CSS, which is why they exist here instead
* of in MediaWiki:Common.css. Kept deliberately tiny: no framework, no
* build step, vanilla DOM APIs only.
*/
( function () {
'use strict';

/* 1. Eyebrow placement (see Template:Article header, .edfm-eyebrow in
* Common.css). MediaWiki always renders the real #firstHeading (the
* page's H1) before the article body in the DOM -- there is no
* template or CSS hook that lets wikitext content appear earlier than
* that. The eyebrow is authored as ordinary wikitext at the top of the
* article; this just moves that already-rendered, already-accessible
* element to sit visually above the title instead of below it. If this
* script doesn't run for any reason, the eyebrow still renders --
* directly under the title rather than above it -- so nothing breaks,
* this only affects placement.
*/
function placeEyebrow() {
var eyebrow = document.querySelector( '.edfm-eyebrow' );
var heading = document.getElementById( 'firstHeading' );
if ( eyebrow && heading && heading.parentNode ) {
heading.parentNode.insertBefore( eyebrow, heading );
}
}

/* 2. "You are here" sidebar highlighting. MediaWiki's default sidebar
* has no built-in current-page indication -- this compares each
* sidebar link's URL to the current page and flags the match so
* Common.css can style it (see .edfm-nav-current). Wrapped in try/catch
* per-link only so one malformed href can't stop the rest from being
* checked.
*/
function highlightCurrentNavLink() {
var links = document.querySelectorAll( '#mw-panel .vector-menu-content-list a[href]' );
/* Compare pathname *and* query string, not just pathname. Most
* content pages use clean /wiki/Page_Name URLs where pathname alone
* is unambiguous, but action views (edit, history, diff, page
* info, ...) all route through the same /index.php pathname and
* are only distinguished by their query string (?action=edit vs
* ?action=info etc.) -- comparing pathname only would wrongly
* highlight every sidebar link that happens to also point at
* /index.php, e.g. "Page information" while actually viewing the
* edit-source screen.
*/
var here = window.location.pathname + window.location.search;
for ( var i = 0; i < links.length; i++ ) {
var a = links[ i ];
try {
var target = new URL( a.href, window.location.href );
if ( target.pathname + target.search === here ) {
a.parentNode.classList.add( 'edfm-nav-current' );
}
} catch ( e ) {
/* malformed href on this one link -- skip it, not fatal */
}
}
}

/* 3. Jump-nav label shortening (2026-08-08, Engineer article layout
* pass). MediaWiki's native table of contents always mirrors a
* section's real ==Heading== text exactly -- there's no template or
* markup mechanism for a heading to carry a separate "short nav
* label". Article headings stay full and descriptive (e.g. "How to
* Receive an Invitation") since that's what reads well in the article
* body; this only shortens the *jump-nav tile* text afterwards, so the
* dense tile grid doesn't force long headings to wrap across two
* lines. Keyed by exact heading text, shared across all Engineer
* articles (same section names throughout, see Template:New engineer
* page) rather than being specific to any one page. Anything not in
* this list is left exactly as MediaWiki rendered it -- this only ever
* shortens, never invents nav text for a heading it doesn't recognise.
*/
var TOC_SHORT_LABELS = {
'How to Discover This Engineer': 'Discovery',
'How to Receive an Invitation': 'Invitation',
'How to Unlock This Engineer': 'Unlock',
'Engineer Unlock Chain': 'Unlock Chain',
'Available Engineering': 'Engineering',
'Experimental Effects': 'Experimentals',
'Increasing Engineer Reputation': 'Reputation',
'Recommended Blueprint to Pin': 'Blueprint Pinning'
};

function shortenTocLabels() {
var toctexts = document.querySelectorAll( '#toc .toctext, .toc .toctext' );
for ( var i = 0; i < toctexts.length; i++ ) {
var el = toctexts[ i ];
var full = el.textContent.trim();
if ( Object.prototype.hasOwnProperty.call( TOC_SHORT_LABELS, full ) ) {
el.textContent = TOC_SHORT_LABELS[ full ];
}
}
}

/* 4. Desktop top-bar clocks. RuneScape.wiki has a compact utility strip
* in the personal-toolbar tier; EDFM only needs time readouts there.
* UTC is synced once from MediaWiki's API curtimestamp (server-side UTC)
* and then advanced locally each second; local time uses the visitor's
* browser timezone. If the API request fails, the UTC clock falls back to
* the browser clock in UTC rather than leaving a blank control.
*/
function initTopBarClocks() {
var personal = document.getElementById( 'p-personal' );
if ( !personal || document.querySelector( '.edfm-topbar-clocks' ) ) {
return;
}

var clocks = document.createElement( 'div' );
clocks.className = 'edfm-topbar-clocks';
clocks.setAttribute( 'aria-label', 'Current time' );

var utcClock = document.createElement( 'span' );
utcClock.className = 'edfm-topbar-clock edfm-topbar-clock-utc';
utcClock.innerHTML = '<span class="edfm-topbar-clock-label">Server</span> <time>--:--</time>';

var localClock = document.createElement( 'span' );
localClock.className = 'edfm-topbar-clock edfm-topbar-clock-local';
localClock.innerHTML = '<span class="edfm-topbar-clock-label">Local</span> <time>--:--</time>';

clocks.appendChild( utcClock );
clocks.appendChild( localClock );
personal.insertBefore( clocks, personal.firstChild );

var utcOffset = 0;
var utcTime = utcClock.querySelector( 'time' );
var localTime = localClock.querySelector( 'time' );

function twoDigits( number ) {
return String( number ).padStart( 2, '0' );
}
function render() {
var localNow = new Date();
var utcNow = new Date( Date.now() + utcOffset );
var utcText = twoDigits( utcNow.getUTCHours() ) + ':' + twoDigits( utcNow.getUTCMinutes() );
var localText = twoDigits( localNow.getHours() ) + ':' + twoDigits( localNow.getMinutes() );

utcTime.textContent = utcText;
utcTime.setAttribute( 'datetime', utcNow.toISOString() );
utcTime.setAttribute( 'title', 'Server time (UTC): ' + utcNow.toUTCString() );

localTime.textContent = localText;
localTime.setAttribute( 'datetime', localNow.toISOString() );
localTime.setAttribute( 'title', 'Your local time: ' + localNow.toLocaleString() );
}

function syncServerTime() {
if ( !window.fetch || !window.mw || !mw.util ) {
render();
return;
}
var apiUrl = mw.util.wikiScript( 'api' ) + '?action=query&format=json&curtimestamp=1';
fetch( apiUrl, { credentials: 'same-origin' } )
.then( function ( response ) { return response.json(); } )
.then( function ( data ) {
if ( data && data.curtimestamp ) {
utcOffset = Date.parse( data.curtimestamp ) - Date.now();
}
render();
} )
.catch( render );
}

syncServerTime();
window.setInterval( render, 1000 );
}

/* 6. Frontier news links. The Frontier feed uses normal MediaWiki external
* link wikitext so it remains valid when regenerated by the updater. Add
* target/rel in JS because MediaWiki wikitext does not support per-link
* target attributes without unsafe raw HTML.
*/
function initFrontierNewsExternalLinks() {
var links = document.querySelectorAll( '.edfm-frontier-news .edfm-news-title a[href]' );
for ( var i = 0; i < links.length; i++ ) {
var link = links[ i ];
link.target = '_blank';
link.rel = 'nofollow noopener noreferrer';
}
}

/* 7. Mobile app shell. Vector legacy was built for desktop; this adds a
* small progressive-enhancement shell on phones: hamburger drawer using
* the real #mw-panel links, a search button that reveals/focuses the
* existing MediaWiki search input, ESC/scrim close behavior, and ARIA
* state updates. With JS off the CSS fallback remains the existing stacked
* Vector mobile layout.
*/
function initMobileChrome() {
var navigation = document.getElementById( 'mw-navigation' );
var panel = document.getElementById( 'mw-panel' );
var searchInput = document.getElementById( 'searchInput' );
if ( !navigation || !panel || document.querySelector( '.edfm-mobile-appbar' ) ) {
return;
}

var appbar = document.createElement( 'div' );
appbar.className = 'edfm-mobile-appbar';

var menuButton = document.createElement( 'button' );
menuButton.type = 'button';
menuButton.className = 'edfm-mobile-menu-button';
menuButton.setAttribute( 'aria-label', 'Open navigation menu' );
menuButton.setAttribute( 'aria-controls', 'mw-panel' );
menuButton.setAttribute( 'aria-expanded', 'false' );

var brand = document.createElement( 'a' );
brand.className = 'edfm-mobile-brand';
brand.href = mw && mw.util ? mw.util.getUrl( 'Main Page' ) : '/wiki/Main_Page';
brand.textContent = 'Field Manual';

var searchButton = document.createElement( 'button' );
searchButton.type = 'button';
searchButton.className = 'edfm-mobile-search-button';
searchButton.setAttribute( 'aria-label', 'Search the Field Manual' );
searchButton.setAttribute( 'aria-expanded', 'false' );

appbar.appendChild( menuButton );
appbar.appendChild( brand );
appbar.appendChild( searchButton );
navigation.insertBefore( appbar, navigation.firstChild );

var closeButton = document.createElement( 'button' );
closeButton.type = 'button';
closeButton.className = 'edfm-mobile-close-button';
closeButton.setAttribute( 'aria-label', 'Close navigation menu' );
panel.insertBefore( closeButton, panel.firstChild );

var scrim = document.createElement( 'button' );
scrim.type = 'button';
scrim.className = 'edfm-mobile-scrim';
scrim.setAttribute( 'aria-label', 'Close navigation menu' );
document.body.appendChild( scrim );

function setMenuOpen( open ) {
document.body.classList.toggle( 'edfm-mobile-menu-open', open );
menuButton.setAttribute( 'aria-expanded', open ? 'true' : 'false' );
}
function setSearchOpen( open ) {
document.body.classList.toggle( 'edfm-mobile-search-open', open );
searchButton.setAttribute( 'aria-expanded', open ? 'true' : 'false' );
if ( open && searchInput ) {
window.setTimeout( function () { searchInput.focus(); }, 0 );
}
}

menuButton.addEventListener( 'click', function () { setMenuOpen( true ); } );
closeButton.addEventListener( 'click', function () { setMenuOpen( false ); } );
scrim.addEventListener( 'click', function () { setMenuOpen( false ); } );
searchButton.addEventListener( 'click', function () {
setSearchOpen( !document.body.classList.contains( 'edfm-mobile-search-open' ) );
} );
panel.addEventListener( 'click', function ( event ) {
if ( event.target && event.target.closest && event.target.closest( 'a' ) ) {
setMenuOpen( false );
}
} );
document.addEventListener( 'keydown', function ( event ) {
if ( event.key === 'Escape' ) {
setMenuOpen( false );
setSearchOpen( false );
}
} );
}

if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', function () {
placeEyebrow();
highlightCurrentNavLink();
shortenTocLabels();
initTopBarClocks();
initFrontierNewsExternalLinks();
initMobileChrome();
} );
} else {
placeEyebrow();
highlightCurrentNavLink();
shortenTocLabels();
initTopBarClocks();
initFrontierNewsExternalLinks();
initMobileChrome();
}
}() );

/* EDFM one-time cookie preference model migration: previous versions stored
* the only optional purpose as { analytics: true/false }. Rewrite that into
* the category-based model before the preference UI/GA loader runs.
*/
(function () {
'use strict';
var key = 'edfmCookieConsent.v1';
try {
var raw = JSON.parse(localStorage.getItem(key) || 'null');
if (raw && !raw.categories && typeof raw.analytics === 'boolean') {
localStorage.setItem(key, JSON.stringify({
necessary: true,
categories: { analytics: raw.analytics === true },
analytics: raw.analytics === true,
updated: new Date().toISOString(),
model: 'purposes-v2',
migratedFrom: 'legacy-analytics-boolean'
}));
}
} catch (e) {}
}());

/* EDFM cookie preferences banner + optional GA4 loader.
* Basic Google Consent Mode only: Google Analytics is never loaded while the
* optional Analytics purpose is undecided or denied.
*/
(function () {
'use strict';
var STORAGE_KEY = 'edfmCookieConsent.v1';
var ANALYTICS_COOKIE = 'edfmCookieAnalytics';
var MEASUREMENT_ID = 'G-4VJHJ06777';
var loadedMeasurementId = null;
var gaDisabledKey = 'ga-disable-' + MEASUREMENT_ID;

function normalizeChoice(raw) {
if (!raw || typeof raw !== 'object') { return null; }
var analytics;
var migratedFromLegacy = false;
if (raw.categories && typeof raw.categories === 'object' && typeof raw.categories.analytics === 'boolean') {
analytics = raw.categories.analytics;
} else if (typeof raw.analytics === 'boolean') {
// Migration path for the previous single optional site-improvement choice.
analytics = raw.analytics;
migratedFromLegacy = true;
} else {
return null;
}
return {
necessary: true,
categories: {
analytics: analytics
},
// Keep the legacy field for current/future small integrations that may
// still read the existing boolean during the category-model migration.
analytics: analytics,
updated: raw.updated || null,
model: 'purposes-v2',
migratedFromLegacy: migratedFromLegacy
};
}

function parseChoice() {
try {
var choice = normalizeChoice(JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null'));
if (choice && choice.migratedFromLegacy === true) {
choice = persistChoice({ analytics: choice.analytics === true });
}
return choice;
}
catch (e) { return null; }
}

function persistChoice(categories) {
var analytics = !!(categories && categories.analytics === true);
var choice = {
necessary: true,
categories: {
analytics: analytics
},
analytics: analytics,
updated: new Date().toISOString(),
model: 'purposes-v2'
};
localStorage.setItem(STORAGE_KEY, JSON.stringify(choice));
return choice;
}

function hasAnalyticsConsent() {
var choice = parseChoice();
return !!(choice && choice.categories.analytics === true);
}

function setAnalyticsCookie(enabled) {
var maxAge = enabled ? 60 * 60 * 24 * 180 : 0;
document.cookie = ANALYTICS_COOKIE + '=' + (enabled ? '1' : '') + '; Max-Age=' + maxAge + '; Path=/; Secure; SameSite=Lax';
if (!enabled) {
document.cookie = 'edfmPopularSearch=; Max-Age=0; Path=/; Secure; SameSite=Lax';
}
}

function deleteCookieEverywhere(name) {
var host = window.location.hostname;
var domains = [ '', host ];
if (host.indexOf('.') !== -1) {
domains.push('.' + host);
var parts = host.split('.');
if (parts.length > 2) {
domains.push('.' + parts.slice(-2).join('.'));
}
}
var paths = [ '/', window.location.pathname || '/' ];
domains.forEach(function (domain) {
paths.forEach(function (path) {
document.cookie = name + '=; Max-Age=0; Expires=Thu, 01 Jan 1970 00:00:00 GMT; Path=' + path + (domain ? '; Domain=' + domain : '') + '; Secure; SameSite=Lax';
});
});
}

function deleteGaCookies() {
document.cookie.split(';').forEach(function (part) {
var name = part.split('=')[0].trim();
if (name === '_ga' || name.indexOf('_ga_') === 0) {
deleteCookieEverywhere(name);
}
});
}

function eligibleMeasurementId() {
var marker = document.querySelector('meta[name="edfm-ga4-measurement-id"]');
return marker ? marker.getAttribute('content') : null;
}

function sanitizeReferrerConfig() {
var cfg = {
allow_google_signals: false,
allow_ad_personalization_signals: false
};
try {
var ref = document.referrer ? new URL(document.referrer) : null;
if (ref && ref.origin === location.origin) {
var path = ref.pathname.toLowerCase();
var query = ref.search.toLowerCase();
var sensitivePath = /\/wiki\/(special:(userlogin|createaccount|changecredentials|passwordreset|confirmemail|preferences|pluggableauthlogin|userlogout)|user:|user_talk:|profile:|profiles:|commander:|commanders:|cmdr:)/.test(path);
var sensitiveTitle = /(^|[?&])title=special(?::|%3a)(userlogin|createaccount|changecredentials|passwordreset|confirmemail|preferences|pluggableauthlogin|userlogout)(&|$)/i.test(query);
var sensitiveQuery = /(^|[?&])(code|state|token|access_token|refresh_token|id_token|session|session_id|email|email_address|username|user|user_id|account_id|frontier_id|fdev_id|commander|commander_name|cmdr|wpname|wplogintoken|returnto|returntoquery|wpreturnto|wpreturntoquery|authaction|provider)=/i.test(query);
if (sensitivePath || sensitiveTitle || sensitiveQuery) {
cfg.page_referrer = location.origin + '/wiki/[private-referrer]';
}
}
} catch (e) {}
return cfg;
}

function initDataLayer() {
window.dataLayer = window.dataLayer || [];
window.gtag = window.gtag || function () { window.dataLayer.push(arguments); };
}

function loadAnalyticsAfterConsent() {
var id = eligibleMeasurementId();
if (!id || id !== MEASUREMENT_ID || !hasAnalyticsConsent()) {
return;
}
window[gaDisabledKey] = false;
initDataLayer();
window.gtag('consent', 'default', {
ad_storage: 'denied',
ad_user_data: 'denied',
ad_personalization: 'denied',
analytics_storage: 'granted'
});
if (!loadedMeasurementId && !document.querySelector('script[data-edfm-ga4="' + id + '"]')) {
var s = document.createElement('script');
s.async = true;
s.src = 'https://www.googletagmanager.com/gtag/js?id=' + encodeURIComponent(id);
s.setAttribute('data-edfm-ga4', id);
document.head.appendChild(s);
window.gtag('js', new Date());
window.gtag('config', id, sanitizeReferrerConfig());
loadedMeasurementId = id;
} else {
window.gtag('consent', 'update', { analytics_storage: 'granted' });
}
}

function disableAnalytics() {
window[gaDisabledKey] = true;
if (window.gtag) {
window.gtag('consent', 'update', {
ad_storage: 'denied',
ad_user_data: 'denied',
ad_personalization: 'denied',
analytics_storage: 'denied'
});
}
deleteGaCookies();
}

function saveChoice(categories) {
var choice = persistChoice(categories);
var analytics = choice.categories.analytics === true;
setAnalyticsCookie(analytics);
if (analytics) {
loadAnalyticsAfterConsent();
} else {
disableAnalytics();
}
}

function bannerHtml() {
return '<div class="edfm-cookie-card" role="dialog" aria-live="polite" aria-labelledby="edfm-cookie-title" aria-describedby="edfm-cookie-intro">' +
'<div id="edfm-cookie-title" class="edfm-cookie-title">Cookie preferences</div>' +
'<p id="edfm-cookie-intro" class="edfm-cookie-text">EDFM uses necessary cookies for security and site functionality. Optional cookies help us understand how EDFM is used and improve the site. You can choose which optional categories to allow.</p>' +
'<div class="edfm-cookie-categories">' +
'<section class="edfm-cookie-category edfm-cookie-category-necessary" aria-labelledby="edfm-cookie-necessary-title">' +
'<div class="edfm-cookie-category-head"><h3 id="edfm-cookie-necessary-title">Necessary</h3><span class="edfm-cookie-status" aria-label="Necessary cookies are always on">Always on</span></div>' +
'<p>Used for security, login sessions, essential site functionality, and remembering your cookie preferences.</p>' +
'</section>' +
'<section class="edfm-cookie-category edfm-cookie-category-analytics" aria-labelledby="edfm-cookie-analytics-title">' +
'<div class="edfm-cookie-category-head">' +
'<h3 id="edfm-cookie-analytics-title">Analytics</h3>' +
'<label class="edfm-cookie-switch" for="edfm-cookie-analytics-toggle"><input id="edfm-cookie-analytics-toggle" type="checkbox" class="edfm-cookie-analytics" aria-describedby="edfm-cookie-analytics-desc"><span>Allow</span></label>' +
'</div>' +
'<p id="edfm-cookie-analytics-desc">Google Analytics helps us understand page usage, navigation, searches, traffic sources, and general engagement so we can improve EDFM. EDFM does not intentionally send Google usernames, Commander names, email addresses, or Frontier account identifiers.</p>' +
'</section>' +
'</div>' +
'<div class="edfm-cookie-actions">' +
'<button type="button" class="edfm-cookie-accept-all">Accept all</button>' +
'<button type="button" class="edfm-cookie-save">Save preferences</button>' +
'<button type="button" class="edfm-cookie-reject">Reject optional</button>' +
'</div>' +
'<div class="edfm-cookie-links"><a href="/wiki/Elite_Dangerous_Field_Manual:Cookie_Policy">Cookie Policy</a> · <a href="/wiki/Elite_Dangerous_Field_Manual:Privacy_Policy">Privacy Policy</a></div>' +
'</div>';
}

function showBanner() {
if (document.getElementById('edfm-cookie-banner')) { return; }
var wrap = document.createElement('div');
wrap.id = 'edfm-cookie-banner';
wrap.innerHTML = bannerHtml();
document.body.appendChild(wrap);
var checkbox = wrap.querySelector('.edfm-cookie-analytics');
var current = parseChoice();
checkbox.checked = !!(current && current.categories.analytics === true);
wrap.querySelector('.edfm-cookie-accept-all').addEventListener('click', function () {
saveChoice({ analytics: true });
wrap.remove();
});
wrap.querySelector('.edfm-cookie-reject').addEventListener('click', function () {
saveChoice({ analytics: false });
wrap.remove();
});
wrap.querySelector('.edfm-cookie-save').addEventListener('click', function () {
saveChoice({ analytics: checkbox.checked });
wrap.remove();
});
}

function addPreferencesLink() {
var footer = document.getElementById('footer-places') || document.getElementById('footer') || document.body;
if (!footer || document.getElementById('edfm-cookie-preferences-link')) { return; }
var li = document.createElement(footer.tagName && footer.tagName.toLowerCase() === 'ul' ? 'li' : 'div');
var a = document.createElement('a');
a.href = '#cookie-preferences';
a.id = 'edfm-cookie-preferences-link';
a.textContent = 'Cookie Preferences';
a.addEventListener('click', function (event) {
event.preventDefault();
showBanner();
});
li.appendChild(a);
footer.appendChild(li);
}

function initCookiePrefs() {
addPreferencesLink();
var choice = parseChoice();
if (!choice) { showBanner(); disableAnalytics(); return; }
if (choice.migratedFromLegacy === true || choice.model !== 'purposes-v2' || !choice.categories) {
choice = persistChoice({ analytics: !!choice.analytics });
}
setAnalyticsCookie(choice.categories.analytics === true);
if (choice.categories.analytics === true) {
loadAnalyticsAfterConsent();
} else {
disableAnalytics();
}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCookiePrefs);
} else {
initCookiePrefs();
}
window.edfmShowCookiePreferences = showBanner;
}());

MediaWiki:Common.css

2026-08-18T20:57:14Z

EDFM Site Maintenance: Colour the search submit control (icon/button) to match the site's orange progressive-action convention; it was rendering with no colour override on either the no-JS legacy button or the JS/Codex search-input icon, making it invisible against the dark input background.

/* ==========================================================================
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).

2026-08-07 SECOND PASS: the first redesign pass was judged too close to
stock MediaWiki with a colour change -- this pass changes the actual
visual composition (centred workspace instead of a huge dead gutter,
a two-tier header, a real masthead, a tile-grid TOC, a restructured
status module, larger deliberate type scale, depth via surface
elevation instead of borders-around-everything) while reusing every
working mechanism from the first pass rather than throwing it away --
the tab/:visited fix, the external-link specificity fix, the mobile
reorder fix, and focus-visible/reduced-motion are all still here,
unchanged in mechanism.
========================================================================== */

/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* Depth system: site (outermost, visible in the sidebar/header/gutters)
-> article surface -> component surfaces, each a deliberate step
brighter so the page reads as having actual depth rather than "one
background colour with slightly lighter boxes everywhere". */
--edfm-bg-deep: #07090b;
--edfm-bg-page: #0a0e11;
--edfm-surface-1: #10171b;
--edfm-surface-2: #161f24;
--edfm-surface-3: #1c272d;
--edfm-surface-4: #233037;

--edfm-border: #26333b;
--edfm-border-soft: rgba( 255, 255, 255, 0.06 );

--edfm-text: #edf0f2;
--edfm-text-muted: #98a5ad;
--edfm-text-dim: #6c7a82;

/* 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 */
--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 );
--edfm-status-positive-bg: rgba( 66, 199, 217, 0.12 );
--edfm-status-attention-bg: rgba( 255, 138, 0, 0.12 );
--edfm-status-neutral-bg: rgba( 108, 122, 130, 0.12 );

/* Typography -- explicit desktop scale (2026-08-07 pass 2). Sized in
rem against the root's real 16px (Vector legacy's own
@font-size-root is 100%, i.e. browser default -- confirmed by
reading skins.vector.styles.legacy/variables.less, not assumed)
rather than nested em, specifically so component sizes can't
compound smaller than intended inside whatever ambient size an
ancestor happens to set. */
--edfm-fs-title: clamp( 1.9rem, 1.4rem + 2vw, 2.25rem ); /* ~30-36px */
--edfm-fs-h2: 1.35rem; /* ~21.6px */
--edfm-fs-h3: 1.15rem; /* ~18.4px */
--edfm-fs-body: 1rem; /* 16px */
--edfm-fs-resource-name: 1.1rem; /* ~17.6px */
--edfm-fs-meta: 0.8rem; /* ~12.8px */
--edfm-fs-sidebar: 0.9375rem; /* 15px -- polish pass: +1px for readability */
--edfm-fs-utility: 0.72rem; /* ~11.5px */

--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 );

/* Geometry / layout */
--edfm-corner: 10px;
/* Full-width article workspace: keep the fixed Vector sidebar clear,
but let the article surface use the entire remaining viewport. */
--edfm-sidebar-width: 12.75rem;
--edfm-sidebar-clear: 12.75rem;
--edfm-content-max: calc( 100vw - var( --edfm-sidebar-clear ) );
--edfm-gutter: 0px;
}

/* ==========================================================================
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 );
font-size: var( --edfm-fs-body );
}
/* Background treatment: a faint technical grid plus a very soft radial
glow centred behind the (now centred) content column, so the composition
still has quiet visual interest in the gutters on ultrawide screens
instead of just flat colour -- both stay under ~3% opacity, this is
texture, not a HUD. Not image assets; pure CSS gradients. */
body {
background-image:
radial-gradient( ellipse 1400px 900px at 50% 0%, rgba( 66, 199, 217, 0.05 ), transparent 60% ),
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: auto, 48px 48px, 48px 48px;
background-repeat: no-repeat, repeat, repeat;
background-attachment: fixed, scroll, scroll;
}
/* Full-height sidebar rail: mirrors the RuneScape.wiki behavior where the
left rail has no visible bottom edge. The real #mw-panel only carries the
navigation content; this fixed layer paints the uninterrupted surface,
border, and shadow down the whole viewport. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var( --edfm-sidebar-width );
background: linear-gradient( 180deg, var( --edfm-surface-1 ) 0%, var( --edfm-bg-deep ) 100% );
border-right: 1px solid var( --edfm-border );
box-shadow: 10px 0 22px rgba( 0, 0, 0, 0.32 );
pointer-events: none;
z-index: 1;
}
@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: 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;
}

/* Small reusable angular motif: a corner-cut bracket, used sparingly (see
the redesign notes in docs/content-style-guide.md for exactly where) --
deliberately not applied everywhere. */
.edfm-corner-cut {
clip-path: polygon( 0 0, calc( 100% - var( --edfm-corner ) ) 0, 100% var( --edfm-corner ), 100% 100%, 0 100% );
}

/* ==========================================================================
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: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.75rem, 1.35rem + 1.45vw, 2.15rem );
font-weight: 700;
letter-spacing: 0;
line-height: 1.18;
margin: 0.15em 0 0.25em;
padding-bottom: 0.22em;
border-bottom: 1px solid var( --edfm-border );
}
/* Section headings (h2): "// " prefix in orange, bright heading text, a
short orange accent segment over the dim full-width divider core
already draws. Substantially more vertical space than a wiki section
normally gets, per the "sections feel packed together" fix -- 3.25rem
(~52px) above, ~1.1rem gap to the first content component below. If a
heading opts into explicit numbering via {{Section number}}, the
automatic "// " is suppressed so the two treatments don't double up. */
.mw-body h2 {
position: relative;
padding-bottom: 0.25em;
margin-top: 2rem;
margin-bottom: 0.85rem;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.28rem, 1.08rem + 0.65vw, 1.62rem );
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid var( --edfm-border ) !important;
}
.mw-body h2::before {
content: none;
}
.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 );
font-size: var( --edfm-fs-h3 );
}
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.7;
font-size: var( --edfm-fs-body );
}
.mw-body p {
margin: 0 0 1.1em 0;
max-width: none !important; /* Site-wide full-width pass: article text should use the whole content rail. */
}
.mw-body ul,
.mw-body ol {
line-height: 1.7;
margin-bottom: 1.1em;
}

/* EDFM article bullets: replace the stock browser dot with the provided
cyan field-manual arrow, scaled to text size rather than using the source
image's native 100x91 dimensions. This targets article unordered lists;
interface/navigation lists such as the Jump To TOC and galleries are reset
below so they keep their component-specific layout. */
.mw-parser-output ul {
list-style: none;
padding-left: 1.55em;
}
.mw-parser-output ul > li {
position: relative;
}
.mw-parser-output ul > li::before {
content: '';
position: absolute;
left: -1.35em;
top: 0.48em;
width: 0.82em;
height: 0.75em;
background-image: url( '/edfm-assets/list-bullet-arrow.png' );
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.95;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.35 ) );
}
.mw-parser-output ul ul {
margin-top: 0.3em;
padding-left: 1.45em;
}
.mw-parser-output ul ul > li::before {
left: -1.25em;
top: 0.52em;
width: 0.68em;
height: 0.62em;
opacity: 0.82;
}
/* Component exceptions: these are not prose bullet lists. */
.mw-parser-output .toc ul,
.mw-parser-output .gallery,
.mw-parser-output .gallery ul,
.mw-parser-output .mw-gallery-traditional,
.mw-parser-output .mw-gallery-traditional ul {
padding-left: 0;
}
.mw-parser-output .toc li::before,
.mw-parser-output .gallery li::before,
.mw-parser-output .mw-gallery-traditional li::before {
content: none;
}
/* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the
sibling that immediately follows is that wrapper, not the `h2`/`h3`
itself -- matching both forms since a page could still have a bare
heading in edge cases (e.g. content generated without the wrapper). */
.mw-heading2 + p, .mw-body h2 + p,
.mw-heading3 + p, .mw-body h3 + p,
.mw-heading2 + div, .mw-body h2 + div,
.mw-heading3 + div, .mw-body h3 + div {
margin-top: 0;
}
hr {
background-color: var( --edfm-border );
border-color: var( --edfm-border );
}

/* Quiet, discoverable section-edit controls (logged-in editors only --
MediaWiki only renders these for users who can edit). Keeping the
functionality/keyboard access intact while making sure they don't
compete visually with the heading they're attached to: low opacity at
rest, full opacity on hover/focus of the heading OR the control itself,
brackets hidden (the opacity+letter-spacing treatment already reads as
a distinct control without them). */
.mw-editsection {
margin-left: 1em;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility ) !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.45;
transition: opacity 0.15s ease;
}
.mw-heading:hover .mw-editsection,
.mw-heading:focus-within .mw-editsection,
.mw-editsection:hover,
.mw-editsection:focus-within {
opacity: 1;
}
.mw-editsection a {
color: var( --edfm-text-dim );
}
.mw-editsection a:hover,
.mw-editsection a:focus-visible {
color: var( --edfm-cyan );
}
.mw-editsection-bracket {
display: none;
}
.mw-editsection-divider {
color: var( --edfm-text-dim );
margin: 0 0.3em;
}

/* ==========================================================================
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. GLOBAL LAYOUT -- centred workspace
========================================================================== */
/* Full-width article pass: the article now fills the workspace to the right edge.
Historical note: this block originally centred a capped article column.

THE fix for "enormous unused region on the right side of wide displays".
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 with no max-width at all -- the first redesign
pass added a max-width but left the column pinned to the sidebar's left
edge, which is *why* it still read as "a column stuck on the left with
dead space on the right" rather than a composed layout.

Fix: instead of a fixed `margin-left: 11em`, compute how much space is
left over in the workspace (viewport minus the sidebar) once the
content has its max-width, and split that leftover evenly between the
left and right margins (via the --edfm-gutter token above) -- so the
article is centred *within the workspace to the right of the sidebar*,
not centred in the full viewport (which would ignore the sidebar and
look off-centre) and not pinned to its left edge either. On a screen
too narrow for sidebar + max-width content, --edfm-gutter naturally
evaluates to 0 and this degrades to the old "fill the workspace"
behaviour -- no separate narrow-screen override needed.

The header/tab bar's own float/absolute-position box (#mw-head) is left
at its native full width deliberately -- rewriting *that* mechanism is
a different, much higher-risk change (it took several rounds to get
right originally) -- but its *contents* (search box, personal tools,
namespace/view tabs) get their own right/left offsets pulled in by the
same --edfm-gutter below, so they still visually line up with the
centred column beneath them instead of hugging the browser edge. */
.mw-body,
#mw-data-after-content,
.mw-footer {
position: relative;
z-index: 2;
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
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,
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
/* Keep real table layout so header cells and body cells share one column grid.
The earlier display:block + tbody display:table overflow hack made sortable
headers size independently from body columns, which visibly misaligned the
Engineer directory after portrait chips were added. */
display: table;
width: 100%;
table-layout: auto;
}
.mw-body table.wikitable th,
.mw-body table.wikitable td,
.mw-body table.mw-datatable th,
.mw-body table.mw-datatable td {
vertical-align: middle;
}
.mw-body img {
max-width: 100%;
height: auto;
}

/* ==========================================================================
4. ARTICLE MASTHEAD (eyebrow / title / deck)
========================================================================== */
/* Eyebrow line is authored as ordinary wikitext (see Template:Article
header) and, purely as a placement detail, a small script
(MediaWiki:Common.js) moves it directly above #firstHeading on 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).
If JS is unavailable the eyebrow still renders, just directly under the
title instead of above it.

The eyebrow/title/deck aren't wrapped in one literal bounding box (they
live at two different DOM depths -- eyebrow is a sibling of #firstHeading,
deck is inside the article body further down -- wrapping them in one
real container would need heavier JS than is justified here), so the
"designed masthead" read comes from a matching top rule above the
eyebrow and bottom rule below the deck, a small angular marker, and the
larger title/subtitle type scale, rather than one drawn box. */
.edfm-eyebrow {
display: block;
margin: 0.2em 0 0.15em 0;
padding: 0;
border: 0;
font-family: var( --edfm-sans );
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --edfm-text-dim );
}
.edfm-eyebrow::before {
content: none;
}
.edfm-eyebrow .edfm-orange-mark {
color: var( --edfm-orange );
}
.edfm-deck {
color: var( --edfm-text-muted );
font-family: var( --edfm-sans );
font-size: 0.95rem;
font-style: italic;
line-height: 1.45;
max-width: none;
margin: 0.25em 0 0.85em 1.4em;
padding: 0;
border: 0;
}

/* ==========================================================================
1. SIDEBAR
========================================================================== */
#mw-panel {
background: transparent;
box-sizing: border-box;
width: var( --edfm-sidebar-width );
padding: 0 0.65rem 1.35rem 0.65rem;
border-right: 0;
box-shadow: none;
z-index: 3;
}
/* Logo anchors the sidebar visually. Keep raster logo artwork contained in
Vector legacy's fixed sidebar slot rather than letting the image render at
its intrinsic PNG size and clip against the rail. */
#p-logo {
box-sizing: border-box;
width: auto;
height: 10rem;
margin: 0 -0.65rem 0.65rem -0.65rem;
padding: 0.5rem 0.55rem 0.45rem 0.55rem;
border-bottom: 0 !important;
background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% );
overflow: hidden;
}
#p-logo a.mw-wiki-logo {
box-sizing: border-box;
display: block;
width: 100% !important;
height: 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
/* Each nav group gets real breathing room from the one before it instead
of being packed together like a stock wiki sidebar. */

#mw-panel .portal,
#mw-panel .vector-menu-portal {
box-sizing: border-box;
width: auto;
max-width: none;
margin-top: 1.45rem;
}
#mw-panel .portal:first-of-type,
#mw-panel .vector-menu-portal:first-of-type {
margin-top: 0;
}
#mw-panel .portal .body,
#mw-panel .portal ul,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list {
box-sizing: border-box;
width: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
border-color: var( --edfm-border-soft );
}
#mw-panel .portal a {
color: var( --edfm-text-muted );
display: block;
font-size: var( --edfm-fs-sidebar );
line-height: 1.35;
padding: 0.42em 0.55em;
margin: 0.08em -0.35em;
border-left: 2px solid transparent;
border-radius: 2px;
}
#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). */
.edfm-nav-current > a {
color: var( --edfm-orange ) !important;
font-weight: 700;
border-left-color: var( --edfm-orange );
border-left-width: 3px;
background: var( --edfm-surface-2 );
box-shadow: inset 0 0 0 1px rgba( 255, 138, 0, 0.08 );
}
.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: var( --edfm-fs-utility );
border-left: 2px solid var( --edfm-orange );
padding-left: 0.5em;
margin-left: -0.5em;
margin-bottom: 0.4em;
}

/* ==========================================================================
3. TOP BAR -- two-tier chrome
========================================================================== */
/* Vector legacy's #mw-head naturally has ~2.5em of empty space above the
tabs row (core: `#left-navigation/#right-navigation { margin-top:2.5em }`),
originally reserved just for #p-personal to float in. Painting that same
box with a background gradient that stays transparent for that top
band and then switches to a surface colour for the tabs band creates a
real two-tier read -- "primary chrome" (personal tools/search, over the
page's own background) above "wiki authoring controls" (the tabs, on
their own distinct strip) below -- without touching #mw-head's own
position/width mechanics, which is the same fragile absolute-position
system the very first pass of this project had to debug carefully to
get the persistent sidebar working at all. Not worth re-risking that
for a background change. */
#mw-head {
background-image: linear-gradient(
to bottom,
transparent 0,
transparent 2.35em,
var( --edfm-surface-2 ) 2.35em,
var( --edfm-surface-2 ) 100%
);
border-bottom: 1px solid var( --edfm-border );
}
#mw-page-base {
background-color: var( --edfm-bg-deep );
background-image: none;
}
#mw-head-base {
background-color: var( --edfm-bg-deep );
/* Polish pass: thinned from 2px -- at 2px this competed visually with
the masthead's own orange marker/rule directly below it; a single
thinner accent line still reads as "site identity colour" without
the repetition. */
border-bottom: 1px solid var( --edfm-orange );
}
/* Personal tools (login/logout) and the search box are the "primary
chrome" tier -- pulled in by the same gutter used to centre the article,
so on wide screens they visually line up with the centred column
instead of hugging the browser edge, and given noticeably more visual
weight than the tabs below them. */
#p-personal {
right: calc( 0.75em + var( --edfm-gutter ) );
display: flex;
align-items: center;
gap: 0.75rem;
}
#p-personal ul {
display: flex;
align-items: center;
gap: 0.55rem;
}
#p-personal li {
margin-left: 0;
}
#p-personal a {
color: var( --edfm-text-muted );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.3em 0.2em;
}
#p-personal a:hover {
color: var( --edfm-orange );
}
.edfm-topbar-clocks {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
line-height: 1;
white-space: nowrap;
}
.edfm-topbar-clock {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.55em;
background: rgba( 66, 199, 217, 0.08 );
border: 1px solid var( --edfm-border-soft );
border-left: 2px solid var( --edfm-cyan );
color: var( --edfm-text );
}
.edfm-topbar-clock-label {
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edfm-topbar-clock time {
color: var( --edfm-cyan );
font-weight: 700;
}
.edfm-topbar-clock-local {
background: rgba( 255, 138, 0, 0.06 );
border-left-color: var( --edfm-orange );
}
.edfm-topbar-clock-local time {
color: var( --edfm-orange-bright );
}
#right-navigation {
margin-right: var( --edfm-gutter );
}
#left-navigation {
margin-left: var( --edfm-sidebar-clear );
}
/* Polish pass: core caps this at `width:20vw; max-width:20em`, which read
as cramped next to the rest of the (now larger-scale) interface --
given more room on desktop, still capped so it can't dominate the bar. */
.vector-search-box-inner {
width: 22vw;
max-width: 24em;
}
.vector-search-box-inner input,
#searchInput {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
border: 1px solid var( --edfm-border );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.5em 0.7em;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#searchInput:focus {
border-color: var( --edfm-cyan );
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.22 );
outline: none;
}
#searchInput::placeholder {
color: var( --edfm-text-dim );
}
/* Search submit control: neither rendering path gives this any color of
its own, so on our dark input background it was effectively invisible.
The no-JS legacy form's <button> is a plain black icon at 0.67 opacity
(core skins.vector.styles.legacy/components/SearchBox.less); the
JS/Vue-Codex widget (.vector-search-box-vue) has no separate button at
all, just a start icon inside the input using the same technique
(mask-image recoloured via `background-color`, see Codex's
CdxSearchInput.css). Recolour both to match the site's orange
progressive-action colour used everywhere else. */
.vector-search-box-vue .cdx-text-input__start-icon {
background-color: var( --edfm-orange );
opacity: 1;
}
.searchButton[ name='go' ] {
background-image: none;
background-color: var( --edfm-orange );
opacity: 0.85;
-webkit-mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
}
.searchButton[ name='go' ]:hover,
.searchButton[ name='go' ]:focus {
background-color: var( --edfm-orange-bright );
opacity: 1;
}
/* 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.

These are the "wiki authoring controls" utility tier -- deliberately
smaller (--edfm-fs-utility) and quieter than personal-tools/search
above them, sitting on their own background strip (see #mw-head above).
Selected state stays orange (it's still real navigation, just
secondary); unselected rests dim so the *selected* tab is the one that
reads clearly. */
.vector-menu-tabs-legacy li {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs-legacy li.selected {
background-image: none;
background-color: var( --edfm-surface-1 );
/* Polish pass: a small underline makes the selected tab unambiguous at
a glance instead of relying on the text colour change alone. */
box-shadow: inset 0 -2px 0 var( --edfm-orange );
}
.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 );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 700;
}
.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. */
.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;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var( --edfm-fs-utility );
font-weight: 700;
}
.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-3 );
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 );
font-size: var( --edfm-fs-sidebar );
}
.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-4 );
}

/* Front-page chrome: the hero already names the site, so suppress the
generated MediaWiki page title only on the Main Page. Keep the namespace
tab label and all other article titles intact. */
body.page-Main_Page #firstHeading {
display: none;
}
body.page-Main_Page .mw-body-content {
margin-top: 0;
}

/* ==========================================================================
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 );
}
.mw-body {
border-right: 1px solid var( --edfm-border );
}
#content {
background-color: var( --edfm-surface-1 );
}

/* Site notice chrome. The global disclaimer was moved to its dedicated
legal/disclaimer page, so an empty #siteNotice must not leave behind a
phantom divider at the top of the article surface. */
#siteNotice:empty {
display: none;
}
#siteNotice:not( :empty ) {
font-size: var( --edfm-fs-meta );
line-height: 1.5;
color: var( --edfm-text-dim );
font-style: normal;
padding-bottom: 0.7em;
margin-bottom: 1.4rem;
border-bottom: 1px solid var( --edfm-border-soft );
}
#siteNotice:not( :empty ) em, #siteNotice:not( :empty ) i {
color: var( --edfm-text-muted );
font-style: italic;
}
#siteNotice:not( :empty ) a {
color: var( --edfm-link-external );
}
#siteNotice a:hover {
color: var( --edfm-link-external-hover );
}

/* ==========================================================================
HOME PAGE DASHBOARD
========================================================================== */
.edfm-home-hero {
margin: 0.9rem 0 1.6rem;
padding: 1.35rem 1.55rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.16 ), transparent 34% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.14 ), transparent 42% ),
var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 4px solid var( --edfm-cyan );
clip-path: polygon( 0 0, calc( 100% - 12px ) 0, 100% 12px, 100% 100%, 0 100% );
}
.edfm-home-hero-kicker,
.edfm-home-card-kicker {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.edfm-home-hero-title {
margin-top: 0.25rem;
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: clamp( 1.55rem, 1.1rem + 1.5vw, 2.2rem );
font-weight: 800;
line-height: 1.15;
}
.edfm-home-hero-text {
max-width: none;
margin-top: 0.55rem;
color: var( --edfm-text-muted );
font-size: 1.05rem;
line-height: 1.55;
}
.edfm-home-grid {
display: grid;
gap: 1rem;
margin: 1.2rem 0 2rem;
}
.edfm-home-grid-four {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.edfm-home-grid-topics {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-grid-two {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-card {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
padding: 1rem 1.1rem;
box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.2 );
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-home-card:hover {
transform: translateY( -2px );
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-orange );
}
.edfm-home-card-primary {
border-left-color: var( --edfm-orange );
}
.edfm-home-card-warning {
border-left-color: var( --edfm-text-dim );
}
.edfm-home-card-title,
.edfm-home-card-title a {
margin-top: 0.35rem;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.edfm-home-card-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-home-card-text,
.edfm-home-link-list {
margin-top: 0.65rem;
color: var( --edfm-text-muted );
line-height: 1.6;
}
.edfm-home-link-list a {
font-weight: 600;
}
@media ( max-width: 1100px ) {
.edfm-home-grid-four {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( max-width: 760px ) {
.edfm-home-grid-four,
.edfm-home-grid-topics,
.edfm-home-grid-two {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
HOME PAGE NEWS MODULE
========================================================================== */
.edfm-home-news {
margin: 1.8rem 0 2.2rem;
}
.edfm-news-feature-grid {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 1rem;
margin-bottom: 1rem;
}
.edfm-news-card,
.edfm-news-list {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
box-shadow: 0 14px 26px rgba( 0, 0, 0, 0.22 );
overflow: hidden;
}
.edfm-news-card {
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-news-card:hover {
transform: translateY( -2px );
border-color: rgba( 255, 138, 0, 0.48 );
background: var( --edfm-surface-3 );
}
.edfm-news-card-art {
display: flex;
align-items: flex-end;
min-height: 7rem;
padding: 0.8rem 1rem;
box-sizing: border-box;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.28 ), transparent 42% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.2 ), transparent 48% ),
linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-1 ) );
border-bottom: 1px solid var( --edfm-border );
color: rgba( 237, 240, 242, 0.72 );
font-family: var( --edfm-mono );
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.edfm-news-card-primary .edfm-news-card-art {
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.38 ), transparent 46% ),
linear-gradient( 315deg, rgba( 79, 159, 232, 0.26 ), transparent 52% ),
var( --edfm-surface-4 );
}
.edfm-news-card-body {
padding: 1rem 1.15rem 1.15rem;
}
.edfm-news-meta {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.edfm-news-title,
.edfm-news-title a {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.edfm-news-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-news-summary {
color: var( --edfm-text-muted );
line-height: 1.55;
margin-top: 0.65rem;
}
.edfm-news-list {
padding: 1.1rem 1.25rem 1.2rem;
border-left: 4px solid var( --edfm-orange );
}
.edfm-news-list-heading {
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.edfm-news-list ul {
margin: 0;
}
.edfm-news-list li {
margin-bottom: 0.55rem;
color: var( --edfm-text-muted );
}
.edfm-news-more {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px solid var( --edfm-border-soft );
text-align: right;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
@media ( max-width: 900px ) {
.edfm-news-feature-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
10. JUMP NAVIGATION (table of contents)
========================================================================== */
/* A compact navigation strip/tile-grid rather than a traditional TOC box
of small text links -- real MediaWiki anchors/markup untouched, this is
all presentation. "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 {
display: block;
width: 100%;
box-sizing: border-box;
background: none;
border: none;
color: var( --edfm-text );
padding: 0;
margin: 1.8rem 0;
}
.toctitle {
position: relative;
margin-bottom: 0.7em;
}
.toctitle::before {
content: 'Jump to';
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-orange );
}
/* Core ships `.toc h2 { font-size: 100%; ... }` (mediawiki.skinning/toc/
screen.less) at the exact same specificity (one class + one tag) as a
plain `.toctitle h2` rule -- same "tie that doesn't resolve the way
naive source order would suggest" gotcha documented elsewhere in this
file. #toc's own ID makes this one unambiguous instead of relying on
cascade order. */
#toc .toctitle h2,
.toc .toctitle h2 {
font-size: 0 !important;
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 );
}
/* Desktop: a balanced multi-column jump list. CSS grid flows row-first,
which makes numbered sections read 1, 2, 3, 4 across the first row. For a
reference/walkthrough TOC, scan order is clearer when each column reads
downward first: 1/2/3, then 4/5/6, then 7/8/9. CSS columns preserve the
real DOM/source order while presenting that column-major layout on every
page that uses the stock MediaWiki TOC. */
.toc > ul {
display: block;
column-count: 3;
column-gap: 0.45rem;
list-style: none;
margin: 0;
padding: 0;
}
.toc > ul > li {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 0.45rem;
}
.toc li {
margin-top: 0;
}
/* 2026-08-08 density pass: reverted to side-by-side number/label (from the
earlier "stacked number-above-label" polish pass) specifically to cut
per-tile height -- with 12 sections on articles like The Dweller, the
stacked layout meant the jump nav alone filled most of the first
viewport. Row layout plus tighter padding/font-size gets noticeably
more sections above the fold without dropping the numbering or shrinking
tap targets below a comfortable size -- see the dedicated mobile padding
bump further down for keeping touch targets safe on small screens
specifically. Whole tile stays one real <a>, so it's still a single
click/focus target and keyboard tab stop either way. */
.toc a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
height: 100%;
box-sizing: border-box;
padding: 0.5em 0.75em 0.5em 0.7em;
background: var( --edfm-surface-3 );
/* Left accent rail: matches the orange section numbers and gives each
jump tile a stronger EDFM navigation affordance without boxing the
entire card. */
border-left: 4px solid var( --edfm-orange );
box-shadow: inset 1px 0 0 rgba( 255, 162, 26, 0.35 );
color: var( --edfm-text-muted );
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.toc a:hover {
background: var( --edfm-surface-4 );
border-left-color: var( --edfm-cyan );
box-shadow: inset 1px 0 0 rgba( 66, 199, 217, 0.45 );
color: var( --edfm-text );
transform: translateY( -1px );
}
/* Nested sub-levels (rare on this site so far) drop back to a plain
indented block list inside their parent tile's grid cell rather than
trying to stay gridded themselves. */
.toc ul ul {
grid-column: unset;
list-style: none;
margin: 0.3em 0 0 1.2em;
padding: 0;
display: block;
}
.toc ul ul a {
flex-direction: row;
align-items: center;
background: none;
border-left-width: 1px;
padding: 0.3em 0.6em;
}
.toc ul ul .tocnumber {
font-size: 0.85em;
}
.toc ul ul .toctext {
font-size: 0.85em;
}
.tocnumber {
color: var( --edfm-orange );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: 1.05rem;
line-height: 1;
}
.toctext {
color: inherit;
font-size: 0.85rem;
line-height: 1.3;
}
/* Column count changes only at readable/touch-friendly breakpoints. Keep
column-major ordering at 3 and 2 columns; mobile becomes the natural single
source-order list. */
@media ( max-width: 860px ) {
.toc > ul {
column-count: 2;
}
}
@media ( max-width: 560px ) {
.toc > ul {
column-count: 1;
}
/* Single-column tiles are already full-width here, so there's no
density pressure left -- restore closer to the pre-2026-08-08
padding instead of the tighter desktop value, keeping tap targets
comfortable rather than compacting mobile just because desktop
compacted. */
.toc a {
padding: 0.7em 0.95em;
}
}

/* ==========================================================================
5b. FULL-WIDTH ARTICLE FLOW OVERRIDES
========================================================================== */
/* 2026-08-10 audit: EDFM pages should not leave half the article rail empty.
Earlier readability caps on paragraphs/hero copy made long-form sections
look like narrow blocks while tables, TOCs, and navigation tiles spanned
the page. Keep the main rail full-width everywhere; individual components
may still opt into their own internal grids, but ordinary article copy and
common block containers should stretch to the content edge. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > div:not( .thumb ):not( .tright ):not( .tleft ):not( .floatright ):not( .floatleft ):not( .edfm-status ):not( .edfm-panel ):not( .edfm-box ) {
max-width: none;
box-sizing: border-box;
}
/* Final guard against stale/skin rules recapping article prose while leaving
compact maintenance/status panels free to keep their intentional centred width. */
.mw-body .mw-parser-output > p,
.mw-parser-output > p {
max-width: none !important;
width: 100%;
box-sizing: border-box;
}

/* ==========================================================================
6. PANELS / CALLOUTS, and 11. ARTICLE METADATA / STATUS MODULE
========================================================================== */
/* Deliberately NOT defined here. .edfm-box / .edfm-panel* / .edfm-status* /
.edfm-inline-flag / .edfm-related* are used exclusively by the
editorial templates (see Template:Article status, Template:Draft
warning, Template:Related articles, 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 );
font-size: var( --edfm-fs-body );
}
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: var( --edfm-fs-meta );
text-align: left;
padding: 0.6em 0.8em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
/* 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 );
}

/* ==========================================================================
15. FOOTER
========================================================================== */
/* A real branded footer: a small wordmark line (pure CSS generated
content -- decorative branding only, redundant with the sidebar logo
already visible, so nothing load-bearing depends on it being
selectable), a top rule with more separation from the article above it,
and MediaWiki's real info/places/icon links laid out on a clean grid
with the badges aligned as a group rather than floating alone. */
.mw-footer {
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
margin-top: 2.5rem;
padding-top: 1.6rem;
border-top: 1px solid var( --edfm-border );
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "brand brand" "info icons" "places icons";
align-items: center;
column-gap: 2em;
row-gap: 0.4rem;
}
.mw-footer::before {
grid-area: brand;
content: 'EDFM // Elite Dangerous Field Manual';
font-family: var( --edfm-mono );
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var( --edfm-text-muted );
margin-bottom: 0.5rem;
}
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
color: var( --edfm-text-dim );
border-color: var( --edfm-border-soft );
font-size: var( --edfm-fs-meta );
}
#footer-info {
grid-area: info;
margin: 0;
line-height: 1.6;
}
#footer-places {
grid-area: places;
margin: 0;
}
/* Same "small uppercase label" treatment used for tags/meta text
elsewhere, so these read as deliberate EDFM navigation rather than
default MediaWiki footer links. */
#footer-places li {
display: inline-block;
margin-right: 1.4em;
}
#footer-places a {
font-family: var( --edfm-mono );
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.78rem;
}
/* A left rule ties the badges to the rest of the footer instead of
letting them read as detached/floating in their own space. */
#footer-icons {
grid-area: icons;
align-self: center;
display: flex;
gap: 0.75em;
margin: 0;
padding-left: 1.6em;
border-left: 1px solid var( --edfm-border-soft );
}
#footer-icons img {
background: var( --edfm-text );
border-radius: 2px;
}
@media ( max-width: 640px ) {
.mw-footer {
grid-template-columns: 1fr;
grid-template-areas: "brand" "info" "places" "icons";
}
#footer-icons {
margin-top: 0.7em;
padding-left: 0;
border-left: none;
border-top: 1px solid var( --edfm-border-soft );
padding-top: 0.7em;
}
}

/* ==========================================================================
MISC MediaWiki UI chrome that ships with light backgrounds by default
========================================================================== */
.catlinks {
background: none !important;
border: none !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-meta );
padding: 0.9em 0 0 0 !important;
margin-top: 1.8rem !important;
}
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: 350px;
max-width: min( 350px, 42% );
margin: 0 0 1.25em 1.35em;
border: 1px solid var( --edfm-border );
border-top: 2px solid var( --edfm-orange );
background: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: 0.92rem;
}
.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.5em 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-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
border: 1px dashed var( --edfm-border );
background: var( --edfm-surface-1 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility );
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 0.5em;
}
/* Optional section label (Template:Infobox's |groupN=) splitting a long
infobox into scannable groups, e.g. Engineer infoboxes into "ENGINEER"
and "ACCESS" (2026-08-08, part of the Engineer article layout pass). A
shaded band with a bottom rule rather than a full boxed sub-header --
consistent with .edfm-infobox-row's own bottom-rule-only separator, not
a new visual language. */
.edfm-infobox-group {
background: var( --edfm-surface-3 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35em 0.7em;
border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-row {
display: flex;
border-bottom: 1px solid var( --edfm-border-soft );
padding: 0.45em 0.7em;
}
.edfm-infobox-row:last-child {
border-bottom: none;
}
.edfm-infobox-label {
font-weight: 700;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
width: 40%;
flex-shrink: 0;
color: var( --edfm-cyan );
}
.edfm-infobox-value {
width: 60%;
}
@media ( max-width: 640px ) {
.edfm-infobox {
float: none;
width: auto;
max-width: none;
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::before {
display: none;
}
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;
background-image: none;
background-color: var( --edfm-surface-2 );
}
#left-navigation,
#right-navigation {
float: none;
margin: 0 !important;
width: auto;
clear: both;
}
#left-navigation {
margin-top: 0 !important;
}
/* Core Vector legacy floats each tab/dropdown portlet
(.vector-menu-tabs-legacy for Page/Discussion and Read/View
source/View history, .vector-menu-dropdown for the More menu) AND
floats every <li> inside their <ul>, with no wrapping at all -- at
narrow widths the labels just overflow and overlap each other
(confirmed with a real screenshot: "View source" and "More"
overlapped instead of wrapping to a new line). Switching the
portlets to inline-block and their tab lists to flex-wrap lets them
reflow onto as many rows as needed instead. */
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-dropdown {
float: none;
display: inline-block;
vertical-align: top;
}
.vector-menu-tabs-legacy ul {
float: none;
display: flex;
flex-wrap: wrap;
}
.vector-menu-tabs-legacy li {
float: none;
}
#p-personal {
position: static;
text-align: right;
padding: 0.5em 1em;
margin: 0;
right: auto !important;
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;
background: var( --edfm-bg-deep );
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 !important;
margin-right: 0 !important;
max-width: none;
}
.mw-body {
margin-top: 0;
border-width: 0;
padding: 1em;
}
.edfm-status-details {
grid-template-columns: 1fr;
}
/* .toc > ul column count is NOT overridden here -- the dedicated
1150px/560px breakpoints above already cover every width down to
the smallest phones; duplicating a rule here previously fought
those (same specificity, this position in the cascade would have
won and wrongly forced 1 column as low as 561px). */
#firstHeading {
font-size: 1.6rem;
}
.mw-body h2 {
margin-top: 2.25rem;
}
.edfm-eyebrow {
padding-top: 0.9em;
}
}
/* ==========================================================================
16. OOUI DIALOGS -- VisualEditor's save dialog, and any other OOUI
dialog (delete/move/protect confirmations, special-page dialogs).
These render via OOUI's own bundled WikimediaUI theme stylesheet,
entirely outside the .edfm-* component system this file otherwise
covers, so without this they show up starkly white against the rest of
the dark-themed site regardless of any variable/token used elsewhere in
this file. !important is justified the same way as the h1-h6 fix above:
OOUI's own stylesheet loads with equal-or-higher effective specificity,
and this is a correctness/contrast fix, not decoration.
========================================================================== */
.oo-ui-window-frame {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-processDialog {
background: rgba( 7, 9, 11, 0.75 ) !important;
}
.oo-ui-processDialog-navigation,
.oo-ui-window-head,
.oo-ui-window-foot {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-processDialog-title,
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-inputWidget-input {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* VisualEditor's reference dialog embeds a mini target widget for the
reference body. The widget ships with a white WikimediaUI base surface,
so theme that inner editing box separately from the surrounding OOUI
dialog chrome. */
.ve-ui-mwReferenceDialog .ve-ui-targetWidget,
.ve-ui-mwReferenceDialog .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ),
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget,
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-surface,
.ve-ui-mwReferenceDialog .ve-ce-surface,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode,
.ve-ui-mwReferenceDialog .ve-ce-documentNode,
.ve-ui-mwReferenceDialog .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode p,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode li,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode span {
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-targetWidget-focused {
border-color: var( --edfm-cyan ) !important;
box-shadow: inset 0 0 0 1px rgba( 77, 199, 232, 0.42 ) !important;
}
.ve-ui-mwSaveDialog-options,
.oo-ui-panelLayout,
.oo-ui-window-body {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-popupWidget-popup {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-buttonElement:not( .oo-ui-flaggedElement-primary ) > .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
17. OOUI TOOLBAR -- VisualEditor's persistent editing toolbar and its
dropdown menus (Cite, Insert, paragraph style, etc.), and the equivalent
toolbar/popups used when editing a single section. Same root cause as
16. OOUI DIALOGS above (OOUI's own bundled theme, not touched by
anything else in this file), found separately because it's a different
set of OOUI classes (toolbar chrome, not dialog chrome). Icons are not
overridden here and don't need to be -- they're currentColor-based, so
they pick up the text colour set below automatically.
========================================================================== */
.oo-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-tool-title,
.oo-ui-tool-link,
.oo-ui-toolGroup-tools .oo-ui-optionWidget,
.oo-ui-menuOptionWidget,
.oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-optionWidget.oo-ui-optionWidget-selected,
.oo-ui-optionWidget:hover,
.oo-ui-tool:hover .oo-ui-tool-link {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
18. OOUI GENERIC MENUS -- .oo-ui-menuSelectWidget is OOUI's general
dropdown/autocomplete menu class (paragraph-style picker, citation-type
picker, link/media search suggestions, etc.) -- a different class from
the toolbar-specific popups in 17. above, confirmed separately via
computed-style inspection to default to the same white OOUI theme
background.
========================================================================== */
.oo-ui-menuSelectWidget {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-menuOptionWidget {
color: var( --edfm-text ) !important;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget:hover {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
19. OOUI ICONS -- the toolbar/menu icons themselves (Bold, link, list,
Cite, undo/redo, etc.) are rendered as background-image SVGs with a
colour baked into the SVG markup, not currentColor-based masks -- so
16-18 above (which only recolour backgrounds/text) left them dark and
low-contrast against the now-dark surfaces. OOUI ships its own fix for
exactly this, gated behind a narrow accessibility media query
(forced-colors + prefers-color-scheme: dark) that doesn't apply to this
site's own always-on dark theme -- reusing that exact technique
unconditionally rather than inventing a different one. `:not(
.oo-ui-image-invert )` is OOUI's own exclusion for icons already meant
to render light (e.g. on the orange primary-button background) --
inverting those too would flip them back to dark.
========================================================================== */
.oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* ==========================================================================
20. EDIT SOURCE FORM -- MediaWiki core + WikiEditor + CodeMirror

The source editor is not covered by the article/component selectors above:
`action=edit` loads core edit-form CSS, WikiEditor chrome, and sometimes
CodeMirror with their own light neutral surfaces. Force the same EDFM dark
surface stack here so the source page no longer flashes as a white island.
========================================================================== */
.mw-editform,
#editform,
#toolbar,
.editOptions,
.mw-editTools,
.mw-summary-preview,
.mw-datatable,
.wikiEditor-ui,
.wikiEditor-ui-view,
.wikiEditor-ui-text,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-top,
.wikiEditor-ui-controls,
.wikiEditor-ui-tabs,
.wikiEditor-ui-buttons,
.CodeMirror,
.CodeMirror-scroll {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-editform textarea,
#wpTextbox1,
#wpSummary,
#wpSummaryWidget input,
#editform input[type='text'],
#editform input[type='search'],
#editform textarea,
.wikiEditor-ui-text textarea,
.CodeMirror-code,
.CodeMirror-lines,
.CodeMirror pre {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
caret-color: var( --edfm-orange-bright );
}
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .page,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar .options,
.wikiEditor-ui-toolbar .booklet,
.wikiEditor-ui-toolbar .pages,
.CodeMirror-gutters {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text-muted ) !important;
border-color: var( --edfm-border ) !important;
}
.wikiEditor-ui-toolbar a,
.wikiEditor-ui-toolbar .label,
.wikiEditor-ui-toolbar .tab a,
.mw-editTools a,
.editOptions label,
.mw-editform label,
.CodeMirror-linenumber {
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab a:hover,
.wikiEditor-ui-toolbar .tool-button:hover,
.wikiEditor-ui-toolbar .tool-select:hover,
.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-table td,
.CodeMirror-activeline-background {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab.current a,
.wikiEditor-ui-toolbar .section-main,
.CodeMirror-selected {
background: var( --edfm-surface-4 ) !important;
}
.CodeMirror-cursor {
border-left-color: var( --edfm-orange-bright ) !important;
}
.CodeMirror-matchingbracket {
color: var( --edfm-orange-bright ) !important;
}

/* ==========================================================================
21. FILE PAGE CHROME -- #filetoc (the File / File history / File usage /
Metadata nav on File: description pages) is defined in MediaWiki core's
mediawiki.action.view.filepage.less, entirely separate from both the
.edfm-* system and the OOUI fixes in 16-19 above -- a different
subsystem again, only loaded on File: pages, which is why it was never
touched by anything else in this file. Link colour inside it already
correctly inherits the site's normal link blue; only the light neutral
background/border needed overriding.
========================================================================== */
#filetoc {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
22. FILE PAGE: METADATA TABLE + MEDIA VIEWER BUTTON -- #mw_metadata is
the EXIF-style metadata table (separate from the File history table
above -- that one already carries the .wikitable class and picked up
dark styling from 7. TABLES automatically; this one doesn't have that
class, so it never matched). The "Open in Media Viewer" button is a
Codex component (MultimediaViewer extension) -- a third distinct
styling subsystem from OOUI and MediaWiki core skinning, again never
touched by anything else in this file.
========================================================================== */
#mw_metadata th,
#mw_metadata td {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-mmv-view-expanded.cdx-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Core MediaWiki/action buttons: match EDFM dark theme instead of default white/orange controls. */
.mw-ui-button,
.mw-htmlform-submit,
.mw-htmlform-ooui-wrapper button,
#mw-patrol-form button,
#mw-patrol-form input[type="submit"],
form.mw-htmlform button,
form.mw-htmlform input[type="submit"],
input[type="submit"].mw-ui-button,
button.mw-ui-button,
.cdx-button:not( .cdx-button--fake-button--enabled ) {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border: 1px solid var( --edfm-border-strong, var( --edfm-border ) ) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var( --edfm-mono ) !important;
font-weight: 800 !important;
text-shadow: none !important;
}
.mw-ui-button:hover,
.mw-htmlform-submit:hover,
.mw-htmlform-ooui-wrapper button:hover,
#mw-patrol-form button:hover,
#mw-patrol-form input[type="submit"]:hover,
form.mw-htmlform button:hover,
form.mw-htmlform input[type="submit"]:hover,
input[type="submit"].mw-ui-button:hover,
button.mw-ui-button:hover,
.cdx-button:not( .cdx-button--fake-button--enabled ):hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-orange-bright ) !important;
border-color: var( --edfm-orange ) !important;
}
.mw-ui-button:focus,
.mw-htmlform-submit:focus,
.mw-htmlform-ooui-wrapper button:focus,
#mw-patrol-form button:focus,
#mw-patrol-form input[type="submit"]:focus,
form.mw-htmlform button:focus,
form.mw-htmlform input[type="submit"]:focus,
input[type="submit"].mw-ui-button:focus,
button.mw-ui-button:focus,
.cdx-button:not( .cdx-button--fake-button--enabled ):focus {
outline: 2px solid var( --edfm-cyan ) !important;
outline-offset: 2px !important;
}

/* Patrol action: remove the cramped review button from the public article chrome. */
#mw-patrol-form {
display: none !important;
}

/* Frontier news: after removing the repeated dispatch list, keep attribution compact. */
.edfm-news-attribution-compact {
margin-top: 0.35rem;
padding-top: 0.6rem;
}

/* ===========================================================================
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL
=========================================================================== */
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar,
large touch targets, off-canvas navigation, search-forward layout, and
single-column readable article flow -- while preserving EDFM's dark field
manual identity and not copying RuneScape.wiki assets/CSS.
The close button is injected into #mw-panel by Common.js, so it must be
explicitly hidden by default; otherwise a tiny native white button appears
in the desktop sidebar's top-left corner. */
.edfm-mobile-appbar,
.edfm-mobile-scrim,
.edfm-mobile-close-button {
display: none;
}
@media ( max-width: 800px ) {
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var( --edfm-bg-page );
overflow-x: hidden;
}
body.edfm-mobile-menu-open {
overflow: hidden;
}
.edfm-mobile-appbar {
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
position: sticky;
top: 0;
z-index: 1200;
min-height: 56px;
padding: 0 0.35rem;
background:
linear-gradient( 90deg, rgba( 255, 138, 0, 0.18 ), transparent 38% ),
var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.35 );
}
.edfm-mobile-brand {
min-width: 0;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.edfm-mobile-brand::before {
content: 'EDFM // ';
color: var( --edfm-orange );
}
.edfm-mobile-menu-button,
.edfm-mobile-search-button,
.edfm-mobile-close-button {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var( --edfm-text );
font: 700 1.5rem/1 var( --edfm-mono );
cursor: pointer;
}
.edfm-mobile-menu-button:focus-visible,
.edfm-mobile-search-button:focus-visible,
.edfm-mobile-close-button:focus-visible {
outline: 2px solid var( --edfm-cyan );
outline-offset: -4px;
}
.edfm-mobile-menu-button::before {
content: '☰';
color: var( --edfm-orange );
}
.edfm-mobile-search-button::before {
content: '⌕';
font-size: 1.85rem;
color: var( --edfm-cyan );
}
.edfm-mobile-close-button::before {
content: '×';
color: var( --edfm-text );
}
.edfm-mobile-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba( 0, 0, 0, 0.58 );
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
body.edfm-mobile-menu-open .edfm-mobile-scrim {
opacity: 1;
pointer-events: auto;
}
#mw-navigation {
background: var( --edfm-surface-2 );
box-shadow: none;
}
#mw-head {
position: relative;
z-index: 1100;
border-bottom: 1px solid var( --edfm-border );
}
#mw-head .vector-search-box {
display: none;
margin: 0;
padding: 0.65rem;
background: var( --edfm-surface-2 );
border-top: 1px solid var( --edfm-border-soft );
}
body.edfm-mobile-search-open #mw-head .vector-search-box {
display: block;
}
#mw-head .vector-search-box-inner,
#mw-head #searchform {
width: 100%;
}
#mw-head #searchInput {
min-height: 44px;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
#left-navigation,
#right-navigation {
padding: 0 0.45rem 0.35rem;
background: var( --edfm-surface-2 );
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.vector-menu-tabs-legacy ul {
flex-wrap: nowrap;
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-dropdown .vector-menu-heading {
min-height: 36px;
display: inline-flex;
align-items: center;
}
#p-personal {
display: none;
}
#mw-panel {
position: fixed;
top: 0;
left: 0;
z-index: 1300;
width: min( 82vw, 22rem );
height: 100dvh;
box-sizing: border-box;
padding: 0;
background: var( --edfm-surface-1 );
border: 0;
border-right: 1px solid var( --edfm-border );
box-shadow: 18px 0 36px rgba( 0, 0, 0, 0.45 );
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX( -105% );
transition: transform 0.2s ease;
}
body.edfm-mobile-menu-open #mw-panel {
transform: translateX( 0 );
}
#mw-panel::before {
content: 'EDFM Navigation';
display: block;
position: sticky;
top: 0;
z-index: 1;
padding: 1rem 3.4rem 1rem 1rem;
background: var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
color: var( --edfm-orange );
font: 800 0.86rem/1.2 var( --edfm-mono );
letter-spacing: 0.08em;
text-transform: uppercase;
}
#mw-panel .edfm-mobile-close-button {
position: absolute;
top: 0.3rem;
right: 0.35rem;
z-index: 2;
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin: 0;
padding: 0.75rem 0;
border-bottom: 1px solid var( --edfm-border-soft );
}
#mw-panel .vector-menu-heading {
margin: 0.25rem 1rem 0.45rem;
}
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
display: flex;
align-items: center;
min-height: 46px;
box-sizing: border-box;
padding: 0.55rem 1rem;
border-left: 3px solid transparent;
color: var( --edfm-text-muted );
font-size: 1rem;
text-decoration: none;
}
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-content-list li a:focus {
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-cyan );
color: var( --edfm-text );
}
#mw-panel .edfm-nav-current > a,
#mw-panel .edfm-nav-current > a:visited {
background: rgba( 255, 138, 0, 0.12 );
border-left-color: var( --edfm-orange );
color: var( --edfm-orange ) !important;
}
.mw-body {
padding: clamp( 1rem, 4vw, 1.35rem );
font-size: 1rem;
line-height: 1.68;
}
#siteNotice {
margin-bottom: 1rem;
padding-bottom: 0.85rem;
}
#firstHeading {
font-size: clamp( 1.65rem, 8vw, 2.25rem );
line-height: 1.1;
letter-spacing: -0.015em;
}
.mw-body h2 {
font-size: 1.18rem;
line-height: 1.25;
}
.mw-body p,
.mw-body li {
max-width: none;
}
.mw-body img,
.mw-body .thumb,
.mw-body .thumbinner,
.mw-body .thumbimage {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
.mw-body .thumb,
.mw-body .tright,
.mw-body .tleft {
float: none !important;
clear: both;
width: auto !important;
margin: 1rem 0 !important;
}
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.mw-parser-output > table.wikitable th,
.mw-parser-output > table.wikitable td,
.mw-parser-output > table.mw-datatable th,
.mw-parser-output > table.mw-datatable td {
white-space: normal;
min-width: 8rem;
}
.edfm-infobox {
font-size: 0.95rem;
}
.edfm-infobox-row {
display: grid;
grid-template-columns: minmax( 7.5rem, 40% ) 1fr;
gap: 0.5rem;
padding: 0.65rem 0.8rem;
}
.edfm-infobox-label,
.edfm-infobox-value {
width: auto;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tbody,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tr,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type {
overflow: visible;
white-space: normal;
background: transparent;
border: 0;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th {
margin-top: 0.75rem;
border-left: 3px solid var( --edfm-orange );
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
margin-bottom: 0.75rem;
background: var( --edfm-surface-2 );
border-left: 3px solid var( --edfm-border );
}
.mw-footer {
padding: 1rem;
margin-top: 1.5rem;
}
}
@media ( max-width: 430px ) {
.edfm-mobile-brand::before {
content: 'EDFM';
margin-right: 0.45rem;
}
.edfm-mobile-brand {
font-size: 0.88rem;
}
.edfm-infobox-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}

/* 22a. Mobile action tabs refinement: keep Vector's page/discussion/read/
source/history controls available, but put them on one compact horizontal
action rail so the first phone viewport feels like a real mobile app shell
instead of two stacked desktop tab bars. */
@media ( max-width: 800px ) {
body:not( .edfm-mobile-search-open ) #mw-head {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
body:not( .edfm-mobile-search-open ) #left-navigation,
body:not( .edfm-mobile-search-open ) #right-navigation {
flex: 0 0 auto;
clear: none !important;
float: none !important;
width: auto;
padding: 0 0.25rem;
margin: 0 !important;
border-right: 1px solid var( --edfm-border-soft );
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown {
float: none !important;
display: inline-block;
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a,
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a:visited,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown .vector-menu-heading {
min-height: 40px;
padding-left: 0.55rem;
padding-right: 0.55rem;
font-size: 0.68rem;
}
body.edfm-mobile-search-open #mw-head {
display: block;
}
}

/* ===========================================================================
24. HARD OVERRIDE: JUMP TILE LEFT RAIL

The earlier border-left rail can be swallowed by ResourceLoader/cascade or
visually read as part of the tile edge. Draw the rail as a high-specificity
gradient on the actual top-level TOC anchors so it is unmistakable on the
live jump grid.
=========================================================================== */
#toc.toc > ul > li > a,
.mw-parser-output #toc > ul > li > a,
.mw-parser-output .toc > ul > li > a {
background-image: linear-gradient( 90deg, var( --edfm-orange ) 0, var( --edfm-orange ) 6px, transparent 6px ) !important;
border-left: 0 !important;
padding-left: 1rem !important;
}
#toc.toc > ul > li > a:hover,
#toc.toc > ul > li > a:focus-visible,
.mw-parser-output #toc > ul > li > a:hover,
.mw-parser-output #toc > ul > li > a:focus-visible,
.mw-parser-output .toc > ul > li > a:hover,
.mw-parser-output .toc > ul > li > a:focus-visible {
background-image: linear-gradient( 90deg, var( --edfm-cyan ) 0, var( --edfm-cyan ) 6px, transparent 6px ) !important;
}

/* ===========================================================================
25. SOURCE EDIT CONFLICT / WIKITEXT DIFF THEME

Source-edit conflict review uses MediaWiki's diff table classes, not the
normal edit textarea/WikiEditor chrome. Without this, unchanged rows and
inline change pills fall back to stark white/yellow/blue defaults. Keep the
old/new meaning, but render it in EDFM's dark surfaces with restrained
orange/cyan accents.
=========================================================================== */
.mw-parser-output table.diff,
table.diff,
.diff {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-collapse: separate !important;
border-spacing: 0 0.12rem !important;
}
.diff-title,
.diff-otitle,
.diff-ntitle,
#mw-diff-otitle1,
#mw-diff-ntitle1 {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
}
td.diff-lineno,
.diff-lineno {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
border: 0 !important;
padding: 0.35rem 0.5rem !important;
}
td.diff-marker,
.diff-marker {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
padding: 0.25rem 0.45rem !important;
text-align: center;
}
td.diff-context,
td.diff-addedline,
td.diff-deletedline,
.diff-context,
.diff-addedline,
.diff-deletedline,
.mw-diff-inline-context,
.mw-diff-inline-added,
.mw-diff-inline-deleted,
.mw-diff-inline-changed,
.mw-diff-inline-moved {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
font-family: var( --edfm-mono );
box-shadow: none !important;
}
td.diff-context:empty,
td.diff-addedline:empty,
td.diff-deletedline:empty,
.diff-context:empty,
.diff-addedline:empty,
.diff-deletedline:empty {
/* Empty diff cells are alignment placeholders. Keep their card boundary so
the two-column source-conflict diff does not look broken, but make them
compact and neutral instead of tall blank blocks. */
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none !important;
min-height: 0;
padding-top: 0.08rem !important;
padding-bottom: 0.08rem !important;
}
td.diff-deletedline,
.diff-deletedline,
.mw-diff-inline-deleted {
background: rgba( 255, 138, 0, 0.08 ) !important;
border-color: rgba( 255, 138, 0, 0.6 ) !important;
border-left-color: var( --edfm-orange ) !important;
}
td.diff-addedline,
.diff-addedline,
.mw-diff-inline-added {
background: rgba( 66, 199, 217, 0.08 ) !important;
border-color: rgba( 66, 199, 217, 0.6 ) !important;
border-left-color: var( --edfm-cyan ) !important;
}
.diffchange,
.diff-addedline .diffchange,
.diff-deletedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
border-radius: 3px !important;
padding: 0.08rem 0.22rem !important;
font-weight: 700;
text-decoration: none !important;
color: var( --edfm-bg-deep ) !important;
}
.diff-deletedline .diffchange,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
background: var( --edfm-orange-bright ) !important;
}
.diff-addedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins {
background: var( --edfm-cyan ) !important;
}
.mw-explainconflict,
#wpTextbox2,
textarea#wpTextbox2,
textarea.mw-textarea-oldrev {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}

/* Engineer directory portrait chips -- intentionally quiet so table rows still
read like data rows, not card/list hybrids. */
.edfm-engineer-entry {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: max-content;
}
.edfm-engineer-entry .mw-file-element {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var( --edfm-border );
background: var( --edfm-surface-0 );
box-shadow: none;
}
.edfm-engineer-entry__name {
line-height: 1.2;
}

/* Frontier official news feed image treatment */
.edfm-frontier-news .edfm-news-card-art-image {
display: block;
position: relative;
padding: 0;
/* Keep all news thumbnails uniform, including the first/primary story. */
height: 9.5rem;
min-height: 9.5rem;
aspect-ratio: 16 / 9;
background: var( --edfm-surface-4 );
overflow: hidden;
}
.edfm-frontier-news .edfm-news-card-primary .edfm-news-card-art-image {
height: 9.5rem;
min-height: 9.5rem;
}
.edfm-frontier-news .edfm-news-card-art-image > span,
.edfm-frontier-news .edfm-news-card-art-image .mw-default-size,
.edfm-frontier-news .edfm-news-card-art-image .mw-file-description {
display: block !important;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.edfm-frontier-news .edfm-news-card-art-image .mw-file-element {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transition: transform 0.2s ease, filter 0.2s ease;
}
.edfm-frontier-news .edfm-news-card:hover .edfm-news-card-art-image .mw-file-element {
filter: brightness( 1.08 ) contrast( 1.05 );
transform: scale( 1.035 );
}
.edfm-frontier-news .edfm-news-source-badge {
display: inline-flex !important;
align-items: center;
position: absolute !important;
left: 0.8rem !important;
right: auto !important;
bottom: 0.75rem !important;
z-index: 2;
max-width: calc( 100% - 1.6rem );
padding: 0.25rem 0.55rem;
background: rgba( 10, 13, 17, 0.82 );
border: 1px solid rgba( 255, 138, 0, 0.48 );
box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.34 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}

.edfm-news-attribution {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var( --edfm-border-soft );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
line-height: 1.45;
}

/* Patrol action: hide MediaWiki generated patrol footer/link from article chrome. */
.patrollink,
.patrollink[data-mw-interface],
.patrollink .cdx-button,
#mw-content-text + .patrollink,
.mw-parser-output + .patrollink {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* ===========================================================================
2026-08-10 PROSE RAIL SLEDGEHAMMER
=========================================================================== */
/* Plain article prose on EDFM is supposed to occupy the article rail. Keep this
deliberately simple and selector-separated: no comma-list dependency on
advanced :not() parsing, no TemplateStyles scoping, and both physical and
logical width properties so later/readability rules cannot re-cap lines. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > p,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ul,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ol,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > dl {
display: block !important;
width: 100% !important;
max-width: none !important;
inline-size: 100% !important;
max-inline-size: none !important;
box-sizing: border-box !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output p {
max-width: none !important;
max-inline-size: none !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output li,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output dd {
max-width: none !important;
max-inline-size: none !important;
}
/* Restore the intentional compact maintenance notice after the broad prose
override above. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-draft,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-draft {
width: auto !important;
max-width: 44rem !important;
inline-size: auto !important;
max-inline-size: 44rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
EDFM login/register auth surface template alignment
========================================================================== */
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm {
color: var( --edfm-text );
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-label__label__text {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.015em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-Userlogin #userloginForm input[type='text'],
body.mediawiki.mw-special-Userlogin #userloginForm input[type='password'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='text'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='password'] {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 );
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input::placeholder,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-help,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-password-help {
color: var( --edfm-text-muted ) !important;
font-size: 0.88rem;
line-height: 1.45;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
margin-top: 0.85rem;
padding: 0.9rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.12 ), transparent 34% ),
var( --edfm-surface-1 );
border: 1px solid rgba( 255, 138, 0, 0.42 );
border-left: 3px solid var( --edfm-orange );
box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 850;
letter-spacing: 0.04em;
line-height: 1.35;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 0;
margin: 0;
padding: 0.55rem 0.8rem;
background: rgba( 255, 138, 0, 0.1 ) !important;
border: 1px solid var( --edfm-orange ) !important;
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.035 );
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.045em;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:hover,
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:focus-visible {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange-bright ) !important;
color: #10171b !important;
text-decoration: none !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin-top: 0.2rem;
padding: 1.15rem 1.25rem;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.08 ), transparent 38% ),
var( --edfm-surface-1 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-heading {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-size: 1.35rem;
font-weight: 800;
line-height: 1.25;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list {
margin-top: 1rem;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::before {
filter: none !important;
opacity: 0.78 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 1.75rem;
font-weight: 850;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {
color: var( --edfm-text-muted ) !important;
font-size: 0.9rem;
line-height: 1.35;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text {
display: none !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit {
background: var( --edfm-surface-3 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
border-radius: 0 !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 850;
letter-spacing: 0.06em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit:hover,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
body.mediawiki.mw-special-Userlogin #mw-content-text,
body.mediawiki.mw-special-CreateAccount #mw-content-text {
padding-top: 0.55rem;
}
body.mediawiki.mw-special-Userlogin #firstHeading {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-content-text > .mw-ui-container {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm {
width: min( 100%, 34rem ) !important;
margin: 0 auto !important;
padding: 1.15rem 1.2rem 1.25rem !important;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.1 ), transparent 34% ),
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 55% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-userlogin-help {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
margin: 1.05rem auto 0 !important;
max-width: 18rem;
}
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: grid !important;
grid-template-columns: minmax( 19rem, 28rem ) minmax( 20rem, 1fr ) !important;
gap: clamp( 1.4rem, 4vw, 3rem ) !important;
align-items: stretch !important;
width: min( 100%, 76rem ) !important;
max-width: 76rem !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin: 0 !important;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.07 ), transparent 38% ),
linear-gradient( 180deg, rgba( 255, 138, 0, 0.035 ), rgba( 0, 0, 0, 0 ) 54% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm {
padding: 1.15rem 1.2rem 1.25rem !important;
border-left: 3px solid var( --edfm-orange ) !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
padding: clamp( 1.3rem, 2.2vw, 2.05rem ) !important;
border-left: 3px solid var( --edfm-cyan ) !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field {
margin-bottom: 1rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLSubmitField,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLSubmitField {
margin-bottom: 0 !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName {
border-color: rgba( 66, 199, 217, 0.45 ) !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 1px rgba( 66, 199, 217, 0.35 ), 0 0 18px rgba( 66, 199, 217, 0.14 ) !important;
}
@media ( max-width: 860px ) {
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: flex !important;
flex-direction: column !important;
width: min( 100%, 34rem ) !important;
max-width: 34rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
width: 100% !important;
}
}
/* ==========================================================================
EDFM dark thumbnail/frame treatment — 2026-08-13
Keep MediaWiki image captions from falling back to the default white frame.
========================================================================== */
.mw-parser-output .thumb {
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"],
.mw-parser-output figure.mw-halign-right,
.mw-parser-output figure.mw-halign-left,
.mw-parser-output figure.mw-halign-center {
background:
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 56% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 1px solid var( --edfm-border ) !important;
box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbimage,
.mw-parser-output .thumbinner img,
.mw-parser-output figure[typeof~="mw:File/Thumb"] img,
.mw-parser-output figure[typeof~="mw:File/Frame"] img {
background-color: var( --edfm-bg-deep ) !important;
border: 1px solid var( --edfm-border ) !important;
box-sizing: border-box !important;
}
.mw-parser-output .thumbcaption,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption {
background: var( --edfm-surface-1 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim ) !important;
font-size: var( --edfm-fs-small ) !important;
line-height: 1.42 !important;
padding: 0.42rem 0.5rem 0.5rem !important;
}
.mw-parser-output .thumbcaption a,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a {
color: var( --edfm-link ) !important;
}
.mw-parser-output .thumbcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a:hover {
color: var( --edfm-link-hover ) !important;
}
.mw-parser-output .magnify a,
.mw-parser-output .mw-file-magnify {
filter: invert( 1 ) opacity( 0.72 ) drop-shadow( 0 0 2px rgba( 66, 199, 217, 0.28 ) );
}

/* ==========================================================================
EDFM VisualEditor template dialog dark theme — 2026-08-13
Keep template editing dialogs from falling back to white/light OOUI panels.
========================================================================== */
.ve-ui-mwTransclusionDialog,
.ve-ui-mwTransclusionDialog .oo-ui-window-frame,
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .oo-ui-window-body,
.ve-ui-mwTransclusionDialog .oo-ui-window-foot,
.ve-ui-mwTransclusionDialog .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTransclusionDialog .oo-ui-pageLayout,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-content,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
background-color: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu {
background-color: var( --edfm-surface-1 ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterSelectWidget {
background-color: var( --edfm-surface-2 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-widget {
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-field .oo-ui-labelElement-label em,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-undocumentedLabel {
color: var( --edfm-text-muted ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-bg-deep ) !important;
}

/* Additional VE template-dialog color polish — disabled/apply buttons, search,
unused-toggle buttons, and parameter checkboxes. */
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
opacity: 0.82 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget .oo-ui-inputWidget-input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-inputWidget-input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span::before {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
/* EDFM VisualEditor template/infobox popup hard-dark theme — targets the actual
Edit: <template> popup chrome and body, not just article/sidebar chrome. */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active > .oo-ui-window-frame,
.oo-ui-windowManager-modal .oo-ui-processDialog-content,
.oo-ui-windowManager-modal .oo-ui-window-content,
.oo-ui-windowManager-modal .oo-ui-window-body,
.oo-ui-windowManager-modal .oo-ui-window-foot,
.ve-ui-mwTemplateDialog,
.ve-ui-mwTemplateDialog .oo-ui-panelLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-content,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTemplateDialog .oo-ui-pageLayout,
.ve-ui-mwTemplateDialog .ve-ui-mwTemplatePage,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #111b20 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-content > .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-processDialog-navigation,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #1c2a31 !important;
color: #f4f7f8 !important;
border-color: #7f9299 !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-title,
.oo-ui-windowManager-modal .oo-ui-labelElement-label,
.oo-ui-windowManager-modal .oo-ui-fieldLayout-header label,
.oo-ui-windowManager-modal .oo-ui-widget,
.ve-ui-mwTemplateDialog .oo-ui-labelElement-label,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTemplateDialog .oo-ui-fieldsetLayout-header label {
color: #f4f7f8 !important;
}
.oo-ui-windowManager-modal .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-undocumentedLabel,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .mw-widget-titleOptionWidget-description {
color: #a9bbc1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-inputWidget-input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget textarea,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget input,
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
background: #0d1519 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: #42c7d9 !important;
box-shadow: 0 0 0 2px rgba(66,199,217,.32) !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: #25353d !important;
border-color: #52646b !important;
color: #f4f7f8 !important;
box-shadow: none !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: #31454f !important;
border-color: #ff8a00 !important;
color: #ffb347 !important;
}
.oo-ui-windowManager-modal .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: #ff8a00 !important;
border-color: #ff8a00 !important;
color: #111820 !important;
font-weight: 700 !important;
}
.oo-ui-windowManager-modal .oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background: #1c2a31 !important;
border-color: #3f5159 !important;
color: #8fa1a8 !important;
opacity: 1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget:hover,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: #25353d !important;
color: #f4f7f8 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span::before {
background-color: #0d1519 !important;
border-color: #7f9299 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before {
background-color: #ff8a00 !important;
border-color: #ff8a00 !important;
}
/* EDFM cookie preferences banner */
#edfm-cookie-banner {
position: fixed;
z-index: 10000;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: flex;
justify-content: center;
pointer-events: none;
}
#edfm-cookie-banner .edfm-cookie-card {
max-width: 800px;
border: 1px solid rgba(80, 220, 240, 0.65);
background: rgba(3, 14, 22, 0.98);
box-shadow: 0 0 22px rgba(80, 220, 240, 0.22), 0 12px 36px rgba(0, 0, 0, 0.45);
color: #dffbff;
padding: 1rem;
font-size: 0.95rem;
pointer-events: auto;
}
#edfm-cookie-banner .edfm-cookie-title {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fe0ec;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-text { margin: 0 0 0.75rem; line-height: 1.45; }
#edfm-cookie-banner .edfm-cookie-categories {
display: grid;
gap: 0.65rem;
margin: 0.65rem 0 0.85rem;
}
#edfm-cookie-banner .edfm-cookie-category {
border: 1px solid rgba(127, 224, 236, 0.32);
background: rgba(7, 28, 38, 0.74);
padding: 0.7rem;
}
#edfm-cookie-banner .edfm-cookie-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-category h3 {
margin: 0;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f3feff;
}
#edfm-cookie-banner .edfm-cookie-category p {
margin: 0;
line-height: 1.42;
color: #c6e6eb;
}
#edfm-cookie-banner .edfm-cookie-status {
white-space: nowrap;
border: 1px solid rgba(255, 138, 0, 0.7);
color: #ffd69a;
background: rgba(255, 138, 0, 0.12);
padding: 0.2rem 0.48rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#edfm-cookie-banner .edfm-cookie-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-weight: 700;
color: #f3feff;
cursor: pointer;
}
#edfm-cookie-banner .edfm-cookie-switch input {
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color: #ff8a00;
}
#edfm-cookie-banner .edfm-cookie-switch input:focus-visible {
outline: 2px solid #7fe0ec;
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#edfm-cookie-banner button {
border: 1px solid rgba(127, 224, 236, 0.7);
background: rgba(9, 50, 65, 0.92);
color: #f3feff;
padding: 0.45rem 0.7rem;
cursor: pointer;
}
#edfm-cookie-banner button:hover,
#edfm-cookie-banner button:focus-visible {
background: rgba(17, 88, 108, 0.98);
outline: 2px solid rgba(127, 224, 236, 0.85);
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-links { margin-top: 0.6rem; font-size: 0.85rem; }
#edfm-cookie-banner a { color: #7fe0ec; }
@media (max-width: 600px) {
#edfm-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
#edfm-cookie-banner .edfm-cookie-card { max-height: calc(100vh - 1rem); overflow: auto; }
#edfm-cookie-banner .edfm-cookie-category-head { align-items: flex-start; }
#edfm-cookie-banner .edfm-cookie-actions button { flex: 1 1 100%; }
}

/* ==========================================================================
EDFM Vector watchstar dark-theme fix — 2026-08-16
Vector legacy renders the page watch/unwatch affordance as a small SVG
background on `#ca-watch/#ca-unwatch a::before`. On EDFM's dark tab row the
upstream light-skin URLs can be too low-contrast, and some deployments do not
expose ResourceLoader's dotted asset path directly. Use inline SVGs in the
EDFM palette so the watchstar is always visible in the top action menu.
========================================================================== */
.vector-menu-tabs #ca-watch.icon a::before,
.vector-menu-tabs-legacy #ca-watch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2310171b' stroke='%2342c7d9' stroke-width='1.35' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.42 ) );
opacity: 0.96;
}
.vector-menu-tabs #ca-unwatch.icon a::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.2' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 4px rgba( 255, 138, 0, 0.45 ) );
opacity: 0.98;
}
.vector-menu-tabs #ca-watch.icon a:hover::before,
.vector-menu-tabs #ca-watch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-watch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-watch.icon a:focus::before,
.vector-menu-tabs #ca-unwatch.icon a:hover::before,
.vector-menu-tabs #ca-unwatch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:focus::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.25' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 5px rgba( 255, 138, 0, 0.65 ) );
opacity: 1;
}

/* ==========================================================================
EDFM Special:Preferences dark theme fix — 2026-08-16
Preferences is an OOUI/Codex-heavy special page. Core styles bring in a
light tab strip and sticky submit footer, so theme the actual preferences
wrapper rather than only generic form controls.
========================================================================== */
body.mediawiki.mw-special-Preferences #preferences,
body.mediawiki.mw-special-Preferences #mw-prefs-container,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-fieldset-wrapper,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout-framed {
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed {
box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.32 );
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-menu,
body.mediawiki.mw-special-Preferences .oo-ui-menuLayout-menu {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabSelectWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget:hover,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: inset 0 -3px 0 var( --edfm-orange ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header label,
body.mediawiki.mw-special-Preferences .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .mw-prefs-title {
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-description,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-help,
body.mediawiki.mw-special-Preferences .oo-ui-inline-help,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-messages,
body.mediawiki.mw-special-Preferences .htmlform-tip,
body.mediawiki.mw-special-Preferences .mw-htmlform-help {
background: transparent !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownInputWidget select,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownWidget-handle,
body.mediawiki.mw-special-Preferences input[type='text'],
body.mediawiki.mw-special-Preferences input[type='number'],
body.mediawiki.mw-special-Preferences input[type='email'],
body.mediawiki.mw-special-Preferences textarea,
body.mediawiki.mw-special-Preferences select {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-inputWidget-input::placeholder,
body.mediawiki.mw-special-Preferences input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus,
body.mediawiki.mw-special-Preferences input:focus,
body.mediawiki.mw-special-Preferences textarea:focus,
body.mediawiki.mw-special-Preferences select:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox'] {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox']:checked {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
accent-color: var( --edfm-orange );
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit,
body.mediawiki.mw-special-Preferences button,
body.mediawiki.mw-special-Preferences input[type='submit'] {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit:hover,
body.mediawiki.mw-special-Preferences button:hover,
body.mediawiki.mw-special-Preferences input[type='submit']:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
body.mediawiki.mw-special-Preferences #preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .oo-ui-window-foot .mw-htmlform-submit-buttons {
background: rgba( 16, 23, 27, 0.96 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
box-shadow: 0 -10px 24px rgba( 0, 0, 0, 0.34 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-search-highlight,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
background: rgba( 66, 199, 217, 0.18 ) !important;
outline-color: rgba( 66, 199, 217, 0.32 ) !important;
color: var( --edfm-text ) !important;
}

Template:Screenshot license

2026-08-18T18:26:40Z

EDFM Site Maintenance: Restore content + fix stale deprecation pointer: point directly to EDFM image information instead of the also-deprecated Elite Dangerous screenshot (duplicate-info audit; previous save accidentally blanked this page due to a file-permission bug)

<templatestyles src="Template:EDFM style/styles.css" /><div class="edfm-panel edfm-panel-warning">'''Deprecated.''' Use {{tl|EDFM image information}} instead, under a separate <code>== Summary ==</code> section — keep licensing in its own <code>== Licensing ==</code> section via {{tl|License-ED screenshot}} rather than the combined notice this template used to render. See [[Elite Dangerous Field Manual:Image Use Policy]]. This template predates EDFM's licensing system and is kept only so old links/history aren't broken; it isn't used on any file page.</div><noinclude>
== Usage ==
Do not use this template on new uploads — see {{tl|EDFM image information}}.
[[Category:Templates]]
</noinclude>

Template:Screenshot license

2026-08-18T18:25:58Z

EDFM Site Maintenance: Fix stale deprecation pointer: point directly to EDFM image information instead of the also-deprecated Elite Dangerous screenshot (duplicate-info audit)

Main Page

2026-08-18T13:19:24Z

EDFM Site Maintenance: SEO pass: fix semantic H1 (was rendering as 'Main Page'), add page-specific title/description, describe EDFM as a wiki in the About card

{{DISPLAYTITLE:Elite Dangerous Field Manual}}{{SEO
|title = Elite Dangerous Field Manual - Wiki, Guides & Reference
|description = An independent, community-maintained Elite Dangerous wiki with practical guides, engineering references, and up-to-date information for commanders.
}}
<div class="edfm-home-hero">
<div class="edfm-home-hero-kicker">Commander reference hub</div>
<div class="edfm-home-hero-title">Elite Dangerous Field Manual</div>
<div class="edfm-home-hero-text">Current answers, practical procedures, and reliable reference for ''Elite Dangerous'' commanders.</div>
</div>

== Start here ==
<div class="edfm-home-grid edfm-home-grid-four">
<div class="edfm-home-card edfm-home-card-primary">
<div class="edfm-home-card-kicker">New commander</div>
<div class="edfm-home-card-title">[[New Commander Roadmap|Follow the roadmap]]</div>
<div class="edfm-home-card-text">Start with the core path: controls, ship basics, early money, survival, and the first systems worth learning.</div>
</div>
<div class="edfm-home-card">
<div class="edfm-home-card-kicker">Returning player</div>
<div class="edfm-home-card-title">[[Returning Commander Overview|Catch up fast]]</div>
<div class="edfm-home-card-text">Jump back in after time away with the major systems, changed mechanics, and practical next steps.</div>
</div>
<div class="edfm-home-card">
<div class="edfm-home-card-kicker">Need direction</div>
<div class="edfm-home-card-title">[[Start Here|Pick a first objective]]</div>
<div class="edfm-home-card-text">Not sure what to do next? Choose a goal and follow a clear commander-friendly route.</div>
</div>
<div class="edfm-home-card">
<div class="edfm-home-card-kicker">Experienced</div>
<div class="edfm-home-card-title">[[Game Reference|Browse reference]]</div>
<div class="edfm-home-card-text">Go straight to structured reference pages, mechanics, unlocks, tools, and comparison data.</div>
</div>
</div>

== Browse by topic ==
<div class="edfm-home-grid edfm-home-grid-topics">
<div class="edfm-home-card">
<div class="edfm-home-card-kicker">Reference</div>
<div class="edfm-home-card-title">Core knowledge</div>
<div class="edfm-home-link-list">[[Game Reference]] · [[Ships and Equipment]] · [[Engineering]] · [[Odyssey]]</div>
</div>
<div class="edfm-home-card">
<div class="edfm-home-card-kicker">Guides</div>
<div class="edfm-home-card-title">Practical procedures</div>
<div class="edfm-home-link-list">[[Field Procedures]] · [[Engineer Unlock Guide]] · [[Unlocking Broo Tarquin]]</div>
</div>
<div class="edfm-home-card">
<div class="edfm-home-card-kicker">Data</div>
<div class="edfm-home-card-title">Lists and comparisons</div>
<div class="edfm-home-link-list">[[List of Engineers]] · [[Engineer Capability Comparison]] · [[Tools and Resources]]</div>
</div>
<div class="edfm-home-card">
<div class="edfm-home-card-kicker">Game systems</div>
<div class="edfm-home-card-title">Active mechanics</div>
<div class="edfm-home-link-list">[[Powerplay]] · [[Colonisation]] · [[Operations]] · [[Lore and History]]</div>
</div>
</div>

== News and updates ==
{{Frontier News}}

== About EDFM ==

<div class="edfm-home-card edfm-home-card-about">
<div class="edfm-home-card-kicker">Independent, community-maintained field manual</div>
<div class="edfm-home-card-title">About the Elite Dangerous Field Manual</div>
<div class="edfm-home-card-text">'''Elite Dangerous Field Manual''' '''is an independent, community-maintained Elite Dangerous wiki and practical reference. EDFM is actively being developed, with new articles, guides, templates, and reference material added as the project grows.'''</div>
<div class="edfm-home-link-list">[[Elite Dangerous Field Manual:About the Field Manual|About]] · [[Elite Dangerous Field Manual:Contributing|Contributing]] · [[Elite Dangerous Field Manual:Editorial Policy|Editorial Policy]] · [[Elite Dangerous Field Manual:Legal and Trademark Notice|Legal notice]]</div>
</div>

Trade

2026-08-18T13:17:43Z