/**
 * Tribal Order Vault — Trade offers (Item 5)
 * =============================================================================
 * ART DIRECTION — "The Vault Ledger", negotiation chapter
 *
 * Same obsidian-and-gold codex as the catalog; this file only adds what a
 * negotiation needs and borrows everything else.
 *
 *   Signature  The trade is a BALANCE. Two card columns face each other across
 *              a gold hairline with a swap glyph on it, so "what I give / what
 *              I get" reads before a single word does.
 *   Status     One color per offer state, carried by a single --tov-offer-tone
 *              custom property that the status modifier swaps. Badges, the card
 *              edge, and the chain markers all read from that one token, so an
 *              offer's state is legible from three different distances.
 *   Terminal   The accepted panel is deliberately the loudest thing on the
 *              page, and its one control is deliberately dead.
 *
 * BORROWED, NOT RESTYLED. These come from the shared marketplace stylesheet and
 * are used as-is: .tov-mkt__btn (+ --ghost), .tov-mkt__field, .tov-mkt__hint,
 * .tov-mkt__notice, .tov-mkt__empty, and the whole .tov-mkt__tile card tile that
 * TOV_Listings::card_tile_html() emits. Restyling them here would fork a
 * component that three other modules also render.
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * Tokens
 *
 * The Vault Ledger set already lives on `.tov-mkt` in marketplace.css, which
 * this stylesheet declares as a hard dependency (TOV_Mkt_Assets::HANDLE_TRADES
 * depends on HANDLE_CORE), so the palette, spacing and type scales are
 * inherited rather than forked — there is one place to change a color and this
 * file is not it.
 *
 * Two kinds of addition below and nothing else.
 * ------------------------------------------------------------------------- */
.tov-mkt {
	/* Offer states. Five map onto existing semantics; only "countered" needed a
	   hue of its own — a cool steel, deliberately unlike both the gold of a live
	   offer and the red of a refusal, because being countered is neither.

	   MEASURE THESE ON THE BADGE PLATE, NOT ON THE PAGE. This note used to quote
	   contrast against --tov-bg (#0a0a0b), which no text wearing these tones
	   actually sits on: .tov-offer__status sets each tone at 11px/600 over a
	   plate mixed from the tone itself — color-mix(in srgb, tone 12%,
	   --tov-surface) — which is a lighter backdrop and therefore a harder test.
	   Measured there, two of the six were failing: expired #857f75 at 4.01:1 and
	   declined #d9634e at 4.44:1, both short of the 4.5:1 small bold text needs.
	   Both are lifted below, and on that plate the set now reads: open 8.7:1,
	   countered 6.0:1, declined 5.3:1, withdrawn 5.7:1, expired 5.7:1,
	   agreed 5.9:1 — all AA. Move one of these and re-measure it there. */
	--tov-offer-open: var(--tov-gold-bright);
	--tov-offer-countered: #7fa6d9;
	/* Not --tov-danger itself. The refusal red is correct everywhere it sits on
	   the page and only fails once it is standing on a plate made of 12% of
	   itself; this is that same red lifted just clear of AA there. */
	--tov-offer-declined: #e07a66;
	--tov-offer-withdrawn: var(--tov-text-muted);
	/* Was --tov-text-dim, which the messaging sheet already documents as ink for
	   the page plate only. Withdrawn and expired now share one grey — they were
	   always neighbouring greys, and it is the word on the badge that tells a
	   member which of the two happened. */
	--tov-offer-expired: var(--tov-text-muted);
	--tov-offer-agreed: var(--tov-success);
}

/* ---------------------------------------------------------------------------
 * The list
 * ------------------------------------------------------------------------- */
.tov-trades {
	display: flex;
	flex-direction: column;
	gap: var(--tov-space-6);
}

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

/* Offers arrive with the grid rhythm the rest of the Post uses. Capped at six
   per section; a long history settles in with the sixth. */
.tov-trades__section > .tov-offer {
	animation: tov-mkt-rise var(--tov-dur-base) var(--tov-ease-out) both;
}

