/**
 * Tribal Order Trading Post — deals (transaction phase)
 * =============================================================================
 * The My Deals list, the single-deal screen, and the step-up re-verification
 * panel. Extends marketplace.css; same Vault Ledger tokens, no new hardcoded
 * values — deal-status colors join the token set here.
 *
 *   Signature  THE DEAL RAIL. The four states of a transaction sit on one gold
 *              hairline that fills as the deal advances; the current state
 *              breathes. A member reads where their cards are from across the
 *              room, before a single label.
 *   Rows       A deal needing this member's move carries the gold spine and a
 *              brighter plate — the pile sorts itself by urgency at a glance.
 * =============================================================================
 */

.tov-mkt {
	/* Deal status — added to the --tov-* token set, never hardcoded below. */
	--tov-deal-agreed: var(--tov-warn);
	--tov-deal-ready: var(--tov-gold-bright);
	--tov-deal-transit: var(--tov-gold);
	--tov-deal-confirming: var(--tov-gold-bright);
	--tov-deal-disputed: var(--tov-danger);
	--tov-deal-admin: var(--tov-danger);
	--tov-deal-completed: var(--tov-success);
	/* Muted, not dim: measured ~4.1:1 on the badge's own 10% tinted plate at
	   11px/600 — the same under-AA failure marketplace-trades.css fixed for
	   withdrawn/expired. */
	--tov-deal-cancelled: var(--tov-text-muted);
}

/* ------------------------------------------------------------- status badges */

.tov-mkt__badge--deal-agreed { color: var(--tov-deal-agreed); }
.tov-mkt__badge--deal-ready_to_ship { color: var(--tov-deal-ready); }
.tov-mkt__badge--deal-in_transit { color: var(--tov-deal-transit); }
.tov-mkt__badge--deal-both_confirmed { color: var(--tov-deal-confirming); }
.tov-mkt__badge--deal-disputed { color: var(--tov-deal-disputed); }
.tov-mkt__badge--deal-admin_review { color: var(--tov-deal-admin); }
.tov-mkt__badge--deal-completed { color: var(--tov-deal-completed); }
.tov-mkt__badge--deal-cancelled { color: var(--tov-deal-cancelled); }

/* ---------------------------------------------------------------- list rows */

.tov-deals {
	display: flex;
	flex-direction: column;
	gap: var(--tov-space-3);
}

/* Rows stagger in with the same rhythm the grids use. Capped at eight. */
.tov-deals > * {
	animation: tov-mkt-rise var(--tov-dur-base) var(--tov-ease-out) both;
}

.tov-deals > *:nth-child(1) { animation-delay: 40ms; }
.tov-deals > *:nth-child(2) { animation-delay: 80ms; }
.tov-deals > *:nth-child(3) { animation-delay: 120ms; }
.tov-deals > *:nth-child(4) { animation-delay: 160ms; }
.tov-deals > *:nth-child(5) { animation-delay: 200ms; }
.tov-deals > *:nth-child(6) { animation-delay: 240ms; }
.tov-deals > *:nth-child(7) { animation-delay: 280ms; }
.tov-deals > *:nth-child(n+8) { animation-delay: 320ms; }

.tov-deal-row.is-hidden {
	display: none !important;
}

.tov-mkt__filter.is-empty .tov-deals {
	display: none;
}

.tov-deal-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--tov-space-1) var(--tov-space-4);
	padding: var(--tov-space-3) var(--tov-space-4);
	background: var(--tov-surface);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
	text-decoration: none !important;
	color: var(--tov-text) !important;
	transition: border-color var(--tov-dur-fast) var(--tov-ease-out),
		background var(--tov-dur-fast) var(--tov-ease-out),
		transform var(--tov-dur-fast) var(--tov-ease-out),
		box-shadow var(--tov-dur-base) var(--tov-ease-out);
}

.tov-deal-row:hover,
.tov-deal-row:focus-visible {
	border-color: var(--tov-line-strong);
	background: var(--tov-surface-2);
	color: var(--tov-text) !important;
	transform: translateY(-1px);
	box-shadow: var(--tov-shadow-md);
}

