/* Gondwana app styles.
   Milestone 7 UI test pass (owner, 2026-10-15): a grouped "inset list" look inspired by phone settings screens. Colors,
   radii and spacing are tokens on :root; each color token holds its light and dark value (DD-077). Visual only: no field, command or
   form tab is hidden, moved or reordered by these rules. Icons: Lucide (ISC), wwwroot/licenses/lucide-LICENSE.txt. */

/* DD-077: the theme (settings menu, Light, Dark or System). System, the default, has no data-theme attribute and follows
   prefers-color-scheme; data-theme="light" or "dark" (set before the first paint by index.html, then by js/theme.js)
   fixes the scheme. Each color token is light-dark(light, dark), so one color-scheme switches every token, the native
   controls and the scrollbars together. */
:root {
	color-scheme: light dark;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

	--bg: light-dark(#f2f2f7, #0e0e11);
	--bg-blur: light-dark(rgba(242, 242, 247, 0.86), rgba(14, 14, 17, 0.82));
	--surface: light-dark(#ffffff, #1c1c1e);
	--surface-2: light-dark(#f2f2f7, #2c2c2e);
	--surface-hover: light-dark(#e9e9ef, #353538);
	--text: light-dark(#1c1c1e, #f2f2f7);
	--text-2: light-dark(#5f5f66, #a7a7ae);
	/* Dark: lighter than the light value's mirror so notes keep 4.5:1 on --surface-2. */
	--text-3: light-dark(#8e8e93, #98989f);
	--separator: light-dark(rgba(60, 60, 67, 0.16), rgba(84, 84, 88, 0.55));
	--accent: light-dark(#0a63c9, #4d9fff);
	--accent-text: light-dark(#ffffff, #06111f);
	--accent-tint: light-dark(rgba(10, 99, 201, 0.1), rgba(77, 159, 255, 0.14));
	--accent-tint-strong: light-dark(rgba(10, 99, 201, 0.16), rgba(77, 159, 255, 0.22));
	--danger: light-dark(#c0262d, #ff6b6b);
	--danger-tint: light-dark(rgba(192, 38, 45, 0.07), rgba(255, 107, 107, 0.1));
	--warning: light-dark(#9a5b00, #f0b45a);
	--warning-tint: light-dark(rgba(214, 138, 0, 0.12), rgba(240, 180, 90, 0.12));
	--success: light-dark(#1d8a3c, #43c464);
	--switch-off: light-dark(rgba(120, 120, 128, 0.24), rgba(120, 120, 128, 0.36));
	--segment-bg: light-dark(rgba(118, 118, 128, 0.12), rgba(118, 118, 128, 0.24));
	--segment-selected: light-dark(#ffffff, #636366);
	--card-shadow: 0 1px 2px light-dark(rgba(0, 0, 0, 0.05), transparent), 0 0 0 1px light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.04));
	/* Menus and popovers: dark surfaces need a stronger shadow and a faint edge to stand off the page. */
	--popover-shadow: 0 10px 30px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.6)), 0 0 0 1px light-dark(transparent, rgba(255, 255, 255, 0.08));
	--focus-ring: light-dark(rgba(10, 99, 201, 0.55), rgba(77, 159, 255, 0.6));
	--badge-bg: light-dark(#d70015, #e0262f);
	--badge-text: #ffffff;
	--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");

	--radius-card: 12px;
	--radius-control: 8px;
	--row-min-height: 2.875rem;
	--row-pad-x: 1rem;
	--row-pad-y: 0.55rem;
	/* The widest value box in a field row (and the value slot that holds it). */
	--value-max: 26rem;
	/* Full page width: the widest a field group card grows when groups stand in columns, and the gap between them. */
	--group-max: 46rem;
	--group-gap: 1.25rem;
	/* The width of a form or list card in the Centered page width (the Compact style sets 1024px). */
	--page-max: 64rem;
	/* Scrollbars (one shared look, see "Scrollbars" below): a slim bar that takes its own space, so it never covers rows. */
	--scrollbar-size: 0.75rem;
	--scrollbar-thumb: light-dark(rgba(60, 60, 67, 0.34), rgba(235, 235, 245, 0.3));
	--scrollbar-thumb-hover: light-dark(rgba(60, 60, 67, 0.55), rgba(235, 235, 245, 0.5));
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---- App shell ---- */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.4;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

/* Milestone 7 (owner 2026-10-16): a slim app bar above the content with the settings menu (hamburger). */
.app-bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 110rem;
	margin: 0 auto;
	padding: 0.5rem 1.25rem 0;
}
.app-bar-title { color: var(--text-2); font-size: 0.95rem; font-weight: 600; }
.settings-menu-button .icon { width: 1.25rem; height: 1.25rem; }
.settings-popover { min-width: 14rem; }
.settings-option { margin: 0; padding: 0; border: 0; }
.settings-option legend {
	padding: 0.35rem 0.65rem 0.3rem;
	color: var(--text-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.settings-choice {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.25rem;
	padding: 0.35rem 0.65rem;
	border-radius: 8px;
	font-size: 0.9rem;
	cursor: pointer;
}
.settings-choice:hover { background: var(--surface-hover); }
.settings-choice input[type=radio] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }

/* Milestone 7: record forms are centered at a readable width. This is the default "Centered" page width; the "Full" width
   (settings menu, owner 2026-10-17) is at the end of this file. Owner 2026-10-19: a list page uses the same width as a
   form page in Centered mode (its filters, group bar and table frame); a wider table scrolls inside its frame. */
main {
	max-width: 110rem;
	margin: 0 auto;
	padding: 1rem 1.25rem 3rem;
}
.form-page, .list-page { max-width: 64rem; margin-inline: auto; }

h1, h2, h3, h4 { margin: 0; }
p { margin: 0.5rem 0; }

.icon { flex: none; vertical-align: -0.15em; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

[role=alert] { color: var(--danger); }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Buttons ---- */

button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 2.25rem;
	padding: 0.4rem 0.85rem;
	border: 0;
	border-radius: var(--radius-control);
	background: var(--accent-tint);
	color: var(--accent);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
button:hover:not(:disabled) { background: var(--accent-tint-strong); }
button:disabled { opacity: 0.45; cursor: default; }
button .icon { width: 1.1em; height: 1.1em; }

/* Form and list headers: a compact toolbar of pill buttons with an icon and a label. */
.toolbar-button {
	border-radius: 999px;
	padding: 0.4rem 0.9rem 0.4rem 0.75rem;
	background: var(--surface);
	box-shadow: var(--card-shadow);
}
.toolbar-button:hover:not(:disabled) { background: var(--surface-hover); }
.toolbar-button.primary { background: var(--accent); color: var(--accent-text); }
.toolbar-button.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
.toolbar-button.danger { color: var(--danger); }
/* A toolbar command that is a real link (Open Parent): looks like the buttons. */
a.toolbar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 2.25rem;
	color: var(--accent);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}
a.toolbar-button .icon { width: 1.1em; height: 1.1em; }
.toolbar-button[aria-expanded="true"] { background: var(--accent-tint-strong); color: var(--accent); }

/* Milestone 7 (owner 2026-10-16): the Save button's count of the user's own unsaved changes, a small red badge after the
   label; on phones (icon-only toolbar) it sits on the icon's corner. */
.save-button { position: relative; }
.count-badge {
	display: inline-grid;
	place-items: center;
	min-width: 1.15rem;
	height: 1.15rem;
	margin-left: 0.1rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--badge-bg);
	color: var(--badge-text);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
/* D11 (owner 2026-10-18): the form is frozen while it saves. The fieldset only groups the form tab's content (no frame); while
   disabled its controls look disabled and the page shows a busy cursor. */
fieldset.form-freeze { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.form-freeze:disabled { opacity: 0.6; cursor: progress; }
fieldset.form-freeze:disabled * { cursor: progress; }
.form-page.form-saving .form-header { cursor: progress; }
/* D10 (owner 2026-10-18): a new record's badge says "New". */
.count-badge-text { font-size: 0.65rem; letter-spacing: 0.02em; }

/* A round icon-only button (the label is its aria-label and title). */
.icon-button {
	width: 2.25rem;
	min-width: 2.25rem;
	padding: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--text-2);
}
.icon-button:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }

/* A small pill button inside a field row (Choose…, Today, Clear). */
.chip-button {
	min-height: 2rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.875rem;
}
.picker-toggle .icon { width: 1em; height: 1em; }

/* ---- Inputs ---- */

input[type=text], input[type=search], input[type=date], input:not([type]), select, textarea {
	min-height: 2.25rem;
	padding: 0.4rem 0.65rem;
	border: 1px solid var(--separator);
	border-radius: var(--radius-control);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 0.95rem;
}
select {
	appearance: none;
	padding-right: 2rem;
	background-image: var(--select-chevron);
	background-repeat: no-repeat;
	background-position: right 0.55rem center;
}
input:focus, select:focus, textarea:focus {
	outline: 2px solid var(--focus-ring);
	outline-offset: 0;
	border-color: transparent;
}
input[readonly], textarea[readonly] { color: var(--text-2); }
input[type=checkbox] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }

.invalid { outline: 2px solid var(--danger) !important; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }
.validation-message { color: var(--danger); }

/* ---- Scrollbars (owner 2026-10-19: thick native horizontal bars covered chips and single table rows) ----
   One slim, themed bar for every scroll box (grids, related lists, pickers, menus, the page). Chromium and Safari use the
   ::-webkit-scrollbar pieces: a styled bar is always drawn in layout space, so the bar sits below the last row instead of
   floating over it (an overlay bar did, on Windows 11). Firefox has no such pseudo-element and gets the standard
   properties, which draw a thin classic bar. The two are split with @supports because in current Chromium the standard
   properties win and bring the overlay bar back. Boxes that hide their bar (.form-tabs, .shell-strip) say so with
   scrollbar-width: none and keep that. */
@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
	::-webkit-scrollbar-track { background: transparent; }
	::-webkit-scrollbar-corner { background: transparent; }
	::-webkit-scrollbar-thumb {
		border: 3px solid transparent;
		border-radius: 999px;
		background: var(--scrollbar-thumb);
		background-clip: content-box;
	}
	::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }
}
@supports not selector(::-webkit-scrollbar) {
	* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
}

/* ---- Workspace pages ---- */

.workspace-page { margin-bottom: 2.5rem; }
/* Milestone 5: a page opened from a list sits below its originating page, indented by its depth. */
.workspace-page-child {
	margin-left: calc(var(--page-depth, 1) * 1.25rem);
	padding-left: 1rem;
	border-left: 2px solid var(--separator);
}

.form-page, .record-list { position: relative; }
.form-page:focus, .record-list:focus, section[id^="list-"]:focus { outline: none; }

/* Header: icon, large title, subtitle with chips, then the toolbar. Sticky while the page scrolls past it. */
.form-header {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 0 -0.5rem;
	padding: 0.75rem 0.5rem;
	background: var(--bg-blur);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
}
.form-title { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1 1 18rem; }
.form-title-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 12px;
	background: var(--accent);
	color: var(--accent-text);
	font-size: 1.4rem;
}
.form-title-text { min-width: 0; }
.form-header h2 {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.list-header h2 { flex: 1 1 auto; }
.form-subtitle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin-top: 0.2rem;
	color: var(--text-2);
	font-size: 0.875rem;
}
.form-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }

.chip, .badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.12rem 0.55rem;
	border-radius: 999px;
	background: var(--accent-tint);
	color: var(--accent);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.badge { background: var(--segment-bg); color: var(--text-2); }
/* Owner 2026-10-18: a field whose editor is not built yet: a small neutral icon after its caption (no lock). */
.field-not-built { display: inline-flex; flex: none; align-items: center; padding: 0.15rem; border: 0; border-radius: 4px; background: none; color: var(--text-3); cursor: help; }
.field-not-built:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 1px; }
.field-not-built-note { color: var(--text-3); font-size: 0.8rem; font-weight: 400; }
.field-not-built .icon { width: 0.95rem; height: 0.95rem; }

/* Form-level status, messages and prompts. */
.form-operation {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-2);
	font-size: 0.9rem;
}
.form-message {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0.5rem 0;
	padding: 0.65rem 0.85rem;
	border-radius: 10px;
	background: var(--danger-tint);
	color: var(--danger);
	font-size: 0.925rem;
}
.form-message .icon { margin-top: 0.15em; }
/* NOT IN DESKTOP ND-017: row-derived notices (IRecordRule.Notices), styled by severity; errors keep .form-message. */
.form-notice-warning { background: var(--warning-tint); color: var(--warning); }
.form-notice-info { background: var(--accent-tint); color: var(--text-1, inherit); }
/* NOT IN DESKTOP ND-036: the workspace banner's notice text and its detail lines. */
.workspace-notice-text { flex: 1; min-width: 0; }
.workspace-notice-details { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.form-prompt {
	margin: 1rem 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--accent);
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.form-prompt h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.form-prompt label { display: block; margin-top: 0.75rem; color: var(--text-2); font-size: 0.875rem; }
.form-prompt textarea, .form-prompt input[type=text], .form-prompt select { width: 100%; }
.form-prompt-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.section-title {
	margin: 1.25rem var(--row-pad-x) 0.4rem;
	color: var(--text-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Form tabs: a segmented control that scrolls sideways when it does not fit. */
.form-tabs-wrap { position: relative; width: fit-content; max-width: 100%; margin: 0.75rem 0 0.25rem; }
.form-tabs {
	display: flex;
	gap: 2px;
	width: fit-content;
	max-width: 100%;
	padding: 3px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent 100%);
	overflow-x: auto;
	border-radius: 10px;
	background: var(--segment-bg);
	scrollbar-width: none;
}
.form-tabs button {
	flex: none;
	min-height: 2rem;
	padding: 0.3rem 0.85rem;
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	font-size: 0.875rem;
	white-space: nowrap;
}
.form-tabs button:hover:not(:disabled) { background: var(--surface-hover); }
.form-tabs button[aria-selected="true"] {
	background: var(--segment-selected);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
	font-weight: 600;
}
.form-tabs button .icon { color: var(--text-2); }
.form-tabs button[aria-selected="true"] .icon { color: var(--accent); }

/* ---- Field groups: inset cards ---- */

.form-fields { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1rem; }
.form-record-type { margin-top: 0.75rem; }

fieldset.field-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.field-group-header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0 var(--row-pad-x) 0.4rem;
	color: var(--text-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.field-group-header .icon { width: 1.15rem; height: 1.15rem; color: var(--accent); }
/* Milestone 9: a group toggle (desktop FieldGroupToggleBinder) sits at the end of its group header. */
.field-group-header .field-group-toggle { margin-left: auto; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.field-group-body {
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: var(--card-shadow);
}

/* A sub-heading inside a card (MDFields.SubHeading). */
.field-subheading {
	padding: 0.9rem var(--row-pad-x) 0.3rem;
	color: var(--text-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.field-group-body > .field-subheading:not(:first-child) { border-top: 1px solid var(--separator); }

/* ---- Field rows: caption left, value right ----
   Milestone 7 (owner 2026-10-16): the value column holds a slot at the card's right edge (as wide as the boxes, --value-max at
   most) and everything in it starts at its left: text in boxes, selects, pickers, read-only values, flags. Numeric fields
   whose desktop editor is right-aligned (.field-numeric, Core ValueAlignment) keep their value on the right. */

.field {
	position: relative;
	display: grid;
	grid-template-columns: minmax(8rem, 2fr) minmax(0, 3fr);
	align-items: center;
	column-gap: 1rem;
	min-height: var(--row-min-height);
	padding: var(--row-pad-y) var(--row-pad-x);
}
/* Hairline separators inset from the left edge, as in a grouped list. */
.field-group-body > .field + .field::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--row-pad-x);
	right: 0;
	border-top: 1px solid var(--separator);
}

.field-caption {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	color: var(--text);
	font-size: 0.95rem;
	overflow-wrap: anywhere;
}
/* The caption column: the label, then (ND-023) a changed field's revert button, outside the label so a caption click
   never reverts. */
.field-caption-cell { display: flex; align-items: center; gap: 0.2rem; min-width: 0; }
.field-caption-cell > .field-caption { min-width: 0; }
.field-revert { width: 1.75rem; min-width: 1.75rem; min-height: 1.75rem; color: var(--accent); }
.field-revert:hover:not(:disabled) { background: var(--accent-tint); color: var(--accent); }
/* desktop _FieldBase.cs:732-734: required and recommended captions are bold. */
.field-required .field-caption-text { font-weight: 600; }

.field-value {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	justify-self: end;
	gap: 0.4rem;
	width: 100%;
	max-width: var(--value-max);
	min-width: 0;
	text-align: left;
}
.field-value .value { color: var(--text-2); overflow-wrap: anywhere; }
/* A read-only value fills the slot (a lock icon then sits at its right end) and its text lines up with the text in boxes. */
.field-value > .value { flex: 1 1 auto; }
.field-group-body .field-value > .value,
.field-group-body .picker-value > .value { padding-inline: 0.65rem; }
.field-numeric .field-value > .value,
.field-numeric .field-value input[type=text] { text-align: right; font-variant-numeric: tabular-nums; }
.field-value .value-text { white-space: pre-wrap; }
.field-value .value strong { color: var(--text); font-weight: 600; }
.value-unsupported { color: var(--text-3); font-style: italic; }
.field-lock { width: 0.95rem; height: 0.95rem; color: var(--text-3); }

/* Editors inside a row: filled, borderless controls whose text starts at the left (owner 2026-10-16). */
.field-value input[type=text], .field-value input[type=search], .field-value select, .field-value textarea {
	flex: 1 1 12rem;
	width: 100%;
	max-width: var(--value-max);
	border-color: transparent;
	background-color: var(--surface-2);
}
.field-value input[type=date] { border-color: transparent; background-color: var(--surface-2); }
.field-value textarea { resize: vertical; min-height: 6rem; max-width: none; text-align: left; line-height: 1.45; }
/* desktop FieldSQLEditor: a fixed-width code box (CodeValue), editable or read-only. */
.field-value textarea.code-text, .value.code-text { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 0.85rem; white-space: pre; overflow-x: auto; }
.value.code-text { display: block; max-height: 24rem; overflow: auto; }

/* A flag (FieldTrueFalse) is drawn as a switch; it is still a checkbox for keyboard and assistive technology. */
.field-value > input[type=checkbox] {
	appearance: none;
	position: relative;
	flex: none;
	width: 3rem;
	height: 1.8rem;
	margin: 0;
	border-radius: 999px;
	background: var(--switch-off);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.field-value > input[type=checkbox]::before {
	content: "";
	position: absolute;
	top: 0.15rem;
	left: 0.15rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease;
}
.field-value > input[type=checkbox]:checked { background: var(--success); }
.field-value > input[type=checkbox]:checked::before { transform: translateX(1.2rem); }
.field-value > input[type=checkbox]:disabled { opacity: 0.5; cursor: default; }
.field-value > input[type=checkbox] + span { color: var(--text-2); font-size: 0.9rem; }

/* Wide rows: memo and code fields put the editor under the caption at full width. The picker editors open their lists in a
   popover (PickerPopover), so their rows keep their width. */
.field-wide {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0.4rem;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}
.field-wide > .field-value { justify-content: flex-start; justify-self: stretch; max-width: none; text-align: left; }
.field-wide .input-shell { max-width: none; }
.field-wide .field-value input[type=text],
.field-wide .field-value textarea { max-width: none; text-align: left; }

/* NOT IN DESKTOP ND-006 marker (checkpoint 4b), drawn as a dot before the caption; the text stays for assistive technology. */
.field-changed-marker {
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--accent);
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

/* Errors: a tinted row with helper text; ND-007 hints: quieter helper text only. */
.field-error { background: var(--danger-tint); }
.field-error .field-caption { color: var(--danger); }
.field-message, .field-hint {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	line-height: 1.35;
}
.field-message { color: var(--danger); }
.field-hint { color: var(--warning); }
.field-message .icon, .field-hint .icon { margin-top: 0.1em; }

/* ---- Editors ---- */

/* Milestone 7 (owner, 2026-10-15): an editor with trailing buttons (clear, choose, day nudges) draws one box that holds
   its text and the buttons at its right edge, like a phone search field, so every box in a card has the same width and
   right edge. The inner controls are transparent; the box shows the focus ring while its text has focus. */
.input-shell {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.15rem;
	flex: 1 1 12rem;
	width: 100%;
	max-width: var(--value-max);
	min-width: 0;
	min-height: 2.25rem;
	padding-right: 0.25rem;
	border-radius: var(--radius-control);
	background-color: var(--surface-2);
}
.input-shell:has(input:focus) { outline: 2px solid var(--focus-ring); }
.field-value .input-shell > input[type=text],
.field-value .input-shell > input[type=search],
.field-value .input-shell > input[type=date] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: none;
	border: 0;
	background: transparent;
}
.field-value .input-shell > input[type=date] { flex: 0 1 auto; padding-right: 0.25rem; }
.input-shell > input:focus { outline: none; }
.input-shell > .value { flex: 1 1 auto; justify-content: flex-start; min-width: 0; padding: 0.35rem 0.4rem 0.35rem 0.65rem; color: var(--text); }
.input-shell > button { flex: none; }
.input-shell > .icon-button { width: 1.85rem; min-width: 1.85rem; min-height: 1.85rem; }
.input-shell > .chip-button { min-height: 1.75rem; padding: 0.15rem 0.6rem; font-size: 0.8rem; }
.picker-value { display: contents; }

.picker, .multi-select {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: inherit;
	gap: 0.4rem;
	width: 100%;
}
/* The list filters' inline value list (ListFilterRow). */
.multi-select-list {
	flex-basis: 100%;
	max-height: 18rem;
	overflow: auto;
	padding: 0.5rem;
	border: 1px solid var(--separator);
	border-radius: 10px;
	background: var(--surface);
	text-align: left;
}
.multi-select-list > input[type=search] { width: 100%; max-width: none; margin-bottom: 0.35rem; text-align: left; }
/* The UUID picker's drop-down (PickerValue): a popover in the top layer, so no row widens or moves while it is open. It holds
   desktop's UUIDPickerDropDown: a labelled criteria box per field (caption at the left), the results grid with a header
   row when it has more than one column, and one footer line for desktop's truncation note (lblTruncate) or an error.
   desktop sizes its drop-down once when it opens (UUIDPickerBase.OnSetDropDownSize: at least 400 px or the picker's width,
   about half the screen high); here every part has a fixed height, so the drop-down keeps one height from the moment it
   opens whatever the result count, and does not scroll: DD-074, the grid shows exactly --picker-rows rows (the page size,
   PickerCriteria.PageSize) instead of desktop's scrolling list (register 9.3). Only a window too low for that height
   shrinks it (max-height): the result rows give way and scroll, and the boxes and the footer stay visible. Long cells end
   with an ellipsis; the cell's text is its tooltip; desktop's number columns are right-aligned. The width grows with the
   grid's columns. */
.picker-popover {
	--picker-line: 2rem;
	--picker-row: 1.75rem;
	flex-direction: column;
	gap: 0.35rem;
	width: max(25rem, calc(var(--picker-columns, 1) * 9rem));
	max-width: calc(100vw - 1rem);
	max-height: calc(100dvh - 1rem);
	padding: 0.5rem;
	border: 1px solid var(--separator);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--popover-shadow);
	overflow: hidden;
	text-align: left;
}
.picker-popover:popover-open { display: flex; }
/* Placement, decided when it opens and kept while typing (the size never changes): under the box, above it, either one
   aligned to the box's right edge (desktop Popup.ShowSmartPlacement); last, centered inside the screen, the one placement
   where a window lower than the drop-down shrinks its result rows. Browsers without position-area center it (the
   browser's popover default). */
@supports (position-area: block-end) {
	.picker-popover {
		inset: auto;
		margin: 0.25rem 0 0;
		position-area: block-end span-inline-end;
		width: max(25rem, anchor-size(width), calc(var(--picker-columns, 1) * 9rem));
		position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline, --picker-popover-screen;
	}
}
@position-try --picker-popover-screen {
	position-area: none;
	inset: 0.5rem;
	margin: auto;
	max-height: calc(100dvh - 1rem);
}
.picker-popover-header { display: none; }
.picker-criteria {
	display: grid;
	flex: none;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: center;
	gap: 0.25rem 0.6rem;
}
.picker-criterion { display: contents; }
.picker-criterion > span { color: var(--text-2); font-size: 0.85rem; font-weight: 600; }
.field-value .picker-criterion > input[type=search] {
	flex: none;
	width: 100%;
	max-width: none;
	height: var(--picker-line);
	min-height: var(--picker-line);
	text-align: left;
}
/* The grid and its rows keep their height (flex-basis) and give way only to the popover's max-height. */
.picker-grid { display: flex; flex: 0 1 auto; flex-direction: column; min-height: 0; }
.picker-grid-head, .picker-grid-row {
	display: grid;
	grid-template-columns: repeat(var(--picker-columns, 1), minmax(0, 1fr));
	align-items: center;
	column-gap: 0.6rem;
	height: var(--picker-row);
	padding: 0 0.5rem;
}
.picker-grid-head { flex: none; border-bottom: 1px solid var(--separator); color: var(--text-2); font-size: 0.8rem; font-weight: 600; }
.picker-grid-head > span, .picker-grid-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-grid-head > .picker-cell-number, .picker-grid-row > .picker-cell-number { text-align: right; }
/* Exactly --picker-rows rows high; it scrolls only when the window cannot hold the drop-down. */
.picker-grid-rows {
	flex: 0 1 auto;
	height: calc(var(--picker-rows, 10) * var(--picker-row));
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
}
.picker-grid-rows li { margin: 0; }
.picker-grid-row {
	width: 100%;
	min-height: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--text);
	font-size: 0.9rem;
	font-weight: 400;
	text-align: left;
}
/* Above the generic button:hover:not(:disabled) (accent tint). */
.picker-grid-rows .picker-grid-row:hover:not(:disabled) { background: var(--surface-hover); }
.picker-popover-note {
	flex: none;
	height: var(--picker-row);
	margin: 0;
	padding: 0 0.5rem;
	overflow: hidden;
	color: var(--text-2);
	font-size: 0.85rem;
	line-height: var(--picker-row);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.picker-popover-note[role=alert] { color: var(--danger); }
/* The list editors' drop-downs (IdCaptionValue, IdCaptionListValue, MultiSelectValue, DepartmentValue): the filter box (and
   the department toolbar) above a list that scrolls inside the drop-down's one fixed height, as desktop's lists do in a
   drop-down sized once when it opens (BaseCombo.OnSetDropDownSize: about half the screen). The contact list's drop-down
   (RecordListValue, desktop ContactPickerDropDown) is the UUID picker's layout; its RecordPickerMaxRows rows scroll inside
   the --picker-rows rows. */
.picker-popover-list { height: 28rem; }
/* An editor that draws its list only while open (PickerPopover DrawsWhenOpen) is told of the open before the first paint;
   until its contents are there (only the phone header is), the panel is not painted, so no empty panel flashes. */
.picker-popover:not(:has(> :nth-child(2))) { visibility: hidden; }
.field-value .picker-popover input.picker-filter {
	flex: none;
	width: 100%;
	max-width: none;
	height: var(--picker-line);
	min-height: var(--picker-line);
	text-align: left;
}
.picker-choices { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; text-align: left; }
.picker-choices li { margin: 0; }
.picker-choices button.selected { font-weight: 700; color: var(--accent); }
/* Phones: the same popover is a full-screen sheet: the field's caption and Done at the top, the criteria boxes stacked with
   their labels above them, then the results. The sheet scrolls as a whole, so on a low screen (a phone on its side, the
   five boxes of the rate sheet picker) the results stay reachable under the boxes; the caption and Done stay at the top.
   A result is a card of its column values (the first one first); rows and buttons are at least 44 px high, and the 16 px
   box text keeps iOS from zooming. */
@media (max-width: 600px) {
	.picker-popover {
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100dvh;
		max-height: none;
		margin: 0;
		padding: 0 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow-y: auto;
		position-area: none;
		position-try-fallbacks: none;
	}
	.picker-popover-header {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 1;
		flex: none;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		padding-top: 0.5rem;
		background: var(--surface);
	}
	.picker-popover-title { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
	.picker-popover-header .chip-button { min-height: 2.75rem; }
	.picker-criteria { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
	.picker-criterion { display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; }
	.field-value .picker-criterion > input[type=search] { height: 2.75rem; min-height: 2.75rem; font-size: 1rem; }
	.picker-popover .picker-grid { flex: none; }
	.picker-popover .picker-grid-head { display: none; }
	.picker-popover .picker-grid-rows { flex: none; height: auto; overflow: visible; }
	.picker-popover .picker-grid-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0.1rem;
		height: auto;
		min-height: 2.75rem;
		padding: 0.35rem 0.5rem;
	}
	.picker-popover .picker-grid-row > span { max-width: 100%; }
	.picker-popover .picker-grid-row > span + span { color: var(--text-2); font-size: 0.8rem; }
	.picker-popover .picker-choices { flex: none; overflow: visible; }
	.picker-popover .picker-choices li > button,
	.picker-popover .multi-select-choice,
	.picker-popover .department-toolbar button { min-height: 2.75rem; }
	.field-value .picker-popover input.picker-filter { height: 2.75rem; min-height: 2.75rem; font-size: 1rem; }
	.picker-popover-note { height: auto; min-height: 1.5rem; line-height: 1.5rem; white-space: normal; }
}
/* Milestone 9 (Jobs): record lists (FieldContactList, the client PO list) and the decimal box's suffix. */
/* The editor has its own class (owner 2026-10-19): it used to share .record-list with the list page section, whose parts
   then became flex items, so the group bar could sit beside the table instead of above it. */
.record-list-value { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; width: 100%; }
.record-list-items { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.record-list-items .chip { display: inline-flex; align-items: center; gap: 0.25rem; }
.number-box { display: inline-flex; align-items: center; gap: 0.35rem; }
.number-suffix { color: var(--text-2); }
.picker-choices li > button, .department-tree li button {
	justify-content: flex-start;
	width: 100%;
	min-height: 2.25rem;
	padding: 0.35rem 0.6rem;
	background: transparent;
	color: var(--text);
	font-weight: 400;
	text-align: left;
}
.picker-choices li > button:hover:not(:disabled) { background: var(--surface-hover); }
.multi-select .chip { font-weight: 500; }
.multi-select .value { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-start; }
.multi-select-choice { display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0 0.35rem; border-radius: 6px; }
.multi-select-choice:hover { background: var(--surface-hover); }
/* FieldIDCaptionList (owner decision 2026-10-16): "ID – Caption" chips with a remove button, in the multi-select layout. */
.id-caption-list .chip, .record-list-picker .chip { display: inline-flex; align-items: center; gap: 0.25rem; }
.id-caption-list .chip > .icon-button, .record-list-picker .chip > .icon-button { width: 1.35rem; min-width: 1.35rem; min-height: 1.35rem; margin-right: -0.25rem; }

.value-state { color: var(--text); font-weight: 600; }
.field-value > .state-transitions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.4rem;
	flex-basis: 100%;
	margin-top: 0.15rem;
}
.state-transitions button { border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.875rem; }
.state-transitions button::before {
	content: "";
	width: 0.9em;
	height: 0.9em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field-value > label { color: var(--text-2); font-size: 0.85rem; }
.field-value > p { flex-basis: 100%; margin: 0.2rem 0 0; color: var(--text-2); font-size: 0.85rem; }

.date-value { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.25rem; width: 100%; }
.date-shell .icon-button { width: 1.75rem; min-width: 1.75rem; }
/* The calendar input repeats the typed date: inside the box it shows only its calendar button until it has focus, when it
   widens to show its own date segments for keyboard entry. */
.field-value .date-shell > input[type=date] { flex: none; width: 2.1rem; padding: 0 0.25rem; color: transparent; }
.field-value .date-shell > input[type=date]:focus { width: 9.5rem; color: var(--text); }
.date-shell .chip-button { min-height: 1.75rem; padding: 0.15rem 0.6rem; font-size: 0.8rem; }
/* The day name sits on its own line under the box, so the box keeps the card's right edge. */
.date-value > .date-day { flex-basis: 100%; padding-inline: 0.65rem; text-align: left; }
.date-day { color: var(--text-2); font-size: 0.8rem; }

/* Milestone 6 checkpoint 5: the department tree (FieldIDepartment). */
.department-tree ul { list-style: none; padding-left: 1rem; margin: 0; }
.department-tree .picker-choices { padding-left: 0; }
.department-toolbar { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-bottom: 0.4rem; }
.department-toolbar button { min-height: 2rem; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.85rem; }
.department-toolbar label { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-2); font-size: 0.85rem; }
.department-tree button.selected { font-weight: 700; color: var(--accent); }

/* ---- Changes panel (NOT IN DESKTOP ND-008, checkpoint 4b): owner 2026-10-16, an inline card at the top of the form,
   below the toolbar, shown while the toolbar's Changes button has it open ---- */

.form-changes {
	margin: 0.5rem 0 0.75rem;
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: var(--card-shadow);
}
.form-changes-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--row-min-height);
	padding: 0.6rem var(--row-pad-x);
	font-size: 1rem;
	font-weight: 600;
}
.changes-icon {
	display: grid;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.35rem;
	border-radius: 8px;
	background: var(--accent);
	color: var(--accent-text);
}
.changes-summary-text { flex: 1 1 auto; }
/* ND-023: each changed field's revert button at the end of its row. */
.changes-list li > .changes-revert { align-self: center; width: 1.85rem; min-width: 1.85rem; min-height: 1.85rem; margin: -0.3rem 0 -0.3rem auto; }
.changes-revert .icon, .field-revert .icon { width: 1rem; height: 1rem; }
.form-changes h4 {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.75rem var(--row-pad-x) 0.25rem;
	color: var(--text-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.changes-list { margin: 0; padding: 0 0 0.25rem; list-style: none; }
.changes-list .changes-list { padding-left: 1rem; }
.changes-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.45rem;
	padding: 0.55rem var(--row-pad-x);
	border-top: 1px solid var(--separator);
}
.changes-list li li { padding-left: 0; padding-right: 0; }
.changes-field {
	min-height: 0;
	padding: 0;
	background: none;
	color: var(--accent);
	font-weight: 600;
}
.changes-field:hover:not(:disabled) { background: none; text-decoration: underline; }
.changes-old { color: var(--text-2); text-decoration: line-through; overflow-wrap: anywhere; }
.changes-arrow, .changes-kind { color: var(--text-3); }
.changes-new { color: var(--text); overflow-wrap: anywhere; }
.changes-conflict {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--danger-tint);
	color: var(--danger);
	font-size: 0.8rem;
	font-weight: 600;
}
.changes-conflicting { background: var(--danger-tint); }
/* D10: the line counting changes to fields the form does not show. */
.changes-hidden { color: var(--text-2); font-style: italic; }
.changes-note { margin: 0.25rem var(--row-pad-x) 0.85rem; color: var(--text-2); font-size: 0.85rem; }

/* ---- Lists ---- */

.list-note { color: var(--text-2); }
/* Editable child rows render FieldView inside grid cells: caption above a left-aligned editor. */
.record-grid td .field { grid-template-columns: minmax(0, 1fr); row-gap: 0.2rem; min-height: 0; padding: 0; background: none; }
.record-grid td .field-caption { color: var(--text-2); font-size: 0.75rem; }
.record-grid td .field-value { justify-content: flex-start; justify-self: stretch; max-width: none; text-align: left; }
.record-grid td .field-value input[type=text], .record-grid td .field-value select { max-width: none; text-align: left; text-align-last: left; }

/* ---- Arranged list grids (milestone 7, owner 2026-10-15): group bar, column menus, sticky header and key column,
   grouped virtualized rows, the Columns panel, and card rows on phones ---- */

.list-count { justify-content: flex-start; gap: 0.4rem; }
.list-count span { display: inline-flex; align-items: center; gap: 0.35rem; }
.list-truncated { color: var(--warning); font-weight: 600; }
.list-empty { color: var(--text-2); }

/* The group bar sits on top of the column headers, like desktop's group panel. */
.group-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.75rem;
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	background: var(--surface);
	box-shadow: var(--card-shadow);
	border-bottom: 1px solid var(--separator);
}
/* The list's Columns button opens the bar, before the grouping, which wraps on its own after a divider. */
.group-bar-columns {
	min-height: 1.9rem;
	padding: 0.2rem 0.7rem 0.2rem 0.55rem;
	border-radius: 999px;
	background: transparent;
	font-size: 0.875rem;
}
.group-bar-columns:hover:not(:disabled) { background: var(--accent-tint); }
.group-bar-columns[aria-expanded="true"] { background: var(--accent-tint-strong); }
.group-bar-groups {
	display: flex;
	flex: 1 1 12rem;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
}
.group-bar-columns + .group-bar-groups { padding-left: 0.6rem; border-left: 1px solid var(--separator); }
.group-bar-icon { color: var(--accent); width: 1.1rem; height: 1.1rem; }
.group-bar-hint { color: var(--text-3); font-size: 0.875rem; }
.group-sep { color: var(--text-3); font-size: 1.1rem; }
.group-chip {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--accent-tint);
}
.group-chip-label {
	min-height: 1.9rem;
	padding: 0.2rem 0.4rem 0.2rem 0.75rem;
	border-radius: 999px 0 0 999px;
	background: transparent;
	font-size: 0.85rem;
	font-weight: 600;
}
.group-chip-label .icon { width: 0.95em; height: 0.95em; }
.group-chip .group-chip-remove { width: 1.9rem; min-width: 1.9rem; min-height: 1.9rem; color: var(--accent); border-radius: 0 999px 999px 0; }

/* Column and group menus are popovers in the top layer (not clipped by the grid's scroll box), anchored to their button
   where the browser supports anchor positioning; otherwise the browser centers them. */
.grid-menu {
	margin: 0;
	padding: 0.3rem;
	min-width: 13rem;
	border: 1px solid var(--separator);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--popover-shadow);
	inset: auto;
	top: anchor(bottom);
	left: anchor(left);
	position-try-fallbacks: flip-block, flip-inline;
	margin-top: 0.25rem;
}
.grid-menu button {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	gap: 0.6rem;
	min-height: 2.25rem;
	padding: 0.4rem 0.65rem;
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	font-size: 0.9rem;
	font-weight: 400;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
}
.grid-menu button:hover:not(:disabled) { background: var(--surface-hover); }
.grid-menu button .icon { color: var(--text-2); }

/* The scroll box: the grid scrolls both ways inside it, so the header (top) and key column (left) can stay. */
.record-list .record-grid-scroll.arranged {
	max-height: min(70vh, 48rem);
	/* Room for the column header, one group header, one row and the slim bar, so a one-row list is never cut or covered. */
	min-height: calc(3 * 2.625rem + var(--scrollbar-size));
	overflow: auto;
	border-radius: 0 0 var(--radius-card) var(--radius-card);
	box-shadow: var(--card-shadow);
	background: var(--surface);
}
.record-list .record-grid.arranged { --grid-row: 2.625rem; --lead: 2.75rem; table-layout: auto; }
/* The floating group header sits in the scroll box, outside the table, and uses the same line height. */
.record-list .record-grid-scroll.arranged { --grid-row: 2.625rem; }
.record-list .record-grid.arranged th,
.record-list .record-grid.arranged td { height: var(--grid-row); padding-top: 0; padding-bottom: 0; vertical-align: middle; }
.record-list .record-grid.arranged thead th {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--surface);
	box-shadow: inset 0 -1px 0 var(--separator);
}
.record-list .record-grid.arranged .sticky-col {
	position: sticky;
	z-index: 2;
	background: var(--surface);
}
.record-list .record-grid.arranged thead th.sticky-col { z-index: 6; }
.record-list .record-grid.arranged .cell-select,
.record-list .record-grid.arranged .cell-open { width: var(--lead); min-width: var(--lead); max-width: var(--lead); padding: 0 0.4rem; text-align: center; }
.record-list .record-grid.arranged .key-col { box-shadow: inset -1px 0 0 var(--separator); font-weight: 600; }
.record-list .record-grid.arranged thead th.key-col { box-shadow: inset -1px -1px 0 var(--separator); }
.record-list .record-grid.arranged tr.data-row:hover td { background: var(--surface-hover); }
.record-list .record-grid.arranged tr.selected td { background: var(--accent-tint); }
.record-list .record-grid.arranged tr.selected td.sticky-col { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.record-list .record-grid.arranged .cell-card { display: none; }
.th-inner { display: inline-flex; align-items: center; gap: 0.1rem; }
.th-menu { width: 1.75rem; min-width: 1.75rem; min-height: 1.75rem; color: var(--text-3); }
.th-menu:hover:not(:disabled) { color: var(--text); }

/* Group headers: uppercase section style, nested by level, sticky under the column header while their rows scroll. */
.record-list .record-grid.arranged td.group-cell {
	position: sticky;
	top: calc(var(--grid-row) * (var(--group-level) + 1));
	/* Above the sticky key column, so rows scroll under a stuck group header; below the column header. */
	z-index: 4;
	padding: 0;
	background: var(--bg);
	box-shadow: inset 0 -1px 0 var(--separator);
}
.group-head { position: sticky; left: 0; display: inline-flex; padding-left: calc(0.5rem + var(--group-level) * 1.25rem); }
.group-toggle {
	min-height: calc(var(--grid-row) - 0.25rem);
	padding: 0 0.5rem;
	background: transparent;
	color: var(--text-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}
.group-toggle:hover:not(:disabled) { background: transparent; color: var(--text); }
.group-toggle .icon { color: var(--accent); }

/* The floating group header (milestone 7, owner 2026-10-18, ListGroupFloat.razor): one bar pinned where the outermost
   group header sticks, showing the top line's group path while the real headers are not rendered (Virtualize). It looks
   like a group header; it sits above the sticky key column and under the real group headers, so the next group's header
   slides over it as on the stuck headers. The sticky holder has no height; the bar hangs from it. */
.record-list .group-float { position: sticky; top: var(--grid-row); left: 0; z-index: 3; height: 0; }
.group-float-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	height: calc(var(--grid-row) * var(--float-levels, 1));
	overflow: hidden;
	background: var(--bg);
	box-shadow: inset 0 -1px 0 var(--separator);
}
/* A span styled as the real headers' text, without their button; a long path ends in an ellipsis (phones) while the
   count stays visible. */
.group-float .group-head { position: static; display: flex; min-width: 0; max-width: 100%; }
.group-float .group-toggle { display: flex; align-items: center; gap: 0.35rem; min-width: 0; overflow: hidden; line-height: 1.2; cursor: default; }
.group-float .group-toggle .icon { flex: none; width: 1.1em; height: 1.1em; }
.group-float-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.group-float-count { flex: none; }
.group-float-sep { margin: 0 0.35rem; color: var(--text-3); }

/* The Columns panel: a card under the toolbar, two sections side by side on wide screens. */
.columns-panel {
	margin: 0 0 0.75rem;
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: var(--card-shadow);
}
.columns-panel-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem 0.6rem var(--row-pad-x);
	border-bottom: 1px solid var(--separator);
}
.columns-panel-header h3 { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: auto; font-size: 1rem; }
.columns-panel-header h3 .icon { color: var(--accent); }
.columns-panel-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.columns-panel-section { padding: 0.5rem 0 0.75rem; }
.columns-panel-section + .columns-panel-section { border-left: 1px solid var(--separator); }
.columns-panel-section h4 {
	margin: 0.25rem var(--row-pad-x) 0.35rem;
	color: var(--text-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.columns-list { margin: 0; padding: 0; list-style: none; max-height: 22rem; overflow: auto; }
.columns-row {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 2.6rem;
	padding: 0 0.5rem 0 var(--row-pad-x);
	border-top: 1px solid var(--separator);
}
.columns-row:first-child { border-top: 0; }
.columns-toggle { display: flex; flex: 1 1 auto; align-items: center; gap: 0.6rem; min-width: 0; cursor: pointer; }
.columns-toggle span, .columns-level { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.columns-row select { min-height: 2rem; font-size: 0.85rem; }
.columns-add { border-top: 1px solid var(--separator); padding-top: 0.5rem; }
.columns-add select { flex: 1 1 auto; }
.columns-hint { margin: 0 var(--row-pad-x) 0.4rem; color: var(--text-3); font-size: 0.875rem; }
input[type=checkbox].switch {
	appearance: none;
	position: relative;
	flex: none;
	width: 2.6rem;
	height: 1.55rem;
	margin: 0;
	border-radius: 999px;
	background: var(--switch-off);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
input[type=checkbox].switch::before {
	content: "";
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease;
}
input[type=checkbox].switch:checked { background: var(--success); }
input[type=checkbox].switch:checked::before { transform: translateX(1.05rem); }
input[type=checkbox].switch:disabled { opacity: 0.5; cursor: default; }

/* Phones: each row is a settings-style card (main line, a second line of the next columns, the state or date at the
   right); group headers stay; the column header is hidden (the Columns panel and group bar remain). */
@media (max-width: 600px) {
	.columns-panel-section + .columns-panel-section { border-left: 0; border-top: 1px solid var(--separator); }
	.record-list .record-grid-scroll.arranged { max-height: none; overflow: visible; }
	.record-list .record-grid.arranged, .record-list .record-grid.arranged tbody { display: block; width: 100%; }
	.record-list .record-grid.arranged thead { display: none; }
	.record-list .record-grid.arranged tr.data-row {
		display: grid;
		grid-template-columns: 2rem minmax(0, 1fr) auto 2.25rem;
		grid-template-areas: "select primary trailing open" "select card card open";
		align-items: center;
		column-gap: 0.5rem;
		padding: 0.55rem 0.5rem 0.55rem 0.75rem;
		border-bottom: 1px solid var(--separator);
	}
	.record-list .record-grid.arranged tr.data-row td { display: block; height: auto; padding: 0; border: 0; max-width: none; position: static; background: transparent; box-shadow: none; }
	.record-list .record-grid.arranged tr.data-row td.cell-select { grid-area: select; width: auto; min-width: 0; text-align: left; }
	.record-list .record-grid.arranged tr.data-row td.cell-open { grid-area: open; width: auto; min-width: 0; }
	.record-list .record-grid.arranged tr.data-row td.cell-primary { grid-area: primary; font-size: 1rem; }
	.record-list .record-grid.arranged tr.data-row td.cell-trailing {
		grid-area: trailing;
		padding: 0.1rem 0.55rem;
		border-radius: 999px;
		background: var(--accent-tint);
		color: var(--accent);
		font-size: 0.8rem;
		font-weight: 600;
	}
	.record-list .record-grid.arranged tr.data-row td.cell-trailing:empty { display: none; }
	.record-list .record-grid.arranged tr.data-row td.cell-secondary { display: none; }
	.record-list .record-grid.arranged tr.data-row td.cell-card { display: block; grid-area: card; color: var(--text-2); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	/* The row is the sticky element on phones: a sticky cell cannot leave its block row, while the row sticks within the
	   block body for the whole list (the row carries --group-level for this). */
	.record-list .record-grid.arranged tr.group-row { display: block; position: sticky; top: calc(var(--grid-row) * var(--group-level)); z-index: 4; }
	.record-list .record-grid.arranged tr.group-row td.group-cell { display: block; position: static; height: auto; min-height: var(--grid-row); }
	/* No column header on phones: the floating group header pins to the top of the page, like the outermost header. */
	.record-list .group-float { top: 0; }
}

/* ---- Narrow screens: rows stack, the toolbar shows icons only ---- */

@media (max-width: 600px) {
	main { padding: 0.5rem 0.75rem 2rem; }
	/* The two-line header would cover too much of a phone screen; it scrolls away instead. */
	.form-header { position: static; }
	.workspace-page-child { margin-left: calc(var(--page-depth, 1) * 0.5rem); padding-left: 0.5rem; }
	.form-header h2 { font-size: 1.3rem; }
	.form-title { flex-basis: 100%; }
	.form-buttons { margin-left: 0; }
	.toolbar-button { width: 2.5rem; min-width: 2.5rem; height: 2.5rem; padding: 0; }
	.toolbar-button .count-badge { position: absolute; top: -0.3rem; right: -0.3rem; margin: 0; box-shadow: 0 0 0 2px var(--bg); }
	.app-bar { padding: 0.35rem 0.75rem 0; }
	.toolbar-button .button-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	.field { grid-template-columns: minmax(0, 1fr); row-gap: 0.35rem; padding-top: 0.65rem; padding-bottom: 0.65rem; }
	.field-value { justify-content: flex-start; justify-self: stretch; max-width: none; text-align: left; }
	.field-value input[type=text], .field-value input[type=search], .field-value select { max-width: none; text-align: left; text-align-last: left; }
	.field-value > .state-transitions, .date-value { justify-content: flex-start; }
	.input-shell { max-width: none; }
	.input-shell > .value, .date-value > .date-day { text-align: left; }
	.multi-select .value { justify-content: flex-start; }
	.field-value > input[type=checkbox] + span { order: 0; }
}

/* ---- Compact display style (milestone 7, owner 2026-10-16; settings menu, DisplayStyleStore) ----
   The same UI at about Pangea desktop's density: desktop forms and lists use Segoe UI 10pt (13.3px; StandardUI.Font,
   TableGrid.Designer.cs:177), field captions Segoe UI Semibold 10.5pt (StandardUI.FontField), 2px field padding
   (_FieldBase.FIELD_PAD) around a 10pt text box, so a form row is about 24px. Here: 13px text, 24px form and list rows,
   22px inputs and buttons, tighter gaps, radii and group headers, smaller icons. The root font size drops to 13px so rem
   spacing shrinks with it; the form and content widths keep their regular pixel sizes. Desktop widths only: below the
   phone breakpoint the regular, touch-sized style stays. Focus rings, colours and contrast are unchanged. */
@media (min-width: 601px) {
	:root[data-display-style="compact"] {
		font-size: 13px;
		--radius-card: 6px;
		--radius-control: 4px;
		--row-min-height: 24px;
		--row-pad-x: 8px;
		--row-pad-y: 1px;
		--compact-control: 22px;
		--value-max: 416px;
		--group-gap: 10px;
		/* The Compact style's rem is 13px, so the crumbs and Home must not use 64rem (832px) beside 1024px cards. */
		--page-max: 1024px;
	}
	:root[data-display-style="compact"] body { font-size: 13px; line-height: 1.3; }
	:root[data-display-style="compact"] main { max-width: 1760px; padding: 6px 12px 32px; }
	:root[data-display-style="compact"] .app-bar { max-width: 1760px; padding: 4px 12px 0; }
	:root[data-display-style="compact"] .shell-strip-wrap { --strip-pad: 12px; padding-top: 4px; }
	:root[data-display-style="compact"] .app-bar-title { font-size: 13px; }
	:root[data-display-style="compact"] .form-page,
	:root[data-display-style="compact"] .list-page { max-width: 1024px; }
	:root[data-display-style="compact"] .workspace-page { margin-bottom: 20px; }

	/* Buttons and toolbars */
	:root[data-display-style="compact"] button { min-height: var(--compact-control); padding: 1px 8px; gap: 4px; font-size: 13px; }
	:root[data-display-style="compact"] .toolbar-button { min-height: 24px; padding: 2px 10px 2px 8px; }
	:root[data-display-style="compact"] .icon-button,
	:root[data-display-style="compact"] a.icon-button { width: var(--compact-control); min-width: var(--compact-control); min-height: var(--compact-control); padding: 0; }
	:root[data-display-style="compact"] .chip-button { min-height: 20px; padding: 1px 8px; font-size: 12px; }
	:root[data-display-style="compact"] .count-badge { min-width: 15px; height: 15px; padding: 0 4px; font-size: 10px; }
	:root[data-display-style="compact"] .settings-choice { min-height: 24px; padding: 2px 8px; font-size: 13px; }
	:root[data-display-style="compact"] .grid-menu button { min-height: 24px; padding: 2px 8px; font-size: 13px; }
	:root[data-display-style="compact"] .picker-popover { --picker-line: 22px; --picker-row: 22px; gap: 3px; padding: 4px; border-radius: 6px; }
	:root[data-display-style="compact"] .picker-criterion > span { font-size: 12px; }
	:root[data-display-style="compact"] .picker-grid-row { font-size: 13px; }

	/* Inputs */
	:root[data-display-style="compact"] input[type=text],
	:root[data-display-style="compact"] input[type=search],
	:root[data-display-style="compact"] input[type=date],
	:root[data-display-style="compact"] input:not([type]),
	:root[data-display-style="compact"] select,
	:root[data-display-style="compact"] textarea { min-height: var(--compact-control); padding: 1px 6px; font-size: 13px; }
	:root[data-display-style="compact"] select { padding-right: 22px; background-position: right 4px center; background-size: 13px; }
	:root[data-display-style="compact"] input[type=checkbox] { width: 13px; height: 13px; }
	:root[data-display-style="compact"] .input-shell { min-height: var(--compact-control); padding-right: 2px; gap: 1px; }
	:root[data-display-style="compact"] .input-shell > .icon-button { width: 20px; min-width: 20px; min-height: 20px; }
	:root[data-display-style="compact"] .input-shell > .chip-button,
	:root[data-display-style="compact"] .date-shell .chip-button { min-height: 18px; padding: 0 6px; font-size: 12px; }
	:root[data-display-style="compact"] .input-shell > .value { padding: 1px 4px 1px 6px; }
	:root[data-display-style="compact"] .field-group-body .field-value > .value,
	:root[data-display-style="compact"] .field-group-body .picker-value > .value,
	:root[data-display-style="compact"] .date-value > .date-day { padding-inline: 6px; }
	:root[data-display-style="compact"] .date-shell .icon-button { width: 20px; min-width: 20px; }
	:root[data-display-style="compact"] .field-value .date-shell > input[type=date] { width: 24px; }
	:root[data-display-style="compact"] .field-value .date-shell > input[type=date]:focus { width: 120px; }
	:root[data-display-style="compact"] .field-value textarea { min-height: 72px; }

	/* Form header, messages and form tabs */
	:root[data-display-style="compact"] .form-header { gap: 6px 10px; padding: 6px 0.5rem; }
	:root[data-display-style="compact"] .form-title { gap: 8px; }
	:root[data-display-style="compact"] .form-title-icon { width: 28px; height: 28px; border-radius: 6px; font-size: 16px; }
	:root[data-display-style="compact"] .form-header h2 { font-size: 17px; }
	:root[data-display-style="compact"] .form-subtitle { margin-top: 0; font-size: 12px; }
	:root[data-display-style="compact"] .form-buttons { gap: 4px; }
	:root[data-display-style="compact"] .chip,
	:root[data-display-style="compact"] .badge { padding: 0 6px; font-size: 11px; }
	:root[data-display-style="compact"] .form-message { margin: 4px 0; padding: 4px 8px; border-radius: 4px; font-size: 13px; }
	:root[data-display-style="compact"] .form-tabs-wrap { margin: 8px 0 2px; }
	:root[data-display-style="compact"] .form-tabs { margin: 0; padding: 2px; border-radius: 6px; }
	:root[data-display-style="compact"] .form-tabs button { min-height: 20px; padding: 1px 10px; border-radius: 4px; font-size: 13px; }

	/* Field groups and rows */
	:root[data-display-style="compact"] .form-fields { gap: 10px; margin-top: 8px; }
	:root[data-display-style="compact"] .form-record-type { margin-top: 6px; }
	:root[data-display-style="compact"] .field-group-header { gap: 4px; padding: 0 var(--row-pad-x) 3px; font-size: 11px; letter-spacing: 0.04em; }
	:root[data-display-style="compact"] .field-group-header .icon { width: 13px; height: 13px; }
	:root[data-display-style="compact"] .field-subheading { padding: 6px var(--row-pad-x) 2px; font-size: 11px; }
	:root[data-display-style="compact"] .field { column-gap: 10px; }
	:root[data-display-style="compact"] .field-caption { gap: 5px; font-size: 13px; }
	:root[data-display-style="compact"] .field-value { gap: 4px; }
	:root[data-display-style="compact"] .field-changed-marker { width: 6px; height: 6px; }
	:root[data-display-style="compact"] .field-revert { width: 20px; min-width: 20px; min-height: 20px; }
	:root[data-display-style="compact"] .changes-list li > .changes-revert { width: 22px; min-width: 22px; min-height: 22px; margin: -2px 0 -2px auto; }
	:root[data-display-style="compact"] .field-lock { width: 12px; height: 12px; }
	:root[data-display-style="compact"] .field-not-built .icon { width: 12px; height: 12px; }
	:root[data-display-style="compact"] .field-message,
	:root[data-display-style="compact"] .field-hint { margin-top: 1px; font-size: 12px; }
	:root[data-display-style="compact"] .field-wide { row-gap: 3px; padding-top: 4px; padding-bottom: 4px; }
	:root[data-display-style="compact"] .field-value > input[type=checkbox] { width: 28px; height: 16px; }
	:root[data-display-style="compact"] .field-value > input[type=checkbox]::before { top: 2px; left: 2px; width: 12px; height: 12px; }
	:root[data-display-style="compact"] .field-value > input[type=checkbox]:checked::before { transform: translateX(12px); }
	:root[data-display-style="compact"] .field-value > input[type=checkbox] + span { font-size: 13px; }
	:root[data-display-style="compact"] .state-transitions button { padding: 1px 8px; font-size: 12px; }
	:root[data-display-style="compact"] .multi-select-list { padding: 4px; border-radius: 4px; }
	:root[data-display-style="compact"] .picker-choices li > button,
	:root[data-display-style="compact"] .department-tree li button,
	:root[data-display-style="compact"] .multi-select-choice { min-height: 22px; padding: 1px 6px; }
	:root[data-display-style="compact"] .id-caption-list .chip > .icon-button,
	:root[data-display-style="compact"] .record-list-picker .chip > .icon-button { width: 16px; min-width: 16px; min-height: 16px; }
	:root[data-display-style="compact"] .department-toolbar button { min-height: 20px; padding: 1px 8px; font-size: 12px; }

	/* Changes panel */
	:root[data-display-style="compact"] .form-changes { margin: 4px 0 8px; }
	:root[data-display-style="compact"] .form-changes-header { gap: 6px; padding: 3px var(--row-pad-x); font-size: 13px; }
	:root[data-display-style="compact"] .changes-icon { width: 18px; height: 18px; padding: 3px; border-radius: 4px; }
	:root[data-display-style="compact"] .form-changes h4 { margin: 6px var(--row-pad-x) 2px; font-size: 11px; }
	:root[data-display-style="compact"] .changes-list li { padding: 3px var(--row-pad-x); }
	:root[data-display-style="compact"] .changes-field { min-height: 0; padding: 0; }
	:root[data-display-style="compact"] .changes-conflict { padding: 0 6px; font-size: 11px; }

	/* Lists: grid, group bar, column menus, Columns panel and filters */
	:root[data-display-style="compact"] .record-grid { font-size: 13px; }
	:root[data-display-style="compact"] .record-grid th,
	:root[data-display-style="compact"] .record-grid td { padding: 2px 6px; }
	:root[data-display-style="compact"] .record-grid th > button,
	:root[data-display-style="compact"] .record-grid th .th-sort { min-height: 0; padding: 0; font-size: 11px; letter-spacing: 0.03em; }
	:root[data-display-style="compact"] .record-list .record-grid.arranged,
	:root[data-display-style="compact"] .record-list .record-grid-scroll.arranged { --grid-row: 24px; --lead: 26px; }
	:root[data-display-style="compact"] .record-list .record-grid.arranged th,
	:root[data-display-style="compact"] .record-list .record-grid.arranged td { padding-top: 0; padding-bottom: 0; }
	:root[data-display-style="compact"] .record-list .record-grid.arranged .cell-select,
	:root[data-display-style="compact"] .record-list .record-grid.arranged .cell-open { padding: 0 2px; }
	:root[data-display-style="compact"] .th-menu { width: 18px; min-width: 18px; min-height: 18px; }
	:root[data-display-style="compact"] .group-bar { gap: 4px; min-height: 28px; padding: 2px 8px; }
	:root[data-display-style="compact"] .group-bar-hint { font-size: 12px; }
	:root[data-display-style="compact"] .group-bar-columns { min-height: 20px; padding: 0 8px 0 6px; font-size: 12px; }
	:root[data-display-style="compact"] .group-bar-groups { gap: 4px; }
	:root[data-display-style="compact"] .group-bar-columns + .group-bar-groups { padding-left: 6px; }
	:root[data-display-style="compact"] .group-chip-label { min-height: 20px; padding: 0 4px 0 8px; font-size: 12px; }
	:root[data-display-style="compact"] .group-chip .group-chip-remove { width: 20px; min-width: 20px; min-height: 20px; }
	:root[data-display-style="compact"] .group-head { padding-left: calc(4px + var(--group-level) * 16px); }
	:root[data-display-style="compact"] .group-toggle { min-height: 20px; padding: 0 6px; font-size: 11px; }
	:root[data-display-style="compact"] .grid-menu { min-width: 180px; padding: 3px; border-radius: 6px; }
	:root[data-display-style="compact"] .columns-panel { margin-bottom: 8px; }
	:root[data-display-style="compact"] .columns-panel-header { gap: 6px; padding: 3px 6px 3px var(--row-pad-x); }
	:root[data-display-style="compact"] .columns-panel-header h3 { font-size: 13px; }
	:root[data-display-style="compact"] .columns-panel-section { padding: 3px 0 6px; }
	:root[data-display-style="compact"] .columns-panel-section h4 { margin: 3px var(--row-pad-x) 2px; font-size: 11px; }
	:root[data-display-style="compact"] .columns-row { min-height: 24px; gap: 2px; padding: 0 4px 0 var(--row-pad-x); }
	:root[data-display-style="compact"] .columns-row select { min-height: 20px; font-size: 12px; }
	:root[data-display-style="compact"] .columns-hint { font-size: 12px; }
	:root[data-display-style="compact"] input[type=checkbox].switch { width: 26px; height: 15px; }
	:root[data-display-style="compact"] input[type=checkbox].switch::before { top: 2px; left: 2px; width: 11px; height: 11px; }
	:root[data-display-style="compact"] input[type=checkbox].switch:checked::before { transform: translateX(11px); }
	:root[data-display-style="compact"] .list-filters { margin-bottom: 8px; }
	:root[data-display-style="compact"] .list-filter { column-gap: 10px; }
	:root[data-display-style="compact"] .list-filter-caption { font-size: 13px; }
	:root[data-display-style="compact"] .list-filter-controls { gap: 4px; }
	:root[data-display-style="compact"] .list-paging { margin-top: 6px; font-size: 12px; }
}

/* Milestone 7: filters and paging use the app.css tokens and controls. */
/* Milestone 7 (owner, 2026-10-15): the filters are their own card between the toolbar and the grid, one filter per row
   in the settings-list style (caption left, controls right, hairline separators); the add-filter row closes the card.
   min-width: 0 lets the fieldset shrink (a fieldset's default minimum is its content's width). */
.list-filters {
	width: 100%;
	min-width: 0;
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: var(--card-shadow);
	overflow: hidden;
}

.list-filter {
	position: relative;
	display: grid;
	grid-template-columns: minmax(8rem, 2fr) minmax(0, 3fr);
	align-items: center;
	column-gap: 1rem;
	min-height: var(--row-min-height);
	padding: var(--row-pad-y) var(--row-pad-x);
}

.list-filter + .list-filter::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--row-pad-x);
	right: 0;
	border-top: 1px solid var(--separator);
}

.list-filter-caption {
	color: var(--text);
	font-size: 0.95rem;
}

.list-filter-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4rem;
	min-width: 0;
}

.list-filter-controls select,
.list-filter-controls input {
	border-color: transparent;
	background-color: var(--surface-2);
}

.list-filter-controls select {
	flex: 0 1 11rem;
}

.list-filter-controls input {
	flex: 1 1 10rem;
	min-width: 0;
	max-width: 16rem;
}

.list-filter-add .list-filter-caption {
	color: var(--text-2);
}

.list-filter-add .list-filter-controls select {
	flex: 1 1 12rem;
	max-width: 21rem;
}

@media (max-width: 600px) {
	.list-filter {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.35rem;
	}

	.list-filter-controls {
		justify-content: flex-start;
	}

	.list-filter-controls input {
		max-width: none;
	}
}

/* Filter editors (ListFilterRow): option lists as toggle buttons, a list's checklist and its chips on their own line
   under the operator, True/False buttons, number and date boxes, the relative date quantity and unit. */
.list-filter-values {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.35rem;
	min-width: 0;
	padding-top: 0.35rem;
}
.list-filter-values > input { flex: 1 1 14rem; max-width: 24rem; border-color: transparent; background-color: var(--surface-2); }
.list-filter-values .multi-select-list { flex: 1 1 100%; }
.list-filter-toggles { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.filter-toggle { background: var(--surface-2); color: var(--text-2); }
.filter-toggle[aria-pressed="true"] { background: var(--accent-tint-strong); color: var(--accent); font-weight: 600; }
.list-filter-note { color: var(--text-2); font-size: 0.85rem; }
.list-filter-to { color: var(--text-2); font-size: 0.85rem; }
.list-filter-controls input.list-filter-value { flex: 0 1 10rem; }
.list-filter-controls input.list-filter-quantity { flex: 0 1 5rem; }
.list-filter-values .chip > .icon-button { width: 1.35rem; min-width: 1.35rem; min-height: 1.35rem; margin-right: -0.25rem; }

/* ---- Page width (milestone 7, owner 2026-10-17; settings menu, PageWidthStore) ----
   "Centered" (the default, no attribute) is the layout above: forms centered at 64rem (1024px in the compact style) and
   the content capped at 110rem; list pages use the form width too (owner 2026-10-19). "Full" (data-page-width="full") drops both caps, so forms, lists and their toolbars, form tabs
   and panels use the browser's width, and a form's field group cards flow into two, then three columns as the form
   widens. A card never grows past --group-max, so its caption-left, value-right rows stay together; the groups keep
   their order (row by row), which is also the keyboard and screen reader order. Phones (one column) are unchanged. */
:root[data-page-width="full"] main,
:root[data-page-width="full"] .app-bar,
:root[data-page-width="full"] .form-page,
:root[data-page-width="full"] .list-page { max-width: none; }

/* The Sprint Board form tab is a wide surface (desktop's board fills its window; Sprint Board plan 2.1 "a wide style for the
   form tab"): while it is shown its form uses the content width in both settings, so its columns can hold several cards. */
/* 2026-10-19: the board sits in the D11 freeze fieldset inside the form tab panel, so it is matched as a descendant. */
:root .form-page:has(> [role="tabpanel"] .sprint-board) { max-width: none; }

:root[data-page-width="full"] .form-field-area { container-type: inline-size; }
@container (min-width: 62rem) {
	:root[data-page-width="full"] .form-field-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, var(--group-max)));
		align-items: start;
		gap: var(--group-gap);
		margin-top: 1rem;
	}
	:root[data-page-width="full"] .form-field-grid > .form-fields { display: contents; }
	/* Compact: the same 8px top margin as its single column (a container this wide is never a phone). */
	:root[data-display-style="compact"][data-page-width="full"] .form-field-grid { margin-top: 8px; }
}
@container (min-width: 96rem) {
	:root[data-page-width="full"] .form-field-grid { grid-template-columns: repeat(3, minmax(0, var(--group-max))); }
}
/* ---- Shell (owner 2026-10-18, docs/GondwanaNavigationDecisions.md): Home link, favourites bar, breadcrumbs, Home and
   Power mode's page cards. Visual only. Power mode (data-user-mode="power") draws each page as a white card with a title
   strip on a slightly darker canvas; the focused page is raised with an accent border and a soft shadow, the others keep a
   neutral border. Simple mode (no attribute) shows one page under its breadcrumbs, drawn as the active card (owner
   2026-10-19). ---- */
:root {
	--canvas: light-dark(#e5e5eb, #050507);
	--card-border: light-dark(rgba(60, 60, 67, 0.2), rgba(255, 255, 255, 0.11));
	--card-strip: light-dark(#f7f7fa, #242427);
	--card-active-shadow: 0 10px 28px light-dark(rgba(10, 99, 201, 0.16), rgba(0, 0, 0, 0.6)), 0 2px 6px light-dark(rgba(0, 0, 0, 0.08), transparent), 0 0 0 1px light-dark(transparent, rgba(77, 159, 255, 0.28));
	--star: light-dark(#c98a00, #f5c04a);
}

.app-bar .settings-menu { margin-left: auto; }
.app-bar-home {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem 0.3rem 0.55rem;
	border-radius: 999px;
	color: var(--accent);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}
.app-bar-home:hover { background: var(--surface-hover); }
.app-bar-home .icon { width: 1.1rem; height: 1.1rem; }
.settings-blocked { margin: 0.25rem 0.65rem 0.5rem; color: var(--danger); font-size: 0.85rem; }
/* Quick Find (owner 2026-10-19): a search field in the middle of the top bar with its button; its messages are a popover
   anchored under the field. Phones collapse it to the button, which expands it across the bar. */
.app-bar { position: relative; }
.quick-find {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	flex: 0 1 22rem;
	min-width: 0;
	margin-left: auto;
}
.quick-find-input[type=search] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--segment-bg);
	border-color: transparent;
	font-size: 0.9rem;
}
.quick-find-input[type=search]:focus { background: var(--surface); }
.quick-find-button .icon { width: 1.1rem; height: 1.1rem; }
.quick-find-popover { min-width: 16rem; max-width: min(26rem, calc(100vw - 1.5rem)); padding: 0.6rem 0.75rem 0.5rem; }
.quick-find-message { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.35; }
.quick-find-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.grid-menu .quick-find-actions button { width: auto; min-height: 2rem; padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-weight: 500; }
.grid-menu .quick-find-actions button.primary { background: var(--accent); color: var(--accent-text); }
@media (max-width: 600px) {
	.quick-find { flex: 0 0 auto; }
	.quick-find:not(.quick-find-open) .quick-find-input { display: none; }
	.quick-find.quick-find-open {
		position: absolute;
		inset: 0.35rem 3.25rem auto 0.75rem;
		z-index: 5;
		margin: 0;
		padding: 0 0.15rem;
		border-radius: 999px;
		background: var(--bg);
	}
}
.settings-blocked p { margin: 0 0 0.25rem; }
.settings-blocked ul { margin: 0; padding-left: 1.1rem; }

/* The favourites and recents bar under the top bar (settings menu, off by default). */
/* No native scrollbar: the chips stay fully visible. When they overflow, the edges fade and two small buttons scroll the bar
   (wwwroot/js/shellStrip.js sets data-more-start / data-more-end; the mouse wheel scrolls it sideways too). */
/* Centered: the chips sit in the same --page-max column as the breadcrumbs and the page card (the wrapper is the column plus
   its side padding); Full spans the page width, as the card does. */
.shell-strip-wrap {
	--strip-pad: 1.25rem;
	position: relative;
	width: min(100%, calc(var(--page-max) + 2 * var(--strip-pad)));
	margin: 0 auto;
	padding: 0.35rem var(--strip-pad) 0;
}
:root[data-page-width="full"] .shell-strip-wrap { width: auto; max-width: none; }
.shell-strip {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	/* Room for the chips' shadow, which the scroll box would otherwise clip. */
	padding: 0.2rem 0.15rem 0.3rem;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	--fade-start: 0px;
	--fade-end: 0px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
}
.shell-strip::-webkit-scrollbar { display: none; }
.shell-strip-wrap[data-more-start] .shell-strip,
.form-tabs-wrap[data-more-start] .form-tabs { --fade-start: 2.25rem; }
.shell-strip-wrap[data-more-end] .shell-strip,
.form-tabs-wrap[data-more-end] .form-tabs { --fade-end: 2.25rem; }
.shell-strip-scroll {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: none;
	width: 1.75rem;
	min-width: 0;
	height: 1.75rem;
	min-height: 0;
	margin-top: -0.7rem;
	padding: 0;
	border-radius: 50%;
	background: var(--surface);
	box-shadow: var(--card-shadow), 0 1px 4px rgba(0, 0, 0, 0.18);
	color: var(--text-2);
}
.shell-strip-scroll:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.shell-strip-back { left: var(--strip-pad); }
.shell-strip-forward { right: var(--strip-pad); }
.form-tabs-wrap .shell-strip-back { left: 0.2rem; }
.form-tabs-wrap .shell-strip-forward { right: 0.2rem; }
.form-tabs-wrap .shell-strip-scroll { margin-top: -0.875rem; }
.shell-strip-wrap[data-more-start] .shell-strip-back,
.shell-strip-wrap[data-more-end] .shell-strip-forward,
.form-tabs-wrap[data-more-start] .shell-strip-back,
.form-tabs-wrap[data-more-end] .shell-strip-forward { display: inline-flex; align-items: center; justify-content: center; }
.shell-chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.3rem;
	max-width: 16rem;
	min-height: 1.9rem;
	padding: 0.2rem 0.7rem 0.2rem 0.55rem;
	border-radius: 999px;
	background: var(--surface);
	box-shadow: var(--card-shadow);
	color: var(--text);
	font-size: 0.825rem;
	text-decoration: none;
	white-space: nowrap;
}
.shell-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shell-chip:hover { background: var(--surface-hover); }
.shell-chip .icon { color: var(--text-2); }
.shell-chip .shell-chip-star { color: var(--star); fill: currentColor; }
.shell-strip-separator { flex: none; width: 1px; height: 1.2rem; background: var(--separator); }

/* The favourite star on a page's title strip. */
.favourite-star { color: var(--text-3); }
.favourite-star.starred { color: var(--star); }
.favourite-star.starred .icon { fill: currentColor; }
.form-title .favourite-star { flex: none; }
.list-header h2 { flex: 0 1 auto; }

/* Simple mode: the breadcrumbs above the one page shown, aligned with a form's width. */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; }
.workspace-simple:has(> .workspace-page > :is(.form-page, .list-page)) > .breadcrumbs { max-width: var(--page-max); margin-inline: auto; }
:root[data-page-width="full"] .workspace-simple > .breadcrumbs { max-width: none; }
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.1rem 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; }
.crumb { max-width: 20rem; padding: 0.1rem 0.35rem; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.crumb { color: var(--accent); text-decoration: none; }
a.crumb:hover { background: var(--accent-tint); text-decoration: underline; }
.crumb-current { color: var(--text); font-weight: 600; }
.crumb-separator { color: var(--text-3); }
.crumb-others { margin-left: auto; }
.other-pages-popover { max-width: 22rem; }
.other-pages-note { margin: 0.3rem 0.65rem 0.4rem; color: var(--text-2); font-size: 0.8rem; }
.unsaved-dot { display: inline-block; flex: none; width: 0.5rem; height: 0.5rem; margin-left: 0.35rem; border-radius: 50%; background: var(--accent); }
.workspace-empty { color: var(--text-2); }

/* Home. */
.home { max-width: var(--page-max); margin-inline: auto; }
:root[data-page-width="full"] .home { max-width: none; }
.home-header { padding: 0.5rem 0 0.25rem; }
.home-header h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.015em; }
/* The router focuses the page heading after navigation (FocusOnNavigate); it is not a control, so no focus ring. */
.home-header h1:focus { outline: none; }
.home-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.5rem 1.25rem; align-items: start; }
.home-list {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: var(--card-shadow);
}
.home-list li { display: flex; align-items: center; gap: 0.25rem; padding-right: 0.35rem; border-top: 1px solid var(--separator); }
.home-list li:first-child { border-top: 0; }
.home-link {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	min-height: var(--row-min-height);
	padding: 0.4rem var(--row-pad-x);
	color: var(--text);
	text-decoration: none;
}
.home-link:hover { background: var(--surface-hover); }
.home-link > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-link > .icon { color: var(--accent); }
.home-open-item .home-link { padding-left: calc(var(--row-pad-x) + var(--page-depth, 0) * 1rem); }
.home-empty { margin: 0.4rem var(--row-pad-x); color: var(--text-2); font-size: 0.875rem; }
.home-tables { margin-top: 1rem; }
/* DD-047 review fix: the open Simple chain, at the top of Home. */
.home-continue { margin-bottom: 0.75rem; }
.home-continue-unsaved { flex: none; margin-left: auto; color: var(--accent); font-size: 0.8rem; }
.home-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem 1.25rem; align-items: start; }
.home-area h3 { margin: 0 var(--row-pad-x) 0.35rem; color: var(--text-2); font-size: 0.85rem; font-weight: 600; }
.home-table-text { display: flex; flex-direction: column; min-width: 0; }
.home-table-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-table-description { color: var(--text-2); font-size: 0.78rem; }