.tov-trades__section > .tov-offer:nth-of-type(1) { animation-delay: 40ms; }
.tov-trades__section > .tov-offer:nth-of-type(2) { animation-delay: 80ms; }
.tov-trades__section > .tov-offer:nth-of-type(3) { animation-delay: 120ms; }
.tov-trades__section > .tov-offer:nth-of-type(4) { animation-delay: 160ms; }
.tov-trades__section > .tov-offer:nth-of-type(5) { animation-delay: 200ms; }
.tov-trades__section > .tov-offer:nth-of-type(n+6) { animation-delay: 240ms; }

/* One negotiation on its own: the offer, its history and the counter composer
   are one train of thought, so they sit closer together than list sections do. */
.tov-trades--single {
	gap: var(--tov-space-4);
}

.tov-trades__heading {
	display: flex;
	align-items: center;
	gap: var(--tov-space-3);
	margin: 0;
	padding-bottom: var(--tov-space-2);
	border-bottom: 1px solid var(--tov-line);
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-sm);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tov-gold);
}

.tov-trades__count {
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	font-family: var(--tov-font-body);
	font-size: var(--tov-text-xs);
	font-weight: 600;
	letter-spacing: 0;
	/* Ink-on-gold standardized on --tov-gold-ink (see .tov-mkt__pip and the
	   .tov-msg__pip migration note) — not the page background token. */
	color: var(--tov-gold-ink);
	background: var(--tov-gold);
	border-radius: var(--tov-r-pill);
	font-variant-numeric: tabular-nums;
}

.tov-trades__back {
	margin: 0 0 var(--tov-space-2);
	font-size: var(--tov-text-sm);
}

.tov-trades__back a {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* touch target — it was riding at ~17px on its own */
	gap: var(--tov-space-2);
	color: var(--tov-text-muted);
	text-decoration: none;
	transition: color var(--tov-dur-fast) var(--tov-ease-out);
}

.tov-trades__back a::before {
	content: "\2190"; /* ← as content, so the label stays translatable text */
	color: var(--tov-gold);
}

.tov-trades__back a:hover {
	color: var(--tov-text);
}

.tov-trades__back a:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * One offer
 *
 * The status tone is set once on the article and inherited by the badge, the
 * top edge, and the chain markers inside it.
 * ------------------------------------------------------------------------- */
.tov-offer {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--tov-space-4);
	padding: var(--tov-space-5);
	background: var(--tov-surface);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
	box-shadow: var(--tov-shadow-md);
}

.tov-offer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--tov-offer-tone, var(--tov-gold));
	opacity: 0.9;
}

.tov-offer--proposed { --tov-offer-tone: var(--tov-offer-open); }
.tov-offer--countered { --tov-offer-tone: var(--tov-offer-countered); }
.tov-offer--declined { --tov-offer-tone: var(--tov-offer-declined); }
.tov-offer--withdrawn { --tov-offer-tone: var(--tov-offer-withdrawn); }
.tov-offer--expired { --tov-offer-tone: var(--tov-offer-expired); }
.tov-offer--accepted { --tov-offer-tone: var(--tov-offer-agreed); }

/* A closed offer steps back without becoming unreadable — dimming the text
   would drop it under AA, so the surface recedes instead. */
.tov-offer--declined,
.tov-offer--withdrawn,
.tov-offer--expired {
	background: var(--tov-bg-2);
}

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

.tov-offer__title {
	margin: 0;
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-lg);
	letter-spacing: 0.02em;
	color: var(--tov-text);
}

/* Meta lines belong to the header above them, so they claw back most of the
   card's flex gap rather than floating between blocks. */
.tov-offer__clock,
.tov-offer__lineage {
	margin: calc(var(--tov-space-4) * -1 + var(--tov-space-1)) 0 0;
	font-size: var(--tov-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tov-text-dim);
}

.tov-offer__clock + .tov-offer__lineage {
	margin-top: calc(var(--tov-space-3) * -1);
}

/* ---------------------------------------------------------------------------
 * Status badge
 * ------------------------------------------------------------------------- */
