MediaWiki:Vector-2022.css

/* The Perfect Tower II wiki: skin theme for Vector 2022.
 *
 * Brand values come from the TPT2 Community Brand Kit. The server loads tpt.css and the MediaWiki
 * adapter (tpt-mediawiki.css) before this page, so every --tpt-* token already follows the reader's
 * Appearance choice (day, night, automatic). This file only maps the skin onto those tokens:
 * use var(--tpt-*), never a copied colour value.
 *
 * Source: wiki repository, onwiki/MediaWiki/Vector-2022.css.
 */

/* ---------- Skin colours -> brand tokens ---------- */
/* One block for every theme: the tokens switch, the mapping does not. html:root ties Vector's
   night/OS rules on specificity and wins because site CSS loads later. Print keeps Vector's light values. */
@media screen {
	html:root,
	html .notheme,
	html .skin-invert {
		--color-base: var(--tpt-ink);
		--color-base-fixed: var(--tpt-ink);
		--color-base--hover: var(--tpt-ink);
		--color-base--subtle: var(--tpt-ink-subtle);
		--color-emphasized: var(--tpt-ink);
		--color-subtle: var(--tpt-ink-muted);
		--color-placeholder: var(--tpt-ink-subtle);
		--color-disabled: var(--tpt-ink-subtle);
		--color-inverted: var(--tpt-bg);
		--color-inverted-fixed: var(--tpt-on-accent);
		--color-progressive: var(--tpt-accent);
		--color-progressive--hover: var(--tpt-accent);
		--color-progressive--active: var(--tpt-accent);
		--color-progressive--focus: var(--tpt-accent);
		--color-visited: var(--tpt-accent);
		--color-destructive: var(--tpt-danger);
		--color-destructive--hover: var(--tpt-danger);
		--color-destructive--active: var(--tpt-danger);
		--color-destructive--focus: var(--tpt-danger);
		--color-destructive--visited: var(--tpt-danger);
		--color-link-red: var(--tpt-danger);
		--color-link-red--hover: var(--tpt-danger);
		--color-link-red--active: var(--tpt-danger);
		--color-link-red--focus: var(--tpt-danger);
		--color-link-red--visited: var(--tpt-danger);
		--color-error: var(--tpt-danger);
		--color-warning: var(--tpt-warning);
		--color-success: var(--tpt-success);
		--color-notice: var(--tpt-ink);
		--color-content-added: var(--tpt-success);
		--color-content-removed: var(--tpt-danger);

		--background-color-base: var(--tpt-bg);
		--background-color-base-fixed: var(--tpt-surface);
		--background-color-neutral: var(--tpt-surface-alt);
		--background-color-neutral-subtle: var(--tpt-surface);
		--background-color-interactive: var(--tpt-surface-alt);
		--background-color-interactive-subtle: var(--tpt-surface);
		--background-color-disabled: var(--tpt-surface-alt);
		--background-color-disabled-subtle: var(--tpt-surface);
		--background-color-inverted: var(--tpt-ink);
		--background-color-progressive: var(--tpt-accent-fill);
		--background-color-progressive--hover: var(--tpt-brand-sun);
		--background-color-progressive--active: var(--tpt-accent-fill);
		--background-color-progressive--focus: var(--tpt-accent-fill);
		--background-color-progressive-subtle: color-mix(in srgb, var(--tpt-accent-fill) 14%, var(--tpt-bg));
		--background-color-destructive: var(--tpt-danger);
		--background-color-destructive--hover: var(--tpt-danger);
		--background-color-destructive--active: var(--tpt-danger);
		--background-color-destructive--focus: var(--tpt-danger);
		--background-color-destructive-subtle: color-mix(in srgb, var(--tpt-danger) 14%, var(--tpt-bg));
		--background-color-error: var(--tpt-danger);
		--background-color-error--hover: var(--tpt-danger);
		--background-color-error--active: var(--tpt-danger);
		--background-color-error-subtle: color-mix(in srgb, var(--tpt-danger) 14%, var(--tpt-bg));
		--background-color-warning-subtle: color-mix(in srgb, var(--tpt-warning) 14%, var(--tpt-bg));
		--background-color-success-subtle: color-mix(in srgb, var(--tpt-success) 14%, var(--tpt-bg));
		--background-color-notice-subtle: var(--tpt-surface);
		--background-color-content-added: color-mix(in srgb, var(--tpt-success) 20%, var(--tpt-bg));
		--background-color-content-removed: color-mix(in srgb, var(--tpt-danger) 20%, var(--tpt-bg));
		--background-color-transparent: transparent;
		--background-color-backdrop-light: color-mix(in srgb, var(--tpt-bg) 65%, transparent);
		--background-color-backdrop-dark: color-mix(in srgb, var(--tpt-outline) 65%, transparent);
		--background-color-button-quiet--hover: var(--tpt-surface-alt);
		--background-color-button-quiet--active: var(--tpt-line);
		--background-color-input-binary--checked: var(--tpt-accent-fill);
		--background-color-tab-list-item-framed--hover: var(--tpt-surface-alt);
		--background-color-tab-list-item-framed--active: var(--tpt-surface-alt);

		--border-color-base: var(--tpt-line-strong);
		--border-color-subtle: var(--tpt-line);
		--border-color-muted: var(--tpt-line);
		--border-color-divider: var(--tpt-line);
		--border-color-interactive: var(--tpt-line-strong);
		--border-color-disabled: var(--tpt-line);
		--border-color-inverted: var(--tpt-bg);
		--border-color-progressive: var(--tpt-accent-fill);
		--border-color-progressive--hover: var(--tpt-accent-fill);
		--border-color-progressive--active: var(--tpt-accent-fill);
		--border-color-progressive--focus: var(--tpt-focus);
		--border-color-destructive: var(--tpt-danger);
		--border-color-destructive--hover: var(--tpt-danger);
		--border-color-destructive--active: var(--tpt-danger);
		--border-color-destructive--focus: var(--tpt-focus);
		--border-color-error: var(--tpt-danger);
		--border-color-error--hover: var(--tpt-danger);
		--border-color-warning: var(--tpt-warning);
		--border-color-success: var(--tpt-success);
		--border-color-notice: var(--tpt-line-strong);
		--border-color-content-added: var(--tpt-success);
		--border-color-content-removed: var(--tpt-danger);
		--border-color-transparent: transparent;
		--border-color-input--hover: var(--tpt-ink-muted);
		--border-color-input-binary: var(--tpt-line-strong);
		--border-color-input-binary--hover: var(--tpt-ink-muted);
		--border-color-input-binary--active: var(--tpt-accent-fill);
		--border-color-input-binary--focus: var(--tpt-focus);
		--border-color-input-binary--checked: var(--tpt-accent-fill);
		--outline-color-progressive--focus: var(--tpt-focus);

		--box-shadow-color-base: var(--tpt-outline);
		--box-shadow-color-progressive--active: var(--tpt-accent-fill);
		--box-shadow-color-progressive--focus: var(--tpt-focus);
		--box-shadow-color-progressive-selected: var(--tpt-accent-fill);
		--box-shadow-color-progressive-selected--hover: var(--tpt-accent-fill);
		--box-shadow-color-progressive-selected--active: var(--tpt-accent-fill);
		--box-shadow-color-destructive--focus: var(--tpt-focus);
		--box-shadow-color-inverted: var(--tpt-bg);
		--box-shadow-color-transparent: transparent;

		--filter-invert-icon: invert(1);
		--filter-invert-primary-button-icon: none;
	}

	/* Skin icons are dark masks: invert them only on dark grounds. */
	html.skin-theme-clientpref-day,
	html .notheme,
	html .skin-invert {
		--filter-invert-icon: none;
	}
}

