/* ==========================================================================
   Legal / Policy page — reusable band (Figma 11365:5904)

   The frame is 1600 wide. Its content band starts at x=124 and the inner grid is
   257.25 rail + 99.75 gap + 874 body = 1231. The band's own gutters are the BB
   ROW's business, so this file paints no background, declares no outer padding,
   sets no min-height and no section width — exactly as tbl-faq does.

   The two horizontal tracks ARE declared here: the rail is a fixed component
   width and 874 is the prose measure, the same class of number as
   --tbl-measure on the blog. A 1fr body column would widen with the row and
   break the frame's line length.

   The contents card is a port of tbl-single.css:348-556 under tbl-legal__ names.
   Every measurement below carries the frame node it came from.
   ========================================================================== */

.tbl-legal {
	--tbl-legal-tint: color-mix(in srgb, var(--nav-bolt-color) 10%, transparent);
	--tbl-legal-rail: 257.25px;                      /* node 11365:6439 — 257.248 */
	--tbl-legal-measure: 874px;                      /* node 11365:6474 */
	--tbl-legal-col-gap: clamp(32px, 6.234vw, 99.75px);  /* 99.75 / 1600 = 6.234vw */

	/* The page title is bound to NO Figma token — get_variable_defs returns nothing
	   for node 11365:6216 and none of the theme's fluid steps (h0 max 90,
	   mega max 106.7, full-width-headline max 254) matches its box. Pinned by
	   measurement instead: the node hugs 1429 x 160 on ONE line at 1600, and
	   "Terms/Conditions" set in the live Sequel Sans 400 measures exactly 1429.0px
	   at 184.22px (measured live, Playwright, 2026-09-01).

	   The unit is cqw, not vw, and that is not a stylistic choice. The frame's title
	   is WIDER than the band it sits above — it starts on the band's left edge at
	   x=124 and runs to 1554, past the band's own content. So the headline has to
	   overflow its column by a fixed PROPORTION (1429 / 1352 = 105.7% of the row's
	   content box at 1600). Sized in vw it would overflow by a proportion of the
	   VIEWPORT instead, and at 390 the nowrap line lands within 2px of the right
	   edge — a horizontal scrollbar waiting to happen. Containment is scoped to
	   .tbl-legal__head so nothing reaches the sticky rail below.
	   184.22 / 1352 = 13.626cqw.

	   Line-height 0.87 = the frame's 160 / 184.22; the face's natural line-height is
	   1.18, so the 160 box is an explicit leading, not "Auto". */
	--tbl-legal-title-size: min(184.22px, 13.626cqw);

	display: block;
	color: var(--Neutral-100);
}

/* ------------------------------------------------------------------ title */

.tbl-legal__head {
	display: block;
	container-type: inline-size;
}

/* 1429 is the ink of this particular string, not a wrapping box. The box is 106%
   of the column because the frame's title is WIDER than the band it sits above:
   1429 / 1352 = 105.7%, so 106% is the smallest box that still holds the line.

   NOT `white-space: nowrap`. Nowrap holds the line at any width, which sounds
   like the safer choice and is the opposite — measured live at 390 it produced a
   412px line in a 390px box and the word was cut off mid-glyph at the viewport
   edge. A too-wide box wraps; a nowrap line clips. Below 1200 the box drops back
   to 100% so the overflow disappears entirely, because there the column is close
   enough to the viewport that 5.7% of it has nowhere to go. */
.tbl-legal__title {
	margin: 0;
	width: 106%;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: var(--tbl-legal-title-size);
	line-height: 0.87;
	letter-spacing: normal;
	/* theme.css puts `word-break: break-word` on headings, which was splitting
	   "Terms/Condition" + "s" at 1199 and 390 — observed live. `normal` sends the
	   break to the slash instead; `overflow-wrap: break-word` is kept as the last
	   resort so a title with no break opportunity at all still wraps rather than
	   running out of the column. */
	word-break: normal;
	overflow-wrap: break-word;
	color: inherit;
}

