Elite Dangerous Field Manual - User contributions [en]

MediaWiki:Common.css

2026-08-21T01:11:15Z

Maintenance script: Theme Echo alerts and notices flyouts for EDFM dark UI

/* ==========================================================================
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;
}
/* Only hides it at its original #mw-head location, and only once JS has
confirmed it will actually relocate it into #mw-panel below (Common.js
initMobileChrome) -- nojs visitors still reach login/account through
the earlier stacked-layout #p-personal rule instead, rather than
losing the control outright. */
html.client-js #mw-head #p-personal {
display: none;
}
/* The desktop #p-personal rule further down this file sets
`display: flex` (a plain, unscoped ID selector, so it applies
wherever the element ends up) intended for a wide horizontal header
strip. Left as flex-row inside the narrow drawer, its heading and
list get squeezed to near-zero width by flexbox's default shrink
behaviour and wrap character-by-character. Reset back to normal
block stacking here so it lays out exactly like every other
#mw-panel section (heading, then list, top to bottom). */
#mw-panel #p-personal {
display: block;
text-align: left;
}
#mw-panel #p-personal ul {
display: block;
}
#mw-panel #p-personal li {
margin: 0;
}
/* #p-logo (the wiki logo) lives in #mw-panel on desktop too, so this
has to stay inside this mobile-only block rather than becoming a
bare #mw-panel #p-logo rule -- unlike #p-personal, JS never moves
this one, it's always been here. Confirmed by direct testing: the
combination already on #p-logo elsewhere in this file
(box-sizing:border-box + width:auto + overflow:hidden) ends up
shrink-to-fit instead of filling the available width once this
block's own #mw-panel padding drops to 0 -- forcing an explicit
width sidesteps the ambiguity rather than removing overflow:hidden
(which is there to clip the background-image cleanly) or relying on
auto again. */
#p-logo {
width: 100%;
}
#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;
}

/* ===========================================================================
EDFM external link icon theme fix — 2026-08-20
MediaWiki Vector adds a small external-link background image after external
links. On EDFM's dark theme the stock progressive-blue SVG was too subtle,
leaving a visible gap before punctuation in Sources lists. Replace it with a
currentColor mask so the indicator inherits the site's cyan/hover/visited
external-link colors and remains visible before commas/periods.
========================================================================== */
.mw-parser-output a.external,
.mw-parser-output a.extiw.external {
background-image: none !important;
padding-right: 0 !important;
}
.mw-parser-output a.external::after,
.mw-parser-output a.extiw.external::after {
content: '';
display: inline-block;
width: 0.72em;
height: 0.72em;
margin-left: 0.18em;
margin-right: 0.08em;
vertical-align: 0.04em;
background-color: currentColor;
opacity: 0.9;
-webkit-mask: no-repeat center / contain url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 3h6v6h-2V6.41l-7.29 7.3-1.42-1.42 7.3-7.29H11V3z"/><path d="M5 5h4v2H6v8h8v-3h2v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/></svg>' );
mask: no-repeat center / contain url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 3h6v6h-2V6.41l-7.29 7.3-1.42-1.42 7.3-7.29H11V3z"/><path d="M5 5h4v2H6v8h8v-3h2v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/></svg>' );
}
.mw-parser-output .reference-text a.external::after {
margin-left: 0.2em;
margin-right: 0.12em;
}

