/* Intranet Colewood brand — single scheme (no multi-brand map) */

:root {
	--intranet-colewood: #ff7700;
	--intranet-colewood-navy: #2e3548;
	--admin-colewood-theme: var(--intranet-colewood);
}

body.contrast-colewood {
	--admin-brand: var(--intranet-colewood);
	--bs-primary: var(--intranet-colewood);
	--bs-primary-rgb: 255, 119, 0;
	--bs-secondary: var(--intranet-colewood-navy);
	--bs-secondary-rgb: 46, 53, 72;

	/* Links follow the brand colour. Bootstrap composes them from the -rgb
	   pair (for --bs-link-opacity), so override that, not the colour itself.
	   Orange links drop the underline — colour alone carries the affordance —
	   but inside cards the surrounding content is denser, so the underline
	   stays to keep them visibly clickable. Buttons set their own styles. */
	--bs-link-color-rgb: var(--bs-primary-rgb);
	--bs-link-hover-color-rgb: var(--bs-primary-rgb);

	& a,
	& a:hover {
		text-decoration: none;
	}

	& .card a,
	& .card a:hover {
		text-decoration: underline;
	}

	/* Components that style their own links — buttons, DataTable rows,
	   dropdown/nav menus, contact chips, quick-link tiles — keep Bootstrap's
	   underline-free look even inside cards, where the rule above would
	   out-specify them. */
	& .card :is(a.btn, .dropdown-menu a, .nav a, .table a, .contact-chip, .contact-card, .quick-link, a.company-news__item, a.org-tree__avatar-link),
	& .card :is(a.btn, .dropdown-menu a, .nav a, .table a, .contact-chip, .contact-card, .quick-link, a.company-news__item, a.org-tree__avatar-link):hover {
		text-decoration: none;
	}

	&.admin-auth-page {
		.auth-brand-glow {
			background: radial-gradient(circle, rgb(255 119 0 / 28%) 0%, transparent 68%);
		}

		.auth-card {
			box-shadow:
				0 1px 2px rgb(15 23 42 / 5%),
				0 12px 32px rgb(15 23 42 / 8%);
		}
	}
}

:root[data-bs-theme="dark"] {
	body.contrast-colewood.admin-auth-page {
		.auth-brand-panel {
			background:
				linear-gradient(155deg, var(--intranet-colewood-navy) 0%, #1a2030 55%, #141824 100%);
		}

		.auth-brand-glow {
			opacity: 1;
		}

		.auth-theme-toggle {
			background: var(--admin-surface-2);
			border-color: var(--admin-surface-3);
			box-shadow: none;
		}

		.auth-card {
			box-shadow:
				0 1px 2px rgb(0 0 0 / 20%),
				0 12px 32px rgb(0 0 0 / 25%);
		}

		.auth-oauth-btn--google {
			--bs-btn-bg: var(--admin-surface-2);
			--bs-btn-hover-bg: var(--admin-surface-3);
		}
	}
}

/* Page-body contrast helpers (BS5 tables / forms on themed surfaces) */
#page-content {
	table.table {
		--bs-table-bg: transparent;
		--bs-table-color: var(--admin-text-default);
		--bs-table-border-color: var(--admin-surface-3);
		color: var(--admin-text-default);
	}

	.form-control,
	.form-select {
		background-color: var(--bs-body-bg);
		color: var(--bs-body-color);
		border-color: var(--bs-border-color);
	}
}

#admin-sidebar {
	.intranet-nav .badge {
		flex-shrink: 0;
		font-weight: 500;
		font-size: 0.7rem;
	}

	.nav-link .nav-text {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Dark-mode contrast for chrome + migrated surfaces */
:root[data-bs-theme="dark"] {
	#intranet-toast-container {
		.toast {
			background-color: var(--admin-surface-1);
			color: var(--admin-text-default);
			border-color: var(--admin-surface-3);
		}

		.toast-header {
			background-color: var(--admin-surface-2);
			color: var(--admin-text-strong);
			border-bottom-color: var(--admin-surface-3);
		}
	}

	.modal-content {
		background-color: var(--admin-surface-1);
		color: var(--admin-text-default);
		border-color: var(--admin-surface-3);
	}

	.modal-header,
	.modal-footer {
		border-color: var(--admin-surface-3);
	}

	.dropdown-menu {
		--bs-dropdown-bg: var(--admin-surface-1);
		--bs-dropdown-color: var(--admin-text-default);
		--bs-dropdown-border-color: var(--admin-surface-3);
		--bs-dropdown-link-color: var(--admin-text-default);
		--bs-dropdown-link-hover-bg: var(--admin-surface-2);
		--bs-dropdown-link-hover-color: var(--admin-text-strong);
		--bs-dropdown-divider-bg: var(--admin-surface-3);
		--bs-dropdown-header-color: var(--admin-text-muted);
	}

	/* Soften primary on dark so orange stays readable on navy surfaces */
	body.contrast-colewood {
		--bs-link-color: #ff9a3d;
		--bs-link-hover-color: #ffb366;
	}
}

/* Hotdesk floor plan */
.hotdesk-floor-legend .hotdesk-swatch {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	vertical-align: -0.1rem;
	margin-right: 0.25rem;
}

.hotdesk-floor-plan svg .desk {
	cursor: default;

	/* Desk state is set as a class by hotdeskbookings.js; the fill comes from the
	   same --hotdesk-* tokens as the legend, so the two cannot drift apart.
	   Only modified desks are painted — a bare .desk keeps the SVG's own fill. */
	&.desk--available { --desk-fill: var(--hotdesk-available); --desk-ink: var(--intranet-colewood-navy); }
	&.desk--booked    { --desk-fill: var(--hotdesk-booked);    --desk-ink: #fff; }
	&.desk--half-day  { --desk-fill: var(--hotdesk-half-day);  --desk-ink: #fff; }
	&.desk--unused    { --desk-fill: var(--hotdesk-unused); }

	&[class*="desk--"] {
		rect { fill: var(--desk-fill); }
		path { fill: var(--desk-ink, currentColor); }
	}
}

/*
 * PPC / AdWords — days since last change severity.
 * Green → red ramp (legacy intent); theme-friendly surfaces for the legend.
 */
:root {
	--days-inactive-extremely-low: #37cf41;
	--days-inactive-very-low: #8bc34a;
	--days-inactive-low: #c0ca33;
	--days-inactive-mid: #f9a825;
	--days-inactive-high: #fb8c00;
	--days-inactive-very-high: #f57c00;
	--days-inactive-extremely-high: #e53935;
}

:root[data-bs-theme="dark"] {
	--days-inactive-extremely-low: #66bb6a;
	--days-inactive-very-low: #9ccc65;
	--days-inactive-low: #d4e157;
	--days-inactive-mid: #ffca28;
	--days-inactive-high: #ffa726;
	--days-inactive-very-high: #ff9800;
	--days-inactive-extremely-high: #ef5350;
}

.days-inactive--extremely-low { color: var(--days-inactive-extremely-low); }
.days-inactive--very-low { color: var(--days-inactive-very-low); }
.days-inactive--low { color: var(--days-inactive-low); }
.days-inactive--mid { color: var(--days-inactive-mid); }
.days-inactive--high { color: var(--days-inactive-high); }
.days-inactive--very-high { color: var(--days-inactive-very-high); }
.days-inactive--extremely-high { color: var(--days-inactive-extremely-high); }

.days-unchanged-legend {
	.days-unchanged-bucket {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		border: 1px solid var(--bs-border-color);
		background: var(--admin-surface-1, var(--bs-body-bg));
		color: var(--admin-text-default, var(--bs-body-color));
		font-weight: 500;

		&:hover,
		&:focus-visible {
			border-color: var(--admin-brand, var(--bs-primary));
			background: var(--admin-surface-2, var(--bs-secondary-bg));
		}

		&[aria-pressed="true"] {
			border-color: var(--admin-brand, var(--bs-primary));
			box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--admin-brand, var(--bs-primary)) 35%, transparent);
		}

		.days-unchanged-swatch {
			display: inline-block;
			width: 0.85rem;
			height: 0.85rem;
			border-radius: 0.2rem;
			flex-shrink: 0;
			border: 1px solid color-mix(in srgb, currentColor 40%, var(--bs-border-color));
		}

		&.days-inactive--extremely-low .days-unchanged-swatch { background-color: var(--days-inactive-extremely-low); }
		&.days-inactive--very-low .days-unchanged-swatch { background-color: var(--days-inactive-very-low); }
		&.days-inactive--low .days-unchanged-swatch { background-color: var(--days-inactive-low); }
		&.days-inactive--mid .days-unchanged-swatch { background-color: var(--days-inactive-mid); }
		&.days-inactive--high .days-unchanged-swatch { background-color: var(--days-inactive-high); }
		&.days-inactive--very-high .days-unchanged-swatch { background-color: var(--days-inactive-very-high); }
		&.days-inactive--extremely-high .days-unchanged-swatch { background-color: var(--days-inactive-extremely-high); }

		.days-unchanged-count {
			font-variant-numeric: tabular-nums;
			min-width: 1.5rem;
		}

		.days-unchanged-pct:empty {
			display: none;
		}
	}
}

/* Contact card (full) + contact chip (compact) — shared customisable border */
.contact-card,
.contact-chip {
	--contact-border: var(--bs-border-color);
	--contact-bg: var(--admin-surface-1, var(--bs-body-bg));
	--contact-fg: var(--admin-text-default, var(--bs-body-color));

	border: var(--contact-border-width, 3px) solid transparent;
	color: var(--contact-fg);
	background:
		linear-gradient(var(--contact-bg), var(--contact-bg)) padding-box,
		var(--contact-border) border-box;
	text-decoration: none;

	&:hover,
	&:focus-visible {
		color: var(--contact-fg);
		text-decoration: none;
	}

	&:focus-visible {
		outline: 2px solid var(--admin-brand, var(--bs-primary));
		outline-offset: 2px;
	}
}

.contact-card {
	--contact-border-width: 3px;
	--contact-avatar: 2.75rem;

	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0.85rem 1rem;
	border-radius: var(--bs-border-radius, 0.375rem);
	box-shadow: var(--bs-box-shadow-sm);
	font-size: 0.9375rem;
	line-height: 1.3;

	&.contact-card--compact {
		--contact-avatar: 2.25rem;
		padding: 0.55rem 0.75rem;
		font-size: 0.875rem;
	}

	/* Denser cards inside 4-col who’s where (e.g. Directors company-wide) */
	.whos-where--cols-4 &.contact-card--compact {
		--contact-avatar: 2rem;
		padding: 0.45rem 0.6rem;
		font-size: 0.8125rem;
	}

	.contact-card__row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 0.5rem;
		/* Wrap rather than squeeze: on a narrow card the status badge drops
		   under the name instead of fighting it for width. */
		flex-wrap: wrap;
	}

	.contact-card__identity {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		flex: 1 1 0;
		min-width: 0;
	}

	.contact-card__avatar {
		width: var(--contact-avatar);
		height: var(--contact-avatar);
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
	}

	.contact-card__avatar--initials {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--admin-surface-2, var(--bs-secondary-bg));
		color: var(--admin-text-muted, var(--bs-secondary-color));
		font-weight: 600;
		font-size: calc(var(--contact-avatar) * 0.36);
		user-select: none;
	}

	.contact-card__name {
		font-weight: 600;
	}

	.contact-card__subtitle {
		line-height: 1.25;
	}

	.contact-card__badge {
		align-self: flex-start;
	}

	.contact-card__profile-link {
		min-width: 0;

		&:hover .contact-card__name,
		&:focus-visible .contact-card__name {
			color: var(--admin-brand, var(--bs-primary));
		}
	}

	/* Manager staff cards etc. — personalised ring on the avatar only; the card
	   body holds week lists and must not wear the contact-chip border treatment. */
	&.contact-card--avatar-ring-only {
		--contact-border-width: 0;
		border: var(--bs-border-width) solid var(--bs-border-color);
		background: var(--contact-bg);

		.contact-avatar-ring {
			--contact-avatar: 2.75rem;

			.contact-avatar-ring__initials {
				font-size: calc(var(--contact-avatar) * 0.36);
			}
		}

		&.contact-card--compact .contact-avatar-ring {
			--contact-avatar: 2.25rem;
		}
	}
}

/* Manager staff cards — today row highlight (dashboard week + hybrid fortnight) */
.manager-staff-week-card,
.manager-staff-fortnight-card {
	.manager-staff-day--today {
		margin-inline: -0.25rem;
		padding-inline: 0.25rem;
		border-radius: var(--bs-border-radius-sm);
		background-color: var(--bs-tertiary-bg);
	}
}

/* Department manager — compact staff week cards in a responsive grid */
.manager-page {
	.manager-staff-week-card {
		.contact-card__identity {
			min-width: 0;
			flex: 1 1 auto;
		}

		.contact-card__row {
			flex-wrap: nowrap;
			align-items: center;
		}

		.contact-card__presence {
			line-height: 1;
		}

		.contact-card__week {
			font-size: 0.8125rem;
		}
	}
}

/* Managers hybrid bookings — fortnight staff cards (two-week side-by-side body) */
.manager-hybrid-bookings-page {
	.manager-staff-fortnight-card {
		.contact-card__identity {
			min-width: 0;
			flex: 1 1 auto;
		}

		.contact-card__row {
			flex-wrap: nowrap;
			align-items: center;
		}

		.contact-card__presence {
			line-height: 1;
		}

		.contact-card__week {
			font-size: 0.8125rem;
		}
	}
}

/* Bootstrap ships no min-width utility, but a flex child needs min-width: 0
   before text-truncate can bite — without it the child refuses to shrink, the
   row overflows, and the status badge rides over the name. whos_where.js and
   the contact-card partial have been using this class all along; now it
   exists. */
.min-w-0 {
	min-width: 0;
}

/* Select2 single selects wear Bootstrap's chevron rather than select2's own
   CSS-border triangle, so a select2 and a plain .form-select beside it look
   like the same control.

   The glyph is Bootstrap's --bs-form-select-bg-img, which it redefines under
   [data-bs-theme=dark] — but that variable is declared on .form-select
   itself, and select2 renders its container as a sibling of the (hidden)
   select rather than inside it, so the value does not inherit. Restated on
   :root here, where select2 can see it, while .form-select keeps setting its
   own identical value locally. */
:root {
	--intranet-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] {
	--intranet-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	/* Bootstrap's own metrics: 16x12 glyph, 0.75rem from the right edge. */
	inline-size: 2.25rem;
	background-image: var(--intranet-select-chevron);
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;

	/* select2 draws the triangle with borders on a <b>; the chevron replaces it. */
	b {
		display: none;
	}
}

/* Call notes keep the whitespace they were written with — two thirds carry
   newlines, and collapsing those turns a structured update into a wall.
   Wrapping is forced so a pasted URL cannot widen the modal. */
.call-note__body {
	display: block;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* PPC dashboard target line — the figure plus whether it was met. Colour is
   not the only signal: each state carries its own icon and the word. */
.ppc-target {
	display: inline-block;
	margin-top: 0.15rem;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--bs-secondary-color);
}

