MediaWiki:Common.css

/* ============================================================================
   "flip the world" — DARK HUD sci-fi theme
   Target skin: Timeless (site default). MediaWiki 1.43.
   Loaded from MediaWiki:Common.css, so it applies to every skin and every
   namespace; the structural selectors below are Timeless-specific and are
   simply inert under other skins.

   Palette:  bg #0a0f1a / panel #0e1524 / text #c8d6e5
             cyan #35e0ff (structure, links, headings)
             amber #ffb340 (markers, emphasis, keywords)
             mint #7cf6c8 (strings, positive)
   No animation, no scanlines: this wiki is meant to be read.
   ============================================================================ */

:root {
	--sf-bg: #0a0f1a;
	--sf-bg-deep: #060b14;
	--sf-panel: #0e1524;
	--sf-panel-2: #111c2e;
	--sf-panel-3: #16233a;
	--sf-fg: #c8d6e5;
	--sf-fg-dim: #8a9cb2;
	--sf-fg-faint: #63758c;
	--sf-cyan: #35e0ff;
	--sf-cyan-2: #7ceaff;
	--sf-amber: #ffb340;
	--sf-mint: #7cf6c8;
	--sf-red: #ff5f6d;
	--sf-violet: #c9a6ff;
	--sf-line: rgba( 53, 224, 255, 0.22 );
	--sf-line-soft: rgba( 53, 224, 255, 0.09 );
	--sf-glow: 0 0 8px rgba( 53, 224, 255, 0.3 );
	--sf-mono: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Consolas', 'Noto Sans Mono', 'DejaVu Sans Mono', monospace;
	--sf-display: 'Eurostile', 'Bahnschrift', 'DIN Alternate', 'Segoe UI Semibold', 'Noto Sans', sans-serif;
}

/* Native widgets, scrollbars and form controls follow the theme. */
html {
	color-scheme: dark;
	background-color: var(--sf-bg-deep);
}

body {
	background-color: var(--sf-bg-deep);
	color: var(--sf-fg);
}

::selection {
	background: rgba( 53, 224, 255, 0.3 );
	color: #fff;
}

/* ---------------------------------------------------------------- Header -- */

#mw-header-container {
	background: linear-gradient( 180deg, #0b1322 0%, var(--sf-bg) 100% );
	border-bottom: 1px solid var(--sf-line);
}

#mw-header-container.ts-container {
	box-shadow: 0 1px 12px rgba( 0, 0, 0, 0.6 );
}

/* Site title, top left. */
#p-logo-text a {
	color: var(--sf-cyan);
	font-family: var(--sf-display);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: var(--sf-glow);
}

#p-logo-text a:hover {
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 10px rgba( 53, 224, 255, 0.7 );
}

/* The Maker Faire robot is flat red art on a white square. Inverting it turns
   the white to black and the red to cyan; `lighten` then drops the black out
   against the dark header, so it reads as a cyan HUD glyph with no re-upload. */
#p-logo img,
#p-logo a.mw-wiki-logo,
.mw-wiki-logo.timeless-logo {
	max-width: 100%;
	max-height: 80px;
	width: auto;
	height: auto;
}

/* Apply the inversion to the image only — putting it on the <a> as well would
   invert twice and hand the red robot back. */
#p-logo img {
	filter: invert( 1 ) saturate( 1.35 );
	mix-blend-mode: lighten;
}

#p-logo {
	padding: 0.5em 0;
	overflow: hidden;
}

/* Accent stripe under the header: red/blue/green -> cyan/amber HUD bar. */
.color-left {
	background: linear-gradient( 90deg, rgba( 53, 224, 255, 0 ) 0%, var(--sf-cyan) 100% );
}

.color-right {
	background: linear-gradient( 90deg, var(--sf-amber) 0%, rgba( 255, 179, 64, 0 ) 100% );
}

.color-middle {
	background: var(--sf-cyan);
	box-shadow: 0 0 10px rgba( 53, 224, 255, 0.5 );
}