/* Every page a card (Power mode since 2026-10-18; Simple mode too since owner 2026-10-19, mockup A): a white card with a
   rounded border and a title strip on the canvas; the active page is raised with the accent border and a soft shadow. In
   Simple mode the one page shown is always the active card. */
:root[data-user-mode="power"] body,
body:has(.workspace-simple) { background: var(--canvas); }
.workspace > .workspace-page > .form-page,
.workspace > .workspace-page > .list-page {
	padding: 0 1rem 1.25rem;
	border: 1px solid var(--card-border);
	border-radius: 14px;
	background: var(--surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.workspace > .page-card-active > .form-page,
.workspace > .page-card-active > .list-page {
	border-color: var(--accent);
	box-shadow: var(--card-active-shadow);
}
@media (prefers-reduced-motion: reduce) {
	.workspace > .workspace-page > .form-page,
	.workspace > .workspace-page > .list-page { transition: none; }
}
/* The title strip: the page's header across the top of its card. */
.workspace > .workspace-page > .form-page > .form-header,
.workspace > .workspace-page > .list-page > .record-list > .list-header {
	margin: 0 -1rem 0.75rem;
	padding: 0.65rem 1rem;
	border-bottom: 1px solid var(--card-border);
	border-radius: 13px 13px 0 0;
	background: var(--card-strip);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
/* A related list's sticky header inside a card blurs over the white card, not the canvas. */
.workspace .page-card .record-list > .list-header { background: color-mix(in srgb, var(--surface) 88%, transparent); }
/* Field group cards on the white card keep a visible edge. */
.workspace .page-card .field-group-body { box-shadow: 0 0 0 1px var(--separator); }
@media (max-width: 600px) {
	.workspace > .workspace-page > .form-page,
	.workspace > .workspace-page > .list-page { padding: 0 0.6rem 0.75rem; }
	.workspace > .workspace-page > .form-page > .form-header,
	.workspace > .workspace-page > .list-page > .record-list > .list-header { margin: 0 -0.6rem 0.6rem; padding: 0.5rem 0.6rem; }
	.app-bar-home span { display: none; }
}

/* ---- Side-by-side (DESKTOP DEVIATION DD-055, owner 2026-10-19; settings menu, SideBySideStore) ----
   Power mode only (.workspace-power). With data-side-by-side on the root and two or more pages open (.workspace-multi,
   WorkspacePage.razor), the page cards flow into columns in their page order (the page tree's order, so a child follows its
   parent), row by row, which is also the keyboard and screen reader order: no dense packing, no masonry, no column that
   scrolls by itself. A card is at least --sbs-card-min and at most --sbs-card-max wide; a column is added whenever the row
   holds one more card at its narrowest plus the gap, up to --sbs-columns. Cards in a row align to the top (a shorter card
   leaves blank space under it). A standalone list spans the whole row; record pages flow in the rows below it. Children
   lose their indent (every page is just a card) whenever the setting is on, also with one page or in a single column.
   Below the two-column width the cards stack as today (Centered or Full widths). With one page open nothing else changes.
   The widths are rem, like the Centered form width, so the Compact style (rem = 13px) fits two columns in a narrower
   window; it needs no rule of its own. Phones are one column. Presentation only: focus, open, close, the close prompt,
   restore and Open all are unchanged. */
:root {
	/* The most cards side by side (owner: 2 for now). */
	--sbs-columns: 2;
	/* A card's widest: the Centered form width (64rem; not --page-max, which the Compact style pins at 1024px). */
	--sbs-card-max: 64rem;
	/* A card's narrowest, as a share of its widest (owner: forms stay comfortable down to about 2/3-3/4). */
	--sbs-card-factor: 0.7;
	--sbs-card-min: calc(var(--sbs-card-factor) * var(--sbs-card-max));
	--sbs-gap: 1.25rem;
	/* The widest the row of cards gets (every column at its widest) and the narrowest that holds two columns. */
	--sbs-row-max: calc(var(--sbs-columns) * var(--sbs-card-max) + (var(--sbs-columns) - 1) * var(--sbs-gap));
	--sbs-two-columns: calc(2 * var(--sbs-card-min) + var(--sbs-gap));
}
:root[data-side-by-side] .workspace-power > .workspace-page-child { margin-left: 0; padding-left: 0; border-left: 0; }
/* The column count: each track is at least the narrowest card and at least an equal share of the row for --sbs-columns
   columns (0.1px less, so rounding never drops a column), so auto-fill makes as many columns as fit, never more than the
   cap; the tracks then share the row (1fr). min(100%, ...) keeps one track inside a narrow window. */
:root[data-side-by-side] .workspace-power.workspace-multi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--sbs-card-min), calc((100% - (var(--sbs-columns) - 1) * var(--sbs-gap)) / var(--sbs-columns) - 0.1px))), 1fr));
	column-gap: var(--sbs-gap);
	align-items: start;
	max-width: var(--sbs-row-max);
	margin-inline: auto;
}
/* Wide content (a related list's table, the Sprint Board) scrolls inside its card instead of widening the column. */
:root[data-side-by-side] .workspace-power.workspace-multi > .workspace-page { min-width: 0; }
:root[data-side-by-side] .workspace-power.workspace-multi > .workspace-page-list { grid-column: 1 / -1; }
/* Centered: a list spanning a row of two or more columns uses the whole row; in a single column (the row narrower than
   --sbs-two-columns) it keeps the Centered width (--page-max). The second term is negative below that width and huge above
   it (100% is the row's width here). Full already has no cap. */