@media screen and (prefers-color-scheme: light) {
	html.skin-theme-clientpref-os {
		--filter-invert-icon: none;
	}
}

/* ---------- Type ---------- */
html,
body {
	font-family: var(--tpt-font-body);
}

.vector-feature-custom-font-size-clientpref-1 {
	--line-height-medium: 1.625; /* 16/26, the kit's body text */
}

.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2,
.mw-body-content .mw-heading2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
	font-family: var(--tpt-font-heading);
	color: var(--tpt-ink);
}

pre,
code,
tt,
kbd,
samp,
.mw-code {
	font-family: var(--tpt-font-mono);
}

.mw-editsection,
.mw-editsection-like {
	font-family: var(--tpt-font-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Page title: the one Oxanium line per view. */
.mw-body h1.firstHeading,
.mw-body .firstHeading {
	font-family: var(--tpt-font-display);
	font-weight: 800;
	font-size: 2.75rem; /* 44px */
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0;
	text-wrap: balance;
	border: 0;
	padding: 4px 0 2px;
}

@media screen and (max-width: 719px) {
	.mw-body h1.firstHeading,
	.mw-body .firstHeading {
		font-size: 2rem; /* 32px */
	}
}

.vector-page-titlebar {
	box-shadow: none;
	border-bottom: 0;
	padding-top: 8px;
}

.vector-page-titlebar::after {
	display: none;
}

/* Article headings. */
.mw-body-content h2,
.mw-body-content .mw-heading2 h2 {
	font-weight: 600;
	font-size: 1.75rem; /* 28px */
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 2.25rem 0 1rem;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--tpt-line);
}

.mw-body-content .mw-heading2 {
	border-bottom: 1px solid var(--tpt-line);
	margin: 2.25rem 0 1rem;
	padding-bottom: 10px;
}

.mw-body-content .mw-heading2 h2 {
	border: 0;
	margin: 0;
	padding: 0;
}

.mw-body-content h3,
.mw-body-content .mw-heading3 h3 {
	font-weight: 600;
	font-size: 1.3125rem; /* 21px */
	line-height: 1.35;
	margin-top: 1.75rem;
}

.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
	font-weight: 500;
	font-size: 1.0625rem; /* 17px */
	letter-spacing: .02em;
}

