/* Architrave — the Themes page's card list (2026-08-19, revised 2026-08-25).
 *
 * Ported from lab/themes-bordered.html, the card family's BORDERED VOICE
 * (settled on lab/the-corners-of-a-card.html): hairline boxes with the
 * card's own gap, no seams. Dials: padding --space-3 (12) + picture
 * --radius-sm (6), the outer corner ALWAYS the DS-248 sum, never typed.
 *
 * IT IS A THIRD VOICE NOW, and neither lab sheet has it yet: FILLED, NO
 * EDGE. The bordered voice put the card on the paper and let a hairline
 * make it a card; the seamless one let a rule between rows do it. A theme
 * screenshot is a picture of a website and a website is white, so the card
 * had to stop being the paper — it rests on --surface-subtle — and once the
 * fill states the shape, the hairline is a second outline around it. What
 * keeps an edge is the picture, and that edge is not an outline: it is what
 * stops a white screenshot from bleeding into the grey.
 *
 * The whole interaction ladder is declared from the card's own ground
 * rather than the column's, so hover and press are the next rungs up. */
.theme-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-block-start: var(--space-10);
}
.theme-card {
	--card-padding: var(--space-3);
	--card-inner: var(--radius-sm);
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding: var(--card-padding);
	
	border: var(--border-width-default) solid var(--border-subtle);
	border-radius: calc(var(--card-padding) + var(--card-inner));
	--interaction-surface: var(--surface-subtle);
	--step-surface-hover: 4%;
	background: var(--interaction-surface);
	margin-block: 0;
	transition: background-color var(--motion-duration-feedback)
		var(--motion-easing-standard);
}
.theme-card:hover {
	background-color: var(--surface-hover);
}
.theme-card:active:not(:has(.card-actions :active)) {
	background-color: var(--surface-selected);
}
.theme-card .card-cover {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
}
.theme-card img,
.theme-card .illustration {
	border: var(--border-width-default) solid var(--border-default);
	box-shadow: var(--elevation-control);
}
.theme-card img {
	display: block;
	flex: none;
	width: var(--space-20);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--card-inner);
	background: var(--surface-hover);
}
.theme-card .card-text {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	gap: var(--space-0-5);
}
.theme-card .card-title {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--text-base-line-height);
	color: var(--text-primary);
}
.theme-card .card-sub {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--font-sans);
	font-size: var(--text-sm-contextual);
	line-height: var(--text-base-line-height);
	color: var(--text-muted);
}
.theme-card .sub-hover {
	display: none;
}
.theme-card:hover .sub-rest {
	display: none;
}
.theme-card:hover .sub-hover {
	display: inline;
}
.theme-card .card-actions {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--space-1);
}
.theme-card .card-actions .quire-button {
	text-decoration: none;
}
.theme-card .card-actions .quire-button:not(.ghost) {
	box-shadow: var(--elevation-control);
}
.theme-card .quire-button:hover {
	background: var(--surface-selected);
}
.theme-card .quire-button:active {
	background: var(--surface-pressed);
}
.theme-card .quire-button:not(.ghost):hover {
	border-color: color-mix(
		in srgb,
		var(--border-default) 50%,
		var(--border-strong)
	);
}
.theme-card .quire-icon-button:hover::before {
	background: var(--surface-selected);
}
.theme-card .quire-icon-button:active::before {
	background: var(--surface-pressed);
}
.theme-card .card-demo {
	margin: 0;
}
.theme-card .quire-tooltip {
	--layout-icon-button-bleed: 0px;
}
.theme-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-block-start: var(--space-10);
}
.theme-controls + .theme-list {
	margin-block-start: var(--space-5);
}
.theme-count {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm-contextual);
	line-height: var(--text-base-line-height);
	color: var(--text-muted);
	font-variant-numeric: var(--font-variant-numeric-tabular);
}
.theme-choices {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.theme-switch {
	--groove: var(--space-1);
	position: relative;
	box-sizing: border-box;
	padding: var(--groove);
	border: 0;
	border-radius: var(--radius-control);
	box-shadow: inset 0 0 0 var(--border-width-default) var(--border);
	gap: var(--groove);
}
.theme-switch button {
	position: relative;
	z-index: 1;
	border-radius: calc(var(--radius-control) - var(--groove));
}
.theme-switch button.is-active {
	background: transparent;
	box-shadow: none;
	color: var(--text-primary);
}
.theme-switch .chip {
	position: absolute;
	z-index: 0;
	top: var(--groove);
	bottom: var(--groove);
	border-radius: calc(var(--radius-control) - var(--groove));
	background: var(--surface-track-selected);
	box-shadow:
		0 0 0 0.5px var(--border-default),
		0 1px 2px var(--elevation-contact-color);
	transition:
		left var(--motion-duration-spatial) var(--motion-easing-standard),
		width var(--motion-duration-spatial) var(--motion-easing-standard);
}
@media (max-width: 600px) {
	.theme-controls {
		justify-content: flex-start;
	}
}