/* The Portal's additions to the BusyBooking brand (Winsmith.BusyBooking.WebCore's busybooking.css, loaded first). */

/* htmx adds .htmx-request to the element named by hx-indicator while a request is in flight. */
.htmx-indicator {
	display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
	display: inline;
}

/* Text people typed on several lines (a lead's notes for the team), shown with its line breaks. */
.pre-line {
	white-space: pre-line;
}

/* Erasing a caller (D131), set apart from the follow-up above it since it can't be undone. */
.erase-caller {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

/* Choices that belong to the one above them (an industry's kinds of work), set in under it. */
.indented {
	padding-left: 28px;
}

/* A list inside a card is an inner panel (12 px corners); a list with nothing in it draws no box, but stays in the page
   for screen readers. */
.card .item-list {
	border-radius: var(--radius-m);
}

.item-list:not(:has(> li)) {
	border: 0;
}

/* An industry's kinds of work on the settings page: buttons that stay pressed while that kind of work is on, drawn as
   brand/shared/base.css's chips, with a check mark so the state never rests on color alone. Their own width on phones too. */
.toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.toggle {
	width: auto;
	min-height: var(--control-height);
	margin-top: 0;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-control);
}

.toggle:hover {
	background: var(--ink-raised);
	border-color: var(--line-strong);
}

.toggle[aria-pressed="true"] {
	color: var(--accent-strong);
	background: var(--accent-soft);
	border-color: transparent;
	font-weight: 600;
}

.toggle[aria-pressed="true"]:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
}

.toggle-check {
	display: none;
	margin-right: 6px;
}

.toggle[aria-pressed="true"] .toggle-check {
	display: inline;
}

/* The price editor's common-question picker, set apart from the form it fills in. */
.suggestion-form {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line-soft);
}

/* The navigation search in the top bar (Portal item 11): the field with its magnifier takes the row, up to a point, and
   the button keeps its size. */
.go-search {
	flex: 1;
	min-width: 0;
	max-width: 520px;
}

.go-search-row {
	display: flex;
	gap: 8px;
}

.go-search-field {
	position: relative;
	flex: 1;
	min-width: 0;
}

.go-search-field svg {
	position: absolute;
	left: 12px;
	top: 50%;
	translate: 0 -50%;
	color: var(--text-faint);
	pointer-events: none;
}

.go-search-field input {
	max-width: none;
	padding-left: 36px;
	background: var(--card);
	border-color: transparent;
}

.go-search-field input:hover {
	border-color: var(--line-strong);
}

.go-search-row button {
	width: auto;
	flex: none;
	margin-top: 0;
	padding-left: 16px;
	padding-right: 16px;
}

/* The top of a business's pages: where you are, and the setup steps' link beside it. */
.business-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 4px 16px;
}

.setup-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

/* The sub-menu (a section's pages for the business and each channel: _SectionMenu, or the settings pages'
   _SettingsMenu): a row of chips above the page on phones, scrolling sideways inside itself; from 980 px a column beside
   the side column, the height of the window, which its head's button folds to a narrow strip and the strip's button
   brings back (subnav.js). */
.subnav {
	order: 1;
	min-width: 0;
	padding: 12px var(--page-padding) 0;
}

.shell-main > .topbar {
	order: 0;
}

.shell-main > .content {
	order: 2;
}

.shell-main > .site-footer {
	order: 3;
}

.settings-menu {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.settings-menu a {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-control);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: none;
	white-space: nowrap;
}

.settings-menu a:hover {
	color: var(--text);
}

.settings-menu a[aria-current="page"] {
	color: var(--accent-strong);
	background: var(--accent-soft);
	border-color: transparent;
}

/* The label over the channels' pages: only in the column, where the pages are a list. */
.subnav-head,
.subnav-unfold,
.subnav-label {
	display: none;
}

.subnav-toggle {
	width: 28px;
	min-height: 28px;
	margin: 0;
	padding: 0;
	flex: none;
}

@media (min-width: 980px) {
	.shell-main.has-subnav {
		display: grid;
		grid-template-columns: var(--subnav-width) minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
	}

	.has-subnav > .subnav {
		grid-row: 1 / -1;
		grid-column: 1;
		position: sticky;
		top: 0;
		height: 100dvh;
		overflow-y: auto;
		padding: 16px 12px;
		background: var(--card);
		border-inline-end: 1px solid var(--line);
	}

	.has-subnav > .subnav > nav {
		animation: subnav-in 0.22s ease-out;
	}

	.has-subnav > :not(.subnav) {
		grid-column: 2;
	}

	/* Folded, the column stays as a narrow strip in its own colour, holding only the button that brings it back, so the
	   button reads as the menu's and not the top bar's. */
	.subnav-folded .shell-main.has-subnav {
		grid-template-columns: 48px minmax(0, 1fr);
	}

	.subnav-folded .has-subnav > .subnav {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding: 14px 0;
	}

	.subnav-folded .has-subnav > .subnav > :not(.subnav-unfold) {
		display: none;
	}

	/* A control's height, like the search and Go beside it. */
	.subnav-folded .subnav-unfold {
		display: inline-flex;
		width: var(--control-height);
		min-height: var(--control-height);
		margin: 0;
		border: 1px solid var(--line-strong);
		border-radius: var(--radius-s);
	}

	.settings-menu {
		flex-direction: column;
		gap: 2px;
		overflow: visible;
		padding: 0;
	}

	.subnav-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 4px 4px 10px 10px;
		font-size: 15px;
	}

	.subnav-label {
		display: block;
		margin-top: 14px;
		padding: 0 10px 4px;
		font-size: 12px;
		font-weight: 600;
		color: var(--text-faint);
	}

	/* A channel's long name wraps in the column. */
	.settings-menu a {
		min-height: 0;
		padding: 7px 10px;
		white-space: normal;
		overflow-wrap: anywhere;
		border: 0;
		border-radius: var(--radius-s);
		font-weight: 500;
	}

	.settings-menu a:hover {
		background: var(--ink-raised);
	}

	.settings-menu a[aria-current="page"] {
		color: var(--text);
		background: var(--ink-raised);
		box-shadow: inset 2px 0 0 var(--accent);
		font-weight: 600;
	}
}

