/*
 * Customer want lists on My Account.
 *
 * The list is the customer's answer to "what am I chasing?" and the store's answer to "do we have
 * it yet?" — so it reads as cards with an availability verdict, not as a spreadsheet. Layout is
 * deliberately theme-neutral: no colours beyond currentColor and Woo's own button styles, so it
 * inherits whatever theme the merchant runs.
 */

/*
 * Column widths: the card and its availability verdict are what the customer came for, so they
 * get the room. Without this the browser gave every column an equal slice and "In stock (2
 * copies) from $0.23" wrapped over four lines — a shoppable row that reads like a ransom note is
 * not shoppable.
 */
.cardtrack-want-entries th:nth-child(1),
.cardtrack-want-entries td:nth-child(1) { width: 30%; }
.cardtrack-want-entries th:nth-child(2),
.cardtrack-want-entries td:nth-child(2) { width: 18%; }
.cardtrack-want-entries th:nth-child(3),
.cardtrack-want-entries td:nth-child(3) { width: 22%; }
.cardtrack-want-entries th:nth-child(5),
.cardtrack-want-entries td:nth-child(5) { width: 1%; white-space: nowrap; }

.cardtrack-want-entries td { vertical-align: middle; }

.cardtrack-want-card {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.cardtrack-want-thumb {
	width: 60px;
	height: auto;
	border-radius: 4px;
	flex: 0 0 auto;
}

.cardtrack-want-name {
	font-weight: 600;
	line-height: 1.3;
}

.cardtrack-want-stock {
	white-space: normal;
	/* Room for a printing's name on one or two lines. The theme's content width leaves this column
	   ~150px by default, which wrapped "Double Masters 2022 #148 · NM" over four lines. */
	min-width: 11em;
}

/* The verdict line: state first, price second, action last. */
.cardtrack-want-instock,
.cardtrack-want-absent {
	display: block;
	font-weight: 600;
}

.cardtrack-want-absent {
	font-weight: 400;
	opacity: 0.7;
}

.cardtrack-want-price {
	display: block;
	margin-bottom: 0.4em;
}

.cardtrack-want-cart {
	margin: 0;
}

/* Every stocked copy, one line each (owner, 2026-09-12): printing · condition · price · buy.
   The list replaces a single "Choose a copy" link that pointed at only the cheapest printing. */
.cardtrack-want-copies {
	list-style: none;
	margin: 0.25em 0 0;
	padding: 0;
}
.cardtrack-want-copy {
	margin: 0 0 0.5em;
	font-size: 0.9em;
	line-height: 1.35;
}
.cardtrack-want-copy__label {
	display: block;
}
/* Price and the way to buy share the second line. */
.cardtrack-want-copy__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.15em;
}
.cardtrack-want-copy__price {
	font-weight: 600;
}
.cardtrack-want-copy__short {
	opacity: 0.7;
}

/* Entry controls sit on one line until the viewport says otherwise. */
.cardtrack-want-entry {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

.cardtrack-want-entry input[type="number"] {
	width: 5em;
}

.cardtrack-want-defaulted {
	flex-basis: 100%;
	font-size: 0.9em;
	opacity: 0.8;
}

.cardtrack-want-inline {
	margin: 0;
}

/* The "add a card" box: one row on a desktop, stacked when the theme is narrow. */
.cardtrack-want-typed {
	margin-top: 1.5em;
}

.cardtrack-want-typed-hint {
	margin: 0 0 0.75em;
	opacity: 0.8;
}

.cardtrack-want-typed-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75em;
}

.cardtrack-want-typed-fields label {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.cardtrack-want-typed-fields label span {
	font-size: 0.85em;
	opacity: 0.8;
}

.cardtrack-want-typed-fields input[type="text"] {
	width: 9em;
}

/* The name is the field that matters; give it the room the others do not need. */
.cardtrack-want-typed-name {
	flex: 1 1 16em;
}

.cardtrack-want-typed-name input[type="text"] {
	width: 100%;
}

.cardtrack-want-typed-fields input[type="number"] {
	width: 5em;
}

/* The picker (D-138): matching printings drop down under the name as the customer types. */
.cardtrack-want-picker {
	position: relative;
}

.cardtrack-want-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0.25em 0 0;
	padding: 0;
	list-style: none;
	max-height: 22em;
	overflow: auto;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
	text-align: left;
}

