/*
 * The Privacy Policy and the Terms and Conditions (cili/legal/legal.php; the owner's request of 2026-10-23):
 * cili/legal/page.php's `main.lcr-legal`, on those two pages only.
 *
 * A long text set to be read: one column the width of the text container, the web body type a step larger, headings
 * in the section and title styles, the contents in a panel, links underlined in ink (grayscale only, ADR-0018, Q48),
 * and the focus ring of the frame (layout-frame.css, WEB-622). Both modes come from the tokens alone: every value is a
 * design token (design-tokens.css, design-tokens-dark.css), which ./scripts/verify.sh checks. Every rule starts with
 * `html body`, as the other layouts do, so it wins a tie with a vendor rule whatever the order. A section a link names
 * stops under the header (scroll-margin-top).
 */

/* ------------------------------------------------------------------------------------------------- the page */

html body .lcr-legal {
	max-width: var(--lcr-web-container-text);
	margin: var(--lcr-space-24) 0 var(--lcr-space-64);
	color: var(--lcr-color-body);
	font-size: var(--lcr-web-type-body-large-font-size);
	font-weight: var(--lcr-web-type-body-large-font-weight);
	letter-spacing: var(--lcr-web-type-body-large-letter-spacing);
	line-height: var(--lcr-web-type-body-large-line-height);
	overflow-wrap: anywhere;
}

html body .lcr-legal p,
html body .lcr-legal ul,
html body .lcr-legal ol {
	margin: 0 0 var(--lcr-space-16);
	text-wrap: pretty; /* no lone last word */
}

html body .lcr-legal ul,
html body .lcr-legal ol {
	padding-left: var(--lcr-space-24);
}

html body .lcr-legal li {
	margin: 0 0 var(--lcr-space-8);
}

html body .lcr-legal li > ul {
	margin: var(--lcr-space-8) 0 0;
}

html body .lcr-legal strong {
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-semibold);
}

html body .lcr-legal code {
	font-size: var(--lcr-type-small-font-size);
}

/* The date of the current text. */
html body .lcr-legal .lcr-legal-updated {
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-meta-font-size);
	font-weight: var(--lcr-type-meta-font-weight);
	line-height: var(--lcr-type-meta-line-height);
}

/* ------------------------------------------------------------------------------------------------- headings */

html body .lcr-legal h2 {
	margin: var(--lcr-space-40) 0 var(--lcr-space-16);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-section-font-size);
	font-weight: var(--lcr-type-section-font-weight);
	letter-spacing: var(--lcr-type-section-letter-spacing);
	line-height: var(--lcr-type-section-line-height);
}

html body .lcr-legal h3 {
	margin: var(--lcr-space-28) 0 var(--lcr-space-12);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-title-font-size);
	font-weight: var(--lcr-type-title-font-weight);
	letter-spacing: var(--lcr-type-title-letter-spacing);
	line-height: var(--lcr-type-title-line-height);
}

html body .lcr-legal section {
	scroll-margin-top: var(--lcr-web-header-height-desktop);
}

/* ------------------------------------------------------------------------------------------------- the contents */

html body .lcr-legal .lcr-legal-contents {
	margin: var(--lcr-space-24) 0 var(--lcr-space-32);
	padding: var(--lcr-space-20) var(--lcr-space-24);
	border-radius: var(--lcr-radius-panel);
	background-color: var(--lcr-color-panel);
}

html body .lcr-legal .lcr-legal-contents h2 {
	margin: 0 0 var(--lcr-space-12);
	font-size: var(--lcr-type-title-font-size);
	font-weight: var(--lcr-type-title-font-weight);
	letter-spacing: var(--lcr-type-title-letter-spacing);
	line-height: var(--lcr-type-title-line-height);
}

html body .lcr-legal .lcr-legal-contents ol {
	margin: 0;
}

html body .lcr-legal .lcr-legal-contents li {
	margin: 0 0 var(--lcr-space-4);
}

/* ------------------------------------------------------------------------------------------------- links */

html body .lcr-legal a {
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-medium);
	text-decoration: underline;
	text-underline-offset: var(--lcr-space-4);
}

html body .lcr-legal a:hover {
	color: var(--lcr-color-body);
}

@media (max-width: 1199.98px) {
	html body .lcr-legal section {
		scroll-margin-top: var(--lcr-web-header-height-phone);
	}

	html body .lcr-legal .lcr-legal-contents {
		padding: var(--lcr-space-16) var(--lcr-space-20);
	}
}