/* ---------------------------------------------------------------- Search -- */

#simpleSearch {
	background: var(--sf-bg-deep);
	border: 1px solid var(--sf-line);
	border-radius: 0;
	box-shadow: inset 0 0 12px rgba( 53, 224, 255, 0.06 );
}

#simpleSearch:focus-within {
	border-color: var(--sf-cyan);
	box-shadow: 0 0 0 1px rgba( 53, 224, 255, 0.35 ), inset 0 0 12px rgba( 53, 224, 255, 0.1 );
}

#searchInput {
	color: var(--sf-fg);
	font-family: var(--sf-mono);
	font-size: 0.9em;
}

#searchInput::placeholder {
	color: var(--sf-fg-faint);
}

/* Skin search glyph is a dark grey SVG; lift it onto the dark field. */
#searchButton,
#mw-searchButton {
	filter: invert( 1 ) brightness( 1.1 );
	opacity: 0.75;
}

.suggestions .suggestions-results,
.suggestions .suggestions-special {
	background: var(--sf-panel-2);
	border: 1px solid var(--sf-line);
	color: var(--sf-fg);
}

.suggestions .suggestions-result {
	color: var(--sf-fg);
}

.suggestions .suggestions-result-current,
.suggestions .suggestions-special.suggestions-result-current {
	background: var(--sf-panel-3);
	color: var(--sf-cyan);
}

/* --------------------------------------------------- Page / content shell -- */

#mw-content-container {
	background-color: var(--sf-bg);
	/* Skin ships a decorative cat as a backdrop; replace with a soft glow. */
	background-image: radial-gradient( 900px 420px at 50% -120px, rgba( 53, 224, 255, 0.08 ), transparent 70% );
	background-repeat: no-repeat;
	background-position: center top;
	border-bottom: 1px solid var(--sf-cyan);
	box-shadow: inset 0 -1px 14px rgba( 53, 224, 255, 0.18 );
}

/* The main reading panel. */
#mw-content {
	background: var(--sf-panel);
	border: 1px solid var(--sf-line);
	border-radius: 0;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.5 ), 0 8px 30px rgba( 0, 0, 0, 0.45 );
	position: relative;
}

/* Corner bracket, top right — HUD framing without clipping any menus. */
#mw-content::before {
	content: '';
	position: absolute;
	top: -1px;
	right: -1px;
	width: 22px;
	height: 22px;
	border-top: 2px solid var(--sf-cyan);
	border-right: 2px solid var(--sf-cyan);
	box-shadow: var(--sf-glow);
	pointer-events: none;
}

#mw-content::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: -1px;
	width: 22px;
	height: 22px;
	border-bottom: 2px solid var(--sf-cyan);
	border-left: 2px solid var(--sf-cyan);
	box-shadow: var(--sf-glow);
	pointer-events: none;
}

/* ------------------------------------------------------------- Sidebars -- */

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
	background: var(--sf-panel-2);
	border: 1px solid var(--sf-line-soft);
	border-radius: 0;
	box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.4 );
}

#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
	background: transparent;
	border-radius: 0;
}

.sidebar-chunk .mw-portlet h3,
#mw-site-navigation h3,
#mw-related-navigation h3,
#personal h3 {
	color: var(--sf-cyan);
	font-family: var(--sf-display);
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--sf-line-soft);
	padding-bottom: 0.35em;
}

/* Leading marker on every nav link. */
.sidebar-chunk .mw-portlet-body li,
#personal-inner .mw-portlet-body li {
	list-style: none;
}

.sidebar-chunk .mw-portlet-body li a::before,
#personal-inner .mw-portlet-body li a::before {
	content: '\203A\00a0';
	color: var(--sf-cyan);
	opacity: 0.55;
}

.sidebar-chunk .mw-portlet-body li a:hover::before {
	opacity: 1;
	color: var(--sf-amber);
}

/* Personal tools dropdown (top right). */
#personal-inner.dropdown,
#personal .dropdown {
	background: var(--sf-panel-2);
	border: 1px solid var(--sf-line);
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.6 );
}

