/*
 * builder.css: everything rendered inside #textbooks-body, #activities-body and
 * #other-costs-body. Tokens, shared components (.field, .input, .chip, .tag,
 * .btn, .empty, .notice, ...) and the panel chrome live in styles.css; this file
 * only styles what the builder panels add on top of them. Colours come from
 * tokens, never raw values. Panel bodies are size containers named "panel".
 *
 * Gold means yours: it appears here only on a checked box, the chosen section,
 * the chosen activity, a row you just added and a row you are editing. Browse
 * and filter controls (department, term, activity group) select in navy.
 */

/* ---------- Course finder ---------- */
.finder {
	display: grid;
	gap: var(--sp-6);
}

.finder__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.finder__group > legend {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 var(--sp-2);
	padding: 0;
}

.finder .chips,
.own-form .chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

/* "or browse" is plain Ink 2 text, tucked between the search field and the browse controls. */
.finder__or {
	margin: calc(var(--sp-2) * -1) 0 calc(var(--sp-2) * -1);
	font-size: var(--fs-meta);
	line-height: var(--lh-small);
	color: var(--text-2);
}

.finder .select {
	max-width: 28rem;
}

/* Department: one joined segmented control with a navy selected state. */
.finder .finder__dept.chips--joined {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 0;
}

@container panel (max-width: 33.99rem) {
	.finder .finder__dept.chips--joined {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-2);
		width: 100%;
	}

	.finder .finder__dept.chips--joined > .chip {
		flex-wrap: wrap;
		justify-content: center;
		margin-left: 0;
		padding: 6px;
		gap: 2px 4px;
		border-radius: var(--r-control);
		text-align: center;
	}
}

/* Under about 18rem (a 320px phone) three columns would break "Language" mid-word: use two. */
@container panel (max-width: 17.99rem) {
	.finder .finder__dept.chips--joined {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.finder__dept .chip__text {
	overflow-wrap: normal;
}

/* Section choice: a radio price list. Three columns once there is room, else one 48px row each. */
.finder .section-chips {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-2);
}

@container panel (min-width: 32rem) {
	.finder .section-chips {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.section-chips .chip {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 10px;
	min-height: 48px;
	padding: 6px 14px;
	border: 1px solid var(--control-border);
	border-radius: var(--r-control);
	background: var(--field);
	color: var(--text);
	font-weight: 500;
}

@container panel (min-width: 32rem) {
	.section-chips .chip {
		min-height: 52px;
	}
}

.section-chips .chip__text {
	overflow-wrap: break-word;
}

/* The total: Public Sans tabular figures, so the totals line up down one edge. */
.section-chips .chip__meta {
	color: var(--ink);
	font-weight: 600;
	text-align: right;
}

/* The radio circle is drawn on the row; the real input stays focusable underneath. */
.section-chips .chip::before,
.act::before {
	content: "";
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--control-border);
	border-radius: var(--r-round);
	background: var(--field);
}

.finder .section-chips .chip:has(> input:checked) {
	padding-inline: 13px;
	border: 2px solid var(--ink);
	background: var(--selected);
	color: var(--ink);
	font-weight: 500;
}

.section-chips .chip:has(> input:checked) .chip__meta {
	color: var(--ink);
}

.section-chips .chip:has(> input:checked)::before,
.act:has(> .act__radio:checked)::before {
	border: 6px solid var(--ink);
	background: var(--gold-fill);
}

/* ---------- Combobox. Panel bodies are size containers (their own stacking
   context), so lift the panel while the list is open to keep it above the next one. ---------- */
.panel:has(.combo__list:not([hidden])) {
	position: relative;
	z-index: 5;
}

.combo__control {
	position: relative;
}

.combo__list {
	position: absolute;
	z-index: var(--z-listbox);
	top: calc(100% + var(--sp-2));
	left: 0;
	right: 0;
	max-height: min(22rem, 60vh);
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	background: var(--surface);
	border: 1.5px solid var(--ink);
	border-radius: var(--r-control);
}

.combo__option {
	display: grid;
	align-content: center;
	gap: 2px;
	min-height: 48px;
	padding: 8px 16px 8px 13px;
	cursor: pointer;
	border-left: 3px solid transparent;
}

.combo__option + .combo__option {
	border-top: 1px solid var(--border);
}

/* Focus stays in the input (aria-activedescendant), so this bar is the focus cue:
   --primary stays above 3:1 against both the Screen fill and the list. */
.combo__option[aria-selected="true"] {
	background: var(--surface-2);
	border-left: 3px solid;
	border-left-color: var(--primary);
}

.combo__option-name {
	font-weight: 600;
	color: var(--ink);
}

/* A match is underlined, not painted: gold is reserved for what you chose. */
.combo__option-name mark {
	padding: 0;
	color: inherit;
	background: transparent;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.combo__option-meta {
	font-size: var(--fs-meta);
	line-height: var(--lh-small);
	color: var(--text-2);
}

.combo__empty {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-small);
	color: var(--text-2);
}

@media (hover: hover) {
	.combo__option:hover {
		background: var(--surface-hover);
	}

	.combo__option[aria-selected="true"]:hover {
		background: var(--surface-2);
	}
}

/* ---------- List head: the chosen course or activity ---------- */
.listhead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-1);
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--border);
}

