@layer page {
	/* Package list and disk-space bar. :where(#view): docs/css.md ":where(#view), not bare
	 * #view". Full rationale for every rule below: docs/css.md "Software: the disk-space bar and
	 * the carded package row". */
	:where(#view)[data-page="admin-system-package-manager"] .controls > div:first-child { position: relative; display: block; flex: 1 1 100%; width: 100%; margin: 0 0 var(--fs-space-1-5); }

	#packages:not(.fs-stacked) .tr > .td:first-child { white-space: nowrap; }

	/* the id beats theme/30-tables.css's header-hiding rule in card mode — load-bearing. */
	#packages.fs-stacked .tr:not(.cbi-section-table-titles):not(.cbi-section-table-descr) {
		display: block; padding: var(--fs-space-3) var(--fs-space-4);
	}
	#packages.fs-stacked .td {
		display: flex; align-items: baseline; justify-content: flex-end;
		gap: 0; padding: var(--fs-space-1) 0; border: 0; text-align: end;
		flex: none;
	}
	#packages.fs-stacked .td[data-title]::before {
		content: attr(data-title); flex: 0 0 auto; text-align: start; margin-bottom: 0;
		margin-inline-end: auto; padding-inline-end: var(--fs-space-3-5);
		font-size: var(--fs-type-xs); font-weight: var(--fs-eyebrow-weight); letter-spacing: var(--fs-eyebrow-tracking);
		color: var(--fs-eyebrow-color); white-space: nowrap;
	}
	/* column 4 = Description, matched by index — a `[data-title]` value is a translated string. */
	#packages.fs-stacked .td:nth-child(4) { display: block; text-align: start; }
	#packages.fs-stacked .td:nth-child(4)::before { display: block; margin-bottom: var(--fs-space-1); }
	#packages.fs-stacked .td.cbi-section-actions { margin-top: var(--fs-space-1-5); }
	#packages.fs-stacked .td.cbi-section-actions::before,
	#packages.fs-stacked .td:not([data-title])::before { content: none; }

	:where(#view)[data-page="admin-system-package-manager"] label:has(+ .cbi-progressbar) {
		display: block; margin: 0; font-size: var(--fs-type); font-weight: var(--fs-weight); color: var(--fs-dim);
	}
	/* value rides the "Disk space:" label's line at both widths — one unconditional opt-out of
	 * the bare-meter reserve; theme/90-responsive.css's phone rule only adds margin-bottom. */
	:where(#view)[data-page="admin-system-package-manager"] label + .cbi-progressbar {
		margin-block-start: 0;
	}
}