/* Reusable pieces: badges, cards, the signal chain, the checker, tables of contents. */

.sr-eyebrow {
	font-size: var(--sr-step--1);
	font-weight: 500;
	color: var(--sr-beacon);
	margin-bottom: var(--sr-2);
}

.sr-lede {
	font-size: var(--sr-step-1);
	line-height: 1.55;
	color: var(--sr-graphite);
	max-width: 62ch;
}

.sr-section {
	padding-block: var(--sr-9);
}

.sr-section--tight { padding-block: var(--sr-7); }

.sr-section--sunk {
	background: var(--sr-surface);
	border-block: 1px solid var(--sr-line);
}

.sr-section--ink {
	background: var(--sr-ink);
	color: #e6edf3;
}

.sr-section--ink h2,
.sr-section--ink h3 { color: #fff; }

.sr-section--ink p { color: #b6c0cc; }

/* Tiers and table text on the ink ground use the dark-surface ramp. */
.sr-section--ink th { color: #a8b3c1; border-bottom-color: rgba( 255, 255, 255, 0.18 ); }
.sr-section--ink td { color: #d6dde5; border-bottom-color: rgba( 255, 255, 255, 0.08 ); }
.sr-section--ink .sr-tier--established { color: var( --sr-tier-standard-on-ink ); }
.sr-section--ink .sr-tier--official { color: var( --sr-tier-official-on-ink ); }
.sr-section--ink .sr-tier--strong { color: var( --sr-tier-strong-on-ink ); }
.sr-section--ink .sr-tier--emerging { color: var( --sr-tier-emerging-on-ink ); }
.sr-section--ink .sr-tier--experimental { color: var( --sr-tier-experimental-on-ink ); }
.sr-section--ink .sr-tier--hypothesis { color: var( --sr-tier-hypothesis-on-ink ); }

.sr-section__head {
	max-width: 62ch;
	margin-bottom: var(--sr-6);
}

.sr-section__head h2 { margin-bottom: var(--sr-3); }

/* Evidence tier badge — text always present, colour only reinforces */
.sr-tier {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15em 0.55em;
	border-radius: var(--sr-radius-sm);
	border: 1px solid currentColor;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.6;
	white-space: nowrap;
}

.sr-tier--established { color: var(--sr-tier-standard); }
.sr-tier--official { color: var(--sr-tier-official); }
.sr-tier--strong { color: var(--sr-tier-strong); }
.sr-tier--emerging { color: var(--sr-tier-emerging); }
.sr-tier--experimental { color: var(--sr-tier-experimental); }
.sr-tier--hypothesis { color: var(--sr-tier-hypothesis); }

/* Severity pill */
.sr-sev {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15em 0.55em;
	border-radius: var(--sr-radius-sm);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.6;
}

.sr-sev::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.sr-sev--critical { color: var(--sr-critical); background: var(--sr-critical-soft); }
.sr-sev--high { color: var(--sr-high); background: var(--sr-high-soft); }
.sr-sev--medium { color: var(--sr-medium); background: var(--sr-medium-soft); }
.sr-sev--low { color: var(--sr-low); background: var(--sr-low-soft); }
.sr-sev--pass { color: var(--sr-good); background: var(--sr-good-soft); }
.sr-sev--info { color: var(--sr-low); background: var(--sr-low-soft); }

/* Cards, used sparingly: for sets of peers, never to box a paragraph */
.sr-card {
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-lg);
	padding: var(--sr-5);
}

.sr-card h3 { font-size: var(--sr-step-1); }
.sr-card p:last-child { margin-bottom: 0; }

.sr-grid {
	display: grid;
	gap: var(--sr-4);
}

.sr-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sr-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Three explicit columns rather than auto-fit: at 1200px auto-fit produced four, which left
   a six-item set as 4 + 2 and read as an accident. */
.sr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.sr-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.sr-grid--3 { grid-template-columns: 1fr; }
}

/* The signal chain — the product's central idea, drawn once */
.sr-chain {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--sr-2);
	counter-reset: none;
	margin-block: var(--sr-6);
}

.sr-chain__node {
	position: relative;
	padding: var(--sr-4) var(--sr-3);
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
}

.sr-chain__node::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(-1 * var(--sr-2) - 1px);
	width: var(--sr-2);
	height: 1px;
	background: var(--sr-line-strong);
}

.sr-chain__node:last-child::after { display: none; }

.sr-chain__node strong {
	display: block;
	font-size: var(--sr-step--1);
	letter-spacing: 0.02em;
	margin-bottom: var(--sr-1);
}

.sr-chain__node span {
	font-size: var(--sr-step--1);
	color: var(--sr-mute);
	line-height: 1.45;
}

.sr-chain__node--measured {
	border-color: var(--sr-beacon-line);
	background: var(--sr-beacon-soft);
}

.sr-chain__node--measured strong { color: var(--sr-beacon-deep); }

