/* Legal pages (Privacy, Terms, Cookie policy), book p17: plain and dated. Hero with the date, sticky table of
   contents on desktop (folded list on phones), readable body. Royal Original tokens only. */

.legal-hero {
	display: grid; gap: var(--space-4); justify-items: start;
	padding: var(--section-padding) var(--page-inline) var(--space-7);
	border-bottom: 1px solid var(--color-border);
}
.legal-hero__date { color: var(--color-text-muted); }

.legal { display: grid; gap: var(--space-6); padding: var(--space-7) var(--page-inline) var(--section-padding); }

/* Table of contents */
.legal-toc ol { display: grid; gap: var(--space-1); padding: 0; }
.legal-toc a {
	display: flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3);
	border-left: 2px solid transparent;
	color: var(--color-text-muted); line-height: var(--line-height-small); text-decoration: none;
}
@media (hover: hover) { .legal-toc a:hover { color: var(--color-text); text-decoration: underline; } }
.legal-toc a[aria-current="true"] { color: var(--color-primary); border-left-color: var(--color-primary); }
.legal-toc--mobile { border: 1px solid var(--color-control-border); border-radius: var(--radius-card); background: var(--color-surface); padding: 0 var(--space-4); }
.legal-toc--mobile summary {
	list-style: none; cursor: pointer; min-height: 56px;
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	font-size: 18px; font-weight: var(--font-weight-label);
}
.legal-toc--mobile summary::-webkit-details-marker { display: none; }
.legal-toc--mobile summary::after {
	content: ''; flex: none; width: 10px; height: 10px; margin-right: 6px;
	border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-3px) rotate(45deg);
}
.legal-toc--mobile[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.legal-toc--mobile ol { padding-bottom: var(--space-4); }
.legal-toc--desktop { display: none; }
.legal-toc__title { padding: 0 var(--space-3) var(--space-3); font-weight: var(--font-weight-label); color: var(--color-text); }

/* Content: 55-75ch reading measure */
.legal__content { min-width: 0; max-width: var(--measure-body); overflow-wrap: anywhere; }
.legal__content h2 {
	scroll-margin-top: calc(var(--header-height) + 24px);
	margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--color-border);
	font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3);
}
.legal__content > h2:first-child, .legal__content > :first-child h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__content h3 { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.legal__content h4, .legal__content h5 { font-size: 18px; font-weight: var(--font-weight-label); line-height: 1.35; letter-spacing: 0; }
.legal__content ul, .legal__content ol { padding-left: 1.25em; }
.legal__content li + li { margin-top: var(--space-2); }
.legal__content mark { padding: 0 .25em; border-radius: 4px; background: var(--color-warning-bg); color: var(--color-warning); font-weight: var(--font-weight-label); }

/* The one way to reopen the cookie banner (Complianz: button.cmplz-manage-consent). A plain text link. */
.legal-consent-link {
	padding: 0; min-height: 44px; font: inherit; text-align: left; background: none; border: 0; cursor: pointer;
	color: var(--color-link); text-decoration: underline;
}

/* Cookie table: two tables (fixed head + body, shared colgroup), rounded top, scrolls inside its own box on phones. */
.legal-table { margin-top: 1em; overflow-x: auto; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.legal-table__inner { min-width: 760px; }
.legal-table table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin: 0; }
.legal-table .c-name { width: 29%; }
.legal-table .c-purpose { width: 26%; }
.legal-table .c-life { width: 17%; }
.legal-table .c-party { width: 12%; }
.legal-table .c-how { width: 16%; }
.legal-table code { font-size: 14px; overflow-wrap: normal; }
.legal-table th, .legal-table td { padding: var(--space-3) var(--space-2); text-align: left; vertical-align: top; overflow-wrap: anywhere; font-size: var(--font-size-small); line-height: var(--line-height-small); }
.legal-table__head th { background: var(--color-surface-tint); font-weight: var(--font-weight-label); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.legal-table__head th:first-child { border-left: 1px solid var(--color-border); border-top-left-radius: var(--radius-card); }
.legal-table__head th:last-child { border-right: 1px solid var(--color-border); border-top-right-radius: var(--radius-card); }
.legal-table__body th, .legal-table__body td { background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-weight: 400; }
.legal-table__body tr > :first-child { border-left: 1px solid var(--color-border); }
.legal-table__body tr > :last-child { border-right: 1px solid var(--color-border); }

/* Spacing inside the text. */
.legal__content :is(p, ul, ol, h4, h5) { margin-top: 1em; }
.legal__content h3 { margin-top: 1.8em; }
.legal__content :is(h3, h4, h5) + :is(p, ul, ol) { margin-top: .5em; }
.legal__content li > p { margin-top: 0; }
.legal__content > :first-child, .legal__content > :first-child > :first-child { margin-top: 0; }

@media (min-width: 1024px) {
	.legal { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--grid-gap); align-items: start; }
	.legal--no-toc { grid-template-columns: minmax(0, 1fr); }
	.legal-toc--mobile { display: none; }
	.legal-toc--desktop {
		display: block; position: sticky; top: calc(var(--header-height) + 24px);
		max-height: calc(100vh - var(--header-height) - 48px); overflow-y: auto; scrollbar-width: thin;
		padding-right: var(--space-4);
	}
}
@media (min-width: 783px) { .admin-bar .legal-toc--desktop { top: calc(var(--header-height) + 56px); } }