/*
 * The Crypto Secret — legal pages (refund/privacy/terms) and the 404 page
 * (Story 4.4).
 *
 * Source of truth: design/canvas/Refund.dc.html, Privacy.dc.html,
 * Terms.dc.html (all three: identical two-column layout at 1240px — sticky
 * 250px "ON THIS PAGE" sidebar + narrow prose column, max-width: 1060px —
 * differing only in H1/copy/sidebar items, which is why one stylesheet
 * serves all three rather than per-page CSS) and NotFound.dc.html (a
 * separate dark full-bleed 404 layout, appended at the bottom of this same
 * file rather than split into a second stylesheet — one new handle in
 * tcs_child_stylesheets() for one small story is simpler than two, and
 * nothing in either section depends on the other loading first).
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * WHAT THIS FILE CONSUMES RATHER THAN RE-DECLARES
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * sections.css owns .tcs-band / .tcs-band--cream / .tcs-band--black /
 * .tcs-band__inner(--narrow) — the short-version card IS a nested
 * .tcs-band--black, and the page wrapper IS a .tcs-band--cream, reused
 * verbatim rather than a second card/band skin. motion.css owns .tcs-btn /
 * .tcs-btn--orange / .tcs-btn__shimmer — the 404 page's primary action
 * reuses those rather than a new button skin. tokens.css owns colour/type
 * tokens (--tcs-ink, --tcs-dim, --tcs-amber, --tcs-tap-min, the page-title
 * scale, the eyebrow scale) — this file reads them via var(), never a raw
 * hex or px literal for a value tokens.css already names.
 *
 * Registered in tcs_child_stylesheets() AFTER tcs-delivery (functions.php),
 * per the spec's own Boundaries — so it can win where a rule touches
 * sections.css/motion.css at equal specificity, same reasoning every
 * section sheet since chrome.css follows.
 */

/* ===========================================================================
 * 1. LEGAL PAGES — shared two-column layout
 *
 * Refund.dc.html:101, Privacy.dc.html:101, Terms.dc.html:101: a CSS grid,
 * 250px sidebar + 1fr prose column, 60px gap, capped at max-width: 1060px
 * and centred — identical across all three artboards.
 * ========================================================================= */

.tcs-legal__inner {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 60px;
	align-items: start;
	max-width: 1060px;
}

/* ---------------------------------------------------------------------------
 * 1.1 Sidebar — "ON THIS PAGE".
 *
 * position: sticky, 30px from the top of the viewport (every artboard).
 * The FIRST link ("The short version") is always the active/highlighted
 * one on page load — none of the three pages ever load scrolled to a
 * different section — so its active state is a fixed class in the markup
 * (tcs_legal_render()), not JS-driven scroll tracking. Real scrollspy is
 * exactly the kind of enhancement the spec's "Does not prove" section
 * excludes: curl proves the anchors exist and resolve, not live scroll
 * behaviour.
 * ------------------------------------------------------------------------- */

.tcs-legal__sidebar {
	display: flex;
	flex-direction: column;
	gap: 3px;
	position: sticky;
	top: calc(var(--tcs-header-h, 80px) + 24px); /* clears the sticky header (js/header.js) */
}

.tcs-legal__sidebar-label {
	font-size: var(--tcs-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-muted);
	margin-bottom: 10px;
}

.tcs-legal__sidebar-link {
	font-size: 14px;
	color: var(--tcs-body);
	padding: 9px 0 9px 16px;
	text-decoration: none;
	/* Minimum tap target, inline links included (tokens.md, tokens.css:179). */
	min-height: var(--tcs-tap-min);
	display: flex;
	align-items: center;
}

.tcs-legal__sidebar-link:hover,
.tcs-legal__sidebar-link:focus-visible {
	color: var(--tcs-amber);
}

.tcs-legal__sidebar-link:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 2px;
}

.tcs-legal__sidebar-link--active {
	font-weight: 600;
	color: var(--tcs-black);
	padding-left: 14px;
	border-left: 2px solid var(--tcs-orange);
}

/*
 * The jump itself is smooth on these pages only — a 400px hop on a policy
 * page reads as "nothing happened" when it is instant, because the heading
 * arrives under the same eye position the reader was already looking at.
 * Reduced motion keeps the instant jump.
 */