.listhead__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: var(--lh-h3);
	color: var(--ink);
	overflow-wrap: anywhere;
}

/* The old kicker, now a plain sentence: "Bennett's section, 6 books, $45.82 listed". */
.listhead__line,
.listhead__range {
	max-width: 62ch;
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--text-2);
}

.listhead__line {
	font-variant-numeric: tabular-nums lining-nums;
}

.listhead__range {
	margin-top: var(--sp-1);
}

.listhead__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-1) var(--sp-3);
	margin-top: var(--sp-3);
}

@container panel (min-width: 34rem) {
	.listhead:has(.listhead__actions) {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--sp-6);
	}

	.listhead > :not(.listhead__actions) {
		grid-column: 1;
	}

	.listhead__actions {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: start;
		margin-top: 0;
	}
}

.results-head > .empty {
	margin-top: var(--sp-4);
}

.switch-slot:not(:empty) {
	margin-top: var(--sp-4);
}

.switch-note .notice__actions {
	margin-top: var(--sp-2);
}

/* ---------- Toolbar: term filter and tally ---------- */
.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-2) var(--sp-6);
	margin: var(--sp-6) 0 var(--sp-2);
}

.toolbar[hidden] {
	display: none;
}

.toolbar .segmented {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.tally {
	margin: 0;
	padding-bottom: var(--sp-3);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--text-2);
	font-variant-numeric: tabular-nums lining-nums;
}

/* Narrow panels: the four term options share the row's width. */
@container panel (max-width: 30rem) {
	.toolbar .segmented,
	.toolbar .segmented__track {
		display: grid;
		width: 100%;
	}

	.toolbar .segmented__track {
		grid-template-columns: repeat(4, auto);
	}

	.toolbar .segmented__opt {
		padding: 0 6px;
		font-size: var(--fs-small);
	}
}

.results-list > .empty {
	margin-top: var(--sp-3);
}

/* ---------- Item rows: books, gear, fees and trips ---------- */
/* A price list: checkbox | title, leader, price | meta | hint. The list bleeds 8px so the hover fill clears the box. */
.items {
	margin: 0 -8px;
	padding: 0;
	list-style: none;
}

.item {
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	grid-template-areas:
		"box line"
		"box meta"
		"box hint";
	column-gap: 14px;
	align-content: start;
	align-items: start;
	min-width: 0;
	padding: 14px 8px;
}

/* One rule between rows, held to the text edges, not the hover bleed. */
.item::after,
.own-row::after {
	content: "";
	position: absolute;
	right: 8px;
	bottom: 0;
	left: 8px;
	border-bottom: 1px solid var(--border);
}

.item:first-child::before,
.own-row:first-child::before {
	content: "";
	position: absolute;
	top: 0;
	right: 8px;
	left: 8px;
	border-top: 1px solid var(--border);
}

@media (hover: hover) {
	.item:hover {
		background: var(--surface-hover);
	}
}

.item__box {
	grid-area: box;
	align-self: start;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	margin: 0;
	cursor: pointer;
	background: var(--field) center / 18px no-repeat;
	border: 1.5px solid var(--control-border);
	border-radius: 4px;
}

/* Checked is yours: a gold fill, a navy tick and a navy border (the ring comes from :focus-visible). */
.item__box:checked {
	background-color: var(--gold-fill);
	background-image: var(--check-mark);
	border-color: var(--navy);
}

/* A ring the colour of the fill is no ring: a focused, checked box takes the Ink ring. */
.item__box:checked:focus-visible {
	outline-color: var(--ink);
}

/* Title, a dotted leader and the price on one line. The leader runs from the end of the last wrapped line. */
.item__line {
	grid-area: line;
	display: flex;
	align-items: baseline;
	align-items: last baseline;
	min-width: 0;
}

