/*
 * The customer's collection and decks on My Account (D-140).
 *
 * Theme-neutral like the want-list sheet: no colours beyond currentColor and the theme's own
 * button styles. The one deliberate accent is the green check for "owned", because that is the
 * signal the owner asked for and it must read at a glance.
 */

.cardtrack-records-tabs,
.cardtrack-records-subtabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 1em;
}

.cardtrack-records-tabs a,
.cardtrack-records-subtabs a {
	padding: 0.35em 0.8em;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	opacity: 0.75;
}

.cardtrack-records-tabs a.is-active,
.cardtrack-records-subtabs a.is-active {
	opacity: 1;
	font-weight: 600;
}

.cardtrack-records-count {
	opacity: 0.7;
	font-size: 0.9em;
}

.cardtrack-records-search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5em;
	margin: 0 0 1.5em;
}

.cardtrack-records-search-field {
	flex: 1 1 18em;
	position: relative;
}

.cardtrack-records-search-field span,
.cardtrack-records-fields label span {
	display: block;
	font-size: 0.9em;
	margin-bottom: 0.2em;
}

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

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

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

.cardtrack-records-owned {
	color: #1a7f37;
	font-weight: 600;
}

.cardtrack-records-missing {
	font-weight: 600;
}

.cardtrack-records-absent,
.cardtrack-records-muted {
	display: block;
	opacity: 0.7;
}

.cardtrack-records-wanted {
	display: block;
	font-weight: 600;
}

.cardtrack-records-status > * {
	display: block;
	margin-bottom: 0.3em;
}

.cardtrack-records-ownlink {
	font-size: 0.9em;
}

.cardtrack-records-inline,
.cardtrack-records-entry,
.cardtrack-records-addcopy,
.cardtrack-records-create {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.5em;
}

.cardtrack-records-inline input[type="number"],
.cardtrack-records-entry input[type="number"],
.cardtrack-records-addcopy input[type="number"] {
	width: 5em;
}

.cardtrack-records-remove .button {
	padding: 0.2em 0.6em;
	font-size: 0.85em;
}

.cardtrack-records-copies {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cardtrack-records-copies li {
	margin: 0 0 0.3em;
}

.cardtrack-records-printings tr.is-owned td:first-child {
	box-shadow: inset 4px 0 0 #1a7f37;
}

.cardtrack-records-elsewhere {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	opacity: 0.85;
}

.cardtrack-records-typed {
	margin-top: 1.5em;
}

.cardtrack-records-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6em;
}

.cardtrack-records-typed-name {
	flex: 1 1 16em;
	position: relative;
}

.cardtrack-records-check {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.cardtrack-records-hint {
	opacity: 0.8;
	margin: 0 0 0.6em;
}

.cardtrack-records-status-note {
	font-size: 0.85em;
	opacity: 0.8;
}

/* The search-as-you-type list (D-138), shared by the search box and the add forms. */
.cardtrack-records-picker {
	position: relative;
}

.cardtrack-records-results {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 22em;
	overflow-y: auto;
	background: #fff;
	color: #1e1e1e;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.cardtrack-records-result {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.4em 0.6em;
	cursor: pointer;
}

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

.cardtrack-records-result-thumb {
	width: 36px;
	height: auto;
	border-radius: 3px;
	flex: 0 0 auto;
}

.cardtrack-records-result-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.cardtrack-records-result-details {
	font-size: 0.85em;
	opacity: 0.75;
}

.cardtrack-records-result-empty {
	padding: 0.5em 0.6em;
	opacity: 0.7;
}

/*
 * D-222: the Collection page — Moxfield's information in ManaBox's layout. A summary strip,
 * tiles for groups, cards only once a group is open. Still theme-neutral: currentColor borders,
 * the theme's buttons, WooCommerce's table; the one accent stays the green for "up".
 */

.cardtrack-collection-summary {
	margin: 0 0 1em;
}

.cardtrack-collection-total {
	font-size: 1.15em;
	margin: 0 0 0.4em;
}

.cardtrack-collection-label {
	font-size: 0.8em;
	letter-spacing: 0.04em;
	opacity: 0.7;
	text-transform: uppercase;
}

.cardtrack-collection-games {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.5em;
	list-style: none;
	margin: 0 0 0.5em;
	padding: 0;
}

.cardtrack-collection-games li {
	display: flex;
	flex-direction: column;
}

.cardtrack-collection-games li.is-current a {
	font-weight: 700;
}

.cardtrack-collection-figures {
	font-size: 0.95em;
	opacity: 0.85;
}

.cardtrack-collection-change.is-up {
	color: #1a7f37;
}

.cardtrack-collection-change.is-down,
.cardtrack-collection-none {
	opacity: 0.7;
}

.cardtrack-collection-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0 0 1em;
}

