/**
 * The legal document pages.
 *
 * Loaded only on the four pages that host a document. These texts are long by
 * nature, so the work here is navigation and scanning: an index at the top,
 * anchored sections, and tables that stay readable on a phone instead of
 * pushing the whole page sideways.
 */

.c-legal {
	--legal-ink: var(--ink, #14120f);
	--legal-muted: var(--muted, #5c564b);
	--legal-line: var(--line, rgb(20 18 15 / 0.14));
	--legal-raised: var(--canvas-raised, #fffdf8);
	--legal-sunken: var(--canvas-sunken, #ece6da);
	--legal-radius: var(--radius-m, 10px);
}

.c-legal__updated {
	margin-block-end: var(--space-m, 1.5rem);
	font-size: var(--text-2xs, 0.875rem);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide, 0.08em);
	color: var(--legal-muted);
}

/* --- Index ---------------------------------------------------------------- */

.c-legal__toc {
	margin-block-end: var(--space-xl, 3rem);
	padding: var(--space-m, 1.5rem);
	background: var(--legal-raised);
	border: 1px solid var(--legal-line);
	border-radius: var(--legal-radius);
}

.c-legal__toc-title {
	margin: 0 0 0.75rem;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--text-3xs, 0.75rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest, 0.16em);
	color: var(--legal-muted);
}

.c-legal__toc ol {
	display: grid;
	gap: 0.375rem;
	margin: 0;
	padding-inline-start: 1.25rem;
	font-size: var(--text-2xs, 0.875rem);
}

@media (min-width: 48rem) {

	.c-legal__toc ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-m, 1.5rem);
	}
}

/* --- Sections ------------------------------------------------------------- */

.c-legal__section {
	scroll-margin-block-start: var(--space-xl, 3rem);
}

.c-legal__section + .c-legal__section {
	margin-block-start: var(--space-xl, 3rem);
}

.c-legal__subtitle {
	margin-block-start: var(--space-l, 2rem);
}

.c-legal__action {
	margin-block-start: var(--space-s, 1rem);
}

/* --- Identity blocks ------------------------------------------------------ */

.c-legal__facts {
	display: grid;
	gap: 0;
	margin-block: var(--space-m, 1.5rem);
	border-block-start: 1px solid var(--legal-line);
}

.c-legal__fact {
	display: grid;
	gap: 0.125rem;
	padding-block: 0.75rem;
	border-block-end: 1px solid var(--legal-line);
}

@media (min-width: 40rem) {

	.c-legal__fact {
		grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
		gap: var(--space-m, 1.5rem);
		align-items: baseline;
	}
}

.c-legal__fact dt {
	margin: 0;
	font-size: var(--text-2xs, 0.875rem);
	font-weight: 600;
	color: var(--legal-muted);
}

.c-legal__fact dd {
	margin: 0;
}

/* --- Tables --------------------------------------------------------------- */

/*
 * The scroller is focusable and labelled: a table that only moves with a swipe
 * is a table a keyboard cannot read.
 */
.c-legal__scroller {
	max-inline-size: 100%;
	margin-block: var(--space-m, 1.5rem);
	overflow-x: auto;
	border: 1px solid var(--legal-line);
	border-radius: var(--legal-radius);
}

.c-legal__scroller:focus-visible {
	outline: 2px solid var(--legal-ink);
	outline-offset: 2px;
}

.c-legal__table {
	inline-size: 100%;
	min-inline-size: 34rem;
	border-collapse: collapse;
	font-size: var(--text-2xs, 0.875rem);
	text-align: start;
}

.c-legal__table caption {
	padding: 0.75rem var(--space-s, 1rem);
	background: var(--legal-sunken);
	font-size: var(--text-3xs, 0.75rem);
	font-weight: 600;
	text-align: start;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide, 0.08em);
	color: var(--legal-muted);
}

.c-legal__table th,
.c-legal__table td {
	padding: 0.75rem var(--space-s, 1rem);
	border-block-start: 1px solid var(--legal-line);
	text-align: start;
	vertical-align: top;
	line-height: var(--leading-normal, 1.6);
}

.c-legal__table thead th {
	background: var(--legal-raised);
	font-weight: 600;
	white-space: nowrap;
}

.c-legal__table tbody th {
	font-weight: 600;
}

.c-legal__table code {
	font-family: var(--font-mono, ui-monospace, Menlo, monospace);
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

/* --- Current consent ------------------------------------------------------ */

.c-legal__status {
	padding: var(--space-m, 1.5rem);
	background: var(--legal-raised);
	border: 1px solid var(--legal-line);
	border-radius: var(--legal-radius);
}

.c-legal__status-line {
	margin: 0 0 0.75rem;
	font-size: var(--text-2xs, 0.875rem);
	color: var(--legal-muted);
}

.c-legal__status-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-legal__status-item {
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--legal-line);
	border-radius: var(--radius-pill, 100vmax);
	font-size: var(--text-3xs, 0.75rem);
	font-weight: 600;
}

/*
 * On and off differ by more than colour: the border weight and the leading
 * mark change too, so the state survives a greyscale screen.
 */
.c-legal__status-item.is-on {
	border-color: var(--success, #17614a);
	background: var(--success-soft, #e6f2ed);
	color: var(--success, #17614a);
}

.c-legal__status-item.is-on::before {
	content: "\2713\00a0";
}

.c-legal__status-item.is-off {
	border-style: dashed;
	color: var(--legal-muted);
}

.c-legal__status-item.is-off::before {
	content: "\2013\00a0";
}