@media (max-width: 760px) {
	.sr-chain { grid-template-columns: 1fr; }
	.sr-chain__node::after {
		top: auto;
		right: auto;
		bottom: calc(-1 * var(--sr-2) - 1px);
		left: 50%;
		width: 1px;
		height: var(--sr-2);
	}
}

/* Website checker */
.sr-checker {
	display: flex;
	gap: var(--sr-2);
	flex-wrap: wrap;
	max-width: 560px;
}

.sr-checker__field {
	flex: 1 1 280px;
	display: flex;
	align-items: center;
	background: var(--sr-surface);
	border: 1px solid var(--sr-line-strong);
	border-radius: var(--sr-radius);
	padding-inline: var(--sr-3);
	transition: border-color var(--sr-motion), box-shadow var(--sr-motion);
}

.sr-checker__field:focus-within {
	border-color: var(--sr-beacon);
	box-shadow: 0 0 0 3px var(--sr-beacon-soft);
}

.sr-checker input {
	flex: 1;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--sr-step-0);
	padding-block: 0.7rem;
	color: var(--sr-ink);
	min-width: 0;
}

.sr-checker input:focus { outline: none; }

.sr-checker__hint {
	font-size: var(--sr-step--1);
	color: var(--sr-mute);
	margin-top: var(--sr-2);
}

.sr-checker__status {
	margin-top: var(--sr-4);
	font-size: var(--sr-step--1);
}

.sr-checker__status[data-state="error"] { color: var(--sr-critical); }

.sr-result {
	margin-top: var(--sr-5);
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-lg);
	overflow: hidden;
}

.sr-result__head {
	padding: var(--sr-4) var(--sr-5);
	border-bottom: 1px solid var(--sr-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sr-3);
	align-items: baseline;
	justify-content: space-between;
}

.sr-result__counts {
	display: flex;
	gap: var(--sr-3);
	flex-wrap: wrap;
	font-size: var(--sr-step--1);
}

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

.sr-result__list li {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: var(--sr-3);
	padding: var(--sr-3) var(--sr-5);
	border-bottom: 1px solid var(--sr-line);
	align-items: start;
}

.sr-result__list li:last-child { border-bottom: 0; }

.sr-result__list strong { font-size: var(--sr-step--1); }

.sr-result__list p {
	margin: var(--sr-1) 0 0;
	font-size: var(--sr-step--1);
	color: var(--sr-graphite);
}

@media (max-width: 620px) {
	.sr-result__list li { grid-template-columns: 1fr; }
}

/* Table of contents */
.sr-toc {
	position: sticky;
	top: 6rem;
	align-self: start;
	font-size: var(--sr-step--1);
	border-left: 1px solid var(--sr-line);
	padding-left: var(--sr-4);
	max-height: calc(100dvh - 8rem);
	overflow-y: auto;
}

.sr-toc h2 {
	font-size: var(--sr-step--1);
	font-weight: 600;
	color: var(--sr-mute);
	margin-bottom: var(--sr-3);
}

.sr-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sr-2);
}

.sr-toc a {
	color: var(--sr-graphite);
	text-decoration: none;
	display: block;
	line-height: 1.4;
}

.sr-toc a:hover,
.sr-toc a[aria-current="true"] {
	color: var(--sr-beacon-deep);
	font-weight: 500;
}

/* Article and resource cards */
.sr-post {
	display: grid;
	gap: var(--sr-2);
	padding-block: var(--sr-5);
	border-bottom: 1px solid var(--sr-line);
}

.sr-post:first-child { padding-top: 0; }

.sr-post h3 {
	font-size: var(--sr-step-1);
	margin: 0;
}

.sr-post h3 a { color: var(--sr-ink); text-decoration: none; }
.sr-post h3 a:hover { color: var(--sr-beacon-deep); }

.sr-post p { margin: 0; color: var(--sr-graphite); max-width: var(--sr-measure); }

.sr-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sr-3);
	font-size: var(--sr-step--1);
	color: var(--sr-mute);
	align-items: center;
}

.sr-meta a { color: var(--sr-mute); }

.sr-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sr-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sr-chip {
	display: inline-block;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	border: 1px solid var(--sr-line-strong);
	background: var(--sr-surface);
	font-size: var(--sr-step--1);
	color: var(--sr-graphite);
	text-decoration: none;
}

.sr-chip:hover,
.sr-chip[aria-current="page"] {
	border-color: var(--sr-beacon);
	color: var(--sr-beacon-deep);
	background: var(--sr-beacon-soft);
}

/* Callouts */
.sr-note {
	border: 1px solid var(--sr-line);
	border-left: 3px solid var(--sr-beacon);
	background: var(--sr-surface);
	border-radius: 0 var(--sr-radius) var(--sr-radius) 0;
	padding: var(--sr-4) var(--sr-5);
}

.sr-note > :last-child { margin-bottom: 0; }

.sr-note--caution { border-left-color: var(--sr-high); }

/* Breadcrumbs */
.sr-crumbs {
	font-size: var(--sr-step--1);
	color: var(--sr-mute);
	padding-block: var(--sr-4) 0;
}

