/**
 * Sticky buy bar — the mobile home buy affordance (Story 4.5).
 *
 * Source of truth: design/canvas/HomeMobile.dc.html:190-197. The bar is the
 * checkout pay bar's sibling (css/checkout.css:550+): one control,
 * artboard-exact, mobile-only, transform-only motion.
 *
 * THE VISIBILITY CONTRACT (three gates, all of which must agree):
 *
 *   1. `display: none` base — the bar exists NOWHERE by default, at any
 *      width, in any state. Not mobile-only, not armed: nothing.
 *   2. `@media (max-width: 768px)` — the mobile band, the same breakpoint
 *      chrome.css's footer block uses. Only here does the bar get a layout
 *      at all, and only when BOTH the markup's `hidden` is gone
 *      (js/sticky-buy.js removes it exactly once, on the fully-armed path)
 *      and the script's `tcs-buy-ready` class is on <html> (nav.js's
 *      pattern: set first, removed again on every early return). Two
 *      independent guards, so neither a stale attribute nor a half-loaded
 *      script can leave a visible bar.
 *   3. `.is-shown` — the slide state. Armed-but-parked is
 *      `visibility: hidden` + `translateY(110%)`: invisible AND out of the
 *      tab order, so the CTA cannot be focused before the bar is on
 *      screen. Nothing here ever calls focus(), so appearing never steals
 *      it.
 *
 * NO JS TWIN OF THE BREAKPOINT, deliberately. nav.js matches this
 * breakpoint in matchMedia because focus can be TRAPPED inside its overlay
 * when the viewport widens past it. The bar has no trap: `display: none`
 * at >=769px already removes the CTA from the tab order at the same
 * instant, so a JS listener would duplicate the decision with nothing to
 * fix — and on a re-narrowed viewport it would keep the bar hidden until
 * the hero next crossed the fold, a stale state the observer alone never
 * produces. One statement of the decision, here only.
 *
 * Safe-area inset (code-review fix, 2026-09-04): the bottom padding adds
 * `env(safe-area-inset-bottom)` on top of the artboard's 12px so a notched
 * iPhone's home-indicator band doesn't sit over the CTA. `env()` falls
 * back to 0 wherever it's unsupported or there is no inset, so this is
 * additive only — it changes nothing on the device the artboard was drawn
 * for, and Playwright (which reports no inset) still measures the
 * artboard's own 12px exactly. The real-phone check in this story's manual
 * checks is what actually confirms the notched case.
 */

.tcs-buy-bar {
	display: none;
}

@media (max-width: 768px) {
	.tcs-buy-ready .tcs-buy-bar:not([hidden]) {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/*
		 * Below the overlay's 90 (css/chrome.css) — a modal covers
		 * everything, this bar included. Above all in-flow content.
		 */
		z-index: 80;
		align-items: center;
		justify-content: space-between;
		gap: 14px; /* HomeMobile.dc.html:191 */
		padding: 12px 20px; /* HomeMobile.dc.html:191 */
		/* code-review fix, 2026-09-04: extra clearance for a notched phone's
		 * home indicator, additive over the artboard's 12px — see the file
		 * header note. */
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		/*
		 * The same near-opaque black the checkout pay bar uses over the
		 * same kind of content — an artboard value, not a token (the
		 * palette token is opaque --tcs-black).
		 */
		background: rgba(12,12,13,.97);
		border-top: var(--tcs-border-width) solid var(--tcs-border-dark);
		visibility: hidden;
		transform: translateY(110%);
		/*
		 * On the way OUT the slide runs first and visibility flips only
		 * after it finishes — the CTA stays tabbable for the whole exit.
		 */
		transition:
			transform var(--tcs-dur-btn-hover) var(--tcs-ease-reveal),
			visibility 0s var(--tcs-dur-btn-hover);
	}

	.tcs-buy-ready .tcs-buy-bar:not([hidden]).is-shown {
		visibility: visible;
		transform: translateY(0);
		/*
		 * On the way IN visibility flips immediately — the button must
		 * be focusable the frame the bar starts moving, not after.
		 */
		transition:
			transform var(--tcs-dur-btn-hover) var(--tcs-ease-reveal),
			visibility 0s;
	}

	/* The price pair — HomeMobile.dc.html:192-195. The struck price is
	 * --tcs-body on a dark ground, which the contrast floor permits
	 * because line-through text is decorative: the cream $29.99 beside it
	 * carries the meaning (the story's Resolved log records this so nobody
	 * "fixes" it away from the artboard's value). */
	.tcs-buy-bar__price {
		display: flex;
		align-items: baseline;
		gap: 8px; /* HomeMobile.dc.html:192 */
		margin: 0;
	}

	.tcs-buy-bar__price-now {
		font-size: 21px; /* HomeMobile.dc.html:193 */
		font-weight: var(--tcs-fw-semibold);
		letter-spacing: -0.03em;
		line-height: 1;
		color: var(--tcs-cream);
	}

	.tcs-buy-bar__price-was {
		font-size: 13px; /* HomeMobile.dc.html:194 */
		font-weight: var(--tcs-fw-medium);
		line-height: 1;
		color: var(--tcs-body);
		text-decoration: line-through;
	}

	/* The one control. .tcs-btn / .tcs-btn--orange already supply the 44px
	 * tap floor, the focus ring, the shimmer host and the hover inversion
	 * (css/motion.css) — this sizes it to the artboard only. */
	.tcs-buy-bar__cta {
		padding: 14px 26px; /* HomeMobile.dc.html:196 */
		font-size: var(--tcs-fs-body-sm); /* 15px — HomeMobile.dc.html:196 */
		/*
		 * 7px is the artboard's own radius (HomeMobile.dc.html:196), not
		 * --tcs-radius (8px) — the bar is drawn one pixel tighter than
		 * every other button on the site, and artboards win.
		 */
		border-radius: 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * Final value, instantly. The bar still appears and disappears — it is
	 * an affordance, not decoration — but it never slides, and visibility
	 * flips in the same frame instead of choreographing with the transform.
	 */
	.tcs-buy-ready .tcs-buy-bar:not([hidden]),
	.tcs-buy-ready .tcs-buy-bar:not([hidden]).is-shown {
		transition: none;
	}
}