/*
	csg_shared/csg_shell.css
	The shared CSG Dark bar and footer for /shop, /stats and /amxbans.

	Palette and design language are the forum theme's, copied from
	cache/themes/csgdark/global.css. Two rules of the house that matter here:
	the hairlines are neutral, never red, and every panel carries a 1px white
	inset along its top edge - that lit edge on a neutral grid is what lets
	the red read as an accent instead of a wash.

	Two things this sheet does differently from the site themes, both because
	it has to survive being dropped into three applications it does not own:

	1. It never sets `html { font-size }`.

	   The site themes scale a whole page from one root size. This sheet
	   cannot: /shop is a Bootstrap template pack whose entire layout is sized
	   off the root, and rescaling that from a header include would move every
	   card, button and grid gutter in the shop. So the shell carries its own
	   scale on its own two roots, in px, and everything inside is `em`. The
	   bar then renders identically whatever the host page has done to `html`,
	   and the host is left exactly as it was.

	2. Every selector is prefixed and scoped under #csg-topbar / #csg-footer.

	   No bare element selectors, nothing that can leak. Bootstrap in
	   particular already styles ul, li, a and img, and this sheet has to win
	   inside its own markup without touching theirs.
*/

#csg-topbar, #csg-footer {
	--csg-bg:     #0a0707;
	--csg-steel:  #171111;
	--csg-steel2: #291f1f;
	--csg-edge:   #332a2b;   /* hairlines - NEUTRAL, not red */
	--csg-edge2:  #4d3f41;
	--csg-red:    #b20e14;   /* dominant */
	--csg-red-b:  #ff3d44;   /* bright: only things you can click */
	--csg-text:   #e8e2e1;
	--csg-bright: #ffffff;
	--csg-muted:  #9c9492;
	--csg-mono:   "Consolas", "DejaVu Sans Mono", "Courier New", monospace;

	/*
		The scale ladder, on the shell's own root rather than on html. Same
		breakpoints and same numbers as the forum, so a player moving between
		the forum and the shop sees the bar at the same size on both.
	*/
	font-size: 16px;
	font-family: var(--csg-mono);
	line-height: 1.5;
	box-sizing: border-box;
}
@media (min-width: 1280px) { #csg-topbar, #csg-footer { font-size: 17px; } }
@media (min-width: 1600px) { #csg-topbar, #csg-footer { font-size: 18px; } }
@media (min-width: 2000px) { #csg-topbar, #csg-footer { font-size: 19px; } }
@media (min-width: 2500px) { #csg-topbar, #csg-footer { font-size: 20.5px; } }
@media (min-width: 3200px) { #csg-topbar, #csg-footer { font-size: 22.5px; } }

#csg-topbar *, #csg-footer * { box-sizing: border-box; }

/* ------------------------------------------------------------ topbar --- */
#csg-topbar {
	background: linear-gradient(180deg, #0b0708, #050304);
	border-bottom: 1px solid var(--csg-edge);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	color: var(--csg-text);
	position: relative;
	z-index: 900;
	width: 100%;
}
#csg-topbar .csg-wrap {
	width: 90%;
	max-width: none;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 0.5em 1.125em;
	flex-wrap: wrap;
	padding: 0.5em 0;
}

#csg-topbar .csg-brand { flex: 0 0 auto; display: block; line-height: 0; }
#csg-topbar .csg-brand img {
	max-height: 2.25em;
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
	border: 0;
}

#csg-topbar ul.csg-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.125em;
}
#csg-topbar ul.csg-nav.csg-right { margin-left: auto; }
#csg-topbar ul.csg-nav > li { list-style: none; margin: 0; padding: 0; float: none; }

#csg-topbar ul.csg-nav > li > a {
	display: block;
	padding: 0.5em 0.75em;
	font-family: var(--csg-mono);
	font-size: 0.6875em;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	color: var(--csg-muted);
	text-decoration: none;
	background: none;
	border: 0;
}
#csg-topbar ul.csg-nav > li > a:hover,
#csg-topbar ul.csg-nav > li > a:focus {
	background: var(--csg-steel);
	color: var(--csg-bright);
	text-decoration: none;
}
/* Red is "us or here". Same inset mark the forum puts under the current tab. */
#csg-topbar ul.csg-nav > li.csg-current > a {
	background: var(--csg-steel);
	color: var(--csg-bright);
	box-shadow: inset 0 -2px 0 var(--csg-red-b);
}