.mw-body-content h1 {
	font-weight: 600;
	text-transform: uppercase;
}

/* Prose stays at the kit's 720px measure; tables, galleries and navboxes may use the full column. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > blockquote {
	max-width: var(--tpt-size-measure);
}

.mw-body-content a:not(.mw-file-description):not(.image) {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.mw-body-content a:not(.mw-file-description):not(.image):hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* ---------- Header ---------- */
/* Surface with the kit's 3px ember-to-sun strip (.tpt-header::before). Painted as a background layer
   because .mw-header is a positioned, z-indexed child that would cover a pseudo-element. */
.vector-header-container {
	background:
		linear-gradient(90deg, var(--tpt-brand-ember), var(--tpt-brand-sun)) top left / 100% 3px no-repeat,
		var(--tpt-surface);
	border-bottom: 1px solid var(--tpt-line);
}

.vector-header-container .mw-header {
	background: transparent;
	min-height: 64px;
	padding-top: 3px;
}

.vector-header-container .vector-sticky-header {
	background:
		linear-gradient(90deg, var(--tpt-brand-ember), var(--tpt-brand-sun)) top left / 100% 3px no-repeat,
		var(--tpt-surface);
	border-bottom: 1px solid var(--tpt-line);
	min-height: 56px;
	padding-top: 3px;
}

.mw-header {
	align-items: center;
}

/* Phones: logo left, search and menus right, on one row. Below 640px Vector stacks the two halves
   (.vector-header { flex-flow: column }) and stretches both to 100%. */