:root[data-side-by-side]:not([data-page-width="full"]) .workspace-power.workspace-multi > .workspace-page-list > .list-page {
	max-width: max(var(--page-max), calc((100% - var(--sbs-two-columns) + 1px) * 1000));
}
/* Centered: the content, the top bar and the favourites bar widen past the Centered caps so the columns can reach their
   widest (110rem is 1760px at the regular rem, and the Compact style pins 1760px; both keep at least that). */
:root[data-side-by-side]:not([data-page-width="full"]):has(.workspace-power.workspace-multi) :is(main, .app-bar) {
	max-width: max(1760px, calc(var(--sbs-row-max) + 2.5rem));
}
:root[data-side-by-side]:not([data-page-width="full"]):has(.workspace-power.workspace-multi) .shell-strip-wrap {
	width: min(100%, calc(var(--sbs-row-max) + 2 * var(--strip-pad)));
}
/* The settings menu's Side-by-side choice is disabled in Simple mode, with a note. */
.settings-choice[aria-disabled="true"] { color: var(--text-3); cursor: default; }
.settings-choice[aria-disabled="true"]:hover { background: none; }
.settings-note { margin: -0.15rem 0.65rem 0.35rem 2.25rem; color: var(--text-3); font-size: 0.8rem; }
.settings-link { margin-left: 0.65rem; }

