/* site/src/assets/css/page-legal.css
 * The four small print pages: /privacy, /terms, /cookies, /refunds.
 *
 * These are the plainest pages on the site, so the one idea here is TWO
 * VOICES. Every clause is written twice: a short human sentence set big and
 * in full black, and the careful wording underneath set smaller and grey.
 * Skim the page at arm's length and you read a complete plain English
 * summary; stop and lean in and you read the document. The reader chooses
 * which voice they want with the controls at the top.
 *
 * No JavaScript. The controls are radio buttons and :has(), the contents is
 * a list of anchors, the progress gauge is a scroll timeline. A browser that
 * supports none of that still gets the whole document at a readable size,
 * which is the only thing that actually matters on a legal page.
 *
 * Used by privacy.html, terms.html, cookies.html and refunds.html. Each page
 * sets its own accent with a .legal--<name> class.
 */

/* ── the page ────────────────────────────────────────────────────────── */
.legal {
	/* --read is the reader's text size multiplier, set by the radios below.
	   Every body measurement is written against it, so one click moves the
	   whole document and nothing else. */
	--read: 1;
	--accent: var(--teal);
	/* The accents are bright enough to sit on the dark masthead and too
	   bright for small text on paper, so anything set in the accent at
	   reading size uses the darkened version instead. */
	--accent-ink: color-mix(in srgb, var(--accent) 58%, #0a0a0f);
	/* And the other way round: the accent used for SMALL type on the black
	   masthead. Three of the four accents are bright enough as they are, so
	   by default this is simply the accent. Terms overrides it below. */
	--accent-small: var(--accent);
	--body: calc(var(--read) * clamp(16.5px, 1.05vw, 18.5px));
	--measure: 62ch;

	background: var(--paper);
	padding-bottom: clamp(60px, 9vh, 110px);
}

.legal--privacy { --accent: var(--teal); }
.legal--terms { --accent: var(--blue); }
.legal--cookies { --accent: var(--amber); }
.legal--refunds { --accent: var(--pink); }

/* Blue is the one accent that is mid dark rather than bright: 14px of it on
   the black masthead measures about 4.2:1, under the 4.5 everything else on
   these pages clears. Terms lightens its accent for small type and for the
   one solid button, and keeps the pure blue for the huge headings, where the
   bar is 3:1 and it passes comfortably. */
.legal--terms { --accent-small: color-mix(in srgb, var(--accent) 76%, #fff); }

.legal__wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* ── masthead ────────────────────────────────────────────────────────── */
.legal__head {
	position: relative;
	background: var(--ink);
	color: var(--paper);
	padding: clamp(96px, 16vh, 170px) 0 clamp(34px, 6vh, 64px);
	overflow: hidden;
	isolation: isolate;
}

/* The document's own word, huge and faint behind the headline. Decoration
   only — the real title is the h1 in front of it. */
.legal__ghost {
	position: absolute;
	right: -.06em;
	bottom: -.22em;
	font: 800 clamp(120px, 30vw, 340px)/.7 var(--display);
	letter-spacing: -.06em;
	text-transform: uppercase;
	color: var(--accent);
	opacity: .13;
	pointer-events: none;
	z-index: -1;
	white-space: nowrap;
}

/* The draft warning has to reach someone who reads the headline and leaves,
   so it starts here — above the h1, in the first thing on the page — and the
   full explanation follows in the taped box further down. Two chances to see
   it, neither of them below the fold on a phone. */
.legal__flag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	font: 500 clamp(11px, .78vw, 13px)/1.4 var(--mono);
	letter-spacing: .13em;
	text-transform: uppercase;
}

.legal__flag-tag {
	background: var(--yellow);
	color: var(--ink);
	font-weight: 700;
	letter-spacing: .18em;
	padding: 7px 12px;
	border-radius: 999px;
}

.legal__flag-text { color: var(--accent-small); }

.legal__head h1 {
	font: 800 clamp(42px, 8.4vw, 104px)/.9 var(--display);
	letter-spacing: -.045em;
	margin-top: 12px;
	text-wrap: balance;
}

.legal__stand {
	margin-top: 16px;
	max-width: 46ch;
	color: rgba(251, 249, 244, .74);
	font-size: calc(var(--read) * clamp(16px, 1.2vw, 19px));
}

.legal__rule {
	margin-top: clamp(24px, 4vh, 40px);
	height: 4px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--accent), transparent 82%);
}