/* ------------------------------------------------------------ footer --- */
#csg-footer {
	background: var(--csg-bg);
	border-top: 1px solid var(--csg-edge);
	color: var(--csg-muted);
	margin-top: 2em;
	width: 100%;
}
#csg-footer .csg-wrap {
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 0.375em 1.125em;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0.875em 0;
	font-size: 0.625em;
	letter-spacing: 0.0625em;
	text-transform: uppercase;
}
#csg-footer a { color: var(--csg-text); text-decoration: none; }
#csg-footer a:hover, #csg-footer a:focus { color: var(--csg-bright); text-decoration: none; }
/*
	The per-app line - AMXBans' "powered by", the shop's or the stats page's
	own credit. It is an attribution, so it stays legible but never competes
	with the site's own copyright.
*/
#csg-footer .csg-credit { color: var(--csg-muted); }

/* -------------------------------------------------------- responsive --- */
@media (max-width: 1100px) {
	#csg-topbar .csg-wrap, #csg-footer .csg-wrap { width: 94%; }
}
@media (max-width: 767px) {
	#csg-topbar .csg-wrap, #csg-footer .csg-wrap { width: 96%; }
	#csg-topbar .csg-wrap { gap: 0.375em 0.625em; }
	#csg-footer .csg-wrap { justify-content: flex-start; }
}
@media (max-width: 600px) {
	#csg-topbar .csg-brand { flex: 1 1 100%; }
	#csg-topbar ul.csg-nav.csg-right { margin-left: 0; }
	#csg-topbar ul.csg-nav > li > a { padding: 0.4375em 0.5em; }
}
@media (max-width: 480px) {
	#csg-topbar .csg-wrap, #csg-footer .csg-wrap {
		width: 100%;
		padding-left: 0.625em;
		padding-right: 0.625em;
	}
}

/* ==========================================================================
   #csg-bar / #csg-foot - the shared header and footer, second generation.

   The rules above (#csg-topbar / #csg-footer) are the first version and stay
   until /shop and /amxbans have both been moved over; then they go.

   The look is the stats page's, moved here rather than reinvented: joined
   uppercase buttons on a steel field, neutral hairlines, and red used only to
   mark where you are. Same two house rules as the top of this file - own font
   scale in px with em inside, every selector scoped and prefixed, because
   this has to drop into a Bootstrap shop without touching it.
   ========================================================================== */

