/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	line-height: 1.5; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
	 ========================================================================== */

/**
   * Remove the margin in all browsers.
   */

body {
	margin: 0;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */

h1 {
	font-size: 2em;
	margin: .67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
   * 1. Add the correct box sizing in Firefox.
   */

hr {
	box-sizing: content-box; /* 1 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/* Text-level semantics
	 ========================================================================== */

/**
   * Remove the gray background on active links in IE 10.
   */

a {
	background-color: transparent;
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */

b,
strong {
	font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */

small {
	font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -.25em;
}

sup {
	top: -.5em;
}

/* Forms
	 ========================================================================== */

/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.25; /* 1 */
	margin: 0; /* 2 */
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */

button,
select { /* 1 */
	text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
   * Remove the inner border and padding in Firefox.
   */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
	height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */

[type='search']::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}
/* ---------------------- */
/* ----- BASE FONTS ----- */
/* ---------------------- */

/* ---- Inter (variable) ---- */
@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('./fonts/Inter-roman.var.woff2?v=3.19') format('woff2');
}

@font-face {
	font-family: Inter;
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('./fonts/Inter-italic.var.woff2?v=3.19') format('woff2');
}

/* ---- JetBrains Mono ---- */
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('./fonts/JetBrainsMono-Italic.woff2') format('woff2');
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('./fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('./fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
}

/* ---- Jost ---- */
@font-face {
	font-family: Jost;
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/Jost-Book.woff2') format('woff2');
}

@font-face {
	font-family: Jost;
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/Jost-Bold.woff2') format('woff2');
}

/* ---- Lexend ---- */
@font-face {
	font-family: Lexend;
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/Lexend-Regular.woff2') format('woff2');
}

@font-face {
	font-family: Lexend;
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/Lexend-Bold.woff2') format('woff2');
}

/* ------------------------------- */
/* ----- INTERNATIONAL FONTS ----- */
/* ------------------------------- */

/* ---- Noto Sans Simplifed Chinese ---- */
@font-face {
	font-family: 'Noto Sans SC';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSansSC-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Sans SC';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSansSC-Bold.woff2') format('woff2');
}

/* ---- Noto Serif Simplified Chinese ---- */
@font-face {
	font-family: 'Noto Serif SC';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSerifSC-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Serif SC';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSerifSC-Bold.woff2') format('woff2');
}

/* ---- Noto Sans Traditional Chinese ---- */
@font-face {
	font-family: 'Noto Sans TC';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSansTC-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Sans TC';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSansTC-Bold.woff2') format('woff2');
}

/* ---- Noto Sans Japanese ---- */
@font-face {
	font-family: 'Noto Sans JP';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSansJP-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Sans JP';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSansJP-Bold.woff2') format('woff2');
}

/* ---- Noto Sans Korean ---- */
@font-face {
	font-family: 'Noto Sans KR';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSansKR-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSansKR-Bold.woff2') format('woff2');
}

/* ---- Noto Sans Thai ---- */
@font-face {
	font-family: 'Noto Sans Thai';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSansThai-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Sans Thai';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NotoSansThai-Bold.woff2') format('woff2');
}

/* ---- Kanit ---- */
@font-face {
	font-family: Kanit;
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/Kanit-Regular.woff2') format('woff2');
}

@font-face {
	font-family: Kanit;
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/Kanit-Bold.woff2') format('woff2');
}

@font-face {
	font-family: Kanit;
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url('./fonts/Kanit-Italic.woff2') format('woff2');
}

@font-face {
	font-family: Kanit;
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	src: url('./fonts/Kanit-BoldItalic.woff2') format('woff2');
}

/* ---- Nanum Gothic ---- */
@font-face {
	font-family: 'Nanum Gothic';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NanumGothic-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Nanum Gothic';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/NanumGothic-Bold.woff2') format('woff2');
}
/* -------------- */
/* ---- VARS ---- */
/* -------------- */

:root {
	--basalt-primary-color: 2, 2, 2;
	--basalt-secondary-color: 7, 8, 10;
	--basalt-tertiary-color: 38, 37, 35;
	--basalt-main-text-color: 240, 240, 240;
	--basalt-overtone: 200, 196, 192;
	--basalt-undertone: 111, 121, 252;
	--basalt-bright-element-color: 116, 176, 254;
	--basalt-dark-element-color: 118, 120, 250;
	--basalt-alternate-color: 255, 132, 0;
	--basalt-positive-color: 26, 180, 28;
	--basalt-negative-color: 255, 48, 48;
	--basalt-cancel-color: var(--basalt-negative-color);
	--basalt-sub-text-color: 155, 154, 162;
	--basalt-light-text-color: var(--basalt-primary-color);
    --basalt-dark-text-color: var(--basalt-main-text-color);
	--basalt-UI-opacity: .875;
	--basalt-UI-blur: .1rem;
	--basalt-UI-dark-palette: var(--basalt-overtone);
	--basalt-focus-color: var(--basalt-undertone);
	--basalt-background-color: var(--basalt-primary-color);

	--link-color: var(--basalt-bright-element-color);
	--link-visited-color: var(--basalt-dark-element-color);
	--link-newpage-color: var(--basalt-alternate-color);

	--header-font-primary: 'Lexend';
	--UI-font-primary: 'Jost';
	--body-font-primary: 'Inter';
	--mono-font-primary: 'JetBrains Mono';
	--header-font-fallback: franklin gothic medium, franklin gothic, itc franklin gothic, 'Helvetica Neue', 'Helvetica', arial, sans-serif;
	--UI-font-fallback: -apple-system, system-ui, blinkmacsystemfont, 'Segoe UI', roboto, oxygen-sans, ubuntu, cantrell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	--body-font-fallback: blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	--mono-font-fallback: menlo, consolas, monaco, liberation mono, lucida console, monospace;
	--header-font: var(--header-font-primary), var(--header-font-fallback);
	--UI-font: var(--UI-font-primary), var(--UI-font-fallback);
	--body-font: var(--body-font-primary), var(--body-font-fallback);
	--mono-font: var(--mono-font-primary), var(--mono-font-fallback);

	--header-logo: url('./icon.png');
	--header-logo-size: contain;
	--header-title: 'SCP: Containment Procedures';
	--header-subtitle: 'A game by Yni Viar; NOT affilated with SCP Foundation wiki.';
	--header-title-color: var(--basalt-main-text-color);
	--header-subtitle-color: var(--header-title-color);
	--title-size: 1.5rem;
	--subtitle-size: .825rem;
	--base-header-height: calc((var(--title-size) + var(--subtitle-size)) * 1.5 + .5rem);
	--header-border-width: .125rem;
	--header-background-color: var(--basalt-secondary-color);
	--header-border-color: var(--basalt-tertiary-color);
	--header-desktop-height: calc(var(--base-header-height) + var(--header-border-width));
	--header-mobile-height: calc(var(--header-desktop-height) + var(--top-bar-mobile-height));
	--header-final-height: var(--header-desktop-height);
	--header-link-transition-1st: .15s ease .05s;
	--header-link-transition-2nd: .205s ease-out .15s;
	--top-bar-mobile-height: calc(var(--header-UI-font-size) *4.5);
	--top-bar-link-color: var(--basalt-main-text-color);
	--top-bar-link-color-hover: var(--basalt-light-text-color);
	--top-bar-link-background-hover: var(--basalt-focus-color);
	--top-bar-link-background-hover-alt: var(--basalt-UI-dark-palette);
	--top-bar-dropdown-link-color: var(--top-bar-link-color);
	--top-bar-dropdown-link-color-hover: var(--top-bar-link-color-hover);
	--top-bar-dropdown-background: var(--basalt-primary-color);
	--top-bar-dropdown-background-hover: var(--link-color);
	--search-icon-color: var(--basalt-undertone);
	--search-icon-color-hover: var(--top-bar-link-color-hover);
	--search-background-color: var(--basalt-background-color);
	--search-button-width: 2rem;
	--login-status-background-color: var(--basalt-UI-dark-palette);
	--login-status-text-color: var(--basalt-light-text-color);
	--login-status-text-color-hover: var(--login-status-text-color);
	--login-status-width: calc(var(--header-UI-font-size) *24);
	--login-status-link-background-hover: var(--top-bar-link-background-hover);
	--user-button-width: 3rem;
	--user-icon-button-color: var(--top-bar-link-color);
	--user-icon-button-color-hover: var(--top-bar-link-color-hover);
	--user-icon-button-background-hover: var(--login-status-background-color);
	--pm-indicator-color: var(--basalt-alternate-color);

	--side-bar-button-width: 3rem;
	--side-bar-button-color: var(--top-bar-link-color);
	--side-bar-button-color-hover: var(--top-bar-link-color-hover);
	--side-bar-button-background-hover: var(--top-bar-link-background-hover-alt);
	--side-bar-width: 19rem;
	--side-bar-transition: .25s ease .125s;
	--side-bar-background-color: var(--basalt-background-color);
	--side-bar-link-color: var(--basalt-main-text-color);
	--side-bar-link-color-hover: var(--basalt-light-text-color);
	--side-bar-link-background-hover: var(--link-color);
	--side-bar-media-background-color: var(--basalt-undertone), .115;
	--side-bar-resources-background-color: var(--basalt-alternate-color), .115;
	--side-bar-heading-text-color: var(--basalt-light-text-color);
	--side-bar-heading-text-color-hover: var(--basalt-light-text-color);
	--side-bar-heading-background-color: var(--basalt-UI-dark-palette);
	--side-bar-unfolded-heading-text-color: var(--basalt-light-text-color);
	--side-bar-unfolded-heading-background-color: var(--basalt-UI-dark-palette);
	--side-bar-link-transition: var(--header-link-transition-1st);

	--main-content-width: 67.5rem;
	--main-content-top-margin: .325rem;
	--main-content-side-margin: 1.325rem;
	--main-content-bottom-margin: var(--main-content-side-margin);

	--bottom-area-text-color: var(--basalt-main-text-color);
	--bottom-area-background-color: var(--basalt-secondary-color);
	--bottom-area-padding: calc(var(--true-font-size) *.85);
	--footer-divider-thickness: .075rem;
	--footer-divider-color: var(--basalt-tertiary-color);
	--footer-link-color: var(--basalt-sub-text-color);
	--license-area-logo: var(--header-logo);
	--license-area-logo-size: 2.75rem;
	--license-area-divider-thickness: .1rem;
	--license-area-divider-color: var(--basalt-tertiary-color);

	--base-font-size: 1rem;
	--true-font-size:
		clamp(
			calc(var(--base-font-size) *.825),
			calc(var(--base-font-size) *.775 + .195vw),
			calc(var(--base-font-size) *1.025)
		);
	--header-UI-font-size: calc(var(--true-font-size) *.775);
	--header-UI-dropdown-font-size: calc(var(--header-UI-font-size) * 1.175);
	--footer-font-size: calc(var(--true-font-size) *.825);
	--license-area-font-size: calc(var(--true-font-size) *.8);

	--scrollbar-track-color: var(--basalt-tertiary-color);
	--scrollbar-thumb-color: var(--basalt-undertone);
	--selection-text-color: var(--basalt-light-text-color);
	--selection-background-color: var(--basalt-focus-color);
	
	--title-border-color: var(--basalt-undertone);
	--hr-color: var(--basalt-undertone);
	--rate-module-background-color: var(--basalt-secondary-color);
	--rate-module-text-color: var(--basalt-main-text-color);
	--rate-module-button-size: 1.625em;
	--rate-module-upvote-color: var(--basalt-positive-color);
	--rate-module-downvote-color: var(--basalt-negative-color);
	--rate-module-cancel-color: var(--basalt-overtone);
	--rate-module-info-icon-color: var(--basalt-light-text-color);
	--rate-module-info-background-color: var(--basalt-UI-dark-palette);
	--button-text-color: var(--basalt-main-text-color);
	--button-background-color: var(--basalt-secondary-color);
	--button-border-color: var(--basalt-tertiary-color);
	--button-outline-color: var(--basalt-focus-color);
	--button-hover-text-color: var(--basalt-primary-color);
	--button-hover-background-color: var(--basalt-focus-color);
	--button-hover-border-color: var(--basalt-focus-color);
	--button-hover-transition: .095s ease-out .015s;
	--general-border-color: var(--basalt-tertiary-color);
	--action-area-border-color: var(--general-border-color);
	--blockquote-background-color: var(--basalt-secondary-color);
	--blockquote-border-color: var(--general-border-color);
	--blockquote-border-width: .0875rem;
	--code-background-color: var(--blockquote-background-color);
	--toc-background-color: var(--blockquote-background-color);
	--toc-border-color: var(--blockquote-border-color);
	--toc-border-width: var(--blockquote-border-width);
	--tab-background-color: var(--basalt-secondary-color);
	--tab-hover-background-color: var(--basalt-bright-element-color);
	--tab-selected-background-color: var(--basalt-UI-dark-palette);
	--tab-focus-text-color: var(--basalt-light-text-color);
	--tab-border-width: var(--blockquote-border-width);
	--tab-transition: .125s ease-out;
	--image-caption-background-color: var(--basalt-background-color);
	--image-block-border-color: var(--basalt-undertone);
	--footnote-background-color: var(--basalt-secondary-color);
	--tag-background-color: var(--basalt-secondary-color);
	--modal-fader-background-color: var(--basalt-UI-dark-palette);

	--edit-area-border-color: var(--action-area-border-color);
	--edit-area-border-width: .1rem;
	--edit-area-toolbar-background-color: var(--basalt-secondary-color);
	--edit-area-toolbar-icon-size: 1.875rem;
	--edit-area-main-background-color: var(--basalt-background-color);
	--edit-area-ancillary-background-color: var(--basalt-secondary-color);

	--pager-previous-button: "« previous";
	--pager-next-button: "next »";
    --side-bar-button-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8cGF0aCBkPSJtMjE4LjE0IDM5NS43M2gzMTUuNzJjNy4wNDY5IDAgMTMuNTYyLTMuNzYxNyAxNy4wODYtOS44NjcyIDMuNTI3My02LjEwNTUgMy41MjczLTEzLjYyNSAwLTE5LjczLTMuNTIzNC02LjEwNTUtMTAuMDM5LTkuODY3Mi0xNy4wODYtOS44NjcyaC0zMTUuNzJjLTcuMDUwOCAwLTEzLjU2MiAzLjc2MTctMTcuMDkgOS44NjcyLTMuNTIzNCA2LjEwNTUtMy41MjM0IDEzLjYyNSAwIDE5LjczIDMuNTI3MyA2LjEwNTUgMTAuMDM5IDkuODY3MiAxNy4wOSA5Ljg2NzJ6Ii8+CiAgPHBhdGggZD0ibTUzMy44NiAyMzcuODhoLTMxNS43MmMtNy4wNTA4IDAtMTMuNTYyIDMuNzU3OC0xNy4wOSA5Ljg2MzMtMy41MjM0IDYuMTA1NS0zLjUyMzQgMTMuNjI5IDAgMTkuNzM0IDMuNTI3MyA2LjEwNTUgMTAuMDM5IDkuODY3MiAxNy4wOSA5Ljg2NzJoMzE1LjcyYzcuMDQ2OSAwIDEzLjU2Mi0zLjc2MTcgMTcuMDg2LTkuODY3MiAzLjUyNzMtNi4xMDU1IDMuNTI3My0xMy42MjkgMC0xOS43MzQtMy41MjM0LTYuMTA1NS0xMC4wMzktOS44NjMzLTE3LjA4Ni05Ljg2MzN6Ii8+CiAgPHBhdGggZD0ibTIxOC4xNCA1MTQuMTNoMzE1LjcyYzcuMDQ2OSAwIDEzLjU2Mi0zLjc2MTcgMTcuMDg2LTkuODY3MiAzLjUyNzMtNi4xMDU1IDMuNTI3My0xMy42MjUgMC0xOS43My0zLjUyMzQtNi4xMDU1LTEwLjAzOS05Ljg2NzItMTcuMDg2LTkuODY3MmgtMzE1LjcyYy03LjA1MDggMC0xMy41NjIgMy43NjE3LTE3LjA5IDkuODY3Mi0zLjUyMzQgNi4xMDU1LTMuNTIzNCAxMy42MjUgMCAxOS43MyAzLjUyNzMgNi4xMDU1IDEwLjAzOSA5Ljg2NzIgMTcuMDkgOS44NjcyeiIvPgogPC9nPgo8L3N2Zz4K');
}

/* ---------------------- */
/* ---- CONTENT AREA ---- */
/* ---------------------- */

#container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#content-wrap {
	flex-grow: 1;
}

#main-content, body.print-body #main-content {
	width: var(--main-content-width);
	margin: var(--main-content-top-margin) auto var(--main-content-bottom-margin);
	max-width: calc(100% - var(--main-content-side-margin) *2);
	overflow-wrap: break-word;
}

#page-content {
	min-height: calc(100vh - var(--header-final-height) - var(--main-content-top-margin) - 2.325em - var(--main-content-bottom-margin) - var(--bottom-area-padding) *2.5 - var(--true-font-size) *5.75);
}

/* ------------------ */
/* ---- HEADER ---- */
/* ------------------ */

#header {
	display: grid;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	height: var(--header-final-height);
	background-color: rgb(var(--header-background-color));
	border-bottom: solid var(--header-border-width) rgb(var(--header-border-color));
	grid-template-areas: 'open-menu h-link top-bar search user';
	grid-template-columns: var(--side-bar-button-width) max-content 1fr var(--search-button-width) var(--user-button-width);
	grid-template-rows: 1fr;
	z-index: 10;
	direction: ltr;
	contain: layout;
}

#header > * {
	color: var(--basalt-main-text-color);
	font-family: var(--UI-font);
}

#header a, #top-bar div[class*='top-bar'] ul li a {
	background-color: transparent;
	text-decoration: none;
}

/* --- H1 LINK --- */

#header h1 {
	display: grid;
	grid-area: h-link;
	overflow: hidden;
}

#header h2 {
	display: none;
} /* no need for this anymore, replaced with pseudo-element */

#header h1 a {
	display: flex;
	align-items: center;
	height: 100%;
	line-height: 1.15;
	width: max-content;
	gap: calc(var(--base-header-height) *.125);
	padding-left: calc(var(--base-header-height) *.125);
	padding-right: calc(var(--base-header-height) *.25);
	letter-spacing: calc(var(--header-UI-font-size) * -.05);
}

