/*
 * Order received (master plan §11.7, §11.7.1). Tokens only; loaded on the order-received page only.
 * Golden split hero, the "What happens next" timeline on the Stitch (the page's only motion, §7.1),
 * then the details in a mirrored split, and a dark "While you wait" band.
 */

.v-thanks { display: grid; gap: var(--v-space-9); padding-bottom: var(--v-space-9); }
@media (min-width: 1024px) {
	.v-thanks { gap: var(--v-space-10); padding-bottom: 0; }
}

/* ================================================================ Hero: 1.618 : 1 */
.v-thanks__hero { display: grid; gap: var(--v-space-7); align-items: start; }
@media (min-width: 1024px) {
	.v-thanks__hero { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--v-space-10); }
	.v-thanks__intro { padding-top: var(--v-space-6); }
}
.v-thanks__label { display: inline-flex; align-items: center; gap: var(--v-space-2); margin: 0; }
.v-thanks__label .v-icon { color: var(--v-positive); }
.v-thanks__title { margin: var(--v-space-4) 0 var(--v-space-5); font-size: var(--v-text-h1); line-height: var(--v-lh-h1); letter-spacing: var(--v-track-h1); }
.v-thanks__lead { max-width: 46ch; margin: 0; font-size: var(--v-text-body-lg); line-height: var(--v-lh-body); color: var(--v-text); }
 /* Two short sentences, one per line where there is room. */