.tov-offer__status {
	flex: 0 0 auto;
	padding: var(--tov-space-1) var(--tov-space-3); /* was 4px 11px — off the grid */
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-xs);
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--tov-offer-tone, var(--tov-text-muted));
	background: color-mix(in srgb, var(--tov-offer-tone, transparent) 12%, var(--tov-surface));
	border: 1px solid color-mix(in srgb, var(--tov-offer-tone, var(--tov-line)) 45%, transparent);
	border-radius: var(--tov-r-pill);
}

/* Inside the history each step carries its own tone. */
.tov-offer__status--proposed { --tov-offer-tone: var(--tov-offer-open); }
.tov-offer__status--countered { --tov-offer-tone: var(--tov-offer-countered); }
.tov-offer__status--declined { --tov-offer-tone: var(--tov-offer-declined); }
.tov-offer__status--withdrawn { --tov-offer-tone: var(--tov-offer-withdrawn); }
.tov-offer__status--expired { --tov-offer-tone: var(--tov-offer-expired); }
.tov-offer__status--accepted { --tov-offer-tone: var(--tov-offer-agreed); }

/* ---------------------------------------------------------------------------
 * The two sides — the signature composition
 * ------------------------------------------------------------------------- */
.tov-offer__sides,
.tov-trade-composer__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: var(--tov-space-4);
}

.tov-offer__swap,
.tov-trade-composer__swap {
	align-self: center;
	margin: 0;
	padding: var(--tov-space-2) 0;
	font-size: var(--tov-text-xl);
	line-height: 1;
	color: var(--tov-gold);
	text-shadow: 0 0 18px rgba(212, 162, 78, 0.45);
}

.tov-offer-side {
	min-width: 0;
	padding: var(--tov-space-3);
	background: var(--tov-bg-2);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
}

/* The side you part with gets the warmer frame; the side you receive gets the
   gold one. Reading order alone would not carry that. */
.tov-offer-side--get {
	border-color: var(--tov-line-strong);
	background: linear-gradient(160deg, var(--tov-surface-2), var(--tov-bg-2));
}

.tov-offer-side--give {
	border-color: color-mix(in srgb, var(--tov-gold-deep) 55%, var(--tov-line));
	background: linear-gradient(160deg, var(--tov-bg-2), var(--tov-bg));
}

.tov-offer-side__label {
	display: flex;
	align-items: center;
	gap: var(--tov-space-2);
	margin: 0 0 var(--tov-space-3);
	padding-bottom: var(--tov-space-2);
	border-bottom: 1px solid var(--tov-line);
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tov-gold);
}

.tov-offer-side__count {
	margin-left: auto;
	/* --tov-text-dim only clears AA on the page plate, and this sits on the
	   --tov-surface-2 gradient of .tov-offer-side--get, where it was 4.32:1. */
	color: var(--tov-text-muted);
	font-variant-numeric: tabular-nums;
}

.tov-offer-side__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: var(--tov-space-3);
}

/* Grid children default to min-width:auto, which lets a long card name push the
   column wider than its track. */
.tov-offer-side__card {
	min-width: 0;
}

.tov-offer-side__empty {
	margin: 0;
	font-size: var(--tov-text-sm);
	color: var(--tov-text-dim);
}

/* ---------------------------------------------------------------------------
 * Boot — informational, and styled to look it. Deliberately NOT a price tag:
 * no large numerals, no green, nothing that reads as a payment the platform is
 * party to.
 * ------------------------------------------------------------------------- */
.tov-offer__boot {
	padding: var(--tov-space-3) var(--tov-space-4);
	background: var(--tov-bg-2);
	border: 1px dashed var(--tov-line-strong);
	border-radius: var(--tov-r-md);
}

.tov-offer__boot-line {
	margin: 0;
	font-family: var(--tov-font-display);
	font-weight: 500;
	font-size: var(--tov-text-base);
	letter-spacing: 0.04em;
	color: var(--tov-gold-bright);
	font-variant-numeric: tabular-nums;
}

.tov-offer__boot-note {
	margin: var(--tov-space-1) 0 0;
	font-size: var(--tov-text-xs);
	line-height: 1.5;
	color: var(--tov-text-muted);
}

