document-layout {
	display: grid;
	/* Left: 70ch readable measure. Right: Persistent TOC sidebar */
	grid-template-columns: minmax(0, 70ch) 18em;
	justify-content: center;
	gap: 3.5em;
	padding-inline: 2em;
	padding-block: 3.5em;
	margin-inline: auto;
	max-width: 85em;
}

legal-article {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	min-width: 0;
}

/* Document Title & Meta Header */
document-meta {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	padding-bottom: 1.5em;
	border-bottom: var(--border);

	h1 {
		margin: 0;
		font-size: 2.5rem;
		font-weight: 800;
		letter-spacing: -0.03em;
		line-height: 1.2;
		color: var(--text-main);
	}

	meta-strip {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5em;
		font-size: 0.85rem;
		color: var(--text-muted);

		time {
			font-weight: 600;
			color: var(--text-main);
		}
	}
}

/* ========================================================================== */
/* --- 2. Interactive Collapsible Section Cards                           --- */
/* ========================================================================== */
details.legal-card {
	border-radius: 0.8em;
	background: var(--glass-bg);
	border: var(--glass-border);
	box-shadow:
		var(--card),
		inset 0 0 10px 5px light-dark(rgb(182, 181, 181), rgb(69, 69, 69));
	backdrop-filter: blur(1.2em);
	overflow: hidden;
	scroll-margin-top: 5.5em; /* Prevents sticky header overlap when jumped */
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;

	&:hover {
		border-color: light-dark(hsla(281, 100%, 50%, 0.3), hsla(281, 100%, 75%, 0.3));
	}

	/* Card Header / Summary Trigger */
	summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-inline: 1.4em;
		padding-block: 1em;
		cursor: pointer;
		user-select: none;
		list-style: none;
		background: light-dark(hsla(0, 0%, 100%, 0.4), hsla(220, 20%, 15%, 0.4));
		border-bottom: 1px solid transparent;

		&::-webkit-details-marker {
			display: none;
		}

		h2 {
			margin: 0;
			font-size: 1.15rem;
			font-weight: 700;
			color: var(--text-main);
			display: inline-flex;
			align-items: center;
			gap: 0.5em;
		}

		/* Direct permalink icon */
		a.permalink {
			text-decoration: none;
			color: var(--text-muted);
			opacity: 0.4;
			font-size: 0.9em;
			padding: 0.2em;
			transition:
				opacity 0.2s ease,
				color 0.2s ease;

			&:hover {
				opacity: 1;
				color: var(--brand-violet);
			}
		}

		svg.chevron {
			flex-shrink: 0;
			width: 1.1em;
			height: 1.1em;
			fill: var(--text-muted);
			transition: rotate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		}
	}

	&[open] {
		summary {
			border-bottom: var(--border);
			svg.chevron {
				rotate: 180deg;
			}
		}
	}

	/* Native Chrome 140+ Smooth Expansion */
	&::details-content {
		height: 0;
		overflow: hidden;
		transition:
			height 0.3s ease-out,
			content-visibility 0.3s allow-discrete;
	}

	&[open]::details-content {
		height: auto;
	}

	card-body {
		display: flex;
		flex-direction: column;
		gap: 1em;
		padding-inline: 1.4em;
		padding-block: 1.2em;

		p {
			margin: 0;
			font-size: 0.95rem;
			line-height: 1.65;
			color: var(--text-main);
		}

		ul {
			margin: 0;
			padding-left: 1.2em;
			display: flex;
			flex-direction: column;
			gap: 0.5em;

			li {
				font-size: 0.95rem;
				line-height: 1.55;
				color: var(--text-main);
			}
		}
	}
}

/* Plain English / TL;DR Highlight Callout */
plain-takeaway {
	display: flex;
	align-items: flex-start;
	gap: 0.8em;
	padding-inline: 1em;
	padding-block: 0.8em;
	border-radius: 0.5em;
	background: var(--brand-violet-tint);
	border-left: 3px solid var(--brand-violet);

	svg.sparkle {
		flex-shrink: 0;
		width: 1.2em;
		height: 1.2em;
		fill: var(--brand-violet);
		margin-top: 0.2em;
	}

	p {
		margin: 0;
		font-size: 0.9rem !important;
		font-weight: 500;
		line-height: 1.5 !important;
		color: var(--text-main) !important;

		strong {
			color: var(--brand-violet);
			font-weight: 700;
		}
	}
}

/* --- 3. Right-Side Persistent Table of Contents                         --- */
document-toc {
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 5.5em;
	height: fit-content;
	padding: 1.4em;
	border-radius: 0.8em;
	background: var(--glass-bg);
	border: var(--glass-border);
	box-shadow:
		var(--card),
		inset 0 0 10px 5px light-dark(rgb(182, 181, 181), rgb(69, 69, 69));
	backdrop-filter: blur(1.2em);

	h4 {
		margin: 0 0 0.8em 0;
		font-size: 0.8rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--text-muted);
	}

	nav {
		display: flex;
		flex-direction: column;
		gap: 0.4em;
		max-height: calc(100vh - 12em);
		overflow-y: auto;
		padding-right: 0.4em;

		a {
			font-size: 0.85rem;
			color: var(--text-muted);
			text-decoration: none;
			padding-inline: 0.5em;
			padding-block: 0.3em;
			border-radius: 0.3em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			transition:
				color 0.2s ease,
				background-color 0.2s ease;

			&:hover {
				color: var(--text-main);
				background: light-dark(hsla(0, 0%, 0%, 0.05), hsla(0, 0%, 100%, 0.05));
			}
		}
	}
}

/* --- 4. Print-Friendly Stylesheet                                      --- */
@media print {
	bg-mesh,
	site-header,
	document-toc,
	a.permalink,
	svg.chevron {
		display: none !important;
	}

	body {
		background: #ffffff !important;
		color: #000000 !important;
	}

	document-layout {
		display: block !important;
		padding: 0 !important;
		max-width: 100% !important;
	}

	details.legal-card {
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		break-inside: avoid;
		margin-bottom: 2em;

		&::details-content {
			height: auto !important;
			overflow: visible !important;
		}

		summary {
			background: transparent !important;
			border-bottom: 2px solid #000000 !important;
			padding: 0 0 0.4em 0 !important;

			h2 {
				color: #000000 !important;
			}
		}

		card-body {
			padding: 0.8em 0 !important;
			p,
			li {
				color: #222222 !important;
			}
		}
	}

	plain-takeaway {
		border-left: 3px solid #333333 !important;
		background: #f4f4f4 !important;
	}
}

/* SVG Path Injections */
document-layout svg {
	&.chevron path {
		d: path("M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z");
	}
	&.sparkle path {
		d: path("M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z");
	}
}