#header h1 a::before {
	content: '';
	display: block;
	height: 100%;
	width: calc(var(--base-header-height) *.925);
	min-width: calc(var(--base-header-height) *.75);
	background-image: var(--header-logo);
	background-size: var(--header-logo-size);
	background-position: center;
	background-repeat: no-repeat;
}

#header h1 a span {
	font-size: 0;
	font-family: var(--header-font);
	display: flex;
	width: max-content;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#header h1 a span::before {
	content: var(--header-title, 'SCP Foundation');
	color: rgb(var(--header-title-color));
	display: block;
	font-size: var(--title-size);
	font-weight: bold;
}

#header h1 a span::after {
	content: var(--header-subtitle, 'SECURE - CONTAIN - PROTECT');
	color: rgb(var(--header-subtitle-color));
	display: block;
	font-size: var(--subtitle-size);
	font-weight: normal;
}

/* --- TOP BAR --- */

#top-bar,
#top-bar div.top-bar,
#top-bar div.mobile-top-bar {
	display: contents; /* grid passthrough */
}

#top-bar div[class*='top-bar'] > ul {
	display: flex;
	grid-area: top-bar;
}

#top-bar div.mobile-top-bar > ul {
	display: none;
}

#top-bar div.mobile-top-bar > .open-menu {
	grid-area: open-menu;
}

#top-bar div.mobile-top-bar > .open-menu {
	display: flex;
	align-items: center;
	justify-content: center;
}

#header .open-menu p {
	display: contents;
}

#header div.open-menu a {
	font-size: 0;
	display: block;
	position: relative;
	height: 100%;
	width: 100%;
	text-align: center;
}

#top-bar div.open-menu a:hover {
	background: transparent;
}

#header div.open-menu a::before,
#header div.open-menu a::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(var(--side-bar-button-background-hover));
}

#header div.open-menu a::after {
	background-color: rgb(var(--side-bar-button-color));
	transition: background-color var(--side-bar-transition);
	-webkit-mask-image: var(--side-bar-button-mask);
	mask-image: var(--side-bar-button-mask);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

#header div.open-menu a::before {
	height: 0;
	transition: height var(--side-bar-transition);
}

#header div.open-menu a:is(:hover, :focus)::before {
	height: 100%;
}

#header div.open-menu a:is(:hover, :focus)::after {
	background-color: rgb(var(--side-bar-button-color-hover));
}

#top-bar div[class*='top-bar'] > ul {
	align-items: stretch;
	font-size: var(--header-UI-font-size);
}

#top-bar div[class*='top-bar'] > ul > li {
	min-width: max-content;
	flex-basis: calc(var(--header-UI-font-size) *6.25);
	flex-shrink: 1;
	align-self: stretch;
	position: relative;
	margin: 0;
}

#top-bar div[class*='top-bar'] > ul > li > a {
	display: flex;
	width: 100%;
	height: 100%;
	max-height: unset;
	padding: 0 calc(var(--header-UI-font-size) *.75);
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	color: rgb(var(--top-bar-link-color));
	text-transform: uppercase;
	font-weight: bold;
	position: relative;
	z-index: 0;
	transition: color var(--header-link-transition-2nd);
}

#top-bar div[class*='top-bar'] > ul > li > a:hover,
#top-bar div[class*='top-bar'] > ul > li > a:focus,
#top-bar div[class*='top-bar'] > ul > li.sfhover > a,
#top-bar div[class*='top-bar'] > ul > li:focus-within > a {
	color: rgb(var(--top-bar-link-color-hover));
	transition: color var(--header-link-transition-1st);
}

#top-bar div[class*='top-bar'] > ul > li > a::before,
#top-bar div[class*='top-bar'] > ul > li > a::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: -1;
}

#top-bar div[class*='top-bar'] > ul > li > a:hover::before,
#top-bar div[class*='top-bar'] > ul > li > a:focus::before,
#top-bar div[class*='top-bar'] > ul > li.sfhover > a::before,
#top-bar div[class*='top-bar'] > ul > li:focus-within > a::before,
#top-bar div[class*='top-bar'] > ul > li > a:hover::after,
#top-bar div[class*='top-bar'] > ul > li > a:focus::after,
#top-bar div[class*='top-bar'] > ul > li.sfhover > a::after,
#top-bar div[class*='top-bar'] > ul > li:focus-within > a::after {
	height: 100%;
}

#top-bar div[class*='top-bar'] > ul > li > a::before {
	background-color: rgb(var(--top-bar-link-background-hover));
	transition: height var(--header-link-transition-2nd);
}

#top-bar div[class*='top-bar'] > ul > li > a::after {
	background-color: rgb(var(--top-bar-link-background-hover-alt));
	transition: height var(--header-link-transition-1st);
}

#top-bar div[class*='top-bar'] > ul > li > a:hover::before,
#top-bar div[class*='top-bar'] > ul > li > a:focus::before,
#top-bar div[class*='top-bar'] > ul > li.sfhover > a::before,
#top-bar div[class*='top-bar'] > ul > li:focus-within > a::before {
	transition: height var(--header-link-transition-1st);
}

#top-bar div[class*='top-bar'] > ul > li > a:hover::after,
#top-bar div[class*='top-bar'] > ul > li > a:focus::after,
#top-bar div[class*='top-bar'] > ul > li.sfhover > a::after,
#top-bar div[class*='top-bar'] > ul > li:focus-within > a::after {
	transition: height var(--header-link-transition-2nd);
}

#top-bar div[class*='top-bar'] ul li ul {
	visibility: visible;
	pointer-events: none;
	opacity: 0;
	width: max-content;
	min-width: 100%;
	display: flex;
	flex-direction: column;
	border: none;
	contain: layout;
	transition: opacity var(--header-link-transition-2nd);
}

#top-bar div.mobile-top-bar ul li ul {
	flex-wrap: wrap;
	flex-direction: row;
	max-width: 100%;
}

#top-bar div[class*='top-bar'] > ul > li:hover > ul,
#top-bar div[class*='top-bar'] > ul > li > ul:hover,
#top-bar div[class*='top-bar'] > ul > li:focus-within > ul,
#top-bar div[class*='top-bar'] > ul > li > ul:focus-within {
	pointer-events: auto;
	opacity: 1;
    transition: opacity var(--header-link-transition-1st);
}

#top-bar div[class*='top-bar'] > ul > li > ul::before {
	content: '';
	z-index: 1;
	display: block;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: .325rem;
	height: 0;
	background-color: rgb(var(--top-bar-link-background-hover-alt));
	transition: height var(--header-link-transition-2nd);
}

#top-bar div[class*='top-bar'] > ul > li:is(:hover,:focus-within) > ul::before,
#top-bar div[class*='top-bar'] > ul > li > ul:is(:hover,:focus-within)::before {
	height: 100%;
	transition: height var(--header-link-transition-1st);
}

#top-bar div[class*='top-bar'] ul li ul li {
	position: relative;
	border: none;
}

#top-bar div.mobile-top-bar ul li ul li {
	flex-basis: 50%;
	flex-grow: 1;
}

#top-bar div[class*='top-bar'] ul li ul li a {
	width: 100%;
	max-height: unset;
	font-size: var(--header-UI-dropdown-font-size);
	padding: calc(var(--header-UI-dropdown-font-size) * .575) calc(var(--header-UI-dropdown-font-size) * 1.05);
	box-sizing: border-box;
	color: rgb(var(--top-bar-dropdown-link-color));
	background: rgb(var(--top-bar-dropdown-background), var(--basalt-UI-opacity));
	box-shadow: inset 0 .05rem 0 rgb(var(--general-border-color));
	-webkit-backdrop-filter: blur(var(--basalt-UI-blur));
	backdrop-filter: blur(var(--basalt-UI-blur));
	transition: color var(--header-link-transition-2nd);
	display: flex;
	align-items: center;
	position: relative;
	isolation: isolate;
	contain: layout style paint;
	content-visibility: auto;
}

@supports (not (backdrop-filter: blur(var(--basalt-UI-blur)))) and (not (-webkit-backdrop-filter: blur(var(--basalt-UI-blur)))) {
	#top-bar div[class*='top-bar'] ul li ul li a {
		--basalt-UI-opacity: .995;
	}
}

#top-bar div[class*='top-bar'] ul > li:is(:hover,:focus-within) > ul > li > a,
#top-bar div[class*='top-bar'] ul > li > ul:is(:hover,:focus-within) > li > a {
	transition: color var(--header-link-transition-1st);
}

#top-bar div[class*='top-bar'] ul li ul li a:is(:hover, :focus),
#top-bar div[class*='top-bar'] ul > li > ul > li.sfhover a,
#top-bar div[class*='top-bar'] ul > li > ul > li:focus-within > a {
	color: rgb(var(--top-bar-dropdown-link-color-hover));
}

#top-bar div[class*='top-bar'] ul li ul li a:is(:hover, :focus),
#top-bar div[class*='top-bar'] ul li ul li.sfhover a {
	background: rgb(var(--top-bar-dropdown-background), var(--basalt-UI-opacity));
}

#top-bar div[class*='top-bar'] ul li ul li a::before {
	content: '';
	display: block;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 0;
	height: 100%;
	z-index: -1;
	background-color: rgb(var(--top-bar-dropdown-background-hover));
	transition: width var(--header-link-transition-1st);
}

#top-bar div[class*='top-bar'] ul > li > ul > li:is(:hover, :focus-within) > a::before {
	width: 100%;
}

/* second tier drop down support */
#top-bar div[class*='top-bar'] ul li ul li ul {
	position: absolute;
	top: 0;
	left: 100%;
	border-inline-start: solid .225rem rgb(var(--top-bar-dropdown-background-hover));
	min-width: max-content;
	pointer-events: none;
}

#top-bar div[class*='top-bar'] ul li ul li:is(.sfhover, :hover, :focus-within) > ul {
	pointer-events: auto;
	opacity: 1;
}

#top-bar div[class*='top-bar'] ul li span[class*='topbar_arrow'] {
	display: none;
}

#top-bar div[class*=top-bar] ul li ul li a:not(:only-child) {
    justify-content: space-between;
    padding-inline-end: calc(var(--header-UI-dropdown-font-size) * .575);
    column-gap: calc(var(--header-UI-dropdown-font-size) * 1.5);
}
#top-bar div[class*=top-bar] ul li ul li a:not(:only-child)::after {
    content: "";
    display: block;
    width: .375em;
    height: .75em;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: currentColor;
}

#top-bar div[class*='top-bar'] ul li ul li.sfhover ul li a:not(:hover,:focus) {
	color: rgb(var(--top-bar-link-color));
}

/* --- LOGIN-STATUS --- */

#login-status {
	grid-area: user;
	position: relative;
	right: 0;
	top: 0;
	max-width: 100%;
	pointer-events: none;
	user-select: none;
	font-size: 0;
	z-index: 2;
}
#login-status:is(:hover,:focus-within) {
	pointer-events: auto;
}

#login-status > * {
	user-select: text;
	font-size: var(--header-UI-dropdown-font-size);
}

#login-status::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: var(--user-button-width);
	height: 0;
	pointer-events: auto;
	cursor: pointer;
	background-color: rgb(var(--user-icon-button-background-hover));
	z-index: 1;
	transition: height var(--header-link-transition-2nd);
}

#login-status:is(:hover,:focus-within)::after {
	height: 100%;
	transition: height var(--header-link-transition-1st);
}

/* --------------------------- */

#login-status span.printuser {
	display: contents;
	font-size: 0;
	user-select: none;
	pointer-events: none;
}

#login-status span.printuser > a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: min(calc(var(--base-header-height) *.175), .625rem);
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	background: transparent;
	width: 100%;
	height: 100%;
	pointer-events: auto;
	z-index: 2;
}

#login-status span.printuser > a img {
	background-image: none !important;
	padding: 0;
	display: block;
	height: 100%;
	flex-grow: 1;
	object-fit: contain;
	padding-right: 0;
}

a#account-topbutton, a#my-account {
	display: none;
}

/* PM notification indicator */
#login-status > a[href*='account/messages'] {
	display: block;
	position: absolute;
	font-size: 0;
	pointer-events: none;
	user-select: none;
	width: min(calc(var(--user-button-width)/5), calc(var(--base-header-height)/4));
	height: min(calc(var(--user-button-width)/5), calc(var(--base-header-height)/4));
	border-radius: calc(var(--user-button-width)/6);
	background-color: rgb(var(--pm-indicator-color));
	top: min(.625rem, 42.5%);
	right: min(.325rem, calc(var(--user-button-width)/6));
	z-index: 3;
	clip-path: unset;
}

div#account-options {
	width: var(--login-status-width);
	position: absolute;
	inset-block-start: 100%;
	right: unset;
	inset-inline-end: 0;
	border: none;
	display: block !important;
	background-color: rgb(var(--login-status-background-color));
}

#account-options, :where(#login-status) > :is(.login-status-create-account, .login-status-sign-in) {
	clip-path: inset(0 0 0 100%);
    transition: clip-path var(--header-link-transition-1st);
}
:where(#login-status):is(:hover,:focus-within) > :is(#account-options, .login-status-create-account, .login-status-sign-in) {
	clip-path: inset(0);
	transition: clip-path var(--header-link-transition-2nd);
}

div#account-options > ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

div#account-options > ul > li {
	display: contents;
}

div#account-options > ul > li > a {
	display: flex;
	height: calc(var(--header-UI-dropdown-font-size) *3.25);
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0;
	position: relative;
	text-decoration: none;
	color: rgb(var(--login-status-text-color));
}

div#account-options > ul > li > a:is(:hover, :focus) {
	color: rgb(var(--login-status-text-color-hover));
}

div#account-options > ul > li > a::before,
#login-status a:is(.login-status-create-account, .login-status-sign-in)::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 100%;
	background-color: rgb(var(--login-status-link-background-hover));
	z-index: -1;
	transition: width var(--header-link-transition-1st);
}

div#account-options > ul > li > a:is(:hover, :focus)::before,
#login-status a:is(.login-status-create-account, .login-status-sign-in):is(:hover, :focus)::before {
	width: 100%;
}

/* logged out */
#login-status > a:first-child + span {
	display: block;
	width: 100%;
	height: 100%;
	clip-path: none;
	pointer-events: auto;
	cursor: pointer;
	font-size: 0;
	position: absolute;
	top: 0;
	right: 0;
	background-color: rgb(var(--user-icon-button-color));
	z-index: 2;
	-webkit-mask-image: var(--user-icon-mask);
	mask-image: var(--user-icon-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 50%;
	mask-size: 50%;
	transition: background-color var(--header-link-transition-2nd);
}

#login-status:is(:hover,:focus-within) > a:first-child + span {
	background-color: rgb(var(--user-icon-button-color-hover));
	transition: background-color var(--header-link-transition-1st);
}

#login-status a:is(.login-status-create-account, .login-status-sign-in) {
	display: flex;
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 100%;
	height: var(--top-bar-mobile-height);
	width: calc(var(--login-status-width)/2);
	text-align: center;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	background-color: rgb(var(--login-status-background-color));
	color: rgb(var(--login-status-text-color));
}

#login-status a.login-status-create-account {
	inset-inline-end: calc(var(--login-status-width)/2);
}

/* --- SEARCH --- */

#search-top-box {
	display: flex;
	position: relative;
	top: initial;
	right: initial;
	grid-area: search;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#search-top-box::before,
#search-top-box::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#search-top-box::before {
	background-color: rgb(var(--basalt-focus-color));
	height: 0;
	transition: height var(--header-link-transition-1st);
}

#search-top-box:is(:hover, :focus-within)::before {
	height: 100%;
}

#search-top-box::after {
	-webkit-mask-image: var(--search-icon-mask);
	mask-image: var(--search-icon-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 52.5%;
	mask-size: 52.5%;
	background-color: rgb(var(--search-icon-color));
	transition: background-color var(--header-link-transition-1st);
}

#search-top-box:is(:hover,:focus-within)::after {
	background-color: rgb(var(--search-icon-color-hover));
}

#search-top-box-form {
	display: contents;
}

#search-top-box-input {
	display: none;

	/*
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    height: 100%;
    width: 100%;
    color: transparent;
    font-family: var(--body-font);
    background-color: transparent;
    margin: 0;
    padding: calc(var(--header-UI-font-size)*0.5);
    box-sizing: border-box;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    outline: solid 0 rgb(var(--basalt-focus-color));
    transition: width var(--header-link-transition-1st), outline-width var(--header-link-transition-1st), opacity var(--header-link-transition-1st);
    */
}

#search-top-box-form:focus-within #search-top-box-input,
#search-top-box-input:focus,
#search-top-box-input:hover {
	color: rgb(var(--basalt-main-text-color));
	background-color: rgb(var(--search-background-color));
}

#search-top-box-form:focus-within #search-top-box-input {
	width: calc(var(--header-UI-font-size) *16);
	opacity: 1;
	padding-inline-end: calc(var(--header-UI-font-size) *.5 + var(--search-button-width));
	z-index: 0;
	outline-width: .125rem;
	outline-offset: -.125rem;
	cursor: text;
	transition: width var(--header-link-transition-1st), outline-width var(--header-link-transition-1st), opacity 0s;
}

#search-top-box-form input[type='submit'] {
	pointer-events: auto;
	background: none;
	border: none;
	margin: 0;
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0;
	cursor: pointer;
	outline: none;
	z-index: 2;
}

#search-top-box-form:focus-within input[type='submit'] {
	pointer-events: auto;
}

/* ---------------- */
/* --- SIDE BAR --- */
/* ---------------- */

#top-bar div.mobile-top-bar > .open-menu {
	visibility: hidden;
}

#side-bar {
	position: fixed;
	float: none;
	top: 0;
	left: calc(var(--side-bar-width) * -1);
	padding: 0;
	margin: 0;
	margin-top: var(--header-final-height);
	height: calc(100% - var(--header-final-height));
	width: var(--side-bar-width);
	max-width: calc(100% - 3.75rem);
	box-sizing: border-box;
	font-size: calc(var(--base-font-size)*0.925);
	background-color: rgb(var(--side-bar-background-color));
	overflow-x: hidden;
	overflow-y: scroll;
	direction: rtl;
	transition: left var(--side-bar-transition);
	z-index: 10;
}