.cardtrack-want-result,
.cardtrack-want-result-empty {
	display: flex;
	gap: 0.6em;
	align-items: center;
	padding: 0.45em 0.6em;
	margin: 0;
}

.cardtrack-want-result {
	cursor: pointer;
}

.cardtrack-want-result + .cardtrack-want-result {
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
}

.cardtrack-want-result:hover,
.cardtrack-want-result.is-active {
	background: rgba( 0, 0, 0, 0.06 );
}

.cardtrack-want-result-thumb {
	flex: none;
	width: 40px;
	aspect-ratio: 5 / 7;
	object-fit: cover;
	border-radius: 3px;
}

.cardtrack-want-result-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 0.95em;
	line-height: 1.3;
}

.cardtrack-want-result-details {
	opacity: 0.75;
	font-size: 0.9em;
}

.cardtrack-want-typed-fields select[name="set_code"] {
	max-width: 14em;
}

/* Order choices read as one line of text, so the active one is weight, not a button. */
.cardtrack-want-sort {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 0.75em;
	font-size: 0.95em;
}

.cardtrack-want-sort-current {
	font-weight: 600;
}

.cardtrack-want-note {
	font-size: 0.9em;
	opacity: 0.8;
}

/* Save feedback lives beside the button it belongs to. */
.cardtrack-want-status {
	font-size: 0.85em;
	opacity: 0.8;
}

/* ⚠️ D-178: the report's two tables each need a heading that READS like one. A bare `h4` inherits
   the theme's smallest heading size, which on Twenty Twenty-Five lands below body text — the
   browser check found "Lines we could not read" sitting between two tables looking like a stray
   caption. These are the only structure a customer has for telling the two failures apart. */
.cardtrack-want-import-heading {
	margin: 1.5em 0 0.25em;
	font-size: 1.1em;
	font-weight: 600;
}
.cardtrack-want-import-heading + p {
	margin-top: 0;
}

/* D-178: one card per line, so the paste box should look like a list, not a comment field.
   ⚠️ `font: inherit`, not `font-family` alone. A textarea's default font-size is ~13px, and an
   `em` max-width on it resolves against THAT — the browser check measured a "40em" box capping at
   533px, about 24em of page text, so it stopped short of the help paragraph above it. Inheriting
   the whole font makes the box's em match the page's and the pasted list readable at body size. */
.cardtrack-want-paste textarea,
.cardtrack-want-paste input[type="text"] {
	width: 100%;
	max-width: 46em;
	/* ⚠️ A textarea defaults to `content-box`, so `width: 100%` + border + padding painted 686px in
	   a 680px column and overhung the help text by 6px on the right. */
	box-sizing: border-box;
}
/* One type scale for the whole form. The textarea alone inheriting the page font left the select
   and the input as stubby ~13px controls marooned under 22px labels — stacking the labels made
   that obvious. The select stays intrinsically sized; it holds three known words. */
.cardtrack-want-paste textarea,
.cardtrack-want-paste input[type="text"],
.cardtrack-want-paste select {
	font: inherit;
}
/* The label belongs over the box, not level with its last line — a tall inline textarea sits on
   the text baseline, which left "Your list" floating at the bottom of an 8-row field. */
.cardtrack-want-paste label {
	display: block;
	margin-bottom: 0.25em;
}
.cardtrack-want-paste-help {
	font-size: 0.9em;
	opacity: 0.8;
	max-width: 46em;
}

/*
 * D-231 — the want list page v2 (docs/specs/want-list-page-v2.md §3.1, §5 rules 1–2). Layout only:
 * the buttons are the theme's (solid `wp-element-button`, core's `is-style-outline`, text links);
 * any visual value is a theme token with a plain fallback.
 */
.cardtrack-want-list [hidden] {
	display: none !important;
}

.cardtrack-want-list input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.cardtrack-want-list select,
.cardtrack-want-list textarea {
	font: inherit;
	color: inherit;
	border: 1px solid currentColor;
}

/* Header: the H1 and summary on the left, the four outline actions on the right, wrapping below. */
.cardtrack-want-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
}

.cardtrack-want-heading {
	flex: 1 1 18em;
	min-width: 0;
}

.cardtrack-want-title {
	margin: 0 0 0.2em;
	overflow-wrap: anywhere;
}

.cardtrack-want-actions {
	flex: 0 1 auto;
	justify-content: flex-end;
	margin: 0;
}