@keyframes subnav-in {
	from {
		translate: -12px 0;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.has-subnav > .subnav > nav {
		animation: none;
	}
}

/* A dialog in the middle of the window (the brand's, brand/shared/base.css): sign-up's link first (D197). */
.dialog {
	box-sizing: border-box;
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 0;
	overflow-y: auto;
	color: var(--text);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-3);
}

.dialog::backdrop {
	background: var(--overlay);
}

.dialog-head {
	padding: 24px 24px 0;
}

.dialog-head h2 {
	margin: 0;
}

.dialog-body {
	padding: 16px 24px;
}

/* What a dialog hides for now (the business type's change, D202: a step, or Back on the first step): .stack's flex and
   the buttons' inline-flex would show it. */
.dialog [hidden] {
	display: none;
}

.dialog-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	padding: 0 24px 24px;
}

/* A drawer: a dialog that slides in from the right, the full height of the window (drawer.js opens it). It floats, so
   it has the modal shadow. */
.drawer {
	width: min(440px, 100vw);
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0 0 0 auto;
	padding: 0;
	color: var(--text);
	background: var(--card);
	border: 0;
	border-left: 1px solid var(--line);
	border-radius: var(--radius-l) 0 0 var(--radius-l);
	box-shadow: var(--shadow-3);
}

.drawer::backdrop {
	background: var(--overlay);
}

.drawer[open] {
	animation: drawer-in 0.2s ease-out;
}

@keyframes drawer-in {
	from {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.drawer[open] {
		animation: none;
	}
}

.drawer-body {
	box-sizing: border-box;
	height: 100%;
	padding: 24px;
	overflow-y: auto;
}

.drawer-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}

/* The calls page, as the owner's sample (brand/busybooking/sample-portal.html, brand/shared/base.css): its head with the
   period, a toolbar of choices, and the calls as rows on a phone that become a table from 900 px. */
.calls-page {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 16px;
}

.page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
}

.page-head h1 {
	margin: 0;
}

.page-head .sub {
	margin-top: 2px;
	font-size: 14px;
	color: var(--text-muted);
}

/* The period and Export side by side, as the sample's actions (the leads' and the callback requests' heads); they wrap
   on a phone. */
.page-head-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.toolbar .spacer {
	flex: 1;
}

.toolbar-search input {
	min-width: 200px;
}

/* Choices drawn as one control (a radio each): a period, which calls. A control's height, like the chips, the dropdown,
   the search and the buttons beside it (the owner, 2026-10-24). */
fieldset.segmented {
	display: inline-flex;
	gap: 2px;
	height: var(--control-height);
	margin: 0;
	padding: 2px;
	background: var(--card);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-control);
}

.segmented label {
	position: relative;
	margin: 0;
	height: 100%;
}

.segmented input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.segmented span {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--text-muted);
	border-radius: var(--radius-control);
}

/* Four periods fit a phone's width on one line (the owner, 2026-11-04: Today, Last 7 days, Last 30 days, Custom Range);
   the leads' five wrap to a second, each row a control's height. */
@media (max-width: 480px) {
	fieldset.segmented {
		flex-wrap: wrap;
		height: auto;
		min-height: var(--control-height);
	}

	.segmented label {
		height: calc(var(--control-height) - 6px);
	}

	.segmented span {
		padding: 0 7px;
	}
}

.segmented input:checked + span {
	color: var(--text);
	background: var(--ink-raised);
}

.segmented input:focus-visible + span {
	outline: 3px solid var(--focus);
}

/* Boxes drawn as chips: urgent, another language. */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chips label {
	position: relative;
	margin: 0;
}

.chips input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.chips span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--control-height);
	padding: 0 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-control);
}

.chips input:checked + span {
	color: var(--accent-strong);
	background: var(--accent-soft);
	border-color: transparent;
}

.chips input:checked + span::before {
	content: "✓";
	font-weight: 700;
}

.chips input:focus-visible + span {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

/* The calls page's numbers (the owner's sample's "Today's numbers"): two tiles a row on a phone, four from 900 px. */
.stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
}

.stats > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
	border-inline-end: 1px solid var(--line);
}

.stats > div:nth-child(2n) {
	border-inline-end: 0;
}

.stats .n {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.stats .l {
	font-size: 13px;
	color: var(--text-muted);
}

.stats .d {
	margin-top: 4px;
	font-size: 12px;
	color: var(--text-faint);
}

.stats .d.up {
	color: var(--success-strong);
}

.stats .d.down {
	color: var(--danger-strong);
}

@media (min-width: 900px) {
	.stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.stats > div {
		border-bottom: 0;
		border-inline-end: 1px solid var(--line);
	}

	.stats > div:last-child {
		border-inline-end: 0;
	}
}

.calls {
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
}

.calls .head {
	display: none;
}

.calls-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.call {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	grid-template-areas: "icon job time" "icon meta status";
	gap: 2px 12px;
	align-items: center;
	padding: 12px 14px;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

.calls-list li:last-child .call {
	border-bottom: 0;
}

.call:hover {
	background: color-mix(in oklab, var(--card), var(--text) 3%);
}

/* A hotline's rows (_ReportItem, in the calls and the callback requests): the same subtle highlight under the pointer as a
   call row has (the owner, 2026-11-04), on these two lists only. */
.report-rows > li:hover {
	background: color-mix(in oklab, var(--card), var(--text) 3%);
}

/* The row's first line: the report and the call, then the tags. */
.report-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
}

/* A name cut to 20 characters, "..." and its ⓘ on the row's line (the owner, 2026-11-04): the ⓘ's wrapper (.label-row) runs
   in the text, not on a line of its own. */
.report-where .label-row {
	display: inline-flex;
	margin-bottom: 0;
	vertical-align: middle;
}

.call:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: -3px;
}