/* ===========================================================================
ECHO NOTIFICATIONS / ALERTS -- EDFM dark flyout theme

Echo's alert/notices popups are injected by OOUI after page load and keep
their own default white notification cards unless themed explicitly. Keep
the structure/behavior intact, but make the flyouts match EDFM's dark panel
template: dark chrome, orange active state, cyan focus/link accents, and
muted secondary text.
=========================================================================== */
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup {
background: linear-gradient( 180deg, var( --edfm-surface-2 ) 0%, var( --edfm-surface-1 ) 100% ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 45px rgba( 0, 0, 0, 0.48 ), 0 0 0 1px rgba( 255, 138, 0, 0.08 ) !important;
color: var( --edfm-text ) !important;
}
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head,
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
border-left: 3px solid var( --edfm-orange );
}
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-anchor::before,
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-anchor::after {
border-bottom-color: var( --edfm-surface-2 ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-head .oo-ui-labelElement-label,
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-weight: 700;
}
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-head .oo-ui-iconElement-icon,
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-iconElement-icon,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions .oo-ui-iconElement-icon {
filter: invert( 1 ) hue-rotate( 180deg );
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-notificationsWrapper,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationsListWidget {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget {
background: var( --edfm-surface-1 ) !important;
border-bottom: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-unread {
background: linear-gradient( 90deg, rgba( 255, 138, 0, 0.10 ) 0, var( --edfm-surface-1 ) 30% ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget:hover,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget:focus {
background: var( --edfm-surface-3 ) !important;
box-shadow: inset 3px 0 0 var( --edfm-orange ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-header,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-header a {
color: var( --edfm-text ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-body,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions-timestamp {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-body a,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget a {
color: var( --edfm-link ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-toggleReadCircleButtonWidget-circle {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: 0 0 0 2px rgba( 255, 138, 0, 0.18 );
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-toggleReadCircleButtonWidget-circle-unread {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationsWidget-markAllReadButton > .oo-ui-buttonElement-button,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions .oo-ui-buttonElement-button,
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
text-shadow: none !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationsWidget-markAllReadButton > .oo-ui-buttonElement-button:hover,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions .oo-ui-buttonElement-button:hover,
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-buttonElement-button:hover {
background: rgba( 255, 138, 0, 0.14 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationBadgeController-footer-buttons .oo-ui-buttonElement:last-child {
border-left-color: var( --edfm-border ) !important;
}

/* Special:Notifications uses the same Echo widgets outside the small flyout. */
.mw-special-Notifications .mw-echo-ui-notificationsInboxWidget,
.mw-special-Notifications .mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
background: var( --edfm-bg-page ) !important;
color: var( --edfm-text ) !important;
}
.mw-special-Notifications .mw-echo-ui-notificationItemWidget {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.mw-special-Notifications .mw-echo-ui-notificationItemWidget-content-message-header,
.mw-special-Notifications .mw-echo-ui-notificationItemWidget-content-message-body,
.mw-special-Notifications .mw-echo-ui-notificationItemWidget-content-actions-timestamp {
color: var( --edfm-text ) !important;
opacity: 1 !important;
}

MediaWiki:Common.css

2026-08-20T21:58:40Z

Maintenance script: Theme external link icon for EDFM dark sources lists

MediaWiki:Group-verified-member

2026-08-20T19:05:54Z

Maintenance script: Restore verified group member label

Verified Commander

MediaWiki:Group-verified

2026-08-20T19:05:53Z

Maintenance script: Restore verified group label

Verified Commanders

MediaWiki:Group-verified-member

2026-08-20T18:55:23Z

Maintenance script: Update verified group member label

CMDR Verified Commander

MediaWiki:Group-verified

2026-08-20T18:55:22Z

Maintenance script: Update verified group label

CMDR Verified Commanders

Elite Dangerous Field Manual:Contributing

2026-08-20T17:21:54Z

Maintenance script: Update optional CMDR CAPI verification language

Elite Dangerous Field Manual:Terms of Use

2026-08-20T17:21:53Z

Maintenance script: Update optional CMDR CAPI verification language

Elite Dangerous Field Manual:Privacy Policy

2026-08-20T17:21:52Z

Maintenance script: Update optional CMDR CAPI verification language

Elite Dangerous Field Manual:Cookie Policy

2026-08-17T14:35:43Z

Maintenance script: Update GA4 analytics cookie disclosure

This page explains EDFM's cookies and browser storage.

== Summary ==
EDFM uses first-party cookies/local browser storage needed for login/security, preferences, and optional site-improvement features. EDFM also uses Google Analytics 4 on eligible public pages for anonymous public-content analytics. EDFM does not use advertising cookies, cross-site marketing cookies, Meta Pixel, session replay, Google Signals, remarketing, enhanced conversions, Google Ads audiences, AdSense, or advertising personalization.

== Cookie choices ==
The cookie banner offers:
* '''Accept all''' — enables necessary cookies and optional site-improvement/analytics cookies.
* '''Accept some''' — lets you choose optional site-improvement/analytics cookies.
* '''Reject optional cookies''' — keeps only cookies/storage needed for security, login, account creation, and remembering your cookie choice.

Your cookie choice is stored in your browser's local storage. For server-side features that must know whether optional site-improvement cookies are accepted, EDFM may also set a small first-party consent signal cookie.

Sensitive account, authentication, Frontier OAuth, and user/profile pages are excluded from Google Analytics regardless of cookie choice. Consent can enable Analytics only on pages that are otherwise eligible for public anonymous analytics.

== Strictly necessary cookies ==
These are needed for core site operation and cannot be disabled through the banner without breaking login/security features.

{| class="wikitable"
! Name !! Purpose !! Typical duration
|-
| <code>edwiki_session</code> || MediaWiki session/login/account/security state. || Session
|-
| MediaWiki login/token/user preference cookies || Login state, account preferences, edit tokens, and normal MediaWiki functionality for logged-in users. || Session to persistent, depending on MediaWiki and user choices
|-
| Cloudflare/Turnstile cookies or browser checks || Security, bot/spam prevention, and abuse protection on login/account forms. || Controlled by Cloudflare/security flow
|}

== Optional site-improvement and analytics cookies ==
These help improve navigation, search, public content, and trending/sidebar behavior.

{| class="wikitable"
! Name !! Purpose !! Typical duration
|-
| <code>edfmPopularSearch</code> || Temporarily remembers a search term so EDFM can count which article a visitor lands on after a broad search, powering aggregate Trending Guides behavior. || About 30 minutes
|-
| <code>edfmCookieAnalytics</code> || First-party consent signal used so server-side EDFM code knows optional site-improvement/analytics cookies are allowed. || About 180 days, or until changed/rejected
|-
| <code>_ga</code> and related Google Analytics cookies such as <code>_ga_*</code> || Google Analytics 4 uses these on eligible public pages to distinguish visits/devices for aggregate site-usage analytics. EDFM does not use them for advertising features and does not intentionally send account identifiers to Google Analytics. || Controlled by Google Analytics; commonly up to about 2 years unless cleared or limited by browser settings
|}

If optional site-improvement cookies are rejected, EDFM should not set <code>edfmPopularSearch</code>. Aggregate page-view counts for Trending Guides may still be collected as first-party site functionality without storing visitor IP, username, or account ID in the Trending Guides tables.

== Google Analytics scope ==
Google Analytics is used only for eligible public pages and public search analytics. It may collect ordinary page/event data such as page URL, page title, referrer, traffic source, browser/device information, scrolls, outbound clicks, downloads, and public search engagement.

EDFM's Analytics integration is configured not to emit the GA tag on login, logout, account creation, password reset/recovery, email confirmation, credential changes, preferences/account settings, Frontier/PluggableAuth login or callback pages, old revisions, diffs, redirects, non-existent pages, MediaWiki <code>User:</code>/<code>User talk:</code> pages, equivalent profile/commander-style pages, or requests containing sensitive authentication/account parameters.

EDFM does not intentionally send MediaWiki usernames, MediaWiki numeric user IDs, email addresses, CMDR names, Frontier/FDev identifiers, Discord IDs, OAuth codes, access tokens, refresh tokens, session identifiers, cookies, or comparable account-specific identifiers to Google Analytics.

== Local storage ==
EDFM uses browser local storage to remember the cookie banner choice. Local storage stays in your browser until you clear it or change your cookie preferences.

== Third-party requests ==
EDFM pages may link to outside sites. Login and account pages may load Cloudflare Turnstile from <code>challenges.cloudflare.com</code>. Eligible public pages may load Google Analytics from <code>www.googletagmanager.com</code> and send analytics requests to Google Analytics collection endpoints such as <code>www.google-analytics.com</code> and regional Google Analytics endpoints. External sites, Cloudflare, and Google have their own policies.

== Changing your choice ==
You can change your choice from the cookie banner/preferences control when available, or by clearing site data for <code>edfieldmanual.com</code> in your browser.

== Contact ==
Questions about cookies or privacy: <code>contact@edfieldmanual.com</code>.

Elite Dangerous Field Manual:Privacy Policy

2026-08-17T14:35:42Z

Maintenance script: Update GA4 privacy boundaries

How EDFM handles visitor and contributor data. This page is intended to describe the site's actual operation and planned Frontier integration, not a generic template.

== Summary ==
* EDFM is an independent community project, not an advertising network.
* EDFM does not sell personal information and does not share personal information for behavioural advertising.
* EDFM uses Google Analytics 4 on ordinary public pages to understand anonymous site usage, traffic sources, navigation, search, scroll, outbound-click, download, and public-content engagement trends.
* EDFM does not use Google Analytics as an account/user tracking system and does not intentionally send EDFM usernames, CMDR names, Frontier identifiers, email addresses, account IDs, authentication tokens, or equivalent user-linked identifiers to Google Analytics.
* Anonymous reading normally does not require a persistent EDFM account cookie, though Google Analytics may use its own analytics cookies where analytics is allowed and consented.
* Account, editing, upload, anti-abuse, security, analytics, and optional site-improvement features do involve limited data collection as described below.

== Who operates EDFM ==
''Elite Dangerous Field Manual'' is operated as an independent community project. It is not affiliated with, endorsed by, sponsored by, or reviewed by Frontier Developments plc. See [[Elite Dangerous Field Manual:Legal and Trademark Notice]].

== Information collected automatically ==
When you visit the site, the web server and Cloudflare may process normal connection and request metadata, including IP address, timestamp, requested URL, response status, user agent, and similar technical information. EDFM uses this information for security, abuse prevention, debugging, uptime, and operational diagnostics.

Server access and error logs are rotated automatically. The intended operational retention target is about '''60 days''' unless a longer period is temporarily needed to investigate abuse, security incidents, or outages.

== Cloudflare ==
EDFM is served through Cloudflare for DNS, TLS, reverse proxying, caching, and security filtering. Cloudflare receives request and connection metadata as part of providing those services. Login and account-creation pages may load Cloudflare Turnstile from <code>challenges.cloudflare.com</code> to reduce spam and abuse. EDFM configures Turnstile without intentionally sending the visitor IP from MediaWiki's server-side Turnstile integration, but Cloudflare will still receive information normally sent by a browser loading a Turnstile challenge. See [https://www.cloudflare.com/privacypolicy/ Cloudflare's privacy policy].

== Google Analytics ==
EDFM uses Google Analytics 4 to understand how public EDFM content is being used. This helps with content planning, navigation improvements, search-term analysis, broken-content discovery, downloads, outbound-link review, and public engagement trends.

Analytics is intended for aggregate public-site usage, not account tracking. EDFM's site code is configured so the Google Analytics tag is not emitted on sensitive account, authentication, Frontier OAuth, or user/profile pages. Google Analytics is also not intentionally given MediaWiki usernames, MediaWiki numeric user IDs, email addresses, CMDR names, Frontier/FDev identifiers, Discord IDs, OAuth codes, access tokens, refresh tokens, session identifiers, or comparable account-specific identifiers. EDFM does not hash those identifiers and send the hash to Analytics.

EDFM does not enable Google Signals, advertising personalization, remarketing, enhanced conversions, user-provided data, Google Ads audiences, AdSense, advertising IDs, or cross-device advertising features for the site Analytics integration.

Google Analytics may still process normal browser and request metadata for eligible public pages, such as approximate location inferred by Google from network information, device/browser information, page URL, page title, referrer, events, and analytics cookies or identifiers controlled by Google. See [https://policies.google.com/privacy Google's privacy policy] and [https://support.google.com/analytics/answer/6004245 Google Analytics privacy information].

== Analytics exclusions for account and profile information ==
Google Analytics is not loaded on pages or requests involving login, logout, account creation, password reset/recovery, email confirmation, credential changes, preferences/account settings, Frontier/PluggableAuth login or callback handling, authentication token handling, old revisions, diffs, redirects, non-existent pages, or URLs containing sensitive authentication/account parameters.

Google Analytics is also not loaded on MediaWiki <code>User:</code> or <code>User talk:</code> pages, or on equivalent profile/commander-style namespaces or pseudo-namespaces if present. This avoids sending a username, CMDR name, or profile title as an Analytics page URL or page title.

Public wiki search remains eligible for Analytics because search-term trends are useful for content planning. EDFM does not deliberately enrich search analytics with usernames or account data, and account/authentication/private interfaces remain excluded regardless of any cookie or analytics consent choice.

== Accounts ==
If you create or use a local EDFM account, MediaWiki stores account information needed to operate the wiki, including username, password hash, registration timestamp, edit count, account preferences, and, if provided or later enabled, an email address and email verification status.

Account creation may also offer an optional '''CMDR Name''' field. EDFM stores this in MediaWiki's real-name/profile field. A CMDR Name is optional game-facing identity data, but EDFM treats it as personal data because it may identify a commander or be associated with an account. If provided, it may be used for attribution or account/profile display depending on MediaWiki behavior and EDFM site configuration. Do not enter a real-world name in this field unless you intentionally want that name associated with your EDFM account.

Email may be used for account recovery, account notices, optional notifications, and possible future newsletters or announcements if EDFM enables those features. Newsletter or marketing-style email, if added later, should be optional.

== Public wiki activity ==
If you edit the wiki, upload files, or post on discussion pages, that activity may be public. Public wiki records can include your username, edit summaries, page histories, uploaded files, comments, timestamps, and other contribution metadata. Public contribution history is part of how a wiki preserves attribution and accountability.

If you later request account removal, EDFM's normal approach is to disable or rename the account where appropriate while preserving public edits, file history, and logs needed for attribution, licensing, security, and wiki integrity.

== Uploads ==
Uploaded files and file pages may include uploader name, upload timestamp, file metadata, descriptions, source/licensing information, and any information the uploader includes. Contributors should avoid uploading images containing real-world personal information, private chat logs, private identifiers, or other people's information without permission. See [[Elite Dangerous Field Manual:Image Use Policy]] and [[Elite Dangerous Field Manual:Screenshot Policy]].

== Popular and trending guide data ==
EDFM uses first-party, aggregate site-improvement data to power the '''Trending Guides''' sidebar.

This includes:
* daily page-view counts by wiki page;
* search-to-landing counts that associate a search term with the article a visitor later opens;
* a cached ranked list of popular/trending pages.

The Trending Guides tables are designed to store page IDs, normalized search terms, dates, and aggregate counts. They are not designed to store visitor IP addresses, account IDs, or usernames.

Search-to-landing attribution uses a short-lived first-party cookie only when site-improvement/analytics cookies are accepted. Page-view counts may continue as aggregate, first-party site functionality even if optional cookies are rejected.

== Frontier OAuth and CAPI ==
Frontier OAuth/CAPI support is planned but not fully active until Frontier approves and activates the application credentials.

Frontier's developer documentation describes Frontier Auth as an OAuth2 authorization-code service. When enabled, Frontier login is intended to be an alternative login/register method. EDFM expects to use Frontier authentication data only as needed to sign users in and connect a Frontier identity to an EDFM account. Intended stored or session-handled data may include:
* a stable Frontier customer/account identifier;
* email address, if Frontier provides it and the user authorizes it;
* Frontier account name fields, if required for account display or support;
* linked platform information, such as platform name and third-party user ID, if the user signs in through a linked platform;
* short-lived access token data held server-side for the login/session flow rather than as a public profile item.

Frontier states that real names, email addresses, commander names, gamertags, Steam nicknames, Online IDs, and similar game/platform identities are personally identifiable information. EDFM therefore treats Frontier account, commander, and linked-platform identity data as personal data, even when the identifier is game-facing rather than a real-world name.

EDFM may later request the optional Frontier `capi` scope after login to retrieve Companion API data such as commander name and ship information. CAPI access should be opt-in and user-controlled: users should be able to choose whether commander/ship data is fetched, private, or public. Ship data is intended to be fetched after login or user action and used for optional profile/personalization features, not sold or shared for advertising.

If EDFM stores Frontier refresh tokens for future CAPI sync, they should be stored only server-side, protected from public access, replaced when Frontier rotates them, and removed when the user disconnects Frontier access or when continued refresh is no longer authorized.

If EDFM later changes Frontier/CAPI use beyond login/linking and optional commander or ship data, this policy and the cookie/data audit should be updated before or alongside that change.

== Cookies and local storage ==
See [[Elite Dangerous Field Manual:Cookie Policy]] for the cookie categories, current cookies, Analytics cookies, and consent controls.

== Backups ==
EDFM keeps operational backups for recovery from mistakes, outages, or security incidents. Data removed from the live site may remain in backups until those backups expire under the backup retention policy. Backup retention should be documented and reviewed periodically.

== Third parties ==
EDFM may link to external websites such as Frontier, Creative Commons, MediaWiki, community tools, and source references. Visiting external links is governed by those sites' own policies. Eligible public pages may also load Google Analytics from Google as described above.

== Contact ==
For privacy questions or data requests, contact: <code>contact@edfieldmanual.com</code>.

== Changes to this policy ==
This policy may be updated as EDFM's features change. Material changes should be reflected here and, where appropriate, in [[Elite Dangerous Field Manual:Cookie Policy]] and [[Elite Dangerous Field Manual:Terms of Use]].

File:Frontier News - beneath-surface-your-first-look-rhino.jpg

2026-08-15T09:17:05Z

Maintenance script: Maintenance script uploaded a new version of File:Frontier News - beneath-surface-your-first-look-rhino.jpg

== Summary ==
Frontier Developments article preview image for the auto-updating news module.

MediaWiki:Common.css

2026-08-13T03:56:26Z

Maintenance script: Theme actual VisualEditor template/infobox popup

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

Template:What next

2026-08-12T16:01:15Z

Maintenance script: Fix Guided Encyclopedia template wikitext parsing

<templatestyles src="Template:EDFM style/styles.css" /><div class="edfm-what-next" role="navigation" aria-label="What next">
<div class="edfm-what-next-title">{{{title|What next?}}}</div>
<div class="edfm-what-next-body">
{{{1|}}}
</div>
</div><noinclude>
== Usage ==
Progressive navigation from reference into guidance, or from a guide into deeper articles.
<pre>{{What next|
* New to mining? Continue to [[Laser Mining]].
* Need the module details? Read [[Prospector Limpet Controller]].
}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Callout

2026-08-12T16:01:15Z

Maintenance script: Fix Guided Encyclopedia template wikitext parsing

<templatestyles src="Template:EDFM style/styles.css" /><div class="edfm-guide-callout edfm-guide-callout--{{{type|field-note}}}">
<span class="edfm-guide-callout-label">{{{label|Field note}}}</span>
<div class="edfm-guide-callout-body">
{{{1|}}}
</div>
</div><noinclude>
== Usage ==
Generic Guided Encyclopedia callout. Prefer the wrapper templates when possible: {{tl|Field note}}, {{tl|Tip}}, {{tl|Warning}}, and {{tl|Important}}.
<pre>{{Callout|type=warning|label=Warning|Never fly without rebuy.}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Guide step

2026-08-12T16:01:14Z

Maintenance script: Fix Guided Encyclopedia template wikitext parsing

<templatestyles src="Template:EDFM style/styles.css" /><div class="edfm-guide-step">
<div class="edfm-guide-step-heading"><span class="edfm-guide-step-number">{{{1|Step}}}</span><span class="edfm-guide-step-title">{{{2|Untitled step}}}</span></div>
<div class="edfm-guide-step-body">
{{{3|}}}
</div>
</div><noinclude>
== Usage ==
Numbered walkthrough step. Keep each step focused on one player action or small objective.
<pre>{{Guide step|1|Plot a route|
Open the Galaxy Map, choose a nearby inhabited system, and select Plot Route.
}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Requirements

2026-08-12T16:01:14Z

Maintenance script: Fix Guided Encyclopedia template wikitext parsing

<templatestyles src="Template:EDFM style/styles.css" /><div class="edfm-guide-requirements">
<div class="edfm-guide-requirements-title">{{{title|Before you start}}}</div>
<div class="edfm-guide-requirements-body">
{{{1|}}}
</div>
</div><noinclude>
== Usage ==
Preparation panel for required, recommended, and optional equipment or knowledge. Explain why each item matters.
<pre>{{Requirements|
; Required : A ship with a Frame Shift Drive — every interstellar route depends on it.
; Recommended : Fuel scoop — prevents early fuel mistakes.
; Optional : Docking computer — useful while learning station approach.
}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Guide info

2026-08-12T16:01:13Z

Maintenance script: Fix Guided Encyclopedia template wikitext parsing

<templatestyles src="Template:EDFM style/styles.css" /><div class="edfm-guide-info" role="complementary">
<div class="edfm-guide-info-title">{{{title|At a glance}}}</div>
<div class="edfm-guide-info-body">
{{{1|}}}
</div>
</div><noinclude>
== Usage ==
Flexible quick-reference panel for Guided Encyclopedia articles. Use only fields relevant to the page.
<pre>{{Guide info|title=At a glance|
; Designed for : Brand-new Commanders
; Starting point : Immediately after training
; Required ship : Starter ship
}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

New Commander Roadmap

2026-08-12T16:00:17Z

Maintenance script: Implement Guided Encyclopedia showcase roadmap

{{Article status|status=Draft|mode=Live|uncertainty=Some activity-specific details still need screenshot-backed verification and expansion.}}

The '''New Commander Roadmap''' is a guided progression for a Commander who has just started ''Elite Dangerous''. It is not a mandatory path and it is not a checklist that must be completed before the rest of the game becomes available. ''Elite Dangerous'' is open-ended: the purpose of this roadmap is to help a new Commander become self-sufficient, understand the major systems, and choose a direction with confidence.

Use this page in two ways:

* as a reference for the broad early-game skills a Commander should learn; and
* as a practical walkthrough for what to do next when the galaxy feels too open.

{{Guide info|title=Roadmap at a glance|
; Designed for : Brand-new Commanders
; Starting point : Immediately after training or the first live session
; Required credits : None
; Required ship : Starter ship or any early ship
; Recommended : Complete the flight tutorials and keep enough credits for rebuy
; End state : An independently capable Commander who can choose their own direction
; Progression length : Open-ended; move on when you understand the skill, not when a timer says so
; Related pages : [[Start Here]], [[Field Procedures]], [[Game Reference]], [[Ships and Equipment]], [[Engineering]]
}}

{{Important|This roadmap is guidance, not a required progression route. If you find an activity you enjoy, it is fine to follow that thread early and return to the roadmap later.}}

== Before you start ==
{{Requirements|
; Required : A ship with a working Frame Shift Drive — every interstellar activity depends on travelling between systems.
; Required : Enough credits for rebuy before taking risks — rebuy is the insurance cost to recover your ship after destruction.
; Strongly recommended : Complete the basic flight tutorials — they let you practise movement, docking, and combat without risking your live ship.
; Strongly recommended : Learn where refuel, repair, restock, outfitting, missions, and contacts live in station services.
; Optional : Use docking assistance while learning — it is acceptable to reduce workload while you learn navigation and game systems.
}}

== Phase 1 — Learn to fly ==
The first phase is about control, navigation, and confidence. You do not need a better ship yet. You need to understand how to leave a station, travel somewhere, and return safely.

{{Guide step|1|Complete the flight tutorial|
Open the training section from the main menu and complete the basic flight tutorial. Pay attention to throttle control, landing gear, ship orientation, and the difference between normal space and supercruise. The goal is not mastery; the goal is to make the cockpit feel less unfamiliar before credits and cargo are at risk.
}}

{{Guide step|2|Launch and dock successfully|
Launch from a station, clear the mailslot or pad area, then request docking and land again. During this exercise, learn where the compass dot appears, how speed affects control, and how your ship behaves near large station geometry.

{{Tip|If docking feels stressful, use a docking computer at first. The important early skill is understanding what docking is doing, not proving you can manually land on day one.}}
}}

{{Guide step|3|Travel to another system|
Make your first deliberate interstellar trip.

# Open the Galaxy Map.
# Select a nearby inhabited system.
# Plot a route.
# Return to the cockpit.
# Align with the target shown on your HUD.
# Throttle up and charge the Frame Shift Drive.
# Watch your fuel gauge before and after the jump.
# On arrival, move away from the star before checking panels or maps.

{{Field note|Fuel use is part of navigation. Some stars can be fuel-scooped and some cannot. Main-sequence stars of spectral classes O, B, A, F, G, K, and M are the common scoopable classes; see [[Fuel Scooping]] for the full mechanic.}}
}}

{{Guide step|4|Return and use station services|
Fly back to a station and deliberately use station services. Refuel, repair if needed, inspect the mission board, open outfitting, and check contacts. You are learning where recovery and preparation tools live before you urgently need them.
}}

== Phase 2 — Become self-sufficient ==
A self-sufficient Commander can travel, recover from common mistakes, and prepare a ship for a basic job.

{{Guide step|1|Understand fuel before travelling farther|
Before accepting missions or plotting longer routes, check whether your ship can reach the destination and return. Learn the difference between a single jump, a plotted route, and your total fuel tank endurance.

{{Warning|Running out of fuel can strand your ship. If you are low on fuel, stop taking new risks, look for a station, or learn the [[Fuel Scooping]] process before continuing deeper into unknown systems.}}
}}

{{Guide step|2|Practise a simple station loop|
Pick a nearby station and practise a complete loop: launch, supercruise, approach, request docking, land, refuel, repair, and restock. This loop is the foundation for missions, trading, mining sales, combat recovery, and exploration returns.
}}

{{Guide step|3|Try basic outfitting changes|
Open outfitting and inspect your core internal, optional internal, hardpoint, and utility slots. Do not buy random modules yet. Learn the ideas of module size, module rating, power draw, mass, jump range, shields, and optional internals.

{{Important|A ship is a tool. Early on, understanding why a module is fitted matters more than buying the most expensive part available.}}
}}

{{Guide step|4|Accept a low-risk mission|
Choose a simple mission with a destination you can reach and a consequence you understand. Read the destination, cargo requirements, legality, time limit, and reward before accepting. Complete one mission slowly rather than stacking many missions you do not yet understand.
}}

{{Guide step|5|Learn interdiction and recovery basics|
Sooner or later, another ship may attempt to pull you from supercruise. Learn what the interdiction tunnel looks like, how to submit or evade, and how to escape after dropping into normal space. Link deeper reading to [[Interdiction]] once that article is available or expanded.
}}

== Phase 3 — Try the galaxy ==
This phase introduces careers. The goal is not to choose the best one immediately; the goal is to try several loops and discover what feels rewarding.

{{Guide step|1|Try trading|
Move a small amount of legal cargo between stations. Learn commodity markets, cargo space, supply, demand, profit, and why losing cargo can matter. Continue to [[Trading]] for the full activity.
}}

{{Guide step|2|Try exploration|
Plot a short route away from your starting area, scan systems as you travel, and sell exploration data after returning safely. Notice how jump range, fuel, and route planning affect comfort. Continue to [[Exploration]] and [[Fuel Scooping]].
}}

{{Guide step|3|Try exobiology if you own Odyssey|
Land on a suitable planet, use the Artemis suit and genetic sampler, and turn in biological data. Focus on learning approach, landing, surface movement, and sample spacing rather than maximizing profit. Continue to [[Exobiology]].
}}

{{Guide step|4|Try mining|
Outfit only the basic equipment needed for the type of mining you are attempting. Learn the difference between finding a resource, extracting it, collecting fragments, refining cargo, and selling the commodity. Continue to [[Mining]] and [[Laser Mining]].
}}

{{Guide step|5|Try combat carefully|
Start with low-risk combat training or low-threat targets. Learn pips, shields, hull, hardpoint deployment, target selection, and when to leave. Do not take high-threat combat missions just because the reward looks attractive.

{{Warning|Combat can destroy an early ship quickly. Keep rebuy credits available and leave before shields, hull, or situational awareness are gone.}}
}}

{{Guide step|6|Try on-foot gameplay if you own Odyssey|
Visit a concourse, inspect terminals, take a low-risk legal mission, and learn shuttle or ship travel to settlements. Pay attention to legal status and trespass warnings. Continue to [[Odyssey]] when ready.
}}

== Phase 4 — Build a purpose-built ship ==
After trying a few loops, build a ship for one job instead of forcing one ship to do everything.

{{Guide step|1|Choose one role|
Pick one immediate role: short-range trading, basic exploration, beginner mining, courier missions, or low-risk combat. Define the job before buying modules. A purpose-built ship is easier to understand because every slot has a reason.
}}

{{Guide step|2|Plan around the limiting systems|
For the chosen role, identify what limits the ship.

* Trading cares about cargo capacity, jump range, and survivability.
* Exploration cares about jump range, fuel, scanners, heat, and recovery tools.
* Mining cares about hardpoints, collector/prospector limpets, refinery, cargo, and distributor capacity.
* Combat cares about weapons, distributor, shields or armour, power, and agility.
}}

{{Guide step|3|Upgrade gradually and test|
Make a few changes, then fly the ship. Check power usage, jump range, heat, handling, and whether you forgot a required module. Avoid spending all credits on a build you have not tested.
}}

{{What next|title=Shipbuilding links|
* Learn the slot system in [[Ships and Equipment]].
* Use role pages such as [[Exploration]], [[Mining]], [[Trading]], or [[Combat]] to decide what the ship must carry.
* When engineering becomes relevant, continue to [[Engineering]].
}}

== Phase 5 — Begin engineering ==
Engineering improves ships, but it can become a grind if approached too early as a completion checklist. Treat your first engineering as a targeted upgrade to solve a problem you understand.

{{Guide step|1|Learn what engineering changes|
Engineering modifies modules through blueprints and grades. Experimental effects add one additional special property. The important early idea is simple: choose an upgrade because it helps your ship's job.
}}

{{Guide step|2|Understand materials|
Engineering uses materials rather than normal commodities. Materials have categories, grades, and storage separate from cargo racks. Learn where your material inventory is and how [[Material Trading]] helps convert excess materials into needed ones.
}}

{{Guide step|3|Choose one useful first upgrade|
Pick one practical goal, such as improving Frame Shift Drive range for travel or making a commonly used module more comfortable. Follow the relevant Engineer invitation and unlock requirements rather than trying to unlock every Engineer immediately.
}}

{{Guide step|4|Pin a blueprint when available|
When an Engineer allows it, pin a useful blueprint so future upgrades can be applied remotely. Learn the difference between workshop engineering, remote engineering, grades, and experimental effects.
}}

== Phase 6 — Choose your direction ==
At this point the roadmap stops being linear. You should know how to travel, dock, recover, outfit a ship, try activities, and follow linked references. Choose a direction and let EDFM guide you deeper.

{{What next|title=Choose a route into the Field Manual|
* '''Explore:''' [[Exploration]], [[Exobiology]], [[Fuel Scooping]]
* '''Earn through cargo:''' [[Trading]], [[Mining]], [[Laser Mining]]
* '''Fight:''' [[Combat]], [[Interdiction]], Anti-Xeno combat when prepared
* '''Improve ships:''' [[Ships and Equipment]], [[Engineering]], [[Material Trading]]
* '''Work on progression:''' Federal and Imperial naval progression, [[Engineers]], Guardian technology
* '''Play the galaxy layer:''' [[Powerplay]], Background Simulation, Operations, System Colonisation, Squadrons
* '''Long-term ownership:''' Fleet Carriers and major personal projects
}}

== Common problems ==
; My route says unavailable.
: Your ship may not have enough jump range, the route filter may be unsuitable, or the destination may require a permit. Try a nearer system, check route settings, reduce ship mass, or improve jump range.

; I keep running out of fuel.
: Plot shorter routes, refuel at stations, and learn [[Fuel Scooping]]. Watch both the current tank and the route line before every long trip.

; The station will not let me dock.
: Make sure you are close enough, targeting the station, using the contacts panel correctly, and not blocked by pad size, hostility, or legal status.

; I accepted a mission I cannot finish.
: Read the mission details again. Check destination, cargo, legality, time limit, and required equipment. If the mission is not practical, abandon it and learn what requirement was missed.

; I do not know which career is best.
: There is no single best career. Try several short loops, then build a ship around the activity you actually enjoy.

== When are you no longer a new Commander? ==
There is no official line where a Commander stops being new. A practical sign is independence. You are becoming self-sufficient when you can:

* decide what you want to do;
* determine what ship and equipment are appropriate;
* travel there safely;
* understand your fuel situation;
* recover from common mistakes;
* find the information you need; and
* understand enough of the game's systems to make your own decisions.

{{What next|title=Continue exploring EDFM|
* If you want a broad index, return to the [[Main Page]].
* If you want practical procedures, browse [[Field Procedures]].
* If you want mechanics and reference pages, browse [[Game Reference]].
* If you want to improve ships, start with [[Ships and Equipment]] and [[Engineering]].
}}

[[Category:Guides]]
[[Category:New Commander Content]]

Elite Dangerous Field Manual:Guided Encyclopedia

2026-08-12T15:59:13Z

Maintenance script: Document Guided Encyclopedia article standard

{{Article status|status=Draft|mode=Live}}

The '''Guided Encyclopedia''' is the article and guide standard for the Elite Dangerous Field Manual. EDFM articles should usually answer both of these reader questions on one canonical page:

* '''Reference:''' What is this, how does it work, and why should a Commander care?
* '''Guidance:''' What should I actually do, in what order, and what mistakes should I avoid?

This standard borrows the structural idea of encyclopedia article plus requirements plus walkthrough, but it is not a visual clone of another wiki. Components should feel native to EDFM's dark, compact, field-manual style.

== Philosophy ==
A good EDFM article is a guided encyclopedia entry. It begins with concise reference context, then gives practical preparation and a clear procedure when the subject is actionable. The walkthrough should live on the canonical article unless the guide is a larger journey through several subjects.

Do not assume veteran knowledge. Explain enough for a new Commander to proceed, then link terminology and deeper mechanics to their own EDFM articles rather than re-teaching every system in every guide.

== Article vs guide pages ==
Default behavior: put the walkthrough on the canonical subject article.

Examples that should normally contain their own guidance:

* [[Laser Mining]]
* [[Exobiology]]
* [[Material Trading]]
* [[Fuel Scooping]]
* [[Interdiction]]
* [[Engineering]]
* individual Engineers
* Powerplay mechanics
* Colonisation mechanics

Separate guide pages are for larger objectives that span several independent subjects. Examples:

* [[New Commander Roadmap]]
* [[Guide:Unlocking All Engineers]]
* [[Guide:Preparing for Anti-Xeno Combat]]
* [[Guide:Building Your First Exploration Ship]]
* [[Guide:Starting a Colonisation Project]]

Do not automatically create <code>/Guide</code>, <code>/Quick guide</code>, or <code>Guide:</code> pages for a single subject.

== Normal article anatomy ==
Use only the sections that fit the subject.

# '''Lead''' — what the subject is, what it is used for, why it matters, and essential context.
# '''At a glance''' — a flexible quick-reference panel with relevant fields only.
# '''Before you start''' — required, recommended, and optional preparation, with reasons.
# '''Walkthrough''' — sequential Commander actions.
# '''Common problems''' — troubleshooting linked to relevant mechanics where possible.
# '''Reference material''' — mechanics, tables, variants, locations, rewards, history, notes, see also, and references.
# '''What next?''' — progressive navigation deeper into EDFM or back to a relevant guide.

== Reusable components ==

=== At a glance ===
Use {{tl|Guide info}}. Keep it flexible; do not create a huge infobox with every possible field.

<pre>
{{Guide info|title=At a glance|
; Activity : Laser mining
; Difficulty : Beginner-friendly once outfitted
; Recommended ship : Small or medium ship with mining hardpoints and cargo racks
; Related mechanics : [[Mining]], [[Prospector Limpet Controller]], [[Refinery]]
}}
</pre>

=== Before you start ===
Use {{tl|Requirements}}. Explain why each item matters.

<pre>
{{Requirements|
; Required : Mining laser — extracts fragments from asteroids.
; Strongly recommended : Prospector Limpet Controller — identifies asteroid composition and increases yield.
; Optional : Detailed Surface Scanner — helps find hotspots before entering the ring.
}}
</pre>

=== Walkthrough steps ===
Use {{tl|Guide step}} for substantial steps.

<pre>
{{Guide step|1|Find a suitable ring|
Open the System Map and look for planetary rings with metallic or icy resources. For platinum mining, prefer metallic rings with a platinum hotspot.
}}
</pre>

Steps should be sequential, scannable, and explicit about what the Commander should do.

=== Callouts ===
Use callouts sparingly. Do not turn every paragraph into a colored box.

<pre>
{{Field note|Main-sequence stars of spectral classes O, B, A, F, G, K and M can be fuel-scooped.}}
{{Tip|Plot shorter early routes until you understand fuel usage.}}
{{Important|The roadmap is guidance, not a mandatory progression path.}}
{{Warning|Do not fly a ship you cannot afford to rebuy.}}
</pre>

=== Contextual media ===
Use {{tl|Context media}} when an image belongs beside a specific instruction, not in a bottom gallery.

<pre>
{{Context media|image=Example galaxy map route.png|caption=The Galaxy Map with a short route plotted.|alt=Galaxy Map route plotting screen|
Open the Galaxy Map, select a nearby inhabited system, and choose '''Plot Route'''. Return to the cockpit after the route appears in the navigation panel.
}}
</pre>

Only use screenshots that support the instruction. Avoid decorative images inside procedure steps.

=== What next ===
Use {{tl|What next}} for progressive navigation.

<pre>
{{What next|
* New to mining? Continue with [[Laser Mining]].
* Need module details? Read [[Prospector Limpet Controller]].
* Ready for engineering? Start with [[Engineering]].
}}
</pre>

== Writing style ==
* Write for a Commander who may be performing the activity for the first time.
* Use direct verbs: open, select, plot, launch, dock, scan, sell, refuel.
* Keep paragraphs short inside walkthrough sections.
* Link first-use terminology to deeper articles.
* Avoid unexplained veteran shorthand.
* Keep verified facts distinct from editorial guidance.
* If information is uncertain or not yet reviewed, use the article status system and concise inline notes rather than hiding uncertainty.

== Common problems sections ==
Guides should include troubleshooting when common failure modes exist.

Examples:

* My collector limpets immediately expire.
* The station will not let me dock.
* My Frame Shift Drive says route unavailable.
* My refinery is full.
* The mission target is not appearing.

Explain the likely cause, the immediate fix, and link the relevant deeper mechanic.

== Navigation expectations ==
Guides should lead readers deeper into EDFM. Reference pages should also point back to practical guidance.

Example progression:

[[New Commander Roadmap]] → [[Mining]] → [[Laser Mining]] → [[Prospector Limpet Controller]] → [[Platinum]] → [[Finding Platinum Hotspots]]

A Commander who lands on a reference page from Google should be able to find the practical guide that uses that subject in context.

== Implementation notes for editors ==
* Prefer the templates above rather than raw HTML.
* Use only relevant fields in {{tl|Guide info}} and {{tl|Requirements}}.
* Do not create deep template nesting for ordinary article content.
* Keep screenshots close to the step they explain.
* Preserve EDFM's visual identity: dark panels, compact labels, orange action accents, cyan reference accents.

[[Category:Elite Dangerous Field Manual documentation]]

Template:What next

2026-08-12T15:58:34Z

Maintenance script: Create Guided Encyclopedia reusable component

<templatestyles src="Template:EDFM style/styles.css" /><nav class="edfm-what-next" aria-label="What next">
<div class="edfm-what-next-title">{{{title|What next?}}}</div>
<div class="edfm-what-next-body">{{{1|}}}</div>
</nav><noinclude>
== Usage ==
Progressive navigation from reference into guidance, or from a guide into deeper articles.
<pre>{{What next|
* New to mining? Continue to [[Laser Mining]].
* Need the module details? Read [[Prospector Limpet Controller]].
}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Warning

2026-08-12T15:58:33Z

Maintenance script: Create Guided Encyclopedia reusable component

{{Callout|type=warning|label=Warning|{{{1|}}}}}<noinclude>
== Usage ==
Use for ship loss, mission failure, fines, or similarly serious consequences.
<pre>{{Warning|Do not launch without enough credits to rebuy your ship.}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Tip

2026-08-12T15:58:32Z

Maintenance script: Create Guided Encyclopedia reusable component

{{Callout|type=tip|label=Tip|{{{1|}}}}}<noinclude>
== Usage ==
Efficiency or convenience advice.
<pre>{{Tip|Bind a key for the Galaxy Map before making several jumps.}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Requirements

2026-08-12T15:58:32Z

Maintenance script: Create Guided Encyclopedia reusable component

<templatestyles src="Template:EDFM style/styles.css" /><div class="edfm-guide-requirements">
<div class="edfm-guide-requirements-title">{{{title|Before you start}}}</div>
<div class="edfm-guide-requirements-body">{{{1|}}}</div>
</div><noinclude>
== Usage ==
Preparation panel for required, recommended, and optional equipment or knowledge. Explain why each item matters.
<pre>{{Requirements|
; Required : A ship with a Frame Shift Drive — every interstellar route depends on it.
; Recommended : Fuel scoop — prevents early fuel mistakes.
; Optional : Docking computer — useful while learning station approach.
}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Important

2026-08-12T15:58:31Z

Maintenance script: Create Guided Encyclopedia reusable component

{{Callout|type=important|label=Important|{{{1|}}}}}<noinclude>
== Usage ==
Use for must-understand information that is not necessarily a danger warning.
<pre>{{Important|The roadmap is guidance, not a mandatory progression path.}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Guide step

2026-08-12T15:58:31Z

Maintenance script: Create Guided Encyclopedia reusable component

<templatestyles src="Template:EDFM style/styles.css" /><section class="edfm-guide-step">
<div class="edfm-guide-step-heading"><span class="edfm-guide-step-number">{{{1|Step}}}</span><span class="edfm-guide-step-title">{{{2|Untitled step}}}</span></div>
<div class="edfm-guide-step-body">{{{3|}}}</div>
</section><noinclude>
== Usage ==
Numbered walkthrough step. Keep each step focused on one player action or small objective.
<pre>{{Guide step|1|Plot a route|
Open the Galaxy Map, choose a nearby inhabited system, and select Plot Route.
}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Guide info

2026-08-12T15:58:30Z

Maintenance script: Create Guided Encyclopedia reusable component

<templatestyles src="Template:EDFM style/styles.css" /><div class="edfm-guide-info" role="complementary">
<div class="edfm-guide-info-title">{{{title|At a glance}}}</div>
<div class="edfm-guide-info-body">{{{1|}}}</div>
</div><noinclude>
== Usage ==
Flexible quick-reference panel for Guided Encyclopedia articles. Use only fields relevant to the page.
<pre>{{Guide info|title=At a glance|
; Designed for : Brand-new Commanders
; Starting point : Immediately after training
; Required ship : Starter ship
}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Field note

2026-08-12T15:58:29Z

Maintenance script: Create Guided Encyclopedia reusable component

{{Callout|type=field-note|label=Field note|{{{1|}}}}}<noinclude>
== Usage ==
Context that explains the game without interrupting the walkthrough.
<pre>{{Field note|Main-sequence stars of classes O, B, A, F, G, K and M can be fuel-scooped.}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Context media

2026-08-12T15:58:29Z

Maintenance script: Create Guided Encyclopedia reusable component

<templatestyles src="Template:EDFM style/styles.css" /><div class="edfm-context-media edfm-context-media--{{{align|right}}}">
<div class="edfm-context-media-body">{{{1|}}}</div>{{#if:{{{image|}}}|
<figure class="edfm-context-media-figure">[[File:{{{image}}}|frameless|{{{alt|{{{caption|Context image}}}}}}]]{{#if:{{{caption|}}}|<figcaption class="edfm-context-media-caption">{{{caption}}}</figcaption>}}</figure>}}
</div><noinclude>
== Usage ==
Place screenshots beside the step where they matter. On mobile, text and media stack.
<pre>{{Context media|image=Example.png|caption=Galaxy Map route plotting.|alt=Galaxy Map with a plotted route|
Open the Galaxy Map and choose a nearby destination.
}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:Callout

2026-08-12T15:58:28Z

Maintenance script: Create Guided Encyclopedia reusable component

<templatestyles src="Template:EDFM style/styles.css" /><div class="edfm-guide-callout edfm-guide-callout--{{{type|field-note}}}">
<span class="edfm-guide-callout-label">{{{label|Field note}}}</span>
<div class="edfm-guide-callout-body">{{{1|}}}</div>
</div><noinclude>
== Usage ==
Generic Guided Encyclopedia callout. Prefer the wrapper templates when possible: {{tl|Field note}}, {{tl|Tip}}, {{tl|Warning}}, and {{tl|Important}}.
<pre>{{Callout|type=warning|label=Warning|Never fly without rebuy.}}</pre>
[[Category:Guided Encyclopedia templates]]
</noinclude>

Template:EDFM style/styles.css

2026-08-12T15:58:28Z

Maintenance script: Add Guided Encyclopedia component styles

/* 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-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-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-12T14:47:25Z

Maintenance script: Temporarily remove sidebar Discord CTA styles

MediaWiki:Common.js

2026-08-12T14:47:24Z

Maintenance script: Temporarily remove sidebar Discord CTA

/* 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">UTC</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();
}
}() );

MediaWiki:Authmanager-realname-help

2026-08-11T21:56:51Z

Maintenance script:

Elite Dangerous commander name for attribution.

MediaWiki:Authmanager-realname-label

2026-08-11T21:56:51Z

Maintenance script:

CMDR Name

MediaWiki:Createacct-another-realname-tip

2026-08-11T21:56:50Z

Maintenance script:

CMDR name is optional. If provided, it can be used for attribution on Elite Dangerous Field Manual edits.

MediaWiki:Prefs-help-realname

2026-08-11T21:56:49Z

Maintenance script:

Your CMDR name is optional. If provided, it can be used for attribution on Elite Dangerous Field Manual edits.

MediaWiki:Createacct-realname

2026-08-11T21:56:49Z

Maintenance script:

CMDR Name (optional)

MediaWiki:Common.css

2026-08-11T21:56:48Z

Maintenance script:

Elite Dangerous Field Manual:Adding an Image

2026-08-11T02:50:03Z