/* ----------------------------------------------------- Page action tabs -- */

#mw-page-header-links .mw-portlet h3,
#mw-page-header-links h3 {
	color: var(--sf-fg-faint);
}

#mw-page-header-links .tools-inline li a {
	color: var(--sf-fg-dim);
	font-family: var(--sf-display);
	font-size: 0.9em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
}

#mw-page-header-links .tools-inline li a:hover {
	color: var(--sf-cyan);
	text-decoration: none;
	border-bottom-color: var(--sf-line);
}

#mw-page-header-links .tools-inline li.selected a,
#mw-page-header-links .tools-inline li.selected a:visited {
	color: var(--sf-cyan);
	border-bottom-color: var(--sf-cyan);
	text-shadow: var(--sf-glow);
}

/* ------------------------------------------------------------ Typography -- */

.mw-body-content {
	line-height: 1.75;
	color: var(--sf-fg);
}

#firstHeading,
.firstHeading {
	color: #eaf6ff;
	font-family: var(--sf-display);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--sf-line);
	padding-bottom: 0.35em;
	text-shadow: 0 0 14px rgba( 53, 224, 255, 0.25 );
}

/* Small callsign above the title. */
#siteSub {
	display: block;
	color: var(--sf-fg-faint);
	font-family: var(--sf-mono);
	font-size: 0.72em;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4 {
	color: var(--sf-cyan);
	font-family: var(--sf-display);
	font-weight: 600;
}

.mw-body-content h2 {
	margin-top: 1.8em;
	padding: 0 0 0.3em 0.7em;
	border-bottom: 1px solid var(--sf-line);
	border-left: 3px solid var(--sf-cyan);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: var(--sf-glow);
	background: linear-gradient( 90deg, rgba( 53, 224, 255, 0.1 ), transparent 55% );
}

.mw-body-content h3 {
	margin-top: 1.4em;
	padding-left: 0.7em;
	color: var(--sf-cyan-2);
	border-left: 2px solid var(--sf-line);
	letter-spacing: 0.04em;
}

.mw-body-content h4 {
	color: var(--sf-fg);
	letter-spacing: 0.04em;
}

.mw-body-content b,
.mw-body-content strong {
	color: #e6f3ff;
}

/* Section [edit] links. */
.mw-editsection,
.mw-editsection a {
	color: var(--sf-fg-faint);
	font-family: var(--sf-mono);
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.mw-editsection a:hover {
	color: var(--sf-amber);
}

/* ----------------------------------------------------------------- Links -- */

.mw-body-content a,
#mw-content a {
	color: var(--sf-cyan);
}

.mw-body-content a:visited,
#mw-content a:visited {
	color: #9bb8ff;
}

.mw-body-content a:hover,
#mw-content a:hover {
	color: #fff;
	text-shadow: var(--sf-glow);
}

.mw-body-content a.new,
#mw-content a.new,
a.new:visited,
.sidebar-chunk a.new {
	color: var(--sf-red);
}

/* External links: drop the skin's blue icon for a HUD arrow. */
.mw-parser-output a.external {
	background-image: none;
	padding-right: 0;
	border-bottom: 1px dotted var(--sf-line);
}

.mw-parser-output a.external::after {
	content: '\2197';
	color: var(--sf-amber);
	font-size: 0.85em;
	padding-left: 0.15em;
	vertical-align: super;
}

/* Sidebar / footer links. */
.sidebar-chunk a,
#personal a,
#mw-footer a,
#catlinks a {
	color: var(--sf-fg-dim);
}

.sidebar-chunk a:hover,
#personal a:hover,
#mw-footer a:hover,
#catlinks a:hover {
	color: var(--sf-cyan);
	text-decoration: none;
}

/* ----------------------------------------------------------------- Lists -- */

.mw-parser-output ul {
	list-style: none;
	padding-left: 1.4em;
}

.mw-parser-output ul > li {
	margin-bottom: 0.4em;
	position: relative;
}

