/**
 * Page styles — seo. Loaded only on that page.
 *
 * Generated from the inline styles the templates used to carry. Values are
 * design tokens (site-tokens.css). Loaded after style.css.
 */

.schema-code {
	padding:12px 14px;
	font-family:monospace;
	font-size:9px;
	line-height:1.7;
	color:var(--site-text-med);
	background:var(--site-bg-subtle);
	border-radius:0 0 8px 8px;
	overflow:hidden;
}

.area-pages__head {
	display:grid;
	grid-template-columns:1fr 36px 44px 28px;
	gap:4px;
	padding:5px 10px 2px;
}

.area-pages__row {
	display:grid;
	grid-template-columns:1fr 36px 44px 28px;
	gap:4px;
	padding:7px 10px;
	background:var(--site-white);
	border:1px solid var(--site-border);
	border-radius:6px;
	align-items:center;
}

.area-pages__list {
	padding:10px 14px;
	display:flex;
	flex-direction:column;
	gap:5px;
}

.schema-code__number {
	color:var(--site-orange-44);
}

.area-pages__rank {
	font-size:9px;
	font-weight:800;
	color:var(--site-success);
	text-align:right;
}

.schema-code__string {
	color:var(--site-success);
}

.schema-code__key {
	color:var(--site-teal-deeper);
}

.schema-code__colon {
	color:var(--site-text-med);
}

.vitals-threshold {
	margin-top:12px;
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:var(--site-success-alpha-15);
	border:1px solid var(--site-success-alpha-30);
	border-radius:999px;
	padding:4px 12px;
}

.vitals-threshold__grade {
	font-size:11px;
	font-weight:700;
	color:var(--site-mint-52);
}

.vitals-threshold__limit {
	font-size:11px;
	color:var(--site-white-alpha-50);
}

.seo-audit-card__check-label {
	font-size:9px;
	color:var(--site-text-muted);
	width:90px;
	flex-shrink:0;
}

.seo-audit-card__bar {
	flex:1;
	height:4px;
	background:var(--site-bg-subtle);
	border-radius:2px;
	overflow:hidden;
}

.seo-audit-card__priority {
	margin-top:10px;
	padding:8px 10px;
	background:var(--site-teal-bg);
	border-radius:6px;
	border:1px solid var(--site-teal-border);
}

.seo-audit-card__check {
	display:flex;
	align-items:center;
	gap:8px;
	padding:5px 0;
	border-bottom:1px solid var(--site-bg-subtle);
}

.seo-audit-card__priority-text {
	font-size:9px;
	color:var(--site-text-med);
	margin-top:2px;
}

.seo-audit-card__priority-title {
	font-size:9px;
	font-weight:700;
	color:var(--site-teal);
}

.hcb-sv--passing {
	color:var(--site-success);
}

.migration-callout__audit-cta {
	margin-top:14px;
	display:inline-flex;
}

.mlsg-copy__seo-stack-cta {
	margin-top:20px;
	display:inline-flex;
}

@media (max-width: 640px) {
	.app-frame .area-pages__row { grid-template-columns:1fr;gap:4px; }
	.app-frame .area-pages__row > * { min-width:0; }
	.app-frame .area-pages__head { grid-template-columns:1fr;gap:4px; }
	.app-frame .area-pages__head > * { min-width:0; }
}

/* Elements whose values come from the page data: the value arrives as a custom property. */

.seo-audit-card__check-score {
	font-size:9px;
	font-weight:700;
	width:20px;
	text-align:right;
	color:var(--data-color);
}

.seo-audit-card__bar-fill {
	height:100%;
	border-radius:2px;
	width:var(--data-width);
	background:var(--data-bg);
}

/* Moved here from another stylesheet: this is where these classes are used. */
.area-pages__area-name {
	font-size:10px;
	font-weight:600;
	color:var(--site-navy);
}
.area-pages__head-label {
	font-size:7px;
	font-weight:700;
	text-transform:uppercase;
	color:var(--site-text-muted);
	text-align:right;
}
.area-pages__head-label--area {
	font-size:7px;
	font-weight:700;
	text-transform:uppercase;
	color:var(--site-text-muted);
}
.area-pages__area-url {
	font-size:8px;
	color:var(--site-text-muted);
}
.area-pages__listings {
	font-size:9px;
	color:var(--site-teal);
	font-weight:700;
	text-align:right;
}
.area-pages__median {
	font-size:9px;
	color:var(--site-text-muted);
	text-align:right;
}
.schema-code__brace {
	color:var(--site-text-muted);
}
.eyebrow--vitals {
	color:var(--site-white-alpha-50);
}
.fc .fc__cross-link {
	color:var(--site-teal);
	font-weight:600;
}
.mlsg-section__intro--vitals {
	margin-bottom:48px;
}
.mlsg-section__intro--comparison {
	margin-bottom:56px;
}
.sec-title__vitals-accent {
	color:var(--site-teal);
}