.item__title {
	flex: 0 1 auto;
	min-width: 0;
	font-family: var(--font-ui);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: var(--lh-body);
	color: var(--ink);
	cursor: pointer;
	overflow-wrap: anywhere;
}

/* Real book titles are italic, as in a reading list; gear, fees and trips stay roman. */
.item:not(.item--compact) .item__title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-style: italic;
}

/* The label's hit area covers the whole row. */
.item__title::after {
	content: "";
	position: absolute;
	inset: 0;
}

.item__leader,
.own-row__leader {
	position: relative;
	top: -0.3em;
	flex: 1 1 auto;
	min-width: 20px;
	margin: 0 10px;
	border-bottom: 2px dotted var(--border-strong);
}

/* Unchecked prices are Ink 2 at 400; a checked row's price goes to Ink at 600. */
.item__price {
	flex: none;
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	color: var(--text-2);
	text-align: right;
	font-variant-numeric: tabular-nums lining-nums;
}

.item.is-selected .item__price,
.item:has(.item__box:checked) .item__price {
	font-weight: 600;
	color: var(--ink);
}

.item__price--muted {
	font-size: var(--fs-small);
}

/* The meta line: separate pieces with gaps between them, never a text separator. */
.item__meta {
	grid-area: meta;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 18px;
	min-width: 0;
	margin: 6px 0 0;
	font-size: var(--fs-meta);
	line-height: var(--lh-small);
	color: var(--text-2);
}

.item__author {
	font-weight: 500;
	color: var(--ink);
}

/* Term words ("Fall and Winter") stay on one line, so a gap never starts or ends a wrapped line. */
.item__terms {
	display: inline-flex;
	gap: 4px;
	white-space: nowrap;
}

.item__author,
.item__isbn,
.item__note {
	overflow-wrap: anywhere;
}

.item__hint {
	grid-area: hint;
	margin: 4px 0 0;
	font-size: var(--fs-meta);
	line-height: var(--lh-small);
	color: var(--text-2);
}

/* Lifted above the row's label so following it never toggles the box; 44px tall to tap. */
.item__store {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-block: -12px;
	padding-block: 12px;
	color: var(--ink);
	font-weight: 500;
}

.item__store .icon {
	width: 14px;
	height: 14px;
}

.items__legend {
	margin: var(--sp-3) 0 0;
	font-size: var(--fs-meta);
	line-height: var(--lh-small);
	color: var(--text-2);
}

.items__legend[hidden] {
	display: none;
}

/* The one response motion: the gold wash of a row you just added fades out. */
.item.is-flashing {
	animation: item-flash 600ms var(--ease-out);
}

@keyframes item-flash {
	from {
		background: var(--selected);
	}

	to {
		background: transparent;
	}
}

/* ---------- Activities ---------- */
.acts {
	display: grid;
	gap: var(--sp-6);
}

@container panel (min-width: 40rem) {
	.acts {
		grid-template-columns: minmax(16rem, 4fr) minmax(0, 5fr);
		gap: var(--sp-8);
		align-items: start;
	}
}

.acts__picker {
	container: picker / inline-size;
	display: grid;
	gap: var(--sp-4);
	min-width: 0;
}

.acts__groups {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Group filter. No label ever wraps (white-space: nowrap below), so each layout must give the longest
 * segment ("Arts & performance 6", about 186px with 10px padding) its full width: a single column by
 * default, a 2 x 2 grid from 25rem (two 190px cells plus the gap), one joined row from 38rem.
 */
.acts .acts__chips {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-2);
}

.acts .acts__chips > .chip {
	justify-content: space-between;
	margin-left: 0;
	padding: 0 10px;
	border-radius: var(--r-control);
}

.acts .acts__chips .chip__text {
	overflow-wrap: normal;
	white-space: nowrap;
}

/* Inventory counts are plain figures after the label, not badges: the badge is for books you added. */
.acts .acts__chips .chip__meta {
	font-variant-numeric: tabular-nums lining-nums;
}

@container picker (min-width: 25rem) {
	.acts .acts__chips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container picker (min-width: 38rem) {
	.acts .acts__chips {
		display: inline-flex;
		gap: 0;
	}

	/* The four segments need about 585px on one line; below 38rem they stay a grid. */
	.acts .acts__chips > .chip {
		padding: 0 16px;
		border-radius: 0;
	}

	.acts .acts__chips > .chip + .chip {
		margin-left: -1.5px;
	}

	.acts .acts__chips > .chip:first-child {
		border-radius: var(--r-control) 0 0 var(--r-control);
	}

	.acts .acts__chips > .chip:last-child {
		border-radius: 0 var(--r-control) var(--r-control) 0;
	}
}

/* The scroll box: a 1px Line border, 6px radius, and room inside for the selected row's ring. */
.acts__list {
	position: relative;
	max-height: 22.5rem;
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--surface);
	border: 1px solid var(--control-border);
	border-radius: var(--r-control);
}