/* ---------------------------------------------------------------------------
 * Note + footer
 * ------------------------------------------------------------------------- */
.tov-offer__note {
	margin: 0;
	padding-left: var(--tov-space-4);
	border-left: 2px solid var(--tov-gold-deep);
	font-size: var(--tov-text-sm);
	line-height: 1.6;
	color: var(--tov-text-muted);
	/* Server-side plain text: honour the member's line breaks, and never let a
	   long unbroken string blow the column out. */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.tov-offer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tov-space-3);
	padding-top: var(--tov-space-4);
	border-top: 1px solid var(--tov-line);
}

.tov-offer__action {
	margin: 0;
}

.tov-offer__source {
	margin-left: auto;
	/* Was a ~17px inline anchor at the end of the action row — the one control in
	   that row not already meeting the 44px minimum the buttons beside it hold. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--tov-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tov-text-dim);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--tov-dur-fast) var(--tov-ease-out),
		border-color var(--tov-dur-fast) var(--tov-ease-out);
}

.tov-offer__source:hover {
	color: var(--tov-gold);
	border-bottom-color: var(--tov-line-strong);
}

.tov-offer__source:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * The terminal panel — where this build stops, said out loud
 * ------------------------------------------------------------------------- */
.tov-trade-terminal {
	padding: var(--tov-space-5);
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(95, 179, 122, 0.12), transparent 60%),
		var(--tov-surface-2);
	border: 1px solid color-mix(in srgb, var(--tov-offer-agreed) 45%, transparent);
	border-radius: var(--tov-r-md);
}

.tov-trade-terminal__head {
	margin: 0 0 var(--tov-space-2);
	font-family: var(--tov-font-display);
	font-weight: 700;
	font-size: var(--tov-text-xl);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tov-offer-agreed);
}

.tov-trade-terminal__body,
.tov-trade-terminal__next {
	margin: 0 0 var(--tov-space-3);
	max-width: 62ch;
	font-size: var(--tov-text-sm);
	line-height: 1.6;
	color: var(--tov-text);
}

.tov-trade-terminal__next {
	color: var(--tov-text-muted);
}

/* Disabled on purpose and dressed to look it: flat, dim, not-allowed, and no
   hover response whatsoever. Nothing about it should invite a click. */
.tov-trade-terminal__cta {
	display: inline-block;
	padding: var(--tov-space-3) var(--tov-space-5); /* was 11px 20px — off the grid */
	font-family: var(--tov-font-display);
	font-weight: 500;
	font-size: var(--tov-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tov-text-dim);
	background: var(--tov-bg-2);
	border: 1px dashed var(--tov-line);
	border-radius: var(--tov-r-md);
	cursor: not-allowed;
}

.tov-trade-terminal__foot {
	margin: var(--tov-space-3) 0 0;
	max-width: 62ch;
	font-size: var(--tov-text-xs);
	line-height: 1.55;
	/* This panel is --tov-surface-2 under a green radial: --tov-text-dim read
	   4.32:1 on the flat part and 3.57:1 where the wash is brightest. */
	color: var(--tov-text-muted);
}

/* ---------------------------------------------------------------------------
 * Chain history
 * ------------------------------------------------------------------------- */
.tov-offer-chain {
	padding: var(--tov-space-3) var(--tov-space-4);
	background: var(--tov-bg-2);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
}