/* Below 1200 the title stops overflowing and starts SHRINKING instead. The 106%
   box is what reproduces the frame at 1600, but the frame is a 1600 render and
   there is nothing below it — at 1199 and 390 that box was wrapping the headline
   and orphaning a single glyph on line two ("Terms/Condition" / "s"), because the
   column is narrower than the unbroken word.

   12.6cqw is the fit factor: this string measures 7.757 x its font-size, so 12.6%
   of the column lands the line at ~97.7% of the column and it holds on one line
   all the way down to 390. The step at the breakpoint is 13.626 -> 12.6 against a
   column that widens at the same moment (the row's side padding drops 124 -> 72),
   which nets out at ~2.5% — not a visible jump. A title long enough to still
   overrun wraps, which is the right failure. */
@media (max-width: 1199px) {
	.tbl-legal {
		--tbl-legal-title-size: min(184.22px, 12.6cqw);
	}

	.tbl-legal__title {
		width: 100%;
	}
}

/* Paragraph - Large: 20 / 30 / tracking "1" read as 1 PERCENT = 0.2px. Node
   11365:6215 measures 268 wide; the live face renders 267.32 at these values,
   which is what confirms the token. */
.tbl-legal__intro {
	/* Frame: the intro's box TOP (y=372) sits 6px above the title box's bottom
	   (y=378). Not a nudge — it is the frame's own relationship, and dropping it
	   pushes everything below down by 6. */
	margin: -6px 0 0;
	font-family: var(--body-font);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.2px;
	color: color-mix(in srgb, var(--Neutral-100) 60%, transparent);
}

/* -------------------------------------------------------------- two-column */

/* Frame: intro box ends at y=402, the band's first visible content starts at
   y=467. justify-content:start keeps the 1231 grid left-aligned in whatever
   width the BB row hands over. */
.tbl-legal__body {
	margin-top: clamp(32px, 4.063vw, 65px);
	display: grid;
	grid-template-columns: minmax(0, var(--tbl-legal-rail)) minmax(0, var(--tbl-legal-measure));
	column-gap: var(--tbl-legal-col-gap);
	justify-content: start;
	align-items: start;
}

/* align-self:start is required — a grid item defaults to stretch, which makes
   position:sticky inert because the item is already as tall as the row. */
.tbl-legal__toc {
	align-self: start;
}

.tbl-legal--sticky-toc .tbl-legal__toc {
	position: sticky;
	top: calc(var(--header-height, 80px) + 24px);
	max-height: calc(100vh - var(--header-height, 80px) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;   /* a long contents list must not scroll-chain into Lenis */
}

/* --- CONTENTS card ------------------------------------------------------- */

/* No padding-top on the rail. In the frame the card sits 72.978px inside its own
   frame and the body column sits 72px inside the same frame — that is what puts
   them on one line, not a 73px offset between them. Target: contentTop - cardTop
   ~= 0. (tbl-single.css:348-363 records the same trap being mis-transcribed.) */
.tbl-legal__toc-card {
	width: 100%;
	padding: 28px 0 24px;                    /* CONTENTS sits 28.28 below the card top */
	background: var(--tbl-legal-tint);       /* #b390e7 @ 10% */
	border-radius: 9px;                      /* measured 9.122 = var(--Corner-Radius-S) */
}

/* H6 — 16 / 30.91. The frame's declared "2" is 2 PERCENT of 16 = 0.32px. */
.tbl-legal__toc-heading {
	margin: 0 0 12px;
	padding-inline-start: 24px;              /* measured left 23.72 */
	font-family: var(--body-font);
	font-size: 16px;
	line-height: 30.91px;
	letter-spacing: 0.32px;
	text-transform: uppercase;
	color: var(--Black);
}

.tbl-legal__toc-list {
	margin: 0;
	padding: 0;
	list-style: none;                        /* the numeral circles ARE the numbering */
}

.tbl-legal__toc-item {
	margin: 0;
}

/* text-decoration:none !important is load-bearing. A nested `& a:not(.btn)…` rule
   in theme.css forces an underline on every real <a> in the document and beats a
   plain `text-decoration:none` on specificity. That opponent carries no
   !important, so a plain one here wins outright. Contents links carry NO underline
   at any state, hover included — a deliberate exception to the site's usual
   always-drawn / fade-in-on-hover convention. */
.tbl-legal__toc-link {
	display: flex;
	align-items: flex-start;                 /* keeps the circle on the first line when the text wraps */
	gap: 6px;                                /* circle ends 43.79, text starts 50.17 */
	min-height: 34.665px;                    /* measured circle pitch — a floor, not a cap */
	padding-inline: 24px;
	text-decoration: none !important;
	color: var(--Black);
	transition: var(--button-easing);        /* BARE — never prefix a property */
}

.tbl-legal__toc-link:hover,
.tbl-legal__toc-link:focus-visible {
	text-decoration: none !important;
}

.tbl-legal__toc-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;                             /* measured 20.069 */
	height: 20px;
	border-radius: 50%;
	background-color: var(--tbl-legal-tint);
	color: color-mix(in srgb, var(--Black) 40%, transparent);
	font-family: var(--body-font);
	font-size: 11px;                         /* measured 10.947 */
	line-height: 1;
	transition: var(--button-easing);
}