/* A deal waiting on this member: the gold spine and a warmer plate. */
.tov-deal-row.is-actionable {
	border-left: 3px solid var(--tov-gold);
	background: linear-gradient(90deg, rgba(212, 162, 78, 0.06), transparent 40%),
		var(--tov-surface);
}

.tov-deal-row__type {
	font-family: var(--tov-font-display);
	font-size: var(--tov-text-base);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tov-gold-bright);
}

.tov-deal-row__partner,
.tov-deal-row__cards {
	font-size: var(--tov-text-sm);
	color: var(--tov-text-muted);
}

.tov-deal-row__flag {
	margin-left: auto;
	font-size: var(--tov-text-sm);
	font-weight: 600;
	color: var(--tov-gold-bright);
}

/* -------------------------------------------------------------- single deal */

.tov-deal__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--tov-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--tov-space-3);
}

.tov-deal__title {
	font-family: var(--tov-font-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tov-text);
	margin: 0;
}

.tov-deal__partner {
	font-size: 0.7em;
	color: var(--tov-text-muted);
	text-transform: none;
	letter-spacing: normal;
	margin-left: var(--tov-space-2);
}

/* THE DEAL RAIL — four stations on one hairline. Each step is a node; the line
 * between nodes is each step's ::after, gold up to the current station and
 * faint past it. The current node breathes; done nodes are set gold; future
 * nodes are empty rings. Replaces the flat boxed strip. */
.tov-deal__steps {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0 0 var(--tov-space-5);
	padding: var(--tov-space-2) 0 0;
	border: 0;
}

.tov-deal__step {
	position: relative;
	flex: 1;
	padding: var(--tov-space-5) var(--tov-space-2) 0;
	text-align: center;
	font-family: var(--tov-font-display);
	font-size: var(--tov-text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tov-text-dim);
	background: none;
	border: 0;
}

/* The node. */
.tov-deal__step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 11px;
	height: 11px;
	transform: translateX(-50%);
	background: var(--tov-bg-2);
	border: 1px solid var(--tov-line-strong);
	border-radius: 50%;
	z-index: 1;
}

/* The line to the next node. */
.tov-deal__step::after {
	content: "";
	position: absolute;
	top: 5px;
	left: calc(50% + 8px);
	right: calc(-50% + 8px);
	height: 1px;
	background: var(--tov-line);
}

.tov-deal__step:last-child::after {
	content: none;
}

.tov-deal__step.is-done {
	color: var(--tov-text-muted);
}

.tov-deal__step.is-done::before {
	background: var(--tov-gold);
	border-color: var(--tov-gold);
}

/* The filled rail DRAWS on arrival rather than appearing already full. This is
   the one animation in the marketplace that carries information instead of
   decorating it: the gold visibly runs station to station and stops at where the
   deal actually stands, so the member watches the answer to "how far along is
   this" get made. Everything else in the Post animates because a page is
   arriving; this animates because it is saying something.
   Reuses tov-mkt-draw from marketplace.css — scaleX from a left origin. */
.tov-deal__step.is-done::after {
	background: var(--tov-line-strong);
	transform-origin: left center;
	animation: tov-mkt-draw var(--tov-dur-base) var(--tov-ease-out) both;
}

/* 180ms apart against a 220ms draw: each segment starts before the one behind it
   finishes, so the rail reads as one continuous run rather than four separate
   bars. Capped at the fourth station, matching the stagger caps elsewhere. */
.tov-deal__step:nth-child(1).is-done::after { animation-delay: 200ms; }
.tov-deal__step:nth-child(2).is-done::after { animation-delay: 380ms; }
.tov-deal__step:nth-child(3).is-done::after { animation-delay: 560ms; }
.tov-deal__step:nth-child(n+4).is-done::after { animation-delay: 740ms; }

/* The vertical rail's own draw. Below 720px the segments are 1px wide and run
   down the page, where a scaleX draw would only pop them into existence — the
   run has to happen along the axis the line actually travels. */
