/* ReddiNet Help and Support site styles.

   Public pages are styled by class only (no bare element rules), so the site styles never reach into the MudBlazor content
   management area or MudBlazor's dialogs, menus and snackbars. mud-scope.css does the reverse: it keeps MudBlazor's own base
   styles inside those areas. */

/*---------------- Design tokens -----------------*/
/* The accepted Light values. js/theme.js puts the resolved theme on <html> (data-theme="light|dark") before the first paint;
   the Dark values follow, so every rule below uses the same tokens in either theme. */
:root {
	color-scheme: light;
	--site-red: #cc1000;
	--site-red-dark: #a30d00;
	--site-red-tint: #fdf1ef;
	--site-link: #b30e00;
	--site-ink: #333;
	--site-text: #444;
	--site-muted: #666;
	--site-line: #e3e3e3;
	--site-line-soft: #eee;
	--site-surface: #fff;
	--site-surface-alt: #f6f6f6;
	--site-radius: 8px;
	--site-radius-lg: 12px;
	--site-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	--site-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
	--site-font: 'Roboto', Helvetica, Arial, sans-serif;
	/* Content widths: page sections, reading text (Articles), and the side gutter used at every width */
	--site-page: 1200px;
	--site-read: 760px;
	--site-gutter: 16px;
	/* Theme tokens: page and raised surfaces, interaction states, borders, status colors and media framing */
	--site-page-bg: #fff;
	--site-elevated: #fff;
	--site-panel: #f6f6f6;
	--site-surface-subtle: #fafafa;
	--site-surface-muted: #f5f5f5;
	--site-hover-strong: #f3f3f3;
	--site-text-secondary: #555;
	--site-faint: #777;
	--site-icon-faint: #999;
	--site-red-fill: #cc1000;
	--site-red-fill-hover: #a30d00;
	--site-red-wash: #fff3f1;
	--site-hero-from: #cc1000;
	--site-hero-to: #e2321c;
	--site-border-input: #bbb;
	--site-border-hover: #cfcfcf;
	--site-border-dashed: #c8c8c8;
	--site-border-chip: #d5d5d5;
	--site-border-tile: #e5e5e5;
	--site-border-picker: #ddd;
	--site-focus-soft: rgba(204, 16, 0, 0.25);
	--site-header-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	--site-menu-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	--site-button-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	--site-sticky-shadow: 0 -6px 12px -10px rgba(0, 0, 0, 0.3);
	--site-fab: #333;
	--site-fab-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	--site-warning-bg: #fff8e1;
	--site-warning-line: #e6c46d;
	--site-warning-text: #5c4400;
	--site-warning-strong: #b26a00;
	--site-changed-bg: #fffaf2;
	--site-changed-line: #e0a243;
	--site-error: #a94442;
	--site-error-text: #8a1c12;
	--site-error-bg: #fdecea;
	--site-error-line: #f5c2bd;
	--site-danger-bg: #fffafa;
	--site-danger-line: #f0c9c4;
	--site-success: #2e7d32;
	--site-success-bg: #f1f8f2;
	--site-success-line: #9cc7a0;
	/* Media keeps its own colors: a white backing for transparent screenshots, a frame around white pages in Dark, and the
	   single-color line icons (menu, training options) lightened in Dark */
	--site-media-bg: #fff;
	--site-media-frame: none;
	--site-icon-filter: none;
}

/* Dark: the same product on neutral dark surfaces. The page sits between a recessed tone (CMS, footer, gray bands) and raised
   cards; menus and dialogs are one step higher again. Text is a soft off-white; the brand red is lighter for text, icons and
   focus, and a deeper red is used for filled buttons and the page title band. */
:root[data-theme="dark"] {
	color-scheme: dark;
	--site-red: #ef6a5d;
	--site-red-dark: #f58a7f;
	--site-red-tint: rgba(239, 106, 93, 0.14);
	--site-link: #f4897e;
	--site-ink: #e6e4e1;
	--site-text: #d4d2ce;
	--site-muted: #a19e99;
	--site-line: #36383b;
	--site-line-soft: #2c2e31;
	--site-surface: #1f2022;
	--site-surface-alt: #111214;
	--site-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	--site-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.5);
	--site-page-bg: #161718;
	--site-elevated: #2a2b2e;
	--site-panel: #26272a;
	--site-surface-subtle: #26272a;
	--site-surface-muted: #2a2b2e;
	--site-hover-strong: #2c2d30;
	--site-text-secondary: #b9b6b1;
	--site-faint: #8d8a85;
	--site-icon-faint: #8d8a85;
	--site-red-fill: #c42819;
	--site-red-fill-hover: #d33a2a;
	--site-red-wash: rgba(239, 106, 93, 0.16);
	--site-hero-from: #8e1d13;
	--site-hero-to: #a92c1d;
	--site-border-input: #5a5d61;
	--site-border-hover: #4a4d51;
	--site-border-dashed: #4f5256;
	--site-border-chip: #45484c;
	--site-border-tile: #36383b;
	--site-border-picker: #3e4044;
	--site-focus-soft: rgba(239, 106, 93, 0.35);
	--site-header-shadow: 0 1px 0 #2c2e31, 0 2px 8px rgba(0, 0, 0, 0.35);
	--site-menu-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
	--site-button-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	--site-sticky-shadow: 0 -6px 12px -10px rgba(0, 0, 0, 0.8);
	--site-fab: #3a3c40;
	--site-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	--site-warning-bg: #2f2716;
	--site-warning-line: #7a6128;
	--site-warning-text: #f0d48c;
	--site-warning-strong: #c98a2e;
	--site-changed-bg: rgba(224, 162, 67, 0.1);
	--site-changed-line: #a8803d;
	--site-error: #f28b82;
	--site-error-text: #ffb3ab;
	--site-error-bg: rgba(242, 139, 130, 0.1);
	--site-error-line: #7a3d37;
	--site-danger-bg: rgba(242, 139, 130, 0.06);
	--site-danger-line: #6e3a35;
	--site-success: #7cc47f;
	--site-success-bg: rgba(124, 196, 127, 0.1);
	--site-success-line: #3f6b42;
	--site-media-frame: 0 0 0 1px #45484c;
	--site-icon-filter: invert(0.88);
}

body {
	margin: 0;
	color: var(--site-text);
	background-color: var(--site-page-bg);
	display: flex;
	flex-direction: column;
	font-family: var(--site-font);
	line-height: 1.5;
	min-height: 100vh;
}

/* The page content grows so the footer sits at the bottom of short pages */
body > .container {
	flex: 1 0 auto;
}

/* Gray page backgrounds (Content Management, Login and status pages) continue down to the footer */
body:has(.cms), body:has(.status_page) {
	background-color: var(--site-surface-alt);
}

/* Visible keyboard focus (MudBlazor's base styles remove the button:focus outline) */
button:focus-visible, a:focus-visible {
	outline: 2px solid var(--site-red);
	outline-offset: 2px;
}

/* Shared buttons for the public forms and status pages */
.button_primary {
	align-items: center;
	background-color: var(--site-red-fill);
	border: 0;
	border-radius: 999px;
	box-shadow: var(--site-button-shadow);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: 500 1rem/1.2 var(--site-font);
	justify-content: center;
	min-height: 44px;
	padding: 0 28px;
	text-decoration: none;
}

	.button_primary:hover {
		background-color: var(--site-red-fill-hover);
	}

	.button_primary:disabled {
		cursor: default;
		opacity: 0.55;
	}

		.button_primary:disabled:hover {
			background-color: var(--site-red-fill);
		}

.button_block {
	width: 100%;
}

.button_secondary {
	align-items: center;
	border: 1px solid var(--site-red);
	border-radius: 999px;
	color: var(--site-red);
	display: inline-flex;
	font-weight: 500;
	min-height: 40px;
	padding: 0 20px;
	text-decoration: none;
}

	.button_secondary:hover {
		background-color: var(--site-red-tint);
		color: var(--site-red-dark);
	}

