/*
 * The Crypto Secret — thank-you and delivery-failure pages (Story 3.4).
 *
 * Source of truth: design/canvas/ThankYou.dc.html (the order-received
 * screen — download CTA, "email sent" line, three info cards, order footer)
 * and design/canvas/DeliveryFailed.dc.html (the failure page — reassurance
 * line, order-status card, retry/email/account/direct-send actions). Where
 * this file departs from a board, the reason is written at the rule.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * WHAT THIS FILE CONSUMES RATHER THAN RE-DECLARES
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * sections.css owns .tcs-band / .tcs-band--cream / .tcs-band--black and the
 * full-bleed mechanics (.tcs-bands, .tcs-band__inner) — the thank-you
 * download card IS a nested .tcs-band--black, reused verbatim rather than a
 * second dark-panel skin. motion.css owns .tcs-btn / .tcs-btn--orange /
 * .tcs-btn--dark / .tcs-btn__shimmer / .tcs-row(:hover) — every button and
 * hoverable row on both pages reuses those rather than a fourth/fifth
 * button skin. tokens.css owns every value: the whole Story 3.4 block was
 * added there first, so a literal here would be a second place for a
 * number to drift.
 *
 * Registered in tcs_child_stylesheets() AFTER tcs-checkout (functions.php),
 * per the spec's own Boundaries — it must be able to win where a rule
 * touches sections.css/motion.css/checkout.css at equal specificity, for
 * the same reason every section sheet since chrome.css does.
 */

/* ---------------------------------------------------------------------------
 * SHARED — the centred intro block both pages open with.
 *
 * Both artboards draw the same shape at the top: a small icon badge, an H1,
 * a lede paragraph, centred, in a capped measure. One class pair rather
 * than two near-identical ones, so the two pages cannot drift apart on a
 * shape they are required to share.
 * ------------------------------------------------------------------------- */

.tcs-thank-you__intro,
.tcs-delivery-failed__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tcs-delivery-intro-gap);
	max-width: 660px;
	margin-inline: auto;
	text-align: center;
}

.tcs-thank-you__check,
.tcs-delivery-failed__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--tcs-delivery-icon-size);
	height: var(--tcs-delivery-icon-size);
	border-radius: var(--tcs-radius-full);
}

/* The thank-you check is a solid orange disc with a black glyph
 * (ThankYou.dc.html:94-96) — an unambiguous "it worked" mark. */
.tcs-thank-you__check {
	background: var(--tcs-orange);
	color: var(--tcs-black);
	box-shadow: 0 12px 30px -8px rgba(247, 147, 26, 0.6);
}

.tcs-thank-you__check svg {
	width: 28px;
	height: 28px;
}

/* The delivery-failure icon is a soft amber warning triangle on a tinted
 * ground (DeliveryFailed.dc.html:96-97) — a problem that is calm, not
 * alarming: the page's own first sentence is the reassurance, not this
 * icon. */
.tcs-delivery-failed__icon {
	background: var(--tcs-declined-banner-bg);
	border: var(--tcs-border-width) solid var(--tcs-border-2);
	color: var(--tcs-amber);
}

.tcs-delivery-failed__icon svg {
	width: 28px;
	height: 28px;
}

.tcs-thank-you__title,
.tcs-delivery-failed__title {
	margin: 0;
	font-size: var(--tcs-fs-h2);
	line-height: var(--tcs-lh-h2);
	letter-spacing: var(--tcs-ls-h2);
	font-weight: var(--tcs-fw-semibold);
}

.tcs-thank-you__subtitle,
.tcs-delivery-failed__subtitle {
	margin: 0;
	font-size: var(--tcs-fs-body);
	line-height: var(--tcs-lh-body);
	color: var(--tcs-body);
}

.tcs-thank-you__subtitle strong,
.tcs-delivery-failed__subtitle strong {
	color: var(--tcs-black);
}

/* ---------------------------------------------------------------------------
 * PAGE SHELL — vertical rhythm between the intro and what follows.
 * ------------------------------------------------------------------------- */

.tcs-thank-you__inner,
.tcs-delivery-failed__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tcs-delivery-block-gap);
}

/* ---------------------------------------------------------------------------
 * THANK-YOU — the download card. THE LARGEST ELEMENT ON SCREEN, per the
 * spec's own Boundaries: sized to the page's full measure (700px, the
 * widest element below the intro) and given the heaviest visual weight
 * (solid black band, the brightest control on the page) of anything here.
 * ------------------------------------------------------------------------- */

.tcs-thank-you__card {
	width: 100%;
	max-width: var(--tcs-thank-you-card-max);
	padding: var(--tcs-thank-you-card-pad);
	border-radius: var(--tcs-radius-xl);
	display: flex;
	align-items: center;
	gap: var(--tcs-thank-you-card-gap);
	box-shadow: 0 30px 66px -26px rgba(12, 12, 13, 0.5);
}