@keyframes tov-mkt-draw-down {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

.tov-deal__step.is-current {
	color: var(--tov-gold-bright);
	font-weight: 600;
}

.tov-deal__step.is-current::before {
	background: var(--tov-gold-bright);
	border-color: var(--tov-gold-bright);
	box-shadow: 0 0 12px -2px rgba(236, 198, 119, 0.8);
	animation: tov-mkt-pulse 2.4s var(--tov-ease-out) infinite;
}

.tov-deal__clock {
	font-size: var(--tov-text-sm);
	color: var(--tov-text-muted);
	margin: 0 0 var(--tov-space-4);
}

.tov-deal__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--tov-space-4);
	margin-bottom: var(--tov-space-4);
}

.tov-deal__side-title {
	font-family: var(--tov-font-display);
	font-size: var(--tov-text-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tov-text-muted);
	margin: 0 0 var(--tov-space-2);
}

.tov-deal__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tov-space-3);
}

/* Deal tiles stay hand-sized. The shared card tile fills whatever box it is
   given, and a deal column is a wide box — unconstrained, one card of 600×800
   art swallowed half a screen and pushed the timeline into the void. */
.tov-deal__tiles .tov-mkt__tile {
	width: 230px;
	max-width: 100%;
}

.tov-deal__money {
	font-size: var(--tov-text-base);
	color: var(--tov-text-muted);
	border-left: 2px solid var(--tov-line-strong);
	padding-left: var(--tov-space-3);
	margin: 0 0 var(--tov-space-4);
	font-variant-numeric: tabular-nums;
}

.tov-deal__actions {
	display: flex;
	flex-wrap: wrap;
	/* flex-start, not center. The actions filter contributes whole document
	   panels into this rail alongside 44px buttons, and centring hung a payment
	   plate on the vertical midline of a small ghost button beside it. Controls
	   in a rail line up at the top; they do not float. */
	align-items: flex-start;
	gap: var(--tov-space-3);
	margin-bottom: var(--tov-space-5);
}

.tov-deal__actions:empty { display: none; }

/* A panel is not a control. Anything that arrives here as a bordered plate takes
   the whole row rather than sharing one with a button, and every plate holds the
   same 34rem measure so a stack of them does not ladder. */
.tov-deal__actions > .tov-deal__address-form,
.tov-deal__actions > .tov-deal__ship-form,
.tov-deal__actions > .tov-deal__reason,
.tov-deal__actions > .tov-stepup {
	flex: 1 1 100%;
	max-width: 34rem;
}

/* Shipping panels are document plates — same brackets as the listing's
   payment panel; an address is paperwork of record. The ship form joins them:
   a tracking number is the shipper's half of that same record, and as a bare
   label/input/button trio it used to dissolve into the action rail. */
.tov-deal__address-form--needed {
	border-top: 2px solid var(--tov-gold);
	box-shadow: var(--tov-charge);
}

.tov-deal__waiting {
	max-width: 34rem;
	margin-bottom: var(--tov-space-4);
	padding: var(--tov-space-4);
	background: var(--tov-bg-2);
	border: 1px dashed var(--tov-line-strong);
	border-radius: var(--tov-r-sm);
}

.tov-deal__waiting-title {
	margin: 0 0 var(--tov-space-2);
	font-family: var(--tov-font-display);
	font-size: var(--tov-text-sm);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tov-gold);
}

.tov-deal__address-form,
.tov-deal__ship-form,
.tov-deal__ship-to {
	background:
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) top left / 14px 1px,
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) top left / 1px 14px,
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) bottom right / 14px 1px,
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) bottom right / 1px 14px,
		var(--tov-surface);
	background-repeat: no-repeat;
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-sm);
	padding: var(--tov-space-4);
	margin-bottom: var(--tov-space-4);
	max-width: 34rem;
}

/* The trio inside the plate is an explicit stack now that the plate has edges;
   it was relying on the 100%-wide input to force its own line breaks. */
.tov-deal__ship-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tov-space-2);
}