/*---------------- Header / navigation -----------------*/
.topnav {
	align-items: center;
	background-color: var(--site-surface);
	box-shadow: var(--site-header-shadow);
	box-sizing: border-box;
	display: flex;
	font-family: var(--site-font);
	gap: 4px;
	min-height: 64px;
	padding: 0 max(var(--site-gutter), calc((100% - var(--site-page)) / 2 + var(--site-gutter)));
	position: relative;
	z-index: 30;
}

	/* Top-level links and the Help Topics / Resources toggles share one look */
	.topnav > a:where(:not(.icon, #contact_button)), .topnav .nav_toggle, .topnav .nav_auth_button {
		align-items: center;
		align-self: stretch;
		background: none;
		border: 0;
		box-shadow: inset 0 -3px 0 transparent;
		box-sizing: border-box;
		color: var(--site-ink);
		cursor: pointer;
		display: inline-flex;
		font: 700 0.9rem/1.2 var(--site-font);
		letter-spacing: 0.02em;
		padding: 0 14px;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		.topnav > a:where(:not(.icon, #contact_button)):hover, .topnav .nav_toggle:hover, .topnav .nav_toggle[aria-expanded="true"], .topnav .nav_auth_button:hover {
			background-color: var(--site-surface-subtle);
			color: var(--site-red);
		}

		.topnav > a:where(:not(.icon, #contact_button)):focus-visible, .topnav .nav_toggle:focus-visible, .topnav .nav_auth_button:focus-visible {
			outline-offset: -4px;
		}

	.topnav .nav_toggle::after {
		border-bottom: 2px solid currentColor;
		border-right: 2px solid currentColor;
		content: "";
		height: 6px;
		margin: -3px 0 0 8px;
		transform: rotate(45deg);
		transition: transform 0.15s;
		width: 6px;
	}

	.topnav .nav_toggle[aria-expanded="true"]::after {
		margin-top: 3px;
		transform: rotate(-135deg);
	}

	/* The current part of the site (MainLayout sets data-section on the header) */
	header[data-section="home"] .topnav > a[href="./"],
	header[data-section="search"] .topnav > a[href="search"],
	header[data-section="manage"] .topnav > a[href="manage"],
	header[data-section="help"] .topnav .nav_dropdown_wide > .nav_toggle,
	header[data-section="resources"] .topnav .nav_dropdown:not(.nav_dropdown_wide, .theme_menu) > .nav_toggle {
		box-shadow: inset 0 -3px 0 var(--site-red);
		color: var(--site-red);
	}

	.topnav .icon {
		display: none;
	}

	/* Sign In / Sign Out sit with Contact Us at the end of the bar */
	.topnav .nav_auth {
		margin-left: auto;
	}

	.topnav form.nav_auth {
		align-self: stretch;
		display: flex;
		margin-bottom: 0;
	}

	.topnav .nav_auth ~ #contact_button {
		margin-left: 8px;
	}

	/* Help Topics / Resources dropdowns (toggled by js/app.js) */
	.topnav .nav_dropdown {
		align-self: stretch;
		display: flex;
		position: relative;
	}

	/* The Help Topics panel is positioned against the whole header so it can use the page width */
	.topnav .nav_dropdown_wide {
		position: static;
	}

	.topnav .nav_menu {
		background-color: var(--site-elevated);
		border: 1px solid var(--site-line);
		border-radius: 0 0 var(--site-radius) var(--site-radius);
		border-top: 3px solid var(--site-red);
		box-shadow: var(--site-menu-shadow);
		box-sizing: border-box;
		left: 0;
		min-width: 240px;
		padding: 8px;
		position: absolute;
		top: 100%;
		z-index: 20;
	}

		.topnav .nav_menu[hidden] {
			display: none;
		}

	.topnav .nav_mega {
		left: max(var(--site-gutter), calc((100% - var(--site-page)) / 2 + var(--site-gutter)));
		max-height: 70vh;
		overflow-y: auto;
		padding: 16px;
		right: max(var(--site-gutter), calc((100% - var(--site-page)) / 2 + var(--site-gutter)));
	}

		.topnav .nav_mega:not([hidden]) {
			display: grid;
			gap: 16px 24px;
			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		}

	.topnav .nav_group_title {
		border-bottom: 1px solid var(--site-line-soft);
		color: var(--site-red);
		display: block;
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		margin-bottom: 4px;
		overflow-wrap: anywhere;
		padding: 4px 8px 6px;
		text-transform: uppercase;
	}

	.topnav .nav_menu a {
		border-radius: 6px;
		color: var(--site-ink);
		display: block;
		font-size: 0.95rem;
		line-height: 1.35;
		overflow-wrap: anywhere;
		padding: 7px 8px;
		text-decoration: none;
	}

		.topnav .nav_menu a:hover, .topnav .nav_menu a:focus-visible {
			background-color: var(--site-red-tint);
			color: var(--site-red);
		}

		.topnav .nav_menu a:focus-visible {
			outline-offset: -2px;
		}

/* Contact Us call to action */
#contact_button {
	align-items: center;
	background-color: var(--site-red-fill);
	border-radius: 999px;
	box-shadow: var(--site-button-shadow);
	color: #fff;
	display: inline-flex;
	font: 700 0.9rem/1.2 var(--site-font);
	letter-spacing: 0.02em;
	margin-left: auto;
	min-height: 40px;
	padding: 0 24px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

	#contact_button:hover {
		background-color: var(--site-red-fill-hover);
	}

header[data-section="contact"] #contact_button {
	box-shadow: 0 0 0 3px var(--site-red-tint), 0 0 0 4px var(--site-red-fill);
}

/* Narrow screens and small tablets: Home and the menu button; the menu opens as a full-width list (js/app.js responsiveNav).
   920px leaves room for every item, including Search, the editors' Manage Content link and the appearance button. */
@media screen and (max-width: 920px) {
	.topnav {
		flex-wrap: wrap;
		gap: 0;
		min-height: 56px;
		padding: 0 4px 0 0;
	}

		.topnav > a:where(:not(.icon, #contact_button)) {
			min-height: 56px;
		}

		.topnav > a:not(:first-child), .topnav .nav_dropdown, .topnav #contact_button, .topnav > form.nav_auth {
			display: none;
		}

		.topnav a.icon {
			align-items: center;
			border-radius: 50%;
			display: flex;
			height: 48px;
			justify-content: center;
			margin-left: auto;
			order: 1;
			width: 48px;
		}

			.topnav a.icon:hover {
				background-color: var(--site-hover-strong);
			}

			.topnav a.icon img {
				display: block;
				filter: var(--site-icon-filter);
				height: 24px;
				width: 24px;
			}

		.topnav.responsive {
			padding-bottom: 12px;
		}

			.topnav.responsive > *:not(:first-child):not(.icon) {
				border-top: 1px solid var(--site-line-soft);
				flex-basis: 100%;
				order: 2;
			}

			.topnav.responsive > a:where(:not(.icon, #contact_button, :first-child)), .topnav.responsive .nav_toggle, .topnav.responsive .nav_auth_button {
				align-self: auto;
				box-shadow: none;
				display: flex;
				justify-content: space-between;
				min-height: 52px;
				padding: 0 16px;
				width: 100%;
			}

			.topnav.responsive .nav_dropdown, .topnav.responsive > form.nav_auth {
				display: block;
				margin-left: 0;
				position: static;
			}

			.topnav.responsive .nav_auth ~ #contact_button {
				margin-left: 16px;
			}

			.topnav.responsive .nav_toggle::after {
				margin-right: 4px;
			}

			.topnav.responsive .nav_menu {
				border: 0;
				border-radius: 0;
				box-shadow: none;
				max-height: none;
				min-width: 0;
				padding: 0 16px 12px 28px;
				position: static;
			}

			.topnav.responsive .nav_mega:not([hidden]) {
				display: block;
			}

			.topnav.responsive .nav_group + .nav_group {
				margin-top: 12px;
			}

			/* Tap targets at least 44px tall; long Product and Topic names wrap within the link */
			.topnav.responsive .nav_menu a {
				align-items: center;
				box-sizing: border-box;
				display: flex;
				min-height: 44px;
				padding: 10px 8px;
			}

			.topnav.responsive #contact_button {
				border-top: 0;
				display: flex;
				justify-content: center;
				margin: 12px 16px 0;
				min-height: 48px;
				order: 3;
			}

	/* Current section inside the open menu: a bar at the start of the row instead of underneath */
	header[data-section="search"] .topnav.responsive > a[href="search"],
	header[data-section="manage"] .topnav.responsive > a[href="manage"],
	header[data-section="help"] .topnav.responsive .nav_dropdown_wide > .nav_toggle,
	header[data-section="resources"] .topnav.responsive .nav_dropdown:not(.nav_dropdown_wide, .theme_menu) > .nav_toggle {
		box-shadow: inset 3px 0 0 var(--site-red);
	}
}

/* Appearance menu (Components/Layout/AppearanceMenu.razor, js/theme.js): an icon button beside Sign In / Sign Out, opened
   like the other header menus. The icon and the check mark show the saved preference (data-theme-preference on <html>). */
.topnav .theme_menu {
	margin-left: auto;
}

	.topnav .theme_menu ~ .nav_auth {
		margin-left: 0;
	}

	.topnav .theme_toggle {
		align-self: center;
		border-radius: 50%;
		height: 44px;
		justify-content: center;
		padding: 0;
		width: 44px;
	}

		.topnav .theme_toggle::after {
			content: none;
		}

	.theme_toggle .theme_icon {
		display: none;
		font-size: 1.375rem;
		height: 22px;
		width: 22px;
	}

:root:not([data-theme-preference="dark"], [data-theme-preference="system"]) .theme_toggle .theme_icon_light,
:root[data-theme-preference="dark"] .theme_toggle .theme_icon_dark,
:root[data-theme-preference="system"] .theme_toggle .theme_icon_system {
	display: block;
}

header .topnav .theme_menu > .theme_menu_list {
	border: 1px solid var(--site-line);
	border-radius: 0 0 var(--site-radius) var(--site-radius);
	border-top: 3px solid var(--site-red);
	box-shadow: var(--site-menu-shadow);
	left: auto;
	max-height: none;
	min-width: 190px;
	padding: 8px;
	position: absolute;
	right: 0;
}

.theme_choice {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 6px;
	box-sizing: border-box;
	color: var(--site-ink);
	cursor: pointer;
	display: flex;
	font: 400 0.95rem/1.35 var(--site-font);
	gap: 10px;
	min-height: 44px;
	padding: 6px 8px;
	text-align: left;
	width: 100%;
}

	.theme_choice:hover, .theme_choice:focus-visible {
		background-color: var(--site-red-tint);
		color: var(--site-red);
	}

	.theme_choice:focus-visible {
		outline-offset: -2px;
	}

	.theme_choice .mud-icon-root {
		flex: none;
		font-size: 1.25rem;
		height: 20px;
		width: 20px;
	}

.theme_choice_label {
	flex: 1 1 auto;
}

.theme_choice_check {
	color: var(--site-red);
	visibility: hidden;
}

:root:not([data-theme-preference="dark"], [data-theme-preference="system"]) [data-theme-choice="light"],
:root[data-theme-preference="dark"] [data-theme-choice="dark"],
:root[data-theme-preference="system"] [data-theme-choice="system"] {
	font-weight: 500;
}

	:root:not([data-theme-preference="dark"], [data-theme-preference="system"]) [data-theme-choice="light"] .theme_choice_check,
	:root[data-theme-preference="dark"] [data-theme-choice="dark"] .theme_choice_check,
	:root[data-theme-preference="system"] [data-theme-choice="system"] .theme_choice_check {
		visibility: visible;
	}

/* Narrow screens: the appearance button stays in the bar beside the menu button, also while the menu is open */
@media screen and (max-width: 920px) {
	.topnav .theme_menu {
		align-self: center;
		display: flex;
		order: 1;
		position: relative;
	}

		.topnav .theme_menu ~ a.icon {
			margin-left: 4px;
		}

	header .topnav.responsive > div.theme_menu:not(.icon) {
		border-top: 0;
		flex-basis: auto;
		order: 1;
	}

	header .topnav.responsive .theme_menu {
		display: flex;
		margin-left: auto;
		position: relative;
	}

	header .topnav.responsive .theme_toggle {
		height: 44px;
		justify-content: center;
		min-height: 44px;
		padding: 0;
		width: 44px;
	}
}

/*---------------- Page title band (Help pages, catalogs, Contact, Login, status pages) -----------------*/
.hero2 {
	background: linear-gradient(90deg, var(--site-hero-from), var(--site-hero-to));
	box-sizing: border-box;
	padding: 36px var(--site-gutter) 32px;
}

.hero2_h1 {
	color: #fff;
	font-family: var(--site-font);
	font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 auto;
	max-width: calc(var(--site-page) - 2 * var(--site-gutter));
	overflow-wrap: anywhere;
}

.public_hero_heading {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: calc(var(--site-page) - 2 * var(--site-gutter));
}

.public_hero_heading .hero2_h1 {
	flex: 1 1 320px;
	margin: 0;
	min-width: 0;
}

.article_hero_heading {
	max-width: calc(var(--site-read) - 2 * var(--site-gutter));
}

.public_edit_button {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 4px;
	box-sizing: border-box;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.9rem;
	font-weight: 500;
	gap: 6px;
	min-height: 38px;
	padding: 7px 12px;
	text-decoration: none;
}

.public_edit_button:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	text-decoration: none;
}

.public_edit_button:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Section content that sits directly in the page shares one column width and gutter */
.page_body, .help_breadcrumb, .help_description, .help_resources, .resource_catalog, #faqs_container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--site-page);
	padding-left: var(--site-gutter);
	padding-right: var(--site-gutter);
}

.page_body {
	margin-bottom: 56px;
	margin-top: 32px;
}

/*---------------- Home page -----------------*/
#hero {
	background: linear-gradient(135deg, var(--site-hero-from) 0%, var(--site-hero-to) 100%);
	box-sizing: border-box;
	color: #fff;
	padding: clamp(48px, 8vw, 96px) var(--site-gutter);
	text-align: center;
}

	#hero h1 {
		color: #fff;
		font-family: var(--site-font);
		font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);
		font-weight: 700;
		line-height: 1.1;
		margin: 0 auto;
		max-width: 900px;
	}

#ts_header {
	color: #fff;
	font-family: var(--site-font);
	font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
	font-weight: 300;
	line-height: 1.5;
	margin: 20px auto 0;
	max-width: 760px;
}

	#ts_header strong {
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: 999px;
		background-color: rgba(255, 255, 255, 0.12);
		display: inline-block;
		font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
		font-weight: 500;
		letter-spacing: 0.03em;
		line-height: 1.3;
		margin-top: 16px;
		padding: 4px 28px;
	}

.home_section {
	padding: clamp(40px, 6vw, 64px) var(--site-gutter);
}

	.home_section h2 {
		color: var(--site-red);
		font-family: var(--site-font);
		font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem);
		font-weight: 500;
		line-height: 1.2;
		margin: 0 0 28px;
		text-align: center;
	}

/* Featured Help: editor-curated cards (Components/Shared/FeaturedHelp.razor); only items the visitor may open */
.featured_help_grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	list-style: none;
	margin: 0 auto;
	max-width: var(--site-page);
	padding: 0;
}

.featured_help_card {
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius-lg);
	box-shadow: var(--site-shadow);
	box-sizing: border-box;
	display: flex;
	flex: 1 1 280px;
	flex-direction: column;
	gap: 4px;
	max-width: 360px;
	min-width: 0;
	padding: 18px 20px;
	position: relative;
	transition: border-color 0.15s, box-shadow 0.15s;
}

	.featured_help_card:hover, .featured_help_card:focus-within {
		border-color: var(--site-red);
		box-shadow: var(--site-shadow-hover);
	}

.featured_help_meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
}

.featured_help_type, .featured_help_flag {
	align-items: center;
	border: 1px solid;
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 500;
	gap: 4px;
	line-height: 1.5;
	padding: 1px 10px 1px 7px;
	white-space: nowrap;
}

	.featured_help_type .mud-icon-root, .featured_help_flag .mud-icon-root {
		font-size: 1rem;
		height: 16px;
		width: 16px;
	}

