/*********************************************************************
 ** Stylesheet for the "retrovector" Flux theme.                    **
 **                                                                 **
 ** Two colors only: #000 and #fff. There are no grays. Tone is     **
 ** made from line weight, dots, hatching and inversion, the way a  **
 ** one-color screen print or a vector display would do it.         **
 ** Fonts are SIL OFL (see ../fonts).                               **
 *********************************************************************/

/* ---------- Fonts ------------------------------------------------- */

/* Display: Archivo pinned to its Expanded width, weights 500-900. */
@font-face {
	font-family: 'Archivo Expanded';
	font-style: normal;
	font-weight: 500 900;
	font-display: swap;
	src: url('../fonts/archivo-expanded-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Archivo Expanded';
	font-style: normal;
	font-weight: 500 900;
	font-display: swap;
	src: url('../fonts/archivo-expanded-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Archivo Expanded';
	font-style: normal;
	font-weight: 500 900;
	font-display: swap;
	src: url('../fonts/archivo-expanded-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Body and data: Space Mono. */
@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/space-mono-latin-ext-400-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/space-mono-vietnamese-400-normal.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-mono-latin-ext-700-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-mono-vietnamese-700-normal.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ---------- Tokens ------------------------------------------------ */

:root {
	--font-display: 'Archivo Expanded', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
	--font-body:    'Space Mono', 'Courier New', monospace;

	--ink:   #000;
	--paper: #fff;

	--rule:  3px;                 /* heavy rule: borders, frames */
	--hair:  2px;                 /* light rule: table lines */
	--hard:  8px 8px 0 #000;      /* poster shadow for big panels */
	--hard-s: 4px 4px 0 #000;     /* poster shadow for controls */
}

/* ---------- Base -------------------------------------------------- */

html { background: #fff; }

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
	/* Artboard dot grid. */
	background-color: #fff;
	background-image: radial-gradient(circle, #000 1px, transparent 1.6px);
	background-size: 24px 24px;
	background-position: 12px 12px;
	scrollbar-color: #000 #fff;
}

::selection { background: #000; color: #fff; }

table { font-family: var(--font-body); font-size: 14px; line-height: 1.4; }
tr, td, th { vertical-align: top; }
.horizontal-table td, .vertical-table td, .generic-form-table td { vertical-align: middle; }

p { margin: 4px 0 12px; padding: 0; }
a img { border: 0; }
strong, b { font-weight: 700; }
label:hover { cursor: pointer; }

/* Links are underlined; hover inverts. */
a {
	color: #000;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
a:hover { color: #fff; background: #000; text-decoration: none; }

:focus-visible { outline: 3px dashed currentColor; outline-offset: 3px; }

/* ---------- Headings --------------------------------------------- */

h2 {
	margin: 0 0 24px;
	padding: 0 0 16px;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1.05;
	text-transform: uppercase;
	background:
		linear-gradient(#000, #000) 0 100% / 100% 4px no-repeat,
		linear-gradient(#000, #000) 0 calc(100% - 8px) / 100% 1px no-repeat;
}

h3 {
	margin: 30px 0 14px;
	padding: 0 0 8px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	border-bottom: 2px solid #000;
}
h3::before {
	content: "";
	display: inline-block;
	width: 10px; height: 10px;
	margin: 0 12px 0 2px;
	background: #000;
	transform: rotate(45deg);
	vertical-align: 2px;
}
h2 + h3 { margin-top: 10px; }

h4 { margin: 16px 0 6px; font-family: var(--font-body); font-weight: 700; font-size: 16px; }

.module-name { font-family: var(--font-display); font-weight: 900; font-size: 18px; }

/* ---------- Masthead: a vector landscape ------------------------- */

#masthead {
	position: relative;
	height: 252px;
	overflow: hidden;
	background: #000;
}

.art {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	display: block;
}
.art * { vector-effect: non-scaling-stroke; }

/* Grid lines slide toward the viewer; the only ambient motion in the theme. */
.rv-flow { animation: rv-flow 5s linear infinite; }
@keyframes rv-flow { from { transform: translateY(0); } to { transform: translateY(var(--dy)); } }

.masthead-inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	max-width: 1400px;
	height: 100%;
	margin: 0 auto;
	padding: 50px 28px 0;
	display: flex;
	align-items: flex-start;
}

/* Wallpaper masthead: a title bar (logo plate) above the illustrated banner in img/banner.png.
   The banner keeps its own proportions, so nothing is drawn over the artwork.
   --hero-x sets which part stays visible when the banner has to be cropped (phones). */
#masthead.masthead-wallpaper {
	--hero-x: 4%;
	height: auto;
	overflow: visible;
	background: #000;
}
.masthead-wallpaper .masthead-inner {
	height: auto;
	padding: 24px 28px 28px;
	align-items: center;
}
/* A double rule runs from the plate to the edge of the page, like a title band on a print. */
.masthead-wallpaper .masthead-inner::after {
	content: "";
	flex: 1;
	min-width: 20px;
	height: 12px;
	margin: 0 0 8px 34px;
	background:
		linear-gradient(#fff, #fff) 0 0 / 100% 3px no-repeat,
		linear-gradient(#fff, #fff) 0 9px / 100% 3px no-repeat;
}
.wall {
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 2210 / 456;
	min-height: 180px;
	max-height: 600px;
	background: #fff url('../img/banner.png') var(--hero-x) 50% / cover no-repeat;
	border-top: 3px solid #fff;
}

/* The logo is a sign plate, so it stays legible over any part of the art. */
#logo {
	--fg: #fff;
	--bg: #000;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 16px 24px 14px;
	color: var(--fg);
	background: var(--bg);
	border: 3px solid #fff;
	box-shadow: 8px 8px 0 #fff;
	text-decoration: none;
}
#logo:hover { --fg: #000; --bg: #fff; background: var(--bg); color: var(--fg); }

/* Title with sunset slats: solid on top, cut into stripes toward the bottom. */
.logo-text {
	display: block;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(24px, 4.4vw, 52px);
	line-height: 1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	color: var(--fg);
	background: linear-gradient(
		var(--fg) 0 55%,
		transparent 55% 60%,
		var(--fg) 60% 68%,
		transparent 68% 74%,
		var(--fg) 74% 83%,
		transparent 83% 90%,
		var(--fg) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
	.logo-text { background: none; -webkit-text-fill-color: currentColor; }
}

.logo-admin {
	position: absolute;
	top: -18px; right: 16px;
	padding: 3px 10px 4px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	color: #000;
	background: #fff;
	box-shadow: 0 0 0 3px #000;
}
#logo:hover .logo-admin { color: #fff; background: #000; box-shadow: 0 0 0 3px #fff; }

/* Racing stripes under the masthead and above the footer. */
.stripes {
	height: 24px;
	background-color: #fff;
	background-image:
		linear-gradient(#000, #000),
		linear-gradient(#000, #000);
	background-repeat: no-repeat;
	background-size: 100% 6px, 100% 3px;
	background-position: 0 6px, 0 18px;
}
.stripes-flip { background-position: 0 3px, 0 12px; background-size: 100% 3px, 100% 6px; }

/* ---------- Page grid -------------------------------------------- */

#page {
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
	max-width: 1400px;
	margin: 0 auto;
	padding: 34px 28px 48px;
}
#main { min-width: 0; }

/* ---------- Panels ----------------------------------------------- */

.menu-panel, #content {
	box-sizing: border-box;
	background: #fff;
	border: var(--rule) solid #000;
	box-shadow: var(--hard);
}
#content { padding: 30px 34px 34px; overflow-x: auto; }

/* ---------- Sidebar ---------------------------------------------- */

#nav > summary { display: none; }

.menu-panel { margin: 0 8px 36px 0; padding: 0; }
.menu-group ul { margin: 0; padding: 0; list-style: none; }
.menu-group li { margin: 0; }

.menu-title {
	margin: 0;
	padding: 9px 16px 8px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 13px;
	line-height: 1.2;
	color: #fff;
	background: #000;
	border: 0;
}
.menu-title::before { display: none; }

.menu-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 16px 8px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	color: #000;
	background: #fff;
	border-bottom: 2px solid #000;
	text-decoration: none;
}
.menu-group li:last-child .menu-button { border-bottom: 0; }
.menu-button::after {
	content: "";
	flex: none;
	width: 0; height: 0;
	border-left: 8px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	transition: transform .08s;
}
.menu-button:hover { color: #fff; background: #000; }
.menu-button:hover::after { transform: translateX(4px); }
.menu-button span { display: block; min-width: 0; }

/* ---------- Buttons (poster shadow, press-down) ------------------ */

.chip, .sub-menu-item, .page-menu-item, .submit_button,
input[type=submit], input[type=button], input[type=reset], button,
::file-selector-button {
	box-sizing: border-box;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	color: #000;
	background: #fff;
	border: var(--rule) solid #000;
	border-radius: 0;
	box-shadow: var(--hard-s);
	text-decoration: none;
	cursor: pointer;
	transition: transform .06s, box-shadow .06s;
}
input[type=submit], input[type=button], input[type=reset], button { padding: 8px 18px; }
.submit_button { display: block; margin: 10px; padding: 8px 14px; }

.chip:hover, .sub-menu-item:hover, .page-menu-item:hover, .submit_button:hover,
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, button:hover {
	color: #fff;
	background: #000;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 #000;
}
.chip:active, .sub-menu-item:active, .page-menu-item:active, .submit_button:active,
input[type=submit]:active, input[type=button]:active, input[type=reset]:active, button:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 #000;
}

input[disabled], button[disabled] {
	color: #000;
	border-style: dashed;
	background: repeating-linear-gradient(-45deg, #fff 0 6px, #000 6px 7px);
	box-shadow: none;
	cursor: not-allowed;
	text-shadow: 0 0 0 #fff, 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff, 2px 0 #fff, -2px 0 #fff;
}

/* ---------- Login bar -------------------------------------------- */

#loginbox {
	margin: 0 8px 34px 0;
	padding: 14px 20px 16px;
	color: #fff;
	background: #000;
	border: var(--rule) solid #000;
	outline: 2px solid #000;
	outline-offset: 3px;
}
#loginbox .whoami { margin: 0; }
#loginbox a { color: #fff; }
#loginbox a:hover { color: #000; background: #fff; }
.inline-picker { display: inline-block; margin-left: 8px; }

.loginbox-admin-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 14px;
	margin: 16px 0 0;
	padding: 18px 0 0;
	list-style: none;
	border-top: 2px dashed #fff;
}
.loginbox-admin-menu .admin-label { display: block; padding: 4px 14px 5px; font-weight: 700; font-size: 13px; color: #000; background: #fff; border: 2px solid #fff; }
/* On the black bar the buttons are flat white outlines (a white poster shadow would run into the
   neighbouring button); hover inverts, click nudges down. */
.loginbox-admin-menu li { display: block; margin: 0; padding: 0; }
#loginbox .chip {
	display: block;
	padding: 4px 14px 5px;
	font-size: 13px;
	color: #fff;
	background: #000;
	border: 2px solid #fff;
	box-shadow: none;
}
#loginbox .chip:hover { color: #000; background: #fff; transform: none; box-shadow: none; }
#loginbox .chip:active { transform: translateY(2px); }

/* ---------- Sub menu / page menu --------------------------------- */

#submenu {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 26px;
	padding: 0 4px 4px 0;
	list-style: none;
}
.sub-menu-item { display: inline-block; padding: 6px 16px; }
.current-sub-menu, .current-sub-menu:hover {
	color: #fff;
	background: #000;
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 #000;
}

#pagemenu {
	margin: 0 0 26px;
	padding: 10px 0 14px;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}
#pagemenu .pagemenu-title { margin-right: 8px; font-weight: 700; }
.page-menu-item { display: inline-block; margin: 8px 16px 8px 0; padding: 3px 12px; font-size: 13px; }

/* ---------- Messages: each type has its own pictogram ------------ */

.message, .notice, .red, .green {
	position: relative;
	display: block;
	box-sizing: border-box;
	margin: 0 6px 24px 0;
	padding: 16px 20px 16px 72px;
	font-size: 15px;
	line-height: 1.45;
	border: var(--rule) solid #000;
}
.message::before, .notice::before, .red::before, .green::before {
	content: "";
	position: absolute;
	left: 18px; top: 50%;
	width: 34px; height: 34px;
	margin-top: -17px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Flash message: inverted plate with a four-point star. */
.message {
	color: #fff;
	background: #000;
	outline: 2px dashed #fff;
	outline-offset: -9px;
	font-weight: 700;
}
.message::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 0L17.5 10.5L28 14L17.5 17.5L14 28L10.5 17.5L0 14L10.5 10.5Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* Notice: dashed frame, diamond. */
.notice { background: #fff; border-style: dashed; }
.notice::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 0L28 14L14 28L0 14Z' fill='%23000'/%3E%3Crect x='12.5' y='12' width='3' height='9' fill='%23fff'/%3E%3Crect x='12.5' y='7' width='3' height='3' fill='%23fff'/%3E%3C/svg%3E");
}

/* Error: hazard stripe + warning triangle. */
.red {
	background: #fff;
	box-shadow: 6px 6px 0 #000;
	padding-left: 88px;
	font-weight: 700;
}
.red::after {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 16px;
	border-right: 3px solid #000;
	background: repeating-linear-gradient(45deg, #000 0 5px, #fff 5px 10px);
}
.red::before {
	left: 32px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 1L27.5 26H0.5Z' fill='%23000'/%3E%3Crect x='12.5' y='9.5' width='3' height='9' fill='%23fff'/%3E%3Crect x='12.5' y='20' width='3' height='3' fill='%23fff'/%3E%3C/svg%3E");
}

/* Success: solid circle with a check. */
.green { background: #fff; box-shadow: 6px 6px 0 #000; font-weight: 700; }
.green::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23000'/%3E%3Cpath d='M7.5 14.5L12 19L20.5 9' stroke='%23fff' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}

.note { padding: 10px 14px; border: 2px dashed #000; }

.center { text-align: center; }
.clear { clear: both; }

.request, .fs-path {
	display: inline-block;
	padding: 2px 10px;
	font-size: 13px;
	color: #fff;
	background: #000;
}

.keyword { padding: 0 6px; font-weight: 700; color: #fff; background: #000; }
.hold-hours { font-weight: 700; }

/* Status words: fill = on, hollow + strike = off. */
.up, .down { font-weight: 700; }
.up::before, .down::before {
	content: "";
	display: inline-block;
	box-sizing: border-box;
	width: 10px; height: 10px;
	margin-right: 8px;
	border: 2px solid currentColor;
	border-radius: 50%;
	vertical-align: 0;
}
.up::before { background: currentColor; }
.down { text-decoration: line-through; text-decoration-thickness: 2px; }
.down::before { display: inline-block; }
.yes { font-weight: 700; }
.no { text-decoration: line-through; text-decoration-thickness: 2px; }

/* ---------- Forms ------------------------------------------------ */

input[type=text], input[type=password], input[type=file], input[type=email],
input[type=number], input[type=search], input[type=url], input[type=date],
textarea {
	box-sizing: border-box;
	padding: 7px 10px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.3;
	color: #000;
	background: #fff;
	border: var(--rule) solid #000;
	border-radius: 0;
	outline: 0;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=number]:focus, input[type=search]:focus, input[type=url]:focus,
input[type=date]:focus, textarea:focus {
	box-shadow: var(--hard-s);
	outline: 3px dashed #000;
	outline-offset: 3px;
}
input::placeholder, textarea::placeholder { color: #000; opacity: 1; font-style: italic; }

input[type=file] { padding: 4px; }
::file-selector-button { margin-right: 12px; padding: 4px 12px; box-shadow: 3px 3px 0 #000; }

textarea { width: 340px; height: 120px; resize: vertical; }

select {
	box-sizing: border-box;
	padding: 7px 38px 7px 12px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: #000;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0H12L6 8Z' fill='%23000'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
	border: var(--rule) solid #000;
	border-radius: 0;
	box-shadow: var(--hard-s);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}
select:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
option { color: #000; background: #fff; font-weight: 400; }

input[type=checkbox], input[type=radio] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 22px; height: 22px;
	margin: 0 8px 0 0;
	background-color: #fff;
	border: var(--rule) solid #000;
	vertical-align: middle;
	cursor: pointer;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:checked {
	background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5L5.5 11L12 3' stroke='%23fff' stroke-width='2.4' fill='none'/%3E%3C/svg%3E") center / 14px no-repeat;
}
input[type=radio]:checked { background: radial-gradient(circle, #000 0 4px, #fff 4.5px); }

.multi-select { width: 100%; }
.short { width: 48px; }
.script { width: 98%; }
.block { display: block; width: 80%; height: 40px; }

.generic-form, .generic-form-div {
	width: auto;
	margin: 0 6px 12px 0;
	padding: 20px 22px;
	background: #fff;
	border: var(--rule) solid #000;
	box-shadow: 6px 6px 0 #000;
}
.generic-form-table th label { display: block; padding: 6px 8px; }
.generic-form-table th { text-align: right; font-weight: 700; }
.generic-form-table td div { display: block; padding: 6px 0; }
.generic-form-table td p { margin: 6px 5px; }
.generic-form-table td label { display: inline-block; margin-right: 12px; }

#register_form table td, #login_form table td { padding: 3px; }
#register_form table th label, #login_form table th label { display: block; padding: 6px 8px; text-align: right; }
#register_form input[type=text], #register_form input[type=password],
#login_form input[type=text], #login_form input[type=password] { width: 200px; }
#register_form select, #login_form select { width: 200px; }

.security-code { margin: 6px 0; text-align: left; width: 145px; height: 50px; }

.action { font-weight: 700; }
.action a, .action span.anchor { cursor: pointer; }
.block-link { display: block; padding: 4px 6px; border-bottom: 2px dotted #000; }
.button-action { padding: 5px 0; text-align: left; }
.toggler a { font-weight: 700; }

/* Search panels: dashed "cut here" coupon frame. */
.search-form, .search-form2 {
	margin: 0 6px 22px 0;
	padding: 0;
	background: #fff;
	border: var(--rule) dashed #000;
}
.search-form { display: none; }
.search-form p, .search-form2 p { margin: 0; padding: 12px 16px; text-align: left; }
.search-form label, .search-form2 label { display: inline-block; margin: 0 6px 4px 0; font-weight: 700; font-size: 13px; }
.search-form input[type=text], .search-form2 input[type=text] {
	display: inline-block;
	margin: 0 4px 4px 0;
	padding: 4px 8px;
	font-size: 13px;
	width: 96px;
}
.search-form input[type=submit], .search-form2 input[type=submit],
.search-form input[type=button], .search-form input[type=reset],
.search-form2 input[type=button], .search-form2 input[type=reset] {
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 4px 14px;
	font-size: 13px;
	box-shadow: 3px 3px 0 #000;
}
.search-form input[type=checkbox], .search-form2 input[type=checkbox] { display: inline-block; margin: 0 6px 4px 0; }
.search-form select, .search-form2 select { display: inline-block; margin: 0 10px 10px 0; padding: 4px 32px 4px 10px; font-size: 13px; box-shadow: 3px 3px 0 #000; }

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

.horizontal-table, .vertical-table, #server_status, .woe-table, .install_table {
	border-collapse: collapse;
	color: #000;
	background: #fff;
	border: var(--rule) solid #000;
}
.horizontal-table, #server_status { width: 100%; }

.horizontal-table th, .vertical-table th, .install_table th, .woe-table th, #server_status th {
	padding: 10px 14px 9px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	text-align: left;
	color: #fff;
	background: #000;
	border: 2px solid #000;
}
.horizontal-table th a, .vertical-table th a, .horizontal-table th .sortable { color: #fff; }
.horizontal-table th a:hover, .vertical-table th a:hover, .horizontal-table th .sortable:hover { color: #000; background: #fff; }
.vertical-table th { white-space: nowrap; }

.horizontal-table td, .vertical-table td, .install_table td, .woe-table td, #server_status td {
	padding: 9px 14px 8px;
	background-color: #fff;
	border-bottom: 2px solid #000;
	border-right: 2px dotted #000;
}
.horizontal-table td:last-child, .vertical-table td:last-child { border-right: 0; }
.horizontal-table tr:last-child td, .vertical-table tr:last-child td,
.vertical-table tr:last-child th { border-bottom: 0; }

/* Row hover: invert. */
.horizontal-table tr:hover td, #server_status tr:hover td { color: #fff; background: #000 !important; background-image: none !important; text-shadow: none !important; }
.horizontal-table tr:hover td a, #server_status tr:hover td a { color: #fff; }
.horizontal-table tr:hover td a:hover { color: #000; background: #fff; }

.vertical-table label { display: block; padding: 5px; }
.vertical-table form { margin: 0; padding: 0; }

.td-checkbox { text-align: center; }
.td-action { text-align: center; }
.vertical-table .td-action { text-align: right; }
/* Muted values get a dashed underline instead of a gray. */
.not-applicable { border-bottom: 2px dashed #000; }

.sortable { }

.state-pending { border-bottom: 2px dashed #000; }
.state-banned { padding: 1px 8px; color: #fff; background: #000; }
.state-permanently-banned { padding: 1px 8px; color: #fff; background: #000; outline: 2px solid #000; outline-offset: 2px; font-weight: 700; }
.horizontal-table tr:hover td .state-banned, .horizontal-table tr:hover td .state-permanently-banned { color: #000; background: #fff; outline-color: #fff; }

.raw-txn-log {
	box-sizing: border-box;
	width: 96%;
	padding: 12px;
	overflow: auto;
	color: #fff;
	background: #000;
}

.online { font-weight: 700; }
.offline { text-decoration: line-through; text-decoration-thickness: 2px; }

.info-text-total, .info-text-results { font-weight: 700; }
.info-text { margin-bottom: 10px; padding: 6px 12px; text-align: center; border: 2px solid #000; }

/* Special rows keep white cells so text stays sharp; a 10px spine on the first
   cell tells them apart: solid = equipped, hatch = MVP drop, rules = card drop. */
.top-ranked td { color: #fff !important; background: #000 !important; }
.top-ranked a { color: #fff; }
.top-ranked a:hover { color: #000; background: #fff; }
.empty-row { display: none; }

.equipped td:first-child, .item-drop-mvp td:first-child, .item-drop-card td:first-child {
	padding-left: 26px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 10px 100%;
}
.equipped td:first-child       { background-image: linear-gradient(#000, #000); }
.item-drop-mvp td:first-child  { background-image: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 5px); }
.item-drop-card td:first-child { background-image: repeating-linear-gradient(0deg, #000 0 2px, #fff 2px 5px); }
.horizontal-table tr:hover td:first-child { background-image: none !important; }

.mvp { font-weight: 700; border-bottom: 3px double #000; }
.monster-mode { margin: 0; padding: 0; list-style: square inside; }
.monster-mode li { padding: 2px 0; border-bottom: 2px dotted #000; }
.job-classes { border-spacing: 0; }
.job-classes td { padding-right: 12px; border-right: 2px dotted #000; }
.current-shop-category { font-weight: 700; }

/* Slotted item names: line style stands in for the old colors. */
.normalslotted .equipped { color: #000; }
.overslotted1 { text-decoration: underline solid; text-decoration-thickness: 2px; }
.overslotted2 { text-decoration: underline dashed; text-decoration-thickness: 2px; }
.overslotted3 { text-decoration: underline dotted; text-decoration-thickness: 3px; }
.overslotted4 { text-decoration: underline double; text-decoration-thickness: 3px; }

/* Server status */
#server_status .server { font-weight: 700; color: #000; background: #fff; text-align: left; border-bottom: 2px solid #000; border-right: 2px dotted #000; }
#server_status th, #server_status td { text-align: left; }
#server_status .status { text-align: center; }
#server_status tr:first-child td { font-weight: 700; color: #fff; background: #000; }
#server_status tr:last-child .server, #server_status tr:last-child td { border-bottom: 0; }

/* Character stats */
.character-stats { border-spacing: 0; border-collapse: collapse; }
.character-stats td { padding: 0 12px 6px 0; border: 0; text-align: center; background: transparent; }
.character-stats .stat-name { font-weight: 400; }
.character-stats .stat-value { font-weight: 700; }

/* ---------- Pagination ------------------------------------------- */

.pages {
	margin-top: 26px;
	padding-top: 16px;
	text-align: center;
	border-top: 2px solid #000;
}
.pages a, .pages .page-num {
	display: inline-block;
	box-sizing: border-box;
	min-width: 34px;
	margin: 0 3px 6px;
	padding: 3px 8px;
	text-align: center;
	color: #000;
	background: #fff;
	border: 2px solid #000;
	text-decoration: none;
}
.pages a:hover { color: #fff; background: #000; }
.pages .current-page { color: #fff; background: #000; }
.jump-to-page { margin-top: 10px; font-size: 13px; text-align: center; }
.jump-to-page input[type=text] { width: 60px; padding: 3px 8px; font-size: 13px; }
.jump-to-page input[type=submit] { padding: 3px 12px; font-size: 13px; box-shadow: 3px 3px 0 #000; }

/* ---------- Donation credits: a vector readout ------------------- */

.credit-balance {
	float: right;
	display: inline-block;
	margin: 3px 6px 14px 14px;
	padding: 8px 16px 9px;
	color: #fff;
	background: #000;
	outline: 3px solid #000;
	outline-offset: 3px;
}
.credit-balance .balance-text { display: inline-block; margin-right: 10px; }
.credit-balance .balance-amount { font-family: var(--font-display); font-weight: 900; font-size: 22px; vertical-align: -2px; }

/* ---------- News ------------------------------------------------- */

.newsDiv h4 { margin: 24px 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 17px; text-transform: uppercase; }
.newsCont {
	margin: 0 6px 18px 0;
	padding: 12px 18px 8px;
	border: var(--rule) solid #000;
	box-shadow: 5px 5px 0 #000;
}
.newsCont p { margin: 8px 0; }
.newsDate { font-weight: 700; }
.news_link { display: inline-block; margin-top: 4px; font-weight: 700; }

/* ---------- Item shop / cart / donate ---------------------------- */

.shop-table { width: 100%; border-spacing: 0 18px; border-collapse: separate; }
.shop-table td { padding: 14px; background: #fff; border: var(--rule) solid #000; border-right-width: 0; }
.shop-table td:last-child { border-right: var(--rule) solid #000; }
.shop-table tr { box-shadow: 5px 5px 0 #000; }
.shop-item-image { width: 75px; height: 100px; text-align: center; }
.shop-item-name { margin: 0 0 6px; padding: 0 0 4px; font-family: var(--font-display); font-weight: 800; font-size: 17px; border-bottom: 2px solid #000; }
.shop-item-cost-qty { width: 150px; text-align: center; }
.cost { font-family: var(--font-display); font-weight: 900; font-size: 20px; }
.qty { font-weight: 700; }
.shop-item-action a { font-weight: 700; }
.shop-server-name { font-weight: 700; }
.shop-item-info { text-align: left; }

.cart-items-text { margin: 0 0 6px; padding: 10px; color: #fff; background: #000; }
.cart-info-text { margin: 0 0 6px; padding: 0; }
.cart-total-text { margin: 0; padding: 0; }
.cart-item-name { color: #fff; border-bottom: 2px dotted #fff; }
.cart-item-count { font-family: var(--font-display); font-weight: 900; font-size: 18px; }
.cart-sub-total { font-weight: 700; }
.cart { width: 100%; }
.cart label { display: block; }
.cart h4 { margin: 12px 0 2px; font-size: 17px; }
.remove-from-cart { width: 100%; text-align: right; }
.checkout-text { font-size: 20px; font-weight: 700; }
.enter-donation-amount { margin: 0; padding: 0 0 6px; font-size: 20px; font-weight: 700; }
.donation-amount-text { margin: 0; padding: 0; font-size: 20px; text-align: center; }
.credit-amount-text { font-size: 15px; text-align: center; }
.donation-amount { font-weight: 700; }
.reset-amount-text { margin: 0; padding: 0; font-size: 14px; text-align: center; }
.checkout-info-text { margin: 0 0 6px; padding: 0; }
.remaining-balance { font-weight: 700; }
.exchange-rate { font-size: 18px; font-weight: 700; }
.important { font-size: 18px; }
.important .server-name { font-weight: 700; }

.emblem-server { margin: 0 0 4px; padding: 0 0 4px; font-size: 18px; border-bottom: 2px solid #000; }
.emblem-server label { display: block; }

.script-line { font-family: var(--font-body); }
.script-line-num { display: inline-block; margin: 0; padding: 5px 8px; font-weight: 700; color: #fff; background: #000; }
.script-line-code { display: inline-block; margin: 0; padding: 5px; }

.woe-table td { font-size: 15px; }
.woe-table .server { font-weight: 700; }

/* ---------- Footer ----------------------------------------------- */

#footer { color: #fff; background: #000; }
.footer-inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 22px 28px 26px;
}
.footer-notes p { margin: 2px 0; font-size: 13px; }
#footer a { color: #fff; }
#footer a:hover { color: #000; background: #fff; }
.footer-pickers { display: flex; flex-wrap: wrap; gap: 18px; }
.picker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; }
#footer select { box-shadow: 3px 3px 0 #fff; border-color: #fff; }

/* ---------- Small screens ---------------------------------------- */

@media (max-width: 860px) {
	#masthead { height: 236px; }
	.masthead-wallpaper .masthead-inner { padding: 18px 16px 22px; }
	.masthead-wallpaper .masthead-inner::after { display: none; }
	.wall { aspect-ratio: auto; height: 220px; }
	/* Keep the sun in view to the right of the logo plate. */
	.art { top: auto; bottom: 0; left: auto; right: -110px; width: auto; height: 172px; }
	.masthead-inner { padding: 26px 16px 0; }
	#logo { padding: 10px 14px 9px; box-shadow: 5px 5px 0 #fff; }
	.logo-text { font-size: clamp(20px, 7vw, 32px); }

	#page { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 14px 36px; }

	.menu-panel { margin-right: 6px; }
	#nav { box-sizing: border-box; margin-right: 6px; }
	#nav > summary {
		display: block;
		box-sizing: border-box;
		padding: 10px 14px;
		font-family: var(--font-display);
		font-weight: 800;
		font-size: 14px;
		text-align: center;
		list-style: none;
		color: #fff;
		background: #000;
		border: var(--rule) solid #000;
		box-shadow: 6px 6px 0 #000;
		cursor: pointer;
	}
	#nav > summary::-webkit-details-marker { display: none; }
	#nav[open] > summary { margin-bottom: 26px; }
	#nav .menu-panel { margin-right: 6px; margin-bottom: 26px; }

	#content { padding: 20px 18px 24px; box-shadow: 6px 6px 0 #000; }
	textarea { max-width: 100%; }
	.generic-form-table th { text-align: left; }
	.footer-inner { padding: 18px 14px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.rv-flow { animation: none; }
	.chip, .sub-menu-item, .page-menu-item, .submit_button, input[type=submit], input[type=button], input[type=reset], button, .menu-button::after { transition: none; }
}