.acts__list[hidden] {
	display: none;
}

.acts__group-title {
	position: sticky;
	z-index: 2;
	top: 0;
	margin: 0;
	padding: 6px 12px;
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: var(--lh-small);
	color: var(--text-2);
	background: var(--surface-2);
	border-radius: var(--r-tag);
}

/* One column radio price list: radio, name and the listed total on one line, the count and
   the word "listed" under them, so the money shares one right edge down the list. */
.act {
	position: relative;
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	column-gap: 10px;
	align-items: center;
	min-height: 48px;
	padding: 6px 12px;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: var(--r-control);
}

.act::before {
	grid-row: 1 / span 2;
}

.act::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 0;
	left: 12px;
	border-bottom: 1px solid var(--border);
}

.act:last-child::after,
.act:has(+ .acts__group-title)::after,
.act:has(> .act__radio:checked)::after {
	display: none;
}

@media (hover: hover) {
	.act:hover {
		background: var(--surface-hover);
	}
}

.act__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
}

.act:has(> .act__radio:focus-visible) {
	z-index: 1;
	outline: 3px solid var(--focus);
	outline-offset: 1px;
}

.act__name {
	grid-column: 2;
	grid-row: 1;
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: var(--lh-body);
	color: var(--ink);
	overflow-wrap: anywhere;
}

.act__amount {
	grid-column: 3;
	grid-row: 1;
	align-self: start;
	justify-self: end;
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-body);
	color: var(--ink);
	text-align: right;
}

.act__meta {
	grid-row: 2;
	font-size: var(--fs-meta);
	line-height: var(--lh-small);
	color: var(--text-2);
	font-variant-numeric: tabular-nums lining-nums;
}

.act__meta {
	grid-column: 2;
}

/* Once something is added, the row says so in heavier ink. */
.act__meta--added {
	font-weight: 600;
	color: var(--ink);
}

.act:has(> .act__radio:checked) {
	background: var(--selected);
	border-color: var(--ink);
}

.acts__empty {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--text-2);
}

.acts__empty[hidden] {
	display: none;
}

.acts__detail {
	min-width: 0;
}

.acts__detail:focus {
	outline: none;
}

.acts__detail > .listhead {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* The detail column is narrower than the panel, so its actions always sit under the title. */
.acts__detail > .listhead:has(.listhead__actions) {
	grid-template-columns: minmax(0, 1fr);
}

.acts__detail > .listhead > .listhead__actions {
	grid-column: 1;
	grid-row: auto;
	margin-top: var(--sp-3);
}

.acts__detail > .items {
	margin-top: var(--sp-4);
}

.acts__detail > .empty {
	margin-top: var(--sp-4);
}

.acts__detail > .empty--inline:first-child {
	margin-top: 0;
}

/* ---------- Trips & other costs ---------- */
.other {
	display: grid;
	gap: var(--sp-10);
}

.other__listed[hidden] {
	display: none;
}

.other__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: var(--lh-h3);
	color: var(--ink);
}

.other__hint {
	max-width: 65ch;
	margin: var(--sp-1) 0 var(--sp-4);
	color: var(--text-2);
}

.other__note {
	margin: 0;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-small);
	color: var(--text-2);
	background: var(--surface-2);
	border-radius: var(--r-control);
}

/* The dashed frame marks the family's own line, not the school's. */
.own-form__fields {
	display: grid;
	gap: var(--sp-4);
	min-width: 0;
	margin: 0;
	padding: var(--sp-6);
	background: transparent;
	border: 1px dashed var(--control-border);
	border-radius: var(--r-control);
}

.own-form__fields:disabled {
	opacity: 0.6;
}

.own-form__optional {
	justify-self: start;
}

.own-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
}

.own-form__limit {
	margin: var(--sp-3) 0 0;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--text-2);
}

.own-form__limit[hidden] {
	display: none;
}

/* Suggestions are underlined text buttons that fill the name field; they wrap, they never scroll. */
.own-form .own-form__suggest {
	gap: 0 var(--sp-5);
	margin: calc(var(--sp-2) * -1) 0 0 -4px;
}