:root:has(body.tcs-legal-page) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

	:root:has(body.tcs-legal-page) {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 1.2 Content column.
 * ------------------------------------------------------------------------- */

.tcs-legal__content {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.tcs-legal__intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tcs-legal__eyebrow {
	font-size: var(--tcs-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-amber);
}

.tcs-legal__title {
	margin: 0;
	font-size: var(--tcs-fs-page-title);
	line-height: var(--tcs-lh-page-title);
	letter-spacing: var(--tcs-ls-page-title);
	font-weight: 600;
	color: var(--tcs-black);
}

.tcs-legal__updated {
	font-size: 13.5px;
	color: var(--tcs-muted);
}

/* ---------------------------------------------------------------------------
 * 1.3 The short-version card. A nested .tcs-band--black — this file only
 * adds the padding/radius/gap shape, never a second colour pairing.
 * ------------------------------------------------------------------------- */

.tcs-legal__short-version {
	border-radius: var(--tcs-radius-md);
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Override .tcs-band's full-bleed section padding — this is a card
	 * nested inside the prose column, not a page-width band. */
	width: auto;
}

.tcs-legal__short-version-label {
	font-size: var(--tcs-fs-card-title);
	font-weight: 600;
	letter-spacing: var(--tcs-ls-card-title);
}

.tcs-legal__short-version-body {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
}

.tcs-legal__short-version-body strong {
	color: var(--tcs-orange);
}

/* ---------------------------------------------------------------------------
 * 1.4 Prose body — the_content(). --tcs-ink for long-form body text
 * (tokens.css:45, "long-form legal body" — named for exactly this use),
 * --tcs-amber for links on the cream/white ground (never --tcs-orange as a
 * link colour — DESIGN.md:183, the same ruling spec-4-3 already applied).
 * ------------------------------------------------------------------------- */

.tcs-legal__prose {
	display: flex;
	flex-direction: column;
	gap: 26px;
	/*
	 * TAIL ROOM, so every sidebar anchor can actually be scrolled to. These
	 * pages are short: at 1600x1040 the refund policy is ~1420px tall, so
	 * the document can only scroll ~380px and a click on "Contact us"
	 * (which starts ~1070px down) moves the page a little and stops with
	 * the heading still mid-screen — indistinguishable from a dead link.
	 * Padding the prose by (viewport - ~380px) guarantees the last heading
	 * can reach the top; on a tall page or a short window it is small or
	 * zero, and it is capped so a very tall monitor never gets a void.
	 */
	padding-bottom: clamp(0px, calc(100vh - 380px), 720px);
}

/*
 * Each <h2> and the copy under it is wrapped by tcs_legal_render() in a
 * .tcs-legal__section that carries .tcs-reveal, so a policy page arrives
 * section by section like every other page instead of as one flat wall.
 */
.tcs-legal__section {
	display: flex;
	flex-direction: column;
}

.tcs-legal__prose h2 {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.026em;
	color: var(--tcs-black);
	scroll-margin-top: calc(var(--tcs-header-h, 80px) + 28px); /* a jumped-to heading lands below the sticky header with breathing room */
}

.tcs-legal__prose p,
.tcs-legal__prose li {
	margin: 0;
	font-size: 17.5px;
	line-height: 1.72;
	color: var(--tcs-ink);
}

.tcs-legal__prose p + p,
.tcs-legal__prose p + ul,
.tcs-legal__prose p + ol,
.tcs-legal__prose ul + p,
.tcs-legal__prose ol + p {
	margin-top: 12px;
}

.tcs-legal__prose ul,
.tcs-legal__prose ol {
	margin: 0;
	padding-left: 24px;
}

.tcs-legal__prose li + li {
	margin-top: 8px;
}

.tcs-legal__prose li::marker {
	color: var(--tcs-amber);
	font-weight: 600;
}

.tcs-legal__prose strong {
	color: var(--tcs-black);
	font-weight: 600;
}

.tcs-legal__prose a {
	color: var(--tcs-amber);
	font-weight: 600;
	/*
	 * The 44px tap floor, inline text links included (Story 4.5's sweep —
	 * "that is where it was missed twice during design review"). The
	 * inline-flex box grows the line it sits on to 44px: the deliberate,
	 * visible price of the floor, not a reflow accident. vertical-align:
	 * middle keeps the words on the text's optical line.
	 */
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	vertical-align: middle;
}

.tcs-legal__prose code {
	font-family: ui-monospace, Menlo, monospace;
	background: var(--tcs-cream);
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 14.5px;
}

/*
 * FOOTER DISCLAIMER (code-review fix, 2026-09-04) — see the render function
 * for why. --tcs-dim is the token tokens.css itself documents for exactly
 * this use.
 */
.tcs-legal__disclaimer {
	margin-top: 32px;
	padding-top: 24px;
	border-top: var(--tcs-border-width) solid var(--tcs-cream-2);
	font-size: var(--tcs-fs-body-sm);
	color: var(--tcs-dim);
}

/* ===========================================================================
 * 2. LEGAL PAGES — mobile (390px stack)
 *
 * Sidebar COLLAPSES ABOVE the prose content, not sticky — a 250px sticky
 * rail makes no sense once the layout is a single column. Every row/link
 * keeps its --tcs-tap-min height from the shared rule above.
 * ========================================================================= */

@media (max-width: 768px) {

	.tcs-legal__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tcs-legal__sidebar {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 18px;
	}

	.tcs-legal__sidebar-label {
		width: 100%;
		margin-bottom: 4px;
	}

	.tcs-legal__title {
		font-size: 34px;
		line-height: 1.04;
		letter-spacing: -0.038em;
	}

	/*
	 * The desktop tail-room hack above (.tcs-legal__prose, padding-bottom:
	 * clamp(0px, calc(100vh - 380px), 720px)) exists so a sticky sidebar
	 * click can scroll the last heading to the top. The mobile sidebar is
	 * `position: static` (not sticky, above), so that padding has nothing
	 * left to compensate for and just leaves an empty void below the last
	 * paragraph on every phone-width load. Zero it out here (code-review
	 * fix, 2026-09-04).
	 */
	.tcs-legal__prose {
		padding-bottom: 0;
	}
	.tcs-legal__prose h2 {
		font-size: 23px;
	}
	.tcs-legal__prose p,
	.tcs-legal__prose li,
	.tcs-legal__short-version-body {
		font-size: 16.5px;
	}
	.tcs-legal__short-version {
		padding: 22px 20px;
	}
}

/* ===========================================================================
 * 3. 404 PAGE — standalone dark full-bleed document
 *
 * NotFound.dc.html:88-109: 1240×700 on the artboard, but the live page is a
 * real full-viewport document (min-height: 100vh), not a fixed-height box —
 * the artboard's explicit pixel height is a canvas constraint, not a layout
 * instruction any other inner-page template in this theme follows either.
 * ========================================================================= */

.tcs-404-page {
	margin: 0;
	background: var(--tcs-black);
}

.tcs-404 {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--tcs-black);
	color: var(--tcs-cream);
	font-family: var(--tcs-font);
}

.tcs-404__glow {
	position: absolute;
	top: -200px;
	left: 50%;
	margin-left: -320px;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(247, 147, 26, .24) 0%, rgba(247, 147, 26, 0) 66%);
	filter: blur(32px);
	pointer-events: none;
}