@media (min-width: 600px) {
	.v-thanks__sentence { display: block; }
}
.v-thanks__facts {
	display: grid;
	gap: var(--v-space-4) var(--v-space-6);
	margin: var(--v-space-7) 0 0;
	padding-top: var(--v-space-5);
	border-top: var(--v-hairline) solid var(--v-border);
}
@media (min-width: 600px) {
	.v-thanks__facts { grid-template-columns: auto auto minmax(0, 1fr); }
}
.v-thanks__facts dt { font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-thanks__facts dd { margin: var(--v-space-1) 0 0; font-weight: var(--v-weight-semibold); font-variant-numeric: tabular-nums; }
.v-thanks__email { overflow-wrap: anywhere; }

.v-thanks__card { display: grid; gap: var(--v-space-4); padding: var(--v-space-6) var(--v-space-5); background: var(--v-surface-alt); }
@media (min-width: 768px) {
	.v-thanks__card { padding: var(--v-space-6); }
}
.v-thanks__card-title,
.v-thanks__subhead {
	margin: 0;
	font-family: var(--v-font-body);
	font-size: var(--v-text-h4);
	font-weight: var(--v-weight-bold);
	line-height: var(--v-lh-ui);
	letter-spacing: 0;
	color: var(--v-text);
}
.v-thanks__subhead--small { margin-top: var(--v-space-4); font-size: var(--v-text-ui); }

/* ================================================================ What happens next (§7.1 confirmation timeline) */
.v-thanks__next { padding-top: var(--v-space-8); border-top: var(--v-hairline) solid var(--v-border); }
.v-thanks__h2 { margin: 0 0 var(--v-space-7); }
.v-timeline {
	--_mark: var(--v-step-mark);
	--_gutter: calc(var(--_mark) + var(--v-space-4));
	--_top: calc(var(--v-text-ui) * var(--v-lh-ui) / 2 - var(--_mark) / 2); /* centred on the title's first line */
	--_gap: var(--v-space-6);
	display: grid;
	gap: var(--_gap);
	margin: 0;
	padding: 0 0 0 var(--_gutter);
	list-style: none;
}
.v-timeline__step { position: relative; }
/* The stage marker (§6 v1.58): a square holding the stage's icon. Next = Graphite outline and icon (7:1; Muted was too faint on Chalk);
   done = Ink; now = Hide. The fill is its own layer so it can rise from the bottom edge. */
.v-timeline__mark {
	position: absolute;
	top: var(--_top);
	left: calc(var(--_gutter) * -1);
	display: grid;
	place-items: center;
	width: var(--_mark);
	height: var(--_mark);
	border: var(--v-hairline) solid var(--v-text-muted);
	background: var(--v-surface);
	color: var(--v-text-muted);
}
.v-timeline__mark::before {
	content: "";
	position: absolute;
	inset: calc(var(--v-hairline) * -1);
	background: var(--_fill, transparent);
}
.v-timeline__mark .v-icon { position: relative; width: var(--v-step-icon); height: var(--v-step-icon); }
.v-timeline__step:is(.is-done, .is-current) .v-timeline__mark { border-color: transparent; color: var(--v-surface); }
.v-timeline__step.is-done .v-timeline__mark { --_fill: var(--v-text); }
.v-timeline__step.is-current .v-timeline__mark { --_fill: var(--v-action); }
/* As the Stitch reaches a stage its square fills from the bottom edge and the icon turns Paper. */
.v-timeline__step:is(.is-done, .is-current) .v-timeline__mark::before { animation: v-mark-fill var(--v-dur-ui) var(--v-ease-out) calc(var(--i, 0) * var(--v-stagger-cards)) both; }
.v-timeline__step:is(.is-done, .is-current) .v-timeline__mark .v-icon { animation: v-mark-icon var(--v-dur-ui) var(--v-ease-out) calc(var(--i, 0) * var(--v-stagger-cards)) both; }
@keyframes v-mark-fill { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes v-mark-icon { from { color: var(--v-text-muted); } }
/* One Stitch segment from each mark to the next: Line ahead, Hide behind, half-drawn at the current
   stage (the jacket is on its way to the next one). Dashes are clipped, never stretched. */
.v-timeline__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: calc(var(--_top) + var(--_mark) + var(--v-space-1));
	bottom: calc((var(--_gap) + var(--_top) - var(--v-space-1)) * -1);
	left: calc(var(--_gutter) * -1 + var(--_mark) / 2 - var(--v-stitch-width) / 2);
	width: var(--v-stitch-width);
	color: var(--v-border);
	background-image: repeating-linear-gradient(180deg, currentColor 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
}
.v-timeline__step.is-done::before {
	color: var(--v-stitch);
	clip-path: inset(0 0 0 0); /* an end the draw can interpolate to (from `none` it would jump) */
}
.v-timeline__step.is-current::before {
	color: var(--v-stitch);
	clip-path: inset(0 0 50% 0);
}
.v-timeline__step:is(.is-done, .is-current)::before {
	animation: v-timeline-y var(--v-dur-image) var(--v-ease-out) both;
	animation-delay: calc(var(--i, 0) * var(--v-stagger-cards));
}
@keyframes v-timeline-y { from { clip-path: inset(0 0 100% 0); } }
@keyframes v-timeline-x { from { clip-path: inset(0 100% 0 0); } }

/* The scissors (§7.1 v1.25) ride the current stage's Stitch as it draws and rest half-way to the
   next stage, pointing down (across from 1024 px). The box repeats the segment's geometry. */
.v-timeline__cut {
	position: absolute;
	top: calc(var(--_top) + var(--_mark) + var(--v-space-1));
	bottom: calc((var(--_gap) + var(--_top) - var(--v-space-1)) * -1);
	left: calc(var(--_gutter) * -1 + var(--_mark) / 2 - var(--v-stitch-width) / 2);
	width: var(--v-stitch-width);
	container-type: size;
}
.v-timeline__cut .v-scissors {
	position: absolute;
	top: calc(50% - var(--v-scissors) / 2);
	left: calc(50% - var(--v-scissors) * var(--v-scissors-screw));
	rotate: 90deg;
	transform-origin: calc(var(--v-scissors-screw) * 100%) 50%;
	animation:
		v-timeline-cut-y var(--v-dur-image) var(--v-ease-out) both,
		v-scissors-in var(--v-dur-press) var(--v-ease-out) both;
	animation-delay: calc(var(--i, 0) * var(--v-stagger-cards));
}
.v-timeline__cut .v-scissors__blade--a { animation: v-snip-a-half calc(var(--v-dur-image) / 5) var(--v-ease-in-out) calc(var(--i, 0) * var(--v-stagger-cards)) 5 alternate; }
.v-timeline__cut .v-scissors__blade--b { animation: v-snip-b-half calc(var(--v-dur-image) / 5) var(--v-ease-in-out) calc(var(--i, 0) * var(--v-stagger-cards)) 5 alternate; }
@keyframes v-timeline-cut-y { from { translate: 0 -50cqh; } }
@keyframes v-timeline-cut-x { from { translate: -50cqw 0; } }

.v-timeline__title {
	margin: 0;
	font-family: var(--v-font-body);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-bold);
	line-height: var(--v-lh-ui);
	letter-spacing: 0;
	color: var(--v-text);
}
.v-timeline__step:not(.is-done, .is-current) .v-timeline__title { color: var(--v-text-muted); }
.v-timeline__when { margin: var(--v-space-1) 0 0; font-size: var(--v-text-small); font-weight: var(--v-weight-semibold); font-variant-numeric: tabular-nums; color: var(--v-text); white-space: nowrap; }
.v-timeline__text { max-width: 32ch; margin: var(--v-space-1) 0 0; font-size: var(--v-text-small); color: var(--v-text-muted); }

/* Desktop: across the page, marks on one line. */
@media (min-width: 1024px) {
	.v-timeline {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--v-space-5);
		--_gap: var(--v-space-5);
		padding: calc(var(--_mark) + var(--v-space-5)) 0 0;
	}
	.v-timeline__mark { top: calc((var(--_mark) + var(--v-space-5)) * -1); left: 0; }
	.v-timeline__step:not(:last-child)::before {
		top: calc((var(--_mark) + var(--v-space-5)) * -1 + var(--_mark) / 2 - var(--v-stitch-width) / 2);
		bottom: auto;
		left: calc(var(--_mark) + var(--v-space-2));
		right: calc(var(--_gap) * -1 + var(--v-space-2));
		width: auto;
		height: var(--v-stitch-width);
		background-image: repeating-linear-gradient(90deg, currentColor 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
	}
	.v-timeline__step.is-current::before { clip-path: inset(0 50% 0 0); }
	.v-timeline__step:is(.is-done, .is-current)::before { animation-name: v-timeline-x; }
	.v-timeline__cut {
		top: calc((var(--_mark) + var(--v-space-5)) * -1 + var(--_mark) / 2 - var(--v-stitch-width) / 2);
		bottom: auto;
		left: calc(var(--_mark) + var(--v-space-2));
		right: calc(var(--_gap) * -1 + var(--v-space-2));
		width: auto;
		height: var(--v-stitch-width);
	}
	.v-timeline__cut .v-scissors { rotate: none; animation-name: v-timeline-cut-x, v-scissors-in; }
}
@media (prefers-reduced-motion: reduce) {
	.v-timeline__step::before,
	.v-timeline__mark::before,
	.v-timeline__mark .v-icon { animation: none !important; }
}
.v-thanks__track { margin: var(--v-space-7) 0 0; }

/* ================================================================ Details: mirrored split 1 : 1.618 */
.v-thanks__details { display: grid; gap: var(--v-space-8); align-items: start; }
@media (min-width: 1024px) {
	.v-thanks__details { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--v-space-10); padding-top: var(--v-space-8); border-top: var(--v-hairline) solid var(--v-border); }
}
.v-thanks__side { display: grid; gap: var(--v-space-6); }
@media (min-width: 768px) {
	.v-thanks__side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.v-thanks__side > .v-thanks__block--note { grid-column: 1 / -1; }
}
.v-thanks__block { display: grid; gap: var(--v-space-3); align-content: start; }
.v-thanks__block p { margin: 0; color: var(--v-text-muted); }
.v-thanks__block--note { padding: var(--v-space-5); background: var(--v-surface-alt); }
.v-thanks__block--note p { color: var(--v-text); }
.v-thanks__account { padding: var(--v-space-5); border: var(--v-hairline) solid var(--v-border-input); }
.v-thanks__account .v-btn { justify-self: start; }
.v-thanks__address { font-style: normal; line-height: var(--v-lh-body); }
.v-thanks__block .v-thanks__line { margin: 0; color: var(--v-text); }
.v-thanks__block .v-arrow-link { justify-self: start; }

