/* Legal template (page.php, boards legal-v1 / -mobile). The text is the page's own content, so everything below
   styles plain blocks: paragraphs, lists, h3-h6, quotes, tables, images. Desktop (1024+): a sticky contents rail on
   columns 1-3 and the text on 5-12. Tablet 768-1023 (not on the boards) and mobile: the contents as a card above
   the text; tablet lists it in two columns. */

/* ---------- Page head: board 56 / 40, label -> title 28, title stack 16 (mobile 40 / 28, 20, 14) ---------- */
.legal-head .page-title-col { gap: 14px; margin-top: 20px; }
.legal-h1 { font-size: clamp(2.125rem, 1.729rem + 1.69vw, 3.25rem); } /* 34 -> 52 */
.legal-lead { display: grid; gap: 14px; max-width: 700px; }
.legal-lead p { font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.7; }
.legal-lead .legal-updated { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.45; color: var(--quiet); }
.legal-lead .legal-updated :is(em, i) { font-style: normal; }

.legal-body { display: grid; gap: 32px; align-items: start; padding-bottom: clamp(3rem, 2.472rem + 2.254vw, 4.5rem); } /* 48 / 72 */

/* ---------- Contents ---------- */
.legal-toc { background: var(--ground-alt); box-shadow: inset 0 0 0 1px var(--line); }
.legal-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; box-shadow: inset 0 -1px 0 var(--line); }
.legal-toc-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; color: var(--sage-deep); }
.legal-toc-toggle {
	flex: none; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: none; cursor: pointer;
	color: var(--sage-deep); font-family: var(--font-sans); font-size: 16px; font-weight: 300;
}
.legal-toc-toggle::before { content: "\2212"; } /* minus: open */
.legal-toc-toggle[aria-expanded="false"]::before { content: "+"; }
.legal-toc-list { margin: 0; padding: 0; list-style: none; }
.legal-toc-list a { display: flex; gap: 12px; padding: 8px 16px; text-decoration: none; font-size: 13px; line-height: 20px; color: var(--quiet); }
.legal-toc-list a:hover .legal-toc-txt { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.legal-toc-list a[aria-current="true"] { font-weight: 500; color: var(--ink); }
.legal-toc-num { flex: none; width: 18px; padding-top: 2px; font-size: 11px; font-weight: 300; line-height: 1.5; color: var(--quiet); }
.legal-toc-list[hidden] { display: none; }
.legal-toc-more {
	display: block; width: 100%; min-height: 40px; padding: 10px 16px; border: 0; background: none; box-shadow: inset 0 1px 0 var(--line);
	text-align: left; cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--sage-deep);
}
.legal-toc-more[hidden] { display: none; }