@media screen and (max-width: 639px) {
	.vector-header-container .vector-header {
		flex-flow: row nowrap;
	}

	.mw-header .vector-header-start {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	.mw-header .vector-header-end {
		width: auto;
		flex: 0 0 auto;
	}

	.mw-logo {
		min-width: 0;
	}
}

/* Lockup: the symbol plus "Wiki" in the display face, like the website's header. */
.mw-logo-container.skin-invert {
	filter: none !important;
	--tpt-ink: inherit;
}

.mw-logo {
	align-items: center;
	text-decoration: none;
}

.mw-logo-icon {
	width: 31px;
	height: 36px;
	margin-right: 10px;
}

.mw-logo-wordmark {
	font-size: 0;
	color: var(--tpt-ink);
}

.mw-logo-wordmark::after {
	content: "Wiki";
	font-family: var(--tpt-font-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0;
}

/* Search field: the kit's .tpt-search. */
.vector-header .cdx-text-input__input,
.vector-sticky-header .cdx-text-input__input,
#searchInput {
	min-height: 40px;
	background: var(--tpt-bg);
	color: var(--tpt-ink);
	border: 2px solid var(--tpt-line-strong);
	border-radius: var(--tpt-radius-1);
	font-size: 15px;
	box-shadow: none;
}

.vector-header .cdx-text-input__input:focus,
.vector-sticky-header .cdx-text-input__input:focus,
#searchInput:focus {
	border-color: var(--tpt-focus);
	box-shadow: none;
	outline: none;
}

.vector-header .cdx-search-input__end-button {
	min-height: 40px;
	border-radius: var(--tpt-radius-1);
}

/* Header buttons and links: the kit's uppercase nav style. */
.vector-user-links .vector-menu-content-list > li > a,
.vector-user-links #pt-createaccount-2 a,
.vector-user-links #pt-login-2 a {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted);
	text-decoration: none;
}

.vector-user-links .vector-menu-content-list > li > a:hover {
	color: var(--tpt-ink);
}

/* Website links added by the server (user-page portlet): Play button in the kit's primary style. */
#pt-tpt-play a {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	background: var(--tpt-accent-fill);
	color: var(--tpt-on-accent) !important;
	border: 2px solid var(--tpt-outline);
	border-radius: var(--tpt-radius-1);
	box-shadow: var(--tpt-extrude);
	white-space: nowrap;
}

#pt-tpt-play a:hover {
	background: var(--tpt-brand-sun);
}

/* Below 1280px the bar has no room for every website link: Game, Tools and Discord stay in the sidebar
   (perfecttower2.com and Community), the Play button stays here. Below 1000px the user name and
   watchlist move into the user menu, which Vector itself only does below 640px. */
@media screen and (max-width: 1279px) {
	.vector-user-links-main #pt-tpt-game,
	.vector-user-links-main #pt-tpt-tools,
	.vector-user-links-main #pt-tpt-discord {
		display: none;
	}
}

@media screen and (max-width: 999px) {
	.vector-user-links-main .user-links-collapsible-item:not(#pt-tpt-play) {
		display: none;
	}

	.vector-user-menu .user-links-collapsible-item {
		display: block;
	}
}

/* ---------- Page grid: main menu left, contents right (kit sizes: 248px nav, 340px aside) ---------- */
@media screen and (min-width: 1120px) {
	.vector-feature-main-menu-pinned-enabled .mw-page-container-inner {
		grid-template-columns: var(--tpt-size-wiki-nav) minmax(0, 1fr);
	}

	/* The nav starts level with the page title, with or without a contents column. */
	.vector-column-start {
		margin-top: 0;
	}

	.vector-main-menu-container .vector-main-menu {
		padding-top: 20px;
	}

	.mw-header {
		grid-template-columns: var(--tpt-size-wiki-nav) minmax(0, 1fr);
	}
}

