/*
 * CoD4 Config Checker
 * Minimal two-tone theme. Severity colours are used as accents only,
 * so long config lines stay readable inside a result row.
 */

:root
{
	--bg: #fbfbfa;
	--surface: #ffffff;
	--field: #fafaf9;
	--text: #1c1c1a;
	--muted: #6f6f6a;
	--border: #e4e4e1;
	--border-strong: #cfcfca;

	--accent: #1c1c1a;
	--accent-text: #ffffff;
	--focus: #7c7c74;

	--red: #c4322c;
	--red-tint: rgba(196, 50, 44, 0.07);
	--orange: #a86a06;
	--orange-tint: rgba(168, 106, 6, 0.08);
	--green: #3f7d2c;
	--green-tint: rgba(63, 125, 44, 0.08);

	/* Row tints for the highlight layer behind the textarea. */
	--red-line: rgba(196, 50, 44, 0.11);
	--orange-line: rgba(168, 106, 6, 0.13);

	/* the page width, shared by the content and the footer rule above it */
	--page-width: 1180px;

	/* With the tabs in a column the page grows by that column, so the panels
	   keep the width they have under a row of tabs. */
	--sidebar-width: 200px;
	--sidebar-gap: 36px;
	--layout-width: calc(var(--page-width) + var(--sidebar-width) + var(--sidebar-gap));

	--radius: 10px;
	--radius-sm: 6px;

	--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--bg: #131313;
		--surface: #1a1a1a;
		--field: #151515;
		--text: #ececea;
		--muted: #97978f;
		--border: #2c2c2c;
		--border-strong: #3d3d3d;

		--accent: #ececea;
		--accent-text: #131313;
		--focus: #8d8d85;

		--red: #f2807c;
		--red-tint: rgba(242, 128, 124, 0.10);
		--orange: #e0ac4a;
		--orange-tint: rgba(224, 172, 74, 0.10);
		--green: #86c96a;
		--green-tint: rgba(134, 201, 106, 0.10);

		--red-line: rgba(242, 128, 124, 0.16);
		--orange-line: rgba(224, 172, 74, 0.16);
	}
}

*,
*::before,
*::after
{
	box-sizing: border-box;
}

/* Reserve the scrollbar track at all times, so switching to a tab that is long
   enough to scroll does not shift the page sideways. The @supports block is the
   modern version: space reserved without a permanently visible scrollbar. */
html
{
	overflow-y: scroll;
}

@supports (scrollbar-gutter: stable)
{
	html
	{
		overflow-y: auto;
		scrollbar-gutter: stable;
	}
}