/* An open panel takes the header's full width, below the actions. */
.cardtrack-want-actions .cardtrack-collection-panel[open] {
	flex: 1 1 100%;
	order: 10;
}

/*
 * With the script, the panel opens under the header, over the page: the buttons stay where they
 * were clicked. Without it the page reloads after every action, so the panel stays in the flow.
 */
.cardtrack-want-header {
	position: relative;
}

.cardtrack-want-actions[data-cardtrack-float-panels] .cardtrack-collection-panel[open] {
	flex: 0 0 auto;
	order: 0;
}

.cardtrack-want-actions[data-cardtrack-float-panels] .cardtrack-collection-panel[open] > .cardtrack-collection-panel-body {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--wp--preset--color--base, Canvas);
	box-shadow: 0 6px 18px color-mix(in srgb, currentColor 12%, transparent);
}

.cardtrack-panel--outline > summary.wp-block-button {
	display: inline-block;
	margin: 0;
}

/* The toolbar: one bordered strip of chips. */
.cardtrack-want-toolbar {
	padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 0.8em);
	border: 1px solid currentColor;
	border-radius: 4px;
}

.cardtrack-want-toolbar .cardtrack-want-sort {
	margin: 0;
}

/*
 * A section heading with its muted count, Add all on its right. Issue #34: a headed section is a
 * <details>; its <summary> is the heading alone (a summary admits phrasing content only, and a
 * form inside one reads to assistive technology as part of a single button), and the section's
 * Add all is the first child after the summary. The <details> is a two-column grid that sets the
 * two on one row — the summary left, the Add all right — and the rows under both; a browser that
 * keeps <details> a block still shows the Add all, under the heading. A headless run of rows
 * keeps its one-line head with the Add all inside it.
 */
.cardtrack-want-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
	margin: var(--wp--preset--spacing--40, 1.5em) 0 var(--wp--preset--spacing--20, 0.5em);
}

.cardtrack-want-section-head:empty {
	display: none;
}

.cardtrack-want-section-head .cardtrack-group-heading {
	margin: 0;
}

.cardtrack-want-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--30, 1em);
	margin: var(--wp--preset--spacing--40, 1.5em) 0 0;
}

.cardtrack-want-section > .cardtrack-want-addall {
	justify-self: end;
	margin: 0 0 var(--wp--preset--spacing--20, 0.5em);
}


.cardtrack-want-section > .cardtrack-rows {
	grid-column: 1 / -1;
}

/*
 * Browsers that wrap everything after the summary in their own ::details-content box (Chrome
 * 131+, Safari, Firefox) would hand that ONE box the auto column and squeeze the summary to 0 px
 * (visual pass V1, 2026-10-19). Letting the box fall away keeps the Add all and the rows as the
 * grid's own items; the browser still hides them when the section is closed.
 */
details.cardtrack-want-section[open]::details-content {
	display: contents;
}

/* Closed, the hidden body still held the auto column: the summary stops 29 px short of the edge. */
details.cardtrack-want-section:not([open]) > summary.cardtrack-want-section-head {
	grid-column: 1 / -1;
}

/* Collapsed headings read as a list, not as seven blank stripes. */
details.cardtrack-want-section:not([open]) + details.cardtrack-want-section:not([open]) {
	margin-top: var(--wp--preset--spacing--20, 0.5em);
}

/* Flex on the summary drops the browser's marker; the heading carries its own, turned when open. */
summary.cardtrack-want-section-head {
	list-style: none;
	cursor: pointer;
	/* The whole row folds the section: a comfortable target (V2), not an 18 px line of text. */
	min-height: 2rem;
	padding: 0.3em 0;
	margin: 0 0 var(--wp--preset--spacing--20, 0.5em);
}

summary.cardtrack-want-section-head .cardtrack-group-heading {
	font-size: 1rem;
}

/* The in-stock words after the count (D-260): as muted as the count; they follow it on a no-break space and never break inside. */
.cardtrack-group-heading .cardtrack-records-note {
	opacity: 0.7;
	font-size: 0.9em;
	font-weight: 400;
	white-space: nowrap;
}

summary.cardtrack-want-section-head::-webkit-details-marker {
	display: none;
}

summary.cardtrack-want-section-head .cardtrack-group-heading::before {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin: 0 0.5em 0.1em 0.1em;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(-45deg);
	transition: transform 0.15s;
}