#csg-bar, #csg-foot, #csg-error, #csg-warn {
	--csg-bg:     #0a0707;
	--csg-steel:  #171111;
	--csg-steel2: #291f1f;
	--csg-edge:   #332a2b;
	--csg-edge2:  #4d3f41;
	--csg-red:    #b20e14;
	--csg-red-b:  #ff3d44;
	--csg-text:   #e8e2e1;
	--csg-bright: #ffffff;
	--csg-muted:  #9c9492;
	--csg-mono:   "Consolas", "DejaVu Sans Mono", "Courier New", monospace;

	font-size: 16px;
	font-family: var(--csg-mono);
	line-height: 1.5;
	color: var(--csg-text);
	box-sizing: border-box;
	width: 100%;
}
@media (min-width: 1280px) { #csg-bar, #csg-foot, #csg-error, #csg-warn { font-size: 17px; } }
@media (min-width: 1600px) { #csg-bar, #csg-foot, #csg-error, #csg-warn { font-size: 18px; } }
@media (min-width: 2000px) { #csg-bar, #csg-foot, #csg-error, #csg-warn { font-size: 19px; } }
@media (min-width: 2500px) { #csg-bar, #csg-foot, #csg-error, #csg-warn { font-size: 20.5px; } }
@media (min-width: 3200px) { #csg-bar, #csg-foot, #csg-error, #csg-warn { font-size: 22.5px; } }
#csg-bar *, #csg-foot *, #csg-error *, #csg-warn * { box-sizing: border-box; }
#csg-bar *, #csg-foot * { box-sizing: border-box; }

#csg-bar .csg-wrap, #csg-foot .csg-wrap {
	width: 90%;
	max-width: none;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------- bar --- */
#csg-bar {
	background: linear-gradient(180deg, #120d0d, var(--csg-bg));
	border-bottom: 1px solid var(--csg-edge);
	position: relative;
	z-index: 900;
	margin-bottom: 1.625em;
}
#csg-bar .csg-site .csg-wrap { gap: 0.5em 1.125em; padding: 0.75em 0; }

#csg-bar .csg-brand {
	display: flex;
	align-items: center;
	gap: 0.625em;
	flex: 0 0 auto;
	text-decoration: none;
}
#csg-bar .csg-brand img { height: 2.5em; width: auto; max-width: 100%; display: block; border: 0; }
/*
	min-width, not width: the tag is what changes from section to section
	("BANS", "SHOP", "STATS"), and without a floor under it the whole nav
	strip slid left and right as you moved between them - the buttons never
	sat in the same place twice. 5.5em holds the longest of the one-word tags,
	so the links start at the same x everywhere. A longer tag ("Shop admin")
	still pushes past it rather than being clipped.
*/
#csg-bar .csg-brand span {
	font-size: 0.6875em;
	letter-spacing: 0.125em;
	text-transform: uppercase;
	color: var(--csg-muted);
	border-left: 2px solid var(--csg-red);
	padding-left: 0.625em;
	display: inline-block;
	min-width: 5.5em;
}

/*
	The site links. One row of joined buttons: every button drops its right
	border and the last one puts it back, so the group reads as a single
	control strip rather than five separate boxes.
*/
#csg-bar .csg-group { display: flex; flex-wrap: wrap; gap: 0; flex: 0 1 auto; }
#csg-bar .csg-group.csg-right { margin-left: auto; }
#csg-bar .csg-group > a {
	font-size: 0.6875em;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	color: var(--csg-muted);
	text-decoration: none;
	padding: 0.5625em 0.875em;
	border: 1px solid var(--csg-edge);
	border-right: 0;
	background: var(--csg-steel);
	white-space: nowrap;
}
#csg-bar .csg-group > a:last-child { border-right: 1px solid var(--csg-edge); }
#csg-bar .csg-group > a:hover,
#csg-bar .csg-group > a:focus { color: var(--csg-bright); background: var(--csg-steel2); text-decoration: none; }
#csg-bar .csg-group > a.csg-on {
	color: var(--csg-bright);
	background: var(--csg-steel2);
	box-shadow: inset 0 -2px 0 var(--csg-red);
}

/*
	Row two: the section's own pages. Deliberately quieter than row one - no
	button borders, smaller type, a thinner mark - because it is a level down.
	If both rows carried the same weight the bar would read as ten equal links
	again, which is the thing this replaced.
*/
#csg-bar .csg-sub {
	border-top: 1px solid var(--csg-edge);
	background: rgba(0, 0, 0, .25);
}
#csg-bar .csg-sub .csg-wrap { gap: 0.375em 0.75em; padding: 0.25em 0; }
#csg-bar .csg-subnav { display: flex; flex-wrap: wrap; gap: 0; }
#csg-bar .csg-subnav > a {
	font-size: 0.625em;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	color: var(--csg-muted);
	text-decoration: none;
	padding: 0.5em 1.75em;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