/* ================================================================ While you wait (dark band, full bleed) */
.v-thanks__after {
	margin-inline: calc(50% - 50vw);
	padding: var(--v-space-10) var(--v-gutter);
	background: var(--v-surface);
	color: var(--v-text);
}
.v-thanks__after-inner { display: grid; gap: var(--v-space-4); justify-items: start; max-width: var(--v-container); margin-inline: auto; }
.v-thanks__after-inner p { max-width: 44ch; margin: 0; color: var(--v-text-muted); }
.v-thanks__after .v-thanks__h2 { margin: 0; color: var(--v-heading); }
.v-thanks__after .v-btn { margin-top: var(--v-space-3); }

/* Failed payment */
.v-thanks__failed { display: grid; gap: var(--v-space-5); justify-items: start; max-width: 40rem; }
.v-thanks__failed .v-thanks__title { margin: 0; }

/* ================================================================ Order tracking + My Account (§11.14) */
/* No decorative motion on account or order-tracking pages (AGENTS.md): the timeline and its scissors
   are shown already drawn, at rest. The draw plays only on the confirmation (§7.1). */
:is(.v-track, .v-account-timeline) .v-timeline__step::before,
:is(.v-track, .v-account-timeline) .v-timeline__mark::before,
:is(.v-track, .v-account-timeline) .v-timeline__mark .v-icon,
:is(.v-track, .v-account-timeline) .v-timeline__cut :is(.v-scissors, .v-scissors__blade) { animation: none; }
.v-track__notes-title { margin: var(--v-space-6) 0 0; font-size: var(--v-text-h4); font-family: var(--v-font-body); font-weight: var(--v-weight-bold); }
.v-track__notes { display: grid; gap: var(--v-space-4); margin: 0; padding: 0; list-style: none; max-width: var(--v-measure); }
.v-track__notes p { margin: 0; }
.v-track__note-date { font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-timeline__courier { margin: var(--v-space-5) 0 0; }
.v-track-form { display: grid; gap: var(--v-space-5); max-width: 40rem; }
.v-track-form__intro { margin: 0; color: var(--v-text-muted); max-width: var(--v-measure); }
.v-track-form__fields { display: grid; gap: var(--v-space-5); }
@media (min-width: 768px) {
	.v-track-form__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }
}
.v-track { display: grid; gap: var(--v-space-3); margin-block: var(--v-space-8); }
.v-track__meta,
.v-track__state { margin: 0; color: var(--v-text-muted); }
.v-track .v-timeline { margin-top: var(--v-space-5); }
.v-account-timeline { margin-bottom: var(--v-space-8); }