.DocumentationHeader {
	max-width: 860px;
}

.DocumentationArticleList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--SpaceM);
	align-items: stretch;
}

.DocumentationArticleCard {
	min-height: 12rem;
	color: inherit;
	text-decoration: none;
}

.DocumentationArticleCard:hover,
.DocumentationArticleCard:focus-visible {
	border-color: var(--ColorAqua);
	background: var(--ColorSurface);
	color: inherit;
	outline: none;
}

.DocumentationArticle {
	display: grid;
	gap: var(--SpaceXL);
}

.DocumentationArticleHeader {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
	gap: var(--Space2XL);
	align-items: end;
	margin-bottom: var(--SpaceS);
}

.DocumentationTitleBlock {
	display: grid;
	gap: var(--SpaceS);
	min-width: 0;
}

.DocumentationTitleBlock .PageTitle {
	max-width: 840px;
	font-size: 4rem;
	line-height: 1;
}

.ArticleReferencePanel {
	display: grid;
	gap: var(--SpaceS);
	padding: var(--SpaceM) 0 0 var(--SpaceL);
	border-left: 1px solid var(--ColorHairline);
	color: var(--ColorMuted);
}

.ArticleReferenceLinks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceXS);
}

.ArticleReferenceLinks a {
	display: inline-flex;
	min-height: 2rem;
	align-items: center;
	padding: 0 var(--SpaceS);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusSmall);
	background: rgba(255, 255, 255, 0.64);
	font-weight: 800;
	text-decoration: none;
}

.ReadingPosition {
	margin-top: 0;
}

.ReadingPosition .TextBlock {
	max-width: 92ch;
	column-count: 2;
	column-gap: var(--Space2XL);
}

.ReadingPosition .TextBlock .SectionTitle {
	column-span: all;
}

.ReadingPosition .TextBlock p {
	break-inside: avoid;
}

.ReadingTableWrap {
	overflow-x: auto;
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: rgba(255, 255, 255, 0.74);
}

.ReadingTable {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
}

.ReadingTable th,
.ReadingTable td {
	padding: var(--SpaceS) var(--SpaceM);
	border-bottom: 1px solid var(--ColorHairline);
	text-align: left;
	vertical-align: top;
}

.ReadingTable thead th {
	background: color-mix(in srgb, var(--ColorAquaSoft) 70%, #ffffff);
	color: var(--ColorInk);
	font-size: 0.78rem;
	font-weight: 850;
	text-transform: uppercase;
}

.ReadingTable tbody th {
	width: 18%;
	color: var(--ColorInk);
	font-weight: 800;
}

.ReadingTable tbody tr:last-child th,
.ReadingTable tbody tr:last-child td {
	border-bottom: 0;
}

.ReadingTable td {
	color: var(--ColorText);
}

.ReadingTableCompact {
	min-width: 620px;
}

.ReadingPillGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--SpaceM);
}

.ReadingPill {
	display: grid;
	gap: var(--Space2XS);
	padding: var(--SpaceM);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusSmall);
	background: rgba(255, 255, 255, 0.7);
}

.ReadingPill span {
	color: var(--ColorMuted);
}

.ReferenceLink {
	margin-left: 0.15rem;
	font-size: 0.82em;
	font-weight: 800;
	text-decoration: none;
	vertical-align: super;
}

.References {
	max-width: var(--LineLength);
	padding-top: var(--SpaceL);
	border-top: 1px solid var(--ColorHairline);
	color: var(--ColorMuted);
	font-size: 0.95rem;
}

.References > * + * {
	margin-top: var(--SpaceS);
}

.ReferenceList {
	display: grid;
	gap: var(--SpaceS);
	padding-left: 1.25rem;
	list-style: decimal;
}

.ReferenceList li:target {
	padding: var(--SpaceXS);
	border-radius: var(--RadiusSmall);
	background: var(--ColorGoldSoft);
	color: var(--ColorText);
}

@media (max-width: 560px) {
	.DocumentationHeader .PageTitle,
	.DocumentationTitleBlock .PageTitle {
		font-size: 2.8rem;
	}
}

@media (max-width: 860px) {
	.DocumentationArticleHeader {
		grid-template-columns: 1fr;
		gap: var(--SpaceL);
	}

	.ArticleReferencePanel {
		padding: var(--SpaceM) 0 0;
		border-top: 1px solid var(--ColorHairline);
		border-left: 0;
	}

	.ReadingPosition .TextBlock {
		max-width: var(--LineLength);
		column-count: 1;
	}
}