.tcs-thank-you__card-thumb {
	flex-shrink: 0;
	width: var(--tcs-thank-you-thumb-w);
	height: var(--tcs-thank-you-thumb-h);
	position: relative;
	overflow: hidden;
	border-radius: 3px 5px 5px 3px;
	background: linear-gradient(150deg, #1b1b1f, var(--tcs-black));
	border: var(--tcs-border-width) solid var(--tcs-border-dark);
	display: flex;
	align-items: flex-end;
	padding: 14px 12px;
}

/*
 * REAL COVER (2026-09-05). The artboard drew a black block with an orange
 * spine and "101"; the card now shows the actual cover image, so the spine
 * pseudo-element and the padding are gone and the image fills the frame.
 */
.tcs-thank-you__card-thumb {
	padding: 0;
	border-color: color-mix(in srgb, var(--tcs-white) 12%, transparent);
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7);
}

.tcs-thank-you__card-cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcs-thank-you__card-thumb-mark {
	position: relative;
	font-size: 26px;
	font-weight: var(--tcs-fw-bold);
	color: var(--tcs-orange);
	letter-spacing: -0.045em;
	line-height: 1;
}

.tcs-thank-you__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-thank-you-card-copy-gap);
	flex-grow: 1;
	min-width: 0;
}

.tcs-thank-you__card-heading {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tcs-thank-you__card-name {
	font-size: 23px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.026em;
	color: var(--tcs-cream);
}

.tcs-thank-you__card-meta {
	font-size: 14px;
	color: var(--tcs-body-dark);
}

/* The download CTA is .tcs-btn--orange (motion.css), full width of its
 * column rather than the system's default inline width — this is the one
 * control on the page every other element exists to point at. */
.tcs-thank-you__download {
	width: 100%;
	padding: 16px 0;
	border-radius: var(--tcs-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * THANK-YOU — the three info cards.
 * ------------------------------------------------------------------------- */

.tcs-thank-you__cards {
	width: 100%;
	max-width: var(--tcs-thank-you-cards-max);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tcs-thank-you-cards-gap);
}

.tcs-thank-you__info-card {
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-md);
	padding: var(--tcs-thank-you-info-pad);
	display: flex;
	flex-direction: column;
	gap: var(--tcs-thank-you-info-gap);
}

.tcs-thank-you__info-card svg {
	color: var(--tcs-orange);
}

.tcs-thank-you__info-title {
	font-size: 14.5px;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-thank-you__info-text {
	font-size: 13px;
	line-height: 1.58;
	color: var(--tcs-body);
}

.tcs-thank-you__info-link {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
	/*
	 * CODE-REVIEW FIX, 2026-09-04: the 44px tap floor every other inline
	 * link in this system already gets (checkout.css's own .tcs-checkout__
	 * refund-link; this file's own .tcs-delivery-failed__fallback-link,
	 * below) — this link inside the support-email sentence had colour and
	 * weight only. inline-flex + min-height is the system's established
	 * inline-link pattern, scoped to the link itself so the surrounding
	 * non-interactive sentence keeps its normal line-height.
	 */
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * THANK-YOU — the order footer (ThankYou.dc.html:133).
 * ------------------------------------------------------------------------- */

.tcs-thank-you__footer {
	font-size: 13.5px;
	color: var(--tcs-muted);
	text-align: center;
}

.tcs-thank-you__refund-link {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
	/*
	 * CODE-REVIEW FIX, 2026-09-04: same 44px tap-floor fix as .tcs-thank-
	 * you__info-link above — this order-footer link had colour and weight
	 * only.
	 */
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * DELIVERY-FAILED — the card: order status, retry, and the fallback rows.
 * ------------------------------------------------------------------------- */

.tcs-delivery-failed__card {
	width: 100%;
	max-width: var(--tcs-delivery-failed-card-max);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-lg);
	padding: var(--tcs-delivery-failed-card-pad);
	display: flex;
	flex-direction: column;
	gap: var(--tcs-delivery-failed-card-gap);
}

.tcs-delivery-failed__order-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tcs-delivery-order-row-gap);
	padding-bottom: var(--tcs-delivery-order-row-pad);
	border-bottom: var(--tcs-border-width) solid var(--tcs-cream-2);
}

.tcs-delivery-failed__order-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tcs-delivery-failed__order-label {
	font-size: 12px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-muted);
}

.tcs-delivery-failed__order-name {
	font-size: 17px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.022em;
	color: var(--tcs-black);
}

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

/* "Payment confirmed" — --tcs-green on its own tint, never used as a CTA
 * colour (tokens.md's own rule for --tcs-green), which is exactly why the
 * retry button below is --tcs-btn--dark rather than green. */
.tcs-delivery-failed__status-pill {
	flex-shrink: 0;
	font-size: var(--tcs-delivery-pill-fs);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-green);
	background: var(--tcs-delivery-pill-bg);
	border-radius: var(--tcs-radius-full);
	padding: var(--tcs-delivery-pill-pad);
	white-space: nowrap;
}