.tbl-legal__toc-num-text {
	display: block;
}

/* Real section titles run longer than the frame's placeholder and must WRAP, so
   the 34.665 pitch is carried by the link's min-height above and never applied as
   a line-height here — that would blow a wrapped entry apart. */
.tbl-legal__toc-text {
	font-family: var(--body-font);
	font-size: 12px;
	line-height: 16px;
	white-space: normal;
	overflow-wrap: break-word;
	transition: var(--button-easing);
}

/* ACTIVE — the frame draws it on item 1 (Ellipse 4189): solid #b390e7, white
   numeral. Exactly one entry carries it at any time; the JS moves the class. */
.tbl-legal__toc-item.is-active .tbl-legal__toc-num {
	background-color: var(--nav-bolt-color);
	color: var(--White);
}

/* The contents link spans the full card width, and the sticky rail clips its own
   horizontal overflow, so a ring drawn OUTSIDE the link lost its left and right
   edges and read as two loose rules — observed live. A negative offset draws it
   inside the link box, where all four sides survive. The trigger is inset from
   its own edges and keeps the outward ring. */
.tbl-legal__toc-link:focus-visible {
	outline: 2px solid var(--Primary-Alt-50-Base);
	outline-offset: -2px;
}

.tbl-legal__toc-trigger:focus-visible {
	outline: 2px solid var(--Primary-Alt-50-Base);
	outline-offset: 2px;
}

/* --- Sections ------------------------------------------------------------ */

/* Frame: 40px between section frames (767 - 727, 1067 - 1027). A grid row-gap,
   not margins — the section's top edge has to stay identical to its heading's top
   edge for the sitewide anchor offset to land on the heading. */
.tbl-legal__sections {
	display: grid;
	row-gap: 40px;
}

.tbl-legal__section {
	scroll-margin-top: calc(var(--header-height, 80px) + 24px);
}

/* H3 — 38 / 44 / 0. Frame heading nodes are 44 tall, which agrees. 38 / 1600 =
   2.375vw keeps the step below 1600. Heading box ends at 44, body starts at 57. */
.tbl-legal__section-title {
	margin: 0 0 13px;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: clamp(28px, 2.375vw, 38px);
	line-height: 1.158;                      /* 44 / 38 */
	letter-spacing: 0;
	color: var(--Neutral-100);
}