body
{
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a
{
	color: inherit;
	text-underline-offset: 2px;
	text-decoration-color: var(--border-strong);
}

a:hover
{
	text-decoration-color: currentColor;
}

:focus-visible
{
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.visually-hidden
{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- layout ---------- */

.wrap
{
	width: 100%;
	max-width: var(--layout-width);
	margin: 0 auto;
	padding: 56px 20px 40px;
}

.header
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

/* Vector redraw of cod4.png, so it needs no filter or blend trick: the paths
   use currentColor and the background is genuinely empty. */
.brand
{
	flex: 0 0 auto;
	display: block;
	width: 34px;
	height: 34px;
	color: var(--text);
}

.brand[hidden]
{
	display: none;
}

.header h1
{
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* The two buttons that turn the tab bar between a column and a row. */
.tab-layout
{
	display: inline-flex;
	gap: 2px;
	margin-left: auto;
	padding: 2px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--surface);
}

.tab-layout-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.tab-layout-btn svg
{
	display: block;
	fill: currentColor;
}

.tab-layout-btn:hover
{
	color: var(--text);
}

.tab-layout-btn[aria-pressed="true"]
{
	background-color: var(--field);
	color: var(--text);
	box-shadow: inset 0 0 0 1px var(--border);
}

.lede
{
	margin: 0 0 20px;
	color: var(--muted);
	font-size: 14px;
}

/* ---------- games ---------- */

/* One button per game above its tab bar, drawn like the other controls of the
   page: the active game gets the accent border, the others stay muted. */
.game-switch
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.game-btn
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--surface);
	color: var(--muted);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.game-btn:hover
{
	color: var(--text);
	border-color: var(--border-strong);
}

.game-btn.is-active
{
	color: var(--text);
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.game-icon
{
	display: block;
	width: 20px;
	height: 20px;
	transition: opacity 0.15s ease;
}

.game-btn:not(.is-active) .game-icon
{
	opacity: 0.65;
}

/* The bars are children of this box, but lay out as if they were the page's
   own: the column layout below places .tabs directly. */
.game-tabs
{
	display: contents;
}

.tabs[hidden]
{
	display: none;
}

/* ---------- tabs ---------- */

.tabs
{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border);
}

.tab
{
	position: relative;
	bottom: -1px;
	padding: 9px 14px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--muted);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.tab:hover
{
	color: var(--text);
}

.tab.is-active
{
	color: var(--text);
	border-bottom-color: var(--accent);
}

/* Tabs top to bottom, the default: a column to the left of the panels, with
   the active tab marked on the column's edge the way the row marks it on its
   bottom line. A row of tabs is the rules above, kept for data-tabs=horizontal. */
:root[data-tabs="horizontal"]
{
	--layout-width: var(--page-width);
}

:root:not([data-tabs="horizontal"]) .tabs
{
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 2px;
}

:root:not([data-tabs="horizontal"]) .tab
{
	bottom: auto;
	padding: 8px 14px 8px 0;
	border-bottom: 0;
	text-align: left;
}

@media (min-width: 721px)
{
	:root:not([data-tabs="horizontal"]) .wrap
	{
		display: grid;
		grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
		column-gap: var(--sidebar-gap);
		align-items: start;
	}

	:root:not([data-tabs="horizontal"]) .header,
	:root:not([data-tabs="horizontal"]) .game-switch
	{
		grid-column: 1 / -1;
	}

	/* sticky, so the tabs stay in reach on a long panel */
	:root:not([data-tabs="horizontal"]) .tabs
	{
		position: sticky;
		top: 20px;
		grid-column: 1;
		grid-row: 3;
		margin-bottom: 0;
		border-bottom: 0;
		border-right: 1px solid var(--border);
	}

	:root:not([data-tabs="horizontal"]) .tab
	{
		right: -1px;
		border-right: 2px solid transparent;
	}

	:root:not([data-tabs="horizontal"]) .tab.is-active
	{
		border-right-color: var(--accent);
	}

	:root:not([data-tabs="horizontal"]) .panel
	{
		grid-column: 2;
		grid-row: 3;
		min-width: 0;
	}
}

/* On a phone there is no room beside the panels, so the column stands above
   them, still top to bottom. */
@media (max-width: 720px)
{
	:root:not([data-tabs="horizontal"]) .tab
	{
		padding-left: 12px;
		border-left: 2px solid transparent;
	}

	:root:not([data-tabs="horizontal"]) .tab.is-active
	{
		border-left-color: var(--accent);
	}
}

.panel:focus
{
	outline: 0;
}

/* ---------- killfeed colours ---------- */

.kf-rows
{
	display: flex;
	flex-direction: column;
}

.kf-bind
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	background-color: var(--field);
}

.kf-bind-label
{
	flex: 0 0 auto;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 13px;
}

.kf-row
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
}

.kf-color
{
	flex: 0 0 auto;
	width: 40px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: none;
	cursor: pointer;
}

.kf-color::-webkit-color-swatch-wrapper
{
	padding: 2px;
}

.kf-color::-webkit-color-swatch
{
	border: 0;
	border-radius: 3px;
}

.kf-dvar,
.kf-value,
.kf-hex,
.kf-key,
.kf-action
{
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--field);
	color: inherit;
	font-family: var(--mono);
	font-size: 13px;
}

.kf-dvar
{
	flex: 1 1 auto;
	min-width: 0;
}

.kf-value
{
	flex: 0 0 auto;
	width: 170px;
}

.kf-key
{
	flex: 0 0 auto;
	width: 84px;
	text-align: center;
}

.kf-action
{
	flex: 1 1 auto;
	min-width: 0;
}

.kf-hex
{
	flex: 0 0 auto;
	width: 100px;
	text-transform: lowercase;
}

.kf-dvar[readonly]
{
	border-color: transparent;
	background-color: transparent;
	color: var(--text);
	font-weight: 600;
	cursor: default;
}

.kf-value.is-invalid,
.kf-hex.is-invalid,
.kf-key.is-invalid,
.kf-action.is-invalid,
.sb-value.is-invalid,
.fq-key.is-invalid
{
	border-color: var(--red);
	color: var(--red);
}

.kf-out
{
	margin-top: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--surface);
	overflow: hidden;
}

.kf-out-head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 8px 7px 16px;
	border-bottom: 1px solid var(--border);
	background-color: var(--field);
}

.kf-out-title
{
	color: var(--muted);
	font-size: 13px;
	font-weight: 500;
}

.btn-sm
{
	padding: 4px 12px;
	font-size: 13px;
}

.kf-output
{
	display: block;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--text);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.7;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.kf-output.is-empty
{
	color: var(--muted);
}

/* Killfeed preview. The backdrop imitates an out of focus map -- muted olive
   greys -- rather than a flat dark panel, because that is what the names sit
   over in game and it is the honest test of whether a colour stays readable.
   It stays the same in both themes for the same reason. */
.kf-feed
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 14px 16px;
	background-color: #55564a;
	background-image:
		radial-gradient(115% 85% at 22% 28%, rgba(151, 148, 126, 0.55) 0%, rgba(151, 148, 126, 0) 58%),
		radial-gradient(85% 70% at 68% 58%, rgba(88, 88, 74, 0.55) 0%, rgba(88, 88, 74, 0) 62%),
		radial-gradient(70% 60% at 92% 18%, rgba(120, 116, 96, 0.35) 0%, rgba(120, 116, 96, 0) 70%),
		radial-gradient(140% 130% at 45% 45%, rgba(20, 20, 14, 0) 42%, rgba(20, 20, 14, 0.5) 100%);
}