/* A 320px phone: tighter frame and leaders, so the labels keep their words whole. */
@container panel (max-width: 19rem) {
	.own-form__fields {
		padding: var(--sp-4);
	}

	.item__leader,
	.own-row__leader {
		min-width: 12px;
		margin: 0 6px;
	}
}

/* Name and amount sit side by side once there is room; suggestions stay under the name. */
@container panel (min-width: 40rem) {
	.own-form__fields {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		column-gap: var(--sp-5);
		align-items: start;
	}

	.own-form__name {
		grid-column: 1;
		grid-row: 1;
	}

	.own-form__suggest {
		grid-column: 1;
		grid-row: 2;
	}

	.own-form__amount {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.own-form__optional,
	.own-form__actions {
		grid-column: 1 / -1;
	}
}

/* Costs you added: leader rows with an "Added by you" tag and Edit and Remove icon buttons. */
.own-list {
	margin: var(--sp-6) -8px 0;
	padding: 0;
	list-style: none;
}

.own-list[hidden] {
	display: none;
}

.own-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 44px 44px;
	align-items: start;
	column-gap: var(--sp-1);
	padding: 4px 4px 4px 8px;
}

.own-row.is-editing {
	background: var(--selected);
}

.own-row.is-flashing {
	animation: item-flash 600ms var(--ease-out);
}

.own-row__main {
	display: grid;
	gap: 4px;
	min-width: 0;
	padding-block: 10px;
}

.own-row__line {
	display: flex;
	align-items: baseline;
	align-items: last baseline;
	min-width: 0;
}

.own-row__label {
	flex: 0 1 auto;
	min-width: 0;
	font-weight: 500;
	line-height: var(--lh-body);
	color: var(--ink);
	overflow-wrap: break-word;
}

.own-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
}

.own-row__meta .tag {
	white-space: normal;
}

.own-row__price {
	flex: none;
	font-weight: 600;
	line-height: var(--lh-body);
	color: var(--ink);
	text-align: right;
	font-variant-numeric: tabular-nums lining-nums;
}

.own-row__price--none {
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--text-2);
}

.own-row.is-editing .own-row__price--none {
	color: var(--selected-ink);
}

/* A 320px phone: the label and price take the full width on line 1, and the tag and the Edit and
   Remove buttons share line 2 (tag left, buttons right). Placed after the base rows so it wins. */
@container panel (max-width: 19rem) {
	.own-row__main {
		display: contents;
	}

	.own-row__line {
		grid-column: 1 / -1;
		padding-top: 10px;
	}

	.own-row__meta {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		padding-bottom: 4px;
	}

	.own-row > [data-action="edit"] {
		grid-column: 2;
		grid-row: 2;
	}

	.own-row > [data-action="remove"] {
		grid-column: 3;
		grid-row: 2;
	}
}

/* ---------- Reduced motion for the pieces defined here ---------- */
@media (prefers-reduced-motion: reduce) {
	.item.is-flashing,
	.own-row.is-flashing {
		animation: none;
	}
}

/* ---------- Print: the builder is hidden on paper; keep any row that does print in one piece ---------- */
@media print {
	.item,
	.own-row {
		break-inside: avoid;
		animation: none;
	}
}

/* ---------- Forced colors. Kept last so the combobox base rule above is the first match. ---------- */
@media (forced-colors: active) {
	.item {
		border: 1px solid CanvasText;
	}

	.item.is-selected {
		outline: 2px solid Highlight;
	}

	.item__box {
		appearance: auto;
	}

	.combo__option[aria-selected="true"] {
		border-left-color: Highlight;
	}

	.section-chips .chip:has(> input:checked) {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	/* The shell switches colour forcing off for a checked chip; the section rows hand it back to Highlight. */
	.finder .section-chips .chip:has(> input:checked),
	.section-chips .chip:has(> input:checked) .chip__meta {
		background: Highlight;
		color: HighlightText;
	}

	.section-chips .chip:has(> input:checked) .chip__meta {
		background: transparent;
	}

	.section-chips .chip:has(> input:checked)::before,
	.act:has(> .act__radio:checked)::before {
		forced-color-adjust: none;
		border-color: CanvasText;
		background: Highlight;
	}

	/* On a Highlight section row the ring reads in HighlightText, not CanvasText. */
	.finder .section-chips .chip:has(> input:checked)::before {
		border-color: HighlightText;
	}

	.act:has(> input:checked) {
		outline: 2px solid Highlight;
	}

	.own-row {
		border: 1px solid CanvasText;
	}

	.own-row.is-editing {
		outline: 2px solid Highlight;
	}
}