/* ---- Blazor template: error UI and loading indicator ---- */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: light-dark(#e0e0e0, #3a3a3c);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: light-dark(#1b6ec2, #4d9fff);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Phase 11: a list row's open control is a link (so the browser can open it in a new BrowserTab), styled as an icon button. */
a.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	text-decoration: none;
}
a.icon-button:hover { background: var(--surface-hover); color: var(--text); }
a.icon-button[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
/* The key column's text is the record link too (owner 2026-10-15). */
a.record-key-link { color: inherit; text-decoration: none; }
a.record-key-link:hover, a.record-key-link:focus-visible { text-decoration: underline; }
a.record-key-link[aria-disabled="true"] { pointer-events: none; }

/* desktop FieldEMail.OnPaint: a small warning image after an e-mail box that does not hold one valid address. */
.email-warning { display: inline-flex; flex: none; align-items: center; color: var(--warning); }

/* Documents form tab (Documents plan WP3/4.5): desktop's file list columns as a grid; each row is a checkbox, the file name
   link and one button over the rest of the row that opens the row's menu (no right click needed). */
.documents-form-tab { display: flex; flex-direction: column; gap: 0.6rem; }
.documents-list {
	display: grid;
	grid-template-columns: 2.5rem minmax(12rem, 2fr) minmax(8rem, 1.5fr) 4rem 4.5rem 4rem 6rem 10rem minmax(7rem, 1fr);
	background: var(--surface);
	border-radius: var(--radius-card);
	box-shadow: var(--card-shadow);
	overflow-x: auto;
}
.doc-row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	min-height: 2.5rem;
	border-top: 1px solid var(--separator);
}
.doc-row[data-selected="true"] { background: var(--accent-tint); }
.doc-head { border-top: 0; color: var(--text-2); font-size: 0.85rem; font-weight: 600; }
.doc-head > span { padding: 0 0.5rem; }
.doc-check { display: flex; justify-content: center; }
.doc-name { display: flex; gap: 0.4rem; align-items: center; min-width: 0; padding: 0 0.5rem; }
.doc-name a, .doc-name > span, .doc-name button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-name .icon { flex: none; color: var(--text-2); }
.doc-cells { grid-column: 3 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-width: 0; }
.doc-cells > span { padding: 0 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The row button fills its cell and lays its texts on the header's columns (subgrid through the cell). */
.doc-cells-inner { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; width: 100%; }
.doc-cells-inner > span:not(.visually-hidden) { padding: 0 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row-main {
	min-height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 400;
	text-align: left;
	cursor: pointer;
}
.doc-row-main:hover { background: var(--surface-hover); }
.doc-row-main:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.doc-number { text-align: right; }
.doc-group { grid-column: 1 / -1; padding: 0.4rem 0.75rem; background: var(--surface-2); border-top: 1px solid var(--separator); font-weight: 600; }
.doc-versions { grid-column: 1 / -1; padding: 0.5rem 1rem 0.75rem 3rem; border-top: 1px solid var(--separator); background: var(--surface-2); }
.doc-versions ul { margin: 0.4rem 0 0; padding: 0; list-style: none; }
.doc-versions li { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; padding: 0.25rem 0; }
.documents-path, .documents-selection { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; }
.documents-selection { padding: 0.4rem 0.6rem; border-radius: var(--radius-card); background: var(--accent-tint); }
.documents-menu .menu-link {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.4rem 0.65rem;
	border-radius: 8px;
	color: var(--text);
	font-size: 0.9rem;
	text-decoration: none;
}
.documents-menu .menu-link:hover { background: var(--surface-hover); }
.documents-menu .menu-link .icon { color: var(--text-2); }
.document-opener { padding: 2rem 1rem; }
.link-button { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
/* The Documents page (ND-035): the Documents form tab's rows without the check box, with the owning record. */
.documents-page { display: flex; flex-direction: column; gap: 0.75rem; max-width: var(--page-width, 80rem); margin: 0 auto; padding: 1rem; }
.documents-find { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; }
.documents-find label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--text-2); }
.documents-find input { min-width: 16rem; }
.documents-search { grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1.4fr) minmax(8rem, 1.4fr) 4rem minmax(6rem, 1fr) 4.5rem 6rem 10rem; }
.documents-search .doc-cells, .documents-tree .doc-cells { grid-column: 2 / -1; }
.documents-search .doc-name, .documents-tree .doc-name { padding-left: 0.75rem; }
/* The Folders view (ND-035): the tree's folder, breadcrumb first, then its sub-folders and documents. */
.documents-tree { grid-template-columns: minmax(12rem, 2fr) minmax(8rem, 1.5fr) 4rem 4.5rem 6rem 10rem; }
.documents-view { display: flex; flex-direction: column; gap: 0.75rem; }
.documents-page-header { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; }
/* The Tree view (ND-035): desktop's folder tree on the left (resizable), the selected folder's files on the right. */
.doc-tree-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.doc-tree-pane { width: 18rem; min-width: 12rem; max-width: 40vw; max-height: 75vh; overflow: auto; resize: horizontal; padding: 0.4rem 0; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--card-shadow); }
.doc-tree, .doc-tree ul { margin: 0; padding: 0; list-style: none; }
.doc-tree [role="treeitem"]:focus { outline: none; }
.doc-tree [role="treeitem"]:focus-visible > .doc-tree-row { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.doc-tree-row { display: flex; gap: 0.3rem; align-items: center; min-height: 1.9rem; padding: 0 0.5rem 0 calc(0.4rem + var(--depth, 0) * 1.1rem); cursor: pointer; white-space: nowrap; }
.doc-tree-row:hover { background: var(--surface-hover); }
.doc-tree-row[data-selected="true"] { background: var(--accent-tint); font-weight: 600; }
.doc-tree-row .icon { flex: none; color: var(--text-2); }
.doc-tree-toggle { display: inline-flex; flex: none; justify-content: center; width: 1.1rem; }
.doc-tree-name { overflow: hidden; text-overflow: ellipsis; }
.doc-files-pane { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.doc-files-header { display: flex; gap: 0.6rem; align-items: center; min-height: 2rem; }
.doc-files-path { display: inline-flex; gap: 0.35rem; align-items: center; }
.doc-tree-back { display: none; }
.documents-tree-files { grid-template-columns: 2.5rem minmax(12rem, 2fr) minmax(8rem, 1.5fr) 4rem 4.5rem 6rem 10rem; }
/* The Folders / Search switch: the Sprint Board's segmented control (its styles are scoped to that component). */
.documents-page-header .board-segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--segment-bg); }
.documents-page-header .board-segment button { display: inline-flex; gap: 0.35rem; align-items: center; min-height: 1.9rem; padding: 0.2rem 0.7rem; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 0.85rem; white-space: nowrap; }
.documents-page-header .board-segment button[aria-pressed="true"] { background: var(--segment-selected); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); font-weight: 600; }
.doc-sort { display: inline-flex; gap: 0.2rem; align-items: center; color: inherit; font-weight: 600; }
.documents-paging { display: flex; gap: 0.75rem; align-items: center; }
/* Phones: the check box, the name and the title; the other columns stay on wider screens. */
@media (max-width: 700px) {
	.documents-list { grid-template-columns: 2.5rem minmax(9rem, 1.4fr) minmax(6rem, 1fr); }
	.doc-head .doc-cells > :not(:first-child) { display: none; }
	.doc-cells-inner > span:not(.visually-hidden) ~ span { display: none; }
	.documents-search, .documents-tree { grid-template-columns: minmax(9rem, 1.4fr) minmax(6rem, 1fr); }
	/* The Tree view on a phone: the tree takes the width; a selected folder's files replace it, with a back button. */
	.doc-tree-layout { grid-template-columns: minmax(0, 1fr); }
	.doc-tree-pane { width: auto; max-width: none; max-height: none; resize: none; }
	.doc-tree-layout[data-pane="files"] .doc-tree-pane, .doc-tree-layout[data-pane="tree"] .doc-files-pane { display: none; }
	.doc-tree-back { display: inline-flex; }
	.documents-tree-files { grid-template-columns: 2.5rem minmax(9rem, 1.4fr) minmax(6rem, 1fr); }
	.documents-find input { min-width: 0; width: 100%; }
}