.kf-line
{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.kf-nick
{
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* The icons come uncropped, so each is a clip box: this height is the visible
   height of every icon, killfeed.js gives the box the shape of the icon's
   visible part and places the whole image inside so only that part shows. */
.kf-icon
{
	flex: 0 0 auto;
	position: relative;
	display: block;
	height: 14px;
	overflow: hidden;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
	user-select: none;
}

.kf-icon img
{
	position: absolute;
	display: block;
	max-width: none;
}

/* Until the icons are measured the lines keep their place but stay unseen,
   so the preview neither jumps nor shows icons at the wrong size. */
.kf-feed.is-loading > .kf-line
{
	visibility: hidden;
}

/* The two killfeed window options, laid out like the colour rows above. */
.kf-opt
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
}

.kf-opt-label
{
	flex: 0 0 110px;
	font-size: 13px;
	font-weight: 600;
}

.kf-num
{
	width: 84px;
	min-width: 0;
}

.kf-opt-desc
{
	flex: 1 1 100%;
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
}

/* ---------- number field with - and + (decimal.js) ---------- */

/* The buttons take the field's height, whatever the tab's field is. */
.num-stepper
{
	display: inline-flex;
	flex: 0 0 auto;
	align-items: stretch;
	gap: 4px;
}

.num-step
{
	flex: 0 0 28px;
	width: 28px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--field);
	color: var(--text);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	touch-action: manipulation;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.num-step:hover:not(:disabled)
{
	border-color: var(--border-strong);
	background-color: var(--surface);
}

.num-step:disabled
{
	opacity: 0.4;
	cursor: default;
}

/* Scoreboard fields all end on one line; a number field gives up the room
   its two buttons need. */
.num-stepper .sb-value
{
	width: calc(27ch + 18px - 64px);
}

/* ---------- minimap generator ---------- */

/* The info tooltips may reach past the card's edge, so it does not clip. */
.mm-card
{
	overflow: visible;
}

/* Label plus info icon, as wide as the killfeed labels but with room for the
   longer names here. */
.mm-opt-head
{
	display: inline-flex;
	flex: 0 0 170px;
	align-items: center;
	gap: 6px;
}

.mm-opt-head .kf-opt-label
{
	flex: 0 1 auto;
}

/* The allowed range, right beside the field. */
.mm-range-hint
{
	color: var(--muted);
	font-family: var(--mono);
	font-size: 12px;
	white-space: nowrap;
}

.mm-badges
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mm-badge
{
	padding: 1px 8px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.mm-badge.is-cheat
{
	color: var(--red);
	background-color: var(--red-tint);
}

/* Info icon; its text shows on hover and on keyboard focus or a tap. */
.mm-tip
{
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	cursor: help;
}

.mm-tip:focus
{
	outline: 0;
}

.mm-tip-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	color: var(--muted);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.mm-tip:hover .mm-tip-icon,
.mm-tip:focus-visible .mm-tip-icon
{
	border-color: var(--text);
	color: var(--text);
}

.mm-tip-text
{
	position: absolute;
	left: -6px;
	top: calc(100% + 8px);
	z-index: 10;
	display: none;
	width: max-content;
	max-width: min(280px, calc(100vw - 190px));
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--surface);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	color: var(--text);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	white-space: normal;
	pointer-events: none;
}

/* display, not visibility: a hidden bubble must not widen the page. */
.mm-tip:hover .mm-tip-text,
.mm-tip:focus .mm-tip-text
{
	display: block;
}

.mm-select
{
	height: 30px;
	max-width: 100%;
	padding: 0 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--field);
	color: inherit;
	font-family: inherit;
	font-size: 13px;
}

.mm-advanced
{
	border-bottom: 1px solid var(--border);
}

.mm-advanced-head
{
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.mm-advanced-head:focus-visible
{
	outline: 2px solid var(--focus);
	outline-offset: -2px;
}

.mm-advanced[open] > .mm-advanced-head
{
	border-bottom: 1px solid var(--border);
}

.mm-advanced .kf-opt:last-child
{
	border-bottom: 0;
}

/* Map, position and facing: what the preview shows, not part of the config. */
.mm-scene
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
}

.mm-field
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.mm-field-label
{
	font-size: 13px;
	font-weight: 600;
}

.mm-field-facing
{
	flex: 1 1 260px;
}

.mm-range
{
	flex: 1 1 auto;
	min-width: 80px;
	accent-color: var(--accent);
}