@media screen and (min-width: 1400px) {
	/* The contents list moves out of the left column into its own column on the right. */
	.vector-feature-main-menu-pinned-enabled.vector-feature-toc-pinned-clientpref-1.vector-toc-available .mw-page-container-inner {
		grid-template-columns: var(--tpt-size-wiki-nav) minmax(0, 1fr) 15rem;
		grid-template-areas:
			'siteNotice siteNotice siteNotice'
			'mainMenu pageContent toc'
			'footer footer footer';
	}

	.vector-feature-main-menu-pinned-enabled.vector-feature-toc-pinned-clientpref-1.vector-toc-available .vector-column-start {
		display: contents;
	}

	.vector-feature-main-menu-pinned-enabled.vector-feature-toc-pinned-clientpref-1.vector-toc-available .vector-main-menu-container {
		grid-area: mainMenu;
		margin-left: 0;
	}

	.vector-feature-main-menu-pinned-enabled.vector-feature-toc-pinned-clientpref-1.vector-toc-available .vector-column-start > .vector-sticky-pinned-container {
		grid-area: toc;
		align-self: start;
	}

	.vector-feature-main-menu-pinned-enabled.vector-feature-toc-pinned-clientpref-1.vector-toc-available .vector-column-start > .vector-sticky-pinned-container::after {
		display: none;
	}
}

/* ---------- Main menu (left nav) ---------- */
.vector-main-menu-container .vector-main-menu,
.vector-dropdown .vector-main-menu {
	font-size: 14px;
	line-height: 20px;
}

.vector-main-menu .vector-pinnable-header {
	display: none;
}

/* Vector 2022 is the only skin, so "Switch to old look" has nowhere to go. */
.vector-main-menu-action-opt-out {
	display: none;
}

.vector-main-menu .vector-menu-heading,
.vector-main-menu #p-navigation .vector-menu-heading {
	display: block;
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted);
	border: 0;
	margin: 20px 0 6px;
	padding: 0 10px;
}

.vector-main-menu .vector-menu:first-of-type .vector-menu-heading {
	margin-top: 8px;
}

.vector-main-menu .vector-menu-content-list .mw-list-item {
	padding: 0;
	margin: 0;
}

.vector-main-menu .vector-menu-content-list .mw-list-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 10px;
	border-radius: var(--tpt-radius-1);
	color: var(--tpt-ink-muted);
	text-decoration: none;
	background-image: none;
}

.vector-main-menu .vector-menu-content-list .mw-list-item a:hover {
	background: var(--tpt-surface);
	color: var(--tpt-ink);
}

.vector-main-menu .vector-menu-content-list .mw-list-item.selected a,
.vector-main-menu .vector-menu-content-list .mw-list-item a.mw-selflink {
	background: var(--tpt-surface-alt);
	color: var(--tpt-ink);
	font-weight: 600;
}

/* Building links: a facility hexagon in the game's resource colour. */
#p-Town .mw-list-item[id^="n-"] a::before {
	content: "";
	width: 12px;
	height: 14px;
	flex: none;
	background: var(--tpt-fac, transparent);
	clip-path: polygon(50% 0, 100% 27.5%, 100% 72.5%, 50% 100%, 0 72.5%, 0 27.5%);
}

#p-Town #n-Town a::before,
#p-Town #n-All-buildings a::before {
	display: none;
}

#n-Power-Plant { --tpt-fac: var(--tpt-fac-power-plant); }
#n-Mine { --tpt-fac: var(--tpt-fac-mine); }
#n-Factory { --tpt-fac: var(--tpt-fac-factory); }
#n-Headquarters { --tpt-fac: var(--tpt-fac-headquarters); }
#n-Arcade { --tpt-fac: var(--tpt-fac-arcade); }
#n-Laboratory { --tpt-fac: var(--tpt-fac-laboratory); }
#n-Shipyard { --tpt-fac: var(--tpt-fac-shipyard); }
#n-Trading-Post { --tpt-fac: var(--tpt-fac-trading-post); }
#n-Workshop { --tpt-fac: var(--tpt-fac-workshop); }
#n-Museum { --tpt-fac: var(--tpt-fac-museum); }
#n-Construction-Firm { --tpt-fac: var(--tpt-fac-construction-firm); }
#n-Statue-of-Cubos { --tpt-fac: var(--tpt-fac-statue-of-cubos); }