.mw-parser-output ul > li::before {
	content: '\25B8';
	position: absolute;
	left: -1.1em;
	color: var(--sf-amber);
}

/* Nested bullets step down in weight. */
.mw-parser-output ul ul > li::before {
	content: '\25AA';
	color: var(--sf-cyan);
	opacity: 0.7;
}

.mw-parser-output ol {
	padding-left: 1.8em;
}

.mw-parser-output ol > li {
	margin-bottom: 0.4em;
}

.mw-parser-output ol > li::marker {
	color: var(--sf-amber);
	font-family: var(--sf-mono);
}

/* Galleries and TOC keep their own list semantics — no HUD bullets there. */
.mw-parser-output ul.gallery > li::before,
.mw-parser-output #toc ul > li::before,
.mw-parser-output .toc ul > li::before {
	content: none;
}

.mw-parser-output ul.gallery,
.mw-parser-output #toc ul {
	padding-left: 0;
}

/* ------------------------------------------------------------------ Code -- */

.mw-body-content pre,
.mw-highlight pre,
.mw-parser-output pre {
	background: var(--sf-bg-deep);
	color: #dbe7f3;
	border: 1px solid var(--sf-line);
	border-left: 3px solid var(--sf-cyan);
	border-radius: 0;
	padding: 0.9em 1.1em;
	overflow-x: auto;
	font-family: var(--sf-mono);
	font-size: 0.9em;
	line-height: 1.55;
	box-shadow: inset 0 0 24px rgba( 53, 224, 255, 0.05 );
	/* Cut corner, bottom right. */
	clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - 12px ), calc( 100% - 12px ) 100%, 0 100% );
}

.mw-body-content code,
.mw-parser-output code,
.mw-body-content tt {
	background: var(--sf-bg-deep);
	color: var(--sf-mint);
	border: 1px solid var(--sf-line-soft);
	border-radius: 0;
	padding: 0.05em 0.4em;
	font-family: var(--sf-mono);
	font-size: 0.9em;
}

.mw-body-content pre code {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
}

.mw-highlight,
.mw-highlight pre {
	background: var(--sf-bg-deep);
}

/* Pygments ships a light theme (dark green keywords, dark red strings) which is
   unreadable on this background. Remap the tokens the wiki actually uses. */