.legal__dateline {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	color: rgba(251, 249, 244, .6);
	font: 500 13px/1.5 var(--mono);
	letter-spacing: .04em;
}

/* ── the draft warning ───────────────────────────────────────────────── */
/* Hazard tape. These pages have not been near a lawyer and nobody should be
   able to miss that, including someone skimming on a phone in the sun. */
.draft {
	margin: clamp(22px, 4vh, 38px) 0 0;
	padding: 7px;
	border-radius: 14px;
	background: repeating-linear-gradient(135deg, var(--yellow) 0 18px, #14141c 18px 36px);
}

.draft__inner {
	background: var(--paper);
	color: var(--ink);
	border-radius: 8px;
	padding: clamp(16px, 3vw, 24px);
}

.draft__tag {
	display: inline-block;
	background: var(--ink);
	color: var(--yellow);
	padding: 7px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
}

/* :not(.label) so the mono tag above keeps its own type — .label is a single
   class and would otherwise lose to this two part selector. */
.draft__inner p:not(.label) {
	font-size: calc(var(--read) * clamp(16px, 1.15vw, 18.5px));
	max-width: 56ch;
}
.draft__inner p + p { margin-top: 10px; }
.draft__inner b { font-weight: 700; }

/* ── reading controls ────────────────────────────────────────────────── */
.reader {
	margin-top: clamp(30px, 5vh, 54px);
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.reader__set {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 14px 16px 16px;
	background: #fff;
}

.reader__set legend {
	padding: 0 6px;
	color: var(--ink-soft);
}

.pills {
	position: relative; /* keeps the off screen radios anchored beside their
	                       labels, so tabbing to one does not jump the page */
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

/* The radio itself is off screen but still focusable and still in the tab
   order — the label is the visible control. */
.pills input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.pills label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font: 500 14px/1 var(--mono);
	letter-spacing: .03em;
	cursor: pointer;
	background: var(--paper);
	transition: background .18s, color .18s, border-color .18s;
}
.pills label:hover { border-color: var(--ink); }

.pills input:checked + label {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.pills input:focus-visible + label {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

.reader__note {
	margin-top: 10px;
	color: var(--ink-soft);
	font-size: calc(var(--read) * 15px);
	max-width: 46ch;
}

/* The controls. Scoped to .legal so one page's radios cannot reach another
   page's clauses, and written with :has() so none of this needs a script.
   A browser without :has() shows the whole document at the normal size,
   which is the safe end of the choice. */
.legal:has(#sz-l:checked) { --read: 1.18; }
.legal:has(#sz-x:checked) { --read: 1.38; }
.legal:has(#md-short:checked) .clause__full { display: none; }
.legal:has(#md-short:checked) .clause { padding-bottom: clamp(18px, 3vh, 26px); }

/* ── contents ────────────────────────────────────────────────────────── */
.toc {
	margin-top: clamp(30px, 5vh, 54px);
	border-top: 2px solid var(--ink);
	scroll-margin-top: 84px; /* the "↑ Contents" jump must clear the fixed nav */
}

.toc h2 {
	font: 700 clamp(20px, 2.2vw, 26px)/1.2 var(--display);
	letter-spacing: -.02em;
	margin: 18px 0 6px;
}

.toc ol {
	list-style: none;
	margin-top: 10px;
	border-top: 1px solid var(--line);
}

.toc li { border-bottom: 1px solid var(--line); }

.toc a {
	display: grid;
	grid-template-columns: 2.6em 1fr;
	gap: 4px 14px;
	align-items: baseline;
	min-height: 44px;
	padding: 13px 4px;
	text-decoration: none;
	transition: background .18s;
}
.toc a:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

.toc__no {
	font: 600 14px/1.4 var(--mono);
	color: var(--accent-ink);
}

.toc__name {
	font-weight: 600;
	font-size: calc(var(--read) * 17px);
}

.toc__gist {
	grid-column: 2;
	color: var(--ink-soft);
	font-size: calc(var(--read) * 14.5px);
}

/* ── clauses ─────────────────────────────────────────────────────────── */
.clauses { margin-top: clamp(40px, 7vh, 72px); }

.clause {
	position: relative;
	padding: clamp(26px, 4.5vh, 44px) 0;
	border-top: 1px solid var(--line);
	/* The nav is fixed, so an anchor jump must stop short of it. */
	scroll-margin-top: 84px;
}

.clause:target { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.clause:target .clause__no { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.clause__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 30px;
	padding: 0 10px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font: 600 13px/1 var(--mono);
	letter-spacing: .12em;
	color: var(--ink-soft);
	margin-bottom: 12px;
}

.clause h2 {
	font: 700 clamp(25px, 3.4vw, 40px)/1.04 var(--display);
	letter-spacing: -.035em;
	text-wrap: balance;
}

/* Voice one: the short version. Big, black, and the only thing you need to
   read if you are in a hurry. */
.clause__short {
	margin-top: 14px;
	max-width: 34ch;
	font-size: calc(var(--read) * clamp(19px, 2.1vw, 27px));
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -.015em;
	border-left: 5px solid var(--accent);
	padding-left: clamp(14px, 2.5vw, 20px);
	text-wrap: pretty;
}

/* Voice two: the careful version. Quieter, narrower, set for long reading. */
.clause__full {
	margin-top: clamp(18px, 3vh, 28px);
	max-width: var(--measure);
	color: var(--ink-soft);
	font-size: var(--body);
	line-height: 1.68;
	text-wrap: pretty;
	hanging-punctuation: first;
}
.clause__full > * + * { margin-top: .9em; }
.clause__full h3 {
	font: 600 calc(var(--read) * clamp(17px, 1.5vw, 20px))/1.3 var(--display);
	color: var(--ink);
	margin-top: 1.5em;
}
.clause__full ul { list-style: none; }
.clause__full li { padding-left: 1.5em; position: relative; }
.clause__full li + li { margin-top: .5em; }
.clause__full li::before {
	content: '';
	position: absolute;
	left: .2em;
	top: .62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}
.clause__full a { color: var(--ink); text-underline-offset: 3px; }
.clause__full strong { color: var(--ink); font-weight: 700; }
.clause__full code {
	font: 500 .92em/1 var(--mono);
	background: color-mix(in srgb, var(--accent) 18%, #fff);
	border-radius: 4px;
	padding: 3px 5px;
	color: var(--ink);
	/* a long host name must be able to break rather than widen the page */
	overflow-wrap: anywhere;
}

.clause__up {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 8px;
	font: 500 13px/1 var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: none;
}
.clause__up:hover { color: var(--ink); text-decoration: underline; }

/* ── the pending decisions ───────────────────────────────────────────── */
/* Anywhere a real term is missing, the page says so out loud instead of
   inventing one. These are the things Ferrin has to answer before any of
   this becomes real. */
.decide {
	margin-top: 1.1em;
	background: #fff0f5;
	border: 2px dashed var(--pink);
	border-radius: 12px;
	padding: 14px 16px;
	color: var(--ink);
	font-size: calc(var(--read) * 16px);
	line-height: 1.55;
}
.decide b {
	display: block;
	font: 600 12px/1.4 var(--mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #b0245a;
	margin-bottom: 5px;
}

/* ── the way out ─────────────────────────────────────────────────────── */
.legal__end {
	margin-top: clamp(50px, 8vh, 90px);
	background: var(--ink);
	color: var(--paper);
	border-radius: 20px;
	padding: clamp(28px, 5vw, 52px);
}

.legal__end h2 {
	font: 800 clamp(28px, 4.2vw, 52px)/.98 var(--display);
	letter-spacing: -.04em;
	margin-top: 10px;
	color: var(--accent);
}

/* :not(.label) again — the mono kicker above the heading keeps its own type. */
.legal__end p:not(.label) {
	margin-top: 14px;
	max-width: 48ch;
	color: rgba(251, 249, 244, .76);
	font-size: var(--body);
}
.legal__end .label { color: rgba(251, 249, 244, .55); }

.legal__acts {
	margin-top: clamp(22px, 4vh, 34px);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.legal__act {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	border: 1.5px solid rgba(251, 249, 244, .45);
	font: 500 14px/1 var(--mono);
	letter-spacing: .04em;
	text-decoration: none;
	transition: background .18s, color .18s;
}
.legal__act:hover { background: rgba(251, 249, 244, .12); }
.legal__act--go {
	background: var(--accent-small);
	border-color: var(--accent-small);
	color: var(--ink);
	font-weight: 600;
}
.legal__act--go:hover { background: var(--paper); border-color: var(--paper); }

/* The other three documents, always reachable from any one of them. */
.legal__siblings {
	margin-top: clamp(30px, 5vh, 48px);
	padding-top: 20px;
	border-top: 1px solid rgba(251, 249, 244, .16);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
}
.legal__siblings a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 500 14px/1 var(--mono);
	color: rgba(251, 249, 244, .74);
	text-decoration: none;
}
.legal__siblings a:hover { color: var(--paper); text-decoration: underline; }
.legal__siblings [aria-current] { color: var(--accent-small); text-decoration: none; }

/* ── reading gauge ───────────────────────────────────────────────────── */
/* How far down the document you are. Scroll driven, so it costs nothing
   when nobody is scrolling, and it simply does not appear in a browser
   without scroll timelines. */
.gauge {
	position: fixed;
	inset: 0 0 auto 0;
	height: 4px;
	z-index: 60;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: var(--accent);
	pointer-events: none;
}

@supports (animation-timeline: scroll()) {
	.gauge {
		animation: gauge-fill linear both;
		animation-timeline: scroll(root block);
	}
}
@keyframes gauge-fill { to { transform: scaleX(1); } }

/* site.css crushes every animation to .01ms under reduced motion, which on a
   scroll timeline does not stop the bar, it pins it at full width for the
   whole page. A stuck gauge is worse than none, so it leaves instead. The
   document loses nothing: the contents list is the real navigation. */
@media (prefers-reduced-motion: reduce) {
	.gauge { display: none; }
}

/* ── small screens ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
	.legal__ghost { font-size: 42vw; opacity: .16; }
	.toc a { grid-template-columns: 2.2em 1fr; }
	.clause__short { border-left-width: 4px; }
	.legal__end { border-radius: 16px; }
}

/* ── print ───────────────────────────────────────────────────────────── */
/* People print the small print. Give them all of it, in ink, with the URLs
   of the links spelled out. */
@media print {
	.gauge, .reader, .clause__up, .legal__acts { display: none; }
	.legal__head, .legal__end { background: #fff; color: #000; }
	.legal__ghost { display: none; }
	/* Everything that was set light for the black masthead has to come back
	   to ink, or it prints as nothing on white paper. */
	/* :not(.label) is repeated here on purpose — the screen rule uses it, and
	   a plainer selector would lose to it and print pale grey on white. */
	.legal__stand, .legal__dateline, .legal__flag-text,
	.legal__end h2, .legal__end p:not(.label), .legal__end .label,
	.legal__siblings a { color: #000; }
	.legal__flag-tag { border: 2px solid #000; }
	.legal__siblings { border-top-color: #000; }
	.clause__full { display: block !important; color: #000; }
	.clause { break-inside: avoid; }
	.clause__full a::after { content: ' (' attr(href) ')'; font-size: .85em; }
}