.cardtrack-collection-panel[open] {
	flex: 1 1 100%;
}

.cardtrack-collection-panel > summary {
	display: inline-block;
	cursor: pointer;
	list-style: none;
}

.cardtrack-collection-panel > summary::-webkit-details-marker {
	display: none;
}

.cardtrack-collection-panel-body {
	margin: 0.8em 0 0;
	padding: 1em;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 4px;
}

.cardtrack-collection-panel-body h3 {
	margin-top: 0;
}

.cardtrack-collection-search {
	margin: 0 0 1em;
}

.cardtrack-collection-search-field {
	display: block;
}

.cardtrack-collection-search input[type="search"] {
	width: 100%;
	max-width: 32em;
}

.cardtrack-collection-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em;
	list-style: none;
	margin: 0 0 0.8em;
	padding: 0;
}

.cardtrack-collection-crumbs li + li::before {
	content: "\203A";
	margin: 0 0.3em 0 0;
	opacity: 0.6;
}

.cardtrack-collection-crumbs a,
.cardtrack-collection-crumbs span {
	padding: 0.15em 0.6em;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
}

.cardtrack-collection-crumbs span[aria-current] {
	font-weight: 600;
}

.cardtrack-collection-control-label {
	align-self: center;
	font-size: 0.9em;
	margin-right: 0.2em;
	opacity: 0.75;
}

.cardtrack-collection-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1.5em;
	margin: 0 0 1em;
}

.cardtrack-collection-controls .cardtrack-records-subtabs {
	margin: 0;
}

.cardtrack-collection-group {
	margin: 0 0 1em;
}

.cardtrack-collection-group h3 {
	margin: 0 0 0.2em;
}

.cardtrack-collection-subhead {
	margin-top: 1.5em;
}

.cardtrack-collection-empty {
	opacity: 0.85;
}

/* Group and copy tiles. */
.cardtrack-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
	gap: 0.75em;
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

.cardtrack-tile {
	margin: 0;
}

.cardtrack-tile-link {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	height: 100%;
	padding: 0.8em;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 6px;
	color: inherit;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.cardtrack-tile-link:hover,
.cardtrack-tile-link:focus {
	border-color: currentColor;
}

.cardtrack-tile-name {
	font-weight: 600;
	line-height: 1.25;
}

.cardtrack-tile-subtitle {
	font-size: 0.85em;
	opacity: 0.75;
}

.cardtrack-tile-figures {
	font-size: 0.85em;
	margin-top: auto;
	opacity: 0.85;
}

.cardtrack-tile-change {
	font-size: 0.85em;
}

.cardtrack-tile-symbol {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 0.3em;
	padding: 0.1em 0.5em;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.cardtrack-tile-art {
	position: relative;
	display: block;
	margin: 0 0 0.4em;
	border-radius: 4px;
	overflow: hidden;
}

.cardtrack-tile-art img {
	display: block;
	width: 100%;
	height: auto;
}

.cardtrack-tiles--copies .cardtrack-tile-art.is-text {
	min-height: 2.6em;
}

.cardtrack-tile-qty,
.cardtrack-tile-price {
	position: absolute;
	bottom: 0.4em;
	padding: 0.1em 0.55em;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.78);
	color: #fff;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.5;
}

.cardtrack-tile-qty {
	left: 0.4em;
}

.cardtrack-tile-price {
	right: 0.4em;
}

.cardtrack-tile-price .woocommerce-Price-amount {
	color: inherit;
}

@media (max-width: 600px) {
	.cardtrack-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5em;
	}

	.cardtrack-tile-link {
		padding: 0.6em;
	}
}

/* Moxfield's columns in WooCommerce's table. */
.cardtrack-collection-list td,
.cardtrack-collection-list th {
	vertical-align: middle;
}

.cardtrack-collection-list tfoot th,
.cardtrack-collection-list tfoot td {
	font-weight: 700;
}

.cardtrack-collection-col-qty {
	width: 4em;
}

.cardtrack-collection-treatment {
	opacity: 0.8;
}