.mm-facing-out
{
	flex: 0 0 auto;
	min-width: 64px;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* The canvas is the top-left corner of the screen. It gets the same out of
   focus backdrop as the killfeed preview: the minimap is see-through in game,
   so it is shown over something like a game, in both themes. */
.mm-stage
{
	position: relative;
	padding: 16px;
	background-color: var(--field);
}

.mm-canvas
{
	display: block;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	border-radius: var(--radius-sm);
	cursor: pointer;
	background-color: #55564a;
	background-image:
		radial-gradient(115% 85% at 22% 28%, rgba(151, 148, 126, 0.55) 0%, rgba(151, 148, 126, 0) 58%),
		radial-gradient(85% 70% at 68% 58%, rgba(88, 88, 74, 0.55) 0%, rgba(88, 88, 74, 0) 62%),
		radial-gradient(70% 60% at 92% 18%, rgba(120, 116, 96, 0.35) 0%, rgba(120, 116, 96, 0) 70%),
		radial-gradient(140% 130% at 45% 45%, rgba(20, 20, 14, 0) 42%, rgba(20, 20, 14, 0.5) 100%);
}

.mm-status
{
	position: absolute;
	right: 28px;
	bottom: 26px;
	margin: 0;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	background-color: rgba(0, 0, 0, 0.55);
	color: #ececea;
	font-size: 12px;
}

.mm-status[hidden]
{
	display: none;
}

.mm-note
{
	margin: 0;
	padding: 10px 16px;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
}

/* ---------- scoreboard generator ---------- */

.sb-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.sb-group
{
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--surface);
}

.sb-group .rc-title
{
	margin-bottom: 10px;
}

.sb-field
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 4px 0;
}

.sb-label
{
	flex: 1 1 60px;
	min-width: 0;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 12px;
}

.sb-value
{
	/* the longest value is a 26 character team name */
	flex: 0 0 auto;
	width: calc(27ch + 18px);
	min-width: 0;
	height: 28px;
	padding: 0 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--field);
	color: inherit;
	font-family: var(--mono);
	font-size: 12px;
}

.sb-colorwrap
{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.sb-colorwrap .kf-color
{
	flex: 0 0 32px;
	width: 32px;
	height: 28px;
}

.sb-slot
{
	/* ch resolves against this rule's own font, so it has to match .sb-value */
	font-family: var(--mono);
	font-size: 12px;
	flex: 0 0 calc(27ch + 18px);
}

.sb-check
{
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--accent);
}

/* what every ping range turns into, for the values currently set */
.sb-ladder
{
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--border);
}

.sb-step
{
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 3px 0;
}

.sb-step-ping,
.sb-step-value
{
	color: var(--muted);
	font-family: var(--mono);
	font-size: 11px;
	line-height: 16px;
}

.sb-step-ping
{
	flex: 0 0 92px;
}

.sb-step-value
{
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sb-step-bars
{
	display: flex;
	flex: 0 0 auto;
	align-items: flex-end;
	gap: 1px;
	height: 16px;
}

.sb-step-bar
{
	width: 4px;
	background: var(--border);
}

/* ---------- colour presets ---------- */

.sb-presets
{
	margin-bottom: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--surface);
}

.sb-presets-head
{
	padding: 11px 16px;
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.sb-presets-head:focus-visible
{
	outline: 2px solid var(--focus);
	outline-offset: -2px;
}

.sb-preset-list
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 12px 12px;
}

.sb-preset
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--field);
	color: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.sb-preset:hover
{
	border-color: var(--border-strong);
}

.sb-preset.is-active
{
	border-color: var(--accent);
}

.sb-preset-name
{
	/* set from the longest name in buildPresets, so it never wraps */
	flex: 0 0 var(--sb-name-width, 150px);
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
}

/* The label has a fixed width, so the five colours line up in columns from
   one preset row to the next. */
.sb-part
{
	display: flex;
	align-items: center;
	gap: 7px;
}

.sb-swatch
{
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1px solid var(--border-strong);
	border-radius: 4px;
}

.sb-part-label
{
	flex: 0 0 78px;
	color: var(--muted);
	font-size: 11px;
}

/* The board is drawn in the game's own virtual space (aspect ratio x 480) and
   scaled to fit, so the numbers in the code are the numbers the game uses. The
   backdrop is a Promod screenshot, so the board sits on it the way it does
   in-game. */
.sb-preview
{
	position: relative;
	overflow: hidden;
	background-color: #6d6a58;
	background-image: url("../assets/cod4/scoreboard/preview-bg.png");
	background-position: center;
	background-size: cover;
}

.sb-screen
{
	position: absolute;
	top: 0;
	left: 0;
	width: 640px;
	height: 480px;
	transform-origin: top left;
}

/* stands in for the g_TeamIcon_* material */
.sb-icon
{
	position: absolute;
	fill: rgba(255, 255, 255, 0.85);
}

.sb-rect
{
	position: absolute;
}

.sb-text
{
	position: absolute;
	white-space: nowrap;
	overflow: hidden;
	font-family: var(--sans);
	/* UI_DrawText style 3 is a hard one pixel drop shadow, not a soft glow */
	text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.7);
}

/* ---------- rcon reference ---------- */