#side-bar:is(:hover, :focus-within) {
	left: 0;
}

#side-bar::before, #side-bar::after {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: var(--side-bar-button-width);
	height: var(--base-header-height);
	background-color: rgb(var(--side-bar-button-background-hover));
	pointer-events: auto;
	cursor: pointer;
}

#side-bar::after {
	background-color: rgb(var(--side-bar-button-color));
	transition: background-color var(--side-bar-transition);
	-webkit-mask-image: var(--side-bar-button-mask);
	mask-image: var(--side-bar-button-mask);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

#side-bar::before {
	height: 0;
	transition: height var(--side-bar-transition);
}

#side-bar:is(:hover, :focus-within)::before {
	height: var(--base-header-height);
}

#side-bar:is(:hover, :focus-within)::after {
	background-color: rgb(var(--side-bar-button-color-hover));
}

#side-bar > * {
	direction: ltr;
}

#side-bar hr {
	margin: .75rem;
}

#interwiki {
	background-color: rgb(var(--side-bar-background-color));
}
#interwiki body {
	font-size: calc(var(--base-font-size)*0.925);
}

:is(#side-bar, #interwiki) .side-block {
	font-family: var(--UI-font);
}

#side-bar .side-block.media {
	background-color: rgb(var(--side-bar-media-background-color));
}

#side-bar .side-block.resources {
	background-color: rgb(var(--side-bar-resources-background-color));
}

#side-bar .side-block.media > div {
	display: flex;
	justify-content: space-evenly;
}

:is(#side-bar, #interwiki) .heading {
	background-color: rgb(var(--side-bar-heading-background-color));
	color: rgb(var(--side-bar-heading-text-color));
	font-family: var(--header-font);
	font-size: .875em;
	padding: .15em;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}

:is(#side-bar, #interwiki) .heading > p {
	margin: 0;
}

#side-bar a.close-menu, #side-bar:target a.close-menu {
	display: none;
}

#side-bar .collapsible-block-folded {
	background: none;
}

#side-bar .collapsible-block a.collapsible-block-link {
	position: relative;
	display: block;
	text-align: center;
	background-color: rgb(var(--side-bar-heading-background-color));
	color: rgb(var(--side-bar-heading-text-color));
	font-family: var(--header-font);
	font-weight: bold;
	text-transform: uppercase;
	font-size: .875em;
	padding: .15em;
	transition: all var(--side-bar-link-transition);
}

#side-bar .collapsible-block-unfolded a.collapsible-block-link {
	background-color: rgb(var(--side-bar-unfolded-heading-background-color));
	color: rgb(var(--side-bar-unfolded-heading-text-color));
}

#side-bar .collapsible-block a.collapsible-block-link:is(:hover,:focus) {
	text-decoration: none;
	background-color: rgb(var(--basalt-focus-color));
	color: rgb(var(--side-bar-heading-text-color-hover));
}

#side-bar .collapsible-block .collapsible-block-folded a.collapsible-block-link::before,
#side-bar .collapsible-block a.collapsible-block-link::after {
	content: '';
	display: block;
	height: 100%;
	width: 1.925em;
	position: absolute;
	top: 0;
	right: 0;
	background-color: rgb(var(--basalt-focus-color), .5);
	z-index: 1;
}

#side-bar .collapsible-block a.collapsible-block-link::after {
	background-color: currentcolor;
	clip-path: polygon(25% 35%, 75% 35%, 50% 65%);
}

#side-bar .collapsible-block .collapsible-block-unfolded-link a.collapsible-block-link::after {
	background-color: currentcolor;
	clip-path: polygon(25% 65%, 75% 65%, 50% 35%);
}

#side-bar .collapsible-block-content {
	position: relative;
	background-color: rgb(var(--side-bar-background-color), .5);
}

#side-bar .collapsible-block-content::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: .425rem;
	height: 100%;
	background-color: rgb(var(--side-bar-unfolded-heading-background-color));
	animation: blt-collapsible-expand var(--side-bar-link-transition) forwards;
}

@keyframes blt-collapsible-expand {
	0% {
		height: 0;
	}

	100% {
		height: 100%;
	}
}

#side-bar .collapsible-block-content .menu-item {
	box-shadow: inset 0 -.05rem 0 rgb(var(--general-border-color));
}

:is(#side-bar, #interwiki) .menu-item,
:is(#side-bar, #interwiki) .menu-item.small {
	display: flex;
	font-size: 0;
}

#side-bar div.menu-item {
	margin: 0;
}

:is(#side-bar, #interwiki) .menu-item > p {
	display: contents;
}

:is(#side-bar, #interwiki) .menu-item > img {
	display: none;
}

:is(#side-bar, #interwiki) .menu-item a {
	display: inline-block;
	padding: .375em .575rem;
	font-size: calc(var(--base-font-size)*0.925);
	color: rgb(var(--side-bar-link-color));
	flex-grow: 1;
	isolation: isolate;
	position: relative;
	transition: color var(--side-bar-link-transition);
}

:is(#side-bar, #interwiki) .menu-item.small a {
	font-size: calc(var(--true-font-size) * .875);
	padding-block: .325em;
}

#side-bar .menu-item a[href='/'],
#side-bar .menu-item a[href='/forum:start'] {
	text-align: center;
	font-weight: bold;
}

#side-bar .menu-item a[href*='scp-series'] {
	flex-basis: 2.5em;
	text-align: center;
}

:is(#side-bar, #interwiki) .menu-item a:is(:hover, :focus) {
	color: rgb(var(--side-bar-link-color-hover));
	text-decoration: none;
}

:is(#side-bar, #interwiki) .menu-item a::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	z-index: -1;
	background-color: rgb(var(--side-bar-link-background-hover));
	transition: width var(--side-bar-link-transition);
}

:is(#side-bar, #interwiki) .menu-item a:is(:hover, :focus)::before {
	width: 100%;
}

#side-bar iframe.scpnet-interwiki-frame {
	width: 100%;
}

/* ------------------------------- */
/* ---- FOOTER & LICENSE AREA ---- */
/* ------------------------------- */

#footer {
	display: grid !important;
	align-items: center;
	grid-template-columns: 1fr max-content max-content;
	font-size: var(--footer-font-size);
	padding: var(--bottom-area-padding);
	font-family: var(--UI-font);
	color: rgb(var(--bottom-area-text-color));
	background-color: rgb(var(--bottom-area-background-color));
	box-sizing: border-box;
	padding-bottom: 0;
	direction: ltr;
}

#footer a {
	color: rgb(var(--footer-link-color));
}

#footer > a:last-child {
	margin-left: .375ch;
}

#footer .options {
	display: flex !important;
	flex-wrap: wrap;
	font-size: 0;
	margin-right: calc(var(--bottom-area-padding)/2);
	padding-right: calc(var(--bottom-area-padding)/2);
	border-right: solid var(--footer-divider-thickness) rgb(var(--footer-divider-color));
}

#footer .options a {
	font-size: var(--footer-font-size);
	margin: .5ch 2ch;
}

div#license-area {
	font-family: var(--UI-font);
	font-size: var(--license-area-font-size);
	color: rgb(var(--bottom-area-text-color));
	background-color: rgb(var(--bottom-area-background-color));
	box-sizing: border-box;
	text-align: center;
	padding: var(--bottom-area-padding);
	padding-top: calc(var(--bottom-area-padding)/2);
	position: relative;
}

#license-area::before, #license-area::after {
	content: '';
	display: block;
	height: var(--license-area-logo-size);
	width: 100%;
	margin-block-end: calc(var(--bottom-area-padding)/2);
}

#license-area::before {
	background: rgb(var(--license-area-divider-color));
	clip-path: inset(calc(50% - var(--license-area-divider-thickness)/2) 0);
	-webkit-mask-image:
		linear-gradient(
			90deg,
			black 0%,
			black calc(50% - var(--license-area-logo-size)/2 - var(--bottom-area-padding)/2),
			transparent calc(50% - var(--license-area-logo-size)/2 - var(--bottom-area-padding)/2),
			transparent calc(50% + var(--license-area-logo-size)/2 + var(--bottom-area-padding)/2),
			black calc(50% + var(--license-area-logo-size)/2 + var(--bottom-area-padding)/2),
			black 100%
		);
	mask-image:
		linear-gradient(
			90deg,
			black 0%,
			black calc(50% - var(--license-area-logo-size)/2 - var(--bottom-area-padding)/2),
			transparent calc(50% - var(--license-area-logo-size)/2 - var(--bottom-area-padding)/2),
			transparent calc(50% + var(--license-area-logo-size)/2 + var(--bottom-area-padding)/2),
			black calc(50% + var(--license-area-logo-size)/2 + var(--bottom-area-padding)/2),
			black 100%
		);
}

#license-area::after {
	position: absolute;
	top: calc(var(--bottom-area-padding)/2);
	left: 0;
	background-image: var(--license-area-logo);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#license-area a {
	font-weight: bold;
}

#license-area a::after {
	content: '.';
}

#footer-bar {
	max-width: unset;
	margin: 0;
	padding: .75rem var(--main-content-side-margin);
	color: rgb(var(--bottom-area-text-color));
	background-color: rgb(var(--bottom-area-background-color));
	border: none;
}

#footer-bar .units {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .375rem;
}

#footer-bar .units .unit {
	flex-basis: 12.5em;
	text-align: center;
}

/* --------------------------- */
/* ---- MOBILE BREAKPOINT ---- */
/* --------------------------- */

@media only screen and (max-width: 1024px) {
	:root {
		--header-final-height: var(--header-mobile-height);
	}

	#header {
		top: calc(var(--base-header-height) * -1);
		grid-template-areas:
			'h-link h-link h-link search user'
			'open-menu top-bar top-bar top-bar top-bar';
		grid-template-rows: var(--base-header-height) var(--top-bar-mobile-height);
	}

	#top-bar div.mobile-top-bar > ul {
		display: flex;
	}

	#top-bar div.top-bar > ul {
		display: none;
	}

	#top-bar div[class*='top-bar'] > ul > li {
		position: static;
		flex-grow: 1;
		flex-basis: auto;
	}

	#top-bar div[class*='top-bar'] > ul > li > a {
		padding: 0 calc(var(--header-UI-font-size) *.25);
	}

	#top-bar div[class*='top-bar'] ul li ul {
		transform: none;
		left: 0;
	}

	#top-bar div[class*='top-bar'] ul li ul li a {
		padding: calc(var(--header-UI-dropdown-font-size) * .875) calc(var(--header-UI-dropdown-font-size) * 1.05);
	}

	/* --- mobile side-bar --- */

	#top-bar div.mobile-top-bar > .open-menu {
		visibility: visible;
	}

	#side-bar {
		margin-top: 0;
		height: 100%;
	}

	#side-bar, #side-bar:is(:hover, :focus-within):not(:target) {
		left: calc(var(--side-bar-width) * -1);
	}

	#side-bar::before, #side-bar::after {
		display: none;
	}

	#side-bar:target {
		left: 0;
		width: var(--side-bar-width);
		z-index: 10;
	}

	#side-bar a.close-menu, #side-bar:target a.close-menu {
		display: block;
		pointer-events: none;
		position: fixed;
		top: 0;
		right: 0; left: auto;
		width: 100%;
		min-width: 3.75rem;
		height: 100%;
		margin-left: 0;
		opacity: 0;
		background-color: rgb(var(--modal-fader-background-color), var(--basalt-UI-opacity));
		-webkit-backdrop-filter: blur(var(--basalt-UI-blur));
		backdrop-filter: blur(var(--basalt-UI-blur));
		z-index: -1;
		transition: width var(--side-bar-transition), opacity var(--side-bar-transition);
	}

	#side-bar:target a.close-menu {
		width: calc(100% - var(--side-bar-width));
		pointer-events: auto;
		opacity: 1;
	}
}

/* ------------------------ */
/* ---- REDUCED MOTION ---- */
/* ------------------------ */

@media screen and (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0s !important;
		transition-duration: 0s !important;
	}
}


/* ----------------------- */
/* ---- PRINT SUPPORT ---- */
/* ----------------------- */

div#print-options {
	font-size: var(--true-font-size);
	font-family: var(--UI-font);
	padding: 1rem;
	margin: 0;
	background-color: rgb(var(--basalt-secondary-color));
	border: none;
}

#print-options tr > td:first-child {
	font-weight: bold;
}

#print-options tr > td:last-child {
	font-size: 0;
}

#print-options tr > td a {
	font-size: var(--true-font-size);
	display: inline-block;
	padding: .375em 1.25em;
	color: rgb(var(--button-text-color));
	text-decoration: none;
	border-bottom: solid .05em rgb(var(--general-border-color));
	transition: all var(--button-hover-transition);
}

#print-options tr > td a:is(:hover, :focus) {
	color: rgb(var(--basalt-focus-color));
	border-bottom-color: rgb(var(--basalt-focus-color));
}

div#print-head {
	font-family: var(--mono-font);
	padding: 0 .5rem;
	text-align: center;
}

body.print-body #container {
	margin: 0;
}

body.print-body #container > hr {
	display: none;
}

body.print-body #page-info {
	width: 100%;
	text-align: right;
	padding: 0;
}

body.print-body div#license-area {
	padding-top: var(--bottom-area-padding);
}

body.print-body #license-area::after {
	top: var(--bottom-area-padding);
}
/*-------------*/
/*--- BASIC ---*/
/*-------------*/

body {
    color: rgb(var(--basalt-main-text-color));
    background-color: rgb(var(--basalt-background-color));
    font-family: var(--body-font);
    font-feature-settings: "salt", "ss01", "ss02";
    font-size: var(--true-font-size);
    line-height: 1.5;
}

li, p { line-height: inherit; }

code, .code, .code pre, .code p, tt {
    font-family: var(--mono-font);
    font-size: inherit;
}

sub, sup {
    position: relative;
    font-size: 0.775em;
}
sup { top: -0.625em; }
sub { bottom: -0.625em; }

img, table, iframe {
    max-width: 100%;
}

#page-content div { max-width: 100%; }

/* scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--scrollbar-thumb-color)) rgb(var(--scrollbar-track-color));
}
::-webkit-scrollbar {
    width: 0.5rem;
    background: transparent;
}
::-webkit-scrollbar-track {
    background: rgb(var(--scrollbar-track-color));
}
::-webkit-scrollbar-thumb {
    background-color: rgb(var(--scrollbar-thumb-color));
}

/* selection */
::selection {
    background-color: rgb(var(--selection-background-color), 0.875);
    color: rgb(var(--selection-text-color));
}

/* id scroll jump */
:where(#main-content) [id] {
    scroll-margin-top: var(--header-final-height);
}
@media only screen and (max-width: 1024px) {
    :where(#main-content) [id] { --header-final-height: var(--top-bar-mobile-height); }
}

/*---------------*/
/*--- HEADERS ---*/
/*---------------*/

h1,h2,h3,h4,h5,h6 {
    color: inherit;
    font-weight: bold;
    font-family: var(--header-font);
    margin: 0.325em 0;
    line-height: 1.25;
}
h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.325em; }
h5 { font-size: 1.15em; }
h6 { font-size: 1em; }

/*-------------*/
/*--- LINKS ---*/
/*-------------*/

a:any-link {
    color: rgb(var(--link-color));
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: rgb(var(--link-visited-color));
}
a:any-link:is(:hover,:focus) {
    text-decoration: underline 0.1em;
    text-underline-offset: 0.08em;
}
a.newpage {
    color: rgb(var(--link-newpage-color));
}

/* collapsible link*/
#page-content a.collapsible-block-link {
    overflow-wrap: anywhere;
}

/*---------------*/
/*--- BUTTONS ---*/
/*---------------*/

div.buttons input, input[type="button"], input[type="submit"], button {
    appearance: none;
    margin: 0;
    padding: 0.325em 0.5em;
    cursor: pointer;
    font-family: var(--UI-font);
    color: rgb(var(--button-text-color));
    background-color: rgb(var(--button-background-color));
    border: solid 0.125em rgb(var(--button-border-color));
    outline: rgb(var(--button-outline-color)) solid 0;
    transition: all var(--button-hover-transition);
}
:is(div.buttons input, input[type="button"], input[type="submit"], button):is(:focus, :hover) {
    color: rgb(var(--button-hover-text-color));
    background-color: rgb(var(--button-hover-background-color));
    border-color: rgb(var(--button-hover-border-color));
    outline-width: 0.25rem;
}

/*--------------*/
/*--- INPUTS ---*/
/*--------------*/

input[type="checkbox"], [type="radio"] {
    appearance: none;
    display: inline-block;
    background-color: rgb(var(--basalt-background-color));
    border: solid 0.125em rgb(var(--basalt-tertiary-color));
    border-radius: 0;
    width: 1.15em;
    height: 1.15em;
    position: relative;
}
[type="radio"] {
    border-radius: 50%;
}
[type="radio"]:checked {
    border: solid 0.425em rgb(var(--basalt-focus-color));
}
[type="checkbox"]:checked {
    border-color: rgb(var(--basalt-focus-color));
    background-color: rgb(var(--basalt-focus-color));
}
[type="checkbox"]:checked::before,
[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 0.1875em;
    background-color: rgb(var(--basalt-light-text-color));
}
[type="checkbox"]:checked::before {
    height: 45%;
    bottom: 10%;
    left: 10%;
    transform: rotate(-45deg);
}
[type="checkbox"]:checked::after {
    height: 100%;
    bottom: 5%;
    left: 50%;
    transform: rotate(45deg);
}

textarea,
input[type="text"] {
    font-feature-settings: inherit;
    margin: 0;
    padding: 0.25rem;
    color: rgb(var(--basalt-main-text-color));
    background-color: rgb(var(--basalt-background-color));
    border: solid 0.05rem rgb(var(--general-border-color));
    outline: solid 0 rgb(var(--basalt-focus-color));
    transition: outline-width 0.125s linear;
}
textarea:focus-visible,
input[type="text"]:focus-visible {
    outline-width: 0.175rem;
}

select {
    appearance: auto;
    color: rgb(var(--basalt-main-text-color));
    background-color: rgb(var(--basalt-background-color));
    padding: 0.25ch 0.325ch;
    border: solid 0.125em rgb(var(--general-border-color));
    box-sizing: border-box;
    outline: solid 0 rgb(var(--basalt-focus-color));
    transition: outline-width 0.125s linear;
}
select:focus {
    outline-width: 0.175rem;
}