.featured_help_type {
	background-color: var(--site-red-tint);
	border-color: transparent;
	color: var(--site-red);
}

/* Matches the Search "Login Required" label */
.featured_help_flag {
	border-color: var(--site-ink);
	color: var(--site-ink);
}

/* Only inside the homepage preview */
.featured_help_unpublished {
	background-color: var(--site-warning-bg);
	border-color: var(--site-warning-line);
	color: var(--site-warning-text);
}

.featured_help_title {
	font-family: var(--site-font);
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.35;
	margin: 8px 0 0;
	overflow-wrap: anywhere;
	text-align: left;
}

	.featured_help_title a {
		color: var(--site-link);
		text-decoration: none;
	}

		/* The whole card follows the title link */
		.featured_help_title a::after {
			content: "";
			inset: 0;
			position: absolute;
		}

		.featured_help_title a:hover {
			text-decoration: underline;
		}

.featured_help_context {
	color: var(--site-muted);
	font-size: 0.875rem;
	margin: 0;
	overflow-wrap: anywhere;
}

.featured_help_description {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--site-text-secondary);
	display: -webkit-box;
	font-size: 0.95rem;
	line-clamp: 3;
	margin: 4px 0 0;
	overflow: hidden;
	overflow-wrap: anywhere;
}

#reach_us {
	background-color: var(--site-surface-alt);
}

.icon_container {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	list-style: none;
	margin: 0 auto;
	max-width: var(--site-page);
	padding: 0;
}

.support_icon {
	align-items: center;
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius-lg);
	box-shadow: var(--site-shadow);
	box-sizing: border-box;
	display: flex;
	gap: 16px;
	max-width: 100%;
	padding: 16px 28px 16px 20px;
}

	.support_icon img {
		flex: none;
		height: 56px;
		width: 56px;
	}

.support_icon_text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.support_icon_label {
	color: var(--site-muted);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.support_icon a {
	color: var(--site-link);
	font-size: 1.2rem;
	font-weight: 500;
	overflow-wrap: anywhere;
	text-decoration: none;
}

	.support_icon a:hover {
		text-decoration: underline;
	}

.training_options {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	list-style: none;
	margin: 0 auto;
	max-width: 640px;
	padding: 0;
}

.t_options a {
	align-items: center;
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius-lg);
	box-shadow: var(--site-shadow);
	color: var(--site-ink);
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	box-sizing: border-box;
	padding: 28px 16px 24px;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

	.t_options a:hover {
		border-color: var(--site-red);
		box-shadow: var(--site-shadow-hover);
	}

	.t_options img {
		filter: var(--site-icon-filter);
		height: 96px;
		width: 96px;
	}

.t_options_label {
	color: var(--site-red);
	font-size: 1.2rem;
	font-weight: 500;
}

/*---------------- Help Product / Topic pages -----------------*/
.help_breadcrumb {
	color: var(--site-muted);
	font-size: 0.875rem;
	margin-top: 20px;
	overflow-wrap: anywhere;
}

	.help_breadcrumb a {
		color: var(--site-link);
		text-decoration: none;
	}

		.help_breadcrumb a:hover {
			text-decoration: underline;
		}

.help_description {
	color: var(--site-text);
	font-size: 1.05rem;
	margin-bottom: 0;
	margin-top: 8px;
}

.public_content_lede {
	color: var(--site-text-secondary);
	font-size: 1.15rem;
	line-height: 1.6;
	margin-bottom: 32px;
	margin-top: 14px;
	max-width: var(--site-read);
}

/* Topics list on a Product page (a two-column table: Topic link, description) */
main > table {
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
	border-spacing: 0;
	margin: 32px auto 0;
	width: min(calc(100% - 2 * var(--site-gutter)), calc(var(--site-page) - 2 * var(--site-gutter)));
}

	main > table > caption {
		color: var(--site-ink);
		font-size: 1.375rem;
		font-weight: 500;
		line-height: 1.3;
		padding-bottom: 12px;
		text-align: left;
	}

	main > table td {
		padding: 14px 16px;
		vertical-align: top;
	}

	main > table tr + tr td {
		border-top: 1px solid var(--site-line-soft);
	}

	main > table td:first-child {
		font-weight: 500;
		width: 32%;
	}

	main > table td:last-child {
		color: var(--site-text-secondary);
	}

	main > table td a {
		color: var(--site-link);
		display: block;
		overflow-wrap: anywhere;
		text-decoration: none;
	}

		main > table td a:hover {
			text-decoration: underline;
		}

	main > table tr:hover td {
		background-color: var(--site-surface-subtle);
	}

/* Articles, User Guides and Training Videos sections */
.help_resources {
	margin-top: 32px;
}

.help_resource_section + .help_resource_section {
	margin-top: 32px;
}

.help_resource_heading, #faqs_container > h2 {
	color: var(--site-ink);
	font-family: var(--site-font);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 12px;
	text-align: left;
}

.help_resource {
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
	box-sizing: border-box;
	margin-bottom: 12px;
	padding: 16px 20px;
	transition: border-color 0.15s;
}

	.help_resource:hover {
		border-color: var(--site-border-hover);
	}

.help_guide, .help_article {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
}

.help_resource_text {
	flex: 1 1 240px;
	min-width: 0;
}

.help_resource_title {
	color: var(--site-ink);
	font-family: var(--site-font);
	font-size: 1.075rem;
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
	overflow-wrap: anywhere;
	text-align: left;
}

.help_resource_title_row {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.public_item_edit_action {
	align-items: center;
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--site-muted);
	display: inline-flex;
	flex: 0 0 38px;
	height: 38px;
	justify-content: center;
	text-decoration: none;
}

.public_item_edit_action:hover,
.public_item_edit_action:focus-visible {
	background: var(--site-red-wash);
	color: var(--site-red);
}

.public_item_edit_action:focus-visible {
	outline: 2px solid var(--site-red);
	outline-offset: 2px;
}

.faq_question_row {
	align-items: center;
	border-top: 1px solid var(--site-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
}

.faq_edit_action {
	flex: 0 0 auto;
	margin: 0 8px 0 0;
}

.help_resource_description {
	color: var(--site-text-secondary);
	font-size: 0.95rem;
	margin: 4px 0 0;
	overflow-wrap: anywhere;
}

.help_guide_link, .help_article_link {
	align-items: center;
	border: 1px solid var(--site-red);
	border-radius: 999px;
	color: var(--site-red);
	display: inline-flex;
	font-weight: 500;
	min-height: 38px;
	padding: 0 18px;
	text-decoration: none;
	white-space: nowrap;
}

	.help_guide_link:hover, .help_article_link:hover {
		background-color: var(--site-red-fill);
		color: #fff;
	}

/* A User Guide's two actions: View Guide (opens the PDF) and Download PDF (the secondary action) */
.help_guide_actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.help_guide_download {
	align-items: center;
	color: var(--site-ink);
	display: inline-flex;
	font-weight: 500;
	gap: 6px;
	min-height: 38px;
	padding: 0 0 0 12px;
	text-decoration: none;
	white-space: nowrap;
}

	.help_guide_download:hover {
		border-color: var(--site-red);
		color: var(--site-red);
	}

/* Training Videos on Help pages: a responsive grid of video cards */
.help_resource_section_videos {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

	.help_resource_section_videos > .help_resource_heading {
		grid-column: 1 / -1;
		margin-bottom: 0;
	}

	.help_resource_section_videos .help_resource {
		margin-bottom: 0;
		min-width: 0;
	}

.help_video_player {
	aspect-ratio: 16 / 9;
	background-color: #000;
	border-radius: 6px;
	box-sizing: border-box;
	display: block;
	height: auto;
	margin-top: 12px;
	width: 100%;
}

/* A Training Video card is a column: title and full description at the top, the player at the bottom. Grid rows stretch
   their cards to one height, so the players line up across a row; a card alone in its row (phones) is only as tall as its
   content. The item before the player keeps the usual 12px gap. */
.help_video {
	display: flex;
	flex-direction: column;
}

	.help_video > .help_video_player {
		margin-top: auto;
	}

	.help_video > :has(+ .help_video_player) {
		margin-bottom: 12px;
	}

.help_resources_message, .resource_catalog_message {
	margin: 24px 0;
}

/*---------------- Article detail -----------------*/
/* Reading width for the title, breadcrumb, summary and body */
main:has(> .article_body) .hero2_h1 {
	max-width: calc(var(--site-read) - 2 * var(--site-gutter));
}

main:has(> .article_body) > .help_breadcrumb, .article_body {
	max-width: var(--site-read);
}

.article_hero_title {
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
}

/* Sanitized Article body (RichTextSanitizer formats only) */
.article_body {
	box-sizing: border-box;
	color: var(--site-ink);
	font-family: var(--site-font);
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 24px auto 56px;
	overflow-wrap: anywhere;
	padding: 0 var(--site-gutter);
}

	.article_body h2 {
		color: var(--site-ink);
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.3;
		margin: 1.6em 0 0.5em;
		padding: 0;
		text-align: left;
	}

	.article_body h3 {
		color: var(--site-ink);
		font-size: 1.2rem;
		font-weight: 500;
		line-height: 1.35;
		margin: 1.4em 0 0.4em;
		padding: 0;
		text-align: left;
	}

	.article_body p {
		margin: 0 0 1em;
		padding: 0;
	}

	.article_body ul, .article_body ol {
		margin: 0 0 1em;
		padding-left: 1.75em;
	}

	.article_body li {
		padding-bottom: 0.35em;
	}

	.article_body blockquote {
		background-color: var(--site-panel);
		border-left: 4px solid var(--site-red);
		border-radius: 0 6px 6px 0;
		color: var(--site-text-secondary);
		margin: 0 0 1em;
		padding: 0.6em 1em;
	}

	.article_body a {
		color: var(--site-link);
		text-decoration: underline;
	}

	/* Screenshots scale down to fit; never wider than the article text */
	.article_body img {
		background-color: var(--site-media-bg);
		border: 1px solid var(--site-line);
		border-radius: 6px;
		box-sizing: border-box;
		display: block;
		height: auto;
		margin: 1.25em 0;
		max-width: 100%;
	}

	.article_body > :first-child {
		margin-top: 0;
	}

	/* Nested lists (from editor indentation) number like the editor: 1. / a. / i. */
	.article_body li > ul, .article_body li > ol {
		margin: 0.35em 0 0;
	}

	.article_body ol ol {
		list-style-type: lower-alpha;
	}

	.article_body ol ol ol {
		list-style-type: lower-roman;
	}

	/* Editor alignment and indentation (exact sanitizer-allowed classes only) */
	.article_body .ql-align-center {
		text-align: center;
	}

	.article_body .ql-align-right {
		text-align: right;
	}

	.article_body .ql-align-center img {
		margin-left: auto;
		margin-right: auto;
	}

	.article_body .ql-align-right img {
		margin-left: auto;
	}

	.article_body .ql-indent-1 {
		padding-left: 2em;
	}

	.article_body .ql-indent-2 {
		padding-left: 4em;
	}

	.article_body .ql-indent-3 {
		padding-left: 6em;
	}

	.article_body .ql-indent-4 {
		padding-left: 8em;
	}

	.article_body .ql-indent-5 {
		padding-left: 10em;
	}

	.article_body .ql-indent-6 {
		padding-left: 12em;
	}

	.article_body .ql-indent-7 {
		padding-left: 14em;
	}

	.article_body .ql-indent-8 {
		padding-left: 16em;
	}

/*---------------- Catalogs: Articles, User Guides, Training Videos (Product -> Topic -> items) -----------------*/
.resource_catalog {
	margin-bottom: 56px;
	margin-top: 8px;
}

.catalog_signin_callout {
	align-items: center;
	background-color: var(--site-panel);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	padding-bottom: 20px;
	padding-top: 20px;
}

.catalog_signin_callout h2 {
	color: var(--site-ink);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 4px;
}

.catalog_signin_callout p {
	margin: 0;
	overflow-wrap: anywhere;
}

.catalog_signin_callout_only {
	margin-top: 32px;
}

.resource_catalog_product {
	margin-top: 32px;
}

.resource_catalog_product_heading {
	border-bottom: 2px solid var(--site-red);
	color: var(--site-ink);
	font-family: var(--site-font);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 16px;
	padding-bottom: 8px;
	text-align: left;
}

.resource_catalog_group {
	margin-bottom: 24px;
}

.resource_catalog_topic_heading {
	color: var(--site-text-secondary);
	font-family: var(--site-font);
	font-size: 1.1rem;
	font-weight: 500;
	margin: 0 0 10px;
	padding: 0;
	text-align: left;
}

.resource_catalog_videos {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

	.resource_catalog_videos .help_resource {
		margin-bottom: 0;
		min-width: 0;
	}

/*---------------- FAQs (aggregate page and Help pages) -----------------*/
#faqs_container {
	margin-bottom: 56px;
	margin-top: 32px;
}

	#faqs_container > p {
		margin: 0;
	}

.question {
	background-color: var(--site-page-bg);
	border: 0;
	color: var(--site-ink);
	cursor: pointer;
	display: block;
	flex: 1 1 220px;
	font: 500 1rem/1.4 var(--site-font);
	padding: 16px 44px 16px 4px;
	position: relative;
	text-align: left;
	transition: color 0.15s, background-color 0.15s;
	min-width: 0;
	width: auto;
}

	.question::after {
		border-bottom: 2px solid currentColor;
		border-right: 2px solid currentColor;
		content: "";
		height: 8px;
		position: absolute;
		right: 16px;
		top: calc(50% - 7px);
		transform: rotate(45deg);
		transition: transform 0.2s;
		width: 8px;
	}

	.question:hover {
		background-color: var(--site-surface-subtle);
		color: var(--site-red);
	}

	.question:focus-visible {
		outline-offset: -2px;
	}

	.question.active {
		color: var(--site-red);
	}

		.question.active::after {
			top: calc(50% - 2px);
			transform: rotate(-135deg);
		}

.answer {
	background-color: var(--site-page-bg);
	color: var(--site-text);
	line-height: 1.6;
	max-height: 0;
	overflow: hidden;
	padding: 0 4px;
	transition: max-height 0.2s ease-out;
}

	#faqs_container .answer:last-child {
		border-bottom: 1px solid var(--site-line);
	}

	/* Answer headings are sized for an answer rather than as page headings */
	.answer h2 {
		color: var(--site-ink);
		font-size: 1.25rem;
		font-weight: 500;
		margin: 0 0 0.5em;
		text-align: left;
	}

	.answer h3 {
		color: var(--site-ink);
		font-size: 1.1rem;
		font-weight: 500;
		margin: 0 0 0.4em;
		padding-left: 0;
	}

	.answer p {
		margin: 0 0 0.75em;
	}

		.answer p:last-child {
			margin-bottom: 0;
		}

	.answer blockquote {
		border-left: 4px solid var(--site-red);
		color: var(--site-text-secondary);
		margin: 0 0 0.75em;
		padding: 0.25em 0 0.25em 1em;
	}

	/* Space above and below the answer content (the collapsible .answer itself has no vertical padding) */
	.answer > :first-child {
		padding-top: 4px;
	}

	.answer > :last-child {
		padding-bottom: 20px;
	}

