/*
 * The customer's sell-cart and offer page.
 *
 * This is the page where a stranger decides whether to trust the shop with their collection, so it
 * has to look considered rather than like a debug form. Before this, labels, inputs and their
 * explanations ran together in one paragraph — "Set code [ ] Number [ ] Set and number together
 * tell us..." read as a wall with boxes in it.
 *
 * ⚠️ THEME-NEUTRAL ON PURPOSE. No fonts, no brand colours, no fixed backgrounds: this renders
 * inside whatever theme the merchant runs, so it borrows their type and colour via `currentColor`
 * and `inherit` and only takes responsibility for LAYOUT. A stylesheet that imposed its own look
 * would fight every theme it ever met.
 */

.cardtrack-sell {
	/*
	 * Tables need the 50rem floor declared below. Keep the prose and forms at the original readable
	 * measure so a desktop customer does not get a horizontal scrollbar merely because this wrapper
	 * itself was narrower than its table.
	 */
	max-width: 50rem;
}

.cardtrack-sell > :not(.cardtrack-sell-scroll) {
	max-width: 46rem;
}

.cardtrack-sell h2,
.cardtrack-sell h3 {
	margin-block: 1.5em 0.5em;
}

/* ── Messages ────────────────────────────────────────────────────────────────────────────── */