/*-------------*/
/*--- TABLE ---*/
/*-------------*/

table td {
    text-align: start;
}

:where(#page-content) table {
    width: max-content;
}

:where(#page-content) table:not(.form), table.wiki-content-table {
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    margin: 0.25rem auto;
    border-collapse: collapse;
}
:is(:where(#page-content) table:not(.form), table.wiki-content-table) th {
    background-color: rgb(var(--basalt-UI-dark-palette));
    border-color: rgb(var(--basalt-UI-dark-palette));
    color: rgb(var(--basalt-light-text-color));
    padding: 0.5em 0.75em;
    font-family: var(--header-font);
    font-weight: bold;
}
:is(:where(#page-content) table:not(.form), table.wiki-content-table) td {
    border: solid 0.05rem rgb(var(--general-border-color));
    padding: 0.5em 0.625em;
}

/*----------*/
/*--- HR ---*/
/*----------*/

hr {
    height: 0.1rem;
    margin: 1.5rem auto;
    background-color: rgb(var(--hr-color));
}

/*--------------------------*/
/*--- RATE & INFO MODULE ---*/
/*--------------------------*/

.creditRate > .rateBox,
.rate-box-with-credit-button > .page-rate-widget-box {
    display: contents;
}

#page-content .creditRate {
    float: none;
    transform: none;
    display: block;
    margin: 0;
    text-align: right;
}
div.creditRate .rateBox {
    display: contents;
}

div.page-rate-widget-box, div.rate-box-with-credit-button {
    display: inline-flex;
    box-shadow: none;
    background-color: rgb(var(--rate-module-background-color));
    border: none;
    border-radius: 0;
    margin: 0.25rem 0;
    padding: 0.325em;
    text-align: center;
}

div.page-rate-widget-box .rate-points {
    display: flex;
    align-items: center;
    color: rgb(var(--rate-module-text-color));
    background-color: transparent;
    padding: 0 0.625em;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 0.675em;
    font-weight: bold;
}
.page-rate-widget-box .number {
    width: max-content;
    font-size: 1.5em;
    padding: 0 0.125em 0.05em;
}

div.page-rate-widget-box span.btn {
    display: block;
    width: var(--rate-module-button-size);
    height: var(--rate-module-button-size);
}
div.rate-box-with-credit-button .creditButton {
    display: block;
    width: var(--rate-module-button-size);
    height: var(--rate-module-button-size);
    padding-inline-start: 0.325em;
}
div.rate-box-with-credit-button .creditButton > p,
div.creditRate > p {
    display: contents;
}

div.page-rate-widget-box span.btn > a,
div.rate-box-with-credit-button .creditButton > p > a {
    display: block;
    position: relative;
    width: 100%; height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    color: transparent!important;
    background-color: transparent;
    box-sizing: border-box;
    transition: all 0.095s linear;
}
div.creditButtonStandalone > p > a {
    display: inline-block;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    line-height: inherit;
    color: transparent;
    font-size: initial;
    width: var(--rate-module-button-size);
    height: var(--rate-module-button-size);
    margin: 0.25rem 0;
    position: relative;
}

div.page-rate-widget-box span.btn > a { border-bottom: solid 0.05em rgb(var(--general-border-color)); }
div.page-rate-widget-box span.btn > a::before,
div.rate-box-with-credit-button .creditButton > p > a::before,
div.rate-box-with-credit-button .creditButton > p > a::after,
div.creditButtonStandalone > p > a::before,
div.creditButtonStandalone > p > a::after {
    content: "";
    display: block;
    background-color: rgb(var(--basalt-main-text-color));
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: background-color 0.095s linear;
}
div.rate-box-with-credit-button .creditButton > p > a::before,
div.creditButtonStandalone > p > a::before {
    background-color: rgb(var(--rate-module-info-background-color));
}
div.rate-box-with-credit-button .creditButton > p > a::after,
div.creditButtonStandalone > p > a::after {
    background-color: rgb(var(--rate-module-info-icon-color));
}

div.page-rate-widget-box span.btn > a::before,
div.rate-box-with-credit-button .creditButton > p > a::after,
div.creditButtonStandalone > p > a::after {
    -webkit-mask-size: 40%;
    mask-size: 40%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
div.page-rate-widget-box span.rateup > a::before {
    -webkit-mask-image: var(--vote-plus-mask);
    mask-image: var(--vote-plus-mask);
}
div.page-rate-widget-box span.ratedown > a::before {
    -webkit-mask-image: var(--vote-minus-mask);
    mask-image: var(--vote-minus-mask);
}
div.page-rate-widget-box span.cancel > a::before {
    -webkit-mask-image: var(--vote-cancel-mask);
    mask-image: var(--vote-cancel-mask);
}
div.rate-box-with-credit-button .creditButton > p > a::after,
div.creditButtonStandalone > p > a::after {
    -webkit-mask-image: var(--vote-info-mask);
    mask-image: var(--vote-info-mask);
    -webkit-mask-size: 27.5%;
    mask-size: 27.5%;
}
div.page-rate-widget-box span.btn.rateup > a:is(:hover, :focus) { border-color: rgb(var(--rate-module-upvote-color)); }
div.page-rate-widget-box span.btn.ratedown > a:is(:hover, :focus) { border-color: rgb(var(--rate-module-downvote-color)); }
div.page-rate-widget-box span.btn.cancel > a:is(:hover, :focus) { border-color: rgb(var(--rate-module-cancel-color)); }

div.page-rate-widget-box span.btn.rateup > a:is(:hover, :focus)::before { background-color: rgb(var(--rate-module-upvote-color)); }
div.page-rate-widget-box span.btn.ratedown > a:is(:hover, :focus)::before { background-color: rgb(var(--rate-module-downvote-color)); }
div.page-rate-widget-box span.btn.cancel > a:is(:hover, :focus)::before { background-color: rgb(var(--rate-module-cancel-color)); }
div.rate-box-with-credit-button .creditButton > p > a:is(:hover, :focus)::before,
div.creditButtonStandalone > p > a:is(:hover, :focus)::before { background-color: rgb(var(--basalt-focus-color)); }

/* info modal */

#u-credit-view, #u-credit-otherwise {
    justify-content: center;
    align-items: center;
}
:is(#u-credit-view, #u-credit-otherwise) .modalcontainer {
    position: initial;
    inset: unset;
    margin: initial;
    width: auto;
    max-width: calc(100% - var(--main-content-side-margin)*2);
    height: max-content;
}
:is(#u-credit-view, #u-credit-otherwise) .fader {
    background: rgb(var(--modal-fader-background-color),var(--basalt-UI-opacity));
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
}
:is(#u-credit-view, div#u-credit-otherwise) .modalbox {
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: rgb(var(--basalt-background-color));
    padding: 0;
    margin: auto;
    width: 37.5rem;
    height: 50vh; height: 50svh;
}
:is(#u-credit-view, #u-credit-otherwise) .modalbox > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    font-size: calc(var(--true-font-size)*0.675);
    text-transform: uppercase;
    background-color: rgb(var(--basalt-UI-dark-palette));
}
:is(#u-credit-view, #u-credit-otherwise) .modalbox > div:first-child > h2 {
    color: rgb(var(--basalt-light-text-color));
}


.modalbox .close-credits {
    display: contents;
}
.modalbox .close-credits a {
    color: transparent;
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 2.75rem; height: 2.75rem;
}
.modalbox .close-credits a::before,
.modalbox .close-credits a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
}
.modalbox .close-credits a::before {
    background: rgb(var(--basalt-cancel-color));
    height: 0;
    transition: height 0.125s ease-out;
}
.modalbox .close-credits a::after {
    background: rgb(var(--basalt-light-text-color));
    -webkit-mask-image: var(--modal-close-mask);
    mask-image: var(--modal-close-mask);
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.modalbox .close-credits a:is(:hover,:focus)::before {
    height: 100%;
}

:is(#u-credit-view, #u-credit-otherwise) .modalbox > hr {
    margin: 1.25rem 1.25rem 0.625rem;
}
#u-credit-view .modalbox > div.credit {
    overflow: auto;
    margin: 0 1.25rem;
    flex-grow: 1;
}
#u-credit-view .modalbox div.credit:last-child {
    margin: 0!important;
}

#u-credit-view .creditBottomRate {
    height: auto!important;
    margin-block-end: 0.5rem;
}

/*-------------------*/
/*--- IMAGE BLOCK ---*/
/*-------------------*/

#page-content :is(.image-block, .scp-image-block),
#page-content :is(.image-block, .scp-image-block) > * {
    max-width: 100%;
    box-sizing: border-box;
}
.image-block, .scp-image-block {
    border-bottom: solid 0.325rem rgb(var(--basalt-undertone));
    width: 300px;
    background: rgb(var(--image-caption-background-color));
}
:is(.image-block, .scp-image-block) img {
    width: 100%!important;
}

:is(.image-block, .scp-image-block) :is(.image-caption, .scp-image-caption) {
    font-size: 0.875em;
    text-align: center;
    padding: 0.375rem 0.625rem;
    background: rgb(var(--image-caption-background-color));
}
:is(.image-block, .scp-image-block) :is(.image-caption, .scp-image-caption) p {
    margin: 0;
}

:is(.image-block, .scp-image-block).block-right {
    margin: 0.25rem 0 0.5rem 2rem;
    float: right;
}
:is(.image-block, .scp-image-block).block-left {
    margin: 0.25rem 2rem 0.5rem 0;
    float: left;
}
:is(.image-block, .scp-image-block).block-center {
    margin: 0.25rem auto;
}

@media only screen and (max-width: 580px) {
    :is(.image-block, .scp-image-block):is(.block-right, .block-left) {
        float: none;
        margin: 0.25rem auto;
    }
}

/*------------------*/
/*--- BLOCKQUOTE ---*/
/*------------------*/

blockquote, div.blockquote {
    background-color: rgb(var(--blockquote-background-color));
    border: solid var(--blockquote-border-width) rgb(var(--blockquote-border-color));
    margin: 1.25rem auto;
    padding: 0.125rem 1.45rem;
    box-sizing: border-box;
}
#main-content blockquote,
#main-content div.blockquote {
    max-width: calc(var(--main-content-width)*0.825);
}

/*------------*/
/*--- NOTE ---*/
/*------------*/

div.wiki-note {
    width: min(100%,calc(var(--main-content-width)*0.5));
    margin: 0.75rem auto;
    padding: 0.25rem 1.5rem;
    box-sizing: border-box;
    border: none;
    background-color: rgb(var(--basalt-alternate-color),0.075);
    text-align: justify;
}

/*--------------------*/
/*--- NEW PAGE BOX ---*/
/*--------------------*/

.new-page-box {
    font-size: var(--true-font-size);
    margin: 0!important;
    width: 100%;
}

.new-page-box form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    --_gap: .375rem;
    padding: var(--_gap);
    gap: var(--_gap);
}
.new-page-box form input.text {
    margin: 0!important;
    flex-basis: 12ch;
    flex-grow: 1;
    min-width: 6ch;
    font-family: var(--mono-font);
}

/*-------------------*/
/*--- ERROR BLOCK ---*/
/*-------------------*/

.error-block {
    margin: 0.5rem;
    padding: 0.375rem 1.15rem;
    border: solid 0.05rem rgb(var(--basalt-negative-color));
    color: rgb(var(--basalt-negative-color));
}

.error-inline {
    color: rgb(var(--basalt-negative-color));
    border: 0.05em solid currentColor;
}

/*------------------*/
/*--- CODE BLOCK ---*/
/*------------------*/

.code {
    background-color: rgb(var(--code-background-color));
    margin: 0.5rem 0;
    border: none;
    padding: 0.875rem 1rem;
    --_brackets: var(--basalt-main-text-color);
    --_builtin: 7,128,120;
    --_code: var(--basalt-main-text-color);
    --_comment: 40,155,40;
    --_default: var(--basalt-main-text-color);
    --_identifier: var(--basalt-main-text-color);
    --_inlinedoc: 28,82,235;
    --_inlinetags: 134,50,131;
    --_number: 165,38,38;
    --_reserved: 74,67,237;
    --_string: var(--basalt-bright-element-color);
    --_special: var(--basalt-dark-element-color);
    --_quotes: var(--basalt-bright-element-color);
    --_var: 67,144,62;
}
.code pre {
    margin: 0;
}

.code .hl-brackets { color: rgb(var(--_brackets)); }
.code .hl-builtin { color: rgb(var(--_builtin)); }
.code .hl-code { color: rgb(var(--_code)); }
.code .hl-comment { color: rgb(var(--_comment)); }
.code .hl-default { color: rgb(var(--_default)); }
.code .hl-identifier { color: rgb(var(--_identifier)); }
.code .hl-inlinedoc { color: rgb(var(--_inlinedoc)); }
.code .hl-inlinetags { color: rgb(var(--_inlinetags)); font-weight: bold; }
.code .hl-number { color: rgb(var(--_number)); }
.code .hl-reserved { color: rgb(var(--_reserved)); }
.code .hl-string { color: rgb(var(--_string)); }
.code .hl-special { color: rgb(var(--_special)); font-weight: bold; }
.code .hl-quotes { color: rgb(var(--_quotes)); }
.code .hl-var { color: rgb(var(--_var)); }

/*------------------------*/
/*--- TABLE OF CONTENT ---*/
/*------------------------*/

div#toc {
    max-width: calc(var(--main-content-width)*0.375);
    min-width: min(100%, calc(var(--main-content-width)*0.25));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    background-color: rgb(var(--toc-background-color));
    border: solid var(--toc-border-width) rgb(var(--toc-border-color));
    box-sizing: border-box;
}
#toc.floatright {
    float: right;
    margin: 0.25rem 0 0.25rem 1.5rem;
}
#toc.floatleft {
    float: left;
    margin: 0.25rem 1.5rem 0.25rem 0;
}

/* non-float toc */
table[style^="margin:0;"][style*="margin:0;"],
table[style^="margin:0;"][style*="margin:0;"] :is(tbody, tr, td) {
    display: contents;
} /* Replace with :has when more widely usable */

#toc #toc-action-bar {
    text-align: end;
    padding: 0.625rem;
    width: 4em;
}
#toc .title {
    flex-grow: 1;
    order: -1;
    padding: 0.625rem 0.875em;
    margin: 0;
    text-align: start;
    font-size: 1.05em;
}

#toc-list {
    width: 100%;
    border-top: inherit;
    margin: 0;
    padding: 0.625rem;
    padding-inline-start: 1.125rem;
    background-color: rgb(var(--basalt-background-color));
    counter-reset: toc-num1;
}
#toc-list div[style*="1em"] {
    counter-increment: toc-num1;
    position: relative;
}
#toc-list div[style*="1em"]::before {
    content: counter(toc-num1) ".";
    position: absolute;
    inset-block-start: 0.325em;
    inset-inline-end: 100%;
    height: 100%;
    font-size: 0.75em;
    font-family: var(--UI-font);
    padding-inline-end: 0.325em;
}
#toc-list > div {
    --toc-entry-indent: 1em;
    margin-left: 0!important;
    margin-inline-start: var(--toc-entry-indent)!important;
}
#toc-list > div[style*="2em"] { font-size: 0.965em; --toc-entry-indent: 2em; }
#toc-list > div[style*="3em"] { font-size: 0.915em; --toc-entry-indent: 3em; }
#toc-list > div[style*="4em"] { font-size: 0.865em; --toc-entry-indent: 4em; }
#toc-list > div[style*="5em"] { font-size: 0.835em; --toc-entry-indent: 5.075em; }
#toc-list > div[style*="6em"] { font-size: 0.775em; --toc-entry-indent: 6.25em; }

/*------------*/
/*--- TABS ---*/
/*------------*/