/*---------------- Search -----------------*/
/* Left-aligned with the page title; results stay at a readable width */
.search_page > * {
	max-width: 868px;
}

.search_label {
	color: var(--site-ink);
	display: block;
	font-weight: 500;
	margin-bottom: 8px;
}

.search_box {
	display: flex;
	gap: 8px;
}

	.search_box input {
		background-color: var(--site-surface);
		border: 1px solid var(--site-border-input);
		border-radius: var(--site-radius);
		box-sizing: border-box;
		color: var(--site-ink);
		flex: 1;
		font: 1.05rem/1.4 var(--site-font);
		min-height: 48px;
		min-width: 0;
		padding: 10px 14px;
	}

		.search_box input:focus {
			border-color: var(--site-red);
			outline: 2px solid var(--site-focus-soft);
			outline-offset: 0;
		}

.search_button {
	flex: none;
	gap: 6px;
	min-height: 48px;
	padding: 0 22px;
}

.search_status {
	color: var(--site-muted);
	margin: 20px 0 12px;
}

	.search_status p {
		margin: 0 0 4px;
	}

.search_count {
	color: var(--site-ink);
	font-size: 1.1rem;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.search_message_error {
	color: var(--site-error-text);
}

.search_login_hint {
	font-size: 0.9rem;
}

.search_results {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The whole card follows the title link (the link's ::after covers the card) */
.search_result {
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
	padding: 14px 18px;
	position: relative;
	transition: border-color 0.15s;
}

	.search_result:hover, .search_result:focus-within {
		border-color: var(--site-red);
	}

.search_result_meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
}

.search_result_type, .search_result_access {
	align-items: center;
	border: 1px solid;
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 500;
	gap: 4px;
	line-height: 1.5;
	padding: 1px 10px 1px 7px;
}

	.search_result_type .mud-icon-root, .search_result_access .mud-icon-root {
		font-size: 1rem;
		height: 16px;
		width: 16px;
	}

.search_result_type {
	background-color: var(--site-surface-subtle);
	border-color: var(--site-border-chip);
	color: var(--site-text-secondary);
}

/* Matches the CMS "Login Required" access chip */
.search_result_access {
	border-color: var(--site-ink);
	color: var(--site-ink);
}

.search_result_title {
	font-family: var(--site-font);
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.35;
	margin: 8px 0 2px;
	overflow-wrap: anywhere;
}

	.search_result_title a {
		color: var(--site-link);
		text-decoration: none;
	}

		.search_result_title a::after {
			content: "";
			inset: 0;
			position: absolute;
		}

		.search_result_title a:hover {
			text-decoration: underline;
		}

.search_result_context {
	color: var(--site-muted);
	font-size: 0.875rem;
	margin: 0;
	overflow-wrap: anywhere;
}

.search_result_excerpt {
	color: var(--site-text-secondary);
	font-size: 0.95rem;
	margin: 6px 0 0;
	overflow-wrap: anywhere;
}

/*---------------- Related Help -----------------*/
/* Editor-curated related items (Components/Shared/RelatedHelp.razor): a list after a Product, Topic or Article page's
   content, and a compact block inside a FAQ answer or on a Resource card */
.related_help_page {
	box-sizing: border-box;
	margin: 40px auto 48px;
	max-width: var(--site-page);
	padding-left: var(--site-gutter);
	padding-right: var(--site-gutter);
}

main:has(> .article_body) > .related_help_page {
	max-width: var(--site-read);
}

.related_help_page .related_help_heading {
	color: var(--site-ink);
	font-family: var(--site-font);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 12px;
	text-align: left;
}

.related_help_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.related_help_page .related_help_list {
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
}

.related_help_item {
	align-items: baseline;
	display: flex;
	gap: 4px 12px;
}

.related_help_page .related_help_item {
	padding: 12px 16px;
}

	.related_help_page .related_help_item + .related_help_item {
		border-top: 1px solid var(--site-line);
	}

	/* Titles line up beside a fixed-width type label */
	.related_help_page .related_help_type {
		box-sizing: border-box;
		min-width: 8.75em;
		text-align: center;
	}

.related_help_type {
	background-color: var(--site-surface-subtle);
	border: 1px solid var(--site-border-chip);
	border-radius: 999px;
	color: var(--site-text-secondary);
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	padding: 1px 10px;
	white-space: nowrap;
}

.related_help_text {
	align-items: baseline;
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 2px 8px;
	min-width: 0;
}

.related_help_link {
	color: var(--site-link);
	font-weight: 500;
	overflow-wrap: anywhere;
	text-decoration: none;
}

	.related_help_link:hover {
		text-decoration: underline;
	}

.related_help_context {
	color: var(--site-muted);
	flex-basis: 100%;
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

/* Matches the Search "Login Required" label */
.related_help_flag {
	align-items: center;
	border: 1px solid var(--site-ink);
	border-radius: 999px;
	color: var(--site-ink);
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 500;
	gap: 4px;
	line-height: 1.5;
	padding: 0 8px;
	white-space: nowrap;
}

	.related_help_flag .mud-icon-root {
		font-size: 0.9rem;
		height: 14px;
		width: 14px;
	}

/* Only inside an editor preview */
.related_help_unpublished {
	background-color: var(--site-warning-bg);
	border-color: var(--site-warning-line);
	color: var(--site-warning-text);
}

.related_help_compact {
	border-top: 1px solid var(--site-line);
	margin-top: 12px;
	padding-top: 10px;
}

	.related_help_compact .related_help_heading {
		color: var(--site-muted);
		font-size: 0.8rem;
		font-weight: 500;
		letter-spacing: 0.04em;
		margin: 0 0 4px;
		text-transform: uppercase;
	}

	.related_help_compact .related_help_item {
		font-size: 0.95rem;
		padding: 4px 0;
	}

/* A User Guide card lays its text and View Guide link side by side; the related block takes its own row */
.help_guide > .related_help_compact {
	flex-basis: 100%;
	margin-top: 0;
}

.answer .related_help_compact {
	margin: 12px 0 16px;
}

@media screen and (max-width: 600px) {
	.related_help_item {
		flex-direction: column;
		gap: 2px;
	}

	.related_help_page .related_help_item {
		padding: 10px 14px;
	}

	.related_help_page .related_help_type {
		min-width: 0;
	}
}

/* The FAQ or Resource a link points at (#faq-{id}, #resource-{id}; js/app.js supportDeepLink) */
.help_resource, .question {
	scroll-margin-top: 16px;
}

.help_resource.deep_link_target {
	border-color: var(--site-red);
	box-shadow: 0 0 0 3px var(--site-red-tint);
}

@media screen and (max-width: 420px) {
	.search_button {
		padding: 0 16px;
	}

	.search_result {
		padding: 12px 14px;
	}
}

/*---------------- Editor preview banner -----------------*/
.preview_banner {
	background-color: var(--site-warning-bg);
	border-bottom: 1px solid var(--site-warning-line);
	color: var(--site-ink);
	font-size: 0.9rem;
}

.preview_banner_inner {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--site-page);
	padding: 12px var(--site-gutter);
}

.preview_banner_text {
	flex: 1 1 320px;
	min-width: 0;
}

	.preview_banner_text p {
		margin: 0;
	}

.preview_banner_title {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.preview_banner_kind {
	color: var(--site-muted);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

	.preview_banner_kind::before {
		content: "\00B7";
		padding-right: 6px;
	}

.preview_banner_note {
	color: var(--site-text-secondary);
	margin-top: 2px !important;
}

.preview_banner_states {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

	.preview_banner_states li {
		align-items: center;
		display: inline-flex;
		gap: 4px;
		overflow-wrap: anywhere;
	}

.preview_banner .mud-icon-root {
	flex: none;
	font-size: 1.1rem;
	height: 18px;
	width: 18px;
}

.preview_banner_back {
	background-color: var(--site-surface);
	flex: none;
	gap: 6px;
}

/*---------------- Contact form -----------------*/
.contact_layout {
	align-items: start;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr);
}

@media screen and (min-width: 900px) {
	.contact_layout {
		grid-template-columns: 300px minmax(0, 760px);
	}
}

.contact_info {
	background-color: var(--site-panel);
	border: 1px solid var(--site-line-soft);
	border-radius: var(--site-radius-lg);
	padding: 24px;
}

	.contact_info h2, .contact_card h2 {
		color: var(--site-ink);
		font-family: var(--site-font);
		font-size: 1.25rem;
		font-weight: 500;
		margin: 0 0 8px;
	}

	.contact_info p {
		margin: 0;
	}

.contact_info_item {
	display: flex;
	flex-direction: column;
	margin-top: 16px !important;
}

	.contact_info_item strong {
		color: var(--site-red);
		font-size: 1.5rem;
		font-weight: 500;
	}

	.contact_info_item a {
		color: var(--site-link);
		font-weight: 500;
		overflow-wrap: anywhere;
	}

.contact_info_label {
	color: var(--site-muted);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.contact_card {
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius-lg);
	box-shadow: var(--site-shadow);
	box-sizing: border-box;
	min-width: 0;
	padding: 24px;
}

	.contact_card h2 {
		margin-bottom: 16px;
	}

/* Shared public form fields (Contact, Login) */
.form_grid {
	display: grid;
	gap: 16px 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form_field_full {
	grid-column: 1 / -1;
}

.form_field label {
	color: var(--site-ink);
	display: block;
	font-size: 0.925rem;
	font-weight: 500;
	margin-bottom: 6px;
}

.form_optional {
	color: var(--site-muted);
	font-weight: 400;
}

.form_field input, .form_field select, .form_field textarea {
	background-color: var(--site-surface);
	border: 1px solid var(--site-border-input);
	border-radius: 6px;
	box-sizing: border-box;
	color: var(--site-ink);
	font: 1rem/1.4 var(--site-font);
	min-height: 44px;
	padding: 10px 12px;
	width: 100%;
}

.form_field textarea {
	min-height: 160px;
	resize: vertical;
}

	.form_field input:focus, .form_field select:focus, .form_field textarea:focus {
		border-color: var(--site-red);
		outline: 2px solid var(--site-focus-soft);
		outline-offset: 0;
	}

	/* Blazor marks fields that failed validation */
	.form_field .invalid {
		border-color: var(--site-error);
	}

.form_field .validation-message, .text-danger {
	color: var(--site-error);
	font-size: 0.85rem;
	margin-top: 4px;
}

.form_alert {
	background-color: var(--site-error-bg);
	border: 1px solid var(--site-error-line);
	border-radius: 6px;
	color: var(--site-error-text);
	margin-bottom: 16px;
	padding: 10px 14px;
}

.form_actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-top: 24px;
}

/*---------------- Login, Access Denied, Error -----------------*/
.status_page {
	background-color: var(--site-surface-alt);
	padding: 40px var(--site-gutter) 64px;
}

.status_card {
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius-lg);
	box-shadow: var(--site-shadow);
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 440px;
	padding: 28px 24px;
}

	.status_card p {
		margin: 0 0 16px;
	}

		.status_card p:last-child {
			margin-bottom: 0;
		}

.status_detail {
	color: var(--site-muted);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

/* Not Found: the status code as a small label, then the search box and the way home */
.not_found_code {
	color: var(--site-red);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.not_found_search {
	margin: 0 0 20px;
}

.auth_intro {
	color: var(--site-text-secondary);
	margin-bottom: 20px !important;
}

.auth_form .form_field + .form_field {
	margin-top: 16px;
}

.auth_form .button_primary {
	margin-top: 24px;
}

@media screen and (max-width: 600px) {
	.form_grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.contact_card, .contact_info {
		padding: 20px 16px;
	}

	.status_page {
		padding-top: 24px;
	}

	.status_card {
		padding: 24px 16px;
	}

	main > table td {
		display: block;
		width: auto !important;
	}

		main > table td:first-child {
			padding-bottom: 2px;
		}

		main > table td:last-child {
			border-top: 0 !important;
			padding-top: 0;
		}

		main > table td:empty {
			display: none;
		}

	.help_resource {
		padding: 14px 16px;
	}
}

/* reCAPTCHA sizes its checkbox frame with width/height attributes (304 x 78). MudBlazor's global "iframe { height: 100% }"
   overrides the height, and against the widget's auto-height wrapper that becomes the browser's default 150px: the frame's
   own white page then shows below the widget (visible on Dark surfaces). */
.g-recaptcha iframe {
	height: 78px;
}

/* reCAPTCHA's widget is 304px wide; scale it down to fit very narrow phones */
@media screen and (max-width: 380px) {
	.g-recaptcha {
		transform: scale(0.82);
		transform-origin: left top;
	}
}

/*---------------- Footer, Top button, Blazor error bar -----------------*/
footer {
	background-color: var(--site-surface-alt);
	border-top: 1px solid var(--site-line);
	color: var(--site-text-secondary);
	font-size: 0.875rem;
}

.site_footer {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--site-page);
	padding: 20px var(--site-gutter) 24px;
}

	.site_footer p {
		margin: 0;
	}

.site_footer_phone {
	color: var(--site-ink);
	font-weight: 500;
	white-space: nowrap;
}

#scrollTopBtn {
	background-color: var(--site-fab);
	border: none;
	border-radius: 50%;
	bottom: 20px;
	box-shadow: var(--site-fab-shadow);
	color: #fff;
	cursor: pointer;
	display: none;
	font: 500 0.85rem/1 var(--site-font);
	height: 48px;
	position: fixed;
	right: 20px;
	width: 48px;
	z-index: 99;
}

	#scrollTopBtn:hover {
		background-color: var(--site-red-fill);
	}

/* The floating Top button must not sit over CMS dialogs or a CMS form's action bar */
body:has(.mud-dialog-container) #scrollTopBtn, body:has(.cms_form_actions_sticky) #scrollTopBtn {
	display: none !important;
}

.manage_loading {
	color: var(--site-muted);
	font-family: var(--site-font);
	padding: 24px;
	text-align: center;
}

#blazor-error-ui {
	background: var(--site-warning-bg);
	border-top: 1px solid var(--site-warning-strong);
	bottom: 0;
	box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	display: none;
	font-family: var(--site-font);
	left: 0;
	padding: 12px 48px 12px 16px;
	position: fixed;
	width: 100%;
	z-index: 2000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 16px;
		top: 10px;
	}