.cardtrack-want-section[open] > summary.cardtrack-want-section-head .cardtrack-group-heading::before {
	transform: rotate(45deg);
}

summary.cardtrack-want-section-head:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Expand all · Collapse all, for the script only, above the first section. */
.cardtrack-want-sections-toggle {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: var(--wp--preset--spacing--30, 1em) 0 0;
	font-size: 0.9em;
}

.cardtrack-want-sections-toggle .cardtrack-link-button {
	padding: 0.3em 0;
}

/* The row: thumbnail ~56×78, then name, Want, stock and actions, wrapping. */
.cardtrack-want-list .cardtrack-row-media {
	position: relative;
	flex: 0 0 56px;
}

.cardtrack-want-list .cardtrack-row-art img {
	width: 56px;
	height: 78px;
	object-fit: cover;
}

.cardtrack-row-dot {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: var(--wp--preset--color--vivid-green-cyan, #1a7f37);
	box-shadow: 0 0 0 2px var(--wp--preset--color--base, Canvas);
}

.cardtrack-row-card {
	display: flex;
	flex: 1 1 12em;
	flex-direction: column;
	gap: 0.1em;
	min-width: 0;
}

.cardtrack-row-card .cardtrack-row-printing,
.cardtrack-row-card .cardtrack-row-pick-label,
.cardtrack-row-card .cardtrack-row-pick-note,
.cardtrack-row-card .cardtrack-row-for,
.cardtrack-row-owned,
.cardtrack-row-also {
	flex: none;
	font-size: var(--wp--preset--font-size--small, 0.875em);
	opacity: 0.75;
}

/* D-241: the pick line is small; only its words are muted, so Change printing reads as a link. */
.cardtrack-row-card .cardtrack-row-pick {
	flex: none;
	font-size: var(--wp--preset--font-size--small, 0.875em);
}

/* D-241 DP6: the printing picker opens inside the row's card cell and wraps with it. */
/* Issue #5 visual pass: "Change printing" moves to the next line whole, never split. */
.cardtrack-row-card .cardtrack-row-pick-change {
	white-space: nowrap;
}

.cardtrack-row-card .cardtrack-row-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.25em;
}

.cardtrack-row-card .cardtrack-row-picker select {
	max-width: 100%;
}

.cardtrack-row-card .cardtrack-row-any {
	font-size: var(--wp--preset--font-size--small, 0.875em);
}

/* D-231 Amendment 4: a long list name wraps with the row rather than scrolling it sideways. */
.cardtrack-row-also {
	overflow-wrap: anywhere;
}

.cardtrack-want-want .cardtrack-want-entry {
	gap: 0.4em;
}

.cardtrack-want-label {
	font-size: var(--wp--preset--font-size--small, 0.875em);
	opacity: 0.75;
}

.cardtrack-want-list .cardtrack-row .wp-block-button__link,
.cardtrack-want-list .cardtrack-row .button {
	font-size: var(--wp--preset--font-size--small, 0.875em);
}

.cardtrack-row-field {
	display: inline-flex;
	flex-direction: column;
	gap: 0.15em;
}

.cardtrack-row-field > span,
.cardtrack-row-field-note {
	font-size: var(--wp--preset--font-size--small, 0.875em);
	opacity: 0.75;
}