.rc-group
{
	margin-bottom: 16px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--surface);
}

.rc-title
{
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.rc-note
{
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 13px;
}

.rc-title + .rc-items,
.rc-title + .rc-grid,
.rc-title + .rc-tokens
{
	margin-top: 12px;
}

.rc-sub
{
	margin: 18px 0 8px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rc-items
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rc-item
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--field);
}

.rc-item-text
{
	min-width: 0;
}

.rc-code
{
	display: block;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.rc-desc
{
	margin: 3px 0 0;
	color: var(--muted);
	font-size: 13px;
}

.rc-copy
{
	flex: 0 0 auto;
}

.rc-copy.is-copied
{
	border-color: var(--green);
	color: var(--green);
}

/* Token reference for promod_mode: names are building blocks, not commands. */
.rc-tokens
{
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	margin: 0 0 14px;
	font-size: 13px;
}

.rc-tokens dt
{
	font-family: var(--mono);
	font-weight: 600;
}

.rc-tokens dd
{
	margin: 0;
	color: var(--muted);
}

.rc-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px;
}

.rc-cell
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--field);
}

.rc-cell-name
{
	display: block;
	font-size: 13px;
	font-weight: 600;
}

.rc-cell .rc-code
{
	color: var(--muted);
	font-size: 12.5px;
}

/* CoD2 rcon: the same items, with a source badge beside the command. */
.r2-head
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
}

.r2-head .d2-src
{
	margin-right: 0;
}

.r2-example code
{
	font-family: var(--mono);
	font-size: 12.5px;
	overflow-wrap: anywhere;
}

.r2-rules
{
	border-color: var(--orange);
	color: var(--orange);
	cursor: help;
}

.r2-warn
{
	padding: 8px 10px;
	border-left: 3px solid var(--orange);
	border-radius: var(--radius-sm);
	background-color: var(--orange-tint);
	color: var(--text);
}

/* .rc-item and .rc-cell set display, so the filter's hidden needs saying. */
.r2-group[hidden],
.r2-block[hidden],
.r2-group .rc-item[hidden],
.r2-group .rc-cell[hidden],
.r2-group .rc-tokens [hidden]
{
	display: none;
}

/* ---------- CoD2 name generator ---------- */

.n2-edit
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 16px 4px;
}

.n2-label
{
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}

.n2-input
{
	width: 100%;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--field);
	color: inherit;
	font-family: var(--mono);
	font-size: 15px;
}

.n2-palette
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.n2-code
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 8px 10px;
	font-family: var(--mono);
}

.n2-swatch
{
	width: 14px;
	height: 14px;
	border: 1px solid var(--border-strong);
	border-radius: 3px;
}

.n2-team
{
	white-space: nowrap;
}

.n2-count
{
	color: var(--muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.n2-count.is-over
{
	color: var(--red);
	font-weight: 600;
}

/* A dark, slightly lit backdrop, like a scoreboard row over the game. */
.n2-stage
{
	display: flex;
	align-items: center;
	min-height: 72px;
	padding: 8px 12px;
	overflow: hidden;
	background-color: #1d1e1a;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.25)),
		radial-gradient(120% 140% at 20% 30%, rgba(110, 108, 92, 0.35) 0%, rgba(110, 108, 92, 0) 60%);
}

.n2-stage-sm
{
	min-height: 0;
	margin-bottom: 6px;
	padding: 2px 6px;
	border-radius: 4px;
}

.n2-canvas
{
	display: block;
	max-width: 100%;
	height: auto;
}

.n2-plain
{
	margin: 0;
	padding: 10px 16px;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 13px;
}

.n2-plain code
{
	color: var(--text);
	font-family: var(--mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.n2-warnings
{
	margin: 12px 0 0;
	padding: 10px 12px 10px 30px;
	border-left: 3px solid var(--orange);
	border-radius: var(--radius-sm);
	background-color: var(--orange-tint);
	font-size: 13px;
}

.n2-warnings[hidden]
{
	display: none;
}

.n2-warnings li + li
{
	margin-top: 4px;
}

.n2-howto
{
	margin: 12px 0 16px;
	color: var(--muted);
	font-size: 13px;
}

.n2-howto code
{
	font-family: var(--mono);
	color: var(--text);
}

.n2-preset .rc-item-text
{
	flex: 1 1 auto;
}

.n2-preset .n2-stage
{
	display: inline-flex;
}

/* ---------- dvar reference ---------- */

.dv-bar
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.dv-search
{
	flex: 1 1 260px;
	min-width: 0;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--surface);
	color: inherit;
	font-family: inherit;
	font-size: 14px;
}

.dv-search::placeholder
{
	color: var(--muted);
}

.dv-count
{
	flex: 0 0 auto;
	color: var(--muted);
	font-size: 13px;
}

.dv-empty
{
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 14px;
}

.dv-list
{
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--surface);
	overflow: hidden;
}

/* ---------- form ---------- */

.card
{
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}

.editor
{
	display: flex;
	align-items: stretch;
	background-color: var(--field);
	border-bottom: 1px solid var(--border);
}

/* The numbers are absolutely positioned so their height never drives the
   flex line -- otherwise a long config would stretch the editor instead of
   letting the textarea scroll. */
.gutter-box
{
	position: relative;
	flex: 0 0 auto;
	width: calc(2ch + 24px);
	border-right: 1px solid var(--border);
	overflow: hidden;
}

.gutter
{
	position: absolute;
	top: 16px;
	right: 10px;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.7;
	text-align: right;
	white-space: pre;
	opacity: 0.7;
	-webkit-user-select: none;
	user-select: none;
}

.input-wrap
{
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
}

/* A textarea cannot colour individual lines, so flagged rows are painted on a
   layer underneath it. Its text is transparent and only exists to give the
   rows the width of the longest config line. Every metric here must stay in
   sync with the textarea below or the rows drift out of alignment. */
.highlights
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	padding-top: 16px;
	overflow: hidden;
	pointer-events: none;
}

.highlights-inner
{
	display: inline-block;
	min-width: 100%;
	color: transparent;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.7;
	tab-size: 4;
	white-space: pre;
}

.highlights-inner div
{
	padding: 0 16px;
}

.highlights-inner .hl-red
{
	background-color: var(--red-line);
}

.highlights-inner .hl-orange
{
	background-color: var(--orange-line);
}

textarea
{
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: block;
	width: 100%;
	min-width: 0;
	min-height: 260px;
	margin: 0;
	padding: 16px;
	border: 0;
	background-color: transparent;
	color: inherit;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.7;
	tab-size: 4;
	white-space: pre;
	overflow: auto;
	resize: vertical;
}

textarea::placeholder
{
	color: var(--muted);
	opacity: 0.65;
}

textarea:focus-visible
{
	outline: 0;
}

.editor:focus-within
{
	background-color: var(--surface);
}

.actions
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px;
}