/*---------------- CMS management styles (MudBlazor) -----------------*/
.cms {
	background-color: var(--site-surface-alt);
	color: var(--site-ink);
	font-family: var(--site-font);
	padding-bottom: 48px;
}

/* Section bar: tells the editor they are in Content Management, and where */
.cms_bar {
	background-color: var(--site-surface);
	border-bottom: 1px solid var(--site-line);
}

.cms_bar_inner {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}

.cms_bar_title {
	align-items: center;
	color: var(--site-red);
	display: inline-flex;
	font-weight: 500;
	gap: 8px;
	min-height: 48px;
	text-decoration: none;
}

	.cms_bar_title:hover {
		text-decoration: underline;
	}

.cms_bar_links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
}

.cms_bar_link {
	align-items: center;
	box-shadow: inset 0 -3px 0 transparent;
	color: var(--site-ink);
	display: inline-flex;
	font-size: 0.95rem;
	gap: 6px;
	min-height: 48px;
	padding: 0 12px;
	text-decoration: none;
}

	.cms_bar_link .mud-icon-root {
		color: var(--site-muted);
	}

	.cms_bar_link:hover {
		background-color: var(--site-surface-subtle);
		color: var(--site-red);
	}

	.cms_bar_link_active, .cms_bar_link_active:hover {
		box-shadow: inset 0 -3px 0 var(--site-red);
		color: var(--site-red);
		font-weight: 500;
	}

		.cms_bar_link_active .mud-icon-root {
			color: var(--site-red);
		}

	.cms_bar_title:focus-visible, .cms_bar_link:focus-visible {
		outline-offset: -2px;
	}

.cms_bar_tools .mud-button-root {
	box-shadow: inset 0 -3px 0 transparent;
	color: var(--site-ink);
	font-size: 0.95rem;
	min-height: 48px;
	padding: 0 12px;
}

	.cms_bar_tools .mud-button-root:hover {
		background-color: var(--site-surface-subtle);
		color: var(--site-red);
	}

	.cms_bar_tools_active .mud-button-root, .cms_bar_tools_active .mud-button-root:hover {
		box-shadow: inset 0 -3px 0 var(--site-red);
		color: var(--site-red);
		font-weight: 500;
	}

.cms_tool_item_active {
	color: var(--site-red);
	font-weight: 500;
}

.cms_content {
	padding-top: 24px;
}

/* Page widths: simple forms and the delete page stay compact; the Article editor uses the full content width */
.cms_page_narrow {
	max-width: 760px;
}

.cms_page_medium {
	max-width: 1040px;
}

.cms_page_header {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	margin-bottom: 20px;
}

.cms_page_heading {
	min-width: 0;
}

	.cms_page_heading h1 {
		overflow-wrap: anywhere;
	}

.cms_back_link {
	align-items: center;
	display: inline-flex;
	gap: 4px;
	margin-bottom: 4px;
}

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