.state {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	color: var(--text-muted);
	background: var(--ink-raised);
	border-radius: var(--radius-s);
}

.state svg {
	width: 18px;
	height: 18px;
}

.state-urgent {
	color: var(--danger-strong);
	background: var(--danger-soft);
}

.state-callback {
	color: var(--warning-strong);
	background: var(--warning-soft);
}

.state-handled {
	color: var(--success-strong);
	background: var(--success-soft);
}

.state-ai {
	color: var(--accent-strong);
	background: var(--accent-soft);
}

.call .state {
	grid-area: icon;
}

.call .jobcell {
	display: contents;
}

.call .job {
	grid-area: job;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.call .meta {
	grid-area: meta;
	overflow: hidden;
	font-size: 13px;
	color: var(--text-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.call .time {
	grid-area: time;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--text-faint);
	text-align: end;
}

.call .status {
	grid-area: status;
	justify-self: end;
}

.call .who,
.call .min {
	display: none;
}

@media (min-width: 900px) {
	.calls .head,
	.call {
		display: grid;
		grid-template-columns: 36px minmax(0, 2fr) minmax(0, 1fr) 200px 48px 88px;
		grid-template-areas: none;
		gap: 14px;
	}

	.calls .head {
		padding: 10px 14px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--text-faint);
		border-bottom: 1px solid var(--line);
	}

	.calls .head .end {
		text-align: end;
	}

	.call .state,
	.call .job,
	.call .meta,
	.call .time,
	.call .status {
		grid-area: auto;
	}

	.call .jobcell {
		display: flex;
		flex-direction: column;
		gap: 1px;
		min-width: 0;
	}

	.call .who,
	.call .min {
		display: block;
		font-size: 14px;
		color: var(--text-muted);
	}

	.call .min {
		font-variant-numeric: tabular-nums;
		text-align: end;
	}

	.call .status {
		justify-self: start;
	}
}

.list-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--text-muted);
	border-top: 1px solid var(--line);
}

/* A list's pages (_Pager, the owner, 2026-11-04): Previous at the left, the numbers, how many and the box to go to a
   page between, Next at the right; both ends keep their room when empty, so the middle stays where it is. */
.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.pager-end {
	display: flex;
	flex: 1 1 0;
	min-width: max-content;
}

.pager-next {
	justify-content: flex-end;
}

/* Previous and Next outlined, as quieter actions than the page's own (busybooking.css's .button would fill them), and so is
   the calls toolbar's Export beside its Search (the owner, 2026-11-04). */
.pager .button.button-outline,
.toolbar .button.button-outline {
	color: var(--text);
	background: transparent;
	border-color: var(--line-strong);
}

.pager-middle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pager .pagination {
	gap: 4px;
	margin: 0;
}

.pager .pagination a,
.pager .pagination [aria-current="page"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--control-height);
	height: var(--control-height);
	padding: 0 8px;
	color: var(--text);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-control);
}

.pager .pagination [aria-current="page"] {
	font-weight: 600;
	color: var(--on-accent);
	background: var(--accent);
	border-color: var(--accent);
}

.pager-go {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pager-go input {
	width: 5.5em;
	height: var(--control-height);
}

/* On a phone the ends take a row of their own each side, the numbers and the box under them. */
@media (max-width: 640px) {
	.pager-middle {
		order: 3;
		flex-basis: 100%;
	}

	.pager .button-small {
		width: auto;
	}
}

/* A dropdown of boxes to tick (multiselect.js): the summary drawn as a select, the boxes in a panel under it. */
.multiselect {
	position: relative;
	max-width: 420px;
}

.multiselect > summary {
	display: flex;
	align-items: center;
	height: var(--control-height);
	padding: 0 40px 0 14px;
	overflow: hidden;
	color: var(--text);
	white-space: nowrap;
	text-overflow: ellipsis;
	list-style: none;
	cursor: pointer;
	background: var(--field-bg) url("/_content/Winsmith.BusyBooking.WebCore/images/select-chevron.svg") no-repeat right 14px center / 14px;
	border: 1px solid var(--field-line);
	border-radius: var(--radius-field);
}

.multiselect > summary::-webkit-details-marker {
	display: none;
}

.multiselect > summary:hover {
	border-color: var(--line-strong);
}

.multiselect > summary:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

.multiselect-options {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	display: grid;
	gap: 12px;
	margin-top: 4px;
	padding: 12px 14px;
	background: var(--card);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-field);
	box-shadow: var(--shadow-2);
	max-height: min(60vh, 420px);
	overflow-y: auto;
}

/* A box a search hid (multiselect.js): .checkbox's flex would show it otherwise. */
.multiselect-options [hidden] {
	display: none;
}

/* A dropdown with a search box is wide enough to type in, even with a short summary ("All projects"): the dropdown, not
   its panel, so the toolbar wraps it to a row of its own rather than the panel running past the window. */