.tools
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hint
{
	margin: 10px 2px 0;
	color: var(--muted);
	font-size: 13px;
	min-height: 1.55em;
}

.hint.is-error
{
	color: var(--red);
}

.btn
{
	padding: 8px 16px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background-color: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.btn:hover
{
	background-color: var(--field);
}

.btn[hidden]
{
	display: none;
}

.btn-primary
{
	border-color: transparent;
	background-color: var(--accent);
	color: var(--accent-text);
	font-weight: 550;
	padding-inline: 22px;
}

.btn-primary:hover
{
	background-color: var(--accent);
	opacity: 0.85;
}

.btn-primary:active
{
	opacity: 0.7;
}

/* ---------- results ---------- */

#violations
{
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#violations[hidden]
{
	display: none;
}

#violations li
{
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-left: 3px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--surface);
	font-size: 14px;
}

#violations li.red
{
	border-left-color: var(--red);
	background-color: var(--red-tint);
}

#violations li.orange
{
	border-left-color: var(--orange);
	background-color: var(--orange-tint);
}

#violations li.green
{
	border-left-color: var(--green);
	background-color: var(--green-tint);
}

#violations em
{
	font-family: var(--mono);
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
}

li.red em
{
	color: var(--red);
}

li.orange em
{
	color: var(--orange);
}

pre
{
	display: block;
	margin: 8px 0 0;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	background-color: var(--field);
	border: 1px solid var(--border);
	color: var(--muted);
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.line-actions
{
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 8px;
}

.line-action
{
	color: var(--muted);
	font-size: 13px;
	text-decoration: underline;
	text-decoration-color: var(--border-strong);
}

.line-action:hover
{
	color: var(--text);
}

/* ---------- dvar tables: CoD4 and CoD2 ---------- */

/* The search bar and frame of .dv-*, with the fields in columns. */
.d2-filters
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 12px;
	font-size: 13px;
}

.d2-check
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.d2-check input
{
	margin: 0;
	accent-color: var(--accent);
}

.d2-filter-label
{
	margin-left: 8px;
	color: var(--muted);
	font-weight: 600;
}

.d2-list
{
	overflow-x: auto;
}

.d2-table
{
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.d2-table th
{
	padding: 8px 12px;
	border-bottom: 1px solid var(--border);
	background-color: var(--field);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}

.d2-table td
{
	padding: 8px 12px;
	border-bottom: 1px solid var(--border);
	vertical-align: baseline;
}

.d2-table tbody tr:last-child td
{
	border-bottom: 0;
}

.d2-row[hidden]
{
	display: none;
}

.d2-sort
{
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.d2-sort:hover
{
	color: var(--text);
}

.d2-arrow
{
	margin-left: 4px;
	font-size: 9px;
}

/* The name stays on one line; a protection tag that does not fit beside it
   goes under it, so a long name does not widen the column further. */
.d2-name
{
	white-space: nowrap;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text);
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: copy;
}

.d2-name:hover
{
	text-decoration: underline;
	text-decoration-color: var(--border-strong);
	text-underline-offset: 2px;
}

.d2-cheat
{
	display: inline-block;
	margin-top: 3px;
	padding: 0 7px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background-color: var(--orange-tint);
	color: var(--orange);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.d2-def,
.d2-num
{
	font-family: var(--mono);
	font-size: 12px;
	white-space: nowrap;
}

/* Most defaults are short numbers; the few long strings wrap instead of
   pushing the description out. */
.d2-def
{
	max-width: 22ch;
	white-space: normal;
	overflow-wrap: anywhere;
}

.d2-type
{
	color: var(--muted);
	white-space: nowrap;
}

/* A few descriptions name another dvar 46 characters long: it may break, or
   it alone would make the table wider than its frame. */
.d2-desc
{
	min-width: 24ch;
	color: var(--muted);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.d2-from
{
	font-size: 11px;
	opacity: 0.75;
	white-space: nowrap;
}

.d2-from::before
{
	content: "\2014\00a0";
}

.d2-values,
.d2-alt
{
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: 11px;
	white-space: normal;
}

.d2-note
{
	margin-left: 4px;
	padding: 0 4px;
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 10px;
	cursor: help;
}

.d2-none
{
	color: var(--border-strong);
}

.d2-empty
{
	color: var(--muted);
}

.d2-sources
{
	white-space: nowrap;
}

.d2-src
{
	display: inline-block;
	margin-right: 4px;
	padding: 0 6px;
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.6;
}

/* The protection tags are buttons that open the popover. */
.dv-tagbtn
{
	font-family: var(--sans);
	cursor: pointer;
}

.dv-tagbtn:hover
{
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dv-tag
{
	display: inline-block;
	margin-top: 3px;
	padding: 0 7px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background-color: var(--field);
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.dv-tag-enforced
{
	border-color: currentColor;
	color: var(--text);
}

/* A protection without a tag: a small "i" opens its popover. */
.dv-info
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 2px;
	padding: 0;
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	background: none;
	color: var(--muted);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 11px;
	font-style: italic;
	font-weight: 600;
	line-height: 1;
	vertical-align: 1px;
	cursor: pointer;
}

.dv-info:hover,
.dv-info[aria-expanded="true"]
{
	border-color: var(--muted);
	color: var(--text);
}

.dv-info.dv-tagbtn:hover
{
	text-decoration: none;
}

.dv-first
{
	margin-left: 0;
}

.dv-select
{
	height: 28px;
	padding: 0 6px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--surface);
	color: inherit;
	font: inherit;
}

.dv-panel
{
	position: relative;
}

.dv-pop
{
	position: absolute;
	z-index: 20;
	width: min(360px, calc(100vw - 32px));
	padding: 10px 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--surface);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	font-size: 13px;
	line-height: 1.5;
}

.dv-pop[hidden]
{
	display: none;
}

.dv-pop p
{
	margin: 0;
}

.dv-pop-title
{
	font-weight: 600;
	overflow-wrap: anywhere;
}

.dv-pop .dv-pop-text
{
	margin-top: 4px;
	color: var(--muted);
}

.dv-pop .dv-pop-ref
{
	margin-top: 6px;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 11px;
	overflow-wrap: anywhere;
}

/* A phone has no room for seven columns: each dvar becomes a block, the
   short fields in a row under its name, each with its column's name. */
@media (max-width: 720px)
{
	.d2-table,
	.d2-table tbody,
	.d2-table tr,
	.d2-table td
	{
		display: block;
	}

	.d2-table thead tr
	{
		display: flex;
		justify-content: flex-end;
	}

	.d2-table thead th:not(:first-child)
	{
		display: none;
	}

	.d2-table thead th
	{
		width: 100%;
	}

	.d2-table tr.d2-row
	{
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px 14px;
		padding: 9px 12px;
		border-bottom: 1px solid var(--border);
	}

	.d2-table tr.d2-row[hidden],
	.d2-table td.d2-blank
	{
		display: none;
	}

	.d2-name
	{
		overflow-wrap: anywhere;
		white-space: normal;
	}

	.d2-table td
	{
		padding: 0;
		border-bottom: 0;
	}

	.d2-table .d2-namecell,
	.d2-table .d2-desc
	{
		flex: 1 1 100%;
		white-space: normal;
	}

	.d2-table td[data-label]:not(.d2-namecell):not(.d2-desc)::before
	{
		content: attr(data-label) " ";
		color: var(--muted);
		font-family: var(--sans);
		font-size: 11px;
	}
}

/* ---------- footer ---------- */

.footer
{
	margin-top: auto;
	padding: 0 20px 28px;
	max-width: var(--layout-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	color: var(--muted);
	font-size: 12px;
}

/* The rule sits on a child, not on .footer itself: a border on .footer would
   span its padding as well and come out 40px longer than the one under the
   tabs, which is drawn on a box that already sits inside .wrap's padding. */
.footer::before
{
	content: "";
	display: block;
	margin-bottom: 24px;
	border-top: 1px solid var(--border);
}

.footer-gh
{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-gh:hover
{
	color: var(--text);
}

.footer-gh-name
{
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

.footer-gh svg
{
	display: block;
	fill: currentColor;
}

/* ---------- small screens ---------- */

@media (max-width: 560px)
{
	.wrap
	{
		padding-top: 32px;
	}

	.actions
	{
		flex-direction: column;
		align-items: stretch;
	}

	.tools
	{
		width: 100%;
	}

	.tools .btn
	{
		flex: 1 1 auto;
	}

	.btn-primary
	{
		width: 100%;
	}

	.gutter
	{
		padding-left: 10px;
	}

	.kf-row
	{
		flex-wrap: wrap;
	}

	/* Give the value its own line so the DVAR name keeps a usable width. */
	/* min-width: 0 lets the inputs shrink below their intrinsic size, so the
	   two of them share one line instead of stacking. */
	.kf-value
	{
		order: 2;
		flex: 1 1 55%;
		width: auto;
		min-width: 0;
	}

	.kf-hex
	{
		order: 3;
		flex: 1 1 30%;
		width: auto;
		min-width: 0;
	}

	/* The killfeed option fields share .kf-value but hold short numbers, so
	   they stay beside their label instead of taking the colour rows' layout. */
	.kf-num
	{
		order: 0;
		flex: 0 0 84px;
		width: 84px;
	}
}

@media (prefers-reduced-motion: reduce)
{
	*
	{
		transition: none !important;
	}
}

/* ---------- FAQ ---------- */

.fq-group[hidden]
{
	display: none;
}

.fq-item
{
	padding: 14px 0;
	border-top: 1px solid var(--border);
}

.fq-item:first-of-type
{
	padding-top: 4px;
	border-top: 0;
}

.fq-item[hidden]
{
	display: none;
}

.fq-q
{
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
}

.fq-a
{
	margin: 0 0 10px;
	max-width: 78ch;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
}

/* One width for the copy button and for the gap the button-less rows leave,
   so every code field ends on the same edge. */
.fq-cmd
{
	--fq-copy-w: 76px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 6px;
}

.fq-kind
{
	flex: 0 0 58px;
	text-align: left;
	padding-top: 5px;
	color: var(--muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fq-steps,
.fq-substeps
{
	margin: 0 0 10px;
	padding-left: 20px;
	max-width: 78ch;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.65;
}

.fq-steps > li
{
	margin-bottom: 5px;
}

.fq-substeps
{
	margin: 4px 0 0;
	list-style: disc;
}

.fq-link
{
	font-family: var(--mono);
	font-size: 12px;
}

/* key field on the bindable rows: same box metrics as .fq-code, so the row
   keeps one height */
.fq-key
{
	flex: 0 0 64px;
	width: 64px;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--field);
	color: inherit;
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.55;
	text-align: center;
}

/* middle column of the menu tables, fixed so the commands line up */
.fq-desc
{
	flex: 0 0 140px;
	padding-top: 5px;
	font-size: 12px;
}

.fq-code
{
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--field);
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.fq-copy,
.fq-copy-space
{
	flex: 0 0 var(--fq-copy-w);
}

/* the same box metrics as .fq-code, so both are exactly as tall */
.fq-copy
{
	padding: 6px 10px;
	font-size: 12.5px;
	line-height: 1.55;
}

.fq-note
{
	margin: 10px 0 0;
	max-width: 78ch;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
}

/* On a phone the rows of the menu tables (label, description, key, command,
   button) do not fit on one line: the command and its button wrap below. */
@media (max-width: 720px)
{
	.fq-cmd:has(.fq-desc)
	{
		flex-wrap: wrap;
	}

	.fq-cmd:has(.fq-desc) .fq-desc
	{
		flex: 1 1 auto;
	}

	.fq-cmd:has(.fq-desc) .fq-code
	{
		flex-basis: calc(100% - var(--fq-copy-w) - 10px);
	}
}

/* ---------- server configuration ---------- */

.sc-head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.sc-head .rc-title
{
	margin: 0;
}

.sc-line
{
	padding: 7px 0;
	border-top: 1px solid var(--border);
}

.sc-line:first-of-type
{
	border-top: 0;
}

.sc-code
{
	display: block;
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.sc-desc
{
	margin: 3px 0 0;
	max-width: 78ch;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.55;
}

.sc-note
{
	margin: 12px 0 0;
	padding-top: 10px;
	max-width: 78ch;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
}

.sc-group:first-of-type .sc-note,
.sc-group .sc-note:only-of-type:first-child
{
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

/* ---------- demos ---------- */

/* .btn was only ever used on <button>; a link needs these two to look the same */
a.btn
{
	display: inline-block;
	text-decoration: none;
}

.dm-open
{
	margin-bottom: 14px;
}

.dm-placeholder
{
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.dm-list
{
	margin: 0;
	padding-left: 20px;
	max-width: 78ch;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.7;
}