.yui-navset.yui-navset-top {
    display: flex;
    flex-direction: column;
    margin: 0.75rem 0;
    clear: both;
}
.yui-navset.yui-navset-top > ul.yui-nav {
    display: flex;
    flex-wrap: wrap;
    border: none;
    font-family: var(--mono-font);
    font-size: 0.95em;
    gap: 0.05rem;
    background-color: rgb(var(--general-border-color));
}
.yui-navset.yui-navset-top > ul.yui-nav li {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    background-color: rgb(var(--tab-background-color));
    position: relative;
    isolation: isolate;
}
.yui-navset.yui-navset-top > ul.yui-nav li a {
    display: flex;
    width: 100%; height: 100%;
    border: none;
    background: none!important;
    color: rgb(var(--basalt-main-text-color));
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    padding: 0.5em 1.5em;
    box-sizing: border-box;
    transition: all var(--tab-transition);
}
.yui-navset.yui-navset-top > ul.yui-nav li a:is(:hover, :focus),
.yui-navset.yui-navset-top > ul.yui-nav li.selected a {
    color: rgb(var(--tab-focus-text-color));
}
.yui-navset.yui-navset-top > ul.yui-nav li::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    display: block;
    width: 0; height: 100%;
    background-color: rgb(var(--tab-hover-background-color));
    transition: all var(--tab-transition);
}
.yui-navset.yui-navset-top > ul.yui-nav li:is(:hover, :focus-within)::before {
    width: 100%;
}
.yui-navset.yui-navset-top > ul.yui-nav li.selected { z-index: 1; font-weight: bold; }
.yui-navset.yui-navset-top > ul.yui-nav li.selected::before {
    width: 100%;
    background-color: rgb(var(--tab-selected-background-color));
}
.yui-navset.yui-navset-top > ul.yui-nav li.selected::after {
    content: "";
    display: block;
    width: 0; height: 0;
    border-style: solid;
    border-color: rgb(var(--tab-selected-background-color)) transparent transparent transparent;
    border-width: 0.575rem;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.yui-navset.yui-navset-top > ul.yui-nav li a em {
    display: inline;
    border: none;
    padding: 0;
    top: 0;
    position: static;
}
.yui-navset.yui-navset-top .yui-content {
    border: solid var(--tab-border-width) rgb(var(--general-border-color));
    padding: 0.625rem 1rem;
    background-color: transparent;
}

/*-------------------------------*/
/*--- FOOTNOTE & BIBLIOGRAPHY ---*/
/*-------------------------------*/

.bibitems, .footnotes-footer {
    position: relative;
    isolation: isolate;
    padding: 0;
    padding-block-end: 0.5rem;
    padding-inline-end: 1.25rem;
    background: rgb(var(--footnote-background-color));
    margin: 1.25rem 0;
    height: auto;
}
.bibitems::before, .footnotes-footer::before {
    content: "";
    position: absolute;
    width: 0.35rem;
    height: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    background-color: rgb(var(--basalt-UI-dark-palette));
}
.bibitems .title, .footnotes-footer .title {
    font-family: var(--UI-font);
    font-size: var(--true-font-size);
    font-weight: bold;
    text-transform: uppercase;
    background-color: rgb(var(--basalt-UI-dark-palette));
    color: rgb(var(--basalt-light-text-color));
    width: max-content;
    padding: 0.25em 0.5em;
    position: relative;
    margin: 0;
    margin-block-end: -0.5rem;
    inset-block-start: -0.75rem;
}
.bibitems {
    counter-reset: bibindex;
    font-family: var(--mono-font);
}
.bibitems .bibitem, .footnotes-footer .footnote-footer {
    height: auto;
    margin: 0.375em 0;
    margin-inline-start: 2.75rem;
    text-indent: -0.575ch;
    position: relative;
}
.bibitems .bibitem {
    text-indent: -1ch;
}
.bibitems .bibitem:nth-child(n+11) {
    text-indent: -3ch;
}

.bibitems .bibitem > *, .footnotes-footer .footnote-footer > * { text-indent: 0; }
.bibitems .bibitem::first-letter {
    font-size: 0;
}
.bibitems .bibitem::after {
    text-indent: 0;
    counter-increment: bibindex;
    content: counter(bibindex) ".";
    font-weight: bold;
    display: inline-block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: calc(100% + 0.25ch);
    background: rgb(var(--footnote-background-color));
}

.footnotes-footer .footnote-footer { text-indent: -0.875ch; }
.footnotes-footer .footnote-footer > a:first-child {
    inset-block-start: 0;
    inset-inline-end: calc(100% + 0.15ch);
    display: inline-block;
    font-weight: bold;
    position: absolute;
    font-family: var(--mono-font);
    background-color: rgb(var(--footnote-background-color));
}
.footnotes-footer .footnote-footer > a:first-child::after { content: "."; }


.hovertip {
    width: max-content;
    max-width: min(87.5%, calc(var(--main-content-width)*0.75));
    background-color: var(--_background-color)!important;
    border: solid 0.125rem var(--_border)!important;
    --_background-color: rgb(var(--footnote-background-color));
    --_border: solid 0.125rem rgb(var(--general-border-color));
    font-size: calc(var(--true-font-size)*0.95);
    animation: 0.1325s blt-hover-in forwards;
}
@keyframes blt-hover-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hovertip .content {
    padding: 0.325em 0.5em;
}
.hovertip .content .footnote .f-heading,
.hovertip .content .reference .r-heading {
    background-color: rgb(var(--basalt-UI-dark-palette));
    color: rgb(var(--basalt-light-text-color));
    width: max-content;
    padding: 0.25ch 0.75ch;
    font-family: var(--UI-font);
    position: absolute;
    inset-block-start: -1em;
    inset-inline-start: -0.125rem;
}
.hovertip .content .footnote::before,
.hovertip .content .reference::before {
    content: "";
    display: block;
    position: absolute;
    height: 100%; width: 0.325rem;
    inset-inline-start: -0.125rem;
    inset-block-start: 0.125rem;
    background-color: rgb(var(--basalt-UI-dark-palette));
}
.hovertip .content .footnote .f-content,
.hovertip .content .reference .r-content {
    padding-inline-start: 0.5rem;
    margin: 0.625rem 0 0;
}
.hovertip .content .footnote .f-footer,
.hovertip .content .reference .r-footer {
    text-align: end;
    font-size: 0.825em;
    color: rgb(var(--basalt-sub-text-color));
}

/*--------------------*/
/*--- USER DISPLAY ---*/
/*--------------------*/

.printuser a { margin-right: 0; }

.printuser {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    text-indent: 0;
}
.printuser > a:first-child {
    display: flex;
    user-select: none;
    align-self: center;
    min-width: max-content;
}
.printuser > a:first-child img {
    height: 1.25em;
    width: 1.25em;
    padding: 0;
    padding-left: 0.5em;
    object-fit: contain;
    background-size: cover;
    overflow: hidden;
}

#avatar-hover-container {
    display: none;
}

/*---------------*/
/*--- OWINDOW ---*/
/*---------------*/

.odialog-shader, .odialog-shader-iframe { display: none; }
#odialog-container[style*="block"] {
    display: flex!important;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--modal-fader-background-color),var(--basalt-UI-opacity));
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
}

.owindow {
    position: relative;
    top: initial!important; left: initial!important;
    background-color: rgb(var(--basalt-background-color));
    border: none;
    flex-basis: calc(100vw - var(--main-content-side-margin)*2);
    max-width: 80ch;
    display: grid;
}
.owindow h1 {
    margin: 0;
    text-align: center;
    flex-grow: 1;
}
.owindow p { margin: 0.5em 0; }

.owindow > *:not(.button-bar,.title) {
    padding: 0.625em 0.875em 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
}
.owindow .title {
    cursor: initial;
    font-family: var(--header-font);
    font-size: 1.15em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 0.75em;
    color: rgb(var(--basalt-light-text-color));
    background-color: rgb(var(--basalt-UI-dark-palette));
    height: 2.75rem;
    display: flex;
    align-items: center;
}
.owindow .button-bar {
    margin: 0;
    padding: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.owindow .button-bar > a:not([onclick*="cleanAll"]),
.owindow div[style*="margin-top"] a {
    margin: 0;
    display: inline-block;
    flex-basis: 12em;
    flex-grow: 1;
    text-align: center;
    padding: 0.5ch;
    font-family: var(--UI-font);
    text-decoration: none;
    color: rgb(var(--button-text-color));
    background-color: rgb(var(--button-background-color));
    border: solid 0.125em rgb(var(--button-border-color));
    outline: rgb(var(--button-outline-color)) solid 0;
    transition: all var(--button-hover-transition);
}
.owindow .button-bar > a:not([onclick*="cleanAll"]):is(:hover, :focus),
.owindow div[style*="margin-top"] a:is(:hover, :focus) {
    color: rgb(var(--button-hover-text-color));
    background-color: rgb(var(--button-hover-background-color));
    border-color: rgb(var(--button-hover-border-color));
    outline-width: 0.25rem;
}
.owindow .button-bar > a, .owindow .button-bar > a:hover { background: transparent; }

.owindow .button-bar > a[onclick*="cleanAll"] {
    position: absolute;
    inset-block-start: 0; inset-inline-end: 0;
    display: block;
    border: none;
    height: 2.75rem; width: 2.75rem;
    font-size: 0;
    background-image: linear-gradient(to bottom, rgb(var(--basalt-cancel-color)), rgb(var(--basalt-cancel-color)));
    background-size: 100% 0;
    background-position: 0 0; background-repeat: no-repeat;
    transition: background-size 0.125s ease-out;
}
.owindow .button-bar > a[onclick*="cleanAll"]:is(:hover,:focus) { background-size: 100% 100%; }
.owindow .button-bar > a[onclick*="cleanAll"]::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.owindow .button-bar > a[onclick*="cleanAll"]::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(var(--basalt-light-text-color));
    -webkit-mask-image: var(--modal-close-mask);
                  mask-image: var(--modal-close-mask);
    -webkit-mask-position: 50%;
                  mask-position: 50%;
    -webkit-mask-size: contain;
                  mask-size: contain;
    -webkit-mask-repeat: no-repeat;
                  mask-repeat: no-repeat;
}

.owindow.owait .content {
    margin: 0;
    padding: 0.625em 0.875em 1.325em;
    background-image: none;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
}
.owindow.owait .content::after {
    content: " ";
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    box-sizing: border-box;
    border: solid 0.375rem rgb(var(--basalt-undertone));
    margin: 0 auto;
    animation: blt-load-rotate 1.325s ease-in-out infinite, blt-load-pulsate .875s linear infinite;
}
@keyframes blt-load-rotate {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(90deg);
    }
}
@keyframes blt-load-pulsate {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--basalt-undertone), 0.5), inset 0 0 0 0 rgb(var(--basalt-undertone), 0.375);
  }
  70% {
    box-shadow: 0 0 0 0.675rem rgb(var(--basalt-undertone), 0), inset 0 0 0 0.45rem rgb(var(--basalt-undertone), 0);
  }
    100% {
    box-shadow: 0 0 0 0 rgb(var(--basalt-undertone), 0), inset 0 0 0 0 rgb(var(--basalt-undertone), 0);
  }
}

/*--- User Info Modal ---*/

.owindow > *:not(.button-bar,.title) > img {
    float: none!important;
    padding: 0!important;
    background: transparent!important;
    height: 5.25em;
}
.owindow > *:not(.button-bar,.title) > *:not(img, img + h1) {
    flex-basis: 100%;
    margin: 0;
}

.owindow > .content.modal-body > img + h1 + table {
    display: grid;
    border: solid rgb(var(--basalt-tertiary-color));
    border-width: 0.1em 0;
    max-height: 47.5vh;
    overflow-y: auto;
}
.owindow > .content.modal-body > img + h1 + table > tbody { display: contents; }
.owindow > .content.modal-body > img + h1 + table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(30ch, 100%), 1fr));
    align-items: center;
    padding: 0.5em;
}
.owindow > .content.modal-body > img + h1 + table > tbody > tr:not(:last-child) {
    border-bottom: solid 0.1em rgb(var(--basalt-tertiary-color));
}
.owindow > .content.modal-body > img + h1 + table > tbody > tr > td {
    display: block;
    padding: 0;
    text-align: justify;
}
.owindow > .content.modal-body > img + h1 + table > tbody > tr > td:first-child {
    font-family: var(--UI-font);
}

.owindow div[style*="margin-top"] {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(12em, 100%), 1fr));
}
.owindow div[style*="margin-top"] > div { display: contents; }
.owindow div[style*="margin-top"] > div > a {
    order: 4;
    grid-column: -1/-2;
    --button-text-color: var(--basalt-cancel-color);
}

/* Flag User */
:is(#flag-user-options-flag, #flag-user-options-unflag):not([style*="none"]) {
    display: flex!important;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.325rem;
    align-items: center;
}
:is(#flag-user-options-flag, #flag-user-options-unflag) > * {
    flex-basis: 12em;
    flex-grow: 1;
    border: none;
    margin: 0;
    padding: 0.25em 0.375em;
    font-family: var(--UI-font);
    font-size: 1.325em;
    color: rgb(var(--basalt-sub-text-color));
    font-weight: bold;
}
:is(#flag-user-options-flag, #flag-user-options-unflag) > a {
    display: block;
    text-align: center;
    font-weight: normal;
    text-decoration: none;
    color: rgb(var(--button-text-color));
    background-color: rgb(var(--button-background-color));
    border: solid 0.125em rgb(var(--button-border-color));
    outline: rgb(var(--button-outline-color)) solid 0;
    transition: all var(--button-hover-transition);
}
:is(#flag-user-options-flag, #flag-user-options-unflag) > a:is(:hover,:focus) {
    color: rgb(var(--button-hover-text-color));
    background-color: rgb(var(--button-hover-background-color));
    border-color: rgb(var(--button-hover-border-color));
    outline-width: 0.25rem;
}
#flag-user-options-flag a.flag-user-abusive { --button-text-color: var(--basalt-negative-color); }
#flag-user-options-unflag a.unflag-user-ok { --button-text-color: var(--basalt-positive-color); }

/*-----------------*/
/*---- CONTENT ----*/
/*-----------------*/

#page-title, .meta-title {
    font-family: var(--header-font);
    font-weight: bold;
    font-size: 2.325em;
    line-height: normal;
    border-bottom: solid 0.125rem rgb(var(--title-border-color));
    padding: .125em 0;
    margin: 0;
}
.meta-title > p { margin: 0; }

#breadcrumbs, .pseudocrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.275em;
    font-size: 0.875em;
    margin: 0;
    font-weight: bold;
}
.pseudocrumbs > p { display: contents; }

:is(#breadcrumbs, .pseudocrumbs) a {
    font-weight: normal;
}

.footer-wikiwalk-nav {
    font-weight: bold;
    font-size: 0.875em;
    text-align: center;
}

/*-----------------------*/
/*---- PAGE TAG AREA ----*/
/*-----------------------*/

#main-content > .page-tags {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    --basalt-focus-color: var(--link-color);
}

#main-content > .page-tags > span {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    width: max-content;
    max-width: 100%;
    font-size: calc(var(--true-font-size)*0.75);
    padding-top: 0.375rem;
    border: none;
}

#main-content > .page-tags > span a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0.25em 0.475em;
    flex-grow: 1;
    background-color: rgb(var(--tag-background-color), var(--basalt-UI-opacity));
    border-radius: 0 0.5em;
    box-shadow: 0 0 0 0 rgb(var(--basalt-focus-color));
    transition: all var(--button-hover-transition);
}

#main-content > .page-tags > span a:is(:hover,:focus) {
    color: rgb(var(--basalt-light-text-color));
    background-color: rgb(var(--basalt-focus-color));
    box-shadow: 0 0 0 0.25rem rgb(var(--basalt-focus-color));
    text-decoration: none;
}

#main-content > .page-tags > span a[href^='/system:page-tags/tag/_'] { display: none; }

/*----------------------*/
/*---- PAGE OPTIONS ----*/
/*----------------------*/
#page-info-break {
    height: 1rem;
    margin: 0;
}

#page-options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 0.775em;
    align-items: center;
}

#page-info {
    padding: 0;
    margin: 0;
    font-family: var(--UI-font);
    font-size: calc(var(--true-font-size)*0.675);
}

#page-options-container .page-watch-options {
    font-family: var(--UI-font);
    font-size: calc(var(--true-font-size)*0.75);
    text-align: left;
}
#page-info {
    padding: 0.325em 0 0;
    margin: 0;
    width: max-content;
    font-family: var(--UI-font);
    text-align: left;
    text-transform: uppercase;
}

div[id*="page-options-bottom"] {
    --_po-padding: 0.5rem;
    width: 100%;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    font-size: var(--true-font-size);
    position: relative;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--_po-padding);
    padding: var(--_po-padding);
    padding-inline-end: calc(7.25rem + var(--_po-padding));
    background-color: rgb(var(--basalt-secondary-color));
    box-sizing: border-box;
}
div[id*="page-options-bottom"] > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0.5rem;
    box-sizing: border-box;
    flex-basis: 7.25rem;
    flex-grow: 1;
    font-size: calc(var(--true-font-size)*0.875);
    color: rgb(var(--button-text-color));
    text-decoration: none;
    border-bottom: solid 0.05em rgb(var(--general-border-color));
    transition: all var(--button-hover-transition);
}
div[id*="page-options-bottom"] > a:is(:hover,:focus) {
    text-decoration: none;
}

#more-options-button, #delete-button {
    position: absolute;
    inset-block-start: var(--_po-padding);
    inset-inline-end: var(--_po-padding);
    width: calc(7.25rem - var(--_po-padding));
    height: calc(100% - var(--_po-padding)*2);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(var(--basalt-UI-dark-palette));
    color: rgb(var(--basalt-light-text-color));
    border: none;
}
#page-options-bottom-2 { padding-top: 0; }
#delete-button {
    inset-block-start: 0;
    color: rgb(var(--basalt-cancel-color));
    background-color: rgb(var(--basalt-cancel-color),0.105);
    height: calc(100% - var(--_po-padding));
}

div[id*="page-options-bottom"] > a:is(:hover,:focus) {
    font-weight: bold;
    color:  rgb(var(--basalt-focus-color));
    border-bottom-color:  currentColor;
}
#more-options-button:is(:hover,:focus),
#delete-button:is(:hover,:focus) {
    color: rgb(var(--basalt-light-text-color));
    background-color: rgb(var(--basalt-focus-color));
}

@media only screen and (max-width: 32rem) {
    div[id*="page-options-bottom"] {
        width: 100%;
        padding-inline-end: var(--_po-padding);
    }

    #more-options-button, #delete-button {
        position: static;
        inset-block-start: initial; inset-inline-end: initial;
        width: initial;
        height: initial;
        flex-basis: 100%;
    }
}

/*----------------*/
/*---- CUSTOM ----*/
/*----------------*/

.licensebox a.collapsible-block-link {
    color: rgb(var(--basalt-sub-text-color));
    font-weight: bold;
}

.bblock {
    background-color: rgb(var(--basalt-main-text-color));
    transition: color 0.675s linear;
}
.bblock:is(:hover, :focus-within) {
    background-color: rgb(var(--basalt-main-text-color));
    color: rgb(var(--basalt-background-color));
}

.dblock {
    background-color: currentColor;
    transition: background-color 0.675s linear;
}
.dblock:is(:hover, :focus-within) {
    background-color: transparent;
}

.keycap {
    background-color: rgb(var(--basalt-secondary-color));
    padding: 0.25em;
    border-radius: 0.25rem;
    box-shadow: 0 0.125em 0 0.05em rgb(var(--general-border-color));
}

.tags {
    display: inline-block;
    background-color: rgb(var(--tag-background-color), var(--basalt-UI-opacity));
    border-radius: 0 0.5em;
    padding: 0.25em 0.475em;
    transition: all var(--button-hover-transition);
}
.tags:is(:hover, :focus, :focus-within) {
    color: rgb(var(--basalt-light-text-color));
    background-color: rgb(var(--basalt-focus-color));
    box-shadow: 0 0 0 0.25rem rgb(var(--basalt-focus-color));
}
.rt, rt {
    display: table-header-group;
    font-size: .575em;
    line-height: 1.15;
}
.ruby, ruby {
    display: inline-table;
    line-height: 1;
    vertical-align: text-bottom;
}
.rt, .ruby, rt, ruby {
    text-align: center;
    white-space: nowrap;
}
/*-------------------*/
/*--- ACTION AREA ---*/
/*-------------------*/

#action-area p {
    margin: 0.325em 0 0.625em;
}