.multiselect[data-multiselect-search] {
	min-width: min(260px, 100%);
}

/* The box to find one among many (data-multiselect-search), kept at the top while the boxes scroll under it. */
.multiselect-search {
	position: sticky;
	top: 0;
	z-index: 1;
	width: 100%;
	height: var(--control-height);
}

/* The setup steps already done (_SetupSteps): folded under the steps left, opened only to look back. */
.setup-done {
	margin-top: 16px;
}

.setup-done > summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--text-muted);
	font-weight: 600;
	cursor: pointer;
}

.setup-done > summary:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

/* A card that opens and closes (CardTagHelper, the brand's collapsible card): the title row is the switch, with a
   chevron before the title that points down while it is open, and the card's body under a hairline. */
.card:has(> .card-details) {
	padding: 0;
}

.card-details > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 14px 24px;
	list-style: none;
	cursor: pointer;
	border-radius: var(--radius-l);
}

/* The head is a smaller row: every control in it (a button, a choice) takes the head's height together (the owner,
   2026-10-24: smaller than the head, the same height as each other). */
.card-details > summary {
	--control-height: var(--control-height-head);
}

.card-details > summary::-webkit-details-marker {
	display: none;
}

.card-details > summary h2 {
	margin: 0;
}

.card-details > summary::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-inline-end: 2px solid var(--text-faint);
	border-bottom: 2px solid var(--text-faint);
	rotate: -45deg;
	translate: 0 -1px;
	transition: rotate 0.2s ease-out;
}

.card-details[open] > summary::before {
	rotate: 45deg;
	translate: 0 -3px;
}

.card-details > summary:hover::before {
	border-color: var(--text);
}

.card-details > summary:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: -3px;
}

.card-details > .card-body {
	padding: 16px 24px 24px;
	border-top: 1px solid var(--line);
}

/* A card that lays its parts out as a stack keeps doing so inside its body. */
.card.stack > .card-details > .card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (prefers-reduced-motion: reduce) {
	.card-details > summary::before {
		transition: none;
	}
}

@media (max-width: 640px) {
	.card-details > summary {
		padding-inline: 16px;
	}

	.card-details > .card-body {
		padding: 16px;
	}
}

/* What each urgency level does, above the list of rules. */
.urgency-levels {
	margin-bottom: 16px;
}

/* Opening hours: three columns the same on every row (the day, as wide as the longest; the opening and closing times;
   the times after a break), under headings. Where there isn't room each row stacks, and "and, after a break" stands in
   for the headings. */
.hours {
	display: grid;
	grid-template-columns: max-content max-content minmax(0, 1fr);
	column-gap: 0;
}

.hours > li {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	align-items: center;
	gap: 8px 24px;
}

.hours > li.hours-head {
	padding-top: 0;
	padding-bottom: 0;
	min-height: 0;
	background: none;
	border: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.hours .field {
	margin-bottom: 0;
}

.hours-span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hours-span input[type="time"] {
	width: auto;
}

.hours-break {
	display: none;
}

/* Stacked whenever the hours' own form is too narrow for the four times in a row (a phone, or a page beside the
   settings menu), not only on phones. The form is the container: a fieldset can't be one reliably. */
form:has(.hours) {
	container: hours / inline-size;
}

@container hours (max-width: 799px) {
	.hours {
		grid-template-columns: minmax(0, 1fr);
	}

	.hours > li.hours-head {
		display: none;
	}

	.hours-break {
		display: block;
		margin-bottom: 4px;
	}
}

/* The side column's links and account (_Layout, menu.js): on wide screens the button is hidden and they sit at the foot
   of the column, one per row, the account under a hairline; under 980 px they fold under the button in the top bar,
   each tall enough to tap. The signed-in email sits between "Account" and "Sign out" there. */
.menu-button {
	display: none;
}

.site-menu {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
}

.site-menu nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.site-menu nav a {
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font-size: 14px;
	color: var(--text-muted);
	text-decoration: none;
}

.site-menu nav a:hover {
	color: var(--text);
	background: var(--ink-raised);
}

.site-menu .account-nav {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 12px 10px 0;
	border-top: 1px solid var(--line-soft);
	font-size: 13px;
}

.site-menu .account-nav > span {
	color: var(--text);
	font-weight: 600;
}

@media (max-width: 979px) {
	.menu-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: var(--control-height);
		height: var(--control-height);
		margin: 0 0 0 auto;
		padding: 0;
		color: var(--text);
		background: transparent;
		border: 1px solid var(--line);
		border-radius: var(--radius-control);
	}

	.menu-button:hover {
		background: var(--ink-raised);
	}

	.menu-close-icon,
	.menu-button[aria-expanded="true"] .menu-open-icon {
		display: none;
	}

	.menu-button[aria-expanded="true"] .menu-close-icon {
		display: block;
	}

	.site-menu {
		display: none;
		order: 4;
		flex: 1 1 100%;
		gap: 0;
		margin-top: 0;
	}

	.menu-button[aria-expanded="true"] ~ .site-menu {
		display: flex;
	}

	.site-menu nav,
	.site-menu .account-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		margin: 0;
		padding: 4px 0;
		border-top: 1px solid var(--line-soft);
	}

	.site-menu nav a,
	.site-menu .account-nav a,
	.site-menu .account-nav .link-button {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: var(--control-height);
		padding: 0;
		font-size: 16px;
		text-align: left;
		text-decoration: none;
	}

	.site-menu nav a:hover {
		background: none;
	}

	.site-menu .account-nav a {
		order: 1;
	}

	.site-menu .account-nav > span {
		order: 2;
		padding: 10px 0;
		font-weight: 400;
		color: var(--text-muted);
	}

	.site-menu .account-nav .inline-form {
		display: block;
		order: 3;
	}
}