.mw-highlight .hll { background-color: rgba( 53, 224, 255, 0.12 ); }
.mw-highlight .c,
.mw-highlight .ch,
.mw-highlight .cm,
.mw-highlight .c1,
.mw-highlight .cs,
.mw-highlight .cpf { color: #5f7f95; font-style: italic; }
.mw-highlight .cp { color: var(--sf-amber); }
.mw-highlight .k,
.mw-highlight .kc,
.mw-highlight .kd,
.mw-highlight .kn,
.mw-highlight .kr { color: var(--sf-amber); font-weight: bold; }
.mw-highlight .kp { color: var(--sf-amber); font-weight: normal; }
.mw-highlight .kt { color: #ffd479; font-weight: normal; }
.mw-highlight .s,
.mw-highlight .s1,
.mw-highlight .s2,
.mw-highlight .sa,
.mw-highlight .sb,
.mw-highlight .sc,
.mw-highlight .dl,
.mw-highlight .sd,
.mw-highlight .se,
.mw-highlight .sh,
.mw-highlight .si,
.mw-highlight .sx,
.mw-highlight .sr,
.mw-highlight .ss { color: var(--sf-mint); }
.mw-highlight .m,
.mw-highlight .mb,
.mw-highlight .mf,
.mw-highlight .mh,
.mw-highlight .mi,
.mw-highlight .mo,
.mw-highlight .il { color: #ff9d7a; }
.mw-highlight .nb,
.mw-highlight .bp,
.mw-highlight .na { color: #9fd6ff; }
.mw-highlight .nc,
.mw-highlight .nn { color: var(--sf-cyan); font-weight: bold; }
.mw-highlight .nf,
.mw-highlight .fm { color: var(--sf-cyan); }
.mw-highlight .nt { color: var(--sf-amber); }
.mw-highlight .nv,
.mw-highlight .vc,
.mw-highlight .vg,
.mw-highlight .vi,
.mw-highlight .vm { color: var(--sf-violet); }
.mw-highlight .no { color: #ffd479; }
.mw-highlight .nd,
.mw-highlight .ne { color: #ff8fa3; }
.mw-highlight .o,
.mw-highlight .ow { color: #a9c0d6; }
.mw-highlight .p { color: var(--sf-fg-dim); }
.mw-highlight .err { color: var(--sf-red); border: 1px solid rgba( 255, 95, 109, 0.5 ); }
.mw-highlight .gd { color: var(--sf-red); }
.mw-highlight .gi { color: var(--sf-mint); }
.mw-highlight .go { color: var(--sf-fg-dim); }
.mw-highlight .gr,
.mw-highlight .gt { color: var(--sf-red); }
.mw-highlight .gh,
.mw-highlight .gp,
.mw-highlight .gu { color: var(--sf-cyan); font-weight: bold; }
.mw-highlight .linenos,
.mw-highlight .lineno,
.mw-highlight .linenodiv pre { color: var(--sf-fg-faint); background: transparent; }

/* Copy button shipped by SyntaxHighlight. */
.mw-highlight-copy,
.mw-highlight .mw-highlight-copy {
	background: var(--sf-panel-3);
	border: 1px solid var(--sf-line);
	color: var(--sf-cyan);
}

/* ---------------------------------------------------------------- Tables -- */

.mw-body-content table.wikitable,
.mw-body-content .mw-datatable,
.mw-body-content table.mw_metadata {
	background: var(--sf-panel-2);
	color: var(--sf-fg);
	border: 1px solid var(--sf-line);
	border-collapse: collapse;
}

.mw-body-content table.wikitable > tr > th,
.mw-body-content table.wikitable > * > tr > th,
.mw-body-content .mw-datatable th,
.mw-body-content table.mw_metadata th {
	background: var(--sf-panel-3);
	color: var(--sf-cyan);
	border: 1px solid var(--sf-line);
	font-family: var(--sf-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mw-body-content table.wikitable > tr > td,
.mw-body-content table.wikitable > * > tr > td,
.mw-body-content .mw-datatable td,
.mw-body-content table.mw_metadata td {
	border: 1px solid var(--sf-line-soft);
}

.mw-body-content table.wikitable > * > tr:hover > td {
	background: rgba( 53, 224, 255, 0.05 );
}

/* The pin-out tables (Raspberry Pi) set cell fills inline. Those fills split
   into light and dark, so each needs its own text colour — a single blanket
   rule leaves half the pin numbers invisible. Values enumerated from the
   wikitext: cyan / #00FF80 / magenta / yellow / orange are light; black, green
   and red are dark. */
.mw-parser-output td[style*="#00FFFF" i],
.mw-parser-output td[style*="#00FF80" i],
.mw-parser-output td[style*="#FF00FF" i],
.mw-parser-output td[style*="cyan" i],
.mw-parser-output td[style*="yellow" i],
.mw-parser-output td[style*="orange" i],
.mw-parser-output td[style*="white" i],
.mw-parser-output th[style*="#00FFFF" i],
.mw-parser-output th[style*="yellow" i] {
	color: #06121f !important;
}

.mw-parser-output td[style*="black" i],
.mw-parser-output td[style*="green" i],
.mw-parser-output td[style*="red" i],
.mw-parser-output td[style*="blue" i],
.mw-parser-output td[style*="navy" i],
.mw-parser-output td[style*="purple" i] {
	color: #ffffff !important;
}

.mw-parser-output td[style*="background" i] a,
.mw-parser-output th[style*="background" i] a {
	color: inherit !important;
	text-decoration: underline;
}

/* Inline red text (used as a warning marker on a handful of pages) is too dark
   against this background — lift it without changing the wikitext. */
.mw-parser-output [style*="color:red"],
.mw-parser-output [style*="color: red"],
.mw-parser-output [style*="color:#FF0000"],
.mw-parser-output [style*="color:#ff0000"],
.mw-parser-output [style*="color: #FF0000"] {
	color: var(--sf-red) !important;
}

/* ---------------------------------------------------- Images & galleries -- */

.mw-body-content .thumbinner,
.mw-parser-output .thumbinner {
	background: var(--sf-panel-2);
	border: 1px solid var(--sf-line);
	border-radius: 0;
	box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.45 );
}

.mw-body-content .thumbimage,
.mw-parser-output .thumbimage {
	background: var(--sf-bg-deep);
	border: 1px solid var(--sf-line-soft);
}

.mw-body-content .thumbcaption,
.mw-parser-output .thumbcaption {
	color: var(--sf-fg-dim);
	font-family: var(--sf-mono);
	font-size: 0.85em;
	line-height: 1.5;
}

/* Enlarge icon is a dark grey SVG. */
.mw-body-content .magnify a,
.mw-parser-output .magnify a {
	filter: invert( 1 ) brightness( 1.1 );
	opacity: 0.7;
}

.mw-body-content ul.gallery {
	margin: 1.4em 0 2em;
}

.mw-body-content .gallerybox div.thumb {
	background: var(--sf-panel-2);
	border: 1px solid var(--sf-line);
	border-radius: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mw-body-content .gallerybox:hover div.thumb {
	border-color: var(--sf-cyan);
	box-shadow: 0 0 14px rgba( 53, 224, 255, 0.35 );
}

.mw-body-content .gallerybox .thumb img {
	border-radius: 0;
	box-shadow: none;
}

.mw-body-content .gallerybox .gallerytext {
	font-size: 0.88em;
	color: var(--sf-fg-dim);
	padding-top: 0.5em;
}

/* ------------------------------------------------------------------- TOC -- */

#toc,
.toc,
.toccolours {
	background: var(--sf-bg-deep);
	border: 1px solid var(--sf-line);
	border-radius: 0;
	box-shadow: inset 0 0 20px rgba( 53, 224, 255, 0.05 );
}

#toc .toctitle h2,
.toc .toctitle h2,
#mw-toc-heading {
	color: var(--sf-cyan);
	font-family: var(--sf-display);
	font-size: 0.85em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border: 0;
	background: none;
	padding: 0;
	text-shadow: none;
}

#toc .tocnumber,
.toc .tocnumber {
	color: var(--sf-amber);
	font-family: var(--sf-mono);
}

#toc .toctext,
.toc .toctext {
	color: var(--sf-fg);
}

/* ------------------------------------------------- Categories & footer -- */

#catlinks,
.catlinks {
	background: var(--sf-bg-deep);
	border: 1px solid var(--sf-line-soft);
	border-left: 3px solid var(--sf-amber);
	border-radius: 0;
	color: var(--sf-fg-dim);
}

#catlinks .mw-normal-catlinks > a {
	color: var(--sf-amber);
	font-family: var(--sf-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.85em;
}

#mw-footer-container,
#mw-footer {
	background: var(--sf-bg-deep);
	color: var(--sf-fg-faint);
	border-top: 1px solid var(--sf-line);
}

#mw-footer li,
#footer-info li {
	color: var(--sf-fg-faint);
	font-family: var(--sf-mono);
	font-size: 0.82em;
}

/* -------------------------------------------------- Forms / editing UI -- */

textarea,
#wpTextbox1,
.mw-editform textarea {
	background: var(--sf-bg-deep);
	color: var(--sf-fg);
	border: 1px solid var(--sf-line);
	border-radius: 0;
	caret-color: var(--sf-cyan);
	font-family: var(--sf-mono);
}

textarea:focus,
#wpTextbox1:focus {
	border-color: var(--sf-cyan);
	box-shadow: 0 0 0 1px rgba( 53, 224, 255, 0.3 );
	outline: 0;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
select {
	background: var(--sf-bg-deep);
	color: var(--sf-fg);
	border: 1px solid var(--sf-line);
	border-radius: 0;
}

.mw-editform #wpSummary,
#wpSummary {
	background: var(--sf-bg-deep);
	color: var(--sf-fg);
	border: 1px solid var(--sf-line);
}

/* Preview / diff / history and message boxes. */
table.diff,
table.diff td,
.mw-diff-table {
	background: transparent;
	color: var(--sf-fg);
}

td.diff-context,
.diff-context {
	background: var(--sf-panel-2);
	color: var(--sf-fg-dim);
	border-color: var(--sf-line-soft);
}

td.diff-deletedline,
.diff-deletedline {
	background: rgba( 255, 95, 109, 0.12 );
	border-color: rgba( 255, 95, 109, 0.4 );
}

td.diff-addedline,
.diff-addedline {
	background: rgba( 124, 246, 200, 0.12 );
	border-color: rgba( 124, 246, 200, 0.4 );
}

.diff-deletedline .diffchange {
	background: rgba( 255, 95, 109, 0.35 );
	color: #fff;
}

.diff-addedline .diffchange {
	background: rgba( 124, 246, 200, 0.3 );
	color: #06121f;
}

.mw-message-box,
.mw-message-box-warning,
.mw-message-box-error,
.mw-message-box-success,
.warningbox,
.errorbox,
.successbox,
.mw-warning,
#mw-content .mw-message-box {
	background: var(--sf-panel-2);
	color: var(--sf-fg);
	border: 1px solid var(--sf-line);
	border-left: 3px solid var(--sf-amber);
	border-radius: 0;
}

.mw-message-box-error,
.errorbox {
	border-left-color: var(--sf-red);
}

.mw-message-box-success,
.successbox {
	border-left-color: var(--sf-mint);
}

/* Special: pages and search results ride on .mw-body-content, but a few bits
   carry their own light backgrounds. */
.mw-search-result-heading,
.searchresult {
	color: var(--sf-fg);
}

.mw-search-results li {
	border-bottom: 1px solid var(--sf-line-soft);
	padding-bottom: 0.5em;
}

.mw-changeslist-line,
.mw-changeslist td,
.mw-changeslist th,
.mw-history-histlinks {
	color: var(--sf-fg);
}

/* ------------------------------------------------- Narrow viewports (Timeless
   switches to its stacked layout with drop-down menus at 850px) -- */

@media screen and ( max-width: 850px ) {
	#mw-header-container {
		background: var(--sf-bg);
	}

	/* Menu / user / tools toggles are dark grey SVGs on a dark bar. */
	#user-tools h2,
	.sidebar-chunk h2,
	#ca-more span,
	#ca-languages span,
	.tools-inline li a {
		filter: invert( 1 ) brightness( 1.15 );
	}

	.sidebar-inner,
	.dropdown {
		background: var(--sf-panel-2);
		border: 1px solid var(--sf-line);
		box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.7 );
	}

	/* Backdrop behind an open menu was a light wash. */
	#menus-cover {
		background: #02060d;
		opacity: 0.82;
	}

	#mw-content {
		border-left: 0;
		border-right: 0;
	}

	#mw-content::before,
	#mw-content::after {
		display: none;
	}
}

/* --------------------------------------------------------------- Printing -- */

@media print {
	/* Never print the dark theme — it wastes toner and reads badly on paper. */
	body,
	#mw-content,
	#mw-content-container,
	.mw-body-content,
	#toc,
	.toc,
	#catlinks,
	.mw-parser-output pre,
	.mw-body-content pre,
	.mw-highlight pre,
	.mw-parser-output code,
	.thumbinner {
		background: #fff !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	.mw-body-content h2,
	.mw-body-content h3,
	#firstHeading {
		color: #000 !important;
		background: none !important;
		text-shadow: none !important;
	}

	#p-logo img {
		filter: none !important;
		mix-blend-mode: normal !important;
	}

	#mw-content::before,
	#mw-content::after {
		display: none !important;
	}
}