.tov-deal__address-form h3,
.tov-deal__ship-to h3 {
	font-family: var(--tov-font-display);
	font-size: var(--tov-text-sm);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tov-gold);
	margin: 0 0 var(--tov-space-2);
}

.tov-deal__ship-to-text {
	font-size: var(--tov-text-base);
	color: var(--tov-text);
	line-height: 1.5;
}

/* ------------------------------------------------------------ the reason */

/* "SOMETHING WRONG WITH THIS DEAL?" — the dispute / report disclosure.
 *
 * Closed, it is one muted line and nothing else: no plate, no border, no
 * background. That is the whole point. This control summons a human being into
 * a live transaction between two members, and a screen that offers it at the
 * same visual weight as "Mark as shipped" invites people to reach for it first.
 * The member has to go looking, and the shape says so.
 *
 * Grammar borrowed, not invented: the muted-to-danger colour turn and the
 * hidden native marker come from messaging's .tov-msg__report-toggle; the
 * rotating caret comes from .tov-offer-chain__summary in the trades sheet. It
 * sits a step heavier than the per-message report — display face, 600, the
 * muted ink rather than the dim — because reporting one message is housekeeping
 * and this is a transaction going wrong.
 */
.tov-deal__reason-toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* it is a real control, not a caption */
	padding: 2px var(--tov-space-2) 2px 0;
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tov-text-muted);
	cursor: pointer;
	list-style: none;
	transition: color var(--tov-dur-fast) var(--tov-ease-out);
}

/* Safari still paints its own triangle through list-style: none. */
.tov-deal__reason-toggle::-webkit-details-marker {
	display: none;
}

.tov-deal__reason-toggle::before {
	content: "\25B8"; /* ▸ — rotates to ▾ when open */
	display: inline-block;
	margin-right: var(--tov-space-2);
	color: var(--tov-danger);
	transition: transform var(--tov-dur-fast) var(--tov-ease-out);
}

.tov-deal__reason[open] .tov-deal__reason-toggle::before {
	transform: rotate(90deg);
}

/* Hovering or opening commits to the tone the panel below is about to take. */
.tov-deal__reason-toggle:hover,
.tov-deal__reason[open] .tov-deal__reason-toggle {
	color: var(--tov-danger);
}

/* Stated rather than left to the core sheet's blanket .tov-mkt :focus-visible:
   a summary is the one control on this screen a keyboard user can land on that
   has no border of its own to carry the ring. Offset 3px, matching the other
   two disclosures in the marketplace. */
.tov-deal__reason-toggle:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 3px;
}

/* Open, it is serious. The danger spine is the same sentence the gold spine
   says on .tov-deal-row.is-actionable — "this row is about you" — in the tone
   for something going wrong, and it is the only place on the deal screen that
   speaks it. The plate arrives on the FORM rather than on the <details>, so
   opening the disclosure never shifts the toggle line sideways.
   The --danger button inside is a hairline ghost, not a solid plate: the cut
   corner still belongs to exactly one committing action per screen, and this is
   not it. Nothing destructive in this system gets a solid plate. */
.tov-deal__reason-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tov-space-3);
	margin-top: var(--tov-space-2);
	padding: var(--tov-space-4);
	background: linear-gradient(90deg, rgba(217, 99, 78, 0.06), transparent 40%),
		var(--tov-surface);
	border: 1px solid var(--tov-line);
	border-left: 3px solid var(--tov-danger);
	border-radius: var(--tov-r-sm);
	animation: tov-mkt-rise var(--tov-dur-base) var(--tov-ease-out) both;
}

/* ------------------------------------------------------------- footnotes */

/* THE FOOTNOTE REGION. "How this works" and the timeline below it are both
 * standing reference — neither is a thing to do, both are things to consult —
 * so one hairline rule opens the region and the back-line's own rule closes it.
 * They read as a pair because they share a voice, not because each got its own
 * box: two more bordered panels under a screen that already carries plates and
 * an action rail would just be more furniture.
 *
 * Deliberately NOT a document plate. A plate on this screen means "paperwork of
 * record, act on this", and always-on background information must not borrow
 * that weight. Staying on the page plate also keeps .tov-mkt__hint's
 * --tov-text-dim at a comfortable 4.99:1; on --tov-surface it would be 4.59:1,
 * a hair over the line, and on --tov-surface-2 it fails outright at 4.32:1.
 */