#action-area div.sub {
    color: rgb(var(--basalt-sub-text-color));
    font-size: 0.8125em;
    text-align: right;
}
#action-area div.buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625em 0;
    width: 100%;
    max-width: calc(var(--main-content-width)*0.75);
    margin: 0 auto;
}
#action-area div.buttons > * {
    flex-basis: 12em;
    flex-shrink: 1;
    flex-grow: 1;
}

#history-subarea:not([style*="none"]),
#action-area:not([style*="none"]) {
    display: grid!important;
}
#history-subarea,
#action-area {
    width: auto;
    position: relative;
    padding: 0;
    margin: 1rem 0 0;
    grid-template-columns: 1fr max-content;
}

:where(#history-subarea, #action-area) > * {
    grid-column: 1 / 3;
}

div:where(#action-area, .buttons) :is(a, input).btn,
#history-subarea a.action-area-close,
#view-diff-div a.button {
    cursor: pointer;
    margin: 0;
    display: inline-block;
    text-align: center;
    padding: 0.5ch;
    font-family: var(--UI-font);
    color: rgb(var(--button-text-color));
    background-color: rgb(var(--button-background-color));
    border: solid 0.125em rgb(var(--button-border-color));
    outline: rgb(var(--button-outline-color)) solid 0;
    transition: all var(--button-hover-transition);
}
div:where(#action-area, .buttons) :is(a, input).btn:is(:hover, :focus),
#history-subarea a.action-area-close:is(:hover, :focus),
#view-diff-div a.button:is(:hover, :focus) {
    color: rgb(var(--button-hover-text-color));
    background-color: rgb(var(--button-hover-background-color));
    border-color: rgb(var(--button-hover-border-color));
    outline-width: 0.25rem;
    text-decoration: none;
}

#action-area div.buttons > :is([name="cancel"],[onclick*="page.listeners.closeActionArea(event)"]) {
    --button-text-color: var(--basalt-cancel-color);
}
#action-area div.buttons > :is([name="save"],[onclick*="PageTagsModule.listeners.save(event)"]) {
    --button-text-color: var(--basalt-positive-color);
    font-weight: bold;
}

#view-diff-div > h1 + p { text-align: center; }
#view-diff-div a.button {
    --button-text-color: var(--basalt-cancel-color);
}

:where(#action-area) a.action-area-close {
    float: none;
    grid-column: 2 / 3;
    grid-row-start: 1;
    z-index: 1;
    align-self: center;
    width: max-content;
    --button-text-color: var(--basalt-cancel-color);
}

#action-area > h1 {
    grid-row-start: 1;
    font-size: calc(var(--true-font-size)*1.2);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0.425rem 0;
}
#history-subarea > h2::before,
#history-subarea > h2::after,
#action-area > h1::before,
#action-area > h1::after {
    content: "";
    display: block;
    background-color: rgb(var(--action-area-border-color));
    height: 0.1rem;
    min-width: 2.5ch;
    flex-grow: 1;
}
#history-subarea > h2::before, #action-area > h1::before { margin-right: 0.5ch; }
#history-subarea > h2::after, #action-area > h1::after { margin-left: 0.5ch; min-width: 4.25ch; }


/*---------------*/
/*--- EDITBOX ---*/
/*---------------*/

form#edit-page-form {
    font-family: var(--UI-font);
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-areas:
        "title title"
        "toolbar toolbar"
        "txt txt"
        "help size"
        "bottom bottom"
        "hdn hdn"
        "button button"
        "notify notify";
    grid-template-columns: 1fr auto;
    column-gap: 0.5rem;
}
form#edit-page-form table.form { grid-area: title; }
form#edit-page-form #wd-editor-toolbar-panel { grid-area: toolbar; }
form#edit-page-form > div:nth-of-type(2) { grid-area: txt; }
form#edit-page-form .change-textarea-size { grid-area: size; }
form#edit-page-form .edit-help-34 { grid-area: help; }
form#edit-page-form table.edit-page-bottomtable { grid-area: bottom; }
form#edit-page-form #edit-page-captcha { grid-area: hdn; }
form#edit-page-form .buttons.alignleft { grid-area: button; }
form#edit-page-form .checkbox.do-not-notify { grid-area: notify; }

/* Title area */
form#edit-page-form table.form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    margin: 0!important;
    font-size: calc(var(--true-font-size)*1.25);
}
form#edit-page-form table.form tbody,
form#edit-page-form table.form tr {
    display: contents;
}
form#edit-page-form table.form td {
    display: block;
    flex-grow: 1;
    font-weight: bold;
    padding: 0;
    margin: 0;
}
form#edit-page-form table.form td:nth-of-type(1) {
    font-size: var(--true-font-size);
    color: rgb(var(--basalt-main-text-color));
    transition: color 0.175s ease-out;
}
form#edit-page-form table.form:focus-within td:nth-of-type(1) {
    color: rgb(var(--basalt-focus-color));
}
form#edit-page-form table.form td:nth-of-type(2) {
    flex-grow: 99;
}
form#edit-page-form table.form  td:nth-of-type(1)::after {
    content: "";
    display: block;
    height: 0.25rem;
    width: 0;
    background-color: rgb(var(--basalt-focus-color));
    order: 1;
    transition: width 0.175s ease-out;
}
form#edit-page-form table.form:focus-within  td:nth-of-type(1)::after {
    width: 100%;
}
#edit-page-title {
    width: 100%;
    padding: 0.125ch 0.325ch;
    box-sizing: border-box;
    margin: 0;
    border: none;
    font-family: var(--header-font);
    background-color: rgb(var(--edit-area-ancillary-background-color));
}
#edit-page-title:focus-visible {
    outline: none;
}

/* Toolbar area */
#wd-editor-toolbar-panel, #np-editor-panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--edit-area-toolbar-icon-size)/4);
    background-color: rgb(var(--edit-area-toolbar-background-color));
    border: solid var(--edit-area-border-width) rgb(var(--edit-area-border-color));
    border-bottom: 0;
    padding: 0.5rem;
    margin-top: 0.5rem;
}
:is(#wd-editor-toolbar-panel, #np-editor-panel) > div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: auto;
    gap: calc(var(--edit-area-toolbar-icon-size)/4);
}
:is(#wd-editor-toolbar-panel, #np-editor-panel) > div > ul {
    display: contents;
}

:is(#wd-editor-toolbar-panel, #np-editor-panel) > div > ul > li {
    float: none;
    position: relative;
    margin: 0;
    padding: 0;
}
.wd-editor-toolbar-panel li.hseparator { display: none; }
.wd-editor-toolbar-panel ul li a,
.wd-editor-toolbar-panel ul li a:hover {
    background-image: none;
}
.wd-editor-toolbar-panel ul li a {
    display: block;
    height: var(--edit-area-toolbar-icon-size);
    width: var(--edit-area-toolbar-icon-size);
    background-color: transparent;
    position: relative;
}

form[id] div.wd-editor-toolbar-panel ul li ul {
    position: absolute;
    display: flex;
    flex-direction: column;
    border: none;
    border-inline-start: solid calc(var(--edit-area-toolbar-icon-size)/8) rgb(var(--basalt-UI-dark-palette));
    background-color: rgb(var(--edit-area-toolbar-background-color));
    left: 0;
    inset-block-start: 100%;
    inset-inline-start: 0;
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    transition: clip-path 0.175s ease-out;
}
form[id] div.wd-editor-toolbar-panel ul li.sfhover ul,
form[id] div.wd-editor-toolbar-panel ul li:is(:hover, :focus-within) ul {
    clip-path: inset(0);
    pointer-events: auto;
}

.wd-editor-toolbar-panel ul li ul li a {
    height: calc(var(--edit-area-toolbar-icon-size)*7/8);
    width: calc(var(--edit-area-toolbar-icon-size)*7/8);
}

.wd-editor-toolbar-panel ul li a:focus {
    outline: none;
}
.wd-editor-toolbar-panel ul li a::before,
.wd-editor-toolbar-panel ul li a::after {
    content: "";
    display: block;
    width: 100%; height: 100%;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}
.wd-editor-toolbar-panel ul li a::after {
    background-color: rgb(var(--basalt-main-text-color));
    -webkit-mask-image: var(--edit-area-toolbar-icon-mask);
    mask-image: var(--edit-area-toolbar-icon-mask);
    -webkit-mask-size: 80%;
    mask-size: 80%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: background-color var(--button-hover-transition);
}
.wd-editor-toolbar-panel ul li a::before {
    background-color: rgb(var(--basalt-focus-color));
    width: 0;
    transition: all var(--button-hover-transition);
}
.wd-editor-toolbar-panel ul li a:is(:hover, :focus)::before { width: 100%; }
.wd-editor-toolbar-panel div > ul > li.sfhover > a:not(:hover, :focus)::before,
.wd-editor-toolbar-panel div > ul > li:focus-within > a:not(:hover, :focus)::before {
    width: 100%;
    background-color: rgb(var(--basalt-UI-dark-palette));
}
.wd-editor-toolbar-panel ul li a:is(:hover, :focus)::after,
.wd-editor-toolbar-panel div > ul > li.sfhover > a:not(:hover, :focus)::after,
.wd-editor-toolbar-panel div > ul > li:focus-within > a:not(:hover, :focus)::after {
    background-color: rgb(var(--basalt-light-text-color));
}

.wd-editor-toolbar-panel a.weditor-h1::after {
    --edit-area-toolbar-icon-mask: var(--h1-mask);
}
.wd-editor-toolbar-panel a.weditor-h2::after {
    --edit-area-toolbar-icon-mask: var(--h2-mask);
}
.wd-editor-toolbar-panel a.weditor-h3::after {
    --edit-area-toolbar-icon-mask: var(--h3-mask);
}
.wd-editor-toolbar-panel a.weditor-h4::after {
    --edit-area-toolbar-icon-mask: var(--h4-mask);
}
.wd-editor-toolbar-panel a.weditor-h5::after {
    --edit-area-toolbar-icon-mask: var(--h5-mask);
}
.wd-editor-toolbar-panel a.weditor-h6::after {
    --edit-area-toolbar-icon-mask: var(--h6-mask);
}
.wd-editor-toolbar-panel a.weditor-bold::after {
    --edit-area-toolbar-icon-mask: var(--bold-mask);
}
.wd-editor-toolbar-panel a.weditor-italic::after {
    --edit-area-toolbar-icon-mask: var(--italic-mask);
}
.wd-editor-toolbar-panel a.weditor-underline::after {
    --edit-area-toolbar-icon-mask: var(--underline-mask);
}
.wd-editor-toolbar-panel a.weditor-strikethrough::after {
    --edit-area-toolbar-icon-mask: var(--strikethrough-mask);
}
.wd-editor-toolbar-panel a.weditor-teletype::after {
    --edit-area-toolbar-icon-mask: var(--teletype-mask);
}
.wd-editor-toolbar-panel a.weditor-quote::after {
    --edit-area-toolbar-icon-mask: var(--quote-mask);
}
.wd-editor-toolbar-panel a.weditor-superscript::after {
    --edit-area-toolbar-icon-mask: var(--superscript-mask);
}
.wd-editor-toolbar-panel a.weditor-subscript::after {
    --edit-area-toolbar-icon-mask: var(--subscript-mask);
}
.wd-editor-toolbar-panel a.weditor-raw::after {
    --edit-area-toolbar-icon-mask: var(--rawtext-mask);
}
.wd-editor-toolbar-panel a.weditor-hr::after {
    --edit-area-toolbar-icon-mask: var(--hr-mask);
}
.wd-editor-toolbar-panel a.weditor-div::after {
    --edit-area-toolbar-icon-mask: var(--divblock-mask);
}
.wd-editor-toolbar-panel a.weditor-clearfloat::after {
    --edit-area-toolbar-icon-mask: var(--clearfloat-mask);
}
.wd-editor-toolbar-panel a.weditor-clearfloatleft::after {
    --edit-area-toolbar-icon-mask: var(--clearfloatleft-mask);
}
.wd-editor-toolbar-panel a.weditor-clearfloatright::after {
    --edit-area-toolbar-icon-mask: var(--clearfloatright-mask);
}
.wd-editor-toolbar-panel a.weditor-table::after {
    --edit-area-toolbar-icon-mask: var(--table-mask);
}
.wd-editor-toolbar-panel a.weditor-toc::after {
    --edit-area-toolbar-icon-mask: var(--toc-mask);
}
.wd-editor-toolbar-panel a.weditor-code::after {
    --edit-area-toolbar-icon-mask: var(--codeblock-mask);
}
.wd-editor-toolbar-panel a.weditor-codewiz::after {
    --edit-area-toolbar-icon-mask: var(--codewiz-mask);
}
.wd-editor-toolbar-panel a.weditor-uri::after {
    --edit-area-toolbar-icon-mask: var(--url-mask);
}
.wd-editor-toolbar-panel a.weditor-uriwiz::after {
    --edit-area-toolbar-icon-mask: var(--urlwiz-mask);
}
.wd-editor-toolbar-panel a.weditor-pagelink::after {
    --edit-area-toolbar-icon-mask: var(--pagelink-mask);
}
.wd-editor-toolbar-panel a.weditor-pagelinkwiz::after {
    --edit-area-toolbar-icon-mask: var(--pagelinkwiz-mask);
}
.wd-editor-toolbar-panel a.weditor-image::after {
    --edit-area-toolbar-icon-mask: var(--imageblock-mask);
}
.wd-editor-toolbar-panel a.weditor-imagewiz::after {
    --edit-area-toolbar-icon-mask: var(--imagewiz-mask);
}
.wd-editor-toolbar-panel a.weditor-html::after {
    --edit-area-toolbar-icon-mask: var(--htmlblock-mask);
}
.wd-editor-toolbar-panel a.weditor-numlist::after {
    --edit-area-toolbar-icon-mask: var(--ordered-list-mask);
}
.wd-editor-toolbar-panel a.weditor-bullist::after {
    --edit-area-toolbar-icon-mask: var(--unordered-list-mask);
}
.wd-editor-toolbar-panel a.weditor-incindent::after {
    --edit-area-toolbar-icon-mask: var(--inc-list-mask);
}
.wd-editor-toolbar-panel a.weditor-decindent::after {
    --edit-area-toolbar-icon-mask: var(--dec-list-mask);
}
.wd-editor-toolbar-panel a.weditor-deflist::after {
    --edit-area-toolbar-icon-mask: var(--def-list-mask);
}
.wd-editor-toolbar-panel a.weditor-footnote::after {
    --edit-area-toolbar-icon-mask: var(--footnote-mask);
}
.wd-editor-toolbar-panel a.weditor-math::after {
    --edit-area-toolbar-icon-mask: var(--math-mask);
}
.wd-editor-toolbar-panel a.weditor-mathinline::after {
    --edit-area-toolbar-icon-mask: var(--inline-math-mask);
}
.wd-editor-toolbar-panel a.weditor-eqref::after {
    --edit-area-toolbar-icon-mask: var(--eq-def-mask);
}
.wd-editor-toolbar-panel a.weditor-bib::after {
    --edit-area-toolbar-icon-mask: var(--bib-mask);
}
.wd-editor-toolbar-panel a.weditor-bibcite::after {
    --edit-area-toolbar-icon-mask: var(--bib-cite-mask);
}

/* Edit area */
form:is(#edit-page-form, #new-post-form) > div:nth-of-type(2) { min-width: 100%; }
#edit-page-textarea, #np-text {
    min-width: inherit;
    min-height: calc(var(--true-font-size)*8);
    font-family: var(--body-font);
    padding: 1ch 0.5ch;
    color: rgb(var(--basalt-main-text-color));
    background-color: rgb(var(--edit-area-main-background-color));
    border: solid var(--edit-area-border-width) rgb(var(--edit-area-border-color));
    box-sizing: border-box;
    transition: border-color 0.125s linear;
    scroll-margin-top: initial;
}
:is(#edit-page-textarea, #np-text):focus-visible {
    outline: none;
    border-color: rgb(var(--basalt-focus-color));
}

/* Size buttons + help area */
form .change-textarea-size {
    float: none;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: var(--edit-area-border-width);
    gap: var(--edit-area-border-width);
    background-color: rgb(var(--edit-area-border-color));
    box-sizing: border-box;
    padding-top: 0;
    justify-content: flex-end;
    align-items: stretch;
}
form .change-textarea-size a {
    text-decoration: none;
    display: flex;
    width: 10ch;
    flex-grow: 1;
    padding: 0;
    border: none;
    font-size: calc(var(--true-font-size)*1.25);
    justify-content: center;
    align-items: center;
    color: rgb(var(--button-text-color));
    background-color: rgb(var(--button-background-color));
    outline: rgb(var(--button-outline-color)) solid 0;
    transition: all var(--button-hover-transition);
}
form .change-textarea-size a:is(:hover,:focus) {
    color: rgb(var(--button-hover-text-color));
    background-color: rgb(var(--button-hover-background-color));
    outline-width: var(--edit-area-border-width);
    text-decoration: none;
}

form .edit-help-34 {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    align-items: center;
    margin: 0;
}
form .edit-help-34 a {
    margin-inline-end: 0.625em;
    width: max-content;
    font-size: calc(var(--true-font-size)*0.75);
}

/* Bottom area */
form#edit-page-form table.edit-page-bottomtable {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0!important;
}
form#edit-page-form table.edit-page-bottomtable tbody,
form#edit-page-form table.edit-page-bottomtable tr {
    display: contents;
}
form#edit-page-form table.edit-page-bottomtable tr td {
    box-sizing: border-box;
    flex-basis: calc(var(--main-content-width)/3);
    flex-grow: 1;
    display: block;
    padding: 0!important;
    position: relative;
}
form#edit-page-form table.edit-page-bottomtable tr td:nth-of-type(2) {
    display: flex;
    align-items: flex-end;
}
form#edit-page-form table.edit-page-bottomtable tr td > div:nth-of-type(1) {
    max-width: 100%;
    min-width: 100%;
}