/* The retry action reuses .tcs-btn--dark (motion.css) full-width, matching
 * the artboard's own primary-on-white treatment (DeliveryFailed.dc.html:
 * 108-110) — deliberately NOT --tcs-btn--orange, which this page reserves
 * for nothing: orange here would visually compete with the thank-you page's
 * own download CTA for "the one thing to click" across the two screens a
 * buyer might see back to back. */
.tcs-delivery-failed__retry {
	width: 100%;
	padding: 17px 0;
	border-radius: var(--tcs-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 16px;
}

.tcs-delivery-failed__row-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tcs-delivery-actions-gap);
}

/* .tcs-row already carries the hover background/indent (motion.css); this
 * adds only the shape motion.css does not own — border, radius, centring. */
/* Button-shaped controls, not inline text links — unlike
 * .tcs-checkout__refund-link/.tcs-delivery-failed__fallback-link (which
 * keep the system's own underlined-inline-link convention), these are bordered
 * row buttons and take NO underline, matching DeliveryFailed.dc.html:112-113. */
.tcs-delivery-failed__action {
	border: var(--tcs-border-width) solid var(--tcs-border-2);
	border-radius: var(--tcs-delivery-action-radius);
	padding: var(--tcs-delivery-action-pad);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tcs-delivery-action-icon-gap);
	min-height: var(--tcs-tap-min);
	color: var(--tcs-black);
	text-decoration: none;
}

.tcs-delivery-failed__action svg {
	color: var(--tcs-muted);
	flex-shrink: 0;
}

.tcs-delivery-failed__action span {
	font-size: 14.5px;
	font-weight: var(--tcs-fw-semibold);
}

.tcs-delivery-failed__fallback {
	font-size: 13px;
	line-height: 1.6;
	color: var(--tcs-muted);
	text-align: center;
}

.tcs-delivery-failed__fallback-link {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
	/*
	 * The 44px tap floor (Story 4.5's sweep caught this at 16px tall).
	 * inline-flex + min-height, the artboards' own inline-link pattern.
	 */
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * TAP TARGETS AND FOCUS — both pages.
 *
 * Every actionable control gets the system's 44px minimum, and the same
 * visible focus-visible outline .tcs-btn already carries (motion.css) is
 * extended to the row-shaped actions and inline links this file adds, since
 * those are not .tcs-btn instances.
 * ------------------------------------------------------------------------- */

.tcs-thank-you__download,
.tcs-delivery-failed__retry {
	min-height: var(--tcs-tap-min);
}

.tcs-thank-you__info-link:focus-visible,
.tcs-thank-you__refund-link:focus-visible,
.tcs-delivery-failed__action:focus-visible,
.tcs-delivery-failed__fallback-link:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * MOBILE — 768px and below, matching every other band's own breakpoint.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {

	.tcs-thank-you__check,
	.tcs-delivery-failed__icon {
		width: var(--tcs-delivery-icon-size-mobile);
		height: var(--tcs-delivery-icon-size-mobile);
	}

	.tcs-thank-you__title,
	.tcs-delivery-failed__title {
		font-size: var(--tcs-fs-h2-mobile);
		line-height: var(--tcs-lh-h2-mobile);
		letter-spacing: var(--tcs-ls-h2-mobile);
	}

	/* The download card DROPS TO A SINGLE COLUMN but stays the largest
	 * element on screen — the constraint is about visual weight, not the
	 * desktop's side-by-side arrangement, and a 104px-wide book mark beside
	 * wrapped copy at 390px is the exact overflow risk the I/O matrix's
	 * "no horizontal scroll" row forbids. */
	.tcs-thank-you__card {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--tcs-thank-you-card-pad-mobile);
		gap: var(--tcs-thank-you-card-gap-mobile);
	}

	.tcs-thank-you__card-thumb {
		width: var(--tcs-thank-you-thumb-w-mobile);
		height: var(--tcs-thank-you-thumb-h-mobile);
	}

	.tcs-thank-you__cards {
		grid-template-columns: 1fr;
	}

	.tcs-delivery-failed__card {
		padding: var(--tcs-delivery-failed-card-pad-mobile);
	}

	.tcs-delivery-failed__order-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.tcs-delivery-failed__row-actions {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * "Confirming your payment…" holding state (page-thank-you.php, 2026-09-05):
 * an order that is real but still pending while Stripe's confirmation lands.
 * Same intro block as the paid state; the check becomes a soft amber clock
 * that breathes, and the second line is muted.
 * ------------------------------------------------------------------------- */
.tcs-thank-you__check--pending {
	background: color-mix(in srgb, var(--tcs-orange) 16%, transparent);
	color: var(--tcs-amber);
	animation: tcs-settling-pulse 1.8s ease-in-out infinite;
}

@keyframes tcs-settling-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.06); opacity: .75; }
}

.tcs-thank-you__subtitle--muted {
	margin-top: 10px;
	font-size: 14px;
	color: var(--tcs-muted);
}

.tcs-thank-you__subtitle--muted a {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
}

@media (prefers-reduced-motion: reduce) {
	.tcs-thank-you__check--pending {
		animation: none !important;
	}
}