/* Completed-deal ceremony. The catalog's certified seal, in marketplace
   namespace, so a finished deal is a record rather than a dead rail. */
.tov-deal__seal {
	display: flex;
	align-items: center;
	gap: var(--tov-space-3);
	margin: 0 0 var(--tov-space-5);
	padding: var(--tov-space-3) var(--tov-space-4);
	background:
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) top left / 14px 1px,
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) top left / 1px 14px,
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) bottom right / 14px 1px,
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) bottom right / 1px 14px,
		var(--tov-surface);
	background-repeat: no-repeat;
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-sm);
}

.tov-deal__seal-crest {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--tov-deal-completed, var(--tov-success));
}

.tov-deal__seal-crest svg {
	width: 26px;
	height: 26px;
}

.tov-deal__seal-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: var(--tov-text-sm);
	line-height: 1.35;
	color: var(--tov-text-muted);
}

.tov-deal__seal-text b {
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tov-gold);
}

.tov-deal__howto {
	padding-top: var(--tov-space-4);
	margin-bottom: var(--tov-space-4);
	border-top: 1px solid var(--tov-line);
	/* Prose measure, matching the marketplace's other explanatory copy. The
	   deal column is 60rem, and this paragraph would otherwise run the lot. */
	max-width: 62ch;
}

/* One voice for both headings. Muted, not gold: gold is what the plates use to
   say "read this now", and the point of a footnote is that it can wait. Only
   margin-top is asserted here — the timeline heading keeps the margin-bottom
   set for it below, and a paragraph wants a tighter gap than a list does. */
.tov-deal__howto h3,
.tov-deal__timeline h3 {
	margin-top: 0;
	font-family: var(--tov-font-display);
	font-size: var(--tov-text-sm);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tov-text-muted);
}

.tov-deal__howto h3 {
	margin-bottom: var(--tov-space-2);
}

/* Timeline — the deal's ledger entries. Latest entry's marker glows gold. */
.tov-deal__timeline ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--tov-line-strong);
}

.tov-deal__timeline li {
	position: relative;
	padding: var(--tov-space-1) 0 var(--tov-space-1) var(--tov-space-4);
	font-size: var(--tov-text-sm);
	color: var(--tov-text-muted);
}

.tov-deal__timeline li::before {
	content: "";
	position: absolute;
	left: -3px;
	top: 0.7em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--tov-gold-deep);
}

.tov-deal__timeline li:first-child::before {
	background: var(--tov-gold);
	box-shadow: 0 0 8px -1px rgba(212, 162, 78, 0.8);
}

.tov-deal__timeline-when {
	color: var(--tov-text-dim);
	margin-right: var(--tov-space-2);
	font-variant-numeric: tabular-nums;
}

.tov-deal__timeline h3,
.tov-deal__timeline {
	margin-bottom: var(--tov-space-4);
}

/* ---------------------------------------------------------------- step-up */

/* Re-verification is the vault door closing once more — the same document
   plate as the auth card, gold-edged. */
.tov-stepup {
	background:
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) top left / 18px 1px,
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) top left / 1px 18px,
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) bottom right / 18px 1px,
		linear-gradient(var(--tov-line-strong), var(--tov-line-strong)) bottom right / 1px 18px,
		linear-gradient(180deg, var(--tov-surface) 0%, var(--tov-bg-2) 100%);
	background-repeat: no-repeat;
	border: 1px solid var(--tov-line);
	border-top: 2px solid var(--tov-gold);
	border-radius: var(--tov-r-sm);
	padding: var(--tov-space-5);
	max-width: 30rem;
	margin: 0 0 var(--tov-space-4);
	animation: tov-mkt-rise var(--tov-dur-base) var(--tov-ease-out) both;
}