.tov-offer-chain__summary {
	/* inline-flex rather than the default list-item box: the marker is already
	   suppressed below and drawn as ::before, and this is what lets a ~17px
	   disclosure line reach the 44px minimum. The ::before simply becomes the
	   first flex item; its margin-right still spaces it off the label. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	font-family: var(--tov-font-display);
	font-weight: 500;
	font-size: var(--tov-text-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tov-gold);
	list-style: none;
}

.tov-offer-chain__summary::-webkit-details-marker {
	display: none;
}

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

.tov-offer-chain[open] .tov-offer-chain__summary::before {
	transform: rotate(90deg);
}

.tov-offer-chain__summary:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 3px;
}

.tov-offer-chain__list {
	margin: var(--tov-space-4) 0 0;
	padding: 0 0 0 var(--tov-space-5);
	list-style: none;
	border-left: 1px solid var(--tov-line);
}

.tov-offer-chain__step {
	position: relative;
	padding: 0 0 var(--tov-space-4);
}

.tov-offer-chain__step::before {
	content: "";
	position: absolute;
	top: 6px;
	left: calc(var(--tov-space-5) * -1 - 5px);
	width: 9px;
	height: 9px;
	background: var(--tov-bg-2);
	border: 1px solid var(--tov-line-strong);
	border-radius: 50%;
}

.tov-offer-chain__step.is-current::before {
	background: var(--tov-gold);
	border-color: var(--tov-gold-bright);
	box-shadow: 0 0 10px -1px rgba(212, 162, 78, 0.8);
}

.tov-offer-chain__who {
	margin: 0;
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-sm);
	letter-spacing: 0.06em;
	color: var(--tov-text);
}

.tov-offer-chain__terms {
	margin: var(--tov-space-1) 0;
	font-size: var(--tov-text-sm);
	line-height: 1.55;
	color: var(--tov-text-muted);
	overflow-wrap: anywhere;
}

.tov-offer-chain__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tov-space-2);
	margin: 0;
}

.tov-offer-chain__when {
	font-size: var(--tov-text-xs);
	color: var(--tov-text-dim);
}

/* ---------------------------------------------------------------------------
 * The composer
 * ------------------------------------------------------------------------- */
.tov-trade-composer {
	display: flex;
	flex-direction: column;
	gap: var(--tov-space-5);
	padding: var(--tov-space-5);
	background: var(--tov-surface);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
}

.tov-trade-composer__head {
	padding-bottom: var(--tov-space-4);
	border-bottom: 1px solid var(--tov-line);
}

.tov-trade-composer__title {
	margin: 0 0 var(--tov-space-2);
	font-family: var(--tov-font-display);
	font-weight: 700;
	font-size: var(--tov-text-xl);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tov-text);
}

.tov-trade-composer__intro {
	margin: 0 0 var(--tov-space-2);
	max-width: 62ch;
	font-size: var(--tov-text-sm);
	line-height: 1.6;
	color: var(--tov-text-muted);
}

/* Fieldsets carry a browser border/padding that fights the frame. */
.tov-trade-composer__col,
.tov-boot {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.tov-trade-composer__legend,
.tov-boot__legend {
	width: 100%;
	padding: 0 0 var(--tov-space-2);
	margin-bottom: var(--tov-space-3);
	border-bottom: 1px solid var(--tov-line);
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tov-gold);
}

.tov-picks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--tov-space-3);
}

.tov-pick {
	display: flex;
	flex-direction: column;
	gap: var(--tov-space-2);
	padding: var(--tov-space-2);
	background: var(--tov-bg-2);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
	transition: border-color var(--tov-dur-base) var(--tov-ease-out),
		background var(--tov-dur-base) var(--tov-ease-out);
}

/* Progressive enhancement — the tick box below already carries the state, so a
   browser without :has() loses emphasis, not information. */
.tov-pick:has(.tov-pick__input:checked) {
	background: var(--tov-surface-2);
	border-color: var(--tov-line-strong);
}

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

.tov-pick__label {
	display: flex;
	align-items: center;
	gap: var(--tov-space-2);
	min-height: 44px; /* touch target */
	padding: var(--tov-space-1) var(--tov-space-2);
	font-family: var(--tov-font-display);
	font-size: var(--tov-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tov-text-muted);
	border-radius: var(--tov-r-sm);
	cursor: pointer;
	user-select: none;
	transition: color var(--tov-dur-fast) var(--tov-ease-out),
		background var(--tov-dur-fast) var(--tov-ease-out);
}

.tov-pick__label:hover {
	color: var(--tov-text);
	background: var(--tov-surface-3);
}

.tov-pick__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	opacity: 0;
}

.tov-pick__mark {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: var(--tov-bg);
	border: 1px solid var(--tov-line-strong);
	border-radius: var(--tov-r-sm);
	transition: background var(--tov-dur-fast) var(--tov-ease-out),
		border-color var(--tov-dur-fast) var(--tov-ease-out);
}