form#edit-page-form table.edit-page-bottomtable tr td:nth-of-type(1) > div:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: calc(var(--true-font-size)*0.875);
    font-weight: bold;
    transition: color 0.175s ease-out;
}
form#edit-page-form table.edit-page-bottomtable tr td:nth-of-type(1) > div:nth-of-type(1)::before {
    content: "";
    display: block;
    height: 0.25rem;
    width: 0;
    background-color: rgb(var(--basalt-focus-color));
    order: 1;
    transition: width 0.175s ease-out;
}
form#edit-page-form table.edit-page-bottomtable tr td:nth-of-type(1) > div:nth-of-type(1):focus-within {
    color: rgb(var(--basalt-focus-color));
}
form#edit-page-form table.edit-page-bottomtable tr td:nth-of-type(1) > div:nth-of-type(1):focus-within::before {
    width: 100%;
}
#edit-page-comments {
    width: 100%!important;
    min-height: calc(var(--true-font-size)*6.5);
    padding: 1ch 0.875ch;
    box-sizing: border-box;
    font-weight: initial;
    background-color: rgb(var(--edit-area-ancillary-background-color));
    border: none;
    flex-grow: 1;
    order: 2;
}
#edit-page-comments:focus-visible {
    outline: none;
}
form#edit-page-form table.edit-page-bottomtable tr td > div.sub {
    position: absolute;
    inset-block-end: 0.125ch;
    inset-inline-end: 1.75ch;
}

#lock-info {
    background-color: rgb(var(--edit-area-ancillary-background-color));
    text-align: center;
    border: none;
    padding: 1em;
    margin: 0;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

/* Save button area */
#edit-page-form > div.buttons.alignleft {
    --_gap: .625rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min((100% - var(--_gap)*2), max(28ch, (100% - var(--_gap)*2)/3)), 1fr));
    gap: var(--_gap);
    padding: var(--_gap) 0 0;
    max-width: 100%;
}
#edit-page-form > .buttons.alignleft > input[type="button"] {
    margin: 0;
    font-size: calc(var(--true-font-size)*1.05);
    padding: 0.675ch;
}

/* notify checkbox */
#edit-page-form .checkbox.do-not-notify {
    margin-top: 0.5rem;
}
#edit-page-form .checkbox.do-not-notify > label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
}

/*------------*/
/*--- RATE ---*/
/*------------*/

#action-area > p > a[onclick*="PageRateModule.listeners"] {
    display: block;
    width: max-content;
    margin: 0 auto;
}

#who-rated-page-area > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr) 1.75rem);
    font-size: calc(var(--true-font-size)*0.925);
}
#who-rated-page-area > div br { display: none; }
#who-rated-page-area > div span:nth-of-type(2n+1) {
    padding-inline-start: 0.75rem;
    border-inline-start: solid 0.075rem rgb(var(--action-area-border-color));
    transition: background-color 0.175s ease-out;
    position: relative;
    align-items: center;
}
#who-rated-page-area > div span:nth-of-type(2n+1)::after {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: 0; inset-inline-start: 100%;
    width: 1.75rem;
    height: 100%;
}
#who-rated-page-area > div span[style*="color"] {
    display: grid;
    place-items: center;
    color: rgb(var(--basalt-main-text-color))!important;
    font-weight: bold;
    text-align: center;
    font-size: 1.25em;
    transition: background-color 0.175s ease-out;
}
#who-rated-page-area > div span:nth-of-type(2n+1):is(:hover, :focus-within),
#who-rated-page-area > div span:nth-of-type(2n+1):is(:hover, :focus-within) + span[style*="color"] {
    background-color: rgb(var(--basalt-focus-color),0.125);
}

/*------------*/
/*--- TAGS ---*/
/*------------*/

form[onsubmit*="PageTagsModule"] > table.form {
    display: grid;
    width: 100%;
}
form[onsubmit*="PageTagsModule"] > table.form > tbody,
form[onsubmit*="PageTagsModule"] > table.form > tbody > tr {
    display: contents;
}
form[onsubmit*="PageTagsModule"] > table.form > tbody > tr > td { display: block; padding: 0; }
form[onsubmit*="PageTagsModule"] > table.form > tbody > tr > td:first-child {
    font-family: var(--UI-font);
    font-size: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.325;
    transition: color 0.125s linear;
}
form[onsubmit*="PageTagsModule"] > table.form > tbody > tr:focus-within > td:first-child { color: rgb(var(--basalt-focus-color)); }
#page-tags-input { width: 100%; }


/*---------------*/
/*--- HISTORY ---*/
/*---------------*/

#history-form-1 {
    display: grid;
    grid-template-columns: 1fr 11.25em;
    grid-template-rows: auto auto auto;
    column-gap: 1.25rem;
}
#revision-list { grid-column: 1/3; }

#history-form-1 > table.form, #history-form-1 > table.form > tbody { display: contents; }
#history-form-1 > table.form > tbody > tr:first-child {
    display: flex;
    flex-direction: column;
    grid-row: span 2;
}

#history-form-1 > table.form > tbody > tr:first-child::before {
    content: "";
    display: block;
    width: 100%;
    height: 0.25rem;
    background-color: rgb(var(--basalt-UI-dark-palette));
}

#history-form-1 > table.form > tbody > tr:first-child > td:first-child {
    display: block;
    width: max-content;
    padding: 0.5ch 0.75ch 0;
    font-size: 0.75em;
    background-color: rgb(var(--basalt-UI-dark-palette));
    color: rgb(var(--basalt-light-text-color));
    font-family: var(--UI-font);
    text-transform: uppercase;
    order: -1;
}
#history-form-1 > table.form > tbody > tr:first-child > td:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1.25em minmax(9.875em, 1fr));
    grid-auto-rows: auto;
    text-indent: -0.5ex;
    gap: 0.325em 0.375em;
    align-items: center;
    margin: 0.375em 0;
}
#history-form-1 > table.form > tbody > tr:first-child > td:nth-child(2) input.checkbox {
    display: inline-block;
    margin: 0 0 0 auto;
}

#history-form-1 > table.form > tbody > tr:nth-child(2) {
    display: flex;
    flex-direction: column;
}
#history-form-1 > table.form > tbody > tr:nth-child(2) > td {
    position: relative;
    padding: 0;
    font-family: var(--UI-font);
}
#history-form-1 > table.form > tbody > tr:nth-child(2) > td:first-child {
    text-align: center;
    font-size: 0.75em;
    padding: 0.425ch 0 0.125ch;
    position: relative;
    text-transform: uppercase;
    transition: color 0.125s ease-out;
}
#history-form-1 > table.form > tbody > tr:nth-child(2) > td:first-child::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    display: block;
    width: 100%; height: 0;
    background-color: rgb(var(--basalt-UI-dark-palette));
    z-index: -1;
    transition: height 0.125s ease-out;
}
#history-form-1 > table.form > tbody > tr:nth-child(2):focus-within > td:first-child { color: rgb(var(--basalt-light-text-color)); }
#history-form-1 > table.form > tbody > tr:nth-child(2):focus-within > td:first-child::before { height: 100%; }

#h-perpage {
    appearance: none;
    width: 100%;
    border: solid 0.125em rgb(var(--action-area-border-color));
    outline: solid 0 rgb(var(--basalt-UI-dark-palette));
}
#h-perpage:focus {
    border-color: rgb(var(--basalt-UI-dark-palette));
    outline-width: 0;
}
#history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2)::before,
#history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2)::after {
    content: "";
    position: absolute;
    inset-block-start: 0; inset-inline-end: 0;
    display: flex;
    align-items: center; justify-content: center;
    width: 1.625em;
    height: 100%;
    background-color: rgb(var(--basalt-UI-dark-palette));
    pointer-events: none;
    z-index: 1;
    transition: all 0.125s ease-out;
}
#history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2)::before {
    height: 0;
}
#history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2)::after {
    clip-path: polygon(25% 40%, 75% 40%, 50% 70%);
}
#history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2):focus-within::before { height: 100%; }
#history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2):focus-within::after { background-color: rgb(var(--basalt-light-text-color)); }

#history-form-1 > div.buttons {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 1rem 0;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    height: min-content;
    align-self: center;
}
#history-form-1 > div.buttons > input.btn {
    cursor: pointer;
    flex-grow: 1;
    flex-basis: min(12em, 47.5vw);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.875em;
}

/*-------------------------------------*/

#main-content .pager {
    display: grid;
    position: relative;
    grid-template-areas:
        "pgno pgno pgno pgno pgno pgno pgno pgno pgno pgno pgno"
        "prv . . . . . . . . . nxt"
        "prv . . . . . . . . . nxt";
    grid-template-columns: 7.75em 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 7.75em;
    grid-template-rows: 2em auto;
    margin: 0;
    z-index: 0;
    --basalt-focus-color: var(--link-color);
}

#main-content .pager > * {
    display: flex;
    text-align: center;
    flex-grow: 1;
    height: 1.875em;
    align-items: center;
    justify-content: center;
}
#main-content .pager .pager-no {
    grid-area: pgno;
    position: static;
    height: auto;
    width: max-content;
    padding: 0 0.75ch;
    box-sizing: border-box;
    background-color: rgb(var(--basalt-UI-dark-palette));
    color: rgb(var(--basalt-light-text-color));
    font-family: var(--UI-font);
    text-transform: uppercase;
}
#main-content .pager .pager-no::after {
    content: "";
    display: block;
    background-color: inherit;
    position: absolute;
    inset-block-start: calc(2em - 0.25rem);
    left: 0;
    width: 100%;
    height: 0.25rem;
}

#main-content .pager > span.current {
    background-color: rgb(var(--basalt-UI-dark-palette));
    color: rgb(var(--basalt-light-text-color));
    font-weight: bold;
    border: none;
    margin: 0;
    padding: 0;
}

#main-content .pager span.target { display: contents; }
#main-content .pager > span.target > a {
    display: flex;
    height: 100%;
    width: 100%;
    min-height: 1.875em;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    border: none;
    margin: 0;
    padding: 0;
    transition: color 0.1s ease-out;
}
#main-content .pager span > a::before {
    content: "";
    position: absolute;
    inset-block-start: 0; inset-inline-start: 0;
    display: block;
    width: 100%;
    height: 0;
    background-color: rgb(var(--basalt-focus-color));
    z-index: -1;
    transition: height 0.125s ease-out;
}
#main-content .pager span > a:is(:hover, :focus) { color: rgb(var(--basalt-light-text-color)); }
#main-content .pager span > a:is(:hover, :focus)::before { height: 100%; }

#main-content .pager > span.target:nth-child(2) > a { grid-area: prv; }
#main-content .pager > span.target:last-child > a { grid-area: nxt; }
#main-content .pager > span.target:is(:nth-child(2), :last-child) > a {
    font-weight: bold;
    min-width: max-content;
    padding: 0 1ch;
    margin: 0;
    box-sizing: border-box;
}
#main-content .pager > span.target:is(:nth-child(2), :last-child) > a::before {
    height: 100%;
    width: 0;
    transition: width 0.125s ease-out;
}
#main-content .pager > span.target:last-child > a::before {
    inset-inline-end: 0; inset-inline-start: unset;
}
#main-content .pager > span.target:is(:nth-child(2), :last-child) > a:is(:hover, :focus)::before {
    width: 100%;
}

#main-content .pager::before, #main-content .pager::after {
    grid-area: nxt;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--basalt-sub-text-color));
    opacity: 0.375;
    font-weight: bold;
    z-index: -1;
    cursor: not-allowed;
}
#main-content .pager::before { content: var(--pager-previous-button); grid-area: prv; }
#main-content .pager::after { content: var(--pager-next-button); grid-area: nxt; }

/*-------------------------------------*/

#revision-list .page-history {
    display: block;
    width: 100%;
    font-size: calc(var(--true-font-size)*0.825);
    margin: 0;
}
#revision-list .page-history tbody { display: contents; }

#revision-list .page-history td.optionstd a {
    text-decoration: none;
    display: flex;
    padding: 0;
    font-size: calc(var(--true-font-size)*0.925);
    justify-content: center;
    align-items: center;
    border: solid 0.1em rgb(var(--button-border-color));
    color: rgb(var(--button-text-color));
    background-color: rgb(var(--button-background-color));
    outline: rgb(var(--button-outline-color)) solid 0;
    transition: all var(--button-hover-transition);
}
#revision-list .page-history td.optionstd a:is(:hover,:focus) {
    color: rgb(var(--button-hover-text-color));
    border-color: rgb(var(--button-hover-border-color));
    background-color: rgb(var(--button-hover-background-color));
    outline-width: var(--edit-area-border-width);
}

#revision-list .page-history tr:first-child { display: none; }
#revision-list .page-history tr[id*="revision-row"] {
    display: grid;
    align-items: center;
    grid-template-areas:
        "rev flags . date"
        "dv dv dv dv"
        "radio actions by comment";
    grid-template-columns: 5.5ch 8.25em 1.5fr 5fr;
    padding: 0.25rem 0.375rem;
    box-sizing: border-box;
    border-top: solid 0.075rem rgb(var(--action-area-border-color));
    transition: background-color 0.175s ease-out;
}
#revision-list .page-history tr[id*="revision-row"]:is(:hover, :focus-within) {
    background-color: rgb(var(--basalt-focus-color),0.0625);
}

#revision-list .page-history tr[id*="revision-row"]::before {
    grid-area: dv;
    content: "";
    display: block;
    height: 0.15rem;
    width: 0;
    background: rgb(var(--basalt-UI-dark-palette));
    transition: width 0.25s ease-out;
    transition-delay: 0s;
}
#revision-list .page-history tr[id*="revision-row"]:is(:hover, :focus-within)::before {
    width: 100%;
    transition-delay: 0.1s;
}
#revision-list .page-history tr[id*="revision-row"] td {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    width: unset!important;
}
#revision-list .page-history tr[id*="revision-row"] td:nth-child(1) {
    grid-area: rev;
    font-family: var(--mono-font);
    font-size: 0.925em;
    padding: 0;
    text-align: center;
    position: relative;
    z-index: 0;
    transition: color 0.125s ease-out;
}
#revision-list .page-history tr[id*="revision-row"] td:nth-child(1)::before {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: 0; inset-inline-start: 0;
    height: 100%; width: 0;
    background-color: rgb(var(--basalt-UI-dark-palette));
    transition: width 0.075s ease-out;
    transition-delay: 0s;
    z-index: -1;
}
#revision-list .page-history tr[id*="revision-row"]:is(:hover, :focus-within) td:nth-child(1) {
    color: rgb(var(--basalt-light-text-color));
    transition-delay: 0.125s;
}
#revision-list .page-history tr[id*="revision-row"]:is(:hover, :focus-within) td:nth-child(1)::before {
    width: 100%;
    transition-delay: 0.125s;
}

#revision-list .page-history tr[id*="revision-row"] td:nth-child(2) {
    grid-area: radio;
    gap: 0.125rem;
}
#revision-list .page-history tr[id*="revision-row"] td:nth-child(3) {
    grid-area: flags;
    align-items: stretch;
    justify-content: start;
    padding: 0;
}
#revision-list .page-history tr[id*="revision-row"] td:nth-child(3) > span {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: bold;
    padding: 0 0.325em;
    color: rgb(var(--basalt-sub-text-color));
    position: relative;
    z-index: 0;
    transition: color 0.075s ease-out;
}
#revision-list .page-history tr[id*="revision-row"]:is(:hover, :focus-within) td:nth-child(3) > span {
    color: rgb(var(--basalt-light-text-color));
    transition-delay: 0.125s;
}
#revision-list .page-history tr[id*="revision-row"] td:nth-child(3) > span::before {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: 0; inset-inline-start: 0;
    height: 100%; width: 0;
    background: rgb(var(--basalt-focus-color));
    transition: width 0.075s ease-out;
    transition-delay: 0s;
    z-index: -1;
    transition: width 0.075s ease-out;
}
#revision-list .page-history tr[id*="revision-row"]:is(:hover, :focus-within) td:nth-child(3) > span::before {
    width: 100%;
    transition-delay: 0.125s;
}

#revision-list .page-history tr[id*="revision-row"] td:nth-child(4) {
    grid-area: actions;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.325rem;
    align-items: center;
    text-align: center;
    height: 100%;
    font-family: var(--UI-font);
}

#revision-list .page-history tr[id*="revision-row"] td:nth-child(5) {
    grid-area: by;
    margin: 0.375em 2vw;
}

#revision-list .page-history tr[id*="revision-row"] td:nth-child(6) {
    grid-area: date;
    justify-content: end;
    text-align: end;
    font-size: 0.975em;
    font-family: var(--UI-font);
    padding: 0!important;
}

#revision-list .page-history tr[id*="revision-row"] td:nth-child(7) {
    grid-area: comment;
    display: block;
    text-align: center;
    font-size: calc(var(--true-font-size)*0.875)!important;
    padding-top: 0.375em;
}

/* Recent Changes */

div.site-changes-box {
    margin: 0.5rem 0;
}

#page-content div.site-changes-box > form > table.form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
}
div.site-changes-box > form > table.form > tbody { display: contents; }
div.site-changes-box > form > table.form > tbody > tr {
    display: flex;
    flex-direction: column;
    flex-basis: 14.5em;
    flex-grow: 1;
}
div.site-changes-box > form > table.form > tbody > tr:first-child {
    flex-basis: 100%;
}
div.site-changes-box > form > table.form td {
    padding: 0;
}
div.site-changes-box > form > table.form > tbody > tr > td:first-child {
    order: -1;
    width: max-content;
    padding: 0.5ch 0.75ch 0;
    font-size: 0.75em;
    box-sizing: border-box;
    background-color: rgb(var(--basalt-UI-dark-palette));
    color: rgb(var(--basalt-light-text-color));
    font-family: var(--UI-font);
    text-transform: uppercase;
}
div.site-changes-box > form > table.form > tbody > tr::before {
    content: "";
    display: block;
    background-color: rgb(var(--basalt-UI-dark-palette));
    width: 100%;
    height: 0.25rem;
}
div.site-changes-box > form > table.form > tbody > tr:first-child > td:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1.75em minmax(12.75em, 1fr));
    grid-auto-rows: 1.75em;
    gap: 0.175em;
    align-items: center;
    margin: 0.325rem 0;
}
div.site-changes-box > form > table.form > tbody > tr:first-child > td:nth-child(2) input[type="checkbox"] {
    margin: 0 0 0 auto;
}
div.site-changes-box > form > table.form > tbody > tr > td > select {
    width: 100%;
}

