/* Legal pages (S24, S25, S33, S34): meta row, document chips, language note, contents list, numbered sections, empty state. */

.lg-crumb {
	order: -1;
}

.lg-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8) var(--sp-24);
	color: var(--gray-100);
}

.lg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
}

.lg-chips a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: var(--sp-16);
	border: var(--hairline) solid var(--ln-s);
	border-radius: var(--radius-control);
	color: var(--gray-100);
	font-size: var(--fs-b);
	transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.lg-chips a:hover {
	color: var(--white);
	border-color: var(--hi);
}

.lg-chips a[aria-current="page"] {
	background: var(--hi);
	border-color: var(--hi);
	color: var(--ink-900);
	font-weight: 700;
}

.lg {
	padding-block: clamp(48px, 7vw, 112px);
}

.lg-note {
	max-inline-size: 72ch;
	margin-block-end: var(--sp-32);
	padding: var(--sp-12) var(--sp-16);
	border-inline-start: 2px solid var(--hi);
	background: var(--hi-wash);
	color: var(--fg2);
	font-size: var(--fs-b);
}

.lg-grid {
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.lg-grid.lg-solo {
	grid-template-columns: minmax(0, 1fr);
}

/* Contents: sticky beside the text, a disclosure under 1000 px */
.lg-toc {
	position: sticky;
	inset-block-start: calc(var(--hdr-h) + var(--sp-24));
}

.lg-toc summary {
	cursor: pointer;
	padding-block: var(--sp-8);
	color: var(--fg2);
	list-style: none;
}

.lg-toc summary::-webkit-details-marker {
	display: none;
}

.lg-toc summary::after {
	content: "+";
	margin-inline-start: var(--sp-8);
	color: var(--hi);
}

.lg-toc details[open] summary::after {
	content: "\2212";
}

.lg-toc ol {
	display: grid;
	margin-block-start: var(--sp-8);
	border-inline-start: var(--hairline) solid var(--ln-s);
	list-style: none;
}

.lg-toc a {
	display: flex;
	gap: var(--sp-12);
	align-items: baseline;
	padding: var(--sp-8) var(--sp-16);
	margin-inline-start: -1px;
	border-inline-start: 2px solid transparent;
	color: var(--fg2);
	font-size: var(--fs-b);
}

.lg-toc a i {
	color: var(--hi);
	font-style: normal;
}

.lg-toc a:hover,
.lg-toc a.on {
	color: var(--fg);
}

.lg-toc a.on {
	border-inline-start-color: var(--hi);
}

/* Reading column: about 72 characters, body at the lead size (17 px and up) */
.lg-body {
	max-inline-size: 72ch;
}

.lg-sec + .lg-sec {
	margin-block-start: clamp(36px, 5vw, 64px);
}

.lg-sec h2 {
	display: flex;
	gap: var(--sp-16);
	align-items: baseline;
	margin-block-end: var(--sp-16);
	font-size: clamp(24px, 2.4vw, 36px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.03em;
	scroll-margin-block-start: calc(var(--hdr-h) + var(--sp-24));
}

.lg-sec h2 i {
	color: var(--hi);
	font-size: var(--fs-b);
	font-style: normal;
}

.lg-sec p,
.lg-sec li {
	color: var(--fg2);
	font-size: var(--fs-lead);
	line-height: 1.65;
}

.lg-sec p + p,
.lg-sec p + ul,
.lg-sec ul + p {
	margin-block-start: 1em;
}

.lg-sec ul {
	display: grid;
	gap: var(--sp-8);
	padding-inline-start: 1.2em;
}

.lg-act {
	margin-block-start: var(--sp-48);
}

.lg-mail {
	color: var(--hi);
	font-size: var(--fs-lead);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Empty: the text is not published yet */
.lg-wait {
	display: grid;
	gap: var(--sp-16);
	justify-items: start;
	max-inline-size: 60ch;
}

.lg-wait h2 {
	font-size: clamp(28px, 3.4vw, 52px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.lg-wait p {
	color: var(--fg2);
	font-size: var(--fs-lead);
}

.lg-wait .lg-act {
	margin-block-start: var(--sp-16);
}

@media (max-width: 999px) {
	.lg-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-32);
	}

	.lg-toc {
		position: static;
		padding: var(--sp-8) var(--sp-16);
		border: var(--hairline) solid var(--ln-s);
	}
}