/* ---- Developer trace explorer (dev builds only, Components/DevTracePanel.razor) ---- */
/* A bar docked at the bottom of every page; open, it takes a third of the window (or most of it) with the message list on
   the left and the selected message on the right. Desktop browsers only. */
body:has(.trace-dock) main { padding-bottom: 3rem; }
.trace-dock {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 900;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-top: 1px solid var(--separator);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
	font-size: 0.85rem;
}
.trace-size-1 { height: 40vh; }
.trace-size-2 { height: 85vh; }
.trace-bar { display: flex; align-items: center; gap: 0.6rem; min-height: 2.4rem; padding: 0.2rem 0.75rem; border-bottom: 1px solid var(--separator); }
.trace-size-0 .trace-bar { border-bottom: 0; }
.trace-toggle { min-height: 1.9rem; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; }
.trace-status { color: var(--text-2); }
.trace-recording { color: var(--success); }
.trace-paused { color: var(--warning); }
.trace-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-left: auto; }
.trace-bar-actions .chip-button, .trace-detail-header .chip-button, .trace-tree-tools .chip-button { min-height: 1.75rem; padding: 0.15rem 0.6rem; font-size: 0.8rem; }
.trace-check { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-2); }
.trace-body { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); flex: 1; min-height: 0; }
.trace-list { margin: 0; padding: 0.3rem; overflow: auto; list-style: none; border-right: 1px solid var(--separator); }
.trace-list-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	gap: 0.5rem;
	width: 100%;
	min-height: 1.9rem;
	padding: 0.2rem 0.5rem;
	border-radius: 6px;
	background: transparent;
	color: var(--text);
	font-size: 0.82rem;
	font-weight: 400;
	text-align: left;
}
.trace-list-row:hover:not(:disabled) { background: var(--surface-hover); }
.trace-list-row.selected { background: var(--accent-tint-strong); color: var(--accent); }
.trace-list-row.background { color: var(--text-3); font-style: italic; }
.trace-time, .trace-at, .trace-meta { color: var(--text-3); font-family: var(--font-mono); font-size: 0.75rem; white-space: nowrap; }
.trace-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.trace-fault, .trace-fault-line { color: var(--danger); }
.trace-fault-line { margin: 0.3rem 0.75rem; }
.trace-empty, .trace-note { margin: 0.5rem 0.75rem; color: var(--text-2); }
.trace-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.trace-detail-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.35rem 0.75rem; border-bottom: 1px solid var(--separator); }
.trace-tabs { display: inline-flex; gap: 0.25rem; margin-left: auto; }
.trace-tabs .chip-button { background: transparent; color: var(--text-2); }
.trace-tabs .chip-button.selected { background: var(--accent-tint-strong); color: var(--accent); }
.trace-detail-body { flex: 1; min-height: 0; overflow: auto; padding: 0.3rem 0.5rem 1rem; }
.trace-timeline { margin: 0; padding: 0; list-style: none; }
.trace-entry { padding-left: calc(var(--depth, 0) * 0.85rem); }
.trace-entry-row {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	width: 100%;
	min-height: 1.6rem;
	padding: 0.1rem 0.4rem;
	border-radius: 5px;
	background: transparent;
	color: var(--text);
	font-size: 0.82rem;
	font-weight: 400;
	justify-content: flex-start;
	text-align: left;
}
.trace-entry-row:hover:not(:disabled) { background: var(--surface-hover); }
.trace-chevron { color: var(--text-3); }
.trace-badge { flex: none; padding: 0 0.4rem; border-radius: 999px; background: var(--segment-bg); color: var(--text-2); font-size: 0.72rem; font-weight: 600; }
.trace-badge.update { background: var(--accent-tint-strong); color: var(--accent); }
.trace-badge.message { background: var(--warning-tint); color: var(--warning); }
.trace-entry-caught .trace-badge { background: var(--danger-tint); color: var(--danger); }
.trace-title { font-family: var(--font-mono); font-size: 0.78rem; overflow-wrap: anywhere; }
.trace-entry-update .trace-title { font-weight: 600; }
.trace-frame, .trace-outcome { color: var(--text-2); font-family: var(--font-mono); font-size: 0.75rem; }
.trace-late { color: var(--warning); font-size: 0.72rem; }
.trace-entry.after-end { opacity: 0.8; }
.trace-entry-detail { margin: 0.2rem 0 0.6rem 2.6rem; padding: 0.4rem 0.6rem; border-left: 2px solid var(--separator); }
.trace-entry-detail h5 { margin: 0.4rem 0 0.2rem; color: var(--text-2); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
.trace-stack { margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 0.76rem; }
.trace-stack li { padding: 0.05rem 0; }
.trace-stack li:first-child { font-weight: 600; }
.trace-real-stack summary { margin-top: 0.3rem; color: var(--text-2); cursor: pointer; font-size: 0.78rem; }
.trace-diff, .trace-tree, .trace-found { margin: 0; padding-left: 1rem; list-style: none; font-family: var(--font-mono); font-size: 0.76rem; }
.trace-entry-detail > .trace-diff, .trace-detail-body > .trace-tree, .trace-entry-detail > .trace-tree { padding-left: 0; }
.trace-node-toggle, .trace-node-leaf {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	min-height: 1.4rem;
	padding: 0.05rem 0.3rem;
	border-radius: 4px;
	background: transparent;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 0.76rem;
	font-weight: 400;
	text-align: left;
}
.trace-node-leaf { padding-left: 1.4rem; }
.trace-node-toggle:hover:not(:disabled) { background: var(--surface-hover); }
.trace-node-name { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.trace-node-summary { color: var(--text-2); overflow-wrap: anywhere; }
.trace-diff-added > * > .trace-node-summary { color: var(--success); }
.trace-diff-removed > * > .trace-node-summary { color: var(--danger); text-decoration: line-through; }
.trace-diff-changed > .trace-node-leaf > .trace-node-summary { color: var(--text); }
.trace-tree-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.3rem 0; }
.trace-tree-tools input[type=search] { width: 18rem; min-height: 1.75rem; padding: 0.15rem 0.5rem; font-size: 0.8rem; }
.trace-found { padding: 0.2rem 0 0.5rem; }