.tcs-404__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 54px 54px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent);
	pointer-events: none;
}

.tcs-404__header {
	position: relative;
	display: flex;
	align-items: center;
	padding: 18px 40px;
	gap: 9px;
}

.tcs-404__brand-name {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--tcs-cream);
}

.tcs-404__main {
	position: relative;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 0 40px 40px;
	text-align: center;
}

.tcs-404__code {
	font-size: 150px;
	font-weight: 700;
	letter-spacing: -0.055em;
	line-height: 1;
	background: linear-gradient(100deg, var(--tcs-orange) 22%, #FFD9A0 44%, var(--tcs-orange) 64%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tcs-404__title {
	margin: 0;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.038em;
	color: var(--tcs-cream);
}

.tcs-404__subtitle {
	margin: 0;
	font-size: 17px;
	line-height: 1.62;
	color: var(--tcs-body-dark);
	max-width: 460px;
}

.tcs-404__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.tcs-404__primary {
	padding: 17px 32px;
	font-size: 16px;
}

.tcs-404__secondary {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tcs-body-dark);
	text-decoration: none;
	padding: 15px 20px;
	border: 1px solid var(--tcs-border-dark);
	border-radius: var(--tcs-radius);
	min-height: var(--tcs-tap-min);
	display: inline-flex;
	align-items: center;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

.tcs-404__secondary:hover,
.tcs-404__secondary:focus-visible {
	color: var(--tcs-orange);
	border-color: var(--tcs-orange);
}

.tcs-404__secondary:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 3.1 404 — mobile. No horizontal scroll at 390px: the code mark and title
 * both shrink, and the action row stacks.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {

	.tcs-404__code {
		font-size: 84px;
	}

	.tcs-404__title {
		font-size: 28px;
		letter-spacing: -0.03em;
	}

	.tcs-404__subtitle {
		font-size: 15.5px;
	}

	.tcs-404__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 320px;
	}

	.tcs-404__primary,
	.tcs-404__secondary {
		justify-content: center;
		width: 100%;
	}
}

/* ===========================================================================
 * 4. REDUCED MOTION
 *
 * Neither section adds its own animation — the 404 gradient text is
 * static (no sweep keyframe ported), and the legal sidebar's only motion is
 * the colour/indent transitions .tcs-legal__sidebar-link already shares
 * with .tcs-row-shaped hovers elsewhere. Nothing here needs a
 * prefers-reduced-motion override.
 * ========================================================================= */