@container (width < 40rem) {
	:where(.rooster-admin-table.is-cards) .rooster-admin-table__table,
	:where(.rooster-admin-table.is-cards) .rooster-admin-table__table > thead,
	:where(.rooster-admin-table.is-cards) .rooster-admin-table__table > tfoot {
		@apply block;
	}

	/* The head: a row of the sort links as chips after the server's words ("Sort by"); the other heads go, Select all
	   stays; a group row goes. */
	:where(.rooster-admin-table.is-cards) .rooster-admin-table__table > thead > tr {
		@apply flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-border px-3 py-2 text-xs text-secondary-foreground;
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__table > thead > tr[data-ra-sort-label]::before {
		content: attr(data-ra-sort-label);
	}

	:where(.rooster-admin-table.is-cards .rooster-admin-table__table > thead > tr) > .rooster-admin-table__th {
		@apply hidden;
	}

	:where(.rooster-admin-table.is-cards .rooster-admin-table__table > thead > tr > .rooster-admin-table__th):is(
		.is-check,
		:has(> .rooster-admin-table__sort)
	) {
		@apply static block border-0 bg-transparent p-0;
	}

	/* A head keeps no column width in the row: Select all's 1 px put the box on the first chip, a shrink-to-content
	   column's ("#") ran its chip into the next (0.74.5, Rooster One's rules dialog). */
	:where(.rooster-admin-table.is-cards .rooster-admin-table__table > thead > tr)
		> .rooster-admin-table__th:is(.is-check, .is-min, .is-actions, .is-w-xs, .is-w-sm, .is-w-md, .is-w-lg) {
		@apply w-auto min-w-0;
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__groups {
		@apply hidden;
	}

	/* The rows: a grid of cards. */
	:where(.rooster-admin-table.is-cards) .rooster-admin-table__table > tbody {
		@apply grid gap-3 p-3;
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__row {
		@apply relative block rounded-md border border-border p-3;
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__td {
		@apply relative block border-0 px-0 py-1 ps-[38%];
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__td[data-ra-label]::before {
		@apply absolute start-0 top-1 w-[36%] truncate text-xs font-semibold tracking-[0.04em] text-secondary-foreground uppercase;
		content: attr(data-ra-label);
	}

	/* The first cell is the card's title: the whole line, room for the selection box at the corner. */
	:where(.rooster-admin-table.is-cards) .rooster-admin-table__td.is-first {
		@apply static min-w-0 border-0 pt-0 ps-0 pe-8 pb-2;
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__td.is-check {
		@apply absolute end-3 top-3 w-auto min-w-0 p-0;
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__td:is(.is-move, .is-detail) {
		@apply ps-0;
	}

	/* A cell's column width means nothing in a card: the 1 px of a shrink-to-content column stacked the buttons. */
	:where(.rooster-admin-table.is-cards)
		.rooster-admin-table__td:is(.is-min, .is-w-xs, .is-w-sm, .is-w-md, .is-w-lg, .is-actions) {
		@apply w-auto;
	}

	/* Nor a column's alignment: a number's end, a yes-or-no's centre, an image's or a declared `align` sat the value
	   away from its name (0.74.5, Rooster One's rules dialog: Base cost and Enabled indented). */
	:where(.rooster-admin-table.is-cards)
		.rooster-admin-table__td:is(.is-num, .is-boolean, .is-image, .is-center, .is-end) {
		@apply text-start;
	}

	/* The row's buttons at the card's foot, wrapping as they need. */
	:where(.rooster-admin-table.is-cards) .rooster-admin-table__td.is-actions {
		@apply mt-2 border-t border-border pt-2 ps-0 text-start;
	}

	/* A card has no zebra: the gaps between the cards do its work (the stripe's rule weighs more than the cap, so its
	   undoing must too). The hover and the selection tint the whole card, in the cells' own colours. */
	/* stylelint-disable-next-line selector-max-specificity -- over the stripe, which is itself over the cap */
	.rooster-admin-table.is-cards.is-striped .rooster-admin-table__row:nth-child(even) .rooster-admin-table__td {
		@apply bg-transparent;
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__row:hover {
		background: color-mix(in srgb, var(--ra-accent) 5%, var(--ra-background));
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__row.is-selected {
		background: color-mix(in srgb, var(--ra-accent) 9%, var(--ra-background));
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__buttons {
		@apply flex-wrap whitespace-normal;
	}

	/* A row across the table (a note, a section label), a row's details, the empty row: the whole line. */
	:where(.rooster-admin-table.is-cards) .rooster-admin-table__detail {
		@apply block;
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__td:is(.is-span, .is-panel, .is-group) {
		@apply ps-0;
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__empty {
		@apply block ps-0;
	}

	/* The totals row is a card too, its first cell the title. */
	:where(.rooster-admin-table.is-cards) .rooster-admin-table__row.is-total {
		@apply mx-3 mb-3;
	}

	:where(.rooster-admin-table.is-cards) .rooster-admin-table__row.is-total > .rooster-admin-table__td {
		@apply border-0;
	}
}