.cardtrack-sell-notice {
	padding: 0.75em 1em;
	margin-block: 1em;
	border-inline-start: 4px solid currentColor;
	/* A tint of the theme's own text colour, so it reads as emphasis in light and dark alike. */
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.cardtrack-sell-error {
	/* Only the marker is coloured; the text keeps the theme's contrast. */
	border-inline-start-color: #b32d2e;
}

.cardtrack-sell-success {
	border-inline-start-color: #1a7f37;
}

/* ── The list of cards ───────────────────────────────────────────────────────────────────── */

/*
 * A floor under the table, and a scrollbar rather than mangled headings.
 *
 * How wide the page's text column is belongs to the merchant's theme, and a six-column table
 * with a card picture in it does not always fit. Without a floor the columns shrink until single
 * words break apart — "Conditio / n" — which is worse than scrolling. The table keeps readable
 * columns and this container scrolls when the theme cannot give it the room.
 */
.cardtrack-sell-scroll {
	overflow-x: auto;
}

/* A scrollable offer table has no controls to receive focus; make its horizontal scroll reachable by keyboard. */
.cardtrack-sell-scroll:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cardtrack-sell-lines {
	width: 100%;
	min-width: 50rem;
	border-collapse: collapse;
	margin-block: 1em;
}

.cardtrack-sell-lines th,
.cardtrack-sell-lines td {
	padding: 0.6em 0.75em;
	text-align: start;
	vertical-align: top;
	border-block-end: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

/*
 * Sentence case, not uppercase. Uppercase with letter-spacing made single words like "CONDITION"
 * wider than the column they head, and in a fixed-layout table an unbreakable word overflows into
 * its neighbour instead of wrapping. It also shouted.
 */
.cardtrack-sell-lines th {
	font-size: 0.85em;
	opacity: 0.7;
	/* Belt and braces: nothing may overlap the next column, whatever a translation is called. */
	overflow-wrap: break-word;
}

/*
 * Fixed layout, and column widths declared per table.
 *
 * Automatic layout gave every column roughly its header's width, so "Condition" and "Language"
 * — which hold "NM" and "EN" — were each as wide as the card name, and the card name wrapped.
 * With six columns inside a single page measure there is no slack for the browser to hand back,
 * so the widths are stated rather than negotiated. The two tables are different shapes, hence
 * the modifier class on each.
 */
.cardtrack-sell-lines {
	table-layout: fixed;
}

.cardtrack-sell-lines td {
	/* Prices line up as numerals. Not right-aligned: this column also carries plain sentences
	   ("counted as bulk, priced at the counter"), and a right-aligned sentence looks broken. */
	font-variant-numeric: tabular-nums;
}

/*
 * Breaking inside a word is a last resort, so it is allowed ONLY where long words actually occur:
 * the card's name. Applied to the whole row it split prices — "$17.7" on one line and "1" on the
 * next — which reads as a different number.
 */
.cardtrack-sell-card-text {
	overflow-wrap: break-word;
}

/*
 * Card | Condition | Language | Qty | We pay | remove.
 * Wide enough that each heading fits on one line — a heading broken as "Conditio / n" is worse
 * than a narrower card column.
 */
/*
 * Card | Condition | Language | Qty | We pay | remove.
 *
 * MEASURED, NOT GUESSED. Against the 800px floor above, with 24px of cell padding, the widest
 * thing each column must hold is: the 60px picture plus a 12px gap plus "Magnificent" (119px);
 * "Damaged" (95px, wider than its own heading); the heading "Language" (89px, far wider than the
 * "EN" it holds); "Qty" (32px); "We pay" (64px); and the Remove button (99px). Every width below
 * clears its column's requirement. Guessing at these produced a run of near-misses that broke
 * single words in half — "Languag / e", "$17.7 / 1" — each one only a pixel or two short.
 */
.cardtrack-sell-cart th:nth-child(1) { width: 33%; }
.cardtrack-sell-cart th:nth-child(2) { width: 16%; }
.cardtrack-sell-cart th:nth-child(3) { width: 15%; }
.cardtrack-sell-cart th:nth-child(4) { width: 7%; }
.cardtrack-sell-cart th:nth-child(5) { width: 13%; }
.cardtrack-sell-cart th:nth-child(6) { width: 16%; }

/*
 * Card | You said | We graded | Cash | Store credit. Same measurement as above: the card column
 * carries the picture, the name, the set and the quantity, so it takes nearly half; "You said"
 * and "We graded" must fit "Damaged" and "not yet checked" broken between words, not inside one.
 */
.cardtrack-sell-offer th:nth-child(1) { width: 47%; }
.cardtrack-sell-offer th:nth-child(2) { width: 15%; }
.cardtrack-sell-offer th:nth-child(3) { width: 16%; }
.cardtrack-sell-offer th:nth-child(4) { width: 11%; }
.cardtrack-sell-offer th:nth-child(5) { width: 11%; }

/* The trailing action column carries a button, not data: keep it compact and to the edge. */
.cardtrack-sell-cart td:last-child {
	text-align: end;
}

.cardtrack-sell-cart td:last-child button {
	font-size: 0.85em;
	padding: 0.35em 0.7em;
}

.cardtrack-sell-total {
	font-size: 1.15em;
	margin-block: 0.75em;
}

/*
 * The card, and its picture.
 *
 * Four printings of one card in one set — plain, Showcase, Borderless, Surge Foil — read as four
 * nearly identical lines of text and are worth wildly different amounts. The picture is how a
 * customer confirms the set code and number they typed found the card they are actually holding,
 * and how a merchant matches a row against the physical stack in front of them.
 *
 * The image is decorative and hidden from assistive technology: the same card is written out in
 * text beside it. A card with no picture prints nothing — no placeholder box, which would suggest
 * the card itself is unknown rather than just its art.
 */
.cardtrack-sell-card {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
}

.cardtrack-sell-thumb {
	width: 60px;
	height: auto;
	border-radius: 4px;
	/* Never shrink the picture to make room for a long card name. */
	flex: 0 0 auto;
}

.cardtrack-sell-card-text {
	min-width: 0;
}

.cardtrack-sell-card-details,
.cardtrack-sell-card-quantity {
	font-size: 0.9em;
	opacity: 0.75;
}

/* ── The card picker ─────────────────────────────────────────────────────────────────────── */

/*
 * Typing a name and choosing the printing you are holding.
 *
 * The list sits in the page flow rather than floating over it. A dropdown that overlays the rest
 * of the form has to fight every theme's stacking order to stay on top, and loses somewhere; a
 * list that pushes the form down is never behind anything.
 */
.cardtrack-sell-results {
	list-style: none;
	margin: 0.5em 0 0;
	padding: 0;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 4px;
	/* Long result sets scroll rather than pushing the rest of the form off the screen. */
	max-height: 22em;
	overflow-y: auto;
}

.cardtrack-sell-result {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em 0.75em;
	cursor: pointer;
}

.cardtrack-sell-result + .cardtrack-sell-result {
	border-block-start: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

/* Hover and keyboard selection look the SAME. Someone arrowing down must see what they will get. */
.cardtrack-sell-result:hover,
.cardtrack-sell-result[aria-selected="true"] {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.cardtrack-sell-result-empty {
	padding: 0.75em;
	opacity: 0.75;
}

/*
 * The card that was chosen, kept in view so it can be checked against the one in hand.
 *
 * ⚠️ `:not([hidden])` is load-bearing. A bare `display: flex` here beats the browser's own rule
 * for the `hidden` attribute, so the empty box rendered as a grey bar on a form where nothing had
 * been chosen yet. Any display value on an element that relies on `hidden` needs this guard.
 */
.cardtrack-sell-chosen:not([hidden]) {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	margin-block: 0.75em;
	padding: 0.6em 0.75em;
	border-inline-start: 4px solid currentColor;
	background: color-mix(in srgb, currentColor 6%, transparent);
}

/*
 * The choice row (owner, 2026-09-02): once a card is chosen, the card and its particulars —
 * condition, finish, language, quantity, the Add button — read as ONE row. The accent moves
 * from the chosen strip to the whole row, and the strip sheds its own so they cannot stack.
 * Without JavaScript nothing here matches and the plain always-visible form stands.
 */
.cardtrack-sell-choice:has( .cardtrack-sell-chosen:not([hidden]) ) {
	margin-block: 0.75em;
	padding: 0.6em 0.75em;
	border-inline-start: 4px solid currentColor;
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.cardtrack-sell-choice:has( .cardtrack-sell-chosen:not([hidden]) ) .cardtrack-sell-chosen {
	margin-block: 0;
	padding: 0;
	border-inline-start: 0;
	background: none;
}

.cardtrack-sell-choice:has( .cardtrack-sell-chosen:not([hidden]) ) .cardtrack-sell-dimensions p {
	margin-block: 0.75em 0.5em;
}

/*
 * Set code and number: short fields, and short is the point. They sit above the name because
 * they are what a person can read straight off the card, and they narrow the search rather than
 * replacing it — so they must not look like the main event.
 */
.cardtrack-sell-add label.cardtrack-sell-filter {
	flex: 0 1 8rem;
}

/* ── Forms ───────────────────────────────────────────────────────────────────────────────── */

/*
 * The fix that matters most. Each label is a block containing its own field, and the row is a
 * flex line that wraps — so a field never ends up mid-sentence in its own description, and the
 * page reflows sensibly on a phone without a media query.
 */
.cardtrack-sell-add p,
.cardtrack-sell-submit p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em 1.25em;
	/*
	 * Top-aligned, not bottom-aligned. Bottom alignment lines the *boxes* up but leaves the
	 * labels above them at different heights whenever a select is taller than a text input,
	 * which reads as a jumbled row. Controls are given a shared height below instead, so both
	 * the labels and the boxes line up.
	 */
	align-items: flex-start;
	margin-block: 1em;
}

.cardtrack-sell-add label,
.cardtrack-sell-submit label,
.cardtrack-sell-inline label {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	font-size: 0.9em;
	/* Grow to share the row, but never squeeze below something typable. */
	flex: 1 1 12rem;
}

.cardtrack-sell input[type="text"],
.cardtrack-sell input[type="email"],
.cardtrack-sell input[type="number"],
.cardtrack-sell select,
.cardtrack-sell textarea {
	box-sizing: border-box;
	width: 100%;
	/* One height for every control, so a select and a text input sit on the same two lines. */
	min-height: 2.6em;
	padding: 0.45em 0.6em;
	line-height: 1.4;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 4px;
}

.cardtrack-sell textarea {
	/* A note is prose; let it be several lines tall and resizable. */
	min-height: 6em;
	resize: vertical;
}

.cardtrack-sell input:focus-visible,
.cardtrack-sell select:focus-visible,
.cardtrack-sell textarea:focus-visible {
	/* Never remove the focus ring — this form is entirely keyboard-navigable. */
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* Short fields should not stretch to fill a row just because they can. */
.cardtrack-sell-add label:has(input[name="set_code"]),
.cardtrack-sell-add label:has(input[name="collector_number"]),
.cardtrack-sell-add label:has(input[name="quantity"]),
.cardtrack-sell-add label:has(input[name="language"]) {
	flex: 0 1 8rem;
}

/* Condition and finish carry worded options ("Moderately Played (MP)"): size from the
   widest option rather than a fixed basis, so no label is ever clipped mid-word. */
.cardtrack-sell-add label:has(select[name="condition"]),
.cardtrack-sell-add label:has(select[name="finish"]) {
	flex: 0 1 auto;
}

.cardtrack-sell-add label:has(input[name="card_name"]) {
	/* The card name is the field people actually type into. Give it the room. */
	flex: 3 1 18rem;
}

/*
 * Explanations sit on their OWN line beneath the fields they explain, never inline beside them.
 * This is what made the form read as a wall of text with boxes embedded in it.
 */
.cardtrack-sell .description,
.cardtrack-sell-add > p.description,
.cardtrack-sell-submit > p.description {
	display: block;
	flex-basis: 100%;
	font-size: 0.9em;
	opacity: 0.75;
	margin-block: 0.25em 0;
}

.cardtrack-sell button,
.cardtrack-sell .button {
	font: inherit;
	padding: 0.5em 1.1em;
	cursor: pointer;
}

/*
 * A submit button sits directly under the last explanation; keep it off that line of text. Scoped
 * to the two page-level forms: the one-button forms inside table rows must stay compact.
 */
.cardtrack-sell-add > button,
.cardtrack-sell-submit > button {
	margin-block-start: 1em;
}

/*
 * A one-purpose form: the Remove button in a table row, "Start another sell list", accept /
 * decline. Inline-flex so several sit side by side on one line rather than stacking, and so a
 * label-plus-field pair inside one (resend the private link) lines its label above its field
 * exactly like the main forms.
 */
.cardtrack-sell-inline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75em;
	margin-inline-end: 0.75em;
	margin-block-start: 0.5em;
}

/*
 * One of these forms asks for something (resend the private link to an address). That one gets a
 * line of its own so its field and button sit side by side, rather than being squeezed in beside
 * whatever button follows it.
 */
.cardtrack-sell-inline:has(label) {
	display: flex;
	width: 100%;
	margin-block: 1em 0.5em;
}

.cardtrack-sell-inline label {
	/* An email address, not a paragraph. */
	flex: 0 1 20rem;
}

/* Inside a table row the form is furniture, not a section: no extra space around it. */
.cardtrack-sell-cart .cardtrack-sell-inline {
	margin: 0;
}

@media (max-width: 480px) {
	/* One field per line once there is no room to share it. */
	.cardtrack-sell-add label,
	.cardtrack-sell-submit label {
		flex-basis: 100%;
	}
}