#csg-bar .csg-subnav > a:hover,
#csg-bar .csg-subnav > a:focus { color: var(--csg-bright); text-decoration: none; }
#csg-bar .csg-subnav > a.csg-on { color: var(--csg-bright); border-bottom-color: var(--csg-red-b); }

/*
	The account slot, far right of row one.

	It is a second .csg-right group, so the margin-left:auto that pushes the
	first one over must not be applied again here - two autos put a gap
	between Discord and the account rather than keeping them together.
*/
#csg-bar .csg-right + .csg-right { margin-left: 0; }
#csg-bar .csg-account { position: relative; }

/*
	Signed in: the name, then Log out. Two items in the same joined strip as
	everything else in this bar, so the corner reads the way the rest of it
	does and there is nothing to open.
*/
#csg-bar .csg-me {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.6875em;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	color: var(--csg-text);
	padding: 0.5625em 0.875em;
	border: 1px solid var(--csg-edge);
	border-right: 0;
	background: var(--csg-steel);
	white-space: nowrap;
}

/* Green pip: signed in. Small enough to read as a state, not a decoration. */
#csg-bar .csg-me .csg-dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #3fbf5a;
	flex: 0 0 auto;
	display: inline-block;
}

#csg-bar .csg-account .csg-out { color: var(--csg-muted); }
#csg-bar .csg-account .csg-out:hover,
#csg-bar .csg-account .csg-out:focus { color: var(--csg-red-b); background: var(--csg-steel2); }

/*
	The balance, handed to the bar by the shop and printed nowhere else.
	Green because that is the colour it has always been in the shop, and the
	number is what the eye is looking for, so the word after it is quieter.
*/
/*
	.csg-group > a is one class heavier than a bare .csg-coins, so these all
	name the group as well. Without it the strip's own muted grey and its
	uppercase won on weight and the balance came out looking like a link and
	the "Lost password?" like a shout.
*/
#csg-bar .csg-group > a.csg-coins { color: #00ff01; }
#csg-bar .csg-group > a.csg-coins > span { color: var(--csg-muted); }
#csg-bar .csg-group > a.csg-coins:hover,
#csg-bar .csg-group > a.csg-coins:focus { color: #00ff01; background: var(--csg-steel2); }

/*
	Lost password, next to Login. Deliberately the quieter of the two: it is
	the door for the bad day, not the one most people are reaching for.
*/
#csg-bar .csg-group > a.csg-login { color: var(--csg-text); }
#csg-bar .csg-group > a.csg-login:hover,
#csg-bar .csg-group > a.csg-login:focus { color: var(--csg-bright); }
#csg-bar .csg-group > a.csg-lost { text-transform: none; letter-spacing: 0.0313em; }

/*
	The forum link, in front of everything else with an arrow on it.

	It is the only link in this bar that leaves the three apps that share it -
	different application, different accounts, different header - so it is
	held apart from the strip of joined buttons rather than being the first
	of them. The arrow is the label doing the work; the gap after it is what
	stops the two groups reading as one.
*/
#csg-bar .csg-group.csg-back { margin-right: 0.75em; }
#csg-bar .csg-group.csg-back > a { border-right: 1px solid var(--csg-edge); }
#csg-bar .csg-arrow { color: var(--csg-red-b); margin-right: 0.125em; }

/* ------------------------------------------------------- the warning --- */