.sr-crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sr-2);
	margin: 0;
	padding: 0;
}

.sr-crumbs li + li::before {
	content: "/";
	margin-right: var(--sr-2);
	color: var(--sr-line-strong);
}

.sr-crumbs a { color: var(--sr-mute); text-decoration: none; }
.sr-crumbs a:hover { color: var(--sr-beacon-deep); text-decoration: underline; }

/* Pagination */
.sr-pagination {
	display: flex;
	gap: var(--sr-2);
	flex-wrap: wrap;
	margin-top: var(--sr-6);
}

.sr-pagination .page-numbers {
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	text-decoration: none;
	background: var(--sr-surface);
	color: var(--sr-graphite);
	font-size: var(--sr-step--1);
}

.sr-pagination .page-numbers.current,
.sr-pagination .page-numbers:hover {
	border-color: var(--sr-beacon);
	color: var(--sr-beacon-deep);
}

/* Definition list used by the glossary */
.sr-terms { display: grid; gap: var(--sr-6); }

.sr-term { scroll-margin-top: 6rem; }

.sr-term h2 {
	font-size: var(--sr-step-2);
	margin-bottom: var(--sr-2);
	display: flex;
	align-items: baseline;
	gap: var(--sr-2);
}

.sr-term__anchor {
	font-size: var(--sr-step--1);
	color: var(--sr-line-strong);
	text-decoration: none;
	opacity: 0;
	transition: opacity var(--sr-motion);
}

.sr-term:hover .sr-term__anchor,
.sr-term__anchor:focus-visible { opacity: 1; }

.sr-term p { max-width: var(--sr-measure); }

/* FAQ */
.sr-faq {
	margin-top: var(--sr-8);
	padding-top: var(--sr-6);
	border-top: 1px solid var(--sr-line);
}

.sr-faq__list {
	display: grid;
	gap: var(--sr-2);
}

.sr-faq__item {
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	padding: var(--sr-4) var(--sr-5);
}

.sr-faq__item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: var(--sr-3);
}

.sr-faq__item summary::-webkit-details-marker { display: none; }

.sr-faq__item summary::after {
	content: "−";
	margin-left: auto;
	color: var(--sr-mute);
	font-size: var(--sr-step-1);
	line-height: 1;
}

.sr-faq__item:not([open]) summary::after { content: "+"; }

.sr-faq__item summary h3 {
	margin: 0;
	font-size: var(--sr-step-1);
	font-weight: 600;
}

.sr-faq__answer { margin-top: var(--sr-3); }
.sr-faq__answer > :last-child { margin-bottom: 0; }

/* Related questions rail */
.sr-questions {
	display: grid;
	gap: var(--sr-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--sr-step--1);
}

.sr-questions a {
	display: block;
	padding: var(--sr-2) 0;
	border-bottom: 1px solid var(--sr-line);
	color: var(--sr-ink);
	text-decoration: none;
	line-height: 1.4;
}

.sr-questions li:last-child a { border-bottom: 0; }
.sr-questions a:hover { color: var(--sr-beacon-deep); }

.sr-questions small {
	display: block;
	color: var(--sr-mute);
	margin-top: 2px;
}

/* Topical map */
.sr-cluster {
	padding-block: var(--sr-6);
	border-top: 1px solid var(--sr-line);
}

.sr-cluster:first-of-type { border-top: 0; padding-top: 0; }

.sr-cluster__head {
	display: flex;
	align-items: baseline;
	gap: var(--sr-3);
}

.sr-cluster__head h2 { margin: 0; font-size: var(--sr-step-2); }

.sr-count {
	font-family: var(--sr-font-mono);
	font-size: var(--sr-step--1);
	color: var(--sr-mute);
	border: 1px solid var(--sr-line);
	border-radius: 999px;
	padding: 0.05em 0.55em;
	flex: none;
}

.sr-cluster__summary {
	color: var(--sr-graphite);
	max-width: var(--sr-measure);
	margin-top: var(--sr-2);
}

.sr-cluster__pillar {
	display: flex;
	align-items: baseline;
	gap: var(--sr-2);
	font-size: var(--sr-step--1);
	margin-bottom: var(--sr-4);
}

.sr-cluster__pillar span {
	color: var(--sr-mute);
	border-left: 2px solid var(--sr-beacon);
	padding-left: var(--sr-2);
}

.sr-cluster__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--sr-1) var(--sr-6);
	counter-reset: none;
}

.sr-cluster__list li {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: var(--sr-2);
	padding-block: var(--sr-2);
	border-bottom: 1px solid var(--sr-line);
	align-items: baseline;
}

.sr-cluster__index {
	font-family: var(--sr-font-mono);
	font-size: var(--sr-step--1);
	color: var(--sr-line-strong);
}

.sr-cluster__list a { color: var(--sr-ink); text-decoration: none; }
.sr-cluster__list a:hover { color: var(--sr-beacon-deep); text-decoration: underline; }