/* A site's map (Hotline 2) at the top of its page's right column, above its contacts (the owner, 2026-10-29: "put the
   map area on top of contacts"; it floated at the window's top right before): square and as wide as the column, the
   live map (Azure Maps fills the box it is given) and the area's picture alike, the picture whole, its copyright line
   included. */
.map-canvas,
.map-picture {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1;
	border-radius: var(--radius-s);
	overflow: hidden;
}

.map-picture {
	block-size: auto;
	object-fit: contain;
}

/* D256: the map above a hotline's calls and callback requests, between the toolbar and the list: open from 980 px,
   folded behind "Show map" on a phone (calls-map.js), wide and short at a desk and square on a phone, the legend under
   it. A row whose marker is hovered is lit like a hovered row. */
.call-map {
	margin-block: 12px;
	border: 1px solid var(--line);
	background: var(--card);
}

.call-map > summary {
	display: flex;
	align-items: center;
	min-block-size: var(--control-height);
	padding-inline: 12px;
	cursor: pointer;
	font-weight: 600;
}

.call-map[open] .call-map-show,
.call-map:not([open]) .call-map-hide {
	display: none;
}

.call-map-canvas {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1;
}

@media (min-width: 980px) {
	.call-map-canvas {
		aspect-ratio: auto;
		block-size: 380px;
	}
}

.call-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 8px 12px;
	list-style: none;
	font-size: 0.875em;
}

.call-map-legend li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.map-swatch {
	display: inline-block;
	inline-size: 12px;
	block-size: 12px;
	border: 1.5px solid #fff;
	outline: 1px solid var(--line);
}

.map-kind-question { background: var(--chart-1); }
.map-kind-complaint { background: var(--chart-2); }
.map-kind-damage { background: var(--chart-3); }
.map-kind-hazard { background: var(--chart-4); }
.map-kind-none { background: var(--chart-before); }

.map-waiting {
	background: transparent;
	border: 3px solid var(--text);
	outline: 0;
}

.call-map-box {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-inline-size: 260px;
	padding: 10px 12px;
	color: #101418;
	font-size: 0.875rem;
	/* A long word (a place's address, a pasted link) wraps inside the box instead of running out of it. */
	overflow-wrap: anywhere;
}

.call-map-box .button {
	align-self: flex-start;
	margin-block-start: 4px;
}

.call-map-name {
	padding: 6px 10px;
	color: #101418;
	font-size: 0.875rem;
}

.is-map-highlighted,
.is-map-highlighted > .call,
.report-rows > li.is-map-highlighted {
	background: var(--chart-hover);
}

/* What is under the map (the town, the upload, removing the area), folded until opened (the owner, 2026-10-29); its
   summary a line with a chevron that turns when open, as the projects menu's. */
.map-foot > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-block-size: var(--control-height);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
	list-style: none;
}

.map-foot > summary::-webkit-details-marker {
	display: none;
}

.map-foot > summary::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	rotate: -45deg;
	transition: rotate 0.15s ease-out;
}

.map-foot[open] > summary::before {
	rotate: 45deg;
}

.map-foot > summary:hover {
	color: var(--text);
}

.map-foot > .stack {
	margin-top: 8px;
}

/* The ⓘ beside a field (D184, FieldInfoTagHelper): a label and its ⓘ on one line; in a legend, after its words. The ⓘ is
   16 px, with a 28 px area to tap. */
.label-row {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-bottom: 6px;
}

.label-row > label {
	margin-bottom: 0;
}

/* An option's ⓘ in a list of choices (the owner, 2026-11-03): on the option's line, the list keeping its own spacing. */
.choices .checkbox > .label-row {
	margin-bottom: 0;
}

/* A button's ⓘ ("Not a job"): on the button's line, which keeps its own spacing. */
.label-row:has(> button) {
	margin-bottom: 0;
}

.info-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	margin-block: -6px;
	/* Round, as its icon: the one circle the sharp variation keeps (the owner, 2026-10-24). */
	border-radius: 50%;
	color: var(--text-faint);
	cursor: pointer;
	vertical-align: middle;
}

.info-trigger:hover,
.info-trigger[aria-expanded="true"] {
	color: var(--accent-strong);
}

.info-trigger:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: -2px;
}

/* A table whose rows are edited in place (the jobs a business doesn't do): a field per row, its buttons beside it; on a
   phone each row stacks, the buttons under the field. */
.edit-table td {
	vertical-align: middle;
}

.edit-table input[type="text"] {
	max-width: none;
}

.edit-table-actions {
	width: 1%;
	white-space: nowrap;
}

.edit-table-actions > * + * {
	margin-left: 12px;
}

@media (max-width: 640px) {
	.edit-table thead {
		display: none;
	}

	.edit-table tr,
	.edit-table td {
		display: block;
		width: auto;
	}

	.edit-table td {
		border-bottom: 0;
		padding-bottom: 4px;
	}

	.edit-table tr {
		border-bottom: 1px solid var(--line);
		padding-bottom: 8px;
	}
}

/* A call's transcript (the owner, 2026-10-26): the AI's lines on a faint tint, its name in the accent, so the caller's
   and the AI's sides are told apart at a glance. */
/* No gap between the columns, so an AI line's tint is one band; the name's padding keeps them apart. */
dl.transcript { gap: 0; }
dl.transcript dt { padding: 6px 24px 6px 10px; }
dl.transcript dd { padding: 6px 10px; }
dl.transcript .turn-ai { background: var(--ink-raised); }
dl.transcript dt.turn-ai { color: var(--accent-strong); }