/* External links in the menu: the website's arrow. */
.vector-main-menu .mw-list-item a.external::after,
.vector-main-menu .mw-list-item a[rel~="nofollow"]::after {
	content: "\2197";
	margin-left: auto;
	font-size: 12px;
	color: var(--tpt-ink-subtle);
}

/* ---------- Contents (TOC) ---------- */
.vector-toc {
	font-size: 14px;
	line-height: 20px;
}

.vector-toc .vector-pinnable-header-label {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted);
}

.vector-toc .vector-toc-link {
	color: var(--tpt-ink-muted);
	padding: 4px 0;
}

.vector-toc .vector-toc-link:hover {
	color: var(--tpt-ink);
	text-decoration: none;
}

.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link,
.vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link {
	color: var(--tpt-ink) !important;
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--tpt-accent-fill);
	padding-left: 10px;
}

/* ---------- Page tabs (Read / Edit / History) ---------- */
.vector-page-toolbar-container {
	border-bottom: 2px solid var(--tpt-line);
}

.vector-menu-tabs .mw-list-item a {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted) !important;
}

.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited {
	color: var(--tpt-ink) !important;
	border-bottom: 3px solid var(--tpt-accent-fill);
}

.vector-menu-tabs .mw-list-item a:hover {
	color: var(--tpt-ink) !important;
}

.vector-page-toolbar .vector-dropdown-label {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ---------- Dropdowns, menus, buttons ---------- */
.vector-dropdown .vector-dropdown-content {
	background: var(--tpt-surface);
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius-2);
	box-shadow: var(--tpt-lift);
}

.cdx-button,
.mw-ui-button {
	border-radius: var(--tpt-radius-1);
}

.cdx-button--action-progressive.cdx-button--weight-primary,
.mw-ui-button.mw-ui-progressive {
	color: var(--tpt-on-accent);
	border-color: var(--tpt-outline);
	box-shadow: var(--tpt-extrude);
}

/* ---------- Content chrome ---------- */
#siteSub {
	display: none;
}

/* The Main Page brings its own hero. */
.page-Main_Page.action-view .vector-page-titlebar .firstHeading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* External links: the website's arrow, in the link colour (Vector's icon is a fixed blue image). */
.mw-parser-output a.external {
	background-image: none;
	padding-right: 0;
}

.mw-parser-output a.external::after {
	content: "";
	display: inline-block;
	width: .72em;
	height: .72em;
	margin-left: .2em;
	background-color: currentColor;
	opacity: .75;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mw-parser-output a.external:has(img)::after,
.mw-parser-output .plainlinks a.external::after {
	display: none;
}

#contentSub,
#contentSub2,
.mw-content-subtitle {
	color: var(--tpt-ink-subtle);
	font-size: 13px;
}

.catlinks {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--tpt-line);
	border-radius: 0;
	margin-top: 40px;
	padding: 16px 0 0;
}

.catlinks > div > a:first-child {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted);
}

.catlinks li {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 6px 6px 0;
}

.catlinks li a {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: var(--tpt-radius-1);
	background: var(--tpt-surface-alt);
	color: var(--tpt-ink-muted);
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.catlinks li a:hover {
	color: var(--tpt-ink);
	background: var(--tpt-line);
}

/* ---------- Footer ---------- */
.mw-footer-container {
	background: transparent;
	border-top: 1px solid var(--tpt-line);
	margin-top: 48px;
}

.mw-footer {
	border: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--tpt-ink-subtle);
}

.mw-footer li {
	color: var(--tpt-ink-subtle);
}

.mw-footer a {
	color: var(--tpt-ink-muted);
}

#footer-icons {
	display: none;
}