.ppc-target--achieved { color: #15803d; }
.ppc-target--on { color: #b45309; }
.ppc-target--missed { color: #b91c1c; }

/* Navbar timesheet recorder.

   One element, two states — the idle button and the live chip are both in the
   markup and CSS picks which is shown, so starting and stopping needs no
   re-render. Live, the chip is deliberately loud on dark headers; on the white
   daytime bar the idle control inverts to dark chrome. */
.timesheet-recorder {
	flex-shrink: 0;
}

.timesheet-recorder .timesheet-recorder__chip,
.timesheet-recorder--live .timesheet-recorder__start {
	display: none;
}

.timesheet-recorder--live .timesheet-recorder__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2rem 0.35rem 0.2rem 0.7rem;
	border-radius: 2rem;
	background: #fff;
	color: #1f2430;
	box-shadow: 0 0 0 0 rgb(255 255 255 / 70%);
	animation: recorder-pulse 2s ease-out infinite;
}

.timesheet-recorder__start {
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: 2rem;
	color: #fff;
	padding: 0.25rem 0.7rem;
	white-space: nowrap;

	&:hover,
	&:focus-visible {
		background: rgb(255 255 255 / 15%);
		border-color: #fff;
		color: #fff;
	}
}

html[data-time-header-tone="light"] .timesheet-recorder__start {
	border-color: rgb(15 23 42 / 18%);
	color: var(--admin-text-default, #334155);

	&:hover,
	&:focus-visible {
		background: rgb(15 23 42 / 6%);
		border-color: rgb(15 23 42 / 28%);
		color: var(--admin-text-strong, #0f172a);
	}
}

/* Only shown once the recording has outlived its own day; the amber reads
   against the white chip without competing with the red stop button. */
/* Two classes deep on purpose. Font Awesome is loaded after this file and
   .fa-solid sets its own display, so a single-class rule here loses on
   source order and the triangle showed on every recording regardless of the
   attribute. */
.timesheet-recorder .timesheet-recorder__warning {
	display: none;
	color: #b45309;
	font-size: 0.85rem;
	cursor: help;
}

.timesheet-recorder[data-overrunning="1"] .timesheet-recorder__warning {
	display: inline-block;
}

.timesheet-recorder__dot {
	inline-size: 0.55rem;
	block-size: 0.55rem;
	border-radius: 50%;
	background: #c4314b;
	flex-shrink: 0;
	animation: recorder-dot 2s ease-in-out infinite;
}

.timesheet-recorder__client {
	max-inline-size: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	font-size: 0.875rem;
}

.timesheet-recorder__elapsed {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 0.875rem;
	min-inline-size: 3.2rem;
	text-align: right;
}

.timesheet-recorder__stop {
	--bs-btn-padding-y: 0.1rem;
	--bs-btn-padding-x: 0.45rem;
	border-radius: 2rem;
	background: #c4314b;
	color: #fff;

	&:hover,
	&:focus-visible {
		background: #a52840;
		color: #fff;
	}
}

/* The halo says "this is still running" from the corner of the eye. */
@keyframes recorder-pulse {
	0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 70%); }
	70% { box-shadow: 0 0 0 0.6rem rgb(255 255 255 / 0%); }
	100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); }
}

@keyframes recorder-dot {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
	.timesheet-recorder--live .timesheet-recorder__chip,
	.timesheet-recorder__dot {
		animation: none;
	}
}

/* Navbar next meeting — Granola-style text line beside the recorder.

   .navbar-end grows into the space after brand/search and packs tools to the
   right. The calendar slot flex-shrinks with that leftover width so long
   Outlook subjects ellipsis; sep + countdown stay in fixed auto columns. */
.navbar-end {
	flex: 1 1 auto;
	justify-content: flex-end;
	min-inline-size: 0;
}

.nav-calendar-slot:not(:empty) {
	flex: 1 1 auto;
	min-inline-size: 0;
	max-inline-size: 22rem;
	overflow: hidden;

	/* Match .nav-calendar-next — avoid an invisible flex gap below md. */
	@media (width < 768px) {
		display: none;
	}
}

.navbar-end > :not(.nav-calendar-slot) {
	flex-shrink: 0;
}

.nav-calendar-next {
	display: none;
	gap: 0.35rem;
	min-inline-size: 0;
	max-inline-size: 100%;
	inline-size: 100%;
	padding: 0;
	color: var(--navbar-fg);
	cursor: default;
	user-select: none;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;

	@media (width >= 768px) {
		display: inline-grid;
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		align-items: center;
	}

	&:hover,
	&:focus-visible {
		color: var(--navbar-fg);
		text-decoration: none;
		opacity: 0.92;
	}

	/* Status text, not editable copy — keep the arrow even when it is a join link. */
	a& {
		cursor: default;
	}
}

.nav-calendar-next__icon {
	font-size: 0.75rem;
	opacity: 0.88;
}

.nav-calendar-next__subject {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nav-calendar-next__sep {
	opacity: 0.55;
	font-weight: 400;
}

.nav-calendar-next__countdown {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/* Department dashboard stat tiles — same brand-tinted icon chip language as
   the personal dashboard's shortcuts, at the size a headline figure wants. */
.dept-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 0.7rem;
	background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
	color: var(--bs-primary);
	font-size: 1.05rem;
}

.manager-filter-tile {
	cursor: pointer;

	&:focus-visible {
		outline: 2px solid var(--bs-primary);
		outline-offset: 2px;
	}
}

.asset-card {
	position: relative;
	border-color: var(--bs-border-color-translucent);
}

.asset-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 0.65rem;
	background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
	color: var(--bs-primary);
	font-size: 1rem;
}

.asset-card__meta dt {
	font-size: 0.75rem;
	margin-bottom: 0.1rem;
}

.asset-card--compact {
	.asset-card__icon {
		inline-size: 2rem;
		block-size: 2rem;
		font-size: 0.9rem;
	}
}

/* Dashboard shortcut tiles. Horizontal — icon chip, label, caption — because
   a lone icon floating over a five-word label reads as an empty card. Hover
   answers with the brand colour and a slight lift, matching how the rest of
   the app signals "this goes somewhere". */
.quick-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background: var(--admin-surface-1, var(--bs-body-bg));
	color: var(--bs-body-color);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;

	&:hover,
	&:focus-visible {
		color: var(--bs-body-color);
		border-color: var(--bs-primary);
		box-shadow: var(--bs-box-shadow-sm);
		transform: translateY(-1px);
	}

	.quick-link__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 0.6rem;
		/* bg-primary-subtle is un-themed (navy against the orange primary),
		   so tint the brand colour directly instead. */
		background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
		color: var(--bs-primary);
	}

	&:hover .quick-link__icon {
		background: color-mix(in srgb, var(--bs-primary) 22%, transparent);
	}
}

/* Shared avatar / contact-card ring width and style modifiers. */
.contact-avatar-ring,
.contact-card,
.contact-chip,
.profile-hero {
	--avatar-ring-width: 3px;
	--avatar-ring-gap: 3px;
	--avatar-ring-outer: 2px;
	--avatar-ring-gap-fill: var(--admin-surface-1, var(--bs-body-bg));
}

.avatar-ring--thick {
	--avatar-ring-width: 5px;
}

.contact-avatar-ring {
	border-width: var(--avatar-ring-width);
}

.contact-card,
.contact-chip {
	--contact-border-width: var(--avatar-ring-width);
	position: relative;
}

.avatar-ring--double.contact-avatar-ring,
.avatar-ring--double.contact-card,
.avatar-ring--double.contact-chip {
	position: relative;
}

.avatar-ring--double.contact-avatar-ring {
	box-shadow: 0 0 0 var(--avatar-ring-gap) var(--avatar-ring-gap-fill);
}

.avatar-ring--double.contact-avatar-ring::after,
.avatar-ring--double.contact-card::after,
.avatar-ring--double.contact-chip::after {
	content: '';
	position: absolute;
	border-radius: inherit;
	pointer-events: none;
	inset: calc(-1 * (var(--avatar-ring-width) + var(--avatar-ring-gap) + var(--avatar-ring-outer)));
	padding: var(--avatar-ring-outer);
	background: var(--contact-border) border-box;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.avatar-ring--double.contact-card,
.avatar-ring--double.contact-chip {
	box-shadow:
		var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%)),
		0 0 0 var(--avatar-ring-gap) var(--contact-bg);
}

/* Dashed rings cannot use border-style on the transparent-border + gradient
   border-box trick — the visible ring is painted by background, not border.
   Paint dashes with a masked pseudo-element instead (gradients still work). */
.avatar-ring--dashed {
	--avatar-ring-dash-angle: 10deg;
}

.avatar-ring--dashed.contact-avatar-ring {
	/* Photo must fill the whole disc, including the old border band.
	   Transparent border left a hole the page (white) showed through. */
	border-width: 0;
	background: none;
	box-sizing: border-box;
	width: calc(var(--contact-avatar) + 2 * var(--avatar-ring-width));
	height: calc(var(--contact-avatar) + 2 * var(--avatar-ring-width));
	overflow: hidden;

	img,
	.contact-avatar-ring__initials {
		width: 100%;
		height: 100%;
		max-width: none;
	}
}

.avatar-ring--dashed.contact-card,
.avatar-ring--dashed.contact-chip {
	background:
		linear-gradient(var(--contact-bg), var(--contact-bg)) padding-box;
}

/* SVG strokes space dashes by distance along the perimeter, not by angle.
   The broad stroke is clipped to the existing border band below, preserving
   each chip size and solid/gradient colours without stretching the dashes. */
.avatar-ring--dashed.contact-card {
	--contact-dash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='6' fill='none' stroke='black' stroke-width='12' stroke-dasharray='7 5'/%3E%3C/svg%3E");
}

.avatar-ring--dashed.contact-chip {
	--contact-dash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' ry='50%25' fill='none' stroke='black' stroke-width='12' stroke-dasharray='7 5'/%3E%3C/svg%3E");
}

.avatar-ring--dashed.contact-card,
.avatar-ring--dashed.contact-chip {
	&::before {
		content: '';
		position: absolute;
		inset: calc(-1 * var(--contact-border-width, var(--avatar-ring-width)));
		padding: var(--contact-border-width, var(--avatar-ring-width));
		border-radius: inherit;
		background: var(--contact-border);
		pointer-events: none;
		mask:
			var(--contact-dash-mask),
			linear-gradient(#000 0 0) content-box,
			linear-gradient(#000 0 0);
		mask-composite: intersect, exclude;
	}
}

.avatar-ring--dashed.contact-avatar-ring::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--contact-border);
	pointer-events: none;
	-webkit-mask:
		repeating-conic-gradient(
			from -90deg,
			#000 0 var(--avatar-ring-dash-angle),
			transparent var(--avatar-ring-dash-angle) calc(2 * var(--avatar-ring-dash-angle))
		),
		radial-gradient(
			farthest-side,
			transparent calc(100% - var(--avatar-ring-width)),
			#000 calc(100% - var(--avatar-ring-width))
		);
	mask:
		repeating-conic-gradient(
			from -90deg,
			#000 0 var(--avatar-ring-dash-angle),
			transparent var(--avatar-ring-dash-angle) calc(2 * var(--avatar-ring-dash-angle))
		),
		radial-gradient(
			farthest-side,
			transparent calc(100% - var(--avatar-ring-width)),
			#000 calc(100% - var(--avatar-ring-width))
		);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Standalone circular avatar wearing the contact-card ring — the dashboard
   hero. Same transparent-border + two-layer background as .contact-chip, so
   solid and gradient customisations both paint. */
.contact-avatar-ring {
	--contact-border: var(--bs-border-color);
	--contact-avatar: 4.5rem;

	display: inline-flex;
	flex-shrink: 0;
	position: relative;
	border-radius: 50%;
	border: var(--avatar-ring-width, 3px) solid transparent;
	background:
		linear-gradient(var(--admin-surface-1, var(--bs-body-bg)), var(--admin-surface-1, var(--bs-body-bg))) padding-box,
		var(--contact-border) border-box;

	img,
	.contact-avatar-ring__initials {
		width: var(--contact-avatar);
		height: var(--contact-avatar);
		border-radius: 50%;
		object-fit: cover;
	}

	.contact-avatar-ring__initials {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--admin-surface-2, var(--bs-secondary-bg));
		color: var(--admin-text-muted, var(--bs-secondary-color));
		font-weight: 600;
		font-size: 1.5rem;
	}
}

/* Search / dense lists — same ring, sized to sit beside a result label. */
.contact-avatar-ring--sm {
	--contact-avatar: 1.75rem;
	--avatar-ring-width: 2px;
	--avatar-ring-gap: 2px;
	--avatar-ring-outer: 2px;

	.contact-avatar-ring__initials {
		font-size: 0.625rem;
	}

	&.avatar-ring--thick {
		--avatar-ring-width: 3px;
	}
}

/* Profile-page hero: the same ring, sized to be the page's main image. Font size
   is restated rather than changed on the base rule, which the dashboard hero
   shares and is tuned for. */
.contact-avatar-ring--xl {
	--contact-avatar: min(11rem, 60vw);
	--avatar-ring-width: 5px;

	.contact-avatar-ring__initials {
		font-size: calc(var(--contact-avatar) * 0.36);
	}

	&.avatar-ring--thick {
		--avatar-ring-width: 7px;
	}
}

/* Profile edit — avatar section live preview (between dashboard and profile hero). */
.contact-avatar-ring--preview {
	--contact-avatar: 7rem;
	--avatar-ring-width: 3px;

	.contact-avatar-ring__initials {
		font-size: calc(var(--contact-avatar) * 0.36);
	}

	&.avatar-ring--thick {
		--avatar-ring-width: 5px;
	}
}

/* Profile edit — profile plate preview inside the hero card. */
.contact-avatar-ring--lg {
	--contact-avatar: 5rem;
	--avatar-ring-width: 3px;

	.contact-avatar-ring__initials {
		font-size: calc(var(--contact-avatar) * 0.36);
	}

	&.avatar-ring--thick {
		--avatar-ring-width: 5px;
	}
}

/* Profile hero — time-of-day sky + the member's ring/border customisation. */
.profile-hero {
	--profile-hero-accent: var(--contact-border, var(--admin-brand, var(--bs-primary)));
	--profile-hero-pad: clamp(1.25rem, 3vw, 2rem);
	--profile-hero-border-width: 3px;

	position: relative;
	border-radius: 0.75rem;
	overflow: hidden;
}

.profile-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--profile-hero-border-width);
	background: var(--profile-hero-accent) border-box;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 3;
}

