/**
 * BracketSpot — Cookie consent banner
 *
 * Extracted from style.css (2026-07-20) so landing.html can drop the 147 KB
 * style.css bundle it otherwise loaded for this one component.
 *
 * Consumers (6): landing.html, pricing.html, login.html, terms.html,
 * privacy.html, accessibility.html. Injected at runtime by js/cookie-banner.js.
 *
 * TOKEN BINDING — read before changing a colour.
 * The six consumer pages do NOT share one stylesheet:
 *   - marketing.css (its own token namespace) : all but login.html
 *   - style.css     (semantic tokens)         : all but landing.html
 *   - vectorheart.css (--vec-*)               : all six, the only common sheet
 * So every colour resolves through a chain: the semantic token first (so the
 * five pages that still load style.css stay in lock-step with the rest of the
 * admin surface), then the --vec-* token vectorheart.css guarantees on all six,
 * then a literal as a last resort. Both ends of each chain are the same value,
 * so the banner is pixel-identical on every page. Never bind to a token that
 * only marketing.css declares — login.html would render the banner unstyled.
 *
 * Vectorheart lock: --accent-blue is hot magenta #FF0066 (documented misnomer).
 * Since the 2026-07-22 demotion the banner paints ZERO magenta at rest — ink
 * link + ghost button — so it never competes with a page's primary CTA; the
 * magenta survives only as the site-standard :focus-visible ring.
 */

.cookie-banner {
	--cb-surface: var(--bg-secondary, var(--vec-canvas-elevated, #141414));
	--cb-rule: var(--border-color, var(--vec-rule-heavy, #2A2A2A));
	--cb-ink: var(--text-secondary, var(--vec-ink-regular, #D4D4D4));
	--cb-ink-bright: var(--text-primary, var(--vec-ink-bright, #FAFAFA));
	/* Magenta is FOCUS-RING ONLY since the 2026-07-22 demotion (critique P2:
	   the banner's two accent-weight actions competed with the hero CTA in the
	   first viewport). The old accent-fill/hover/ink vars went with it. */
	--cb-accent: var(--accent-blue, var(--vec-signal-magenta, #FF0066));

	/* Interactive-boundary gray for the ghost Got It — same brand constant
	   marketing.css calls --vh-line-strong; meets WCAG 1.4.11 3:1 on the
	   elevated surface. Literal because no consumer-wide token carries it. */
	--cb-rule-strong: #6E6E6E;

	/* Vertical padding that inflates the inline "Learn more" link to the 44px
	   touch floor. A VARIABLE, not a literal, because the stacked-layout gutter
	   at the foot of this file has to add the same amount back — see the note
	   there. Changing this number without that gutter re-collapses the phone
	   separation the gutter exists to hold open. */
	--cb-link-pad: 13px;

	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--cb-surface);
	border-top: 1px solid var(--cb-rule);
	padding: 0.6rem 1rem;
	z-index: 99999;
	transform: translateY(100%);
	transition: transform 0.3s ease-in-out;
}

/* The container takes focus on reveal (see cookie-banner.js) so the notice is
   the next tab stop instead of stop 15 of 17 behind the whole page. It is a
   notice, not a modal, so focus is moved but never trapped — and the ring is
   suppressed on the programmatic move because the region itself is not a
   control the user aimed at. */
.cookie-banner:focus {
	outline: none;
}

.cookie-banner-visible {
	transform: translateY(0);
}

.cookie-banner-hidden {
	transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
	.cookie-banner {
		transition: none;
	}
}

.cookie-banner-content {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.cookie-banner-text {
	flex: 1;
	min-width: 280px;
	/* One short clause + inline link — capped well under the 65-75ch prose
	   ceiling (the old copy measured ~157ch/line at desktop, critique P2). */
	max-width: 72ch;
	color: var(--cb-ink);
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
}

.cookie-banner-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

/* Inline "Learn more" — ink underline, deliberately NO accent colour: the banner
   must never compete with the page's primary CTA (One Signal Rule; critique P2).
   Persistent rest-state underline so link identity never depends on colour alone
   (WCAG 1.4.1). The 44px floor is unconditional at every breakpoint; because the
   link now sits inline in the sentence, the hit target is grown with cancelled
   vertical padding so text layout doesn't shift — same pattern as
   marketing.css §21. Measured: a 21px line box + 2×13px = a 47px hit box.
   The cancelling negative margin means that box OVERFLOWS the paragraph by
   --cb-link-pad on each side, so any neighbouring control's separation must
   budget for it — the stacked-layout gutter below does. */
.cookie-banner-link {
	display: inline-block;
	padding-block: var(--cb-link-pad);
	margin-block: calc(-1 * var(--cb-link-pad));
	color: var(--cb-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 0.875rem;
	font-weight: 500;
}

.cookie-banner-link:hover,
.cookie-banner-link:focus-visible {
	color: var(--cb-ink-bright);
	text-decoration: underline;
}

/* Ghost dismissal — ink label + boundary hairline, zero magenta (the hero's
   Start Free stays the only magenta imperative in the first viewport). */
.cookie-banner-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	background: transparent;
	color: var(--cb-ink-bright);
	border: 1px solid var(--cb-rule-strong);
	padding: 0.5rem 1.25rem;
	border-radius: var(--radius-md, 0);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.cookie-banner-button:hover {
	border-color: var(--cb-ink-bright);
}

/* Focus indication stays the site-wide magenta ring — a focus state is
   functional signalling, not decoration, so it does not break the demotion. */
.cookie-banner-button:focus-visible {
	outline: 2px solid var(--cb-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cookie-banner-button {
		transition: none;
	}
}

/* Mobile responsive — the banner reflows here, so its height changes and
   cookie-banner.js re-measures the body padding reservation on resize. */
@media (max-width: 640px) {
	/* Stacked, so the two controls become VERTICAL neighbours and the 8px
	   separation floor (unconditional at every breakpoint) is measured on the
	   axis the link's hit box overflows. A 1rem gutter left only 16 − 13 = 3px
	   between the "Learn more" hit box and Got It — measured 3.00px at 320/360/390.
	   Budget the overflow back so the hit separation equals the 1rem the design
	   intends. Do NOT "fix" this by shrinking the gutter toward 8px: 8 − 13 = −5,
	   i.e. the two hit rectangles would OVERLAP. */
	.cookie-banner-content {
		flex-direction: column;
		text-align: center;
		gap: calc(1rem + var(--cb-link-pad));
	}

	.cookie-banner-text {
		min-width: 100%;
	}

	.cookie-banner-actions {
		width: 100%;
		justify-content: center;
	}
}