#site-changes-list div.changes-list-item {
    display: grid;
    grid-template-areas:
        "name flag rev user"
        "comment flag rev date";
    grid-template-columns: 1fr 3.25em 5.875em 10em;
    gap: 0.25em;
    padding: 0.625em 0.175em 0.325em;
    align-items: center;
    font-size: 0.95em;
    border-top: solid 0.075rem rgb(var(--action-area-border-color));
    transition: background-color 0.175s ease-out;
}
#site-changes-list div.changes-list-item:is(:hover, :focus-within) { background-color: rgb(var(--basalt-focus-color),0.0625); }

#site-changes-list div.changes-list-item > table,
#site-changes-list div.changes-list-item > table > tbody,
#site-changes-list div.changes-list-item > table > tbody > tr { display: contents; }
#site-changes-list div.changes-list-item > table > tbody > tr > td {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
}
#site-changes-list div.changes-list-item > table > tbody > tr > td.title { grid-area: name; }
#site-changes-list div.changes-list-item > table > tbody > tr > td.flags { grid-area: flag; }
#site-changes-list div.changes-list-item > table > tbody > tr > td.flags > .spantip {
    text-decoration: none;
    color: rgb(var(--basalt-sub-text-color));
    font-weight: bold;
}
#site-changes-list div.changes-list-item > table > tbody > tr > td.revision-no { grid-area: rev; font-family: var(--UI-font); }
#site-changes-list div.changes-list-item > table > tbody > tr > td.mod-by { grid-area: user; text-align: center; }
#site-changes-list div.changes-list-item > table > tbody > tr > td.mod-date {
    grid-area: date;
    font-size: 0.825em;
    font-family: var(--UI-font);
}
#site-changes-list div.changes-list-item > div.comments {
    grid-area: comment;
    margin: 0;
    color: rgb(var(--basalt-main-text-color));
    text-align: center;
}

@media only screen and (max-width: 580px) {
    #history-form-1 {
        display: block;
    }
    #main-content .pager {
        grid-template-areas:
            "pgno pgno pgno pgno pgno pgno pgno"
            "prv . . . . . nxt"
            "prv . . . . . nxt";
        grid-template-columns: 2.5em 1fr 1fr 1fr 1fr 1fr 2.5em;
    }
    #main-content .pager > span.target:is(:nth-child(2), :last-child) > a {
        font-size: 0;
    }
    #main-content .pager::before, #main-content .pager::after,
    #main-content .pager > span.target:is(:nth-child(2), :last-child) > a::after {
        font-size: calc(var(--true-font-size)*1.25);
    }
    #main-content .pager::before,
    #main-content .pager > span.target:nth-child(2) > a::after { content: "«";  }
    #main-content .pager::after,
    #main-content .pager > span.target:last-child > a::after { content: "»";  }

    #main-content .page-history tr[id*="revision-row"] {
        grid-template-areas:
            "rev flags date"
            "dv dv dv"
            "radio actions by"
            "comment comment comment";
        grid-template-columns: 5.5ch 1fr 11.75em;
    }

    #site-changes-list div.changes-list-item {
        grid-template-areas:
            "name name name rev"
            "comment comment comment comment"
            "flag user date date";
        grid-template-columns: 3.25em 1fr 4.5em 5.875em;
    }
    #site-changes-list div.changes-list-item > table > tbody > tr > td.flags { text-align: start; }
    #site-changes-list div.changes-list-item > table > tbody > tr > td:is(.revision-no,.mod-date) { text-align: end; }
}

#history-subarea > h2 {
    grid-row-start: 1;
    font-family: var(--UI-font);
    font-size: calc(var(--true-font-size)*1.05);
    color: rgb(var(--basalt-sub-text-color));
    text-transform: uppercase;
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0.425rem 0;
}

.diff-box table.page-compare th {
    background-color: rgb(var(--basalt-UI-dark-palette));
    border-color: rgb(var(--basalt-UI-dark-palette));
    color: rgb(var(--basalt-light-text-color));
    padding: 0.5em 0.75em;
    font-family: var(--header-font);
    font-weight: bold;
}
.diff-box table.page-compare td {
    border: solid 0.05rem rgb(var(--general-border-color));
    padding: 0.5em 0.625em;
}

#action-area .inline-diff.page-source {
    font-size: .825em;
    border-inline-start: .125rem solid rgb(var(--general-border-color));
    padding-inline-start: 1.625em;
    position: relative;
}

.inline-diff.page-source :is(ins,del) {
    background-color: rgb(var(--diff-action-color),0.275);
}

.inline-diff.page-source ins {
    text-decoration: none;
    --diff-action-color:var(--basalt-positive-color);
}
.inline-diff.page-source del {
    --diff-action-color:var(--basalt-negative-color);
}
.inline-diff.page-source :is(ins, del) > br {
    display: none;
}
.inline-diff.page-source :is(ins,del):first-child::before,
.inline-diff.page-source :not(ins,del) + :is(ins,del)::before {
    content: "";
    position: absolute;
    inset-inline-start: -.425rem;
    margin-block-start: .45ex;
    width: .775rem;
    height: .775rem;
    border-radius: 1rem;
    background: rgb(var(--diff-action-color));
}
.inline-diff.page-source :is(del+br+del)::before {
    visibility: hidden;
}

/*-------------------*/

#page-version-info {
    right: var(--main-content-side-margin);
    border: solid var(--blockquote-border-width) rgb(var(--blockquote-border-color));
    padding: 1rem;
    box-sizing: border-box;
    background-color: rgb(var(--blockquote-background-color),0.875);
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
    max-width: min-content;
    opacity: 1;
    z-index: 1;
}

/*-------------------*/
/*-------------------*/
/*-------------------*/

#action-area input.text,
textarea#file-comments {
    border: none;
    background-color: rgb(var(--basalt-secondary-color));
    padding: 0.5ch 0.325ch;
    max-width: 100%;
    box-sizing: border-box;
}

#file-upload-form table.form,
form[onsubmit*="setParent"] > table.form,
#rename-option-rename table.form {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
}
:is(#file-upload-form table.form,form[onsubmit*="setParent"] > table.form, #rename-option-rename table.form) > tbody {
    display: contents;
}
:is(#file-upload-form table.form,form[onsubmit*="setParent"] > table.form, #rename-option-rename table.form) > tbody > tr {
    display: grid;
    gap: 0.125em;
    align-items: center;
}
:is(#file-upload-form table.form,form[onsubmit*="setParent"] > table.form, #rename-option-rename table.form) > tbody > tr > td {
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
}
:is(#file-upload-form table.form,form[onsubmit*="setParent"] > table.form, #rename-option-rename table.form) > tbody > tr > td:nth-child(1) {
    font-family: var(--UI-font);
    font-size: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.325;
    transition: color 0.125s linear;
}
:is(#file-upload-form table.form,form[onsubmit*="setParent"] > table.form, #rename-option-rename table.form) tr:focus-within > td:nth-child(1) {
    color: rgb(var(--basalt-focus-color));
}
:is(#file-upload-form table.form,form[onsubmit*="setParent"] > table.form, #rename-option-rename table.form) td:nth-child(2) > *:not(div,[type=checkbox]) {
    width: 100%!important;
}

/*-------------*/
/*--- FILES ---*/
/*-------------*/

#action-area table.page-files {
    display: block;
    width: 100%;
    margin: 0 auto;
}
#action-area table.page-files > :is(thead, tbody) {
    display: contents;
}
#action-area table.page-files > :is(thead, tbody) > tr {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: 2.5fr 1fr 4.5em 2fr;
    align-items: center;
    padding: 0.475em 0;
    border-top: solid 0.1em rgb(var(--action-area-border-color));
    overflow-wrap: anywhere;
}
#action-area table.page-files > thead > tr {
    border-top: 0;
    text-transform: uppercase;
    font-family: var(--UI-font);
}
#action-area table.page-files > tbody > tr:last-child {
    border-bottom: solid 0.1em rgb(var(--action-area-border-color));
}
#action-area table.page-files > tbody > tr[id*="file-options-row"] {
    border-top:  0;
    padding-top: 0;
    background-color: transparent;
}

#action-area table.page-files :is(td, th) {
    text-align: center;
    padding: 0;
    display: block;
    font-size: 0.875em;
}
#action-area table.page-files > tbody > tr > td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.325rem;
}
#action-area table.page-files > tbody > tr > td:last-child > a {
    flex-grow: 1;
    flex-basis: 3.75em;
}

#action-area > div[style="margin-top:1em; text-align: center; font-size: 120%;"] {
    font-size: 1.05em!important;
    margin: 0.5em 0!important;
    display: flex;
    justify-content: flex-end;
}

input#upload-userfile {
    color: rgb(var(--basalt-main-text-color));
    box-shadow: 0 0 0 0 rgb(var(--basalt-focus-color));
    transition: box-shadow 0.125s linear;
}

#file-upload-form table.form {
    flex-direction: row;
    flex-wrap: wrap;
}
#file-upload-form table.form >tbody > tr {
    flex-grow: 1;
    flex-basis: calc(var(--main-content-width)/2.5);
}

#file-upload-form table.form tr:first-child:is(:hover, :focus-within) td:first-child {
    color: rgb(var(--basalt-focus-color));
}
#file-upload-form table.form tr:first-child:is(:hover, :focus-within) input#upload-userfile {
    box-shadow: 0 0 0 0.175rem rgb(var(--basalt-focus-color));
}
input#upload-userfile::file-selector-button {
    padding: 0.5ch;
    margin: 0 0.125em;
    margin-inline-end: 0.55em;
    font-family: var(--UI-font);
    color: rgb(var(--button-text-color));
    background-color: rgb(var(--button-background-color));
    border: solid 0.125em rgb(var(--button-border-color));
    outline: rgb(var(--button-outline-color)) solid 0;
    transition: all var(--button-hover-transition);
}
#file-upload-form table.form tr:first-child:is(:hover, :focus-within) input#upload-userfile::file-selector-button {
    color: rgb(var(--button-hover-text-color));
    background-color: rgb(var(--button-hover-background-color));
    border-color: rgb(var(--button-hover-border-color));
    outline-width: 0.475em;
}

#file-comments {
    min-width: 100%;
    max-width: 100%;
    min-height: 4.875em;
}
#action-area #upload-dfilename {
    padding-bottom: 1.25em;
}
:is(#upload-dfilename, #file-comments) + div.sub {
    position: absolute;
    inset-block-end: 0.25ch;
    inset-inline-end: 1.5ch;
    width: max-content;
}

/*------------------*/
/*--- SITE TOOLS ---*/
/*------------------*/

#site-tools-box {
    padding-top: 0!important;
    grid-row: 1/3;
}
#site-tools-box::before {
    content: "";
    display: block;
    background-color: rgb(var(--action-area-border-color));
    height: 0.1rem;
    margin: calc(var(--true-font-size)*1.125) 0;
}

#site-tools-box > .page-options-bottom {
    height: auto;
    margin: 0;
}
#site-tools-box .page-options-bottom ul.nav-pills {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
}
#site-tools-box .page-options-bottom ul.nav-pills > li {
    display: contents;
}
#site-tools-box .page-options-bottom ul.nav-pills > li > a {
    margin: 0;
    padding: 0.5em;
    text-align: center;
    text-transform: capitalize;
    border-left: solid 0.05rem rgb(var(--general-border-color));
    flex-basis: 7.75rem;
    text-decoration: none;
    color: rgb(var(--basalt-main-text-color));
    transition: all var(--button-hover-transition);
}
#site-tools-box .page-options-bottom ul.nav-pills > li:first-child > a { border-left: none; }
#site-tools-box .page-options-bottom ul.nav-pills > li > a:is(:hover, :focus) {
    font-weight: bold;
    color:  rgb(var(--basalt-focus-color));
}

#st-action-area span[style*="#999"] {
    color: rgb(var(--basalt-sub-text-color))!important;
}


/*---------------------*/
/*--- EDIT SECTIONS ---*/
/*---------------------*/

#edit-section-content {
    border: none;
    padding: 0;
    background-color: rgb(var(--basalt-focus-color),0.0625);
    box-shadow: 0 0 0 0.675rem rgb(var(--basalt-focus-color),0.0625);
}
a.edit-section-button {
    float: right;
    background: transparent;
    font-size: calc(var(--true-font-size)*0.875);
    text-transform: uppercase;
    margin: 0; margin-top: 1.15em;
    padding: 0;
}
a.edit-section-button::before { content: "["; }
a.edit-section-button::after { content: "]"; }

a.edit-section-button + :is(h1,h2,h3,h4,h5,h6) {
    box-shadow: 0 0.1rem 0 rgb(var(--basalt-alternate-color));
}


/*-----------------*/
/*--- EDIT META ---*/
/*-----------------*/

#action-area > h1 + p + h2 + div[style*="padding-left"] {
    padding-left: 0!important;
}
#action-area > h1 + p + h2 + div[style*="padding-left"] > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: center;
    font-family: var(--mono-font);
    padding: 0.5rem 0;
}
#action-area > h1 + p + h2 + div[style*="padding-left"] > div:not(:last-child) { border-bottom: 0.05rem solid rgb(var(--general-border-color)); }
#action-area > h1 + p + h2 + div[style*="padding-left"] > div > a[onclick*="EditMetaModule.listeners.deleteTag"] {
    order: 1;
    margin-right: 0!important;
    cursor: pointer;
    margin: 0;
    display: inline-block;
    min-width: max-content;
    padding: 0.5ch;
    font-family: var(--UI-font);
    text-decoration: none;
    color: rgb(var(--basalt-cancel-color));
    background-color: rgb(var(--button-background-color));
    border: solid 0.125em rgb(var(--button-border-color));
    outline: rgb(var(--button-outline-color)) solid 0;
    transition: all var(--button-hover-transition);
}
#action-area > h1 + p + h2 + div[style*="padding-left"] > div > a[onclick*="EditMetaModule.listeners.deleteTag"]:is(:hover, :focus) {
    color: rgb(var(--button-hover-text-color));
    background-color: rgb(var(--button-hover-background-color));
    border-color: rgb(var(--button-hover-border-color));
    outline-width: 0.25rem;
}

#edit-meta-addbutton {
    text-align: center;
}

#edit-meta-newtag > h2::after { content: ":"; }
#edit-meta-newtag-form > table {
    font-family: var(--mono-font);
}


/*----------------*/
/*--- WATCHERS ---*/
/*----------------*/

#action-area > ul[style="list-style: none"] {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(16em, 100%), 1fr));
    gap: 0.25rem;
}


/*-----------------*/
/*--- BACKLINKS ---*/
/*-----------------*/

#action-area > h1 + h2 + ul,
#action-area > h1 + h2 ~ h2  ~ ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--mono-font);
    font-size: .875em;
    counter-reset: backlink;
}
#action-area > h1 + h2 ~ h2  ~ ul:not(:has(li)) { display: none; }
#action-area > h1 + h2 ~ h2  ~ ul:last-child { margin-block-start: 1rem; }

#action-area > h1 + h2 + ul > li,
#action-area > h1 + h2 ~ h2  ~ ul > li {
    display: flex;
    align-items: center;
    padding-block: .5em; padding-inline: .375em;
    border-block-end: solid 0.05rem rgb(var(--action-area-border-color));
    transition: background-color 0.125s ease-out;
    counter-increment: backlink;
}
#action-area > h1 + h2 + ul > li:is(:hover,:focus-within),
#action-area > h1 + h2 ~ h2  ~ ul > li:is(:hover,:focus-within) {
    background-color: rgb(var(--basalt-focus-color),.0625);
}

#action-area > h1 + h2 + ul > li::before,
#action-area > h1 + h2 ~ h2  ~ ul > li::before {
    content: counter(backlink) ".";
    order: -1;
    font-size: .75em;
    min-width: max-content;
    margin-inline-end: 1ch;
}

#action-area > h1 + h2 ~ h2  ~ ul > li::after {
    content: "";
    display: block;
    min-width: .625rem;
    flex-grow: 1;
    order: -1;
}

#action-area > h1 + h2 + ul > li > a,
#action-area > h1 + h2 ~ h2  ~ ul > li > a:first-child {
    font-family: var(--body-font);
    order: -1;
    overflow-wrap: anywhere;
}

/*-------------------*/
/*--- PAGE SOURCE ---*/
/*-------------------*/

#action-area .page-source {
    overflow-wrap: anywhere;
    font-family: var(--mono-font);
    font-size: 0.875em;
    padding: 0.5em 0;
    border: none;
}

/*--------------*/
/*--- PARENT ---*/
/*--------------*/
#action-area div.autocomplete-container.yui-ac { width: 100%!important; }

.yui-ac-content {
    border: solid 0.05rem rgb(var(--general-border-color));
    background-color: rgb(var(--basalt-background-color));
}
.autocomplete-list li {
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}
.autocomplete-list li.yui-ac-highlight {
    background-color: rgb(var(--basalt-focus-color));
    color: rgb(var(--basalt-light-text-color));
}

/*---------------------*/
/*--- RENAME/DELETE ---*/
/*---------------------*/

#rename-option-rename > p > :is(#rename-show-backlinks, #rename-hide-backlinks) {
    display: block;
    width: max-content;
    margin: 0 auto;
}

#action-area > a.action-area-close + h1 + p + table.form {
    display: block;
    width: 100%;
    padding: 0.675rem;
    border-style: solid;
    border-color: rgb(var(--action-area-border-color));
    border-width: 0.1em 0;
}
#action-area > a.action-area-close + h1 + p + table.form > tbody { display: contents; }
#action-area > a.action-area-close + h1 + p + table.form > tbody > tr {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 1rem;
    flex-wrap: wrap;
}
#action-area > a.action-area-close + h1 + p + table.form > tbody > tr > td:first-child {
    font-family: var(--UI-font);
    font-size: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
}
#action-area > a.action-area-close + h1 + p + table.form > tbody > tr > td:nth-child(2) {
    display: grid;
    grid-template-columns: 1.25em 1fr;
    align-items: center;
    gap: 0.25rem 0.125rem;
}

#rename-option-rename > form {
    border-top: solid 0.1em rgb(var(--action-area-border-color));
    margin-top: 1em;
    padding-top: 0.75em;
}

:is(#rename-option-delete, form[onsubmit*="RenamePageModule"]) div.buttons > input.btn:first-child {
    --button-text-color: var(--basalt-main-text-color);
}
#rename-option-delete div.buttons > input.btn:last-child {
    --button-text-color: var(--basalt-negative-color);
    font-weight: bold;
}