@layer theme {
	/* phone overflow safety net (<=767px): .fs-main is overflow-x: clip, cutting anything wider silently; tablets were clean */
	/* split-button labels wrap under 360px — docs/css.md "Responsive: a split button's label must wrap under 360px" */
	@container fs-view (max-width: 360px) {
		#view .cbi-button, #view .btn,
		#view input[type="button"], #view input[type="submit"], #view input[type="reset"] {
			white-space: normal;
			min-width: 0;
			word-break: normal;
			overflow-wrap: break-word;
		}
	}

	@media (max-width: 767px) {
		/* foreign-<table> fallback unguarded now in theme/30-tables.css: fit is content/column, never viewport */

		/* must stay INSIDE this @media: theme/65-dropdown.css's cap is (0,3,0) vs this (0,1,0) */
		.cbi-dropdown { min-width: 0; max-width: 100%; }

		/* base's 250px label overflows ~360px; !important beats package-manager.js's inline style */
		:where(#view)[data-page="admin-system-package-manager"] .controls { display: block !important; }
		/* :not(.pager): blocking it stacked « / text / » onto three lines */
		:where(#view)[data-page="admin-system-package-manager"] .controls > div:not(.pager) { display: block !important; min-width: 0; margin-bottom: var(--fs-space-2); }
		:where(#view)[data-page="admin-system-package-manager"] .controls > .pager {
			display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--fs-space-2);
		}
		:where(#view)[data-page="admin-system-package-manager"] .controls > .pager > .btn { flex: 0 0 auto; }
		:where(#view)[data-page="admin-system-package-manager"] .controls > .pager > .text { flex: 0 1 auto; min-width: 0; }
		/* disk gauge value moved BELOW the bar — docs/css.md "Responsive: the disk gauge value moves below the bar" */
		:where(#view)[data-page="admin-system-package-manager"] label + .cbi-progressbar {
			width: 100%; margin-bottom: 3em;
		}
		:where(#view)[data-page="admin-system-package-manager"] label + .cbi-progressbar::after {
			top: calc(100% + 5px); inset-inline: 0 auto; bottom: auto;
			text-align: start; white-space: normal; max-width: 100%;
		}
		/* `> div > label`: only the TITLE label, a bare `.controls label` also caught nested radio labels */
		:where(#view)[data-page="admin-system-package-manager"] .controls > div > label { display: block; min-width: 0; white-space: normal; margin-bottom: var(--fs-space-1); }
		/* radio row: stock's &nbsp; text nodes don't stop a mid-choice split, a real gap does */
		:where(#view)[data-page="admin-system-package-manager"] .controls > div > div:has(> label > input[type="radio"]) {
			display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-space-1) var(--fs-space-5);
		}
		:where(#view)[data-page="admin-system-package-manager"] .controls .control-group { display: flex; flex-wrap: wrap; min-width: 0; gap: var(--fs-space-2); }
		:where(#view)[data-page="admin-system-package-manager"] .controls .control-group input { flex: 1 1 140px; min-width: 0; max-width: 100%; }

		/* Diagnostics stack not here: fs-select.js writes .fs-rowstack at any width, theme/30-tables.css carries it */

		/* no `table.fs-dt { display: block }`: discards the table context — docs/css.md "Responsive: no `display: block` on `table.fs-dt`" */

		/* generic caps: a field never exceeds its column */
		.cbi-value-field input, .cbi-value-field select, .cbi-value-field .cbi-dropdown { max-width: 100%; }
		/* content-sized leaves half the row empty; checkbox/radio/file keep intrinsic size */
		.cbi-value-field select,
		.cbi-value-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
		.cbi-value-field .cbi-dropdown:not(.btn):not(.cbi-button),
		.cbi-value-field .cbi-dynlist,
		.cbi-value-field .cbi-select { width: 100%; }
		/* min-width: 0 only, base/40-tables.css already breaks a long value */
		#view .fs-ovl .table .td, #view .fs-ovl .table .th { min-width: 0; }

		/* side-by-side squeezes a field to ~120px; not #view-scoped, ui.js appends modals to <body> */
		.cbi-value > .cbi-value-title { flex: 1 1 100%; text-align: start; padding-top: 0; }
		.cbi-value > .cbi-value-field { flex: 1 1 100%; min-width: 0; }

		/* stock phone contract; `.td.hide-xs` not redundant, stacking rules (0,2,1)/(0,2,0) outrank a bare `.hide-xs` (0,1,0) */
		.hide-sm, .hide-xs,
		.table .td.hide-sm, .table .td.hide-xs,
		.table .th.hide-sm, .table .th.hide-xs { display: none; }
		/* .col-N weights UNGUARDED now, theme/30-tables.css: flex is inert on a non-flex item */

		/* iOS Safari zooms in when focused text is under 16px and never zooms back out */
		input, textarea, select, .cbi-dropdown > ul > li { font-size: var(--fs-type-lg); }
	}

	/* anchored to its widget: ui.js's touch branch assumes the viewport as containing block; !important beats the inline style */
	.cbi-dropdown[open] > ul.dropdown {
		inset-inline-start: 0 !important;
		inset-inline-end: auto !important;
		min-width: 100%;
		/* desktop only: min(92vw,420px) ignores trigger's left offset, grew past viewport under 767px (113 findings, task audit-09) */
		width: max-content;
		max-width: min(92vw, 420px);
	}

	@media (max-width: 767px) {
		/* phone tier, after the rule above (later wins): trigger already capped to field width, `auto` keeps the popup on-screen */
		.cbi-dropdown[open] > ul.dropdown { width: auto; }
	}
}