/*
	Hung under the bar, on every page of every app, while the signed in
	account has no e-mail on it. Amber, not red: nothing is broken yet, and
	the day it matters is a day this player cannot be told anything at all.
*/
#csg-warn {
	background: rgba(255, 184, 0, .07);
	border-bottom: 1px solid var(--csg-edge);
	box-shadow: inset 0 2px 0 var(--csg-mid, #ffb800);
}
#csg-warn .csg-wrap {
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em 0.875em;
	padding: 0.625em 0;
}
#csg-warn .csg-warn-text {
	font-size: 0.75em;
	line-height: 1.55;
	color: var(--csg-text);
	flex: 1 1 20em;
}
#csg-warn .csg-warn-go {
	font-size: 0.6875em;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	color: var(--csg-bright);
	text-decoration: none;
	padding: 0.4375em 1em;
	border: 1px solid var(--csg-red-b);
	background: var(--csg-red);
	white-space: nowrap;
}
#csg-warn .csg-warn-go:hover,
#csg-warn .csg-warn-go:focus { background: var(--csg-red-b); text-decoration: none; }

/* Dismiss. Quiet, and it only holds for this session - see csg_notice.php. */
#csg-warn .csg-warn-x {
	color: var(--csg-muted);
	text-decoration: none;
	font-size: 1.125em;
	line-height: 1;
	padding: 0 0.25em;
}
#csg-warn .csg-warn-x:hover,
#csg-warn .csg-warn-x:focus { color: var(--csg-bright); text-decoration: none; }

/* The app's own control on the right of row two - the stats server picker. */
#csg-bar .csg-tools { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.375em 0.5em; }
#csg-bar .csg-tools form { display: flex; align-items: center; gap: 0.5em; margin: 0; padding: 0; }
#csg-bar .csg-tools label {
	font-size: 0.625em;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	color: var(--csg-muted);
	margin: 0;
	font-weight: normal;
}
#csg-bar .csg-tools select,
#csg-bar .csg-tools input {
	font-family: var(--csg-mono);
	font-size: 0.6875em;
	color: var(--csg-bright);
	background: var(--csg-steel);
	border: 1px solid var(--csg-edge2);
	padding: 0.3125em 0.4375em;
	max-width: 100%;
	height: auto;
	border-radius: 0;
}
#csg-bar .csg-tools select:focus, #csg-bar .csg-tools input:focus { outline: 1px solid var(--csg-red); }
/*
	Links in the tools slot - AMXBans puts its admin area and logout there,
	next to the login form. Same weight as the second row's links, because
	that is what they are.
*/
#csg-bar .csg-tools a {
	font-size: 0.625em;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	color: var(--csg-muted);
	text-decoration: none;
	padding: 0.5em 0.625em;
	white-space: nowrap;
}
#csg-bar .csg-tools a:hover, #csg-bar .csg-tools a:focus { color: var(--csg-bright); text-decoration: none; }
#csg-bar .csg-tools input[type=checkbox] { margin: 0; }
#csg-bar .csg-tools button {
	font-family: var(--csg-mono);
	font-size: 0.625em;
	letter-spacing: 0.0625em;
	text-transform: uppercase;
	color: var(--csg-bright);
	background: var(--csg-steel2);
	border: 1px solid var(--csg-edge2);
	padding: 0.375em 0.5em;
	cursor: pointer;
	border-radius: 0;
}

/* ------------------------------------------------------------- footer --- */
/*
	Footer on the floor of the window when a page is too short to fill it, and
	straight after the content when it is not. sticky/top:100vh was tried
	first and does nothing on a page that never scrolls, so the body is the
	column instead: it is at least as tall as the window and the footer takes
	the slack above it.
*/
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
#csg-foot {
	margin-top: auto;
	background: linear-gradient(180deg, var(--csg-bg), #120d0d);
	border-top: 1px solid var(--csg-edge);
	padding-top: 2.5em;
}
#csg-foot .csg-cols {
	align-items: flex-start;
	gap: 1.5em 3em;
	padding: 0 0 1.5em;
}
#csg-foot .csg-col { flex: 1 1 12em; min-width: 0; }
/* last in source order stays first on the page; the about block is pushed to
   the right edge so the links and addresses lead. */