/* §5 rule 1: a text link that submits or opens — the one visual reset allowed. */
.cardtrack-link-button {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.cardtrack-row-remove .cardtrack-link-button {
	opacity: 0.75;
}

/* D-238: Undo sits inside the "{list} deleted." message, on its line. */
.cardtrack-want-undo .cardtrack-want-undo__form {
	display: inline;
	margin: 0 0 0 0.5em;
}

/* The answer where the action was taken (owner rule, 2026-09-29). */
.cardtrack-row-result {
	display: block;
	flex-basis: 100%;
	padding-left: 0.5em;
	border-left: 3px solid currentColor;
	font-size: var(--wp--preset--font-size--small, 0.9em);
}

.cardtrack-row-result:empty {
	display: none;
}

.cardtrack-row-result:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Slice 2: the stock cell's one Add to cart, and Choose a copy's in-row radio list. */
.cardtrack-want-add {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 0.75em;
	margin: 0.25em 0 0;
}

.cardtrack-want-incart {
	display: block;
	font-size: var(--wp--preset--font-size--small, 0.875em);
	opacity: 0.75;
}

.cardtrack-want-choose {
	flex-basis: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.cardtrack-want-choice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2em 0.5em;
	padding: 0.2em 0;
	font-size: var(--wp--preset--font-size--small, 0.9em);
	cursor: pointer;
}

.cardtrack-want-choice__note {
	opacity: 0.75;
}

.cardtrack-want-choice__price {
	margin-left: auto;
	font-weight: 600;
}

.cardtrack-want-addall {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
}

.cardtrack-want-addall-form {
	margin: 0;
}

/* The footer above a top rule. */
.cardtrack-want-list .cardtrack-deck-footer {
	margin-top: var(--wp--preset--spacing--30, 1em);
}

/* The whole list's Add all sits beside the footer's In stock figure and wraps under it on a phone. */
.cardtrack-want-list-total {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4em 1em;
	margin-top: var(--wp--preset--spacing--30, 1em);
	padding-top: 0.6em;
	border-top: 1px solid currentColor;
}

/* The rule moves to the row the footer and the button share. */
.cardtrack-want-list .cardtrack-want-list-total .cardtrack-deck-footer {
	flex: 1 1 20em;
	margin: 0;
	padding-top: 0;
	border-top: 0;
}

/* Issue #34: the same figures and button beside the name — one line under the summary, no rule. */
.cardtrack-want-list-total--top {
	justify-content: flex-start;
	margin-top: 0.3em;
	padding-top: 0;
	border-top: 0;
}

.cardtrack-want-list-total--top .cardtrack-want-top-figures {
	flex: 0 1 auto;
	margin: 0;
}

@media (min-width: 600px) and (max-width: 899px) {
	/*
	 * Between the phone and the ≥900 px grid the row body wraps three 12em cells on a line, and
	 * the 2.5rem condition select is wider than its cell, so it sat on the stock words (V3).
	 * Two cells per line until the grid takes over.
	 */
	.cardtrack-want-list .cardtrack-row-qty {
		/* Want + input + condition select + Save on one line needs ~25em (re-run finding 1). */
		flex-basis: 25em;
	}
}

@media (max-width: 600px) {
	/* On a phone the section's Add all sits under its heading, flush left. */
	.cardtrack-want-section {
		grid-template-columns: minmax(0, 1fr);
	}

	.cardtrack-want-section > .cardtrack-want-addall {
		justify-self: start;
	}

	.cardtrack-want-actions {
		flex-basis: 100%;
		justify-content: flex-start;
	}

	.cardtrack-want-list .cardtrack-row-body {
		flex-basis: calc(100% - 56px - 0.75em);
	}

	.cardtrack-want-list .cardtrack-row-qty,
	.cardtrack-want-list .cardtrack-row-stock,
	.cardtrack-want-list .cardtrack-row-actions {
		flex-basis: 100%;
	}
}

/*
 * Denser rows, larger art (owner, 2026-10-01: "each row is so thick and the images are so small").
 * The card image sets the row's height; the Want fields and Save share one line; the actions are a
 * tight column. On wide screens the row is a four-column grid; on phones it stacks as before.
 */
.cardtrack-want-list .cardtrack-row {
	align-items: center;
	padding: var(--wp--preset--spacing--10, 0.4em) 0;
}

.cardtrack-want-list .cardtrack-row-media {
	flex: 0 0 84px;
}

.cardtrack-want-list .cardtrack-row-art img {
	width: 84px;
	height: 117px;
}

.cardtrack-want-list .cardtrack-want-entry {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.4em;
	margin: 0;
}

.cardtrack-want-list .cardtrack-want-entry input[type="number"] {
	width: 4.5em;
}

/* Want, condition and Save stand at one height (owner, 2026-10-01). */
.cardtrack-want-list .cardtrack-want-entry input[type="number"],
.cardtrack-want-list .cardtrack-want-entry select,
.cardtrack-want-list .cardtrack-want-entry .wp-block-button__link {
	box-sizing: border-box;
	height: 2.5rem;
	padding-block: 0;
	line-height: 1;
	vertical-align: middle;
}

.cardtrack-want-list .cardtrack-want-entry input[type="number"],
.cardtrack-want-list .cardtrack-want-entry select {
	padding-inline: 0.5em;
}

.cardtrack-want-list .cardtrack-want-entry .wp-block-button__link {
	display: inline-flex;
	align-items: center;
}

.cardtrack-want-list .cardtrack-want-entry .wp-block-button {
	margin: 0;
}

.cardtrack-want-list .cardtrack-row .wp-block-button__link,
.cardtrack-want-list .cardtrack-row .wp-element-button {
	padding: var(--wp--preset--spacing--10, 0.35em) var(--wp--preset--spacing--20, 0.8em);
}

.cardtrack-want-list .cardtrack-row-actions {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 0.8em;
}

/* The name and its sub-lines size to their text: the base `flex: 1 1 12em` would make each 12em tall in this column. */
.cardtrack-want-list .cardtrack-row-card > * {
	flex: none;
}

/*
 * Core's outline rules are `:root :where(…)` (no specificity) and the theme's global button styles
 * print after them, so the outline weight is restated here: no fill, the text colour, a border.
 */
.cardtrack-want-list .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: currentColor;
	border: 2px solid currentColor;
}