@media (max-width: 640px) {
	dl.transcript dt { padding: 6px 10px 0; }
	dl.transcript dd { margin-bottom: 0; padding-top: 2px; }
}

/* Hotline 10: a change files propose, its value now and the one proposed; the work now keeps its line breaks. */
dl.proposal-change dd { white-space: pre-line; }

@media (max-width: 640px) {
	dl.proposal-change { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	dl.proposal-change dd { margin-bottom: 8px; }
}

/* A group inside a card (the owner, 2026-10-28: a list's heading sat far from its own "Add" button and next to the next
   list's): each list or form with what adds to it, in a box of its own under its own heading, so a label, its list and
   its button read as one. A card with several groups puts each in one; a card with one thing needs none. */
.subcard { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius-m); min-width: 0; }
.subcard > h3 { margin: 0; }
.subcard > :is(p, form, ul):last-child { margin-bottom: 0; }

/* The subcard's gap spaces its parts alone (the owner, 2026-11-02: "Who gets the reports" was "too tall", the paragraphs'
   own margins adding to the gap around "No one yet."). */
.subcard > p { margin-block: 0; }

@media (max-width: 640px) {
	.subcard { padding: 12px; }
}

/* A page's layout (_Layout; the owner, 2026-10-29: "update the card stacks so they don't stick out so far beyond their
   contents. maybe the content main element should be split into two"; "dont hardcode the 640px, make it flexible so it
   looks relatively good even on smaller pc screens"; "all cards need to be the same size on all pages"; "on pages that
   have contacts, put the contacts card on the right column"; "basically have a 1 column layout, and a 2 column
   layout"): one column, every card its width; or, for a page with a Side section, two once the page is at least 960 px
   wide, three fifths for the page's cards and two for the side's, each column's cards one width, sized by the window,
   never a fixed width. Narrower, and on phones, one column, the side's cards after the page's. */
.content {
	container: page / inline-size;
}

.page-main,
.page-side {
	min-width: 0;
}

@container page (min-width: 960px) {
	.page-columns-two {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: 16px;
		align-items: start;
	}
}

/* A text box as wide as its card, so a card's words, lists, boxes and long fields line up (the owner, 2026-10-29: "a lot
   of cards have areas of text that are significantly longer than input fields ... make that more uniform"). */
.card textarea {
	max-width: none;
}

/* The Projects pages' menu (_ProjectsMenu): a project's sites fold under it (the owner, 2026-10-28). On phones the row
   of chips has the current project's pages and a chip for each other project; in the column each project is a
   disclosure, the one being seen open. */
.settings-menu .projects-menu-column {
	display: none;
}

@media (min-width: 980px) {
	.settings-menu a.projects-menu-chips {
		display: none;
	}

	.settings-menu .projects-menu-column {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin-top: 8px;
	}

	.projects-menu-column > summary {
		display: flex;
		align-items: flex-start;
		gap: 6px;
		padding: 7px 10px;
		font-size: 13px;
		font-weight: 600;
		color: var(--text-muted);
		overflow-wrap: anywhere;
		cursor: pointer;
		list-style: none;
		border-radius: var(--radius-s);
	}

	.projects-menu-column > summary::-webkit-details-marker {
		display: none;
	}

	/* A chevron that turns when the project is open. */
	.projects-menu-column > summary::before {
		content: "";
		flex: none;
		width: 6px;
		height: 6px;
		margin-top: 6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		rotate: -45deg;
		transition: rotate 0.15s ease-out;
	}

	.projects-menu-column[open] > summary::before {
		rotate: 45deg;
	}

	.projects-menu-column > summary:hover {
		color: var(--text);
		background: var(--ink-raised);
	}

	/* A line each: inside an open disclosure the links flow as text, so short site names ("Area 1544", "Area 1549") sat
	   side by side (the owner, 2026-10-29). */
	.projects-menu-column > a {
		display: flex;
		padding-inline-start: 24px;
	}
}

/* Files chosen before they are sent (file-picker.js, the owner, 2026-10-28): each with its size and × to take it off;
   the upload's progress bar under them (busy-form.js). */
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.file-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 6px 6px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); }
.file-list li > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-list li > .muted { flex: none; font-size: 13px; }
.file-remove { flex: none; width: var(--control-height); min-height: var(--control-height); margin: 0; padding: 0; font-size: 20px; line-height: 1; color: var(--text-muted); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-control); }
.file-remove:hover { color: var(--text); }
/* Its own display would otherwise show it while hidden: it shows only once files are chosen. */
.file-list[hidden] { display: none; }

/* The read's progress modal (_ReadProgress, busy-form.js; the owner, 2026-10-28): a bar and its percentage, nothing
   else. The bar's own value moves it; the browser animates nothing of ours. */
.dialog.read-progress { width: min(420px, calc(100vw - 32px)); padding: 24px; overflow: hidden; }
.dialog.read-progress[open] { display: flex; align-items: center; gap: 12px; }
.read-progress progress { flex: 1; min-width: 0; height: 12px; accent-color: var(--accent); }
.read-progress-percent { flex: none; min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* D233: each of a proposal's questions in a panel of its own (the owner, 2026-10-28: the questions were hard to tell from
   each other and from the background): the card's colour on the group's, a stronger edge and the accent down its side;
   the legend inside the panel rather than on its border. */
.proposal-question,
.proposal-questions > li {
	margin: 0;
	padding: 14px 16px 16px;
	background: var(--card);
	border: 1px solid var(--line-strong);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-m);
}

.proposal-question > legend {
	float: left;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	font-weight: 600;
}