.cms_preview_action {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

@media screen and (max-width: 600px) {
	.cms_preview_action {
		align-items: stretch;
		width: 100%;
	}
}

/* Lists */
.cms_table .mud-toolbar {
	border-bottom: 1px solid var(--site-line-soft);
	flex-wrap: wrap;
	height: auto;
	padding: 12px 16px;
}

.cms_filters {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
}

.cms_filter_search {
	flex: 2 1 260px;
	min-width: 0;
}

.cms_filter_select {
	flex: 1 1 160px;
	max-width: 260px;
	min-width: 0;
}

.cms_table .mud-table-head .mud-table-cell {
	background-color: var(--site-surface-subtle);
	color: var(--site-text-secondary);
	font-size: 0.8rem;
	font-weight: 500;
	white-space: nowrap;
}

.cms_table .mud-table-body .mud-table-cell {
	vertical-align: middle;
}

/* Even column spacing (MudBlazor's dense cells pad 16px before and 24px after) */
.cms_table.mud-table-dense .mud-table-row .mud-table-cell {
	padding-inline: 12px;
}

	.cms_table.mud-table-dense .mud-table-row .mud-table-cell:first-child {
		padding-inline-start: 16px;
	}

	.cms_table.mud-table-dense .mud-table-row .mud-table-cell:last-child {
		padding-inline-end: 16px;
	}

.cms_table .cms_cell_title {
	font-weight: 500;
	min-width: 200px;
	overflow-wrap: anywhere;
}

.cms_reorder_message {
	margin-bottom: 8px;
}

.cms_table th.cms_order_heading {
	text-align: center;
}

.cms_order_controls {
	align-items: center;
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 2px;
	min-width: 100px;
}

.cms_order_controls > * {
	flex-shrink: 0;
}

.cms_table .cms_cell_sort {
	text-align: center;
}

.cms_order_drop {
	border-radius: 4px;
	flex: 0 0 32px;
	min-height: 32px;
	width: 32px;
}

.cms_reorder_handle {
	align-items: center;
	color: var(--site-muted);
	cursor: grab;
	display: flex;
	height: 32px;
	justify-content: center;
	width: 32px;
}

.cms_reorder_handle[aria-disabled="true"] {
	cursor: default;
	opacity: 0.45;
}

.cms_reorder_target {
	background: var(--site-red-wash);
	outline: 1px dashed var(--site-red);
}

.cms_reorder_blocked {
	opacity: 0.45;
}

.cms_table .cms_cell_sort, .cms_table .cms_cell_updated, .cms_table .cms_cell_files {
	color: var(--site-muted);
	font-size: 0.85rem;
}

.cms_table .cms_cell_updated, .cms_table .cms_cell_actions {
	white-space: nowrap;
}

.cms_table .cms_cell_actions {
	width: 1%;
}

.cms_table .cms_cell_files {
	min-width: 140px;
}

/* A wide list scrolls inside its own frame rather than widening the page (positioned, so the visually hidden
   "Actions" header text stays inside the frame too) */
.cms_table .mud-table-container {
	overflow-x: auto;
	position: relative;
}

@media (max-width: 1279px) {
	.cms_table .mud-table-head .mud-table-cell {
		white-space: normal;
	}

	.cms_table.mud-table-dense .mud-table-row .mud-table-cell {
		padding-inline: 8px;
	}

		.cms_table.mud-table-dense .mud-table-row .mud-table-cell:first-child {
			padding-inline-start: 16px;
		}

	.cms_table .cms_cell_title {
		min-width: 130px;
	}

	.cms_table .cms_cell_files {
		min-width: 110px;
	}

	.cms_table .cms_cell_updated {
		min-width: 84px;
		white-space: normal;
	}
}

.cms_chip {
	margin: 0;
}

.cms_row_actions {
	display: flex;
	gap: 2px;
	justify-content: flex-end;
}

.cms_disabled_action {
	border-radius: 50%;
	display: inline-flex;
}

	.cms_disabled_action:focus-visible {
		outline: 2px solid var(--site-red);
		outline-offset: 2px;
	}

.cms_sr_only {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.cms_type {
	align-items: center;
	display: inline-flex;
	gap: 4px;
}

.cms_file_name {
	overflow-wrap: anywhere;
}

/* Lists on phones and tablets (MudTable's card layout below 960px): one compact card per row.
     Title ............ Edit Delete
     Product > Topic . Type
     [Status] [Access]  Sort 0 . Updated 2026-10-08 05:20
     Files */
@media (max-width: 960px) {
	.cms_table.mud-sm-table .mud-table-root, .cms_table.mud-sm-table .mud-table-body {
		display: block;
	}

	.cms_table.mud-sm-table .mud-table-body .mud-table-row {
		align-items: center;
		border-bottom: 1px solid var(--site-line);
		column-gap: 10px;
		display: flex;
		flex-wrap: wrap;
		padding: 10px 12px 12px 16px;
		row-gap: 6px;
	}

		.cms_table.mud-sm-table .mud-table-body .mud-table-row::before, .cms_table.mud-sm-table .mud-table-body .mud-table-row::after {
			content: "";
			flex-basis: 100%;
			height: 0;
		}

		.cms_table.mud-sm-table .mud-table-body .mud-table-row::before {
			order: 3;
		}

		.cms_table.mud-sm-table .mud-table-body .mud-table-row::after {
			order: 7;
		}

	.cms_table.mud-sm-table .mud-table-body .mud-table-cell {
		border: 0 !important;
		color: var(--site-muted);
		display: inline-flex;
		font-size: 0.85rem;
		justify-content: flex-start;
		min-width: 0;
		padding: 0;
		white-space: normal;
		width: auto;
	}

		.cms_table.mud-sm-table .mud-table-body .mud-table-cell::before {
			content: none;
			font-weight: 400;
		}

	.cms_table.mud-sm-table .cms_cell_title {
		color: var(--site-ink) !important;
		flex: 1 1 0;
		font-size: 1rem !important;
		min-width: 0 !important;
		order: 1;
	}

	.cms_table.mud-sm-table .cms_cell_actions {
		margin-left: auto;
		margin-right: -6px;
		order: 2;
	}

	.cms_table.mud-sm-table .cms_cell_product {
		order: 4;
	}

	.cms_table.mud-sm-table .cms_cell_topic {
		order: 5;
	}

		.cms_table.mud-sm-table .cms_cell_topic::before {
			content: "\203A" !important;
			padding-right: 8px;
		}

	.cms_table.mud-sm-table .cms_cell_type {
		order: 6;
	}

		.cms_table.mud-sm-table .cms_cell_type::before {
			content: "\00B7" !important;
			padding-right: 8px;
		}

	.cms_table.mud-sm-table .cms_cell_chip {
		order: 8;
	}

	.cms_table.mud-sm-table .cms_cell_sort {
		order: 9;
	}

		.cms_table.mud-sm-table .cms_cell_sort::before {
			content: "Order" !important;
			padding-right: 4px;
		}

	.cms_table.mud-sm-table .cms_cell_updated {
		order: 10;
	}

		.cms_table.mud-sm-table .cms_cell_updated::before {
			content: "Updated" !important;
			padding-right: 4px;
		}

	.cms_table.mud-sm-table .cms_cell_nextreview {
		order: 10;
	}

		.cms_table.mud-sm-table .cms_cell_nextreview::before {
			content: "Next Review" !important;
			padding-right: 4px;
		}

	.cms_table.mud-sm-table .cms_cell_lastreviewed {
		flex-basis: 100%;
		order: 11;
	}

		.cms_table.mud-sm-table .cms_cell_lastreviewed::before {
			content: "Last Reviewed" !important;
			padding-right: 4px;
		}

	.cms_table.mud-sm-table .cms_cell_created {
		order: 10;
	}

		.cms_table.mud-sm-table .cms_cell_created::before {
			content: "Created" !important;
			padding-right: 4px;
		}

	.cms_table.mud-sm-table .cms_cell_files {
		flex-basis: 100%;
		flex-wrap: wrap;
		gap: 0 8px;
		order: 11;
	}

		.cms_table.mud-sm-table .cms_cell_files br {
			display: none;
		}

	/* Products (no Product/Topic cells) and Topics keep the chip on the second line */
	.cms_table.mud-sm-table .mud-table-row:not(:has(.cms_cell_product)) .cms_cell_chip, .cms_table.mud-sm-table .mud-table-row:not(:has(.cms_cell_topic)) .cms_cell_chip {
		order: 4;
	}

	.cms_table.mud-sm-table .mud-table-row:not(:has(.cms_cell_product)) .cms_cell_sort {
		order: 5;
	}

	.cms_table.mud-sm-table .mud-table-row:not(:has(.cms_cell_product)) .cms_cell_updated {
		order: 6;
	}

	.cms_table.mud-sm-table .mud-table-row:not(:has(.cms_cell_topic)):has(.cms_cell_product) .cms_cell_sort {
		order: 9;
	}
}

.cms_table th.cms_visibility_heading, .cms_table td.cms_cell_visibility {
    text-align: center;
}

.cms_list_visibility > * {
    flex-shrink: 0;
}

/* Shared presentation for content lists and Content Review. */
.cms_list_location {
    overflow-wrap: anywhere;
}

.cms_list_visibility {
    align-items: center;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: center;
    min-width: max-content;
}

.cms_resource_primary {
    align-items: flex-start;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.cms_resource_primary > .mud-icon-root {
    flex-shrink: 0;
}

.cms_resource_primary > .mud-link {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cms_resource_metadata {
    color: var(--site-muted);
    display: block;
    font-size: 0.85rem;
    margin-top: 2px;
}

@media (max-width: 960px) {
    .cms_table.cms_content_list.mud-sm-table .mud-table-body .mud-table-row .cms_cell_title {
        align-items: flex-start;
        flex-direction: column;
    }

    .cms_table.cms_content_list.mud-sm-table .mud-table-body .mud-table-row .cms_cell_location {
        flex-basis: 100%;
        order: 4;
        overflow-wrap: anywhere;
    }

    .cms_table.cms_content_list.mud-sm-table .mud-table-body .mud-table-row .cms_cell_visibility {
        justify-content: center;
        order: 8;
    }

    .cms_table.cms_content_list.mud-sm-table .mud-table-body .mud-table-row .cms_cell_sort {
        order: 9;
    }

    .cms_table.cms_content_list.mud-sm-table .mud-table-body .mud-table-row .cms_cell_updated {
        order: 10;
    }
}


.cms_review_table .cms_review_location {
    min-width: 160px;
    overflow-wrap: normal;
    word-break: normal;
}

.cms_review_table th.cms_review_date_heading, .cms_review_table td.cms_review_date_cell {
    text-align: center;
}

.cms_review_table .cms_list_location {
    overflow-wrap: normal;
    word-break: normal;
}

.cms_review_content_primary {
    align-items: center;
}

.cms_review_type_icon {
    color: var(--site-muted);
    display: inline-flex;
    flex-shrink: 0;
}

@media (max-width: 960px) {
    .cms_table.cms_review_table.mud-sm-table .mud-table-body .mud-table-row .cms_cell_location {
        overflow-wrap: normal;
        word-break: normal;
    }

    .cms_table.cms_review_table.mud-sm-table .mud-table-body .mud-table-row .cms_cell_lastreviewed {
        flex-basis: auto;
        order: 10;
    }

    .cms_table.cms_review_table.mud-sm-table .mud-table-body .mud-table-row .cms_cell_nextreview {
        order: 11;
    }

    .cms_table.cms_review_table.mud-sm-table .mud-table-body .mud-table-row .cms_cell_review_status {
        flex-basis: 100%;
        order: 12;
    }
}

/* Dashboard */
.cms_area_grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.cms_area_card {
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
	color: inherit;
	display: flex;
	gap: 16px;
	padding: 20px;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

	.cms_area_card:hover {
		border-color: var(--site-red);
		box-shadow: var(--site-shadow-hover);
	}

.cms_area_icon {
	align-items: center;
	background-color: var(--site-red-tint);
	border-radius: 50%;
	color: var(--site-red);
	display: flex;
	flex: none;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.cms_area_body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cms_area_description {
	color: var(--site-text-secondary);
	font-size: 0.875rem;
}

.cms_area_counts {
	color: var(--site-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	gap: 4px 20px;
	margin-top: 4px;
}

	.cms_area_counts strong {
		color: var(--site-ink);
		font-size: 1.25rem;
		font-weight: 500;
		margin-right: 4px;
	}

.cms_area_action {
	align-items: center;
	color: var(--site-red);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 500;
	gap: 4px;
	margin-top: auto;
	padding-top: 6px;
}

/* Forms */
.cms_form_paper {
	padding: 24px;
}

.cms_form_section {
	border-top: 1px solid var(--site-line-soft);
	margin-top: 24px;
	padding-top: 20px;
}

.cms_form_section_heading {
	margin-bottom: 16px;
}

.cms_form_section_title {
	font-weight: 500 !important;
}

.cms_slug {
	margin-top: 8px;
}

.cms_form_actions {
	align-items: center;
	border-top: 1px solid var(--site-line-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
	padding-top: 16px;
}

/* Delete sits apart from Save and Cancel */
.cms_delete_action {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	justify-content: flex-end;
	margin-left: auto;
}

/* Long forms keep Save and Cancel in view */
@media (min-width: 600px) {
	.cms_form_actions_sticky {
		background-color: var(--site-surface);
		border-radius: 0 0 var(--site-radius) var(--site-radius);
		bottom: 0;
		box-shadow: var(--site-sticky-shadow);
		margin: 24px -24px -24px;
		padding: 12px 24px;
		position: sticky;
		z-index: 5;
	}
}

.cms_switches {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.cms_switch_help {
	margin-left: 4px;
}

.cms_field_error {
	color: var(--site-error);
	font-size: 0.8rem;
	margin-top: 4px;
}

/* Article editor: the body beside a settings column on large screens; Placement, body, Publishing stacked below that */
.cms_editor_layout {
	display: grid;
	gap: 24px;
	grid-template-areas: "placement" "main" "publishing";
	grid-template-columns: minmax(0, 1fr);
}

	.cms_editor_layout > .cms_form_section {
		border-top: 0;
		margin-top: 0;
		padding-top: 0;
	}

.cms_editor_placement {
	grid-area: placement;
}

.cms_editor_main {
	grid-area: main;
	min-width: 0;
}

.cms_editor_publishing {
	grid-area: publishing;
}

@media (min-width: 1280px) {
	.cms_editor_layout {
		align-items: start;
		grid-template-areas: "main placement" "main publishing" "main .";
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-rows: auto auto 1fr;
	}

		.cms_editor_layout > .cms_form_section {
			background-color: var(--site-surface-subtle);
			border: 1px solid var(--site-line-soft);
			border-radius: var(--site-radius);
			padding: 16px;
		}

		.cms_editor_layout .cms_form_section_heading {
			margin-bottom: 12px;
		}
}

.cms_editor_heading {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.cms_editor_label {
	font-weight: 500 !important;
}

.cms_editor_help {
	display: block;
	margin-top: 6px;
}

/* Resource files: upload areas are set apart from the metadata fields */
.cms_upload_box {
	background-color: var(--site-surface-subtle);
	border: 1px dashed var(--site-border-dashed);
	border-radius: var(--site-radius);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 16px;
}

.cms_upload_head {
	align-items: center;
	display: flex;
	gap: 8px;
}

.cms_resource_files_panel, .cms_resource_media {
    min-width: 0;
}

.cms_resource_media {
    width: 100%;
}

.cms_resource_video, .cms_resource_thumbnail {
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    border-radius: 6px;
    display: block;
    margin-top: 4px;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.cms_resource_video {
    aspect-ratio: 16 / 9;
}

.cms_resource_thumbnail {
    max-height: 220px;
}

/* Side by side (Video MP4 and Video Thumbnail, from MudBlazor's md breakpoint): the thumbnail uses the video's 16:9 frame,
   shown whole (contain), so the two previews match and the rows below them (current file, replace button, file limits) line
   up. Thumbnail-only controls (Remove current thumbnail) follow below. Stacked, the thumbnail keeps its natural size. */
@media (min-width: 960px) {
    .cms_resource_thumbnail {
        aspect-ratio: 16 / 9;
        max-height: none;
    }
}

.cms_pdf_preview {
    align-items: center;
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    border-radius: 6px;
    color: var(--site-muted);
    display: flex;
    justify-content: center;
    margin-top: 4px;
    min-height: 100px;
    padding: 10px;
}

.cms_pdf_preview canvas {
    box-shadow: var(--site-media-frame);
    height: auto;
    max-width: 100%;
}

.cms_upload_box .cms_file_name {
    overflow-wrap: anywhere;
}

.cms_upload_box .cms_upload_control .mud-button-root {
    max-width: 100%;
    white-space: normal;
}

	.cms_upload_head .mud-icon-root {
		color: var(--site-muted);
	}

.cms_file_row {
	align-items: center;
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: 6px;
	display: flex;
	gap: 10px;
	padding: 8px 10px;
}

	.cms_file_row > .mud-icon-root {
		color: var(--site-muted);
		flex: none;
	}

.cms_file_text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.cms_file_caption {
	color: var(--site-muted);
	font-size: 0.75rem;
}

.cms_file_new {
	background-color: var(--site-success-bg);
	border-color: var(--site-success-line);
}

	.cms_file_new > .mud-icon-root {
		color: var(--site-success);
	}

.cms_file_replaced .cms_file_name {
	color: var(--site-faint);
	text-decoration: line-through;
}

.cms_remove_poster {
	margin-left: -12px;
}

/* Rich text editor (js/rich-text-editor.js); the toolbar stays in view while a long body is edited */
.rich_text_editor {
	width: 100%;
}

	.rich_text_editor .ql-toolbar.ql-snow {
		background-color: var(--site-surface-subtle);
		border-color: var(--site-border-input);
		border-radius: var(--site-radius) var(--site-radius) 0 0;
		padding: 6px 8px;
		position: sticky;
		top: 0;
		z-index: 4;
	}

	.rich_text_editor .ql-container.ql-snow {
		background-color: var(--site-surface);
		border-color: var(--site-border-input);
		border-radius: 0 0 var(--site-radius) var(--site-radius);
		font-family: var(--site-font);
		font-size: 1rem;
	}

	.rich_text_editor .ql-editor {
		color: var(--site-ink);
		line-height: 1.6;
		min-height: 200px;
		padding: 16px 20px;
	}

		.rich_text_editor .ql-editor h2 {
			font-size: 1.4rem;
			font-weight: 500;
		}

		.rich_text_editor .ql-editor h3 {
			font-size: 1.15rem;
			font-weight: 500;
		}

		.rich_text_editor .ql-editor blockquote {
			border-left-color: var(--site-red);
			color: var(--site-text-secondary);
		}

		.rich_text_editor .ql-editor img {
			background-color: var(--site-media-bg);
			border: 1px solid var(--site-line);
			border-radius: 4px;
			height: auto;
			max-width: 100%;
		}

	.rich_text_editor .ql-snow .ql-tooltip {
		max-width: calc(100vw - 48px);
		z-index: 10;
	}

	/* HTML source (js/rich-text-editor.js): the editing area shown as plain, scrollable HTML in place of the visual editor */
	.rich_text_editor .rich_text_source {
		background-color: var(--site-surface);
		border: 1px solid var(--site-border-input);
		border-radius: 0 0 var(--site-radius) var(--site-radius);
		border-top: 0;
		box-sizing: border-box;
		color: var(--site-ink);
		display: block;
		font: 0.875rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
		margin: 0;
		max-height: 70vh;
		min-height: 200px;
		overflow: auto;
		padding: 16px 20px;
		resize: vertical;
		tab-size: 2;
		white-space: pre-wrap;
		width: 100%;
	}

		.rich_text_editor .rich_text_source[hidden] {
			display: none;
		}

		.rich_text_editor .rich_text_source:focus {
			outline: 2px solid var(--site-focus-soft);
			outline-offset: -2px;
		}

	/* The HTML button is labeled in text (the inline code and code block buttons are icons) */
	.rich_text_editor .ql-snow.ql-toolbar button.ql-source {
		border-radius: 4px;
		font: 600 0.75rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
		letter-spacing: 0.02em;
		padding: 3px 6px;
		width: auto;
	}

		.rich_text_editor .ql-snow.ql-toolbar button.ql-source[aria-pressed="true"] {
			background-color: var(--site-red-tint);
			color: var(--site-red);
		}

	/* While source is shown, the formatting controls (which act on the visual editor) are unavailable */
	.rich_text_editor .ql-toolbar.rich_text_source_active .ql-formats:not(:has(.ql-source)) {
		opacity: 0.4;
	}

	.rich_text_editor .ql-toolbar.rich_text_source_active .ql-picker {
		pointer-events: none;
	}

.rich_text_editor_article .rich_text_source {
	min-height: 420px;
}

/* Article bodies are longer than FAQ answers */
.rich_text_editor_article .ql-editor {
	min-height: 420px;
}

/* Article rich text: the same restrained semantic styles appear in public pages and previews. */
.rich_text_editor_article .ql-editor h4 {
	font-size: 1.05rem;
	font-weight: 600;
}

.rich_text_editor_article .ql-editor .ql-code-block {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	white-space: pre-wrap;
}

.article_body h4 {
	color: var(--site-ink);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 1.25em 0 0.35em;
	text-align: left;
}

.article_body code {
	background-color: var(--site-panel);
	border-radius: 3px;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 0.9em;
	padding: 0.08em 0.25em;
	overflow-wrap: anywhere;
}

.article_body .ql-code-block-container {
	background-color: var(--site-panel);
	border: 1px solid var(--site-line);
	border-radius: 6px;
	margin: 0 0 1em;
	overflow-wrap: anywhere;
	padding: 12px 14px;
}

.article_body .ql-code-block {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Delete / lifecycle page */
.cms_delete_target {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.cms_delete_name {
	overflow-wrap: anywhere;
}

.cms_delete_subheading {
	margin: 16px 0 8px !important;
}

.cms_delete_hint {
	flex-basis: 100%;
	text-align: right;
}

.cms_counts {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
	margin-bottom: 16px;
}

.cms_count_tile {
	align-items: center;
	background-color: var(--site-surface-subtle);
	border: 1px solid var(--site-border-tile);
	border-radius: var(--site-radius);
	display: flex;
	gap: 8px;
	padding: 10px 12px;
}

	.cms_count_tile .mud-icon-root {
		color: var(--site-muted);
	}

.cms_bulk_box {
	background-color: var(--site-surface-subtle);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
	margin-top: 8px;
	padding: 16px;
}

.cms_danger_zone {
	background-color: var(--site-danger-bg);
	border: 1px solid var(--site-danger-line);
	border-left: 4px solid var(--site-red);
	border-radius: var(--site-radius);
	margin-top: 20px;
	padding: 16px;
}

.cms_danger_heading {
	align-items: center;
	display: flex;
	gap: 8px;
}

.cms_danger_actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.cms_inline_icon {
	vertical-align: text-bottom;
}

.cms_confirm_name {
	max-width: 480px;
}

/* Redirects */
.cms_redirect_path {
	background-color: var(--site-surface-muted);
	border-radius: 4px;
	color: var(--site-ink);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
	padding: 1px 6px;
}

.cms_redirect_target {
	color: var(--site-ink);
	overflow-wrap: anywhere;
}

.cms_redirect_context {
	display: block;
}

.cms_redirect_option {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cms_redirect_option_meta {
	color: var(--site-muted);
	font-size: 0.8rem;
	overflow-wrap: anywhere;
}

.cms_table .cms_cell_created {
	color: var(--site-muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

/* Content review */
.cms_review_card {
	align-items: center;
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-left: 4px solid var(--site-red);
	border-radius: var(--site-radius);
	color: inherit;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-bottom: 16px;
	padding: 16px 20px;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

	.cms_review_card:hover {
		border-color: var(--site-red);
		box-shadow: var(--site-shadow-hover);
	}

	.cms_review_card .cms_area_body {
		flex: 1 1 220px;
	}

	.cms_review_card .cms_area_action {
		margin-top: 0;
		padding-top: 0;
	}

.cms_review_card_counts {
	margin-top: 0;
}

	/* Needs Updating: the same attention accent as on the Content Review page */
	.cms_review_card_flagged {
		align-items: center;
		display: inline-flex;
		gap: 4px;
	}

		.cms_review_card_flagged .mud-icon-root {
			color: var(--site-warning-strong);
		}

.cms_review_summary {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	margin-bottom: 16px;
}

.cms_review_summary_card {
	align-items: flex-start;
	background-color: var(--site-surface);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
	color: var(--site-ink);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 2px;
	padding: 12px 16px;
	text-align: left;
}

	.cms_review_summary_card:hover {
		border-color: var(--site-border-input);
	}

.cms_review_summary_active, .cms_review_summary_active:hover {
	background-color: var(--site-red-tint);
	border-color: var(--site-red);
}

/* Needs Updating: work an editor has flagged, set apart from the date-based cards (an attention accent, not an error) */
.cms_review_summary_flagged {
	border-left: 4px solid var(--site-warning-strong);
}

.cms_review_summary_label {
	align-items: center;
	display: inline-flex;
	gap: 4px;
}

	.cms_review_summary_label .mud-icon-root {
		color: var(--site-warning-strong);
	}

.cms_review_summary_count {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
}

.cms_review_summary_note {
	color: var(--site-muted);
	font-size: 0.8rem;
}

.cms_review_panel {
	margin-top: 16px;
	padding: 16px 24px;
}

.cms_review_panel_head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.cms_review_panel_note {
	color: var(--site-muted);
	margin: 0 0 12px;
}

.cms_review_facts {
	display: grid;
	gap: 4px 16px;
	grid-template-columns: max-content minmax(0, 1fr);
	margin: 12px 0;
}

	.cms_review_facts dt {
		color: var(--site-muted);
	}

	.cms_review_facts dd {
		margin: 0;
		overflow-wrap: anywhere;
	}

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

.cms_table .cms_cell_lastreviewed, .cms_table .cms_cell_nextreview {
	color: var(--site-muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

/* Curated content: Related Content (edit pages) and Featured Content (Manage/Featured) */
.cms_related_panel, .cms_featured_panel {
	margin-top: 16px;
	padding: 16px 24px;
}

.cms_related_head, .cms_featured_head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	justify-content: space-between;
}

.cms_related_note, .cms_featured_note {
	color: var(--site-muted);
	font-size: 0.85rem;
	margin: 4px 0 0;
}

.cms_curated_list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.cms_curated_item {
	align-items: center;
	border-top: 1px solid var(--site-line);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 8px 0;
}

	.cms_curated_item:last-child {
		border-bottom: 1px solid var(--site-line);
	}

.cms_curated_order {
	color: var(--site-muted);
	font-size: 0.85rem;
	min-width: 1.5em;
	text-align: right;
}

.cms_curated_main {
	flex: 1 1 260px;
	min-width: 0;
}

.cms_curated_title {
	font-weight: 500;
	overflow-wrap: anywhere;
}

.cms_curated_meta {
	align-items: center;
	color: var(--site-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	gap: 2px 8px;
}

.cms_curated_chips {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.cms_curated_availability {
	color: var(--site-muted);
	font-size: 0.85rem;
	margin-left: 4px;
}

.cms_curated_actions {
	display: flex;
	flex: 0 0 auto;
	margin-left: auto;
}

.cms_picker_filters {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
	margin-bottom: 12px;
}

	.cms_picker_filters .cms_picker_search {
		grid-column: 1 / -1;
	}

.cms_picker_table .cms_curated_context {
	color: var(--site-muted);
	font-size: 0.85rem;
}

.cms_picker_limit {
	color: var(--site-error-text);
}

.cms_featured_count {
	font-weight: 500;
}

/* Revision history */
.cms_history_context {
	margin: -12px 0 16px;
}

.cms_history {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cms_history_item {
	padding: 14px 18px;
}

.cms_history_current {
	border-color: var(--site-red) !important;
	box-shadow: 0 0 0 1px var(--site-red);
}

.cms_history_head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
}

.cms_history_version {
	font-weight: 500 !important;
}

.cms_history_reason {
	color: var(--site-muted);
	font-size: 0.875rem;
}

.cms_history_states {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.cms_history_changes {
	margin-top: 8px !important;
	overflow-wrap: anywhere;
}

.cms_history_actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 10px;
}

.cms_history_blocked {
	overflow-wrap: anywhere;
}

.cms_revision_fields {
	display: grid;
	gap: 6px 16px;
	grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
	margin: 0;
}

	.cms_revision_fields dt {
		color: var(--site-muted);
		font-weight: 500;
	}

	.cms_revision_fields dd {
		margin: 0;
		overflow-wrap: anywhere;
	}

.cms_revision_body {
	background-color: var(--site-surface-subtle);
	border: 1px solid var(--site-line-soft);
	border-radius: var(--site-radius);
	font-size: 0.95rem;
	margin: 0;
	max-width: none;
	padding: 12px 14px;
}

.cms_dialog_paragraph {
	margin: 0 0 10px;
}

@media screen and (max-width: 600px) {
	.cms_revision_fields {
		grid-template-columns: minmax(0, 1fr);
	}

		.cms_revision_fields dd {
			margin-bottom: 8px;
		}
}

/* Article image picker and library dialogs */
.cms_picker_upload {
	align-items: center;
	background-color: var(--site-surface-subtle);
	border: 1px dashed var(--site-border-dashed);
	border-radius: var(--site-radius);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 16px;
	text-align: center;
}

	.cms_picker_upload .cms_picker_upload_icon {
		color: var(--site-icon-faint);
		font-size: 2.5rem;
	}

.cms_picker_tabs + .cms_picker_alt, .cms_picker_alt {
	margin-top: 16px;
}

.mud-dialog .cms_file_row {
	margin-top: 12px;
}

.cms_picker_grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	max-height: 45vh;
	overflow: auto;
	padding: 2px;
}

.cms_picker_tile {
	background-color: var(--site-surface);
	border: 2px solid var(--site-border-picker);
	border-radius: var(--site-radius);
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 6px;
	padding: 8px;
	position: relative;
	text-align: left;
}

	.cms_picker_tile:hover {
		border-color: var(--site-border-input);
	}

	.cms_picker_tile img {
		background-color: var(--site-surface-muted);
		border-radius: 4px;
		height: 110px;
		object-fit: contain;
		width: 100%;
	}

	.cms_picker_tile:focus-visible {
		outline: 2px solid var(--site-red);
		outline-offset: 2px;
	}

.cms_picker_tile_selected, .cms_picker_tile_selected:hover {
	background-color: var(--site-red-tint);
	border-color: var(--site-red);
}

.cms_picker_check {
	background-color: var(--site-surface);
	border-radius: 50%;
	color: var(--site-red);
	display: flex;
	position: absolute;
	right: 12px;
	top: 12px;
}

.cms_picker_name {
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.cms_picker_state {
	color: var(--site-success);
	font-size: 0.75rem;
	font-weight: 500;
}

.cms_library_grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

.cms_library_tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
}

	.cms_library_tile img {
		background-color: var(--site-surface-muted);
		border-radius: 4px;
		height: 140px;
		object-fit: contain;
		width: 100%;
	}

/* An image whose use in the editor differs from the saved article */
.cms_library_tile_changed {
	background-color: var(--site-changed-bg) !important;
	border-color: var(--site-changed-line) !important;
}

.cms_library_name {
	overflow-wrap: anywhere;
}

.cms_library_states {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

@media screen and (max-width: 600px) {
	.cms_content {
		padding-top: 16px;
	}

	.cms_page_heading h1 {
		font-size: 1.5rem;
	}

	.cms_form_paper {
		padding: 16px;
	}

	.cms_bar_inner {
		gap: 0;
	}

	.cms_bar_title {
		flex-basis: 100%;
		min-height: 40px;
	}

	.cms_bar_links {
		margin-left: -8px;
	}

	.cms_bar_link {
		min-height: 44px;
		padding: 0 8px;
	}

	.cms_bar_tools .mud-button-root {
		min-height: 44px;
		padding: 0 8px;
	}

	.cms_review_panel, .cms_related_panel, .cms_featured_panel {
		padding: 16px;
	}

		.cms_bar_link .mud-icon-root {
			display: none;
		}

	.cms_page_actions, .cms_page_actions .mud-button-root {
		width: 100%;
	}

	.cms_delete_action {
		justify-content: flex-start;
		margin-left: 0;
	}

	.cms_delete_hint {
		text-align: left;
	}

	/* Dialogs use nearly the full width of a phone */
	.mud-dialog-container .mud-dialog {
		margin: 8px;
		max-height: calc(100% - 16px);
		max-width: calc(100% - 16px) !important;
		width: 100%;
	}

	.mud-dialog-container .mud-dialog .mud-dialog-content {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/*---------------- Dark theme: third-party and MudBlazor surfaces -----------------*/
/* Only what cannot follow the tokens: Quill's stylesheet and MudBlazor's palette use fixed values of their own. */

/* MudBlazor: Primary is the lighter accent red in Dark (text, icons, selection); filled primary buttons keep the deeper brand
   fill with white text, like the public buttons. Dialogs, menus and other overlays are raised one step above the page. */
:root[data-theme="dark"] .mud-button-filled-primary {
	--mud-palette-primary: var(--site-red-fill);
	--mud-palette-primary-darken: var(--site-red-fill-hover);
}

:root[data-theme="dark"] :is(.mud-dialog, .mud-popover:not(.mud-tooltip)) {
	--mud-palette-surface: var(--site-elevated);
	--site-surface: var(--site-elevated);
	--site-surface-subtle: #323336;
	--site-line: #414347;
}

/* Quill (rich text editor): toolbar icons, pickers, the link tooltip, inline code and code blocks */
:root[data-theme="dark"] .rich_text_editor .ql-snow .ql-stroke {
	stroke: var(--site-text);
}

:root[data-theme="dark"] .rich_text_editor .ql-snow :is(.ql-fill, .ql-stroke.ql-fill) {
	fill: var(--site-text);
}

:root[data-theme="dark"] .rich_text_editor .ql-snow .ql-picker {
	color: var(--site-text);
}

:root[data-theme="dark"] .rich_text_editor .ql-snow.ql-toolbar :is(button:hover, button:focus, button.ql-active, .ql-picker-label:hover, .ql-picker-label.ql-active, .ql-picker-item:hover, .ql-picker-item.ql-selected) {
	color: #8ab9ea;
}

	:root[data-theme="dark"] .rich_text_editor .ql-snow.ql-toolbar :is(button:hover, button:focus, button.ql-active, .ql-picker-label:hover, .ql-picker-label.ql-active, .ql-picker-item:hover, .ql-picker-item.ql-selected) .ql-stroke {
		stroke: #8ab9ea;
	}

	:root[data-theme="dark"] .rich_text_editor .ql-snow.ql-toolbar :is(button:hover, button:focus, button.ql-active, .ql-picker-label:hover, .ql-picker-label.ql-active, .ql-picker-item:hover, .ql-picker-item.ql-selected) :is(.ql-fill, .ql-stroke.ql-fill) {
		fill: #8ab9ea;
	}

:root[data-theme="dark"] .rich_text_editor .ql-snow .ql-picker-options {
	background-color: var(--site-elevated);
	box-shadow: var(--site-menu-shadow);
}

:root[data-theme="dark"] .rich_text_editor .ql-snow .ql-picker.ql-expanded :is(.ql-picker-label, .ql-picker-options) {
	border-color: var(--site-border-input);
}

/* Color swatches keep their stored colors; the outline keeps "Dark text" visible on the dark menu */
:root[data-theme="dark"] .rich_text_editor .ql-snow .ql-color-picker .ql-picker-item {
	border-color: rgba(255, 255, 255, 0.35);
}

:root[data-theme="dark"] .rich_text_editor .ql-snow .ql-tooltip {
	background-color: var(--site-elevated);
	border-color: var(--site-line);
	box-shadow: var(--site-menu-shadow);
	color: var(--site-text);
}

	:root[data-theme="dark"] .rich_text_editor .ql-snow .ql-tooltip input[type="text"] {
		background-color: var(--site-surface);
		border-color: var(--site-border-input);
		color: var(--site-ink);
	}

:root[data-theme="dark"] .rich_text_editor .ql-snow :is(a, .ql-tooltip a) {
	color: #8ab9ea;
}

:root[data-theme="dark"] .rich_text_editor .ql-editor.ql-blank::before {
	color: var(--site-muted);
}

:root[data-theme="dark"] .rich_text_editor .ql-snow .ql-editor code {
	background-color: var(--site-panel);
}

:root[data-theme="dark"] .rich_text_editor .ql-snow .ql-editor .ql-code-block-container {
	background-color: var(--site-surface-alt);
	border: 1px solid var(--site-line);
	color: var(--site-ink);
}

/* Stored Article colors (RichTextSanitizer's exact palette; the saved HTML is unchanged). Chosen for white pages, they are
   shown as their dark-surface equivalents: "Dark text" is the normal text color, the other text colors are lightened, and the
   pale highlights become deep tints. Matches the stored values (hex) and the editor's own serialization (rgb). */
:root[data-theme="dark"] :is(.article_body, .rich_text_editor .ql-editor) :is([style*="color: #222222"], [style*="color: rgb(34, 34, 34)"]) {
	color: var(--site-ink) !important;
}

:root[data-theme="dark"] :is(.article_body, .rich_text_editor .ql-editor) :is([style*="color: #be1e2d"], [style*="color: rgb(190, 30, 45)"]) {
	color: #f07a6e !important;
}

:root[data-theme="dark"] :is(.article_body, .rich_text_editor .ql-editor) :is([style*="color: #174a7e"], [style*="color: rgb(23, 74, 126)"]) {
	color: #8ab9ea !important;
}

:root[data-theme="dark"] :is(.article_body, .rich_text_editor .ql-editor) :is([style*="color: #356b3c"], [style*="color: rgb(53, 107, 60)"]) {
	color: #86c98a !important;
}

:root[data-theme="dark"] :is(.article_body, .rich_text_editor .ql-editor) :is([style*="background-color: #fff2cc"], [style*="background-color: rgb(255, 242, 204)"]) {
	background-color: #4a3e17 !important;
}

:root[data-theme="dark"] :is(.article_body, .rich_text_editor .ql-editor) :is([style*="background-color: #f4cccc"], [style*="background-color: rgb(244, 204, 204)"]) {
	background-color: #4f2724 !important;
}

:root[data-theme="dark"] :is(.article_body, .rich_text_editor .ql-editor) :is([style*="background-color: #d9eaf7"], [style*="background-color: rgb(217, 234, 247)"]) {
	background-color: #1d3a54 !important;
}

:root[data-theme="dark"] :is(.article_body, .rich_text_editor .ql-editor) :is([style*="background-color: #d9ead3"], [style*="background-color: rgb(217, 234, 211)"]) {
	background-color: #233f27 !important;
}

/*---------------- Root font size and link colour -----------------*/
/* Kept last, where these rules loaded before the stylesheets were merged, so the cascade is unchanged. */

/* Site links use the ReddiNet red (sufficient contrast against the page in either theme) */
a {
	color: var(--site-link);
}

html {
	font-size: 14px;
}
@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}