.cardtrack-want-list .cardtrack-row-qty,
.cardtrack-want-list .cardtrack-row-stock,
.cardtrack-want-list .cardtrack-row-status,
.cardtrack-want-list .cardtrack-row-actions {
	margin: 0;
}

@media (min-width: 900px) {
	.cardtrack-want-list .cardtrack-row-body {
		display: grid;
		grid-template-columns: minmax(10em, 1fr) minmax(26em, 2.2fr) minmax(9em, 1fr) auto;
		align-items: center;
		gap: 0.4em 1.2em;
	}

	/* Want, condition and Save on one line. */
	.cardtrack-want-list .cardtrack-want-entry {
		flex-wrap: nowrap;
	}

	.cardtrack-want-list .cardtrack-want-entry select {
		min-width: 0;
		max-width: 11em;
	}

	.cardtrack-want-list .cardtrack-row-body > .cardtrack-row-result,
	.cardtrack-want-list .cardtrack-row-body > .cardtrack-row-status {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.cardtrack-want-list .cardtrack-row-body {
		flex-basis: calc(100% - 84px - 0.75em);
	}
}

/*
 * With more than one list a row also offers List (move the card to another list). It stays on the
 * Want line as a small label like Want, at the same height; Save never shrinks (owner, 2026-10-01).
 */
.cardtrack-want-list .cardtrack-want-entry > label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.875em);
}

.cardtrack-want-list .cardtrack-want-entry > label select {
	box-sizing: border-box;
	height: 2.5rem;
	padding: 0 0.5em;
	line-height: 1;
	min-width: 0;
	/* Room for a list name like "Commander wants" (9em cut it to "Commander w" at every width,
	   visual pass 2026-10-14); never wider than the row on a phone. */
	max-width: min(14em, 100%);
	font-size: 1rem;
}

.cardtrack-want-list .cardtrack-want-entry .wp-block-button {
	flex: none;
}

.cardtrack-want-list .cardtrack-want-entry .wp-block-button__link {
	white-space: nowrap;
}

/* D-253, want-list v2 §3.1 item 6: History under the footer, closed by default. Layout only. */
.cardtrack-want-list .cardtrack-want-history {
	margin-top: var(--wp--preset--spacing--30, 1em);
}
/* The summary reads like the plugin's other collapsed panels (Insights): bold, not body weight. */
.cardtrack-want-list .cardtrack-want-history-summary {
	cursor: pointer;
	font-weight: 600;
}
.cardtrack-want-list .cardtrack-want-history-list {
	list-style: none;
	margin: 0.5em 0 0;
	padding: 0;
}
/*
 * Dates in one column: every sentence starts at the same x and its wrapped lines hang under the
 * sentence, not under the date (visual pass 2026-10-14: ragged starts at 1280, run-together
 * entries at 390).
 */
.cardtrack-want-list .cardtrack-want-history-list li {
	margin: 0.4em 0;
	padding-left: 5.75rem;
	text-indent: -5.75rem;
	overflow-wrap: anywhere;
}
.cardtrack-want-list .cardtrack-want-history-list time {
	display: inline-block;
	width: 5.75rem;
	/* Takes back the space after the date, so the first line starts where the wrapped lines do. */
	margin-right: -0.3em;
	text-indent: 0;
	font-size: var(--wp--preset--font-size--small, 0.875em);
	font-variant-numeric: tabular-nums;
}
/* Links inside a sentence need more than colour to read as links (WCAG 1.4.1). */
.cardtrack-want-list .cardtrack-want-history a {
	text-decoration: underline;
}