/* ---------- Sections and text ---------- */
.legal-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-width: 0; }
.legal-sec { scroll-margin-top: 8px; } /* + the page's scroll-padding-top 80 (the sticky nav, main.css) = 88 */
.legal-sec-h { display: flex; gap: 12px; margin-bottom: 12px; font-weight: 300; }
.legal-num { flex: none; width: 24px; font-size: 22px; font-weight: 200; line-height: 1.2; color: var(--sage-deep); }
.legal-sec-title { min-width: 0; font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.legal-sec .legal-text { padding-left: 36px; }

.legal-text { display: grid; gap: 10px; min-width: 0; font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; } /* a long URL wraps */
.legal-text > * { margin: 0; max-width: 100%; }
.legal-text a { color: var(--sage-deep); text-decoration-color: var(--sage); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-text strong, .legal-text b { font-weight: 700; }
.legal-text :is(h3, h4, h5, h6) { margin-top: 8px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.5; }
.legal-text :is(h4, h5, h6) { font-size: 14px; }
.legal-text ul, .legal-text ol { display: grid; gap: 10px; padding: 0; list-style: none; }
.legal-text ol > li { display: list-item; }
.legal-text li { position: relative; padding-left: 17px; }
.legal-text ul > li { padding-block: 2px; }
.legal-text ul > li::before { content: ""; position: absolute; left: 0; top: calc(2px + 0.75em); width: 5px; height: 5px; background: var(--sage); } /* the boards' square dot, centred on the first line */
.legal-text ol { padding-left: 24px; list-style: decimal; } /* native numbers: a start number set in wp-admin still works */
.legal-text ol > li { padding-left: 0; }
.legal-text ol > li::marker { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--sage-deep); }
.legal-text li > :is(ul, ol) { margin-top: 10px; }
.legal-text blockquote { padding-left: 16px; box-shadow: inset 2px 0 0 var(--line); }
.legal-text table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13px; line-height: 1.5; }
.legal-text figure.wp-block-table { overflow-x: auto; }
.legal-text :is(table, thead, tbody, tfoot, tr, th, td) { border: 0; } /* WordPress's table block draws black borders */
.legal-text :is(th, td) { min-width: 96px; padding: 8px 12px 8px 0; text-align: left; vertical-align: top; overflow-wrap: normal; box-shadow: inset 0 -1px 0 var(--line); }
.legal-text thead :is(th, td) { box-shadow: inset 0 -1px 0 var(--ink); }
.legal-text h2 { font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; font-size: 20px; line-height: 1.3; } /* an h2 inside a group: not a section */
.legal-text th { font-weight: 500; }
.legal-text img { height: auto; }
.legal-text hr { width: 100%; height: 1px; border: 0; background: var(--line); }

@media (max-width: 1023.98px) {
	.legal-toc.is-short .legal-toc-list li:nth-child(n + 9) { display: none; } /* "Show the rest" (js/legal.js) */
	/* Until legal.js has run (html.js, not yet .legal-ready): the toggle and the cut list it sets, from the first paint, so
	   it shifts nothing (port 7). has-more = more than nine entries, printed by page.php. */
	.js:not(.legal-ready) .legal-toc-toggle[hidden] { display: inline-block; }
	.js:not(.legal-ready) .legal-toc.has-more .legal-toc-list li:nth-child(n + 9) { display: none; }
	.js:not(.legal-ready) .legal-toc.has-more .legal-toc-more[hidden] { display: block; }
}

@media (min-width: 768px) {
	.legal-head { padding-bottom: 40px; }
	.legal-head .page-title-col { gap: 16px; margin-top: 28px; }
	.legal-lead { gap: 16px; }

	.legal-toc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: 4px; }
	.legal-toc-list li { min-width: 0; }

	.legal-main { gap: 40px; max-width: 872px; }
	.legal-sec-h { gap: 16px; margin-bottom: 16px; }
	.legal-num { width: 40px; font-size: 26px; }
	.legal-sec-title { font-size: 26px; }
	.legal-sec .legal-text { padding-left: 56px; }
	.legal-text { gap: 12px; }
	.legal-text ul, .legal-text ol { gap: 12px; }
	.legal-text li { padding-left: 19px; }
	.legal-text :is(h3, h4, h5, h6) { margin-top: 12px; }
}

@media (min-width: 1024px) {
	.legal-body.has-toc { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.legal-body.has-toc .legal-main { grid-column: 5 / -1; }
	.legal-body:not(.has-toc) .legal-main { grid-column: 1 / -1; }

	/* The rail: sticky beside the text, scrolling on its own when taller than the window. */
	.legal-toc {
		grid-column: 1 / span 3; position: sticky; top: 96px; max-height: calc(100vh - 128px); overflow-y: auto;
		background: none; box-shadow: inset 0 1px 0 var(--line);
	}
	.legal-toc-head { min-height: 44px; padding: 0; }
	.legal-toc-toggle, .legal-toc-more { display: none; }
	.legal-toc-list { display: block; padding: 0; }
	.legal-toc-list[hidden] { display: block; } /* the rail always lists everything */
	.legal-toc-list a { gap: 12px; padding: 9px 0; }
	.legal-toc-num { width: 22px; }
	.legal-sec { scroll-margin-top: 16px; } /* + 80 = 96 */
}