#csg-foot .csg-about {
	flex: 0 1 auto;
	order: 9;          /* last column, hard against the right edge */
	margin-left: auto;
	max-width: 34em;
}
#csg-foot .csg-flogo { display: block; line-height: 0; }
#csg-foot .csg-flogo img { height: 2.5em; width: auto; max-width: 100%; display: block; border: 0; }
#csg-foot .csg-about p {
	margin: 0.75em 0 0;
	font-size: 0.75em;
	color: var(--csg-muted);
	max-width: 34em;
}
#csg-foot .csg-cta {
	display: inline-block;
	margin-top: 0.875em;
	font-size: 0.6875em;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	color: var(--csg-bright);
	text-decoration: none;
	background: var(--csg-steel2);
	border: 1px solid var(--csg-edge2);
	padding: 0.5625em 0.875em;
}
#csg-foot .csg-cta:hover, #csg-foot .csg-cta:focus {
	color: var(--csg-bright);
	background: var(--csg-red);
	border-color: var(--csg-red);
	text-decoration: none;
}
#csg-foot h4 {
	margin: 0 0 0.75em;
	font-family: var(--csg-mono);
	font-size: 0.625em;
	font-weight: normal;
	letter-spacing: 0.125em;
	text-transform: uppercase;
	color: var(--csg-muted);
	border-left: 2px solid var(--csg-red);
	padding-left: 0.625em;
}
#csg-foot ul { list-style: none; margin: 0; padding: 0; }
#csg-foot ul > li { list-style: none; margin: 0 0 0.375em; padding: 0; float: none; font-size: 0.75em; }
#csg-foot a { color: var(--csg-text); text-decoration: none; }
#csg-foot a:hover, #csg-foot a:focus { color: var(--csg-red-b); text-decoration: none; }

#csg-foot .csg-servers b {
	display: block;
	font-weight: normal;
	color: var(--csg-muted);
	font-size: 0.9166em;
	letter-spacing: 0.0625em;
	text-transform: uppercase;
}
/*
	The address is a button, not text: it is here to be taken away with you.
	Styled flat so it reads as the value it is, with the border only appearing
	on hover to say it can be pressed.
*/
#csg-foot .csg-copy {
	font-family: var(--csg-mono);
	font-size: 1em;
	color: var(--csg-bright);
	background: none;
	border: 1px solid transparent;
	border-radius: 0;
	padding: 0.125em 0.3125em;
	margin: 0.0625em 0 0 -0.3125em;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}
#csg-foot .csg-copy:hover, #csg-foot .csg-copy:focus {
	border-color: var(--csg-edge2);
	background: var(--csg-steel);
	color: var(--csg-red-b);
}
#csg-foot .csg-copy.csg-copied { color: #2be84f; border-color: var(--csg-edge2); background: var(--csg-steel); }

#csg-foot .csg-bottom { border-top: 1px solid var(--csg-edge); }
#csg-foot .csg-bottom .csg-wrap {
	justify-content: space-between;
	gap: 0.375em 1.125em;
	padding: 0.875em 0;
	font-size: 0.625em;
	letter-spacing: 0.0625em;
	text-transform: uppercase;
	color: var(--csg-muted);
}
#csg-foot .csg-note { color: var(--csg-muted); }
#csg-foot .csg-credit { color: var(--csg-muted); }