.tov-stepup__title {
	font-family: var(--tov-font-display);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tov-gold-bright);
	margin: 0 0 var(--tov-space-2);
}

.tov-stepup__lede {
	font-size: var(--tov-text-sm);
	color: var(--tov-text-muted);
	margin: 0 0 var(--tov-space-4);
}

/* Shown only when the send failed and an older code may still be usable. */
.tov-stepup__note {
	font-size: var(--tov-text-sm);
	color: var(--tov-warn);
	border-left: 2px solid var(--tov-warn);
	padding-left: var(--tov-space-3);
	margin: 0 0 var(--tov-space-4);
}

/* ------------------------------------------------------------------ shell */

.tov-deal {
	max-width: 60rem;
}

.tov-deal__side {
	min-width: 0;
}

.tov-deal__back {
	margin: var(--tov-space-5) 0 0;
	padding-top: var(--tov-space-4);
	border-top: 1px solid var(--tov-line);
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 720px) {
	.tov-deal__cards {
		grid-template-columns: 1fr;
	}

	/* The rail turns vertical: stations stack, the line runs down the left,
	   and every label stays whole instead of shrinking into ellipsis soup. */
	.tov-deal__steps {
		flex-direction: column;
		gap: 0;
		padding: 0;
	}

	.tov-deal__step {
		flex: none;
		padding: var(--tov-space-1) 0 var(--tov-space-3) var(--tov-space-6);
		text-align: left;
	}

	.tov-deal__step::before {
		top: 0.35em;
		left: 0;
		transform: none;
	}

	.tov-deal__step::after {
		top: calc(0.35em + 14px);
		bottom: -0.35em;
		left: 5px;
		right: auto;
		width: 1px;
		height: auto;
	}

	/* The draw follows the rail down the page. Same timing, same stagger — only
	   the axis changes, because the line does. */
	.tov-deal__step.is-done::after {
		transform-origin: center top;
		animation-name: tov-mkt-draw-down;
	}
}

@media (max-width: 560px) {
	.tov-deal__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--tov-space-2);
	}

	/* Deal rows stack their facts; the whole row stays one tap target. */
	.tov-deal-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--tov-space-1);
	}

	.tov-deal-row__flag {
		margin-left: 0;
	}

	/* Action forms and panels go full-bleed within the column so buttons
	   reach the 44px thumb minimum without crowding. */
	.tov-deal__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.tov-deal__actions .tov-mkt__btn {
		width: 100%;
	}

	.tov-deal__address-form,
	.tov-deal__ship-form,
	.tov-deal__ship-to,
	.tov-stepup,
	.tov-deal__actions > .tov-deal__address-form,
	.tov-deal__actions > .tov-deal__ship-form,
	.tov-deal__actions > .tov-deal__reason,
	.tov-deal__actions > .tov-stepup {
		max-width: none;
	}

	/* The reason panel's own submit goes full width with every other action on
	   this breakpoint; .tov-deal__actions .tov-mkt__btn above only reaches the
	   rail's own children, not the button nested inside the disclosure. */
	.tov-deal__reason-form .tov-mkt__btn {
		width: 100%;
	}
}

/* ------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.tov-deal-row,
	.tov-deal-row:hover {
		transition: none;
		transform: none;
	}

	.tov-deal__step.is-current::before {
		animation: none;
	}

	/* The rail draw is the one animation here that carries meaning, so it is
	   stated explicitly rather than left to the core sheet's blanket
	   `.tov-mkt *::after` rule to catch. It lands already drawn: the member
	   still sees exactly how far the deal has come, just not the run. */
	.tov-deal__step.is-done::after {
		animation: none;
	}

	/* The reason disclosure: the caret still turns and the panel still appears,
	   both instantly. Nothing here carries information the way the rail does —
	   the open state is legible from the spine and the tone alone. */
	.tov-deal__reason-toggle,
	.tov-deal__reason-toggle::before {
		transition: none;
	}

	.tov-deal__reason-form {
		animation: none;
	}
}