/**
 * TMO Global UI: opt-in page and typography foundation.
 *
 * The shared site shell sits outside #content and is deliberately absent from
 * this file.
 */
body.tmo-ui-active #content.site-content {
	background-color: var(--tmo-ui-canvas);
}

body.tmo-ui-active #content.site-content :where(
	.tmo-ui-page,
	.tmo-ui-container,
	.tmo-ui-section,
	.tmo-ui-card,
	.tmo-ui-panel,
	.tmo-ui-button,
	.tmo-ui-field,
	.tmo-ui-table,
	.tmo-ui-tabs,
	.tmo-ui-notice,
	.tmo-ui-empty-state
) {
	box-sizing: border-box;
}

body.tmo-ui-active #content .tmo-ui-page {
	min-width: 0;
	padding-block: var(--tmo-ui-space-8) var(--tmo-ui-space-16);
	color: var(--tmo-ui-text);
	font-family: var(--tmo-ui-font-body);
	font-size: var(--tmo-ui-font-size-md);
	font-weight: var(--tmo-ui-font-weight-regular);
	line-height: var(--tmo-ui-line-height-body);
}

body.tmo-ui-active #content .tmo-ui-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--tmo-ui-container-app);
	margin-inline: auto;
	padding-inline: var(--tmo-ui-gutter);
}

body.tmo-ui-active #content .tmo-ui-container--reading {
	max-width: var(--tmo-ui-container-reading);
}

body.tmo-ui-active #content .tmo-ui-container--form {
	max-width: var(--tmo-ui-container-form);
}

body.tmo-ui-active #content .tmo-ui-container--wide {
	max-width: var(--tmo-ui-container-wide);
}

body.tmo-ui-active #content .tmo-ui-section + .tmo-ui-section {
	margin-top: var(--tmo-ui-space-10);
}

body.tmo-ui-active #content :where(.entry-title, .tmo-ui-heading--1) {
	margin: 0 0 var(--tmo-ui-space-6);
	color: var(--tmo-ui-text);
	font-family: var(--tmo-ui-font-heading);
	font-size: var(--tmo-ui-font-size-app-title);
	font-weight: var(--tmo-ui-font-weight-extrabold);
	letter-spacing: -0.025em;
	line-height: var(--tmo-ui-line-height-tight);
}

body.tmo-ui-active #content .tmo-ui-heading--2 {
	margin: 0 0 var(--tmo-ui-space-4);
	color: var(--tmo-ui-text);
	font-family: var(--tmo-ui-font-heading);
	font-size: var(--tmo-ui-font-size-section-title);
	font-weight: var(--tmo-ui-font-weight-bold);
	letter-spacing: -0.015em;
	line-height: var(--tmo-ui-line-height-heading);
}

body.tmo-ui-active #content .tmo-ui-heading--3 {
	margin: 0 0 var(--tmo-ui-space-3);
	color: var(--tmo-ui-text);
	font-family: var(--tmo-ui-font-body);
	font-size: var(--tmo-ui-font-size-xl);
	font-weight: var(--tmo-ui-font-weight-bold);
	line-height: 1.35;
}

body.tmo-ui-active #content .tmo-ui-heading--4 {
	margin: 0 0 var(--tmo-ui-space-3);
	color: var(--tmo-ui-text);
	font-family: var(--tmo-ui-font-body);
	font-size: var(--tmo-ui-font-size-lg);
	font-weight: var(--tmo-ui-font-weight-semibold);
	line-height: 1.4;
}

body.tmo-ui-active #content :where(.tmo-ui-copy, .tmo-ui-lede) {
	max-width: 68ch;
	margin-block: 0 var(--tmo-ui-space-4);
	color: var(--tmo-ui-text-secondary);
}

body.tmo-ui-active #content .tmo-ui-lede {
	font-size: var(--tmo-ui-font-size-lg);
}

body.tmo-ui-active #content .tmo-ui-link {
	color: var(--tmo-ui-link);
	font-weight: var(--tmo-ui-font-weight-semibold);
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
	transition: color var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard);
}

body.tmo-ui-active #content .tmo-ui-link:hover {
	color: var(--tmo-ui-link-hover);
}

body.tmo-ui-active #content .tmo-ui-page :where(a[href], button, input:not([type="hidden"]), select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: var(--tmo-ui-focus-width) solid var(--tmo-ui-focus);
	outline-offset: 3px;
}