.tov-pick__mark::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 5px;
	height: 9px;
	border: solid var(--tov-bg);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px) scale(0);
	transform-origin: center;
	transition: transform var(--tov-dur-fast) var(--tov-ease-spring);
}

.tov-pick__input:checked ~ .tov-pick__mark {
	background: var(--tov-gold);
	border-color: var(--tov-gold);
}

.tov-pick__input:checked ~ .tov-pick__mark::after {
	transform: rotate(45deg) translate(-1px, -1px) scale(1);
}

.tov-pick__input:checked ~ .tov-pick__text {
	color: var(--tov-gold-bright);
}

.tov-pick__input:focus-visible ~ .tov-pick__mark {
	outline: 2px solid var(--tov-focus);
	outline-offset: 2px;
}

/* Boot controls */
.tov-boot__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tov-space-4);
}

.tov-boot__row .tov-mkt__field {
	flex: 1 1 200px;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.tov-offer {
		padding: var(--tov-space-4);
	}
	.tov-offer-side__cards {
		grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	}
	.tov-picks {
		grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	}
}

/* The balance becomes a stack: columns full width, the swap glyph turns to
   point down the page so the give/get reading order survives. */
@media (max-width: 720px) {
	.tov-offer__sides,
	.tov-trade-composer__grid {
		grid-template-columns: 1fr;
		gap: var(--tov-space-3);
	}
	.tov-offer__swap,
	.tov-trade-composer__swap {
		justify-self: center;
		transform: rotate(90deg);
	}
	.tov-trade-composer {
		padding: var(--tov-space-4);
	}
	.tov-offer__foot {
		gap: var(--tov-space-2);
	}
	.tov-offer__source {
		margin-left: 0;
		flex: 1 1 100%;
	}
}

@media (max-width: 480px) {
	.tov-offer-side__cards,
	.tov-picks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tov-offer__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--tov-space-2);
	}
	.tov-trade-terminal {
		padding: var(--tov-space-4);
	}
	.tov-trade-terminal__cta {
		width: 100%;
		text-align: center;
	}
	/* Action buttons go full width so they are not thumb-sized targets in a row. */
	.tov-offer__action,
	.tov-offer__foot > .tov-mkt__btn {
		flex: 1 1 100%;
	}
	.tov-offer__action .tov-mkt__btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tov-trades *,
	.tov-trades *::before,
	.tov-trades *::after,
	.tov-trade-composer *,
	.tov-trade-composer *::before,
	.tov-trade-composer *::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.001ms !important;
	}
	/* The tick still needs to appear, just without the spring. */
	.tov-pick__mark::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Theme defense
 *
 * The host theme colors bare <button>, <input> and <select> through descendant
 * selectors (it turned the catalog's controls pink once already — see
 * database.css). Re-assert this module's own controls at higher specificity.
 * Shared .tov-mkt__* controls are the shared stylesheet's problem, not this
 * file's.
 * ------------------------------------------------------------------------- */
.tov-mkt .tov-trade-composer select,
.tov-mkt .tov-trade-composer input[type="number"],
.tov-mkt .tov-trade-composer textarea {
	font-family: var(--tov-font-body) !important;
	color: var(--tov-text) !important;
	background: var(--tov-surface) !important;
	border: 1px solid var(--tov-line) !important;
	border-radius: var(--tov-r-md);
	text-transform: none;
	letter-spacing: normal;
}

.tov-mkt .tov-trade-composer select:focus,
.tov-mkt .tov-trade-composer input[type="number"]:focus,
.tov-mkt .tov-trade-composer textarea:focus {
	outline: none;
	border-color: var(--tov-gold) !important;
	box-shadow: 0 0 0 3px rgba(212, 162, 78, 0.18);
}

.tov-mkt .tov-trade-terminal__cta[disabled] {
	color: var(--tov-text-dim) !important;
	background: var(--tov-bg-2) !important;
	border: 1px dashed var(--tov-line) !important;
	opacity: 1;
}