.profile-hero__backdrop {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		var(--time-header-sky, var(--admin-surface-2, #f1f5f9)) 0%,
		var(--time-header-horizon, var(--admin-surface-1, #fff)) 58%,
		color-mix(in oklch, var(--time-header-horizon, var(--admin-surface-1, #fff)) 40%, var(--admin-body-bg, #f8fafc)) 100%
	);
	transition:
		background 0.75s ease,
		--time-header-sky 0.75s ease,
		--time-header-horizon 0.75s ease;
}

html.time-header--instant .profile-hero__backdrop {
	transition: none;
}

.profile-hero__content {
	position: relative;
	padding: var(--profile-hero-pad);
}

.profile-hero__presence {
	position: absolute;
	top: var(--profile-hero-pad);
	right: var(--profile-hero-pad);
	z-index: 2;
}

.profile-hero__crumbs {
	margin-bottom: 1rem;

	.breadcrumb {
		--bs-breadcrumb-divider-color: var(--profile-hero-muted, var(--bs-secondary-color));
	}

	.breadcrumb-item,
	.breadcrumb-item a {
		color: var(--profile-hero-muted, var(--bs-secondary-color));
	}

	.breadcrumb-item.active {
		color: var(--profile-hero-fg, var(--bs-body-color));
	}
}

.profile-hero__main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 1.5rem;
}

.profile-hero__identity {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	min-width: min(100%, 16rem);
}

.profile-hero__avatar.contact-avatar-ring {
	background:
		linear-gradient(rgb(255 255 255 / 94%), rgb(255 255 255 / 94%)) padding-box,
		var(--contact-border) border-box;
	box-shadow: 0 8px 28px rgb(15 23 42 / 12%);
}

.profile-hero__avatar.contact-avatar-ring.avatar-ring--dashed {
	background: none;
}

.profile-hero__name {
	color: var(--profile-hero-fg, var(--bs-body-color));
}

.profile-hero__subtitle {
	color: var(--profile-hero-muted, var(--bs-secondary-color));
}

.profile-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.profile-hero__accent {
	display: none;
}

.profile-hero__name.profile-nameplate {
	font-size: clamp(1.5rem, 3.8vw, 2.35rem);
	line-height: 1.1;
}

.profile-hero-preview .profile-hero__name.profile-nameplate {
	font-size: clamp(1.2rem, 2.8vw, 1.65rem);
}

.profile-nameplate {
	line-height: 1.12;
}

.profile-nameplate--font-dm-sans {
	font-family: 'DM Sans', system-ui, sans-serif;
}

.profile-nameplate--font-playfair {
	font-family: 'Playfair Display', Georgia, serif;
}

.profile-nameplate--font-abril-fatface {
	font-family: 'Abril Fatface', Georgia, serif;
}

.profile-nameplate--font-bebas {
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.profile-nameplate--font-oswald {
	font-family: Oswald, 'Arial Narrow', sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.profile-nameplate--font-jetbrains-mono {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: -0.03em;
}

.profile-nameplate--font-pacifico {
	font-family: Pacifico, cursive;
}

.profile-nameplate--font-permanent-marker {
	font-family: 'Permanent Marker', cursive;
	letter-spacing: 0.02em;
}

.profile-nameplate--font-fraunces {
	font-family: Fraunces, Georgia, serif;
	font-variation-settings: 'SOFT' 50, 'WONK' 1;
}

.profile-nameplate--font-space-grotesk {
	font-family: 'Space Grotesk', system-ui, sans-serif;
}

.profile-nameplate--font-libre-baskerville {
	font-family: 'Libre Baskerville', Georgia, serif;
}

.profile-nameplate--font-outfit {
	font-family: Outfit, system-ui, sans-serif;
}

.profile-nameplate.profile-nameplate--weight-normal {
	font-weight: 400;
	font-size: 0.82em;
}

.profile-nameplate.profile-nameplate--weight-bold {
	font-weight: 700;
	font-size: 1em;
}

.profile-nameplate.profile-nameplate--weight-display {
	font-weight: 800;
	font-size: 1.28em;
	letter-spacing: -0.03em;
}

.profile-nameplate--font-bebas.profile-nameplate--weight-normal,
.profile-nameplate--font-bebas.profile-nameplate--weight-bold,
.profile-nameplate--font-bebas.profile-nameplate--weight-display {
	font-weight: 400;
}

.profile-nameplate--font-bebas.profile-nameplate--weight-display {
	font-size: 1.45em;
}

.profile-nameplate--font-pacifico.profile-nameplate--weight-display,
.profile-nameplate--font-permanent-marker.profile-nameplate--weight-display {
	font-size: 1.18em;
}

.profile-hero__pronouns,
.profile-hero__status {
	color: var(--profile-hero-muted, var(--bs-secondary-color));
}

.profile-hero--backdrop-border .profile-hero__backdrop {
	background: linear-gradient(
		180deg,
		color-mix(in oklch, var(--contact-border, var(--admin-brand, var(--bs-primary))) 18%, var(--admin-surface-2, #f1f5f9)) 0%,
		color-mix(in oklch, var(--contact-border, var(--admin-brand, var(--bs-primary))) 8%, var(--admin-surface-1, #fff)) 100%
	);
}

.profile-hero--backdrop-neutral .profile-hero__backdrop {
	background: linear-gradient(
		180deg,
		var(--admin-surface-2, #f1f5f9) 0%,
		var(--admin-surface-1, #fff) 100%
	);
}

.profile-hero--backdrop-custom .profile-hero__backdrop {
	background-color: var(--admin-surface-2, #e2e8f0);
	background-image: var(--profile-hero-backdrop-image);
	background-size: cover;
	background-position: center;
}

.profile-hero--backdrop-custom .profile-hero__backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(15 23 42 / 28%) 0%,
		rgb(15 23 42 / 52%) 100%
	);
}

.profile-hero--backdrop-custom {
	--profile-hero-fg: #f8fafc;
	--profile-hero-muted: rgb(248 250 252 / 82%);
}

.profile-hero__avatar.contact-avatar-ring.avatar-ring--double {
	box-shadow:
		0 0 0 var(--avatar-ring-gap) rgb(255 255 255 / 94%),
		0 8px 28px rgb(15 23 42 / 12%);
}

.profile-hero-preview__hero {
	border-radius: 0.75rem;
}

.profile-hero-preview {
	border-radius: 0.75rem;
}

.profile-edit-nav .btn {
	scroll-margin-top: 5rem;
}

#calendar-sync {
	scroll-margin-top: 5rem;
}

.calendar-sync-panel {
	.calendar-sync-panel__icon {
		inline-size: 2.25rem;
		block-size: 2.25rem;
		font-size: 0.95rem;
	}
}

/* Profile edit — floating save FAB for the long form.
   Full compound selectors only: native nesting cannot concatenate &__save-fab
   (same as .note-card__heading — the rule is silently dropped). */
.profile-form__save-spacer {
	block-size: 4.5rem;
}

.profile-form__save-fab {
	position: fixed;
	right: max(1.25rem, env(safe-area-inset-right, 0px));
	bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
	z-index: 1040;
	pointer-events: none;
}

.profile-form__save-btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-block-size: 2.75rem;
	padding-inline: 1.35rem;
	border-radius: 2rem;
	border: none;
	font-weight: 600;
	box-shadow:
		var(--bs-box-shadow),
		0 0 0 1px color-mix(in srgb, var(--admin-brand, var(--bs-primary)) 14%, transparent);

	&:hover,
	&:focus-visible {
		transform: translateY(-1px);
		box-shadow:
			var(--bs-box-shadow-lg),
			0 0 0 1px color-mix(in srgb, var(--admin-brand, var(--bs-primary)) 22%, transparent);
	}

	&:active {
		transform: translateY(0);
	}

	&:focus-visible {
		outline: 2px solid var(--admin-brand, var(--bs-primary));
		outline-offset: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.profile-form__save-btn {
		transition: none;

		&:hover,
		&:focus-visible,
		&:active {
			transform: none;
		}
	}
}

.contact-chip__text {
	line-height: 1.15;
	max-width: 100%;
}

.contact-chip__nick {
	font-size: 0.72em;
	line-height: 1.1;
}

.profile-nameplate-option {
	cursor: pointer;

	.profile-nameplate-option__frame {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.35rem;
		min-width: 4.75rem;
		padding: 0.55rem 0.65rem;
		border: 2px solid var(--bs-border-color);
		border-radius: 0.65rem;
		background: var(--admin-surface-1, var(--bs-body-bg));
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}

	.profile-nameplate-option__sample {
		font-size: 1.5rem;
		line-height: 1;
	}

	&:hover .profile-nameplate-option__frame {
		border-color: color-mix(in srgb, var(--admin-brand, var(--bs-primary)) 45%, var(--bs-border-color));
	}

	&:has(input:checked) .profile-nameplate-option__frame {
		border-color: var(--admin-brand, var(--bs-primary));
		box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--admin-brand, var(--bs-primary)) 28%, transparent);
	}

	&:has(input:focus-visible) .profile-nameplate-option__frame {
		outline: 2px solid var(--admin-brand, var(--bs-primary));
		outline-offset: 2px;
	}
}

.profile-nameplate-preview {
	background: linear-gradient(
		180deg,
		var(--time-header-sky, var(--admin-surface-2, #f1f5f9)) 0%,
		var(--time-header-horizon, var(--admin-surface-1, #fff)) 100%
	);
}

html[data-time-header-tone="dark"] .profile-hero {
	--profile-hero-fg: #f8fafc;
	--profile-hero-muted: rgb(248 250 252 / 78%);

	.profile-hero__avatar.contact-avatar-ring {
		background:
			linear-gradient(rgb(255 255 255 / 92%), rgb(255 255 255 / 92%)) padding-box,
			var(--contact-border) border-box;
		box-shadow: 0 10px 32px rgb(0 0 0 / 28%);
	}

	.profile-hero__avatar.contact-avatar-ring.avatar-ring--dashed {
		background: none;
	}

	.profile-hero__avatar.contact-avatar-ring.avatar-ring--double {
		box-shadow:
			0 0 0 var(--avatar-ring-gap) rgb(255 255 255 / 92%),
			0 10px 32px rgb(0 0 0 / 28%);
	}

	.profile-hero__btn-outline {
		--bs-btn-color: #f8fafc;
		--bs-btn-border-color: rgb(248 250 252 / 55%);
		--bs-btn-hover-color: #0f172a;
		--bs-btn-hover-bg: #f8fafc;
		--bs-btn-hover-border-color: #f8fafc;
	}

	.badge.text-bg-secondary {
		--bs-badge-color: #fff;
	}
}

:root[data-bs-theme="dark"] .profile-hero__backdrop {
	background: linear-gradient(
		180deg,
		var(--admin-surface-2, #1e293b) 0%,
		var(--admin-surface-1, #0f172a) 100%
	);
}

:root[data-bs-theme="dark"] .profile-hero {
	--profile-hero-fg: var(--admin-text-strong, #f8fafc);
	--profile-hero-muted: var(--admin-text-soft, #cbd5e1);
}

.contact-chip {
	--contact-border-width: 3px;
	--contact-pad-y: 0.2rem;
	--contact-pad-x: 0.55rem;
	--contact-gap: 0.45rem;
	--contact-avatar: 2.5rem;
	--contact-font: 0.875rem;

	display: inline-flex;
	align-items: center;
	gap: var(--contact-gap);
	max-width: 100%;
	padding: var(--contact-pad-y) var(--contact-pad-x) var(--contact-pad-y) var(--contact-pad-y);
	border-radius: 999px;
	font-size: var(--contact-font);
	line-height: 1.2;
	vertical-align: middle;

	&.dropdown-toggle::after {
		display: none;
	}

	.contact-chip__avatar {
		width: var(--contact-avatar);
		height: var(--contact-avatar);
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
	}

	.contact-chip__avatar--initials {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--admin-surface-2, var(--bs-secondary-bg));
		color: var(--admin-text-muted, var(--bs-secondary-color));
		font-weight: 600;
		font-size: calc(var(--contact-avatar) * 0.36);
		user-select: none;
	}

	.contact-chip__name {
		min-width: 0;
		font-weight: 600;
		padding-right: 0.15rem;
	}

	.contact-chip__status {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
		flex-shrink: 0;
		font-size: 0.75rem;
		background: var(--admin-surface-2, var(--bs-secondary-bg));
		color: var(--admin-text-muted, var(--bs-secondary-color));

		&.contact-chip__status--office {
			background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
			color: var(--bs-primary);
		}

		&.contact-chip__status--wfh {
			background: color-mix(in srgb, var(--bs-secondary) 18%, transparent);
			color: var(--bs-secondary);
		}

		&.contact-chip__status--external_event {
			background: color-mix(in srgb, var(--bs-info) 18%, transparent);
			color: var(--bs-info);
		}

		&.contact-chip__status--on_leave {
			background: color-mix(in srgb, var(--bs-warning) 22%, transparent);
			color: var(--bs-warning-text-emphasis, var(--bs-warning));
		}

		/* Nothing booked covering that moment. Muted rather than absent, so the
		   marker still reads as a deliberate state and not a rendering gap. */
		&.contact-chip__status--not_booked {
			background: color-mix(in srgb, var(--bs-secondary-color, #64748b) 14%, transparent);
			color: var(--bs-secondary-color, #64748b);
		}
	}

	&.contact-chip--sm {
		--contact-avatar: 1.75rem;
		--contact-pad-y: 0.15rem;
		--contact-pad-x: 0.45rem;
		--contact-gap: 0.35rem;
		--contact-border-width: 2px;
		--contact-font: 0.8125rem;

		.contact-chip__status {
			width: 1.25rem;
			height: 1.25rem;
			font-size: 0.65rem;
		}
	}

	&.contact-chip--lg {
		--contact-avatar: 3.25rem;
		--contact-pad-y: 0.3rem;
		--contact-pad-x: 0.75rem;
		--contact-gap: 0.55rem;
		--contact-border-width: 3px;
		--contact-font: 1rem;

		.contact-chip__status {
			width: 1.75rem;
			height: 1.75rem;
			font-size: 0.85rem;
		}
	}

	/* Compact pill for the 56px brand navbar */
	&.contact-chip--nav {
		--contact-avatar: 1.5rem; /* 24px */
		--contact-pad-y: 0.2rem;
		--contact-pad-x: 0.6rem;
		--contact-gap: 0.45rem;
		--contact-border-width: 2px;
		--contact-font: 0.8125rem;
		--contact-bg: rgba(255, 255, 255, 0.96);
		--contact-fg: var(--admin-text-default, #212529);

		max-height: 36px;
		max-width: 14rem;
		/* Explicit gap — theme `.dropdown-toggle { gap: 0 }` is more specific than `.contact-chip` */
		gap: var(--contact-gap);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
		transition: box-shadow 0.15s ease, filter 0.15s ease;

		.contact-chip__name {
			max-width: 7.5rem;
			padding-right: 0.1rem;
		}

		.contact-chip__status {
			width: 1.15rem;
			height: 1.15rem;
			font-size: 0.6rem;
			background: var(--admin-surface-2, #e9ecef);
			color: var(--admin-text-default, #212529);
			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);

			&.contact-chip__status--office {
				background: var(--bs-primary);
				color: #fff;
				box-shadow: none;
			}

			&.contact-chip__status--wfh {
				background: var(--bs-secondary);
				color: #fff;
				box-shadow: none;
			}
		}

		&:hover,
		&:focus-visible {
			filter: brightness(0.98);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		}

		&:focus-visible {
			outline: 2px solid var(--admin-brand, var(--bs-primary));
			outline-offset: 2px;
		}
	}
}

/* Removable contact chip: Remove fades in over the chip on hover/focus.
   Same interaction model as .staff-card — dim the chip, reveal the action. */
.contact-chip-host {
	display: inline-flex;
	max-width: 100%;
}

.contact-chip-host--removable {
	position: relative;

	&:hover .contact-chip-host__remove,
	&:focus-within .contact-chip-host__remove {
		opacity: 1;
		pointer-events: auto;
	}
}

.contact-chip-host__remove {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.2rem;
	padding-right: 0.5rem;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	cursor: pointer;

	&:hover,
	&:focus-visible {
		color: #fff;
	}

	&:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
}

@media (hover: none) {
	.contact-chip-host--removable .contact-chip {
		opacity: 1;
	}

	.contact-chip-host--removable .contact-chip-host__remove {
		position: static;
		margin-left: 0.25rem;
		border-radius: 0;
		background: transparent;
		color: var(--bs-danger);
		opacity: 1;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-chip-host--removable .contact-chip,
	.contact-chip-host__remove {
		transition: none;
	}
}

html[data-time-header-tone="dark"] header .navbar .contact-chip--nav:focus-visible,
:root[data-bs-theme="dark"] header .navbar .contact-chip--nav:focus-visible {
	outline-color: #fff;
}

header .navbar .user-menu .contact-chip--nav {
	align-self: center;
	margin: 0;
	/* Beat .navbar a / legacy dropdown-toggle nav chrome on the time-of-day bar */
	color: var(--contact-fg);
	text-decoration: none;
	height: auto;
	max-height: 36px;
	gap: var(--contact-gap);
	padding: var(--contact-pad-y) var(--contact-pad-x) var(--contact-pad-y) var(--contact-pad-y);

	&:hover,
	&:focus-visible {
		color: var(--contact-fg);
		text-decoration: none;
		background-color: transparent;
	}
}

:root[data-bs-theme="dark"] {
	.contact-chip.contact-chip--nav {
		--contact-bg: color-mix(in srgb, var(--admin-surface-1, #1e1e1e) 92%, #fff);
		--contact-fg: var(--admin-text-default, #e9ecef);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

		.contact-chip__status {
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);

			&.contact-chip__status--office,
			&.contact-chip__status--wfh {
				box-shadow: none;
			}
		}
	}
}

@media (max-width: 575.98px) {
	.navbar .contact-chip--nav .contact-chip__name,
	.navbar .contact-chip--sm .contact-chip__name {
		display: none;
	}
}

.contact-chip-swatch {
	/* Swatch colour/gradient string comes from the server as --swatch-bg. */
	background: var(--swatch-bg, var(--bs-secondary-bg));
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 2px solid var(--bs-border-color);
	padding: 0;
	cursor: pointer;
	background-clip: padding-box;
	flex-shrink: 0;

	&:hover,
	&:focus-visible {
		border-color: var(--admin-brand, var(--bs-primary));
	}

	&[aria-pressed="true"] {
		outline: 2px solid var(--admin-brand, var(--bs-primary));
		outline-offset: 2px;
	}
}

.contact-chip-swatch-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;

	&:checked + .contact-chip-swatch {
		outline: 2px solid var(--admin-brand, var(--bs-primary));
		outline-offset: 2px;
		border-color: var(--admin-brand, var(--bs-primary));
	}

	&:focus-visible + .contact-chip-swatch {
		outline: 2px solid var(--admin-brand, var(--bs-primary));
		outline-offset: 2px;
	}
}

/* Staff benefits */
.staff-benefits {
	.staff-benefits__icon {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1rem;
	}

	.staff-benefits__logo-link {
		max-width: 100%;

		&:hover .staff-benefits__logo,
		&:focus-visible .staff-benefits__logo {
			opacity: 0.85;
		}
	}

	.staff-benefits__logo {
		display: block;
		max-width: 11.25rem;
		max-height: 3.75rem;
		width: auto;
		height: auto;
		margin-inline: auto;
		object-fit: contain;
		transition: opacity 0.15s ease;

		&.staff-benefits__logo--rac {
			max-width: 10rem;
		}
	}

	.staff-benefits__code {
		color: var(--admin-text-strong, var(--bs-body-color));
		font-weight: 600;
		letter-spacing: 0.02em;
	}

	.staff-benefits__discount {
		.card-body {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
}

:root[data-bs-theme="dark"] {
	.staff-benefits {
		.staff-benefits__logo {
			filter: brightness(1.05);
		}
	}
}

/* Timesheet calendar */
.timesheet {
	.fc-daygrid-body,
	.fc-scrollgrid-sync-table {
		min-height: 14rem;
	}

	.fc-toolbar-chunk {
		margin-bottom: 0.625rem;
	}
}

/* WFH block booking — inline multi-select calendar */
.wfh-calendar {
	.flatpickr-calendar {
		box-shadow: none;
		width: 100%;
		max-width: 22rem;
	}

	.flatpickr-day {
		&.selected,
		&.selected:hover {
			background: var(--bs-primary);
			border-color: var(--bs-primary);
			color: #fff;
		}

		&.flatpickr-disabled,
		&.flatpickr-disabled:hover {
			color: var(--admin-text-muted, var(--bs-secondary-color));
			opacity: 0.45;
		}
	}
}

/* Job queue summaries — same affordance as clients index cards */
#content .card.jobs-queue__summary {
	/* Beat #content .card overflow:hidden so the active ring is visible */
	overflow: visible;
}

.jobs-queue__summary {
	appearance: none;
	background: var(--bs-body-bg);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;

	&:hover,
	&:focus-visible {
		border-color: var(--bs-primary) !important;
		box-shadow: 0 0 0 0.2rem rgb(var(--bs-primary-rgb) / 18%);
		outline: none;
	}

	&.is-active {
		border-color: var(--bs-primary) !important;
		box-shadow: 0 0 0 0.15rem rgb(var(--bs-primary-rgb) / 22%);
	}
}

/* Clients index */
.clients-index {
	.clients-index__summary {
		appearance: none;
		background: var(--bs-body-bg);
		cursor: pointer;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&:hover,
		&:focus-visible {
			border-color: var(--bs-primary) !important;
			box-shadow: 0 0 0 0.2rem rgb(var(--bs-primary-rgb) / 18%);
			outline: none;
		}

		&.is-active {
			border-color: var(--bs-primary) !important;
			box-shadow: 0 0 0 0.15rem rgb(var(--bs-primary-rgb) / 22%);
		}
	}

	.clients-index__toolbar {
		.form-label {
			margin-bottom: 0.35rem;
		}

		.select2-container {
			max-width: 100%;
		}
	}

	#clients-table tbody td {
		vertical-align: middle;
	}
}

/* Ads health legend — Clients index strip under the table */
.ads-health-legend {
	&.ads-health-legend--compact {
		padding: 0;
		border: 0;
		background: transparent;
	}

	.ads-health-legend__row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.65rem 1rem;
	}

	.ads-health-legend__title {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--bs-body-color);
		white-space: nowrap;

		i {
			color: var(--bs-primary);
		}
	}

	.ads-health-legend__chips {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.ads-health-legend__copy {
		flex: 1 1 14rem;
		font-size: 0.8125rem;
		line-height: 1.4;
		color: var(--bs-secondary-color);
	}
}

/* Stat cards — shared by the clients report and directors dashboard */
.stat-cards {
	.stat-cards__icon {
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.1rem;
	}

	.stat-cards__icon--sm {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 0.9rem;
	}

	.stat-cards__bar {
		height: 0.4rem;
		background-color: var(--bs-tertiary-bg);
	}

	.stat-cards__row {
		transition: background-color 0.15s ease;

		&:hover {
			background-color: var(--bs-tertiary-bg);
		}
	}
}

/* Client services list */
.client-services-list {
	.client-services-list__summary {
		appearance: none;
		background: var(--bs-body-bg);
		cursor: pointer;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&:hover,
		&:focus-visible {
			border-color: var(--bs-primary) !important;
			box-shadow: 0 0 0 0.2rem rgb(var(--bs-primary-rgb) / 18%);
			outline: none;
		}

		&.is-active {
			border-color: var(--bs-primary) !important;
			box-shadow: 0 0 0 0.15rem rgb(var(--bs-primary-rgb) / 22%);
		}
	}

	.client-services-list__toolbar {
		.form-label {
			margin-bottom: 0.35rem;
		}
	}

	#clients_services_table {
		th,
		td {
			vertical-align: middle;
		}

		.client-services-list__col-service {
			min-width: 12rem;
		}

		.client-services-list__col-status {
			min-width: 6.5rem;
		}

		.client-services-list__col-max-fee {
			min-width: 8.5rem;
		}

		.client-services-list__col-actions {
			width: 1%;
		}
	}
}

/* Client overview (manager sample + report) */
.client-overview-index {
	.client-overview-index__card {
		.card-body {
			min-height: 11rem;
		}
	}
}

.client-overview-report {
	.stats {
		tr.pending td {
			background-color: #ffa726 !important;
			color: #fff;
			font-weight: 600;
		}

		tr.outstanding td {
			background-color: #ee4a47 !important;
			color: #fff;
			font-weight: 600;
		}

		.tab-content table {
			width: 100% !important;
		}

		td.month {
			max-width: 6rem;
			font-weight: 600;
		}

		td.calls,
		td.target-hours {
			max-width: 6rem;
			font-weight: 600;
			font-size: 1.25rem;
		}

		td.managed-hours {
			font-size: 1.125rem;
		}

		td.notes {
			min-width: 18rem;
		}
	}

	.client-overview-report__note {
		border-bottom: 1px solid var(--bs-border-color);
		padding-bottom: 0.75rem;

		&:last-child {
			border-bottom: 0;
			padding-bottom: 0;
			margin-bottom: 0 !important;
		}
	}

	.small-dates {
		display: inline-block;
		margin-right: 0.35rem;
	}
}

/* Meeting rooms */
.meeting-rooms {
	.meeting-rooms__swatch {
		display: inline-block;
		width: 0.75rem;
		height: 0.75rem;
		border-radius: 50%;
		background: var(--room-colour, var(--bs-secondary));
		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
	}

	.meeting-rooms__widget {
		.card-body {
			min-height: 6.5rem;
		}
	}

	.meeting-rooms__calendar-card {
		.meeting-calendar {
			min-height: 28rem;
		}
	}

	#meeting-book-modal {
		.meeting-rooms__book-form {
			margin-bottom: 0;
		}
	}

	/* Beat Bootstrap .border (!important) and #content .card border/background */
	#content & .meeting-rooms__widget--room.card {
		--meeting-room-accent: var(--room-colour, var(--bs-secondary));
		border-left: 5px solid var(--meeting-room-accent) !important;
		background: color-mix(
			in srgb,
			var(--meeting-room-accent) 18%,
			var(--admin-surface-1, var(--bs-body-bg))
		);
	}

	.meeting-rooms__participant-add-row {
		.meeting-rooms__participant-search-wrap .select2-container {
			width: 100% !important;
		}
	}

	.meeting-rooms__participant-chips {
		min-height: 2.25rem;
	}

	.meeting-rooms__book-btn[aria-busy="true"] {
		pointer-events: none;
	}

	.meeting-rooms__field-pulse {
		animation: meeting-rooms-field-pulse 1s ease-out;
	}

	.meeting-calendar {
		position: relative;
	}

	.meeting-calendar__slot-hover {
		position: absolute;
		z-index: 2;
		pointer-events: none;
		border: 1px dashed color-mix(in srgb, var(--bs-primary) 55%, transparent);
		background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
		border-radius: var(--bs-border-radius-sm, 0.25rem);
		opacity: 0;
		transition: opacity 0.12s ease-out;

		&::after {
			content: 'Click to book';
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 0.75rem;
			font-weight: 500;
			letter-spacing: 0.01em;
			color: color-mix(in srgb, var(--bs-primary) 70%, var(--bs-body-color));
		}

		&.is-visible {
			opacity: 1;
		}
	}

	@keyframes meeting-rooms-field-pulse {
		0%,
		100% {
			box-shadow: none;
		}

		50% {
			box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 35%, transparent);
		}
	}
}

/* Timesheet entry modal — overview shrinks into in-place delete confirm */
#intranet-dialog-modal .modal-dialog.timesheet-entry-dialog {
	transition: max-width 0.28s ease;
}

.timesheet-entry-modal {
	.timesheet-entry-modal__swatch {
		display: inline-block;
		width: 0.75rem;
		height: 0.75rem;
		border-radius: 50%;
		background: var(--entry-colour, var(--bs-primary));
		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
	}

	.timesheet-entry-modal__notes {
		min-height: 6rem;
		padding: 0.75rem 1rem;
		border-radius: var(--bs-border-radius);
		background: var(--admin-surface-1, var(--bs-tertiary-bg));
		white-space: pre-wrap;
	}

	.timesheet-entry-modal__panel {
		display: grid;
		grid-template-rows: 1fr;
		transition: grid-template-rows 0.28s ease;
	}

	.timesheet-entry-modal__panel-inner {
		overflow: hidden;
		min-height: 0;
	}

	.timesheet-entry-modal__confirm {
		grid-template-rows: 0fr;
	}

	&.is-confirming {
		.timesheet-entry-modal__overview {
			grid-template-rows: 0fr;
		}

		.timesheet-entry-modal__confirm {
			grid-template-rows: 1fr;
		}
	}
}

#intranet-dialog-modal:has(.timesheet-entry-modal.is-confirming) [data-intranet-dialog-footer] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	#intranet-dialog-modal .modal-dialog.timesheet-entry-dialog,
	.timesheet-entry-modal .timesheet-entry-modal__panel {
		transition: none;
	}
}

/* Meeting event modal (calendar item -> IntranetUI.dialog) */
.meeting-event-modal {
	.meeting-rooms__swatch {
		display: inline-block;
		width: 0.75rem;
		height: 0.75rem;
		border-radius: 50%;
		background: var(--room-colour, var(--bs-secondary));
		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
	}

	dt {
		font-weight: 400;
	}
}

/* Holidays (Xero leave calendar) */
.holidays-page {
	.holiday-calendar {
		min-height: 28rem;

		/* Mine/Team — FC7 does not select custom toolbar buttons, so style ourselves */
		button[data-holidays-scope].is-active {
			background-color: var(--fc-classic-button-strong, #1e293b);
			color: #fff;
		}
	}

	#holiday-book-form fieldset:disabled {
		opacity: 0.72;
	}
}

/* Dashboard metric helpers (were in purged Flatty custom.css).
   These are applied by string concatenation in the AdWords/KPI DataTables
   render callbacks, so they cannot be replaced with BS5 utilities without
   rewriting those callbacks.

   NOTE: `.metric-small` was previously `.small`, which shadowed Bootstrap's own
   `.small` (.875em) app-wide with an absolute 0.75rem. Do not reintroduce a
   bare `.small` rule here. */
.bold { font-weight: 700; }
.large { font-size: 1.125rem; }
.metric-small { font-size: 0.75rem; }

.grey {
	&,
	& a { color: var(--admin-text-muted, #898989) !important; }
}

.black { color: var(--admin-text-default, #333) !important; }
.red { color: var(--days-inactive-extremely-high) !important; }
.orange { color: var(--days-inactive-high) !important; }
.green { color: var(--days-inactive-extremely-low) !important; }

/* SEO / Social staff dashboards */
.seo-staff {
	.seo-staff-completion {
		min-width: 6.5rem;
		margin-left: auto;
	}

	.seo-staff__section + .seo-staff__section {
		margin-top: 0.5rem;
	}

	.seo-staff-expandable-table {
		tbody tr.seo-staff-expandable-row {
			cursor: pointer;
		}

		td.seo-staff-expandable-toggle {
			width: 2.5rem;
		}

		.seo-staff-expandable-toggle-btn {
			line-height: 1;
		}

		/* DataTables child row — flush with parent table */
		tr.child > td,
		tr.dt-hasChild + tr > td,
		td:has(.seo-staff-breakdown-child) {
			padding: 0 !important;
			border-top: 0;
			background: var(--admin-surface-1, var(--bs-tertiary-bg));
		}
	}

	.seo-staff-breakdown-child {
		padding: 0.75rem 1rem;

		&__section {
			padding: 0.5rem 0;

			@media (min-width: 768px) {
				padding: 0.5rem;
			}
		}

		&__heading {
			font-size: 0.8125rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.02em;
			color: var(--bs-secondary-color);
			margin-bottom: 0.25rem;
		}

		&__total {
			font-size: 0.9375rem;
		}

		&__table {
			width: 100%;
			margin: 0;
			border-collapse: collapse;
			background: var(--admin-surface-1, var(--bs-tertiary-bg));

			thead th {
				font-size: 0.75rem;
				font-weight: 600;
				letter-spacing: 0.02em;
				text-transform: uppercase;
				color: var(--bs-secondary-color);
				background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-secondary-bg));
				border-bottom: 1px solid var(--bs-border-color);
				border-top: 0;
				padding: 0.5rem;
				white-space: nowrap;
			}

			tbody td {
				padding: 0.5rem;
				border-bottom: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
				vertical-align: middle;
			}

			tbody tr:last-child td {
				border-bottom: 0;
			}
		}
	}
}

#pacing_report {
	.pacing-col {
		min-width: 12rem;
	}

	.pacing-cell {
		min-width: 11rem;
		margin-left: auto;
	}
}

/* Time allocation report */
#time_allocation {
	tbody tr.time-allocation-row {
		cursor: pointer;
	}

	td.time-allocation-toggle {
		width: 2.5rem;
	}

	.time-allocation-toggle-btn {
		line-height: 1;
	}

	/* DataTables child row — flush with parent table */
	tr.child > td,
	tr.dt-hasChild + tr > td,
	td:has(.time-allocation-child__table),
	td:has(.time-allocation-child--message) {
		padding: 0 !important;
		border-top: 0;
		background: var(--admin-surface-1, var(--bs-tertiary-bg));
	}
}

.time-allocation-child {
	&--message {
		padding: 0.75rem 1rem;
	}

	&__table {
		width: 100%;
		margin: 0;
		border-collapse: collapse;
		background: var(--admin-surface-1, var(--bs-tertiary-bg));

		thead th {
			font-size: 0.75rem;
			font-weight: 600;
			letter-spacing: 0.02em;
			text-transform: uppercase;
			color: var(--bs-secondary-color);
			background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-secondary-bg));
			border-bottom: 1px solid var(--bs-border-color);
			border-top: 0;
			padding: 0.5rem;
			white-space: nowrap;
		}

		tbody td {
			padding: 0.5rem;
			border-bottom: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
			vertical-align: middle;
		}

		tbody tr:last-child td {
			border-bottom: 0;
		}
	}

	&__person {
		white-space: nowrap;
		width: 1%;
		max-width: 14rem;

		.contact-chip {
			max-width: 100%;
		}
	}

	&__notes {
		min-width: 12rem;
		color: var(--bs-body-color);
	}
}

/* Hours-logged report */
#hours_logged {
	tbody tr.hours-logged-row {
		cursor: pointer;
	}

	td.hours-logged-toggle {
		width: 2.5rem;
	}

	.hours-logged-toggle-btn {
		line-height: 1;
	}

	tr.child > td,
	tr.dt-hasChild + tr > td,
	td:has(.hours-logged-child__table),
	td:has(.hours-logged-child--message),
	td:has(.kpi-child),
	td:has(.kpi-child__table) {
		padding: 0 !important;
		border-top: 0;
		background: var(--admin-surface-1, var(--bs-tertiary-bg));
	}
}

.hours-logged-child {
	&--message {
		padding: 0.75rem 1rem;
	}

	&__table {
		width: 100%;
		margin: 0;
		border-collapse: collapse;
		background: var(--admin-surface-1, var(--bs-tertiary-bg));

		thead th {
			font-size: 0.75rem;
			font-weight: 600;
			letter-spacing: 0.02em;
			text-transform: uppercase;
			color: var(--bs-secondary-color);
			background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-secondary-bg));
			border-bottom: 1px solid var(--bs-border-color);
			border-top: 0;
			padding: 0.5rem;
			white-space: nowrap;
		}

		tbody td {
			padding: 0.5rem;
			border-bottom: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
			vertical-align: middle;
		}

		tbody tr:last-child td {
			border-bottom: 0;
		}
	}

	&__client {
		min-width: 12rem;
	}
}

.kpi-child {
	padding: 0.75rem 1rem;

	&__heading {
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--bs-secondary-color);
		margin-bottom: 0.5rem;
	}

	&__panel {
		background: var(--admin-surface-1, var(--bs-tertiary-bg));
		border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
		border-radius: var(--bs-border-radius);
		padding: 0.75rem;
		height: 100%;
	}

	&__members li + li {
		margin-top: 0.25rem;
	}

	&__metric-table {
		td {
			padding: 0.15rem 0;
			vertical-align: middle;
		}
	}

	&__table {
		width: 100%;
		margin: 0;
		border-collapse: collapse;

		thead th {
			font-size: 0.75rem;
			font-weight: 600;
			letter-spacing: 0.02em;
			text-transform: uppercase;
			color: var(--bs-secondary-color);
			background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-secondary-bg));
			border-bottom: 1px solid var(--bs-border-color);
			border-top: 0;
			padding: 0.5rem;
			white-space: nowrap;
		}

		tbody td {
			padding: 0.5rem;
			border-bottom: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
			vertical-align: middle;
		}

		tbody tr:last-child td {
			border-bottom: 0;
		}
	}
}

.kpi-report-index {
	.kpi-group-header th {
		border-bottom: 0;
		font-weight: 600;
	}

	.kpi-toggle-btn {
		line-height: 1;
	}
}

/* Wide DataTables (directory) — was three duplicated inline <style>
   blocks. The overflow rule targeted .dataTables_wrapper, which DataTables 2
   no longer emits (it is .dt-container), so it had stopped applying. */
#data_table {
	tbody {
		td { vertical-align: middle; }
		tr { line-height: var(--data-table-line-height, 1.4); }
	}

	.contact-chip { max-width: 16rem; }
}

#data_table.data-table--roomy tbody tr { --data-table-line-height: 2; }

.dt-container { overflow: visible; }

/* ---------------------------------------------------------------------------
   NOTE: native CSS nesting does NOT concatenate like Sass — `&--modifier` is
   invalid and is silently dropped. Write the full compound `&.block--modifier`.

   Components that take a value from the server.
   Twig sets a custom property; the rule below consumes it. Replaces inline
   style="" attributes, following the pattern already used by timeline.css.
   --------------------------------------------------------------------------- */

/* Progress bars driven by a computed percentage. */
.progress-bar--metered {
	inline-size: var(--bar-pct, 0%);
}

/* Leader-board trophies. Tokens so the ramp is defined once, not per template. */
:root {
	--trophy-gold: #f5b942;
	--trophy-gold-glow: rgb(245 185 66 / 45%);
	--trophy-silver: #b8c5d0;
	--trophy-silver-glow: rgb(184 197 208 / 40%);
	--trophy-bronze: #c97b4a;
	--trophy-bronze-glow: rgb(201 123 74 / 40%);
}

.trophy {
	color: var(--trophy-colour, var(--trophy-gold));

	&.trophy--gold   { --trophy-colour: var(--trophy-gold); --trophy-glow: var(--trophy-gold-glow); }
	&.trophy--silver { --trophy-colour: var(--trophy-silver); --trophy-glow: var(--trophy-silver-glow); }
	&.trophy--bronze { --trophy-colour: var(--trophy-bronze); --trophy-glow: var(--trophy-bronze-glow); }

	&.trophy--podium {
		position: relative;
		z-index: 1;
		line-height: 1;
		filter:
			drop-shadow(0 2px 3px rgb(15 23 42 / 18%))
			drop-shadow(0 0 0.75rem var(--trophy-glow, transparent));
	}

	&.trophy--podium.trophy--gold {
		font-size: 3.5rem;
	}

	&.trophy--podium.trophy--silver {
		font-size: 2.75rem;
	}

	&.trophy--podium.trophy--bronze {
		font-size: 2.25rem;
	}
}

.podium-card-body {
	position: relative;
	background:
		radial-gradient(circle at 50% 0%, rgb(245 185 66 / 13%), transparent 42%),
		linear-gradient(180deg, var(--bs-tertiary-bg), transparent 70%);
	border-end-start-radius: var(--bs-card-inner-border-radius);
	border-end-end-radius: var(--bs-card-inner-border-radius);
}

.podium-wrap {
	position: relative;

	> .card {
		overflow: hidden;
	}

	&.podium-wrap--celebrating > .card {
		animation: podium-fanfare-glow 3.4s ease-out;
	}

	&.podium-wrap--celebrating .podium-slot--gold .trophy {
		animation: podium-trophy-bounce 1s ease-in-out 2;
	}
}

.podium-fanfare {
	position: absolute;
	z-index: 10;
	inset: 0;
	overflow: hidden;
	border-radius: var(--bs-border-radius-lg);
	pointer-events: none;
}

.podium-fanfare__piece {
	position: absolute;
	inset-block-start: -1.25rem;
	inset-inline-start: var(--fanfare-x);
	inline-size: 0.55rem;
	block-size: 0.9rem;
	border-radius: 0.12rem;
	background: var(--fanfare-colour);
	opacity: 0;
	animation: podium-confetti-fall 2.8s cubic-bezier(0.16, 0.75, 0.3, 1) var(--fanfare-delay) forwards;

	&:nth-child(3n) {
		inline-size: 0.4rem;
		block-size: 0.4rem;
		border-radius: 50%;
	}
}

@keyframes podium-confetti-fall {
	0% {
		opacity: 0;
		transform: translate3d(0, -1rem, 0) rotate(0deg);
	}
	10% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate3d(var(--fanfare-drift), 42rem, 0) rotate(var(--fanfare-turn));
	}
}

@keyframes podium-fanfare-glow {
	0%, 100% {
		filter: none;
	}
	25% {
		filter: drop-shadow(0 0 1.75rem rgb(245 185 66 / 45%));
	}
}

@keyframes podium-trophy-bounce {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	45% {
		transform: translateY(-0.65rem) scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.podium-fanfare {
		display: none;
	}

	.podium-wrap.podium-wrap--celebrating > .card,
	.podium-wrap.podium-wrap--celebrating .podium-slot--gold .trophy {
		animation: none;
	}
}

.podium {
	padding-block: 1.25rem 0.25rem;
}

.podium-slot {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	&.podium-slot--gold {
		z-index: 2;
	}
}

.podium-step {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-block-size: 6.5rem;
}

.podium-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 5.5rem;
	block-size: 5.5rem;

	&::before {
		position: absolute;
		inset: 0.3rem;
		border: 1px solid color-mix(in srgb, var(--trophy-colour, var(--trophy-gold)) 45%, transparent);
		border-radius: 50%;
		content: '';
	}

	.podium-slot--gold & {
		inline-size: 6.5rem;
		block-size: 6.5rem;
	}
}

.podium-icon__halo {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle, var(--trophy-glow, transparent) 0%, transparent 70%);
	opacity: 0.85;
	pointer-events: none;
}

.podium-card {
	position: relative;
	overflow: hidden;
	inline-size: 100%;
	min-block-size: var(--podium-card-height);
	transition: box-shadow 0.2s ease;

	&::before {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 0;
		block-size: 0.25rem;
		background: var(--trophy-colour, var(--trophy-gold));
		content: '';
	}

	.card-body {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		justify-content: center;
	}

	.display-6 {
		margin-block: 0 0.75rem;
		font-size: clamp(2.5rem, 5vw, 4rem);
		font-weight: 800;
		line-height: 0.8;
		color: color-mix(in srgb, var(--trophy-colour, var(--trophy-gold)) 68%, var(--bs-body-color));
		text-shadow: 0 1px 0 var(--bs-body-bg);
	}

	&.podium-card--gold {
		--trophy-colour: var(--trophy-gold);
		--podium-card-height: 21rem;
		border-color: color-mix(in srgb, var(--trophy-gold) 45%, var(--bs-border-color)) !important;
		box-shadow: 0 0.35rem 1.25rem var(--trophy-gold-glow);
	}

	&.podium-card--silver {
		--trophy-colour: var(--trophy-silver);
		--podium-card-height: 18rem;
		border-color: color-mix(in srgb, var(--trophy-silver) 40%, var(--bs-border-color)) !important;
		box-shadow: 0 0.3rem 1rem var(--trophy-silver-glow);
	}

	&.podium-card--bronze {
		--trophy-colour: var(--trophy-bronze);
		--podium-card-height: 16rem;
		border-color: color-mix(in srgb, var(--trophy-bronze) 40%, var(--bs-border-color)) !important;
		box-shadow: 0 0.25rem 0.85rem var(--trophy-bronze-glow);
	}
}

.podium-ordinal-suffix {
	margin-inline-start: 0.08em;
	font-size: 0.38em;
	font-weight: 700;
	vertical-align: super;
}

.podium-person {
	display: grid;
	justify-items: center;
	gap: 0.45rem;
	min-inline-size: 0;
}

.podium-avatar {
	display: grid;
	place-items: center;
	block-size: 3.75rem;

	.contact-chip {
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.contact-chip__avatar {
		inline-size: 3.5rem;
		block-size: 3.5rem;
		box-shadow: 0 0 0 0.2rem var(--bs-body-bg), 0 0 0 0.3rem var(--trophy-colour);
	}
}

.podium-avatar-link {
	display: inline-flex;
	border-radius: 50%;
	text-decoration: none;

	&:focus-visible {
		outline: 2px solid var(--bs-focus-ring-color);
		outline-offset: 0.25rem;
	}
}

.podium-avatar__empty {
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border: 1px dashed var(--bs-border-color);
	border-radius: 50%;
	font-size: 1.25rem;
}

.podium-name {
	max-inline-size: 100%;
	line-height: 1.25;
	color: var(--bs-emphasis-color);
	overflow-wrap: anywhere;
}

/* Hot-desk floor-plan legend. The same tokens drive the SVG desk fills, so the
   legend and the plan cannot drift apart. */
:root {
	--hotdesk-available: #f7d9ac;
	--hotdesk-booked: #e02020;
	--hotdesk-half-day: #00acec;
	--hotdesk-unused: var(--bs-secondary-color, grey);
}

.hotdesk-swatch {
	background: var(--hotdesk-swatch-colour, transparent);

	&.hotdesk-swatch--available { --hotdesk-swatch-colour: var(--hotdesk-available); }
	&.hotdesk-swatch--booked    { --hotdesk-swatch-colour: var(--hotdesk-booked); }
	&.hotdesk-swatch--half-day  { --hotdesk-swatch-colour: var(--hotdesk-half-day); }
	&.hotdesk-swatch--unused    { --hotdesk-swatch-colour: var(--hotdesk-unused); }
}

/* Team badge — background and its contrast colour both come from the server
   (Model_Teamcolours already classifies light vs dark), passed as custom
   properties instead of a full inline declaration.
   NB: the old .colour-coded-box class this replaces had no CSS at all. */
.team-badge {
	background-color: var(--team-colour, var(--bs-secondary));
	color: var(--team-text, var(--bs-white));
}

/* Chart containers sized by the view. */
.chart {
	block-size: var(--chart-height, 350px);
}

/* Sticky sidebars in the user create/edit forms. */
.sticky-offset {
	top: var(--sticky-offset, 1rem);
}

/* Square staff avatar placeholder (create/edit/view). */
.staff-avatar {
	aspect-ratio: 1;
	max-inline-size: var(--staff-avatar-size, 230px);
}

/* Hero monogram on the profile screen — the large stand-in for the photo.
   Its own class rather than .staff-avatar + a Bootstrap .bg-* utility, because
   those carry !important and would beat the monogram styles below. */
.avatar-hero-mono {
	aspect-ratio: 1;
	max-inline-size: var(--staff-avatar-size, 230px);
	background: var(--admin-surface-2, var(--bs-secondary-bg));
	color: var(--admin-text-muted, var(--bs-secondary-color));
	user-select: none;
}

/* ---- Initials monogram ----
   The avatar for anyone not using a photo or Gravatar. Layered onto the existing
   contact-card__avatar--initials / contact-chip__avatar--initials spans, so the
   sizing stays with the card and only the paint job lives here.

   --avatar-hue is stamped per person from a hash of their name (Service_Avatar::hue,
   mirrored in contact_chip.js) so the colour is stable and needs nothing stored.

   Every style paints explicitly, `classic` included. It would be tempting to let
   classic inherit the host element's own grey, but then any host that sets its
   own background at equal specificity silently beats the other four styles. */
.avatar-mono {
	--avatar-accent: hsl(var(--avatar-hue, 210) 58% 45%);

	/* The muted default the intranet has always used, and still the fallback for
	   anyone who never picks a style. */
	&.avatar-mono--classic {
		background: var(--admin-surface-2, var(--bs-secondary-bg));
		color: var(--admin-text-muted, var(--bs-secondary-color));
	}

	&.avatar-mono--filled {
		background: var(--avatar-accent);
		color: #fff;
	}

	/* Text is darkened past the accent rather than reusing it: on a 20% tint of
	   itself the accent is only ~2.4:1, which is hard to read even for two letters. */
	&.avatar-mono--soft {
		background: color-mix(in srgb, var(--avatar-accent) 20%, var(--bs-body-bg));
		color: color-mix(in srgb, var(--avatar-accent) 75%, var(--bs-body-color));
	}

	&.avatar-mono--outline {
		background: transparent;
		border: 2px solid var(--avatar-accent);
		color: var(--avatar-accent);
	}

	/* Follows the contact card border, gradients included — the one style that
	   ignores the name hash, because the point of it is to match the ring. */
	&.avatar-mono--brand {
		background: var(--contact-border, var(--bs-primary));
		color: #fff;
	}
}

/* Mid-tone accents go muddy against a dark surface; lift them rather than
   restating every rule. The lifted accent is light enough that filled needs dark
   text — `brand` is left alone, because its fill is the user's own border colour
   and stays a saturated mid-tone in both themes. */
:root[data-bs-theme="dark"] .avatar-mono {
	--avatar-accent: hsl(var(--avatar-hue, 210) 62% 62%);

	&.avatar-mono--filled {
		color: var(--admin-slate-900, #0f172a);
	}
}

/* Table column sizing — replaces per-<th> inline widths. */
.col-w-10 { inline-size: 10%; }
.col-minw-sm { min-inline-size: 8rem; }
.col-minw-md { min-inline-size: 12rem; }

/* Bounded controls / media — replaces one-off inline sizing. */
.input-group--date { max-inline-size: 22rem; }
.form-narrow { max-inline-size: 32rem; }
.select-auto { inline-size: auto; min-inline-size: 11rem; }
.thumb-sm { max-block-size: 31px; }
.thumb-lg { max-block-size: 200px; }

/* Column widths for tables that need a floor so cells don't collapse. */
.col-minw-xs { min-inline-size: 150px; }
.col-minw-lg { min-inline-size: 180px; }
.col-minw-xl { min-inline-size: 190px; }
.col-w-toggle { inline-size: 2.5rem; }
.col-w-actions { inline-size: 225px; }

/* Thin progress track — drives Bootstrap's own height variable. */
.progress--thin { --bs-progress-height: 0.5rem; }

/* Small round colour dot (meeting-room list, dashboards). */
.colour-dot {
	display: inline-block;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-radius: 50%;
	background-color: var(--dot-colour, var(--bs-secondary));
}

/* Toast container must clear modals; tracks Bootstrap's own z-index scale. */
#intranet-toast-container {
	z-index: var(--bs-toast-zindex, 1090);
}

/* Holiday balance severity — 5 steps from ample (green) to critical (red).
   Was raw CSS colour keywords in an inline style, which did not adapt to dark
   mode; these tokens do. */
:root {
	--holiday-balance-ample: var(--days-inactive-extremely-low);
	--holiday-balance-good: var(--days-inactive-low);
	--holiday-balance-fair: var(--days-inactive-mid);
	--holiday-balance-low: var(--days-inactive-high);
	--holiday-balance-critical: var(--days-inactive-extremely-high);
}

.holiday-balance {
	color: var(--holiday-balance-colour, inherit);

	&.holiday-balance--ample    { --holiday-balance-colour: var(--holiday-balance-ample); }
	&.holiday-balance--good     { --holiday-balance-colour: var(--holiday-balance-good); }
	&.holiday-balance--fair     { --holiday-balance-colour: var(--holiday-balance-fair); }
	&.holiday-balance--low      { --holiday-balance-colour: var(--holiday-balance-low); }
	&.holiday-balance--critical { --holiday-balance-colour: var(--holiday-balance-critical); }
}

/* Search-team KPI report — was an inline <style> in reports/search_team_kpi.twig. */
.kpi-report {
	li {
		list-style: none;
		text-align: start;
	}

	.no-border tr > td {
		border: 0;
		padding: 0.125rem 0.5rem;
	}

	.no-border tr:first-of-type > td {
		padding-block-start: 0;
	}

	.no-border tr > td:nth-of-type(2) {
		font-weight: 700;
	}

	tfoot {
		border-top: 2px ridge var(--bs-border-color);
	}
}

/* PPC dashboard — was an inline <style> in adwords/dashboards/final.twig.
   px -> rem, and the ID selector dropped so no !important is needed. */
.ppc-dashboard {
	font-size: 0.6875rem;

	+ .row { display: none; }

	td.hours { min-inline-size: 10.625rem; }
}

.week-link { cursor: pointer; }

/* Toggled by jQuery .toggle() in adwords_dashboard.js — must stay a plain
   display rule, not .d-none, or the toggle cannot override it. */
.weekly { display: none; }

/* Sales leader board — was an inline <style> in sales/report/leader_board.twig. */
@keyframes dropText {
	0%   { opacity: 1; margin: 0; animation-timing-function: ease-in; }
	100% { opacity: 0; margin: 150px auto -150px; }
}

@keyframes addText {
	0%   { opacity: 0; margin: -150px auto 150px; animation-timing-function: ease-in; }
	100% { opacity: 1; margin: 0; }
}

.drop_text,
.add_text {
	display: block;
}

.drop_text { animation: dropText 3s linear 1 0s; }
.add_text  { animation: addText 1s linear 1 0s; }

@media (prefers-reduced-motion: reduce) {
	.drop_text,
	.add_text {
		animation: none;
	}
}

.leader-statistic,
#podium p.name {
	overflow: hidden;
}

/* Department chip — Enum_Department::chip() emits this.
   Colour arrives as --dept-colour; the tint is mixed against the body
   background so it reads correctly in both light and dark mode. Generalised
   from .timeline-dept-badge, which used the same treatment. */
.dept-chip {
	--dept-colour: var(--bs-secondary-color, #64748b);

	/* Contrast note: the obvious treatment — an 18% tint with the brand colour at
	   full strength as the text — fails WCAG AA on over half the palette
	   (Design lands at 2.85:1 against the 4.5 needed for text this size).
	   Lightening the tint and darkening the text takes the worst case to 5.3:1
	   while keeping each department recognisably its own colour. */
	background-color: color-mix(in srgb, var(--dept-colour) 15%, var(--bs-body-bg, #fff));
	color: color-mix(in srgb, var(--dept-colour) 70%, #000);
	border: 1px solid color-mix(in srgb, var(--dept-colour) 35%, transparent);
	font-weight: 500;

	/* Abbreviated chips carry a title; show it's hoverable without a link cursor. */
	&[title] {
		cursor: help;
	}
}

:root[data-bs-theme="dark"] .dept-chip {
	/* Mid-dark brand fills go muddy against a dark surface — lift the text and
	   thin the tint so the chip stays legible. */
	background-color: color-mix(in srgb, var(--dept-colour) 28%, var(--bs-body-bg, #0b1220));
	color: color-mix(in srgb, var(--dept-colour) 45%, #ffffff);
	border-color: color-mix(in srgb, var(--dept-colour) 50%, transparent);
}

/* Two-factor type chip — Enum_Twofactor_Type::chip() emits this.
   Same treatment as .dept-chip so the two read alike in a table row; the
   palette is fixed and small, but the tint/text mix is kept identical rather
   than hand-tuned so it stays legible if a type is ever recoloured. */
.tfa-chip {
	--tfa-colour: var(--bs-secondary-color, #64748b);

	background-color: color-mix(in srgb, var(--tfa-colour) 15%, var(--bs-body-bg, #fff));
	color: color-mix(in srgb, var(--tfa-colour) 70%, #000);
	border: 1px solid color-mix(in srgb, var(--tfa-colour) 35%, transparent);
	font-weight: 500;

	&[title] {
		cursor: help;
	}
}

:root[data-bs-theme="dark"] .tfa-chip {
	background-color: color-mix(in srgb, var(--tfa-colour) 28%, var(--bs-body-bg, #0b1220));
	color: color-mix(in srgb, var(--tfa-colour) 45%, #ffffff);
	border-color: color-mix(in srgb, var(--tfa-colour) 50%, transparent);
}

/* Verification code countdown ring (password view screen).
   --totp-progress is set by the script, 1 down to 0 across the period. The ring
   is a conic-gradient rather than an SVG so there is no extra markup and it
   inherits the theme colours. */
.totp-countdown {
	--totp-progress: 1;

	display: inline-grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--bs-body-color);
	background:
		conic-gradient(var(--bs-primary) calc(var(--totp-progress) * 360deg), transparent 0),
		radial-gradient(closest-side, var(--bs-body-bg) 74%, transparent 75%);
	/* The radial layer masks the middle; without it the whole disc fills. */
	background-blend-mode: normal;
	position: relative;

	&::after {
		content: "";
		position: absolute;
		inset: 4px;
		border-radius: 50%;
		background: var(--bs-body-bg);
	}

	> * {
		position: relative;
		z-index: 1;
	}

	&.totp-countdown--low {
		background:
			conic-gradient(var(--bs-danger) calc(var(--totp-progress) * 360deg), transparent 0),
			radial-gradient(closest-side, var(--bs-body-bg) 74%, transparent 75%);
		color: var(--bs-danger);
	}
}

/* Generated QR codes (Service_Qrcode renders SVG with class .qr-code).
   Sized by the wrapper so the same markup works on the card, the admin list and
   the edit screen without regenerating at a different scale. */
.wifi-qr {
	inline-size: 8rem;
	max-inline-size: 100%;

	/* Target the root svg, not .qr-code: the library stamps its cssClass onto
	   every <path> as well, so styling that class would size each module. */
	> svg {
		display: block;
		inline-size: 100%;
		block-size: auto;
		/* The quiet zone is part of the code, so the white has to reach the
		   edge — a coloured background bleeding in can stop it scanning. */
		background: #fff;
		border-radius: var(--bs-border-radius-sm);
		border: 1px solid var(--bs-border-color);
	}
}

.wifi-qr--sm { inline-size: 4rem; }
.wifi-qr--lg { inline-size: 12rem; }

/* Builder preview and list thumbnails. Same treatment as .wifi-qr — the white
   has to reach the edge or the quiet zone is lost and the code may not scan. */
.qr-preview,
.qr-thumb {
	inline-size: 12rem;
	max-inline-size: 100%;

	> svg {
		display: block;
		inline-size: 100%;
		block-size: auto;
		background: #fff;
		border-radius: var(--bs-border-radius-sm);
		border: 1px solid var(--bs-border-color);
	}
}

.qr-thumb { inline-size: 4rem; }

.qr-preview:empty::after {
	content: "Enter some content to see the code";
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 1rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--bs-secondary-color);
	border: 1px dashed var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

/* Colour chip on the preset buttons. */
.qr-swatch {
	display: inline-block;
	inline-size: 0.75rem;
	block-size: 0.75rem;
	border-radius: 50%;
	vertical-align: -0.05rem;
	margin-inline-end: 0.15rem;
	border: 1px solid rgb(0 0 0 / 15%);
}

/* Setup walkthrough in the verification-code modal. Numbered markers sit in
   their own gutter so wrapped lines stay aligned under the text, not the digit. */
.totp-steps {
	counter-reset: totp-step;
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;

	> li {
		counter-increment: totp-step;
		position: relative;
		padding-left: 2.5rem;
		margin-bottom: 0.85rem;

		&::before {
			content: counter(totp-step);
			position: absolute;
			left: 0;
			top: 0;
			display: grid;
			place-items: center;
			inline-size: 1.75rem;
			block-size: 1.75rem;
			border-radius: 50%;
			background: var(--bs-primary-bg-subtle);
			color: var(--bs-primary-text-emphasis);
			font-size: 0.8rem;
			font-weight: 600;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}

/* A refresh failed — the code shown may no longer be current. */
.totp--stale [data-totp-code] {
	opacity: 0.5;
	text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
	.totp-countdown {
		transition: none;
	}
}

/* A two-factor row on the password form. Nothing custom beyond a hover cue —
   the layout is Bootstrap utilities. */
.tfa-row {
	transition: border-color 0.15s ease-in-out;

	&:hover {
		border-color: var(--bs-primary-border-subtle);
	}
}

/* Drop zones: password attachments, and the profile avatar upload.
   A <label> wrapping a visually-hidden file input, so click-to-browse and
   keyboard activation come from the native control rather than JS. */
.password-dropzone,
.avatar-dropzone {
	border: 2px dashed var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background: var(--bs-tertiary-bg);
	cursor: pointer;
	transition: border-color .15s ease-in-out, background-color .15s ease-in-out;

	&:hover {
		border-color: var(--admin-brand, var(--bs-primary));
		background: var(--bs-secondary-bg);
	}

	/* Set while a file is dragged over — see passwords_view.js. */
	&.is-dragover {
		border-color: var(--admin-brand, var(--bs-primary));
		background: color-mix(in srgb, var(--admin-brand, var(--bs-primary)) 10%, var(--bs-body-bg));
	}

	/* The hidden input still receives focus; surface it on the visible box. */
	&:has(input:focus-visible) {
		outline: 2px solid var(--admin-brand, var(--bs-primary));
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.password-dropzone,
	.avatar-dropzone {
		transition: none;
	}
}

/* ---- Profile avatar picker ----
   Source tiles behave like radio cards: the whole tile is the label, and the
   checked state is driven by :has() rather than a JS class toggle. */
.avatar-upload-or {
	position: relative;
	line-height: 1;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		width: calc(50% - 1.5rem);
		height: 1px;
		background: var(--bs-border-color);
	}

	&::before {
		left: 0;
	}

	&::after {
		right: 0;
	}
}

.avatar-upload-section {
	border: 2px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background: var(--bs-body-bg);
}

.avatar-source {
	cursor: pointer;

	& .avatar-source__tile {
		border: 2px solid var(--bs-border-color);
		border-radius: var(--bs-border-radius);
		transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
	}

	&:hover .avatar-source__tile {
		border-color: var(--admin-brand, var(--bs-primary));
	}

	&:has(input:checked) .avatar-source__tile {
		border-color: var(--admin-brand, var(--bs-primary));
		background: color-mix(in srgb, var(--admin-brand, var(--bs-primary)) 8%, var(--bs-body-bg));
	}

	&:has(input:focus-visible) .avatar-source__tile {
		outline: 2px solid var(--admin-brand, var(--bs-primary));
		outline-offset: 2px;
	}
}

/* Monogram style swatches: a live 44px sample of each treatment. */
.avatar-mono-option {
	cursor: pointer;

	/* Shape and type only — the paint comes from the .avatar-mono style the
	   swatch is demonstrating. */
	& .avatar-mono-sample {
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 0.95rem;
		user-select: none;
	}

	& .avatar-mono-frame {
		border: 2px solid transparent;
		border-radius: var(--bs-border-radius);
	}

	&:has(input:checked) .avatar-mono-frame {
		border-color: var(--admin-brand, var(--bs-primary));
	}

	&:has(input:focus-visible) .avatar-mono-frame {
		outline: 2px solid var(--admin-brand, var(--bs-primary));
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.avatar-source .avatar-source__tile {
		transition: none;
	}
}

/* ---- View password screen ---- */

/* Key glyph above the credential name. */
.password-glyph {
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--admin-brand, var(--bs-primary)) 15%, var(--bs-body-bg));
	color: var(--admin-brand, var(--bs-primary));
	font-size: 1.35rem;
}

/* The panel holding the username / password pair. */
.password-reveal {
	background: var(--bs-tertiary-bg);
	border: 1px solid var(--bs-border-color);

	code {
		color: var(--bs-body-color);
	}
}

/* The password detail column. Centred and capped rather than running the full
   width of the window — the content is a handful of short values and a note,
   and a 2000px-wide card leaves them stranded at either edge. */
.password-detail {
	max-inline-size: 68rem;
	margin-inline: auto;
}

/* Copy control on the password view: the icon alone, sitting directly after
   the value it copies rather than pushed to the far edge — with a long
   password the button ended up nowhere near the text it belonged to. */
.password-copy {
	border: 0;
	background: none;
	padding: 0.25rem;
	line-height: 1;
	color: var(--bs-secondary-color);
	border-radius: var(--bs-border-radius-sm);
	cursor: pointer;
	transition: color 0.15s ease-in-out;

	&:hover,
	&:focus-visible {
		color: var(--bs-primary);
	}

	/* Held briefly after a successful copy; see flashCopied(). */
	&.is-copied {
		color: var(--bs-success);
	}
}

@media (prefers-reduced-motion: reduce) {
	.password-copy {
		transition: none;
	}
}


/* Notes keep the line breaks and spacing they were typed with. Using CSS
   rather than nl2br means indentation and blank lines survive too, and the
   value stays plain escaped text with nothing marked HTML-safe. */
/* Per-service availability — one brand icon per service, coloured by state.

   Colours are Microsoft's presence palette, so the states read the same here
   as in Teams. Colour is never the only signal: the title and a
   visually-hidden span carry "Microsoft Teams — Busy (In a meeting)" in
   words. Replaces the single Teams dot-and-label; the icon is the brand, the
   colour is the state. */
.service-presence-set {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
}

.service-presence {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 50%;
	color: var(--presence-colour, var(--bs-secondary-color));
	background: color-mix(in srgb, var(--presence-colour, #8a8886) 14%, transparent);
	font-size: 0.8rem;
	cursor: help;
}

/* The breathing ring for genuinely-available states. Painted on ::after so
   the glyph holds still, and switched off for reduced-motion users. */
.service-presence-set--lg {
	gap: 0.85rem;
}

.service-presence-set--lg .service-presence {
	inline-size: 2.5rem;
	block-size: 2.5rem;
	font-size: 1.25rem;
}

.service-presence--pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--presence-colour, #6bb700) 55%, transparent);
	animation: presence-pulse 2.4s ease-out infinite;
}

@keyframes presence-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--presence-colour, #6bb700) 55%, transparent); }
	70% { box-shadow: 0 0 0 0.55rem transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.service-presence--pulse::after {
		animation: none;
	}
}

/* A note, dressed as one — see partials/_note_card.twig.

   A pinned index card: warm paper tint, a brand-orange spine down the left,
   ruled lines behind the text and a turned-up corner. The ruling is a repeating
   gradient locked to the same line-height as the text, so the words sit on the
   lines rather than drifting across them as the note gets longer.

   NB the compound class is written out in full — native CSS nesting cannot
   concatenate `&__heading`, and doing so silently drops the rule. */
.note-card {
	--note-line-height: 1.6rem;
	--note-paper: #fffdf6;
	--note-rule: rgb(13 110 253 / 9%);

	position: relative;
	padding: 1.5rem 1.75rem 1.75rem;
	border: 1px solid var(--bs-border-color);
	border-left: 4px solid var(--intranet-colewood, #ff7700);
	border-radius: 0.5rem;
	background-color: var(--note-paper);
	box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 6px 16px -8px rgb(0 0 0 / 18%);
	text-align: left;

	/* Turned-up corner: two triangles, one the page and one its shadow. */
	&::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		border-width: 0 0 1.4rem 1.4rem;
		border-style: solid;
		border-color: transparent transparent var(--bs-body-bg) transparent;
		border-bottom-right-radius: 0.5rem;
		filter: drop-shadow(-1px -1px 1px rgb(0 0 0 / 12%));
	}

	.note-card__heading {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		margin-bottom: 0.75rem;
		font-size: 0.75rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		font-weight: 600;
		/* Brand orange straight is 2.6:1 on this paper — the same shortfall the
		   department chips hit. Darkened to clear AA while still reading orange;
		   the spine beside it carries the colour at full strength, where it is
		   a graphic rather than text. */
		color: color-mix(in srgb, var(--intranet-colewood, #ff7700) 70%, #000);
	}

	.note-card__heading i {
		/* Pinned at a slight angle, the way one actually would be. */
		rotate: -20deg;
	}
}

:root[data-bs-theme="dark"] .note-card {
	--note-paper: color-mix(in srgb, var(--bs-body-bg) 88%, #ffcc66);
	--note-rule: rgb(255 255 255 / 7%);

	box-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 16px -8px rgb(0 0 0 / 50%);

	/* Full-strength orange lands at 4.34:1 on this paper — just under AA for
	   text this size. Lifted with a little white rather than darkened, which is
	   the wrong direction against a dark background. The spine keeps the pure
	   colour: it is a graphic, where 3:1 is the bar and 4.34 clears it. */
	.note-card__heading {
		color: color-mix(in srgb, var(--intranet-colewood, #ff7700) 85%, #fff);
	}
}

.note-card__body {
	/* pre-wrap keeps the line breaks, spacing and indentation as typed — the
	   reason this is CSS rather than nl2br. */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	line-height: var(--note-line-height, 1.6rem);
	/* Ruled lines sit behind the text, aligned to the line box. */
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent calc(var(--note-line-height, 1.6rem) - 1px),
		var(--note-rule, transparent) calc(var(--note-line-height, 1.6rem) - 1px),
		var(--note-rule, transparent) var(--note-line-height, 1.6rem)
	);
}

/* Ruled lines are decoration: dropped on request, and where the caller has
   asked for a plain card. */
.note-card--plain .note-card__body,
.note-card--plain {
	background-image: none;
}

@media (prefers-contrast: more) {
	.note-card__body {
		background-image: none;
	}
}

/* Create / edit form: actions stay reachable at the foot of a long form. */
.password-form__actions {
	position: sticky;
	bottom: 0;
	z-index: 2;
	background: linear-gradient(to top, var(--bs-body-bg) 65%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.password-form .form-control,
	.password-form .form-select {
		transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}
}

/* Universal search — navbar trigger + command-palette overlay */
.nav-search-trigger {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0.45rem;
	height: 32px;
	padding: 0 0.75rem;
	margin-left: 0.75rem;
	border: 1px solid color-mix(in srgb, var(--navbar-fg, currentColor) 16%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--navbar-fg, currentColor) 8%, transparent);
	color: var(--navbar-fg-muted, inherit);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: none;

	&:hover,
	&:focus-visible {
		background: var(--navbar-hover-bg, rgb(15 23 42 / 8%));
		color: var(--navbar-fg, inherit);
		border-color: color-mix(in srgb, var(--navbar-fg, currentColor) 28%, transparent);
		text-decoration: none;
		outline: none;
	}

	&:focus-visible {
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--navbar-fg, currentColor) 35%, transparent);
	}

	> .fa-magnifying-glass {
		font-size: 0.8125rem;
	}
}

.nav-search-trigger__label {
	font-size: 0.8125rem;
	font-weight: 500;
}

.nav-search-trigger__kbd {
	font-size: 0.65rem;
	padding: 0.1rem 0.35rem;
	border-radius: 0.25rem;
	border: 1px solid color-mix(in srgb, var(--navbar-fg-muted, currentColor) 55%, transparent);
	color: inherit;
	background: color-mix(in srgb, var(--navbar-fg, currentColor) 8%, transparent);
	line-height: 1.2;
}

@media (max-width: 991.98px) {
	.nav-search-trigger {
		margin-left: 0.5rem;
		padding: 0 0.6rem;
	}
}

body.nav-search-open .modal-backdrop {
	background: rgb(15 23 42 / 42%);
	backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
	body.nav-search-open .modal-backdrop {
		backdrop-filter: none;
	}
}

.nav-search-overlay {
		.nav-search-dialog {
			margin: 12vh auto 1.5rem;
			max-width: min(40rem, calc(100vw - 2rem));
			pointer-events: none;
		}

	.nav-search {
		pointer-events: auto;
		overflow: hidden;
		padding: 0;
		border: 1px solid var(--admin-surface-3, var(--bs-border-color));
		border-radius: 0.75rem;
		background: var(--admin-surface-1, var(--bs-body-bg));
		color: var(--admin-text-default, var(--bs-body-color));
		box-shadow: 0 16px 70px rgb(15 23 42 / 28%);
	}

	.nav-search__header {
		position: relative;
		display: flex;
		align-items: center;
		border-bottom: 1px solid var(--admin-surface-3, var(--bs-border-color));
	}

	.nav-search__input-icon {
		position: absolute;
		left: 1.1rem;
		color: var(--admin-text-muted, var(--bs-secondary-color));
		pointer-events: none;
		font-size: 1rem;
	}

	.nav-search__input {
		flex: 1;
		width: 100%;
		border: 0;
		outline: 0;
		box-shadow: none;
		background: transparent;
		color: inherit;
		font-size: 1.05rem;
		line-height: 1.4;
		padding: 1rem 1.15rem 1rem 2.85rem;
		caret-color: var(--admin-brand, var(--intranet-colewood, #ff7700));

		&::placeholder {
			color: var(--admin-text-muted, var(--bs-secondary-color));
		}

		&:focus {
			outline: 0;
			box-shadow: none;
		}

		&::-webkit-search-cancel-button {
			appearance: none;
		}
	}

	.nav-search__results {
		max-height: min(52vh, 22rem);
		overflow: auto;
		padding: 0.4rem 0.4rem 0.55rem;

		&[hidden] {
			display: none;
		}
	}

	.nav-search__empty {
		margin: 0;
		padding: 1.1rem 0.85rem;
		text-align: center;
		font-size: 0.85rem;
		color: var(--admin-text-muted, var(--bs-secondary-color));
	}

	.nav-search-group {
		padding: 0.15rem 0 0.35rem;

		& + & {
			margin-top: 0.15rem;
		}
	}

	.nav-search-group__label {
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--admin-text-muted, var(--bs-secondary-color));
		margin: 0.35rem 0.65rem 0.2rem;
	}

	.nav-search-item {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.5rem 0.7rem 0.5rem 0.6rem;
		border-radius: 0.4rem;
		border-left: 3px solid transparent;
		color: inherit;
		text-decoration: none;

		&:hover,
		&.nav-search-item--active {
			background: var(--admin-surface-2, var(--bs-tertiary-bg));
			color: inherit;
			text-decoration: none;
		}

		&.nav-search-item--active {
			border-left-color: var(--admin-brand, var(--intranet-colewood, #ff7700));
			background: color-mix(in srgb, var(--admin-brand, var(--intranet-colewood, #ff7700)) 12%, var(--admin-surface-1, var(--bs-body-bg)));

			.nav-search-item__icon {
				color: var(--admin-brand, var(--intranet-colewood, #ff7700));
			}
		}
	}

	.nav-search-item__icon {
		width: 1.1rem;
		text-align: center;
		color: var(--admin-text-muted, var(--bs-secondary-color));
		flex-shrink: 0;
	}

	.nav-search-item__body {
		min-width: 0;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.1rem;
	}

	.nav-search-item__label {
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.nav-search-item__meta {
		font-size: 0.75rem;
		color: var(--admin-text-muted, var(--bs-secondary-color));
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.nav-search__footer {
		display: flex;
		flex-wrap: wrap;
		gap: 0.85rem 1.15rem;
		padding: 0.45rem 0.9rem;
		border-top: 1px solid var(--admin-surface-3, var(--bs-border-color));
		background: color-mix(in srgb, var(--admin-surface-2, var(--bs-tertiary-bg)) 70%, transparent);
		color: var(--admin-text-muted, var(--bs-secondary-color));
		font-size: 0.72rem;
	}

	.nav-search__hint-pair {
		display: inline-flex;
		align-items: center;
		gap: 0.28rem;
	}

	kbd {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.25rem;
		padding: 0.05rem 0.28rem;
		border: 1px solid var(--admin-surface-3, var(--bs-border-color));
		border-radius: 0.25rem;
		background: var(--admin-surface-1, var(--bs-body-bg));
		color: var(--admin-text-soft, var(--bs-secondary-color));
		font-size: 0.68rem;
		line-height: 1.2;
	}
}

/* Hybrid working — overview, book wizard, forms */
.hybrid-working {
	.hybrid-toolbar__label {
		letter-spacing: 0.04em;
	}

	.hybrid-stat-tile .card-body {
		min-height: 100%;
	}

	.hybrid-form-card {
		max-width: 52rem;

		&--hotdesk {
			max-width: none;
		}
	}

	.hybrid-form-summary {
		background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
	}

	&.hybrid-working--book {
		.hybrid-book-container {
			padding-bottom: 2rem;
		}

		.hybrid-book-body {
			margin-top: 1.5rem;
		}

		.hybrid-book-panel {
			padding: clamp(1.5rem, 3vw, 3rem);
			border: 1px solid var(--bs-border-color);
			border-radius: var(--bs-border-radius-xl);
			background: var(--admin-surface-1, var(--bs-body-bg));
			box-shadow: 0 0.75rem 2rem rgb(33 37 41 / 6%);
		}

		.hybrid-book-panel__eyebrow {
			margin-bottom: 0.5rem;
			color: var(--bs-primary);
			font-size: 0.75rem;
			font-weight: 700;
			letter-spacing: 0.1em;
			text-transform: uppercase;
		}

		.hybrid-book-panel__description {
			max-width: 38rem;
		}

		.hybrid-book-panel__note {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.65rem 0.85rem;
			border-radius: var(--bs-border-radius);
			background: var(--bs-tertiary-bg);
			color: var(--bs-secondary-color);
		}

		.hybrid-book-intro {
			display: flex;
			align-items: center;
			gap: 1rem;
			max-width: 52rem;
			margin: 0 auto 1.5rem;
			padding: 1.25rem 1.5rem;
			border-left: 4px solid var(--bs-primary);
			border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
			background: color-mix(in srgb, var(--bs-primary) 7%, var(--bs-body-bg));
		}

		.hybrid-book-intro.hybrid-book-intro--wide {
			max-width: none;
		}

		.hybrid-book-intro__icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 2.75rem;
			font-size: 1.5rem;
			text-align: center;
		}

		.hybrid-book-form {
			max-width: 52rem;
			margin-inline: auto;

			&.hybrid-book-form--wide {
				max-width: none;
			}
		}

		.hybrid-type-card__icon {
			font-size: 1.75rem;
			line-height: 1;

			&--sm {
				font-size: 1.25rem;
			}
		}
	}

	.hybrid-wizard__list {
		display: flex;
		align-items: stretch;
		gap: 0.75rem;
		width: 100%;
	}

	.hybrid-wizard__item {
		flex: 1 1 0;
		min-width: 0;
	}

	.hybrid-wizard__divider {
		flex: 0 0 2rem;
		align-self: center;
		block-size: 2px;
		background: var(--bs-border-color);
		border-radius: 1px;
	}

	.hybrid-wizard__link {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		min-height: 3.5rem;
		padding: 0.75rem 1rem;
		border: 1px solid var(--bs-border-color);
		border-radius: var(--bs-border-radius-lg);
		background: var(--admin-surface-1, var(--bs-body-bg));
		color: var(--bs-body-color);
		text-decoration: none;
		transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;

		&:hover {
			border-color: var(--bs-primary);
			color: var(--bs-body-color);
		}
	}

	.hybrid-wizard__marker {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		border-radius: 50%;
		background: var(--bs-tertiary-bg);
		color: var(--bs-secondary-color);
		font-size: 0.8rem;
		font-weight: 600;
		flex-shrink: 0;
	}

	.hybrid-wizard__label {
		font-size: 0.9rem;
		font-weight: 500;
		min-width: 0;
	}

	.hybrid-wizard__item.is-active .hybrid-wizard__link {
		border-color: var(--bs-primary);
		box-shadow: 0 0 0 0.15rem rgb(var(--bs-primary-rgb) / 18%);
		background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
	}

	.hybrid-wizard__item.is-active .hybrid-wizard__marker {
		background: var(--bs-primary);
		color: #fff;
	}

	.hybrid-wizard__item.is-complete .hybrid-wizard__marker {
		background: var(--bs-success);
		color: #fff;
	}

	.hybrid-type-card {
		min-height: 100%;
		border-width: 1px !important;
		border-radius: var(--bs-border-radius-lg);
		color: inherit;
		transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;

		&:hover,
		&:focus-visible {
			border-color: var(--bs-primary) !important;
			box-shadow: 0 0.35rem 1rem rgb(var(--bs-primary-rgb) / 12%);
			transform: translateY(-2px);
			color: inherit;
			outline: none;
		}

		.card-body {
			padding: 1.5rem;
		}

		.card-title {
			transition: color 0.15s ease;
		}

		&:hover .card-title,
		&:focus-visible .card-title {
			color: var(--bs-primary);
		}
	}

	.hybrid-type-card__cta {
		display: inline-flex;
		align-items: center;
	}

	@media (max-width: 575.98px) {
		.hybrid-wizard__list {
			flex-direction: column;
		}

		.hybrid-wizard__divider {
			flex: 0 0 auto;
			inline-size: 2px;
			block-size: 1rem;
			margin-inline: 1.65rem;
		}
	}
}

/* Phone status card + header Zoom links */
.phone-status-card {
	.phone-status-card__stats {
		.phone-status-card__stat-value {
			font-size: 1.25rem;
			font-weight: 600;
			line-height: 1.2;
		}

		.phone-status-card__stat-label {
			font-size: 0.75rem;
			color: var(--bs-secondary-color);
			text-transform: uppercase;
			letter-spacing: 0.04em;
		}
	}
}

/* Compact phone chip — one surface with an overlaid detail tray. */
.phone-status-chip {
	--phone-chip-radius: 1.5rem;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-self: flex-start;
	inline-size: 18rem;
	max-inline-size: 100%;
	color: var(--bs-btn-color);
	background-color: transparent;
	border: var(--bs-border-width) solid var(--bs-btn-border-color);
	border-radius: var(--phone-chip-radius);
	transition:
		color 0.15s ease-in-out,
		background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out,
		box-shadow 0.2s ease-in-out;

	.phone-status-chip__toggle {
		position: relative;
		z-index: 2;
		width: 100%;
		padding: 0.7rem 1rem 0.8rem;
		color: inherit;
		background: transparent;
		border: 0;
		border-radius: inherit;
		line-height: 1.25;
		box-shadow: none;
	}

	.phone-status-chip__toggle:hover,
	.phone-status-chip__toggle:focus-visible,
	.phone-status-chip__toggle:active,
	.phone-status-chip__toggle[aria-expanded="true"] {
		color: var(--bs-btn-hover-color);
		background-color: var(--bs-btn-hover-bg);
		border: 0;
		box-shadow: none;
	}

	.phone-status-chip__toggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -3px;
	}

	.phone-status-chip__ddi {
		font-size: 1.25rem;
		font-weight: 600;
		letter-spacing: 0.01em;
	}

	.phone-status-chip__row {
		font-size: 0.9rem;
	}

	&:hover,
	&:has(.phone-status-chip__toggle:focus-visible),
	&:has(.phone-status-chip__details.show),
	&:has(.phone-status-chip__details.collapsing) {
		color: var(--bs-btn-hover-color);
		background-color: var(--bs-btn-hover-bg);
		border-color: var(--bs-btn-hover-border-color);
	}

	&:has(.phone-status-chip__details.show) {
		z-index: 1030;
	}

	.phone-status-chip__details {
		position: absolute;
		inset-block-start: calc(100% - 2rem);
		inset-inline-start: calc(-1 * var(--bs-border-width));
		z-index: 1;
		width: calc(100% + (2 * var(--bs-border-width)));
		color: var(--bs-btn-hover-color);
		background-color: var(--bs-btn-hover-bg);
		border: var(--bs-border-width) solid var(--bs-btn-hover-border-color);
		border-top: 0;
		border-radius: 0 0 var(--phone-chip-radius) var(--phone-chip-radius);
		box-shadow: 0 0.8rem 2rem rgb(15 23 42 / 18%);
		overflow: hidden;
	}

	.phone-status-chip__body {
		position: relative;
		padding-top: 2.5rem !important;
	}

	.phone-status-chip__body::before {
		content: "";
		position: absolute;
		inset-block-start: 2rem;
		inset-inline: 1rem;
		border-top: var(--bs-border-width) solid color-mix(in srgb, currentColor 30%, transparent);
	}

	.phone-status-chip__service {
		display: grid;
		grid-template-columns: 1.6rem minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.55rem;
		padding: 0.3rem 0.45rem;
		border-radius: 0.75rem;
		background-color: color-mix(in srgb, currentColor 7%, transparent);
	}

	.phone-status-chip__service.phone-status-chip__service--primary {
		background-color: color-mix(in srgb, currentColor 12%, transparent);
	}

	.phone-status-chip__service-state {
		font-size: 0.65rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		opacity: 0.85;
	}

	.phone-status-chip__numbers {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
		gap: 0.4rem;
	}

	.phone-status-chip__copy {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		min-width: 0;
		padding: 0.5rem 0.6rem;
		color: inherit;
		text-align: left;
		background-color: color-mix(in srgb, currentColor 8%, transparent);
		border: var(--bs-border-width) solid color-mix(in srgb, currentColor 22%, transparent);
		border-radius: 0.8rem;
		transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	}

	.phone-status-chip__copy:hover,
	.phone-status-chip__copy:focus-visible {
		background-color: color-mix(in srgb, currentColor 16%, transparent);
		border-color: color-mix(in srgb, currentColor 45%, transparent);
	}

	.phone-status-chip__copy:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.phone-status-chip__copy.is-copied {
		background-color: color-mix(in srgb, var(--bs-success) 35%, transparent);
	}

	.phone-status-chip__copy span {
		display: flex;
		min-width: 0;
		flex-direction: column;
	}

	.phone-status-chip__copy small {
		font-size: 0.56rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		opacity: 0.72;
	}

	.phone-status-chip__copy strong {
		overflow: hidden;
		font-size: 0.78rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.phone-status-chip__stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-radius: 0.9rem;
		background-color: color-mix(in srgb, currentColor 8%, transparent);
		overflow: hidden;
	}

	.phone-status-chip__stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0.55rem 0.25rem;
	}

	.phone-status-chip__stat + .phone-status-chip__stat {
		border-left: var(--bs-border-width) solid color-mix(in srgb, currentColor 20%, transparent);
	}

	.phone-status-chip__stat strong {
		font-size: 0.95rem;
		line-height: 1.1;
	}

	.phone-status-chip__stat small {
		margin-top: 0.2rem;
		font-size: 0.56rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		opacity: 0.75;
	}
}

@media (prefers-reduced-motion: reduce) {
	.phone-status-chip {
		transition: none;
	}
}

@media (max-width: 575.98px) {
	.phone-status-chip {
		inline-size: 100%;
	}
}

.nav-zoom-links {
	.nav-zoom-links__btn {
		color: var(--bs-body-color);
		padding-inline: 0.5rem;
	}
}

/* Announcements feed — today's birthday fanfare */
.announcement-birthday-today__fanfare {
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0.35em;
	animation: announcement-birthday-fanfare 1.8s ease-in-out infinite;
}

@keyframes announcement-birthday-fanfare {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.06);
		opacity: 0.9;
	}
}

/* Dashboard company news — fixed-width horizontal tiles */
.company-news__items {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0.65rem;
	overflow-x: auto;
	padding-block: 0.1rem 0.2rem;
	scrollbar-width: thin;
}

.company-news .card-body {
	padding-block: 0.75rem;
}

.company-news__item {
	display: flex;
	flex: 0 0 16rem;
	flex-direction: row;
	align-items: center;
	gap: 0.55rem;
	width: 16rem;
	min-height: 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--bs-border-color-translucent);
	border-radius: 0.65rem;
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	text-decoration: none;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.15s ease;
}

a.company-news__item:hover,
a.company-news__item:focus-visible {
	border-color: color-mix(in srgb, var(--bs-primary) 50%, var(--bs-border-color));
	box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.07);
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	text-decoration: none;
}

.company-news__item--lead {
	border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
	background: color-mix(in srgb, var(--bs-primary) 7%, var(--bs-body-bg));
}

.company-news__item--birthday {
	border-color: color-mix(in srgb, var(--bs-warning) 50%, var(--bs-border-color));
	background: var(--bs-warning-bg-subtle);
}

.company-news__item--birthday-today {
	flex-basis: 18rem;
	width: 18rem;
	border-color: color-mix(in srgb, var(--bs-warning) 65%, var(--bs-border-color));
	box-shadow: 0 0.15rem 0.5rem color-mix(in srgb, var(--bs-warning) 18%, transparent);
}

.company-news__birthday-kicker {
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bs-warning-text-emphasis);
}

.company-news__birthday-kicker--upcoming {
	font-weight: 600;
	color: var(--bs-secondary-color);
}

.company-news__fanfare {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	font-size: 1.125rem;
	line-height: 1;
}

.company-news__birthday-popper {
	flex-shrink: 0;
	color: var(--bs-warning);
	transform-origin: center bottom;
	animation: company-news-birthday-popper 1.4s ease-in-out infinite;
}

@keyframes company-news-birthday-popper {
	0%, 100% {
		transform: rotate(-14deg) scale(1);
	}

	25% {
		transform: rotate(10deg) scale(1.15);
	}

	50% {
		transform: rotate(-8deg) scale(1);
	}

	75% {
		transform: rotate(12deg) scale(1.1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.company-news__birthday-popper {
		animation: none;
	}
}

.company-news__item--static {
	cursor: default;
}

.company-news__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	font-size: 1rem;
	line-height: 1;
}

.company-news__icon--birthday {
	width: auto;
}

.company-news__text {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.1rem;
}

.company-news__title {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.company-news__date {
	font-size: 0.75rem;
	line-height: 1.25;
	color: var(--bs-secondary-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 1399.98px) {
	.company-news__item:nth-child(n + 5) {
		display: none;
	}
}

@media (max-width: 1199.98px) {
	.company-news__item:nth-child(n + 4) {
		display: none;
	}
}

@media (max-width: 991.98px) {
	.company-news__item:nth-child(n + 3) {
		display: none;
	}
}

@media (max-width: 575.98px) {
	.company-news__item:nth-child(n + 2) {
		display: none;
	}

	.company-news__item {
		flex-basis: 100%;
		width: 100%;
	}

	.company-news__item--birthday-today {
		flex-basis: 100%;
		width: 100%;
	}
}
.page-heading-logo {
	display: inline-block;
	width: auto;
	height: auto;
	max-width: min(180px, 40vw);
	max-height: 48px;
	object-fit: contain;
	vertical-align: middle;
	background: #fff;
	padding: 6px;
	border-radius: 6px;
}