.cardtrack-collection-number {
	display: inline;
	font-size: 0.85em;
}

/*
 * D-222 slice D: the Decks and Want lists pages in the same vocabulary — folder and record tiles,
 * section bars, rows with an art thumbnail and its price badge, and the card preview panel. The
 * colour pips are the one place a fixed colour is right: a mana colour is a fact, not a theme.
 */

.cardtrack-tile--folder .cardtrack-tile-symbol {
	font-size: 1.1em;
	letter-spacing: 0;
}

.cardtrack-tile--record .cardtrack-tile-art img {
	aspect-ratio: 5 / 3;
	object-fit: cover;
	object-position: center 20%;
}

.cardtrack-pips {
	display: inline-flex;
	gap: 0.2em;
	vertical-align: middle;
}

.cardtrack-pip {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	border-radius: 50%;
}

.cardtrack-pip.is-w { background: #f8f6d8; }
.cardtrack-pip.is-u { background: #c1d7e9; }
.cardtrack-pip.is-b { background: #bab1ab; }
.cardtrack-pip.is-r { background: #e49977; }
.cardtrack-pip.is-g { background: #a3c095; }
.cardtrack-pip.is-c { background: #ccc2c0; }

.cardtrack-deck-header {
	margin: 0 0 1em;
}

.cardtrack-deck-header h3 {
	margin: 0 0 0.2em;
}

.cardtrack-section-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3em 1em;
	margin: 1.5em 0 0.5em;
	padding: 0.4em 0;
	border-bottom: 1px solid currentColor;
	font-size: 1em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cardtrack-section-bar-figures {
	font-size: 0.9em;
	font-weight: 400;
	letter-spacing: 0;
	opacity: 0.85;
	text-transform: none;
}

.cardtrack-group-heading {
	margin: 1em 0 0.3em;
	font-size: 0.95em;
}

.cardtrack-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cardtrack-row {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	margin: 0;
	padding: 0.6em 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* An action on a row returns to it by its id; leave room above for a sticky theme header. */
.cardtrack-row {
	scroll-margin-top: 5em;
}

/* The answer to Add to cart, on its own line beside the button it answers (owner rule, 2026-09-29). */
.cardtrack-cart-result {
	display: block;
	flex-basis: 100%;
	margin-top: 0.25em;
	padding-left: 0.5em;
	border-left: 3px solid currentColor;
	font-size: 0.9em;
}

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

/* Add to cart with the script on: progress in the button, then a green check once the store confirms. */
.cardtrack-want-cart button.is-adding {
	cursor: progress;
}

.cardtrack-cart-dots {
	display: inline-block;
	min-width: 1.5em;
	text-align: left;
}

.cardtrack-cart-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background: #008a20;
	color: #fff;
	font-size: 0.85em;
	line-height: 1;
}

/* When the button clicked is no longer offered, the answer closes the row on a line of its own. */
.cardtrack-row:has(> .cardtrack-cart-result) {
	flex-wrap: wrap;
}

/* A removed want-list row gives way to one line saying so. */
.cardtrack-row--removed {
	display: block;
	font-style: italic;
}

/* D-230: art only, no price badge; a row with no art has no media at all (D-107). */
.cardtrack-row-media {
	flex: 0 0 60px;
}

.cardtrack-row-art {
	display: block;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
}

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

.cardtrack-row-art img {
	display: block;
	width: 60px;
	height: auto;
}

.cardtrack-row-body {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 1em;
	min-width: 0;
}

.cardtrack-row-name {
	flex: 1 1 12em;
	font-weight: 600;
	line-height: 1.3;
}

.cardtrack-row-printing,
.cardtrack-row-for {
	flex: 1 1 10em;
	font-size: 0.9em;
	opacity: 0.8;
}

.cardtrack-row-qty,
.cardtrack-row-status,
.cardtrack-row-stock,
.cardtrack-row-actions {
	flex: 1 1 12em;
	min-width: 0;
}

.cardtrack-row-status > *,
.cardtrack-row-actions > * {
	display: block;
	margin-bottom: 0.3em;
}

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

.cardtrack-row-actions > * {
	margin: 0;
}

.cardtrack-records-qty {
	align-items: center;
	gap: 0.3em;
	margin: 0;
}

.cardtrack-qty-step {
	padding: 0.15em 0.65em;
	font-size: 0.95em;
	line-height: 1.4;
}

.cardtrack-qty-count {
	min-width: 1.5em;
	font-weight: 600;
	text-align: center;
}

.cardtrack-deck-footer {
	margin: 1em 0 0;
	padding-top: 0.6em;
	border-top: 1px solid currentColor;
	font-weight: 600;
}

.cardtrack-records-move select {
	max-width: 16em;
}

/* The card preview floats over the page (owner, 2026-10-01: just the card; styled below). */
.cardtrack-preview {
	position: fixed;
	z-index: 1000;
}

.cardtrack-preview[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.cardtrack-row {
		flex-wrap: wrap;
	}

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

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

	.cardtrack-section-bar {
		margin-top: 1em;
	}
}

/*
 * D-225: completion figures, what you paid and gain or loss, the flag words, the filter chips, the
 * List view's action bar, and the card view's copy rows. Still theme-neutral: currentColor borders,
 * the theme's buttons and base colours; green stays the one accent for "up" and "owned".
 */

.cardtrack-tile-completion,
.cardtrack-collection-completion {
	font-size: 0.9em;
	font-weight: 600;
}

.cardtrack-tile-gain,
.cardtrack-collection-since-line {
	font-size: 0.85em;
}

.cardtrack-collection-since-line {
	margin: -0.2em 0 0.4em;
}

.cardtrack-collection-gain.is-flat {
	opacity: 0.7;
}

.cardtrack-flag {
	display: inline-block;
	margin-left: 0.15em;
	padding: 0 0.45em;
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 4px;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Filter chips: each a disclosure over the values present in this group. */
.cardtrack-collection-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5em;
	margin: -0.5em 0 1em;
}

.cardtrack-chip {
	position: relative;
}

.cardtrack-chip > summary,
.cardtrack-chip-toggle {
	display: inline-block;
	padding: 0.35em 0.8em;
	border: 1px solid currentColor;
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
	opacity: 0.75;
	text-decoration: none;
}

.cardtrack-chip > summary::-webkit-details-marker {
	display: none;
}

.cardtrack-chip.is-active > summary,
.cardtrack-chip-toggle.is-active,
.cardtrack-chip[open] > summary {
	font-weight: 600;
	opacity: 1;
}

.cardtrack-chip-options {
	position: absolute;
	z-index: 20;
	left: 0;
	min-width: 12em;
	margin: 0.3em 0 0;
	padding: 0.3em 0;
	list-style: none;
	background: var(--wp--preset--color--base, Canvas);
	color: var(--wp--preset--color--contrast, CanvasText);
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 6px;
	box-shadow: 0 6px 18px color-mix(in srgb, currentColor 18%, transparent);
}

.cardtrack-chip-options a {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.35em 0.8em;
	text-decoration: none;
}

.cardtrack-chip-options a[aria-current] {
	font-weight: 600;
}

/* The List view's action bar: one fieldset above the table, floating while rows are ticked. */
.cardtrack-bulk {
	margin: 0 0 1em;
	padding: 0.8em 1em;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 6px;
	background: var(--wp--preset--color--base, Canvas);
}

.cardtrack-bulk legend {
	padding: 0 0.4em;
	font-weight: 600;
}

.cardtrack-bulk .cardtrack-records-hint {
	margin: 0 0 0.5em;
}

.cardtrack-bulk-count {
	display: inline-block;
	margin: 0 0 0.5em;
	font-weight: 600;
}

.cardtrack-bulk-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	margin: 0 0 0.6em;
}

.cardtrack-bulk-target[hidden] {
	display: none;
}

.cardtrack-bulk-action.is-unavailable {
	opacity: 0.7;
}

.cardtrack-bulk.is-floating {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 30;
	box-shadow: 0 6px 18px color-mix(in srgb, currentColor 18%, transparent);
}

.cardtrack-collection-col-tick {
	width: 2em;
}

.cardtrack-collection-list td.cardtrack-collection-col-tick::before {
	content: none;
}

/* The card view: what you paid, Edit and Change printing behind disclosures on each copy row. */
.cardtrack-records-presence {
	margin: 0 0 0.6em;
	font-size: 1.05em;
	font-weight: 600;
}

.cardtrack-records-copy {
	margin: 0 0 0.6em;
}

.cardtrack-records-paid {
	font-size: 0.9em;
}

.cardtrack-records-more {
	display: inline-block;
	margin: 0.2em 0.6em 0 0;
	vertical-align: top;
}

.cardtrack-records-more > summary {
	cursor: pointer;
	font-size: 0.9em;
	text-decoration: underline;
}

.cardtrack-records-more[open] {
	display: block;
	margin: 0.5em 0;
	padding: 0.8em;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 4px;
}

.cardtrack-records-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1em;
	margin: 0;
	padding: 0;
	border: 0;
}

.cardtrack-records-paid input {
	width: 8em;
}

.cardtrack-records-note {
	font-weight: 600;
}

@media (max-width: 600px) {
	.cardtrack-bulk-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cardtrack-chip-options {
		position: static;
		box-shadow: none;
	}

	.cardtrack-records-more[open] {
		margin-left: 0;
	}
}

/* D-225 slice E: My copies ⇄ All cards, above the breakout's other controls. */
.cardtrack-collection-mode {
	margin: 0 0 0.6em;
}

/* All cards: an unowned card is faded but stays readable; I own this sits under its tile. */
.cardtrack-tile--browse {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.cardtrack-tile--browse .cardtrack-tile-link {
	height: auto;
	flex: 1 1 auto;
}

.cardtrack-tile--browse.is-unowned .cardtrack-tile-art,
.cardtrack-tile--browse.is-unowned .cardtrack-tile-subtitle {
	opacity: 0.45;
}

.cardtrack-tile--browse.is-unowned .cardtrack-tile-link {
	border-style: dashed;
}

.cardtrack-browse-own {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.6em;
	margin: 0;
}

.cardtrack-browse-own .wp-block-button {
	margin: 0;
}

/* Core's outline rules are `:root :where(…)` and lose to the theme's global button styles. */
.cardtrack-browse-own .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: currentColor;
	border: 2px solid currentColor;
	padding: 0.3em 0.9em;
	font-size: 0.9em;
}

.cardtrack-browse-result {
	margin: 0;
	font-size: 0.9em;
}

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

/* Insights (§3.1.8): a collapsed panel under the summary; plain lists, one bar per row. */
.cardtrack-insights {
	margin: 0 0 1em;
	padding: 0.5em 0.8em;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 6px;
}

.cardtrack-insights > summary {
	cursor: pointer;
	font-weight: 600;
}

.cardtrack-insights-body {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
	gap: 1em 1.5em;
	margin-top: 0.6em;
}

.cardtrack-insights-section h3 {
	margin: 0 0 0.4em;
	font-size: 1em;
}

.cardtrack-insights-list,
.cardtrack-insights-bars {
	margin: 0;
	padding-left: 1.2em;
}

.cardtrack-insights-bars {
	padding: 0;
	list-style: none;
}

.cardtrack-insights-list li,
.cardtrack-insights-bars li {
	margin: 0 0 0.35em;
	line-height: 1.3;
}

.cardtrack-insights-figure {
	font-size: 0.9em;
	opacity: 0.85;
}

.cardtrack-insights-bar {
	display: block;
	height: 0.35em;
	margin-top: 0.15em;
	border-radius: 2px;
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.cardtrack-insights-bar > span {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.6;
}

.cardtrack-insights-dates {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2em 0.8em;
	margin: 0;
}

.cardtrack-insights-dates dd {
	margin: 0;
}

/* Card view layout (owner, 2026-10-01) */

/* The art beside the printing's name, with its rarity and set under the name. */
.cardtrack-records-printing {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.75em;
	align-items: center;
}

.cardtrack-records-printing .cardtrack-records-card {
	display: contents;
}

.cardtrack-records-printing .cardtrack-records-card > a:first-child {
	grid-row: 1 / span 2;
}

.cardtrack-records-printing .cardtrack-records-name {
	align-self: end;
}

.cardtrack-records-printing > .cardtrack-records-muted {
	grid-column: 2;
	align-self: start;
}

/* Add copies and the Add to deck / Add to want list line: one line, one height. */
.cardtrack-records-printings .cardtrack-records-addcopy,
.cardtrack-records-cardactions,
.cardtrack-records-cardactions .cardtrack-records-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

.cardtrack-records-cardactions {
	margin: var(--wp--preset--spacing--30, 1em) 0;
	column-gap: var(--wp--preset--spacing--30, 1.2em);
}

.cardtrack-records-cardactions label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.cardtrack-records-printings .cardtrack-records-addcopy :is(input, select),
.cardtrack-records-cardactions :is(input:not([type="hidden"]), select),
.cardtrack-records-printings .cardtrack-records-addcopy :is(.button, .wp-block-button__link),
.cardtrack-records-cardactions :is(.button, .wp-block-button__link) {
	box-sizing: border-box;
	height: 2.5rem;
	padding-block: 0;
	line-height: 1;
	font: inherit;
}

.cardtrack-records-printings .cardtrack-records-addcopy :is(input, select),
.cardtrack-records-cardactions :is(input:not([type="hidden"]), select) {
	padding-inline: 0.5em;
	color: inherit;
	border: 1px solid currentColor;
}

.cardtrack-records-printings .cardtrack-records-addcopy .wp-block-button__link,
.cardtrack-records-cardactions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
}

.cardtrack-records-printings .wp-block-button,
.cardtrack-records-cardactions .wp-block-button {
	margin: 0;
}

/* Core's outline rules are `:root :where(…)` and lose to the theme's global button styles. */
.cardtrack-records-printings .wp-block-button.is-style-outline > .wp-block-button__link,
.cardtrack-records-cardactions .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: currentColor;
	border: 2px solid currentColor;
}

/* On a phone WooCommerce's table puts values on the right: keep the art beside its name there. */
@media (max-width: 768px) {
	.cardtrack-records-printing {
		grid-template-columns: auto auto;
		justify-content: end;
		text-align: left;
	}
}

/* Wide screens: the Add copies line stays one line; the selects give up width first. */
@media (min-width: 900px) {
	.cardtrack-records-printings .cardtrack-records-addcopy {
		flex-wrap: nowrap;
	}

	.cardtrack-records-printings .cardtrack-records-addcopy select {
		min-width: 0;
		max-width: 9em;
	}

	.cardtrack-records-printings .cardtrack-records-addcopy input[type="number"] {
		width: 4.5em;
	}
}

/* The text-link weight (as on the want list): Remove one reads as a link that submits. */
.cardtrack-records-remove .cardtrack-link-button {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.9em);
	text-decoration: underline;
	opacity: 0.75;
	cursor: pointer;
}

.cardtrack-records-copy .cardtrack-records-remove {
	display: inline-flex;
	margin: 0 0 0 0.5em;
}

/* The outline button keeps its size; the selects give up width instead. */
.cardtrack-records-printings .cardtrack-records-addcopy .wp-block-button,
.cardtrack-records-cardactions .wp-block-button {
	flex: none;
}

.cardtrack-records-printings .cardtrack-records-addcopy .wp-block-button__link,
.cardtrack-records-cardactions .wp-block-button__link {
	white-space: nowrap;
}

/* Decks and want lists pages (owner, 2026-10-01: "the decks look goofy"). */

/* The folders row and the decks row read as two rows, not one stacked column. */
.cardtrack-tiles--folders {
	margin-bottom: var(--wp--preset--spacing--40, 1.5em);
}

/* Deck and list tiles are wider than card tiles, so their figures do not break word by word. */
.cardtrack-tiles--decks,
.cardtrack-tiles--lists {
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}

/* The folder glyph sits plain, without the boxed badge style. */
.cardtrack-tile--folder .cardtrack-tile-symbol {
	padding: 0;
	border: 0;
	line-height: 0;
}

/* A deck's art shows the card's illustration, not a strip through its frame and text. */
.cardtrack-tile--record .cardtrack-tile-art img {
	aspect-ratio: 3 / 2;
	object-position: center 16%;
}

/* A tile's link fills its tile including its padding; without this every tile spilled ~27px into the next row. */
.cardtrack-tile-link {
	box-sizing: border-box;
}

.cardtrack-tile--record .cardtrack-tile-figures {
	margin-top: 0.4em;
}

.cardtrack-tile-value {
	font-size: 0.85em;
}

.cardtrack-tile-value .cardtrack-collection-label {
	display: block;
}

/*
 * The card preview is just the card (owner, 2026-10-01): the image large beside the thumbnail, no
 * panel chrome, never under the pointer. On touch it is centred over the page.
 */
.cardtrack-preview.is-card {
	pointer-events: none;
}

.cardtrack-preview.is-card img {
	display: block;
	width: min(18em, 40vw);
	height: auto;
	border-radius: 4.5%/3.3%;
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

.cardtrack-preview.is-card.is-sheet {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
}

.cardtrack-preview.is-card.is-sheet img {
	width: min(20em, 80vw);
}