/* --------------------------------------------------------- responsive --- */
@media (max-width: 1100px) {
	#csg-bar .csg-wrap, #csg-foot .csg-wrap { width: 94%; }
}
@media (max-width: 900px) {
	/*
		Below this the two rows stop being rows: the links wrap and share the
		width evenly, and the brand keeps only its logo. Same behaviour the
		stats bar had on a phone, which was the one part of it that already
		worked.
	*/
	#csg-bar .csg-brand span { display: none; }
	#csg-bar .csg-group { flex: 1 1 100%; order: 3; }
	#csg-bar .csg-group.csg-right { margin-left: 0; flex: 0 0 auto; order: 2; }
	/*
		The account stays up on the brand's row on a phone rather than
		dropping into the wrapped link block: it is the one control a signed
		in player looks for, and a menu that opens below the fold is a menu
		nobody finds.
	*/
	#csg-bar .csg-account { order: 2; margin-left: auto; }
	#csg-bar .csg-me { font-size: 0.625em; padding: 0.5em 0.625em; }
	/* The forum link keeps the brand's row too, in front of the wrapped links. */
	#csg-bar .csg-group.csg-back { flex: 0 0 auto; order: 1; margin-right: 0.5em; }
	#csg-warn .csg-wrap { width: 94%; }
	#csg-bar .csg-group > a { flex: 1 1 auto; text-align: center; padding: 0.5em 0.5em; font-size: 0.625em; }
	#csg-bar .csg-subnav { flex: 1 1 100%; }
	#csg-bar .csg-subnav > a { flex: 1 1 auto; text-align: center; }
	#csg-bar .csg-tools { margin-left: 0; flex: 1 1 100%; padding-bottom: 0.375em; }
	#csg-bar .csg-tools select { flex: 1 1 auto; }
}
@media (max-width: 767px) {
	#csg-bar .csg-wrap, #csg-foot .csg-wrap { width: 96%; }
	#csg-foot .csg-cols { gap: 1.25em 2em; }
	#csg-foot .csg-bottom .csg-wrap { justify-content: flex-start; }
}
@media (max-width: 560px) {
	#csg-foot .csg-col, #csg-foot .csg-about { flex: 1 1 100%; }
	#csg-foot .csg-about { order: 0; margin-left: 0; max-width: none; }
}
@media (max-width: 480px) {
	#csg-bar .csg-wrap, #csg-foot .csg-wrap {
		width: 100%;
		padding-left: 0.625em;
		padding-right: 0.625em;
	}
}

/* ==========================================================================
   The error page - csg_shared/csg_error.php, served for every 4xx/5xx on the
   site through the root .htaccess and from the shop's own router.

   Unlike everything above it, this block owns a whole document: the error
   page has no host app to sit inside, so here - and only here - the sheet is
   allowed to style body. It is fenced behind body.csg-errorbody so it can
   never touch a page belonging to /shop, /stats or /amxbans.
   ========================================================================== */

body.csg-errorbody {
	margin: 0;
	padding: 0;
	background: #0a0707;
	color: #e8e2e1;
	font-family: "Consolas", "DejaVu Sans Mono", "Courier New", monospace;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body.csg-errorbody #csg-error { flex: 1 0 auto; }
body.csg-errorbody #csg-foot  { flex: 0 0 auto; }

#csg-error {
	background:
		radial-gradient(80em 40em at 50% 45%, rgba(178,14,20,.18), rgba(178,14,20,0) 70%),
		linear-gradient(180deg, #0b0708, #0a0707);
	border-bottom: 1px solid var(--csg-edge);
	padding: 4em 0 4.5em;
	text-align: center;
	/*
		The page is short and the footer is pinned to the bottom by the flex
		column on body, so without this the message sits under the bar with a
		screen of empty red glow beneath it. Centring puts it where the eye
		lands.
	*/
	display: flex;
	align-items: center;
	justify-content: center;
}
#csg-error .csg-wrap {
	width: 90%;
	max-width: 46em;
	margin: 0 auto;
}

/*
	The number itself. Outlined rather than filled: a solid red 404 the size
	of the page would be the only thing on it, and the house rule is that red
	is an accent. The outline keeps the scale and gives the headline the
	contrast back.
*/
#csg-error .csg-err-code {
	font-size: 8em;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: transparent;
	-webkit-text-stroke: 2px var(--csg-edge2);
	text-shadow: 0 0 1.5em rgba(178,14,20,.45);
	margin: 0 0 0.125em;
	user-select: none;
}