/* Paragraph - Large again: 20 / 30 / tracking 0.2px. Declared on the prose
   ELEMENTS as well as the wrapper, not by inheritance: theme.css carries
   `p { line-height; letter-spacing }` and `p, li { letter-spacing }`, and a rule
   that matches the element directly beats an inherited value no matter which
   file loaded first. Measured live before this was added: the paragraphs came out
   at letter-spacing `normal`. */
.tbl-legal__section-body {
	font-family: var(--body-font);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.2px;
}

.tbl-legal__section-body p,
.tbl-legal__section-body li {
	font-family: var(--body-font);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.2px;
}

.tbl-legal__section-body > * {
	margin: 0 0 1.5em;
}

.tbl-legal__section-body > *:last-child {
	margin-bottom: 0;
}

/* Body copy runs at 60%, scoped to the PROSE only. A plain `opacity` on the
   container would create a stacking context and fade the headings and links along
   with it. */
.tbl-legal__section-body p,
.tbl-legal__section-body li {
	color: color-mix(in srgb, var(--Neutral-100) 60%, transparent);
}

.tbl-legal__section-body ul,
.tbl-legal__section-body ol {
	padding-inline-start: 1.25em;
	margin-block: 0 1.5em;
}

.tbl-legal__section-body li {
	margin-bottom: 0.5em;
}

.tbl-legal__section-body li > ul,
.tbl-legal__section-body li > ol {
	margin-block: 0.5em 0;
}

/* The underline on body links is left to theme.css deliberately: the site's
   forced underline is the wanted state here, unlike the contents links above.
   Only the colour and the focus ring are set, so a link reads at full strength
   against the 60% prose around it. */
.tbl-legal__section-body a {
	color: var(--Neutral-100);
}

.tbl-legal__section-body a:focus-visible {
	outline: 2px solid var(--Primary-Alt-50-Base);
	outline-offset: 2px;
}

/* --- Desktop / mobile split (JUDGMENT — no Figma below 1600) -------------- */

@media (min-width: 1200px) {
	.tbl-legal__toc-trigger {
		display: none;
	}

	.tbl-legal__toc-panel {
		display: block;
	}
}

@media (max-width: 1199px) {
	.tbl-legal__body {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	/* Not sticky below 1200 — the card stacks above the body and collapses. */
	.tbl-legal__toc,
	.tbl-legal--sticky-toc .tbl-legal__toc {
		position: static;
		max-height: none;
		overflow: visible;
		margin-bottom: 32px;
	}

	.tbl-legal__toc-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 14px 20px;
		background: var(--tbl-legal-tint);
		border: 0;
		border-radius: 9px;
		font-family: var(--body-font);
		font-size: 10px;
		line-height: 17.78px;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: var(--Black);
		cursor: pointer;
		transition: var(--button-easing);
	}

	.tbl-legal__toc-panel {
		display: none;
	}

	.tbl-legal__toc-trigger[aria-expanded="true"] + .tbl-legal__toc-panel {
		display: block;
	}

	.tbl-legal__toc-card {
		margin-top: 8px;
	}
}

/* Open/close indicator — CSS-drawn chevron, no SVG asset. */
.tbl-legal__toc-trigger-icon {
	position: relative;
	display: inline-block;
	width: 10px;
	height: 10px;
	transition: var(--button-easing);
}

.tbl-legal__toc-trigger-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin: 1px;
}

.tbl-legal__toc-trigger[aria-expanded="true"] .tbl-legal__toc-trigger-icon {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.tbl-legal__toc-link,
	.tbl-legal__toc-num,
	.tbl-legal__toc-text,
	.tbl-legal__toc-trigger,
	.tbl-legal__toc-trigger-icon {
		transition: none;
	}
}

/* With no script the trigger cannot flip aria-expanded, so the panel is shown
   outright rather than left unreachable. */
@media (scripting: none) {
	@media (max-width: 1199px) {
		.tbl-legal__toc-trigger {
			display: none;
		}

		.tbl-legal__toc-panel {
			display: block;
		}
	}
}