.proposal-question > legend + * {
	clear: both;
}

.proposal-questions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (max-width: 640px) {
	.proposal-question,
	.proposal-questions > li {
		padding: 12px 12px 14px;
	}
}

/* A proposal's changes to a site and its new sites as tables (the owner, 2026-10-28): the box column narrow, the values
   keeping their line breaks (the work now is often several lines). */
.subcard > h4 { margin: 0; }
.proposal-changes .proposal-accept { width: 1%; white-space: nowrap; }
.proposal-changes .proposal-value { white-space: pre-line; }
/* Words stay whole: a narrow column grows to its longest word rather than splitting it. */
.proposal-changes td { overflow-wrap: break-word; word-break: normal; }
.proposal-changes .proposal-name { min-width: 9em; }
/* Headers wrap too ("Expected end date"), so six columns fit the card. */
.proposal-changes thead th { white-space: normal; overflow-wrap: normal; word-break: normal; }
.proposal-accept input { width: 20px; height: 20px; }
/* "Check this" with its (?) beside it, the reason the AI gave (the owner, 2026-10-28). */
.check-this { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.proposal-changes .check-this { display: flex; margin-top: 4px; }

/* A site whose area overlaps another's (the owner, 2026-10-29): the names may be long, so the badge wraps on a phone. */
.item-main .badge { white-space: normal; }

/* A business's Overview as a dashboard (D238): its cards one under another, the page's column wide like every page's
   cards (the owner, 2026-10-29: "all cards need to be the same size on all pages"; two side by side before). */
.dashboard {
	display: grid;
	gap: 16px;
	align-items: start;
	margin-bottom: 16px;
}

.dashboard > .card {
	margin-bottom: 0;
	min-width: 0;
}

.dashboard-more {
	margin: 12px 0 0;
}

.dashboard-sub {
	margin-top: 16px;
}

/* One number with its words (the callback requests waiting, the month's use). */
.dashboard-figure {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.dashboard-figure .n {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.dashboard-figure .l {
	color: var(--text-muted);
}

/* Four tiles two a row wherever the card is half the page wide. */
@media (min-width: 900px) {
	.stats.stats-two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stats.stats-two > div {
		border-bottom: 1px solid var(--line);
	}

	.stats.stats-two > div:nth-child(2n) {
		border-inline-end: 0;
	}

	.stats.stats-two > div:nth-last-child(-n + 2) {
		border-bottom: 0;
	}
}

/* The charts' colours (the dataviz reference palette's first four slots, in its fixed order, validated for colour
   blindness against the card in both themes), the earlier period's bars in a quiet grey, and the chart's lines. Marks
   only: words stay in the text colours. */
:root {
	--chart-1: light-dark(#2A78D6, #3987E5);
	--chart-2: light-dark(#EB6834, #D95926);
	--chart-3: light-dark(#1BAF7A, #199E70);
	--chart-4: light-dark(#EDA100, #C98500);
	--chart-before: light-dark(#8A8F96, #6E757D);
	--chart-hover: color-mix(in oklab, var(--text), transparent 90%);
}

.series-1 { fill: var(--chart-1); stroke: var(--chart-1); }
.series-2 { fill: var(--chart-2); stroke: var(--chart-2); }
.series-3 { fill: var(--chart-3); stroke: var(--chart-3); }
.series-4 { fill: var(--chart-4); stroke: var(--chart-4); }
.series-before { fill: var(--chart-before); stroke: var(--chart-before); }

.chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--text-muted);
}

.chart-legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* A legend's key is the mark's own shape: a short line for a line, a block for a bar. */
.key {
	display: inline-block;
	flex: none;
}

.key-line {
	width: 16px;
	height: 0;
	border-top: 2px solid;
}

.key-bar {
	width: 12px;
	height: 12px;
}

.key-line.series-1 { border-color: var(--chart-1); }
.key-line.series-2 { border-color: var(--chart-2); }
.key-line.series-3 { border-color: var(--chart-3); }
.key-line.series-4 { border-color: var(--chart-4); }
.key-bar.series-1 { background: var(--chart-1); }
.key-bar.series-2 { background: var(--chart-2); }
.key-bar.series-before { background: var(--chart-before); }

/* The line chart: the scale's three numbers beside the plot, the first and last days under it. */
.line-chart {
	margin: 0;
}

.chart-frame {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
}

.chart-y {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 180px;
	margin: -8px 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--text-faint);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.chart-plot {
	display: block;
	width: 100%;
	height: 164px;
	margin: 0;
	overflow: visible;
}

.chart-grid,
.chart-axis {
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
}

.chart-grid {
	stroke: var(--line);
}

.chart-axis {
	stroke: var(--line-strong);
}

.chart-line {
	fill: none;
	stroke-width: 2px;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.chart-hits rect {
	fill: transparent;
	pointer-events: all;
}

.chart-hits rect:hover {
	fill: var(--chart-hover);
}

.chart-x {
	display: flex;
	justify-content: space-between;
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--text-faint);
}

.line-chart figcaption {
	margin-top: 8px;
	font-size: 13px;
}

.chart-table {
	margin-top: 12px;
}

.chart-table > summary {
	cursor: pointer;
	color: var(--link);
	font-size: 14px;
}

.chart-table .table-wrap {
	margin-top: 8px;
	max-height: 320px;
	overflow-y: auto;
}

/* The bar charts: each row its words over its bar, so long names wrap and never squeeze the bar. */
.bars {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bar-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
	margin-bottom: 4px;
	font-size: 14px;
}

.bar-name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.bar-values {
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.bar {
	display: block;
	width: 100%;
	height: 12px;
}

.bar-thin {
	height: 6px;
	margin-top: 2px;
}

.bar-track {
	fill: var(--ink-raised);
}

.bar rect {
	stroke: none;
}

/* Calls per day's readout (the owner, 2026-10-29): the day over the legend, each line's number beside its name, and a
   thin line marking the day the pointer is over (calls-per-day.js). */
.chart-readout-day {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}

.readout-value {
	min-width: 2ch;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.chart-cursor {
	stroke: var(--text-muted);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	visibility: hidden;
	pointer-events: none;
}

.chart-cursor.is-shown {
	visibility: visible;
}

/* The numbers by day: the row of the day the pointer is over on the chart (the owner, 2026-10-29). */
.chart-table tr.is-current > * {
	background: var(--accent-soft);
	color: var(--text);
}

/* The dashboard's period, above everything on the Overview (the owner, 2026-10-29). */
.dashboard-period {
	margin-bottom: 16px;
}

/* A Hotline's projects and their Show under the period, in a row that wraps on a phone. */
.dashboard-projects {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 12px;
}

/* A custom range's two days and Show in a row under the period (_CustomRangeFields), wrapping on a phone. */
.custom-range {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 12px;
	margin: 0 0 16px;
}

.custom-range .field {
	margin: 0;
}

.toolbar .custom-range {
	margin: 0;
}

.custom-range input[type="date"] {
	height: var(--control-height);
}

.custom-range p {
	flex-basis: 100%;
	margin: 0;
}

/* D244: a proposal's proposed cells as fields while it can be applied (the owner, 2026-10-29), as wide as their cell. */
.proposal-changes input[type="text"],
.proposal-changes input[type="date"],
.proposal-changes textarea {
	inline-size: 100%;
	min-inline-size: 0;
}

/* "No … yet" boxes are small on every page, so an empty list doesn't outweigh the card it is in (the owner, 2026-10-29:
   "the 'no contacts yet' box is too big"; "make all of the 'no [something] yet.' boxes smaller"). */
.empty {
	padding: 12px 16px;
	border-width: 1px;
	font-size: 14px;
}

/* Cards that float (card-float.js; the owner, 2026-10-29: "on pc on the header for the card create a 'popup' symbol or
   button, when you click it the card begins floating and can move whereever you want ... minimize, maximize/restore
   ... put it back to its original place"): only from 980 px; on a phone neither the buttons nor "Reset tabs" show and
   nothing floats. A card's buttons sit at the right of its head: the pop-out one while it is in place; minimize or
   restore and put back while it floats. A floating card keeps the width it had, at the place and on the layer
   card-float.js gives it (--float-left, --float-top, --float-layer), scrolling past the window's height; minimized, its
   head alone. */
.card-float-tools,
.card-float-reset {
	display: none;
}

@media (min-width: 980px) {
	.card-float-reset {
		display: inline;
	}

	.card.has-float-tools {
		position: relative;
	}

	.card.has-float-tools > .card-details > summary,
	.card.has-float-tools > h2 {
		padding-inline-end: 56px;
	}

	.card.has-float-tools.is-floating > .card-details > summary,
	.card.has-float-tools.is-floating > h2 {
		padding-inline-end: 88px;
	}

	.card-float-tools {
		position: absolute;
		inset-block-start: 14px;
		inset-inline-end: 16px;
		z-index: 1;
		display: flex;
		gap: 4px;
	}

	.card:not(:has(> .card-details)) > .card-float-tools {
		inset-block-start: 18px;
	}

	.card-float-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 28px;
		block-size: 28px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: var(--radius-s);
		background: transparent;
		color: var(--text-muted);
		cursor: pointer;
	}

	.card-float-button:hover {
		background: var(--surface-3);
		color: var(--text);
	}

	.card:not(.is-floating) .card-float-minimize,
	.card:not(.is-floating) .card-float-putBack,
	.card.is-floating .card-float-popOut {
		display: none;
	}

	/* Pop out: two squares, one lifted off the other. */
	.card-float-popOut::before {
		content: "";
		inline-size: 9px;
		block-size: 9px;
		border: 2px solid currentColor;
		box-shadow: -4px 4px 0 -2px var(--card), -4px 4px 0 0 currentColor;
		translate: 2px -2px;
	}

	/* Minimize: a line; restore: a square. */
	.card-float-minimize::before {
		content: "";
		inline-size: 12px;
		block-size: 0;
		border-block-end: 2px solid currentColor;
	}

	.card-float-minimize[aria-expanded="false"]::before {
		block-size: 10px;
		border: 2px solid currentColor;
	}

	/* Put back: a corner, the card going back down into the page. */
	.card-float-putBack::before {
		content: "";
		inline-size: 10px;
		block-size: 10px;
		border-inline-start: 2px solid currentColor;
		border-block-end: 2px solid currentColor;
		translate: 1px -1px;
	}

	.card.is-floating {
		position: fixed;
		inset-block-start: var(--float-top, 80px);
		inset-inline-start: var(--float-left, 80px);
		z-index: var(--float-layer, 20);
		inline-size: var(--float-width, 480px);
		max-inline-size: calc(100vw - 16px);
		max-block-size: calc(100vh - 16px);
		margin: 0;
		overflow-y: auto;
		box-shadow: var(--shadow-2);
	}

	.card.is-floating > .card-details > summary,
	.card.is-floating > h2 {
		cursor: move;
		user-select: none;
		touch-action: none;
	}

	.card.is-minimized > .card-details > .card-body,
	.card.is-minimized:not(:has(> .card-details)) > :not(h2, .card-float-tools) {
		display: none;
	}
}