#csg-error h1 {
	font-family: var(--csg-mono);
	font-size: 1.5em;
	line-height: 1.2;
	letter-spacing: 0.0625em;
	text-transform: uppercase;
	color: var(--csg-bright);
	margin: 0 0 0.5em;
}
#csg-error h1::after {
	content: "";
	display: block;
	width: 3em;
	height: 2px;
	margin: 0.5em auto 0;
	background: var(--csg-red);
}
#csg-error .csg-err-msg {
	font-size: 0.8125em;
	line-height: 1.7;
	color: var(--csg-muted);
	margin: 1em 0 0;
}

/* The URL that failed, shown back so it can be copied into a report. */
#csg-error .csg-err-url {
	margin: 1.5em 0 0;
	font-size: 0.6875em;
	letter-spacing: 0.0625em;
}
#csg-error .csg-err-url span {
	display: block;
	text-transform: uppercase;
	color: var(--csg-muted);
	margin-bottom: 0.5em;
}
#csg-error .csg-err-url code {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	font-family: var(--csg-mono);
	background: var(--csg-steel);
	border: 1px solid var(--csg-edge);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	color: var(--csg-red-b);
	padding: 0.5em 0.75em;
}

/* ---- the countdown ---- */
#csg-error .csg-err-timer { margin: 2em 0 0; }
#csg-error .csg-err-timer p {
	margin: 0 0 0.75em;
	font-size: 0.6875em;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	color: var(--csg-muted);
}
#csg-error .csg-err-timer b { color: var(--csg-text); font-weight: 400; }
#csg-error .csg-err-timer #csg-err-count {
	color: var(--csg-red-b);
	font-variant-numeric: tabular-nums;
}
#csg-error .csg-err-track {
	height: 3px;
	background: var(--csg-steel2);
	border: 1px solid var(--csg-edge);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	overflow: hidden;
}
#csg-error .csg-err-track i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--csg-red);
}
/* Stopped: the bar stops being a promise, so it stops being red. */
#csg-error .csg-err-timer.csg-stopped .csg-err-track i { background: var(--csg-edge2); }

/* ---- the way out ---- */
#csg-error .csg-err-acts {
	margin: 2em 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.625em;
}
#csg-error .csg-err-acts a,
#csg-error .csg-err-acts button {
	font-family: var(--csg-mono);
	font-size: 0.6875em;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.75em 1.25em;
	border: 1px solid var(--csg-edge2);
	background: var(--csg-steel2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	color: var(--csg-bright);
	cursor: pointer;
	line-height: 1;
}
#csg-error .csg-err-acts .csg-err-go {
	background: var(--csg-red);
	border-color: var(--csg-red);
}
#csg-error .csg-err-acts .csg-err-go:hover,
#csg-error .csg-err-acts .csg-err-go:focus { background: var(--csg-red-b); border-color: var(--csg-red-b); }
#csg-error .csg-err-acts .csg-err-stay:hover,
#csg-error .csg-err-acts .csg-err-stay:focus,
#csg-error .csg-err-acts .csg-err-alt:hover,
#csg-error .csg-err-acts .csg-err-alt:focus { background: var(--csg-steel); color: var(--csg-red-b); }
#csg-error .csg-err-acts .csg-err-alt { background: none; color: var(--csg-muted); }

@media (max-width: 767px) {
	#csg-error { padding: 2.5em 0 3em; }
	#csg-error .csg-wrap { width: 94%; }
	#csg-error .csg-err-code { font-size: 5em; -webkit-text-stroke-width: 1.5px; }
	#csg-error h1 { font-size: 1.125em; }
	#csg-error .csg-err-acts a, #csg-error .csg-err-acts button { flex: 1 1 100%; text-align: center; }
}

/* The animation is decoration; the countdown still counts without it. */
@media (prefers-reduced-motion: reduce) {
	#csg-error .csg-err-track i { transition: none; }
}